technical/landing into [email protected] 🐢 fix landing styles

app/(landing)/(components)/ActivitiesSection/ActivitiesSection.tsx

@@ -1,13 +1,10 @@
-import { ChevronRightIcon, Clock4Icon, UserRoundIcon } from 'lucide-react';
+import { ChevronRightIcon } from 'lucide-react';
 import Link from 'next/link';
 
 import { I18nText } from '@/components/common';
 import {
   ActivityCard,
   ActivityCardCategory,
-  ActivityCardContent,
-  ActivityCardContentItem,
-  ActivityCardDivider,
   ActivityCardHeader,
   ActivityCardImage,
   ActivityCardName,
@@ -43,8 +40,8 @@ export const ActivitiesSection = async ({ cityId }: ActivitiesSectionProps) => {
   if (!getActivityResponse.rows.length) return null;
 
   return (
-    <section id='activities' className='container py-12'>
-      <div className='flex items-center justify-between'>
+    <section id='activities' className='container max-w-[1160px] py-12'>
+      <div className='mb-8 flex items-center justify-between'>
         <Typography tag='h2' variant='h1' className='text-[21px] lg:text-4xl'>
           <I18nText path='landing.activities.title' />
         </Typography>
@@ -55,34 +52,21 @@ export const ActivitiesSection = async ({ cityId }: ActivitiesSectionProps) => {
           <ChevronRightIcon className='text-muted-foreground' />
         </Link>
       </div>
-      <div className='mt-16 flex flex-col items-center justify-center gap-8 md:grid md:grid-cols-2 md:justify-between lg:grid-cols-3'>
+      <div className='grid grid-cols-2 gap-x-5 gap-y-5 lgx:w-full md:grid-cols-3 md:gap-x-10 md:gap-y-8'>
         {getActivityResponse.rows.map((activity) => {
           const activityCover = activity.media.find((item) => item.flag === 'AVATAR')!;
 
           return (
             <ActivityCard>
-              <ActivityCardImage src={activityCover.url} alt={activity.name} />
+              <ActivityCardImage
+                src={activityCover.url}
+                alt={activity.name}
+                className='rounded-[12px] md:rounded-[30px]'
+              />
               <ActivityCardHeader>
+                <ActivityCardName className='text-gray-one'>{activity.name}</ActivityCardName>
                 <ActivityCardCategory>{activity.category.RU}</ActivityCardCategory>
-                <ActivityCardName>{activity.name}</ActivityCardName>
               </ActivityCardHeader>
-              <ActivityCardDivider />
-              <ActivityCardContent>
-                <ActivityCardContentItem>
-                  <UserRoundIcon className='size-6 stroke-muted-foreground' />
-                  <I18nText
-                    path='landing.activities.card.minimumAge'
-                    values={{ age: activity.ageLimit[0] }}
-                  />
-                </ActivityCardContentItem>
-                <ActivityCardContentItem>
-                  <Clock4Icon className='size-6 stroke-muted-foreground' />
-                  <I18nText
-                    path='landing.activities.card.duration'
-                    values={{ duration: activity.duration }}
-                  />
-                </ActivityCardContentItem>
-              </ActivityCardContent>
             </ActivityCard>
           );
         })}

app/(landing)/(components)/BannerSection/BannerSection.tsx

@@ -4,65 +4,128 @@ import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
 
-import bannerImage from '@/assets/images/landing/banner.webp';
+import airplane from '@/assets/images/landing/banner/airplane.webp';
+import bigImage from '@/assets/images/landing/banner/bigImage.webp';
+import circularLogo from '@/assets/images/landing/banner/circularLogo.webp';
+import greenArrow from '@/assets/images/landing/banner/greenArrow.webp';
+import lamp from '@/assets/images/landing/banner/lamp.webp';
+import redArrow from '@/assets/images/landing/banner/redArrow.webp';
+import smallGreenArrow from '@/assets/images/landing/banner/smallGreenArrow.webp';
+import stars from '@/assets/images/landing/banner/stars.webp';
+import whiteLines from '@/assets/images/landing/banner/whiteLines.webp';
+import yellowArrow from '@/assets/images/landing/banner/yellowArrow.webp';
+import yellowBoldArrow from '@/assets/images/landing/banner/yellowBoldArrow.webp';
 import { I18nText } from '@/components/common';
+import { TelegramColoredIcon } from '@/components/icons';
 import { buttonVariants, Typography } from '@/components/ui';
 import { cn } from '@/lib/utils';
 import { ROUTES } from '@/utils/constants';
 
 export const BannerSection = () => (
   <section
     id='banner'
-    className='container -mt-[72px] flex h-screen items-center justify-center pt-[72px] md:pt-0 4xl:h-fit'
+    className='container flex h-fit max-w-[1160px] justify-center md:pt-0 lg:justify-start 4xl:h-fit'
   >
-    <div className='mt-5 flex w-full flex-col items-center justify-between px-2 sm:-mt-0 lg:flex-row-reverse lg:gap-32 lg:py-32'>
-      <div className='-mr-10 w-full items-center  overflow-hidden lg:-mr-20'>
-        <Image src={bannerImage} alt='banner image' />
+    <div className='mt-5 flex flex-col items-center sm:-mt-0 md:px-10 lg:flex-row-reverse lg:items-start lg:justify-start lg:gap-16 lg:py-24 xl:px-0'>
+      <div className='relative mb-4 w-fit items-center px-10 lg:px-0'>
+        <Image
+          src={lamp}
+          alt='lamp'
+          className='absolute bottom-0 left-0 z-10 max-h-[30%] max-w-[20%] transition duration-1000 hover:-translate-y-2 hover:translate-x-1 hover:ease-linear'
+        />
+        <Image
+          src={stars}
+          alt='stars'
+          className='absolute left-5 top-[25%] z-10 size-[16%] transition duration-1000 hover:-translate-x-1 hover:translate-y-1 hover:ease-linear lg:left-0'
+        />
+        <Image
+          src={redArrow}
+          alt='redArrow'
+          className='absolute -top-6 left-10 z-10 max-h-[30%] max-w-[20%] transition duration-1000 hover:-translate-x-1 hover:translate-y-1 hover:ease-linear lg:-top-10'
+        />
+        <Image
+          src={whiteLines}
+          alt='whiteLines'
+          className='absolute left-[43%] top-[8%] z-10 max-h-[8%] max-w-[12%] transition duration-1000 hover:-translate-x-2 hover:translate-y-1 hover:ease-linear lg:left-[40%] lg:max-h-[10%] lg:max-w-[15%]'
+        />
+        <Image
+          src={yellowBoldArrow}
+          alt='yellowBoldArrow'
+          className='absolute -top-5 right-14 z-10 max-h-[26%] max-w-[13%] transition duration-1000 hover:-translate-y-1 hover:translate-x-1 hover:ease-linear lg:right-10 lg:max-w-[17%]'
+        />
+        <Image
+          src={airplane}
+          alt='airplane'
+          className='absolute -right-4 top-[40%] z-10 max-h-[35%] max-w-[35%] transition duration-1000 hover:-translate-y-2 hover:translate-x-2 hover:ease-linear lg:-right-20'
+        />
+        <Image
+          src={yellowArrow}
+          alt='yellowArrow'
+          className='absolute -bottom-3 right-6 z-10 max-h-[30%] max-w-[20%] transition duration-1000 hover:-translate-x-2 hover:translate-y-1 hover:ease-linear lg:bottom-0 lg:right-0'
+        />
+        <Image
+          src={bigImage}
+          alt='big image'
+          className='relative z-0 size-[100%] max-h-[500px] max-w-[517px] transition duration-1000 hover:-translate-x-2 hover:translate-y-1 hover:ease-linear'
+        />
       </div>
 
-      <div className='mt-4 flex w-full flex-col justify-center text-center lg:mb-20 lg:mt-8'>
-        <div className='flex flex-col gap-2 lg:gap-6 lg:text-left'>
-          <Typography tag='h1' variant='h1' className='text-2xl lg:text-[56px] lg:leading-[70px]'>
-            <I18nText path='landing.info.title' />
-          </Typography>
-
-          <Typography tag='p' variant='body1' className='text-wrap text-sm leading-5 lg:text-2xl'>
+      <div className='mt-4 flex w-full max-w-[480px] flex-col justify-center text-center lg:mb-20 lg:mt-8'>
+        <div className='flex w-full flex-col items-center gap-2 lg:items-start lg:gap-6 lg:text-left'>
+          <div className='relative max-w-[400px]'>
+            <Image
+              src={circularLogo}
+              alt='circular logo'
+              className='absolute -top-2 left-0 size-10 animate-spin-slow opacity-30 xs:-left-5 lg:-left-11 lg:-top-7 lg:size-24'
+            />
+            <Typography
+              tag='h1'
+              variant='h1'
+              className='text-2xl text-gray-one lg:text-5xl lg:leading-[60px]'
+            >
+              <I18nText path='landing.info.title' />
+            </Typography>
+          </div>
+          <Typography
+            tag='p'
+            variant='body1'
+            className='w-full max-w-[930px] text-wrap text-sm leading-5 text-gray-two lg:text-lg'
+          >
             <I18nText path='landing.info.subtitle' />
           </Typography>
         </div>
-
-        <div className='mt-6 flex w-full  flex-col items-center gap-4 lg:mt-10 lg:w-[90%] lg:flex-row lg:gap-8'>
-          <Link
-            href={{
-              pathname: ROUTES.APP.AUTH,
-              query: { step: 'login' }
-            }}
-            className={cn(buttonVariants({ size: 'lg', variant: 'primary' }), 'w-full max-w-96')}
-          >
-            <I18nText path='button.auth' />
-          </Link>
-          <div className='w-full max-w-96 mdx:rounded-md mdx:border mdx:border-taiga'>
+        <div className='flex flex-col items-center lg:flex-row'>
+          <div className='relative mt-6 flex flex-col justify-center lg:mt-8 lg:gap-6'>
             <Link
-              href={{
-                pathname: ROUTES.APP.AUTH,
-                query: { step: 'excursion' }
-              }}
-              className={cn(buttonVariants({ size: 'lg', variant: 'white' }), 'w-full')}
+              href={ROUTES.TELEGRAM}
+              className={cn(
+                buttonVariants({ size: 'lg', variant: 'primary' }),
+                'flex h-[52px] w-full max-w-[132px] gap-2 bg-sky-500 px-6 text-xs font-normal hover:bg-sky-500'
+              )}
             >
-              <I18nText path='button.getQR' />
+              <TelegramColoredIcon className='size-10 bg-sky-500' />
+              <I18nText path='button.telegram' />
             </Link>
+            <Image
+              src={greenArrow}
+              alt='greenArrow'
+              className='ml-14 hidden h-[55px] w-[118px] lg:block'
+            />
+            <Image
+              src={smallGreenArrow}
+              alt='smallGreenArrow'
+              className='absolute -bottom-10 -left-11 h-[47px] w-[22px] rotate-12 lg:hidden'
+            />
           </div>
-        </div>
-
-        <div className='mb-8 mt-4 block w-full text-center md:hidden'>
-          <Link href={ROUTES.ORG.AUTH}>
+          <div className='mb-20 pt-14 lg:mb-0 lg:pt-2'>
             <Typography
-              variant='body2'
-              className='text-gray-two hover:font-semibold hover:text-taiga'
+              tag='p'
+              variant='body1'
+              className='text-md w-full leading-[22px] lg:max-w-[226px] lg:text-left'
             >
-              <I18nText path='button.organizationsEntrance' />
+              <I18nText path='landing.telegram.description' />
             </Typography>
-          </Link>
+          </div>
         </div>
       </div>
     </div>

app/(landing)/(components)/FAQSection/FAQSection.tsx

@@ -49,14 +49,14 @@ export const FAQSection = ({ cityId }: FAQSectionProps) => {
               >
                 <Typography
                   tag='p'
-                  variant='h4'
-                  className='text-left font-normal text-muted-foreground hover:font-medium hover:text-taiga mdx:text-lg'
+                  variant='body2'
+                  className='text-left text-muted-foreground hover:font-medium hover:text-taiga lg:text-[20px]'
                 >
                   {item.question}
                 </Typography>
               </AccordionTrigger>
               <AccordionContent className='py-2'>
-                <Typography tag='p' className='text-base font-normal lg:text-xl'>
+                <Typography variant='body2' tag='p' className='lg:text-lg'>
                   {item.answer}
                 </Typography>
               </AccordionContent>

app/(landing)/(components)/FAQSection/constants/faq.ts

@@ -2,36 +2,30 @@ export const FAQ = [
   {
     question: 'Как работает квест?',
     answer:
-      'Получите QR-код, проходите интересные активности, зарабатывает шишки опыта и орешки, которые в дальнейшем можно обменивать на увлекательные призы.'
+      'Вы создаете себе ID участника в чат боте, проходите интересные активности от наших партнеров, зарабатываете шишки опыта.'
   },
   {
     question: 'Кто может стать участником?',
     answer:
-      'Участником квеста может быть любой человек, как дети, так и взрослые, обладающие QR-кодом и, при желании, паспортом участника таёжной цивилизаци. В описании каждой активности указана возрастная группа'
+      'Участником квеста может быть любой человек старше 5 лет. Проходите активности всей семьёй.'
   },
   {
     question: 'Сколько это стоит?',
     answer:
-      'Большинство активностей предлагается бесплатно. Крупные мастер-классы, требующие дополнительных материалов и времени, могут стоить не более 700 рублей. Информация о стоимости доступна в описании каждой активности.'
+      'Большинство активностей предлагается бесплатно. Крутые мастер-классы, требующие дополнительных материалов и времени, могут стоить не более 600 рублей. Информация о стоимости доступна в описании каждой активности.'
   },
   {
-    question: 'Для чего нужен QR код?',
+    question: 'Для чего нужен ID?',
     answer:
-      'QR-код является электронным идентификатором участника, который позволяет начислять шишки опыта и орешки за участие в различных активностях в рамках квеста.'
+      'ID является электронным идентификатором участника, который позволяет начислять шишки опыта за участие в различных активностях в рамках квеста.'
   },
   {
-    question: 'Как начислять шишки и орешки своему ребенку?',
-    answer:
-      'Перейдите в настройки профиля и включите режим "Я родитель (опекун)". После активации этого режима, появится возможность добавить новый QR-код, предназначенный для вашего ребенка. Этот новый QR-код будет доступен на главной странице вашего профиля. Также Вы можете передать userID и код своему ребенку от дополнительного QR. Данный способ позволит вам эффективно начислять шишки опыта и орешки вашему ребенку за участие в активностях и мероприятиях, предоставляемых в рамках квеста.'
-  },
-  {
-    question: 'Зачем собирать шишки опыта и орешки?',
-    answer:
-      'Шишки опыта являются счетчиком пройденных уникальных активностей, а орешки - баллами, начисленными за прохождение активности. Они обеспечивают возможность обмена на ценные призы.'
+    question: 'Зачем собирать шишки опыта?',
+    answer: 'Шишки опыта являются счетчиком пройденных уникальных активностей.'
   },
   {
     question: 'Для чего нужен паспорт и как его получить?',
     answer:
-      'Паспорт жителя таёжной цивилизации - это бумажный вариант, который также позволяет вам сохранить информацию о вашем участии в квесте. В том числе он будет связан с QR-кодом, что обеспечивает возможность восстановления информации в случае утери доступа к QR. Стоимость 250 рублей. Для его приобретения обратитесь в штаб квеста по адресу {headquarters}.'
+      'Паспорт жителя таёжной цивилизации - это бумажный вариант, который также позволяет вам сохранить информацию о вашем участии в квесте. Стоимость 250 рублей. Для его приобретения обратитесь в штаб квеста Вашего города.'
   }
 ];

app/(landing)/(components)/FeedbackSection/FeedbackSection.tsx

@@ -13,7 +13,7 @@ import { comments } from './constants/comments';
 
 export const FeedbackSection = () => (
   <section id='feedback' className='w-full bg-muted py-12'>
-    <Carousel className='container'>
+    <Carousel className='container max-w-[1160px]'>
       <div className='flex items-center justify-start lg:justify-center'>
         <Typography tag='h2' variant='h1' className='text-center text-[21px] lg:text-4xl'>
           <I18nText path='landing.feedback.title' />
@@ -31,7 +31,7 @@ export const FeedbackSection = () => (
       </div>
       <CarouselContent className='mt-8'>
         {comments.map((comment, index) => (
-          <CarouselItem key={index} className='w-full md:basis-1/2 xl:basis-1/3'>
+          <CarouselItem key={index} className='w-full sm:basis-1/2 2lg:basis-1/3 xl:pl-10'>
             <CommentCard {...comment} />
           </CarouselItem>
         ))}

app/(landing)/(components)/FeedbackSection/components/CommentCard/CommentCard.tsx

@@ -10,12 +10,12 @@ export interface CommentCardProps {
 }
 
 export const CommentCard = ({ avatar, text, author }: CommentCardProps) => (
-  <div className='flex h-full flex-col items-center gap-4 rounded-2xl bg-white px-8 pt-12 md:rounded-3xl'>
-    <Image src={avatar} alt='avatar' className='size-32' />
-    <Typography variant='h4' className='text-lg text-primary lg:text-xl'>
+  <div className='flex h-full flex-col items-center gap-4 rounded-2xl bg-white px-8 py-12 md:rounded-3xl 2lg:max-w-[360px]'>
+    <Image src={avatar} alt='avatar' className='size-28' />
+    <Typography variant='h4' className='text-lg font-medium text-gray-one lg:text-xl'>
       {author}
     </Typography>
-    <Typography className='mt-3 text-center text-base font-normal text-gray-two lg:text-xl'>
+    <Typography className='mt-1 text-center text-base font-normal text-gray-two lg:text-lg'>
       {text}
     </Typography>
   </div>