123 lines
3.9 KiB
Text
123 lines
3.9 KiB
Text
---
|
|
import BaseHead from "@components/BaseHead.astro";
|
|
import Footer from "@/components/Footer/Footer.astro";
|
|
import Header from "@components/Header/Header.astro";
|
|
import { SITE_DESCRIPTION, SITE_TITLE } from "@consts";
|
|
import ContactForm from "@/components/ContactForm/ContactForm.astro";
|
|
import { Image } from "astro:assets";
|
|
import type { ImageMetadata } from "astro";
|
|
import Circle from "@images/main/services/circle.png";
|
|
import Rocket from "@images/main/about-us/rocket.png";
|
|
import IntroAstronaut from "@images/main/intro/astronaut.png";
|
|
import IntroSpaceship from "@images/main/intro/spaceship.svg";
|
|
import { useTranslations } from "@/i18n/utils";
|
|
import type { SupportedLang } from "@/i18n/ui";
|
|
|
|
import "../styles/index.css";
|
|
|
|
interface Props {
|
|
lang: SupportedLang;
|
|
}
|
|
|
|
const { lang } = Astro.props;
|
|
const t = useTranslations(lang);
|
|
|
|
const cards =
|
|
(t("services.cards") as Array<{ image: string; title: string; text: string }>) || [];
|
|
|
|
const images = import.meta.glob<{ default: ImageMetadata }>(
|
|
"../assets/images/main/services/*.svg",
|
|
{ eager: true },
|
|
);
|
|
|
|
const getImage = (imageName: string) => {
|
|
const path = `../assets/images/main/services/${imageName}`;
|
|
return images[path]?.default;
|
|
};
|
|
---
|
|
|
|
<!doctype html>
|
|
<html lang={lang}>
|
|
<head>
|
|
<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
|
|
</head>
|
|
<body>
|
|
<div class="main-page" id="top">
|
|
<div class="intro-bg">
|
|
<Header />
|
|
<section class="container intro" id="home">
|
|
<div class="intro__title">
|
|
<h1>
|
|
{t("intro.creating")} <span>{t("intro.websites")}</span>
|
|
</h1>
|
|
<ul class="intro__items" aria-label="Intro services">
|
|
<li>{t("intro.apps")}</li>
|
|
<li>{t("intro.shops")}</li>
|
|
<li>{t("intro.platforms")}</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="intro__image">
|
|
<Image src={IntroAstronaut} alt="" loading="eager" />
|
|
</div>
|
|
|
|
<div class="intro__rocket">
|
|
<Image src={IntroSpaceship} alt="" />
|
|
<p>{t("intro.explore")}</p>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="content container" id="services">
|
|
<h2>{t("services.title")}</h2>
|
|
<div class="container services">
|
|
<Image src={Circle} alt="circle" class="circle" />
|
|
{cards.map((card) => {
|
|
const imgSrc = getImage(card.image);
|
|
return (
|
|
imgSrc && (
|
|
<div class="card">
|
|
<Image src={imgSrc} alt="icon" />
|
|
<h3>{card.title}</h3>
|
|
<p>{card.text}</p>
|
|
</div>
|
|
)
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="content container" id="about-us">
|
|
<div class="about-us container">
|
|
<div>
|
|
<Image src={Rocket} alt="rocket" />
|
|
</div>
|
|
<div>
|
|
<h5>{t("about_us.sub_title")}</h5>
|
|
<p class="text">{t("about_us.text")}</p>
|
|
<div class="stats">
|
|
<div>
|
|
<h4>{t("about_us.amount_completed")}</h4>
|
|
<p>{t("about_us.completed")}</p>
|
|
</div>
|
|
<div>
|
|
<h4>{t("about_us.amount_webpages")}</h4>
|
|
<p>{t("about_us.webpages")}</p>
|
|
</div>
|
|
<div>
|
|
<h4>{t("about_us.amount_experience")}</h4>
|
|
<p>{t("about_us.experience")}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="content container" id="contact-us">
|
|
<ContactForm />
|
|
</section>
|
|
|
|
<Footer />
|
|
</div>
|
|
</body>
|
|
</html>
|