fixes, other sections of home page

public/img/pages/home/reviews/icons/aivazovsky.svg

@@ -0,0 +1,3 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M44.3161 33.0614L43.5775 30.2264C42.4436 30.5279 41.316 30.8476 40.1945 31.1854C39.6428 29.2884 39.0448 27.4081 38.4006 25.5446C35.2582 16.5177 30.9904 7.93354 25.7006 0L23.2984 1.63948C28.4519 9.36755 32.6085 17.7303 35.6674 26.5245C36.3033 28.3545 36.8902 30.2006 37.4282 32.0627C32.5303 33.6768 27.7501 35.6358 23.1225 37.9254L31.074 21.782L28.4835 20.4755L18.7588 40.2034C16.349 41.5309 13.9848 42.9505 11.666 44.4622L13.2364 46.9267C14.2917 46.2385 15.358 45.5692 16.4353 44.9187L12.7688 52.358L15.3614 53.6667L20.9479 42.3412C26.4755 39.3541 32.2502 36.8606 38.2061 34.8893C39.8078 41.0399 40.8774 47.32 41.4029 53.6583L44.2996 53.4091C43.757 46.8595 42.6493 40.3705 40.989 34.0162C42.0926 33.684 43.2071 33.3685 44.3327 33.0698" fill="white"/>
+</svg>

public/img/pages/home/reviews/icons/mosharov.svg

@@ -0,0 +1,10 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3308_8320)">
+<path d="M68.0636 28.9476C60.3809 35.421 44.637 47.0151 41.9433 45.1485C40.7227 44.3042 40.3314 39.7635 44.3395 29.111C45.4213 26.2386 46.9593 22.8009 45.3961 21.4978C44.2872 20.5801 42.3418 21.2354 39.4462 23.5167C33.9722 27.8354 29.4935 34.8209 26.5311 39.4442C25.3321 41.3144 24.0935 43.2471 23.6013 43.6087C23.4624 43.1425 23.5111 41.3199 25.1446 37.0839C26.0083 34.8465 27.6689 31.5539 29.4214 28.0685C31.2839 24.3684 33.2077 20.5434 34.1687 17.9629C35.0702 15.5438 36.9093 9.75507 34.6032 8.29777C31.8573 6.5615 25.6477 12.7467 20.5397 18.3281C17.9236 21.1876 15.6716 23.8948 13.7316 26.4258C11.6887 25.2512 9.48547 27.5436 7.15417 29.6249C2.45733 33.8132 -6.27647 41.6117 -12.7222 44.2859L-12.8124 44.3281L-12.8935 44.3667C-14.473 45.0017 -15.91 45.3265 -17.109 45.1981C-17.9117 45.1433 -18.6621 44.7735 -19.2023 44.1666C-19.2575 44.0982 -19.3087 44.0265 -19.3555 43.9519C-19.5015 43.7222 -19.5903 43.4597 -19.6141 43.1873C-19.638 42.9148 -19.5963 42.6405 -19.4926 42.3881L-20.7384 41.7825C-20.9402 42.2448 -21.0274 42.7504 -20.9925 43.255C-20.9576 43.7596 -20.8017 44.2479 -20.5383 44.6769C-20.5185 44.7117 -20.495 44.7466 -20.4734 44.7833L-20.4896 44.7961C-20.4247 44.8842 -20.3526 44.965 -20.2823 45.0476C-19.7414 45.7487 -18.6361 46.6242 -16.5284 46.6994C-16.4611 46.6994 -16.3926 46.6994 -16.3228 46.6994C-15.1419 46.6994 -13.694 46.3048 -12.2138 45.5817C-5.54263 42.8286 2.98022 35.2191 8.07012 30.6784C9.5558 29.3533 11.3606 27.1691 12.8246 27.6298C4.9022 38.3558 3.0253 43.6876 4.64981 45.9304C4.81438 46.1627 5.03116 46.3516 5.2821 46.4813C5.53303 46.6109 5.81083 46.6775 6.09222 46.6756C6.50948 46.6646 6.91882 46.5573 7.2894 46.3617C11.0144 44.5263 17.0257 32.3449 15.1091 27.8537C15.0278 27.6607 14.9281 27.4763 14.8116 27.3031C16.6921 24.8382 18.9242 22.164 21.562 19.277C31.0188 8.94012 33.379 9.16957 33.8766 9.48159C34.7673 10.045 34.3274 13.5451 32.8759 17.4526C31.9456 19.9579 30.038 23.748 28.1881 27.4114C26.4175 30.9298 24.7444 34.2519 23.8609 36.5553C22.1769 40.918 21.755 43.6307 22.5988 44.6163C22.7608 44.8042 22.9732 44.9399 23.2099 45.0067C23.4466 45.0735 23.6972 45.0686 23.9312 44.9925C24.7137 44.7943 25.5088 43.6068 27.6905 40.2022C30.6023 35.6578 35.0035 28.7935 40.2936 24.618C43.6814 21.9457 44.4801 22.5458 44.5126 22.5752C44.9129 22.9092 44.5397 24.651 43.0936 28.4668C40.9174 34.206 38.6799 42.579 40.1962 45.4936C40.6578 46.3801 41.9307 48.8854 49.2654 44.4346C54.6401 41.1731 65.2509 32.8478 70 27.7326L68.0636 28.9476ZM6.68538 45.099C6.00564 45.4312 5.83258 45.1908 5.76767 45.099C4.89321 43.8932 5.83077 39.4735 13.8812 28.5457C15.3056 32.4385 9.71263 43.6123 6.68538 45.1008V45.099Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_3308_8320">
+<rect width="56" height="56" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/img/pages/home/reviews/icons/residence.svg

