first
This commit is contained in:
sbb45
@@ -0,0 +1,182 @@
|
||||
'use client'
|
||||
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import {
|
||||
AppSection, AppText, FaqAccordion, FaqTitle, Footer,
|
||||
MainPage,
|
||||
HeaderBlock, HeaderPhone,
|
||||
Section,
|
||||
StartBlock
|
||||
} from "@/app/main.styled";
|
||||
import StyledButton from "@/components/StyledButton";
|
||||
import RoomList from "@/components/RoomsList";
|
||||
import PriceList from "@/components/PriceList";
|
||||
import FeaturesList from "@/components/FeaturesList";
|
||||
import GameList from "@/components/GameList";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import Accordion from "@/components/Accordion";
|
||||
import HeaderPage from "@/components/HeaderPage";
|
||||
import {useBronStore} from "@/store/useBronStore";
|
||||
import BronModal from "@/components/BronModal";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
type Faq = {
|
||||
id: number
|
||||
title: string
|
||||
description: string
|
||||
}
|
||||
type Contacts = {
|
||||
id: number
|
||||
type: string
|
||||
value: string
|
||||
}
|
||||
|
||||
|
||||
export default function Home() {
|
||||
const open = useBronStore((s) => s.open);
|
||||
const [faqs, setFaqs] = useState<Faq[]>([])
|
||||
const [contacts, setContacts] = useState<Contacts[]>([])
|
||||
|
||||
const inst = contacts.find((c)=> c.type ==='inst');
|
||||
const phone = contacts.find((c)=> c.type ==='phone');
|
||||
const tg = contacts.find((c)=> c.type ==='tg');
|
||||
const gis2 = contacts.find((c)=> c.type ==='gis2');
|
||||
const whatsapp = contacts.find((c)=> c.type ==='whatsapp');
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchFaq() {
|
||||
const res = await fetch(`/api/faq`);
|
||||
const data = await res.json();
|
||||
setFaqs(data);
|
||||
}
|
||||
async function fetchContact() {
|
||||
const res = await fetch(`/api/contacts`);
|
||||
const data = await res.json();
|
||||
setContacts(data);
|
||||
}
|
||||
|
||||
fetchFaq();
|
||||
fetchContact();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<MainPage>
|
||||
<HeaderPage whatsapp={whatsapp?.value} tg={tg?.value} phone={phone?.value} inst={inst?.value} gis2={gis2?.value} />
|
||||
<main>
|
||||
<StartBlock>
|
||||
|
||||
<Image src={'/images/startLeft.png'} alt={'startLeft'} width={482} height={440} />
|
||||
|
||||
<motion.h1
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.5 }}
|
||||
>
|
||||
Выигрывай чаще и получай удовольствие <span>от компьютерных игр</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.div
|
||||
initial={{ scale: 0.8, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.8 }}
|
||||
>
|
||||
<StyledButton onClick={() => open('start')} label={'Забронировать место'} padding={'14px 46px'} fontSize={'42px'} />
|
||||
</motion.div>
|
||||
|
||||
|
||||
<Image src={'/images/startRight.png'} alt={'startRight'} width={422} height={410} quality={100} />
|
||||
</StartBlock>
|
||||
<Section className={'roomSection'}>
|
||||
<h2>В нашем клубе мы предлагаем только <span>современное и надёжное</span> оборудование, которое обеспечит вам <span>комфортную игру</span></h2>
|
||||
<RoomList />
|
||||
</Section>
|
||||
<Section>
|
||||
<PriceList />
|
||||
</Section>
|
||||
<Section>
|
||||
<FeaturesList />
|
||||
</Section>
|
||||
<Section>
|
||||
<GameList tg={tg?.value} whatsapp={whatsapp?.value} />
|
||||
</Section>
|
||||
<AppSection>
|
||||
<AppText>
|
||||
<StyledButton label={'Приложение'} padding={'12px 38px'} fontSize={'24px'} />
|
||||
<h2>Загрузи и бронируй заранее.</h2>
|
||||
<p>Следи за событиями, прокачивай профиль и получай вознаграждения. Пополнение счёта c <span>Kaspi</span> — в пару кликов.</p>
|
||||
<div>
|
||||
<Link href={'https://play.google.com/store/apps/details?id=com.f5computers.langame_aggregator'}>
|
||||
<Image src={'/icons/appGooglePlay.png'} alt={'google play'} width={220} height={84} loading={"lazy"} />
|
||||
</Link>
|
||||
<Link href={'https://apps.apple.com/us/app/langame/id1642484175?l=ru'}>
|
||||
<Image src={'/icons/appAppStore.png'} alt={'appStore'} width={235} height={84} loading={"lazy"} />
|
||||
</Link>
|
||||
</div>
|
||||
</AppText>
|
||||
<Image className={'phoneApp'} src={'/images/phone.png'} alt={'phone'} width={412} height={414} loading={"lazy"} />
|
||||
</AppSection>
|
||||
<FaqAccordion>
|
||||
<FaqTitle>
|
||||
<h2>FAQ</h2>
|
||||
<h3>Часто задаваемые вопросы</h3>
|
||||
</FaqTitle>
|
||||
{faqs.map((faqBlock)=>(
|
||||
<Accordion key={faqBlock.id} title={faqBlock.title}>
|
||||
{faqBlock.description}
|
||||
</Accordion>
|
||||
))}
|
||||
</FaqAccordion>
|
||||
</main>
|
||||
<Footer>
|
||||
<Link href='/' className={'logo'}>
|
||||
<Image src={'/icons/logo.png'} alt={'logo'} width={226} height={60} loading={'lazy'} />
|
||||
</Link>
|
||||
<Link href='/policy' className={'policy'}>
|
||||
Политика<br/> конфиденциальности
|
||||
</Link>
|
||||
<HeaderBlock className={'footerBlock'}>
|
||||
<div>{inst ? (
|
||||
<Link href={inst.value} target="_blank">
|
||||
<Image src="/icons/inst.png" alt="inst" width={60} height={60} loading="lazy" />
|
||||
</Link>
|
||||
) : (
|
||||
<Image src="/icons/inst.png" alt="inst" width={60} height={60} loading="lazy" />
|
||||
)}
|
||||
|
||||
{whatsapp ? (
|
||||
<Link href={whatsapp.value} target="_blank">
|
||||
<Image src="/icons/whatsapp.png" alt="whatsapp" width={58} height={58} loading="lazy" />
|
||||
</Link>
|
||||
) : (
|
||||
<Image src="/icons/whatsapp.png" alt="whatsapp" width={58} height={58} loading="lazy" />
|
||||
)}
|
||||
|
||||
{tg ? (
|
||||
<Link href={tg.value} className="tgLink" target="_blank">
|
||||
<Image src="/icons/tg.png" alt="tg" width={48} height={48} loading="lazy" />
|
||||
</Link>
|
||||
) : (
|
||||
<Image src="/icons/tg.png" alt="tg" width={48} height={48} loading="lazy" />
|
||||
)}
|
||||
|
||||
{gis2 ? (
|
||||
<Link href={gis2.value} className="gis2Link headerImage" target="_blank">
|
||||
<Image src="/icons/location.svg" alt="geo" width={37} height={50} loading="lazy" />
|
||||
</Link>
|
||||
) : (
|
||||
<Link href={'/'} className="gis2Link headerImage" target="_blank">
|
||||
<Image src="/icons/location.svg" alt="geo" width={37} height={50} loading="lazy" />
|
||||
</Link>
|
||||
)}</div>
|
||||
<HeaderPhone className={'footerPhone'}>
|
||||
<p style={{ marginBottom: 0 }}>{phone?.value}</p>
|
||||
<h4 onClick={() => open('zayvka-game')}>Заказать звонок</h4>
|
||||
</HeaderPhone>
|
||||
</HeaderBlock>
|
||||
</Footer>
|
||||
<BronModal />
|
||||
</MainPage>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user