linethrow component + map stats section

src/app/blog/page.tsx

@@ -5,7 +5,7 @@ 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-6 px-4 border-[#3D425C]">
+      <div className="sm:pb-5 pb-4 flex flex-col justify-between border-b lg:px-10 px-4 border-[#3D425C]">
         <Title className="lg:mb-14 sm:mb-8 mb-4">Блог</Title>
         <PostsFilters />
       </div>

src/app/page.tsx

@@ -1,9 +1,11 @@
 import { Motivation } from '@/components/Main/Motivation';
+import StatsMap from '@/components/Main/StatsMap';
 
 export default function Home() {
   return (
     <div>
       <Motivation />
+      <StatsMap />
     </div>
   );
 }

src/components/Main/Motivation.tsx

@@ -1,23 +1,27 @@
+import Image from 'next/image';
 import { Title } from '../../ui/Title';
 import { SkolkovoIcon } from '../icons/SkolkovoIcon';
 
 export function Motivation() {
   return (
-    <div className="lg:py-20 lg:px-6 flex justify-between">
-      <div>
-        <Title className="mb-10">
-          Интерактивный инструмент
-          <br />
-          продаж
-          <span className="text-gradient"> для застройщиков</span>
-        </Title>
-        <h3 className="h3 font-semibold">
-          Помогаем девелоперам эффективно демонстрировать свой объект.
-          <br />
-          Продавать больше и быстрее.
-        </h3>
+    <div className="lg:pt-20 lg:px-6 lg:pb-40 pb-20 flex flex-col gap-[64px]">
+      <div className="flex justify-between">
+        <div>
+          <Title className="mb-10">
+            Интерактивный инструмент
+            <br />
+            продаж
+            <span className="text-gradient"> для застройщиков</span>
+          </Title>
+          <h3 className="h3 font-semibold">
+            Помогаем девелоперам эффективно демонстрировать свой объект.
+            <br />
+            Продавать больше и быстрее.
+          </h3>
+        </div>
+        <SkolkovoIcon className="mt-4" />
       </div>
-      <SkolkovoIcon className="mt-4" />
+      <Image src="/img/home-page/1.jpg" alt="" width={1160} height={679} />
     </div>
   );
 }

src/components/Main/StatsMap.tsx

@@ -0,0 +1,103 @@
+import { LineThrow } from '@/ui/LineThrow';
+import { Title } from '@/ui/Title';
+import Image from 'next/image';
+import EconomicEfficiencyIcon from '../icons/EconomicEfficiencyIcon';
+
+const StatsMap = () => {
+  return (
+    <div className="lg:px-6">
+      <Title>
+        Продавайте недвижимость <br />
+        <span className="text-gradient">проще и </span>
+        <LineThrow>быстрее</LineThrow>
+        <span className="text-gradient"> дороже</span>
+      </Title>
+      <div className="grid grid-cols-4 grid-rows-4 my-16 border border-[#3D425C]">
+        <div className="col-span-1 row-span-2 text-white bg-[#3D425C] p-6">
+          <p className="text-[32px]">
+            Мы собрали статистику за 13 лет работы с застройщиками,
+            реализовав 40 проектов
+          </p>
+        </div>
+        <div className="col-start-2 col-span-full row-span-2 px-[124px] py-10 flex items-center justify-center border-b border-[#3D425C]">
+          <Image
+            src={'/img/home-page/map.png'}
+            alt={''}
+            width={936}
+            height={490}
+          />
+        </div>
+        <div className="col-span-1 p-6 row-span-2">
+          <div className="flex gap-1 items-center text-[#a1a2a5]">
+            <EconomicEfficiencyIcon />
+            <p className="text-sm ">экономическая эффективность</p>
+          </div>
+        </div>
+        <div className="col-start-2 col-span-full row-span-2 grid grid-cols-3 grid-rows-2">
+          <div className="flex flex-col border-x border-b border-[#3D425C] p-6 relative">
+            <p>
+              Конверсия из консультации в бронирование <br /> увеличивается на
+            </p>
+            <Image
+              src={'/img/home-page/2.png'}
+              alt={''}
+              className="w-full h-full"
+              width={346}
+              height={179}
+            />
+            <p className="absolute bottom-6 right-6 text-[#fff] text-[96px] tracking-[-2%] leading-[24px]">
+              18<span className="text-[24px] font-semibold">%</span>
+            </p>
+          </div>
+          <div className="flex flex-col border-r border-b border-[#3D425C] p-6 relative">
+            <p>
+              Конверсия из бронирования в продажу <br /> увеличивается на
+            </p>
+            <Image
+              src={'/img/home-page/3.png'}
+              alt={''}
+              className="w-full h-full"
+              width={346}
+              height={179}
+            />
+            <p className="absolute bottom-6 right-6 text-[#fff] text-[96px] tracking-[-2%] leading-[24px]">
+              12<span className="text-[24px] font-semibold">%</span>
+            </p>
+          </div>
+          <div className="flex flex-col border-x border-[#3D425C] p-6 relative col-start-1 row-start-2">
+            <p>
+              Время реализации проекта <br /> сокращается до
+            </p>
+            {/* <Image
+              src={'/img/home-page/3.png'}
+              alt={''}
+              className="w-full h-full"
+              width={346}
+              height={179}
+            /> */}
+            <p className="absolute bottom-6 right-6 text-[#fff] text-[96px] tracking-[-2%] leading-[24px]">
+              2<span className="text-[24px] font-semibold">раз</span>
+            </p>
+          </div>
+          <div className="flex flex-col border-l border-t border-[#3D425C] p-6 relative col-start-3 row-start-2">
+            <p>
+              Время на подготовку рекламных <br /> материалов сокращается до
+            </p>
+            {/* <Image
+              src={'/img/home-page/3.png'}
+              alt={''}
+              className="w-full h-full"
+              width={346}
+              height={179}
+            /> */}
+            <p className="absolute bottom-6 right-6 text-[#fff] text-[96px] tracking-[-2%] leading-[24px]">
+              4<span className="text-[24px] font-semibold">раз</span>
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default StatsMap;

src/components/icons/EconomicEfficiencyIcon.tsx

@@ -0,0 +1,18 @@
+const EconomicEfficiencyIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      fill="none"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fill="currentColor"
+        d="M14.069 1.946H6.085L1.93 6.376v7.678H9.62l4.449-4.135V1.946z"
+      ></path>
+    </svg>
+  );
+};
+
+export default EconomicEfficiencyIcon;

src/ui/LineThrow.tsx

@@ -0,0 +1,21 @@
+import { PropsWithChildren } from 'react';
+
+export function LineThrow({
+  className = '',
+  children,
+}: PropsWithChildren<{ className?: string }>) {
+  return (
+    <span
+      className={`line-through decoration-white text-[#52587A] + ${className}`}
+    >
+      {' '}
+      {children}
+    </span>
+    // <span
+    //   className={`'text-[#52587A] relative before:content-[""] before:absolute before:top-[calc(50%+3px)] before:left-0 before:w-full before:h-[6px] before:bg-[#fff] before:block' + ${className}`}
+    // >
+    //   {' '}
+    //   {children}
+    // </span>
+  );
+}