@@ -0,0 +1,8 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M51.2877 4.86014V4.6665H50.9331H28.4283H5.11739H4.73048H4.66602V51.3332H4.73048H27.9769H28.0091H28.396H51.2555V5.27969V5.24742C51.3522 5.11832 51.3522 4.98923 51.2877 4.86014ZM5.53653 6.76424L9.24434 14.1547C7.60001 16.4139 6.31033 18.9634 5.53653 21.7066V6.76424ZM5.53653 26.5153C5.82671 22.223 7.30984 18.2857 9.63125 14.9938L27.3643 50.5263C15.725 50.2036 6.2781 41.0381 5.5043 29.4844V26.5153H5.53653ZM27.6545 49.2354L10.1794 14.2516C14.2418 8.99108 20.529 5.57015 27.6545 5.47333V49.2354ZM28.4283 49.2354V5.47333C35.5215 5.60242 41.8086 9.05562 45.8389 14.3161L28.4283 49.2354ZM46.387 15.0584C48.9663 18.7052 50.4817 23.1912 50.4817 27.9998C50.4817 40.1667 40.7769 50.1391 28.6862 50.4941L46.387 15.0584ZM34.0383 5.47333H50.2882L46.258 13.5416C43.195 9.66881 38.9391 6.79652 34.0383 5.47333ZM21.9154 5.47333C17.0469 6.79652 12.8232 9.63654 9.76023 13.477L5.79448 5.47333H21.9154ZM5.53653 50.5263V34.2608C7.72898 42.1677 14.0162 48.3641 21.9154 50.5263H5.53653ZM50.4817 50.5263H34.0383C42.0343 48.3641 48.3215 42.0708 50.4817 34.0671V50.5263ZM50.4817 21.9325C49.7401 19.1248 48.4504 16.5429 46.8061 14.2516L50.4817 6.86106V21.9325Z" fill="white"/>
+<path d="M4.66602 51.3332V32.6665C7.1647 41.7406 14.3301 48.8517 23.3327 51.3332H4.66602Z" fill="white"/>
+<path d="M51.334 51.3335H30.334C42.1465 48.7085 48.709 40.8335 51.334 30.3335V51.3335Z" fill="white"/>
+<path d="M23.3327 4.6665C17.7047 6.18671 12.8108 9.54529 9.28023 13.9998L4.66602 4.6665H23.3327Z" fill="white"/>
+<path d="M27.9993 4.6665C15.0821 4.73317 4.66602 15.1665 4.66602 27.9998C4.66602 40.8332 15.1163 51.2665 27.9993 51.3332V4.6665Z" fill="white"/>
+<path d="M27.9993 4.6665H4.66602V51.3332H27.9993V4.6665Z" fill="white"/>
+</svg>

src/app/blog/page.tsx

