150 lines
4.5 KiB
Plaintext
150 lines
4.5 KiB
Plaintext
---
|
|
import MobileNavigation from '@/components/MobileNavigation.tsx'
|
|
import { useTranslations } from '@/i18n/utils'
|
|
import BaseLayout from '../layouts/BaseLayout.astro'
|
|
import Section from '@/components/Section.astro'
|
|
import { Swiper } from '@/components/swiper'
|
|
|
|
import type { CollectionEntry } from 'astro:content'
|
|
import { getEntry } from 'astro:content'
|
|
import CoachCard from '@/components/CoachCard.astro'
|
|
import ServiceCard from '@/components/ServiceCard.astro'
|
|
import { Image } from 'astro:assets'
|
|
import Marquee from '@/components/Marquee.astro'
|
|
import { Reviews } from '@/components/Reviews.tsx'
|
|
|
|
type Props = CollectionEntry<'pages'>['data']
|
|
|
|
const navItems = [
|
|
{ key: 'nav.coaches', href: '#coaches' },
|
|
{ key: 'nav.slider', href: '#image-slider' },
|
|
{ key: 'nav.services', href: '#services' },
|
|
{ key: 'nav.reviews', href: '#reviews' },
|
|
{ key: 'nav.contact', href: '#contacts' },
|
|
] as const
|
|
|
|
const { lang } = Astro.params
|
|
const page = await getEntry('pages', 'main')
|
|
const { slider, coaches, services, hero, marquee, reviews } = page?.data || {}
|
|
const t = useTranslations(lang)
|
|
---
|
|
|
|
<BaseLayout title={t('home.title')}>
|
|
<header
|
|
class="fixed left-0 right-0 top-0 z-50 flex h-[var(--header-height)] items-center justify-between bg-bg-main px-6 md:px-10"
|
|
>
|
|
<a class="text-2xl font-bold text-text-light" set:html={t('header.logo')} href="#hero" />
|
|
<nav class="hidden md:block">
|
|
<ul class="grid grid-flow-col gap-6">
|
|
{
|
|
navItems.map((item) => (
|
|
<li>
|
|
<a href={item.href}>{t(item.key)}</a>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
</nav>
|
|
<MobileNavigation navItems={navItems} client:visible />
|
|
</header>
|
|
|
|
{
|
|
hero && (
|
|
<Section id="hero" className="md:flex-row mt-16 md:mt-0 p-0 md:p-0">
|
|
<div class="mb-8 px-6 py-10 md:mb-0 md:w-1/2 md:p-24">
|
|
<h1 class="mb-4 text-4xl font-bold leading-tight md:text-6xl" set:html={hero.title} />
|
|
<p class="text-brand-text mb-6">{hero.description}</p>
|
|
{hero.cta && (
|
|
<div class="flex space-x-4">
|
|
<a href="#services" class="brand-btn">
|
|
{hero.cta?.title}
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div class="relative hidden md:block md:w-1/2">
|
|
<Image src={hero.image} alt={hero.imageAlt} class="absolute h-full w-full object-cover" />
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|
|
|
|
{
|
|
marquee && (
|
|
<section class="min-h-[105px] overflow-clip bg-brand">
|
|
<Marquee texts={marquee} />
|
|
</section>
|
|
)
|
|
}
|
|
|
|
{
|
|
coaches && (
|
|
<Section id="coaches" title={t('coaches.title')} description={t('coaches.subtitle')}>
|
|
<div class="grid w-full grid-flow-col place-items-center gap-6 overflow-x-scroll md:gap-14">
|
|
{coaches.map((coach) => (
|
|
<CoachCard {...coach} />
|
|
))}
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|
|
|
|
{
|
|
slider && (
|
|
<Section
|
|
id="image-slider"
|
|
title={t('slider.title')}
|
|
description={t('slider.subtitle')}
|
|
className="bg-bg-light"
|
|
>
|
|
<Swiper
|
|
className="h-[540px]"
|
|
client:visible
|
|
images={slider.map(({ image, imageAlt }) => ({ ...image, alt: imageAlt }))}
|
|
/>
|
|
</Section>
|
|
)
|
|
}
|
|
|
|
{
|
|
services && (
|
|
<Section id="services" title={t('services.title')}>
|
|
<div class="grid place-items-center gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-3">
|
|
{services.map((service) => (
|
|
<ServiceCard {...service} />
|
|
))}
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|
|
|
|
{
|
|
reviews && (
|
|
<Section id="reviews" title={t('reviews.title')}>
|
|
<div class="-ml-6 flex w-[calc(100%+(1.5rem*2))] md:-ml-24 md:w-[calc(100%+(6rem*2))]">
|
|
<Reviews client:visible reviews={reviews} lang={lang} />
|
|
</div>
|
|
</Section>
|
|
)
|
|
}
|
|
|
|
<Section className="px-0 md:px-0" id="contacts">
|
|
<script
|
|
type="text/javascript"
|
|
charset="utf-8"
|
|
async
|
|
src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A069b17526dc83cbf87c488f13ae089eb3af0f8f74af57e1be82e183434693562&width=100%25&height=400&lang=ru_RU&scroll=true"
|
|
></script>
|
|
</Section>
|
|
|
|
<footer class="py-8 text-center">
|
|
<div class="container mx-auto px-6 md:px-10">
|
|
<div class="mb-4 text-2xl font-bold text-text-light" set:html={t('footer.logo')} />
|
|
<p class="text-light text-sm">
|
|
© {new Date().getFullYear()}
|
|
{t('footer.copyright')}
|
|
</p>
|
|
</div>
|
|
</footer>
|
|
</BaseLayout>
|