@@ -4,8 +4,8 @@ import { Title } from '@/ui/Title';
 
 export default function BlogPage() {
   return (
-    <div className="lg:pt-20 pt-14">
-      <div className="sm:pb-5 pb-4 flex flex-col justify-between border-b lg:px-10 px-4 border-[#3D425C]">
+    <div>
+      <div className="sm:pb-5 pb-4 flex flex-col justify-between border-b border-[#3D425C]">
         <Title className="lg:mb-14 sm:mb-8 mb-4">Блог</Title>
         <PostsFilters />
       </div>

src/app/layout.tsx

@@ -23,9 +23,9 @@ export default function RootLayout({
 
   return (
     <html lang="en">
-      <body className="min-h-screen flex flex-col justify-between">
+      <body className="min-h-screen flex flex-col justify-between lg:px-6">
         <DynamicHeader />
-        <main className="flex-1">{children}</main>
+        <main className="flex-1 lg:pt-40">{children}</main>
         <Feedback />
         <Footer />
         <ModalContainer />

src/app/page.tsx

@@ -1,17 +1,20 @@
 import { AvailablesSlider } from '@/components/pages/MainPage/Availables/AvailablesSlider';
 import { Calculator } from '@/components/pages/MainPage/Calculator/Calculator';
+import { Clients } from '@/components/pages/MainPage/Clients';
 import { Demoversions } from '@/components/pages/MainPage/Demoversions';
 import { IntegrationsSlider } from '@/components/pages/MainPage/Integrations/IntegrationsSlider';
 import { Motivation } from '@/components/pages/MainPage/Motivation';
 import { ProjectManagment } from '@/components/pages/MainPage/ProjectManagment';
-import { RecentWorks } from '@/components/pages/MainPage/RecentWorks';
+import { Projects } from '@/components/pages/MainPage/Projects';
+import { Reviews } from '@/components/pages/MainPage/Reviews';
 import { Showreel } from '@/components/pages/MainPage/Showreel';
 import { Statistics } from '@/components/pages/MainPage/Statistics';
 import { Technology } from '@/components/pages/MainPage/Technology';
+import { Winners } from '@/components/pages/MainPage/Winners';
 
 export default function Home() {
   return (
-    <div className="lg:pt-40 lg:px-6 lg:pb-24">
+    <div>
       <Motivation />
       <Showreel />
       <Statistics />
@@ -60,7 +63,10 @@ export default function Home() {
       <Demoversions />
       <ProjectManagment />
       <Calculator />
-      <RecentWorks />
+      <Reviews />
+      <Winners />
+      <Projects />
+      <Clients />
     </div>
   );
 }

src/app/projects/page.tsx

@@ -5,7 +5,7 @@ import { Title } from '@/ui/Title';
 export default function ProjectsPage() {
   return (
     <div className="lg:pt-20 pt-14">
-      <div className="sm:pb-5 pb-4 flex flex-col justify-between border-b lg:px-10 sm:px-6 px-4 border-[#3D425C]">
+      <div className="sm:pb-5 pb-4 flex flex-col justify-between border-b border-[#3D425C]">
         <Title className="lg:mb-14 sm:mb-8 mb-4">Проекты</Title>
         <ProjectsFilters />
       </div>

src/components/Layout/Feedback.tsx

@@ -9,9 +9,9 @@ import { ContactsForm } from './ContactsForm';
 
 export function Feedback() {
   return (
-    <div className="lg:pt-40 pt-14 sm:px-6 px-4 lg:pb-10 sm:pb-20 pb-6">
-      <div className="lg:flex">
-        <div className="sm:max-lg:grid grid-cols-2 max-lg:mb-6 min-w-[calc(25vw-24px)]">
+    <div className="mt-[312px]">
+      <div className="lg:grid grid-cols-[1fr_3fr]">
+        <div className="sm:max-lg:grid grid-cols-2 max-lg:mb-6 col-span-1">
           <h1 className="w-fit text-gradient lg:mb-6 max-sm:mb-4 2xl:text-[64px] xl:text-5xl text-[40px] leading-none">
             Свяжитесь
             <br />с нами

src/components/Layout/Footer.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link';
 
 export function Footer() {
   return (
-    <footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:grid-cols-2 sm:max-xl:grid-rows-2">
+    <footer className="sm:grid xl:grid-cols-[2fr_1fr_1fr] sm:grid-cols-2 sm:max-xl:grid-rows-2 mt-20 -mx-6">
       <div className="flex sm:items-center max-sm:flex-col sm:px-6 px-4 sm:py-9 py-4 border-t border-[#3D425C] gap-6 sm:max-xl:row-start-1 sm:max-xl:col-span-2">
         <Link href={'/'}>
           <LogoWithTextIcon />

src/components/Layout/Header.tsx

@@ -30,7 +30,7 @@ export function Header() {
 
   return (
     <header className="relative">
-      <nav className="flex items-stretch justify-between border-b border-[#3D425C] lg:min-h-[72px] min-h-16">
+      <nav className="flex items-stretch justify-between border-b border-[#3D425C] lg:min-h-[72px] min-h-16 -mx-6">
         <div className="flex">
           <div className="w-[25vw] lg:pl-10 pl-6 flex items-center">
             <Link href={'/'}>
@@ -52,14 +52,6 @@ export function Header() {
           >
             Оставить заявку
           </Button>
-          {/* <LangToggler />
-          <button
-            ref={menuBtnRef}
-            onClick={() => setMenuOpen(prev => !prev)}
-            className="px-6 py-5 xl:hidden border-[#3D425C] max-sm:border-l"
-          >
-            {!menuOpen ? <BurgerIcon /> : <CloseIcon />}
-          </button> */}
         </div>
       </nav>
       {menuOpen && (
@@ -92,8 +84,6 @@ export function Header() {
             >
               Оставить заявку
             </Button>
-            {/* <ChooseLang currentLang="RU" />
-            <ChooseLang currentLang="EN" /> */}
           </div>
         </motion.div>
       )}

src/components/icons/ArrowMoreIcon.tsx

@@ -9,7 +9,7 @@ export function ArrowMoreIcon() {
     >
       <path
         d="M8.41477 17.1925L15.1929 10.4143V17.1925L17.1929 15.1925V7.00006L9 7L7 9L13.7787 9.00006L7.00055 15.7782L8.41477 17.1925Z"
-        fill="white"
+        fill="currentColor"
       />
     </svg>
   );

src/components/pages/BlogPage/PostsList.tsx

@@ -22,7 +22,7 @@ export function PostsList() {
   }, [params]);
 
   return (
-    <div className="lg:px-10 px-6 lg:pb-6">
+    <div className="lg:pb-6">
       {posts.length === 0 ? (
         <p>No posts found</p>
       ) : (

src/components/pages/MainPage/Calculator/Calculator.tsx

@@ -177,7 +177,7 @@ export function Calculator() {
   }, [diffImplementationPeriod]);
 
   return (
-    <div className="bg-[url(/img/pages/home/stats/highlight.svg)d] bg-no-repeat bg-center">
+    <div className="bg-[url(/img/pages/home/stats/highlight.svg)d] bg-no-repeat bg-center border-t border-[#3D425C]">
       <p className="accent font-medium py-16 max-w-screen-md m-auto">
         Для прогнозирования экономического эффекта продукта мы изучили
         отраслевую аналитику на рынке продаж новых квартир, отчеты об

src/components/pages/MainPage/Clients.tsx

@@ -0,0 +1,29 @@
+import { clients } from '@/consts/clients';
+import Image from 'next/image';
+
+export function Clients() {
+  return (
+    <div className="border-b border-[#3D425C] pb-12 flex flex-nowrap w-full overflow-hidden absolute -ml-6">
+      <MarqueeHalf />
+      <MarqueeHalf />
+    </div>
+  );
+}
+
+function MarqueeHalf() {
+  return (
+    <div className="flex items-stretch overflow-clip animate-infinite-scroll">
+      {clients.map(client => (
+        <div key={client.src} className="min-w-[164px] max-h-16 py-2 px-3">
+          <Image
+            src={client.src}
+            key={client.src}
+            alt=""
+            fill
+            className="object-contain !relative"
+          />
+        </div>
+      ))}
+    </div>
+  );
+}

src/components/pages/MainPage/Motivation.tsx

@@ -1,4 +1,3 @@
-import { ArrowDownIcon } from '@/components/icons/ArrowDownIcon';
 import { SkolkovoIcon } from '@/components/icons/SkolkovoIcon';
 import { ClassNameWrapper } from '@/hocs/ClassNameWrapper';
 
@@ -20,12 +19,6 @@ export function Motivation() {
           <br />
           Продавать больше и быстрее.
         </h3>
-        <div className="flex gap-x-2 max-h-6 self-end">
-          <p className="m-text">Используйте скролл</p>
-          <div className="p-[7px] rounded-full bg-white w-6 h-6 flex mb-0">
-            <ArrowDownIcon />
-          </div>
-        </div>
       </div>
     </div>
   );

src/components/pages/MainPage/Projects.tsx

@@ -1,88 +1,117 @@
-import Image from 'next/image';
+'use client';
+
+import { ArrowMoreIcon } from '@/components/icons/ArrowMoreIcon';
+import { ClassNameWrapper } from '@/hocs/ClassNameWrapper';
+import { IProject } from '@/types/IProject';
+import { Descriptor } from '@/ui/Descriptor';
+import { DeviceBadge } from '@/ui/DeviceBadge';
+import { ProgressPie } from '@/ui/ProgressPie';
+import Link from 'next/link';
 
 export function Projects() {
   return (
-    <section className="grid grid-cols-12 px-6">
-      <div className="grid grid-cols-12 col-span-full gap-y-14 gap-x-4 pt-[120px]">
-        <div className="col-span-6 col-start-4 object-cover flex flex-col">
-          <Image
-            src={'/img/pages/home/projects/1.jpg'}
-            alt={''}
-            className="w-full h-full"
-            width={768}
-            height={585}
-          />
-          <h2 className="text-white text-[24px] font-medium pt-4">
-            ЖК «Upside Towers»
-          </h2>
-          <p className="text-[16px] text-[#a1a2a5]">Upside Development</p>
-        </div>
-        <div className="col-span-3 col-start-10">
-          <Image
-            className="w-full "
-            src={'/img/pages/home/projects/2.jpg'}
-            alt={''}
-            width={376}
-            height={227}
-          />
-          <h2 className="text-white text-[24px] font-medium pt-4">
-            ЖК «Мираполис»
-          </h2>
-          <p className="text-[16px] text-[#a1a2a5]">ГК «Основа»</p>
-        </div>
-        <div className="col-span-4">
-          <Image
-            className="w-full"
-            src={'/img/pages/home/projects/3.jpg'}
-            alt={''}
-            width={507}
-            height={329}
-          />
-          <h2 className="text-white text-[24px] font-medium pt-4">
-            ЖК «Life Резиденция»
-          </h2>
-          <p className="text-[16px] text-[#a1a2a5]">ГК Паритет Девелопмент</p>
-        </div>
-        <div className="col-span-4">
-          <Image
-            className="w-full"
-            src={'/img/pages/home/projects/4.jpg'}
-            alt={''}
-            width={507}
-            height={329}
-          />
-          <h2 className="text-white text-[24px] font-medium pt-4">
-            ЖК «Сюжеты»
-          </h2>
-          <p className="text-[16px] text-[#a1a2a5]">Fortis Development</p>
-        </div>
-        <div className="col-span-4 col-start-3 flex flex-col justify-end">
-          <Image
-            className="w-full"
-            src={'/img/home-page/projects/6.jpg'}
-            alt={''}
-            width={507}
-            height={329}
-          />
-          <h2 className="text-white text-[24px] font-medium pt-4">
-            ЖК «Айвазовский City»
-          </h2>
-          <p className="text-[16px] text-[#a1a2a5]">ЭНКО</p>
-        </div>
-        <div className="col-span-6">
-          <Image
-            className="w-full"
-            src={'/img/pages/home/projects/5.jpg'}
-            alt={''}
-            width={768}
-            height={589}
-          />
-          <h2 className="text-white text-[24px] font-medium pt-4">
-            Авторский квартал «Машаров»
-          </h2>
-          <p className="text-[16px] text-[#a1a2a5]">Сибинтел Девелопмент</p>
+    <div>
+      <div className="border-y border-[#3D425C] py-6 flex justify-between items-end">
+        <div className="space-y-6">
+          <Descriptor title="Проекты" />
+          <p className="accent font-medium max-w-[42vw]">
+            За <span className="text-gradient">13 лет</span> работы мы
+            реализовали
+            <span className="text-gradient"> 40 проектов</span> в разных городах
+            России и мира
+          </p>
         </div>
+        <Link
+          href={'/projects'}
+          className="px-6 py-4 flex justify-between items-center rounded-full border border-[#3D425C] min-w-[23vw]"
+        >
+          Все проекты{' '}
+          <ClassNameWrapper className="w-8 h-8" element={<ArrowMoreIcon />} />
+        </Link>
       </div>
-    </section>
+      <div className="py-20 grid grid-cols-12 grid-rows-[554px_286px_554px] gap-4">
+        <ProjectCard
+          city="Москва"
+          company="Upside Development"
+          name="ЖК «Upside Towers»"
+          devices={['touch']}
+          image="441b3c15-2885-4fd2-82bb-395aecd05ca5.jpg"
+          stage={4}
+          className="col-span-6 row-span-2"
+        />
+        <ProjectCard
+          city="Москва"
+          company="ГК Основа"
+          name="ЖК «Мираполис»"
+          devices={['touch']}
+          image="3e51ec53-c6c0-452a-9493-1463dea63f53.jpg"
+          className="col-start-9 col-end-13 row-span-1"
+        />
+        <ProjectCard
+          city="Екатеринбург"
+          company="НКС-девелопмент"
+          name="МФК «Re:volution towers»"
+          devices={['touch']}
+          image="63bba9b5-da3a-4e0d-ad2a-f642246f8a1f.jpg"
+          className="col-start-5 col-end-9 row-start-3"
+        />
+        <ProjectCard
+          city="Тюмень"
+          company="СБК"
+          name="ЖК «Новатор»"
+          devices={['stream', 'touch']}
+          image="c8739341-c581-49d2-8c04-5075dc5a48de.jpg"
+          className="col-start-9 col-end-13 row-start-3"
+        />
+      </div>
+    </div>
+  );
+}
+
+function ProjectCard({
+  city,
+  company,
+  devices,
+  image,
+  name,
+  stage = 6,
+  className,
+}: Omit<IProject, 'releaseDate' | 'id'> & { className?: string }) {
+  const stagePercentage = Math.round((100 / 6) * stage);
+
+  return (
+    <div className={'relative ' + className}>
+      <div
+        className={
+          'bg-no-repeat bg-cover bg-center flex items-end absolute top-0 left-0 w-full h-full p-6'
+        }
+        style={{
+          backgroundImage: `url(${process.env.NEXT_PUBLIC_API}/upload/${image})`,
+        }}
+      >
+        <div className="absolute top-0 left-0 w-full h-full bg-gradient-card" />
+        <div className="space-y-6 relative">
+          <div className="space-y-2">
+            <p className="accent font-medium">{name}</p>
+            <p className="m-text">
+              {company}, {city}
+            </p>
+          </div>
+          <div className="flex gap-2">
+            {stage < 6 && (
+              <div className="bg-[#14161F] px-3 py-2 rounded-full w-fit flex items-center gap-1">
+                <p className="leading-none btn-text font-semibold">
+                  {stagePercentage}%
+                </p>
+                <ProgressPie value={stagePercentage} />
+              </div>
+            )}
+            {devices.map(device => (
+              <DeviceBadge badgeType={device} key={device} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
   );
 }

src/components/pages/MainPage/RecentWorks.tsx

@@ -1,12 +0,0 @@
-import { Title } from '@/ui/Title';
-
-export function RecentWorks() {
-  return (
-    <div className="pt-[200px]">
-      <Title>
-        Наша цель — разработать эффективный продукт,
-        <span className="text-gradient">которым будут пользоваться</span>
-      </Title>
-    </div>
-  );
-}

src/components/pages/MainPage/Reviews.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { PlayIcon } from '@/components/icons/PlayIcon';
+import reviews from '@/consts/reviews.json';
+import { ClassNameWrapper } from '@/hocs/ClassNameWrapper';
+import { Descriptor } from '@/ui/Descriptor';
+import { Title } from '@/ui/Title';
+import Image from 'next/image';
+import { useState } from 'react';
+
+export function Reviews() {
+  const [tab, setTab] = useState(0);
+
+  return (
+    <div className="pt-[200px] space-y-20">
+      <Title>
+        Наша цель — разработать эффективный продукт,
+        <span className="text-gradient"> которым будут пользоваться</span>
+      </Title>
+      <div
+        className="bg-no-repeat bg-cover p-10 flex flex-col justify-between relative aspect-[1552/616]"
+        style={{
+          backgroundImage: `url(${reviews[tab].image})`,
+        }}
+      >
+        <div className="space-y-6 max-w-[33%]">
+          <Descriptor title="отзывы клиентов" className="mb-2" />
+          <div className="accent font-medium">{reviews[tab].text}</div>
+          <div className="m-caption max-w-[50%] font-medium">
+            {reviews[tab].author}
+          </div>
+        </div>
+        <div className="flex gap-2">
+          <ReviewTab
+            company="Сибинтел Девелопмент"
+            icon="/img/pages/home/reviews/icons/mosharov.svg"
+            onClick={() => setTab(0)}
+            active={tab === 0}
+            title="Авторский Квартал «Машаров»"
+          />
+          <ReviewTab
+            company="Паритет Девелопмент"
+            icon="/img/pages/home/reviews/icons/residence.svg"
+            onClick={() => setTab(1)}
+            active={tab === 1}
+            title="ЖК «Life Residence»"
+          />
+          <ReviewTab
+            company="ГК Энко"
+            icon="/img/pages/home/reviews/icons/aivazovsky.svg"
+            onClick={() => setTab(2)}
+            active={tab === 2}
+            title="ЖК «Айвазовский»"
+          />
+        </div>
+        <button className="absolute self-center top-[calc(50%-54px)] border rounded-full p-8">
+          <ClassNameWrapper className="h-10 w-10" element={<PlayIcon />} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function ReviewTab({
+  icon,
+  title,
+  company,
+  active = false,
+  onClick,
+}: {
+  icon: string;
+  title: string;
+  company: string;
+  active?: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={
+        'flex gap-3 p-6 rounded-[4px] bg-[#14161F80] border ' +
+        (active
+          ? '[border-image:linear-gradient(to_right,#798FFF,#D375FF)_3]'
+          : 'border-[#3D425C]')
+      }
+    >
+      <Image src={icon} width={38} height={38} alt={''} />
+      <div className="space-y-0.5">
+        <p className="m-text">{title}</p>
+        <p className="m-caption font-medium opacity-60 text-left">{company}</p>
+      </div>
+    </button>
+  );
+}

src/components/pages/MainPage/Showreel.tsx

@@ -7,7 +7,7 @@ import { ClassNameWrapper } from '@/hocs/ClassNameWrapper';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 export function Showreel() {
-  const [isPlaying, setIsPlaying] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(true);
   const [hovered, setHovered] = useState(false);
   const [isBuffering, setIsBuffering] = useState(false);
 
@@ -52,11 +52,9 @@ export function Showreel() {
           ref={videoRef}
           src="/videos/pages/home/showreel_1080p_4000k_h264.mp4"
           muted
+          autoPlay
           loop
-          className={
-            'w-full object-cover ' +
-            (hovered ? 'aspect-video' : 'aspect-[1552/616]')
-          }
+          className={'w-full object-cover '}
           onPlaying={handleOnPlaying}
           onWaiting={handleOnWaiting}
         />

src/components/pages/MainPage/Technology.tsx

@@ -1,5 +1,6 @@
 import { ArrowMoreIcon } from '@/components/icons/ArrowMoreIcon';
 import { PlusIcon } from '@/components/icons/PlusIcon';
+import { ClassNameWrapper } from '@/hocs/ClassNameWrapper';
 import Image from 'next/image';
 import Link from 'next/link';
 
@@ -18,7 +19,7 @@ export function Technology() {
         src={'/img/pages/home/technology/Content.png'}
         fill
         alt={''}
-        className="!relative max-w-screen-md max-h-[417px] mb-10"
+        className="!relative max-w-screen-md max-h-[417px] mb-10 rounded-lg border-[7.31px][border-image:linear-gradient(360deg,#14161F,#ffffff)_3_linear-gradient(360deg,#282A33,#32343D)_3]"
       />
       <div className="flex justify-between items-start">
         <h4 className="h4 font-medium w-2/3">
@@ -27,7 +28,10 @@ export function Technology() {
         </h4>
         <Link href={'/'} className="flex gap-1 items-center">
           <p className="btn-text font-medium text-[#9299BD]">О технологии</p>
-          <ArrowMoreIcon />
+          <ClassNameWrapper
+            className="text-[#9299BD]"
+            element={<ArrowMoreIcon />}
+          />
         </Link>
       </div>
       <div className="h-[172px] flex flex-col items-center mt-[76px]">

src/components/pages/MainPage/Winners.tsx

@@ -0,0 +1,37 @@
+import { ArrowMoreIcon } from '@/components/icons/ArrowMoreIcon';
+import { ClassNameWrapper } from '@/hocs/ClassNameWrapper';
+import { Title } from '@/ui/Title';
+import Image from 'next/image';
+import Link from 'next/link';
+
+export function Winners() {
+  return (
+    <div className="m-auto max-w-screen-md py-40 space-y-4">
+      <Title className="text-[96px]">
+        <span className="text-gradient block">Победители</span>
+        <span className="text-gradient text-right block">BuildUP 2023</span>
+        <span className="block">в номинации IT</span>
+      </Title>
+      <Image
+        src={'/img/pages/home/winners/nomination.png'}
+        fill
+        className="!relative"
+        alt={''}
+      />
+      <p className="accent font-medium mb-2">
+        В 2023 году наш продукт для застройщиков GRAFF.estate был признан лучшим
+        в категории IT на Акселераторе технологических стартапов от лидеров в
+        строительстве и девелопменте Build UP от Фонда «Сколково»
+      </p>
+      <Link href={'/'} className="flex gap-x-1 py-2 w-fit">
+        <p className="text-[#9299BD] font-medium btn-text self-center">
+          Как это было
+        </p>
+        <ClassNameWrapper
+          className="text-[#9299BD]"
+          element={<ArrowMoreIcon />}
+        />
+      </Link>
+    </div>
+  );
+}

src/components/pages/ProjectsPage/ProjectsSection.tsx

@@ -29,7 +29,7 @@ export function ProjectsSection({
 
   return (
     filteredProjects.length !== 0 && (
-      <div className="grid xl:grid-cols-[repeat(4,calc(25vw-56px))] md:grid-cols-3 sm:grid-cols-2 gap-4 pt-8 border-b border-[#3D425C] p-10">
+      <div className="grid xl:grid-cols-[repeat(4,calc(25vw-24px))] md:grid-cols-3 sm:grid-cols-2 gap-4 pt-8 border-b border-[#3D425C] py-10">
         <div className="font-semibold text-xl aspect-square">{year}</div>
         {filteredProjects.map(project => (
           <ProjectCard key={project.id} {...project} />

src/consts/clients.ts

@@ -0,0 +1,43 @@
+import { IClient } from '@/types/IClient';
+
+export const clients: IClient[] = [
+  { src: '/img/components/clients/sezar_group.png' },
+  { src: '/img/components/clients/legenda.png' },
+  { src: '/img/components/clients/osnova.png' },
+  { src: '/img/components/clients/upside.png' },
+  { src: '/img/components/clients/brusnika.png' },
+  { src: '/img/components/clients/capital_group.png' },
+  { src: '/img/components/clients/a101.png' },
+  { src: '/img/components/clients/forum.png' },
+  { src: '/img/components/clients/leto.png' },
+  { src: '/img/components/clients/center.png' },
+  { src: '/img/components/clients/center-invest.png' },
+  { src: '/img/components/clients/rodina.png' },
+  { src: '/img/components/clients/acons.png' },
+  { src: '/img/components/clients/alfa.png' },
+  { src: '/img/components/clients/sk+.png' },
+  { src: '/img/components/clients/delom.png' },
+  { src: '/img/components/clients/kama.png' },
+  { src: '/img/components/clients/risan.png' },
+  { src: '/img/components/clients/golos.png' },
+  { src: '/img/components/clients/dns.png' },
+  { src: '/img/components/clients/sibintel.png' },
+  { src: '/img/components/clients/kortros.png' },
+  { src: '/img/components/clients/mayak.png' },
+  { src: '/img/components/clients/sbk.png' },
+  { src: '/img/components/clients/nks.png' },
+  { src: '/img/components/clients/atom.png' },
+  { src: '/img/components/clients/yit.png' },
+  { src: '/img/components/clients/sinara.png' },
+  { src: '/img/components/clients/pik.png' },
+  { src: '/img/components/clients/as.png' },
+  { src: '/img/components/clients/efes.png' },
+  { src: '/img/components/clients/atmosfera.png' },
+  { src: '/img/components/clients/abudhabi.png' },
+  { src: '/img/components/clients/mavis.png' },
+  { src: '/img/components/clients/enko.png' },
+  { src: '/img/components/clients/paritet.png' },
+  { src: '/img/components/clients/fortis.png' },
+  { src: '/img/components/clients/ugmk.png' },
+  { src: '/img/components/clients/atlas.png' },
+];

src/consts/reviews.json

@@ -0,0 +1,17 @@
+[
+  {
+    "image": "/img/pages/home/reviews/1.png",
+    "text": "«Эффективность инструмента была подтверждена буквально в первый день после его внедрения.»",
+    "author": "Егор Бобров, Коммерческий директор авторского квартала «Машаров»"
+  },
+  {
+    "image": "/img/pages/home/reviews/2.jpg",
+    "text": "«Клиенты особенно ценят возможность легко выбрать квартиру с помощью 3D-модель жилого комплекса»",
+    "author": "Олег Бондорев, Ведущий менеджер компании «ЭНКО»"
+  },
+  {
+    "image": "/img/pages/home/reviews/3.jpg",
+    "text": "«Одним из преимуществ инструмента является возможность посмотреть 3D-модель квартиры с готовым дизайнерским ремонтом и оценить видовые характеристиками, изменяя время суток (день или ночь)»",
+    "author": "Алина Веселова, Ведущий специалист отдела продаж"
+  }
+]

src/types/IClient.ts

@@ -0,0 +1,3 @@
+export interface IClient {
+  src: string;
+}

src/types/IReview.ts

@@ -0,0 +1,5 @@
+export interface IReview {
+  image: string;
+  text: string;
+  author: string;
+}

tailwind.config.ts

@@ -12,6 +12,15 @@ const config: Config = {
         'gradient-conic':
           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
       },
+      animation: {
+        'infinite-scroll': 'infinite-scroll 25s linear infinite',
+      },
+      keyframes: {
+        'infinite-scroll': {
+          from: { transform: 'translateX(0)' },
+          to: { transform: 'translateX(-100%)' },
+        },
+      },
     },
   },
   plugins: [],