diff --git a/client/src/App.tsx b/client/src/App.tsx
index 6fbcda7..3272957 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,15 +1,11 @@
 /* eslint-disable no-irregular-whitespace */
 import "./App.css";
 import LogoIcon from "./components/icons/LogoIcon";
-import showreelImage from "./assets/images/showreel.jpg";
-import Blending1 from "./components/blendings/Blending1";
+import BlendingHeader from "./components/blendings/BlendingHeader";
 import FeatureItem from "./components/FeatureItem";
 import BlendVR from "./components/blendings/BlendVR";
 import BlendStream from "./components/blendings/BlendStream";
 import StreamButton from "./components/StreamButton";
-import CalcSelect from "./components/CalcSelect";
-import ArrowRightIcon from "./components/icons/ArrowRightIcon";
-import Slider from "react-rangeslider";
 import "react-rangeslider/lib/index.css";
 import "./components/RangeSlider.css";
 import { useState } from "react";
@@ -18,24 +14,29 @@ import MoreProjectButton from "./components/MoreProjectButton";
 import ExampleCard from "./components/ExampleCard";
 import FeatureVideoViewBox from "./components/FeatureVideoViewBox";
 import Button from "./components/Button";
-import regionsData from "./assets/regionsData2.json";
+import Calc from "./components/Calc";
+import BlendingCalc from "./components/blendings/BlendingCalc";
+import BlendingClients from "./components/blendings/BlendingClients";
+import Heading2 from "./components/Headings/Heading2";
+import PlayIcon from "./components/icons/PlayIcon";
 
 function App() {
-  const [inPersonConsultations, setInPersonConsultations] =
-    useState<number>(100);
   const [selectedVideo, setSelectedVideo] = useState<string>(
     "https://graff.estate/videos/features/virtual_tour.mp4"
   );
 
   return (
-    <div className="min-h-screen text-white px-10">
+    <div className="min-h-screen text-white 2xl:px-10 xl:px-8 sm:px-6 px-4">
       <div className="relative conatiner mx-auto 2xl:max-w-screen-2xl">
-        <div className="flex justify-between py-6 mb-28">
+        <div className="flex justify-between py-6 2xl:mb-28 xl:mb-[88px] sm:mb-12 mb-14">
           <div>
             <LogoIcon />
           </div>
-          <div className="flex gap-8">
-            <Button>Оставить заявку</Button>
+          <div className="flex sm:gap-8 gap-2">
+            <Button>
+              <span className="sm:inline hidden">Оставить заявку</span>
+              <span className="sm:hidden inline">Связаться</span>
+            </Button>
 
             <div className="flex gap-1">
               <button className="px-3 border-gradient rounded-full font-gilroy font-medium h-10 flex items-center justify-center w-12">
@@ -48,70 +49,96 @@ function App() {
           </div>
         </div>
 
-        <div className="flex flex-col gap-14 mb-[120px]">
-          <h1 className="max-w-[1255px] font-gilroy text-8xl leading-none text-gradient font-medium">
-            Интерактивный инструмент продаж{" "}
+        <div className="flex flex-col 2xl:gap-14 gap-6 2xl:mb-[120px] xl:mb-20 sm:mb-12 mb-8">
+          <h1 className="max-w-[1255px] font-gilroy 2xl:text-8xl sm:text-[64px] text-[40px] leading-none text-gradient font-medium">
+            Интерактивный инструмент
+            <br />
+            продаж{" "}
             <span style={{ WebkitTextFillColor: "#fff" }}>
               для застройщиков
             </span>
           </h1>
-          <p className="text-xl font-gilroy max-w-[650px] font-medium leading-[120%]">
+          <p className="xl:text-xl text-base font-gilroy max-w-[650px] font-medium leading-[120%]">
             Помогаем девелоперам эффективно демонстрировать свой объект.
             Продавать больше и быстрее.
           </p>
           <div className="absolute -z-10 top-0 right-0 opacity-90 blur-[10px]">
-            <Blending1 />
+            <BlendingHeader />
           </div>
         </div>
 
-        <div className="mb-40">
-          <img src={showreelImage} alt="" className="aspect-video" />
+        <div className="2xl:mb-40 sm:mb-[120px] mb-20">
+          <video
+            src="https://graff.estate/videos/showreel_1080p_4000k_h264.mp4"
+            muted
+            autoPlay
+            loop
+            playsInline
+            preload="metadata"
+            className="aspect-video"
+          />
         </div>
 
-        <div className="flex flex-col gap-16 mb-40">
-          <div className="grid grid-cols-4">
-            <h2 className="font-gilroy text-[64px] leading-none max-w-[780px] font-medium text-gradient col-span-3">
-              Помогаем продавать{" "}
-              <span style={{ WebkitTextFillColor: "#fff" }}>
-                проще и{" "}
-                <span
-                  className="text-[#52587A] line-through font-light"
-                  style={{ WebkitTextFillColor: "#52587A" }}
-                >
-                  быстрее
+        <div className="flex flex-col 2xl:gap-16 xl:gap-10 gap-8 2xl:mb-40 sm:mb-[120px] mb-20">
+          <div className="grid xl:grid-cols-4 xl:gap-0 sm:gap-6 gap-4">
+            <div className="col-span-3">
+              <Heading2>
+                Помогаем продавать
+                <br />
+                <span style={{ WebkitTextFillColor: "#fff" }}>
+                  проще и{" "}
+                  <span
+                    className="text-[#52587A] custom-line-through"
+                    style={{ WebkitTextFillColor: "#52587A" }}
+                  >
+                    быстрее
+                  </span>{" "}
+                  дороже
                 </span>
-                дороже
-              </span>
-            </h2>
-            <p>
+              </Heading2>
+            </div>
+            <p className="2xl:text-base text-sm">
               Мы собрали статистику за 10 лет работы
               <br />
               с застройщиками, реализовав 31 проект
             </p>
           </div>
-          <div className="grid grid-cols-4">
+          <div className="grid xl:grid-cols-4 sm:grid-cols-2 grid-cols-1 xl:gap-0 gap-3">
             <div className="px-8 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
-              <p>На</p>
-              <p className="text-8xl font-gilroy font-medium">
-                18<span className="text-2xl ml-1 font-semibold">%</span>
+              <p className="2xl:text-base text-sm">На</p>
+              <p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
+                18
+                <span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
+                  %
+                </span>
+              </p>
+              <p className="2xl:text-base text-sm">
+                увеличивает конверсию из консультации в бронирование
               </p>
-              <p>увеличивает конверсию из консультации в бронирование</p>
             </div>
 
             <div className="px-8 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
-              <p>На</p>
-              <p className="text-8xl font-gilroy font-medium">
-                12<span className="text-2xl ml-1 font-semibold">%</span>
+              <p className="2xl:text-base text-sm">На</p>
+              <p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
+                12
+                <span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
+                  %
+                </span>
+              </p>
+              <p className="2xl:text-base text-sm">
+                увеличивает конверсию из бронирования в продажу
               </p>
-              <p>увеличивает конверсию из бронирования в продажу</p>
             </div>
 
             <div className="px-8 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
-              <p>До</p>
-              <p className="text-8xl font-gilroy font-medium">
-                2<span className="text-2xl ml-1 font-semibold">раз</span>
+              <p className="2xl:text-base text-sm">До</p>
+              <p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
+                2
+                <span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
+                  раз
+                </span>
               </p>
-              <p>
+              <p className="2xl:text-base text-sm">
                 сокращает время
                 <br />
                 реализации проекта
@@ -119,17 +146,22 @@ function App() {
             </div>
 
             <div className="px-8 py-4 flex flex-col gap-4 border-l border-[#3D425C]">
-              <p>До</p>
-              <p className="text-8xl font-gilroy font-medium">
-                4<span className="text-2xl ml-1 font-semibold">раз</span>
+              <p className="2xl:text-base text-sm">До</p>
+              <p className="2xl:text-8xl text-[64px] font-gilroy font-medium leading-none">
+                4
+                <span className="2xl:text-2xl text-xl ml-1 font-semibold leading-[135%]">
+                  раз
+                </span>
+              </p>
+              <p className="2xl:text-base text-sm">
+                сокращает время на подготовку рекламных материалов
               </p>
-              <p>сокращает время на подготовку рекламных материалов</p>
             </div>
           </div>
         </div>
 
-        <div className="grid grid-cols-2 gap-x-8 mb-40">
-          <div className="mt-[220px]">
+        <div className="sm:grid grid-cols-2 xl:gap-x-8 sm:gap-x-6 2xl:mb-40 sm:mb-[120px] mb-20">
+          <div className="2xl:mt-[220px] xl:mt-40 sm:mt-[104px]">
             <ExampleCard
               title="ЖК «Life Резиденция»"
               company="ГК Паритет Девелопмент"
@@ -158,14 +190,14 @@ function App() {
           </div>
         </div>
 
-        <div className="grid grid-cols-2 gap-4 mb-40">
+        <div className="grid grid-cols-2 gap-4 2xl:mb-40 sm:mb-[120px] mb-20">
           <div className="flex flex-col gap-20">
             <div className="flex flex-col gap-8">
-              <h2 className="font-gilroy text-[64px] text-gradient leading-none font-medium">
+              <Heading2>
                 Функциональные
                 <br />
                 <span style={{ WebkitTextFillColor: "#fff" }}>возможности</span>
-              </h2>
+              </Heading2>
               <p className="w-2/3">
                 Интерактивная презентация увлекает покупателей и предоставляет
                 актуальную информацию о жилом комплексе, отвечая на все вопросы
@@ -239,7 +271,7 @@ function App() {
           </div>
         </div>
 
-        <div className="relative grid grid-cols-4 gap-4 mb-40">
+        <div className="relative grid grid-cols-4 gap-4 2xl:mb-40 sm:mb-[120px] mb-20">
           <div className="col-span-2 flex flex-col gap-16">
             <h2 className="font-gilroy text-[64px] leading-none max-w-[780px] font-medium text-gradient">
               Экскурсия{" "}
@@ -248,13 +280,6 @@ function App() {
               </span>
             </h2>
 
-            {/* <button className="group relative px-6 py-2 rounded-full bg-gradient flex justify-between items-center overflow-hidden w-fit">
-              <span className="group-hover:opacity-10 opacity-0 bg-black transition-opacity absolute top-0 left-0 w-full h-full"></span>
-              <span className="relative font-gilroy font-medium">
-                Записаться в шоу-рум
-              </span>
-            </button> */}
-
             <Button>Записаться в шоу-рум</Button>
           </div>
 
@@ -267,13 +292,22 @@ function App() {
               Он полностью погружается в воссозданную реальность, чувствует
               удобство и уровень комфорта
             </p>
-            <video
-              src="https://graff.estate/videos/vr.mp4"
-              muted
-              autoPlay
-              loop
-              playsInline
-            />
+            <div className="relative flex justify-center items-center">
+              <video
+                src="https://graff.estate/videos/vr.mp4"
+                muted
+                // autoPlay
+                loop
+                playsInline
+                preload="metadata"
+                className=""
+              />
+              <button className="group absolute border border-[#3D425C] bg-[#14161F] bg-opacity-20 p-4 rounded-full">
+                <span className="block group-hover:scale-125 transition-transform">
+                  <PlayIcon />
+                </span>
+              </button>
+            </div>
           </div>
           <div className="col-span-4 flex justify-center mb-16">
             <img src="/images/VRHeadset.png" alt="" className="w-4/5" />
@@ -283,7 +317,7 @@ function App() {
           </div>
         </div>
 
-        <div className="grid grid-cols-2 gap-4 mb-40">
+        <div className="grid grid-cols-2 gap-4 2xl:mb-40 sm:mb-[120px] mb-20">
           <div>
             <div className="flex flex-col gap-8 mb-[204px]">
               <h2 className="font-gilroy text-[64px] text-gradient leading-none font-medium">
@@ -340,7 +374,7 @@ function App() {
           </div>
         </div>
 
-        <div className="mb-40">
+        <div className="2xl:mb-40 sm:mb-[120px] mb-20">
           <StreamButton
             icon="/icons/Revolution.svg"
             title="МФК «Re:volution towers»"
@@ -364,7 +398,7 @@ function App() {
           />
         </div>
 
-        <div className="flex flex-col gap-16 mb-40">
+        <div className="relative flex flex-col gap-16 2xl:mb-40 sm:mb-[120px] mb-20">
           <div className="flex flex-col gap-8">
             <h2 className="font-gilroy text-[64px] text-gradient leading-none font-medium">
               Оцените эффективность интерактивного
@@ -386,154 +420,14 @@ function App() {
             </div>
           </div>
 
-          <div className="grid grid-cols-4">
-            <div className="">
-              <CalcSelect
-                label="Регион"
-                placeholder="Выберите регион"
-                options={regionsData.map((regionItem) => regionItem.name)}
-                handleSelect={(option) => console.log(option)}
-              />
-              <div className="border border-t-0 border-[#3D425C] p-6">
-                <p className="text-[#52587A] text-xs">
-                  Установлены усредненные показатели по региону.
-                  <br />
-                  Источник:{" "}
-                  <a
-                    href="https://наш.дом.рф"
-                    target="_blank"
-                    className="text-[#798FFF]"
-                  >
-                    наш.дом.рф
-                  </a>
-                </p>
-              </div>
-            </div>
-            <div className="px-6 py-8 flex flex-col justify-between border border-l-0 border-[#3D425C]">
-              <p className="text-sm">
-                Средняя площадь
-                <br />
-                жилья в комплексе, м2
-              </p>
-              <p className="text-5xl font-gilroy font-medium">1 500</p>
-            </div>
-            <div className="px-6 py-8 flex flex-col justify-between border border-l-0 border-[#3D425C]">
-              <p className="text-sm">
-                Средняя площадь
-                <br />
-                квартиры, м2
-              </p>
-              <p className="text-5xl font-gilroy font-medium">100</p>
-            </div>
-            <div className="px-6 py-8 flex flex-col justify-between border border-l-0 border-[#3D425C]">
-              <p className="text-sm">
-                Средняя стоимость
-                <br />
-                одного м2, тыс. руб.
-              </p>
-              <p className="text-5xl font-gilroy font-medium">137</p>
-            </div>
-          </div>
+          <Calc />
 
-          <div className="grid grid-cols-4">
-            <div className="flex flex-col gap-6 mr-8 border-b border-[#3D425C]">
-              <div className="flex justify-between">
-                <p className="font-gilroy font-medium">
-                  Очных консультаций в месяц
-                </p>
-                <p className="font-gilroy font-medium text-[#798FFF]">
-                  {inPersonConsultations}
-                </p>
-              </div>
-              <div className="py-[9px]">
-                <Slider
-                  min={10}
-                  max={1000}
-                  step={10}
-                  value={inPersonConsultations}
-                  onChange={(value) => setInPersonConsultations(value)}
-                  tooltip={false}
-                />
-              </div>
-
-              <Button icon={<ArrowRightIcon />} className="px-6 py-4 w-full">
-                Включить инструмент
-              </Button>
-            </div>
-
-            <div className="col-span-3 grid grid-cols-2">
-              <div>
-                <div className="px-8 py-6 border border-[#3D425C] flex flex-col gap-4">
-                  <p className="text-sm">Срок реализации</p>
-                  <div className="grid grid-cols-2">
-                    <p className="text-5xl font-gilroy font-medium  flex items-end gap-1.5">
-                      <span className="text-gradient">12</span>
-                      <span className="text-gradient text-2xl">месяцев</span>
-                    </p>
-                    <p className="text-xs">
-                      На <span className="text-[#798FFF]">24 месяца</span> вы
-                      сократили срок
-                      <br />
-                      реализации проекта
-                    </p>
-                  </div>
-                </div>
-
-                <div className="px-8 py-6 border border-t-0 border-[#3D425C] flex flex-col gap-4">
-                  <p className="text-sm">Месячный доход</p>
-                  <div className="grid grid-cols-2">
-                    <p className="text-5xl font-gilroy font-medium  flex items-end gap-1.5">
-                      <span className="text-gradient">480,2</span>
-                      <span className="text-gradient text-2xl">млн руб.</span>
-                    </p>
-                    <p className="text-xs">
-                      На <span className="text-[#798FFF]">200 млн руб.</span> в
-                      месяц вы заработали больше
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <div className="px-8 py-6 border border-l-0 border-[#3D425C] flex flex-col gap-4">
-                <p className="text-sm">Статистика продаж</p>
-                <div className="flex flex-col gap-3">
-                  <div className="flex items-center gap-4">
-                    <p className="w-[36px] text-sm">100%</p>
-                    <div className="w-[284px] bg-[#212431] rounded-full flex justify-center">
-                      <div className="p-3.5 bg-gradient rounded-full w-full">
-                        <p className="text-center">100</p>
-                      </div>
-                    </div>
-                    <p className="text-sm text-[#8088A7]">
-                      Консультаций в офисе
-                    </p>
-                  </div>
-
-                  <div className="flex items-center gap-4">
-                    <p className="w-[36px] text-sm">48%</p>
-                    <div className="w-[284px] bg-[#212431] rounded-full flex justify-center">
-                      <div className="p-3.5 bg-gradient rounded-full w-[50%]">
-                        <p className="text-center">30</p>
-                      </div>
-                    </div>
-                    <p className="text-sm text-[#8088A7]">Бронь квартиры</p>
-                  </div>
-
-                  <div className="flex items-center gap-4">
-                    <p className="w-[36px] text-sm">32%</p>
-                    <div className="w-[284px] bg-[#212431] rounded-full flex justify-center">
-                      <div className="p-3.5 bg-gradient rounded-full w-[22%]">
-                        <p className="text-center">10</p>
-                      </div>
-                    </div>
-                    <p className="text-sm text-[#8088A7]">Продажа</p>
-                  </div>
-                </div>
-              </div>
-            </div>
+          <div className="absolute right-0 top-0 blur-[18px]">
+            <BlendingCalc />
           </div>
         </div>
 
-        <div className="flex flex-col gap-16 mb-40">
+        <div className="flex flex-col gap-16 2xl:mb-40 sm:mb-[120px] mb-20">
           <h2 className="font-gilroy text-[64px] text-gradient leading-none font-medium w-fit">
             Проекты
           </h2>
@@ -593,12 +487,15 @@ function App() {
           </div>
         </div>
 
-        <div className="mb-40 flex flex-col gap-16">
+        <div className="relative flex flex-col gap-16 2xl:mb-40 sm:mb-[120px] mb-20">
           <h2 className="font-gilroy text-[64px] text-gradient leading-none font-medium">
             Наши клиенты{" "}
             <span style={{ WebkitTextFillColor: "#fff" }}>в девелопменте</span>
           </h2>
           <img src="/images/ClientsLogos.png" alt="" />
+          <div className="absolute top-0 right-0 blur-[34px]">
+            <BlendingClients />
+          </div>
         </div>
       </div>
     </div>
diff --git a/client/src/assets/regionsData.json b/client/src/assets/regionsData.json
index f64152d..7d4018f 100644
--- a/client/src/assets/regionsData.json
+++ b/client/src/assets/regionsData.json
@@ -1,650 +1,555 @@
 [
   {
     "id": 1,
-    "totalArea": 328326.4,
-    "flatCount": 7433,
-    "priceAvg": 71655,
-    "objSquareLivingAmt": 328326.36,
-    "objCnt": 49
+    "name": "Алтайский край",
+    "areaInComplex": 8384,
+    "areaApartment": 50,
+    "costPerSquare": 83
   },
   {
     "id": 2,
-    "totalArea": 2667309.0,
-    "flatCount": 55441,
-    "priceAvg": 98441,
-    "objSquareLivingAmt": 2667646.9,
-    "objCnt": 247
+    "name": "Амурская область",
+    "areaInComplex": 5837,
+    "areaApartment": 48,
+    "costPerSquare": 131
   },
   {
     "id": 3,
-    "totalArea": 384171.1,
-    "flatCount": 6932,
-    "priceAvg": 70582,
-    "objSquareLivingAmt": 384171.07,
-    "objCnt": 62
+    "name": "Архангельская область",
+    "areaInComplex": 6566,
+    "areaApartment": 44,
+    "costPerSquare": 101
   },
   {
     "id": 4,
-    "totalArea": 51068.6,
-    "flatCount": 1132,
-    "priceAvg": 89784,
-    "objSquareLivingAmt": 51068.63,
-    "objCnt": 11
+    "name": "Астраханская область",
+    "areaInComplex": 11851,
+    "areaApartment": 50,
+    "costPerSquare": 96
   },
   {
     "id": 5,
-    "totalArea": 283714.4,
-    "flatCount": 4571,
-    "priceAvg": 34194,
-    "objSquareLivingAmt": 283714.37,
-    "objCnt": 33
+    "name": "Белгородская область",
+    "areaInComplex": 4570,
+    "areaApartment": 51,
+    "costPerSquare": 86
+  },
+  {
+    "id": 6,
+    "name": "Брянская область",
+    "areaInComplex": 7333,
+    "areaApartment": 59,
+    "costPerSquare": 60
   },
   {
     "id": 7,
-    "totalArea": 302164.8,
-    "flatCount": 4254,
-    "priceAvg": 62048,
-    "objSquareLivingAmt": 302164.81,
-    "objCnt": 69
+    "name": "Владимирская область",
+    "areaInComplex": 7509,
+    "areaApartment": 56,
+    "costPerSquare": 54
   },
   {
     "id": 8,
-    "totalArea": 40553.1,
-    "flatCount": 676,
-    "priceAvg": 52949,
-    "objSquareLivingAmt": 40553.11,
-    "objCnt": 9
+    "name": "Волгоградская область",
+    "areaInComplex": 7378,
+    "areaApartment": 52,
+    "costPerSquare": 76
   },
   {
     "id": 9,
-    "totalArea": 66177.7,
-    "flatCount": 1025,
-    "priceAvg": 73179,
-    "objSquareLivingAmt": 66177.73,
-    "objCnt": 6
+    "name": "Вологодская область",
+    "areaInComplex": 5235,
+    "areaApartment": 51,
+    "costPerSquare": 54
   },
   {
     "id": 10,
-    "totalArea": 169525.7,
-    "flatCount": 3441,
-    "priceAvg": 107511,
-    "objSquareLivingAmt": 169525.71,
-    "objCnt": 26
+    "name": "Воронежская область",
+    "areaInComplex": 13002,
+    "areaApartment": 48,
+    "costPerSquare": 77
   },
   {
     "id": 11,
-    "totalArea": 83689.5,
-    "flatCount": 2005,
-    "priceAvg": 80559,
-    "objSquareLivingAmt": 83689.47,
-    "objCnt": 9
+    "name": "Город Москва",
+    "areaInComplex": 23218,
+    "areaApartment": 53,
+    "costPerSquare": 296
   },
   {
     "id": 12,
-    "totalArea": 313555.9,
-    "flatCount": 5252,
-    "priceAvg": 62782,
-    "objSquareLivingAmt": 313555.87,
-    "objCnt": 51
+    "name": "Город Санкт-Петербург",
+    "areaInComplex": 16904,
+    "areaApartment": 43,
+    "costPerSquare": 202
   },
   {
     "id": 13,
-    "totalArea": 187186.1,
-    "flatCount": 3609,
-    "priceAvg": 72793,
-    "objSquareLivingAmt": 187186.12,
-    "objCnt": 25
+    "name": "Город Севастополь",
+    "areaInComplex": 5908,
+    "areaApartment": 47,
+    "costPerSquare": 136
   },
   {
     "id": 14,
-    "totalArea": 395419.9,
-    "flatCount": 7983,
-    "priceAvg": 120368,
-    "objSquareLivingAmt": 395419.87,
-    "objCnt": 55
+    "name": "Забайкальский край",
+    "areaInComplex": 7088,
+    "areaApartment": 48,
+    "costPerSquare": 129
   },
   {
     "id": 15,
-    "totalArea": 314864.7,
-    "flatCount": 4873,
-    "priceAvg": 71655,
-    "objSquareLivingAmt": 314864.74,
-    "objCnt": 50
+    "name": "Ивановская область",
+    "areaInComplex": 6594,
+    "areaApartment": 58,
+    "costPerSquare": 60
   },
   {
     "id": 16,
-    "totalArea": 2270183.8,
-    "flatCount": 44495,
-    "priceAvg": 135012,
-    "objSquareLivingAmt": 2270183.83,
-    "objCnt": 234
+    "name": "Иркутская область",
+    "areaInComplex": 5067,
+    "areaApartment": 51,
+    "costPerSquare": 103
   },
   {
     "id": 17,
-    "totalArea": 92368.1,
-    "flatCount": 2082,
-    "priceAvg": 123219,
-    "objSquareLivingAmt": 92368.12,
-    "objCnt": 29
+    "name": "Кабардино-Балкарская Республика",
+    "areaInComplex": 4379,
+    "areaApartment": 71,
+    "costPerSquare": 62
   },
   {
     "id": 18,
-    "totalArea": 1515583.9,
-    "flatCount": 30624,
-    "priceAvg": 82633,
-    "objSquareLivingAmt": 328326.36,
-    "objCnt": 49
+    "name": "Калининградская область",
+    "areaInComplex": 7209,
+    "areaApartment": 56,
+    "costPerSquare": 87
   },
   {
     "id": 19,
-    "totalArea": 272158.0,
-    "flatCount": 5265,
-    "priceAvg": 67283,
-    "objSquareLivingAmt": 272157.99,
-    "objCnt": 50
+    "name": "Калужская область",
+    "areaInComplex": 7833,
+    "areaApartment": 55,
+    "costPerSquare": 88
   },
   {
     "id": 20,
-    "totalArea": 244186.6,
-    "flatCount": 3465,
-    "priceAvg": 57603,
-    "objSquareLivingAmt": 244186.6,
-    "objCnt": 12
+    "name": "Карачаево-Черкесская Республика",
+    "areaInComplex": 11030,
+    "areaApartment": 65,
+    "costPerSquare": 73
   },
   {
     "id": 21,
-    "totalArea": 727391.5,
-    "flatCount": 12551,
-    "priceAvg": 74907,
-    "objSquareLivingAmt": 727391.49,
-    "objCnt": 94
+    "name": "Кемеровская область - Кузбасс",
+    "areaInComplex": 7256,
+    "areaApartment": 52,
+    "costPerSquare": 71
   },
   {
     "id": 22,
-    "totalArea": 595249.9,
-    "flatCount": 11996,
-    "priceAvg": 82778,
-    "objSquareLivingAmt": 595249.94,
-    "objCnt": 71
+    "name": "Кировская область",
+    "areaInComplex": 6249,
+    "areaApartment": 51,
+    "costPerSquare": 80
   },
   {
     "id": 23,
-    "totalArea": 8316302.2,
-    "flatCount": 184301,
-    "priceAvg": 118376,
-    "objSquareLivingAmt": 8316302.17,
-    "objCnt": 735
+    "name": "Костромская область",
+    "areaInComplex": 2821,
+    "areaApartment": 55,
+    "costPerSquare": 67
   },
   {
     "id": 24,
-    "totalArea": 1548047.8,
-    "flatCount": 28193,
-    "priceAvg": 98763,
-    "objSquareLivingAmt": 1548047.81,
-    "objCnt": 108
+    "name": "Краснодарский край",
+    "areaInComplex": 11315,
+    "areaApartment": 45,
+    "costPerSquare": 118
   },
   {
     "id": 25,
-    "totalArea": 2191066.9,
-    "flatCount": 43965,
-    "priceAvg": 133366,
-    "objSquareLivingAmt": 2191066.88,
-    "objCnt": 284
+    "name": "Красноярский край",
+    "areaInComplex": 14334,
+    "areaApartment": 55,
+    "costPerSquare": 99
   },
   {
     "id": 26,
-    "totalArea": 1303948.2,
-    "flatCount": 24103,
-    "priceAvg": 79643,
-    "objSquareLivingAmt": 1303948.21,
-    "objCnt": 168
+    "name": "Курганская область",
+    "areaInComplex": 5434,
+    "areaApartment": 53,
+    "costPerSquare": 63
   },
   {
     "id": 27,
-    "totalArea": 894343.7,
-    "flatCount": 16806,
-    "priceAvg": 109923,
-    "objSquareLivingAmt": 894343.67,
-    "objCnt": 107
+    "name": "Курская область",
+    "areaInComplex": 7045,
+    "areaApartment": 54,
+    "costPerSquare": 90
   },
   {
     "id": 28,
-    "totalArea": 268490.4,
-    "flatCount": 5627,
-    "priceAvg": 130501,
-    "objSquareLivingAmt": 268490.39,
-    "objCnt": 46
+    "name": "Ленинградская область",
+    "areaInComplex": 12385,
+    "areaApartment": 40,
+    "costPerSquare": 134
   },
   {
     "id": 29,
-    "totalArea": 485896.2,
-    "flatCount": 11015,
-    "priceAvg": 101319,
-    "objSquareLivingAmt": 485896.18,
-    "objCnt": 74
+    "name": "Липецкая область",
+    "areaInComplex": 6231,
+    "areaApartment": 58,
+    "costPerSquare": 69
   },
   {
     "id": 30,
-    "totalArea": 521433.7,
-    "flatCount": 10353,
-    "priceAvg": 95551,
-    "objSquareLivingAmt": 521433.67,
-    "objCnt": 44
+    "name": "Магаданская область",
+    "areaInComplex": 3187,
+    "areaApartment": 55,
+    "costPerSquare": 85
   },
   {
     "id": 31,
-    "totalArea": 301602.6,
-    "flatCount": 5916,
-    "priceAvg": 86137,
-    "objSquareLivingAmt": 301602.61,
-    "objCnt": 66
+    "name": "Московская область",
+    "areaInComplex": 13213,
+    "areaApartment": 46,
+    "costPerSquare": 149
   },
   {
     "id": 32,
-    "totalArea": 410642.1,
-    "flatCount": 7010,
-    "priceAvg": 59869,
-    "objSquareLivingAmt": 410642.1,
-    "objCnt": 56
+    "name": "Нижегородская область",
+    "areaInComplex": 8760,
+    "areaApartment": 53,
+    "costPerSquare": 106
   },
   {
     "id": 33,
-    "totalArea": 728408.1,
-    "flatCount": 13023,
-    "priceAvg": 54047,
-    "objSquareLivingAmt": 728408.08,
-    "objCnt": 97
+    "name": "Новгородская область",
+    "areaInComplex": 5953,
+    "areaApartment": 53,
+    "costPerSquare": 71
   },
   {
     "id": 34,
-    "totalArea": 929572.5,
-    "flatCount": 18003,
-    "priceAvg": 76183,
-    "objSquareLivingAmt": 929572.53,
-    "objCnt": 126
+    "name": "Новосибирская область",
+    "areaInComplex": 6748,
+    "areaApartment": 51,
+    "costPerSquare": 107
   },
   {
     "id": 35,
-    "totalArea": 623014.5,
-    "flatCount": 12220,
-    "priceAvg": 54415,
-    "objSquareLivingAmt": 623014.54,
-    "objCnt": 119
+    "name": "Омская область",
+    "areaInComplex": 8625,
+    "areaApartment": 55,
+    "costPerSquare": 85
   },
   {
     "id": 36,
-    "totalArea": 1937243.4,
-    "flatCount": 40193,
-    "priceAvg": 76931,
-    "objSquareLivingAmt": 1937243.38,
-    "objCnt": 149
+    "name": "Оренбургская область",
+    "areaInComplex": 7686,
+    "areaApartment": 49,
+    "costPerSquare": 67
   },
   {
     "id": 37,
-    "totalArea": 316507.6,
-    "flatCount": 5442,
-    "priceAvg": 59796,
-    "objSquareLivingAmt": 316507.64,
-    "objCnt": 48
+    "name": "Орловская область",
+    "areaInComplex": 11543,
+    "areaApartment": 58,
+    "costPerSquare": 34
   },
   {
     "id": 38,
-    "totalArea": 785409.3,
-    "flatCount": 15338,
-    "priceAvg": 102540,
-    "objSquareLivingAmt": 785409.27,
-    "objCnt": 155
+    "name": "Пензенская область",
+    "areaInComplex": 12832,
+    "areaApartment": 54,
+    "costPerSquare": 74
   },
   {
     "id": 39,
-    "totalArea": 1203847.6,
-    "flatCount": 21650,
-    "priceAvg": 87364,
-    "objSquareLivingAmt": 1203847.68,
-    "objCnt": 167
+    "name": "Пермский край",
+    "areaInComplex": 11831,
+    "areaApartment": 49,
+    "costPerSquare": 102
   },
   {
     "id": 40,
-    "totalArea": 415127.4,
-    "flatCount": 7503,
-    "priceAvg": 87725,
-    "objSquareLivingAmt": 415127.41,
-    "objCnt": 53
+    "name": "Приморский край",
+    "areaInComplex": 7715,
+    "areaApartment": 50,
+    "costPerSquare": 133
+  },
+  {
+    "id": 41,
+    "name": "Псковская область",
+    "areaInComplex": 5750,
+    "areaApartment": 52,
+    "costPerSquare": 59
   },
   {
     "id": 42,
-    "totalArea": 573204.1,
-    "flatCount": 11113,
-    "priceAvg": 71425,
-    "objSquareLivingAmt": 573204.09,
-    "objCnt": 79
+    "name": "Республика Адыгея",
+    "areaInComplex": 6701,
+    "areaApartment": 44,
+    "costPerSquare": 72
   },
   {
     "id": 43,
-    "totalArea": 337445.1,
-    "flatCount": 6655,
-    "priceAvg": 80492,
-    "objSquareLivingAmt": 337445.09,
-    "objCnt": 54
+    "name": "Республика Алтай",
+    "areaInComplex": 4643,
+    "areaApartment": 45,
+    "costPerSquare": 90
   },
   {
     "id": 44,
-    "totalArea": 163623.3,
-    "flatCount": 2953,
-    "priceAvg": 67385,
-    "objSquareLivingAmt": 163623.29,
-    "objCnt": 58
+    "name": "Республика Башкортостан",
+    "areaInComplex": 10800,
+    "areaApartment": 48,
+    "costPerSquare": 98
   },
   {
     "id": 45,
-    "totalArea": 233679.6,
-    "flatCount": 4447,
-    "priceAvg": 62972,
-    "objSquareLivingAmt": 233679.61,
-    "objCnt": 43
+    "name": "Республика Бурятия",
+    "areaInComplex": 6196,
+    "areaApartment": 55,
+    "costPerSquare": 71
   },
   {
     "id": 46,
-    "totalArea": 295893.8,
-    "flatCount": 5469,
-    "priceAvg": 89784,
-    "objSquareLivingAmt": 295893.85,
-    "objCnt": 42
+    "name": "Республика Дагестан",
+    "areaInComplex": 8597,
+    "areaApartment": 62,
+    "costPerSquare": 34
   },
   {
     "id": 47,
-    "totalArea": 3294300.7,
-    "flatCount": 82121,
-    "priceAvg": 133977,
-    "objSquareLivingAmt": 3294300.7,
-    "objCnt": 266
+    "name": "Республика Калмыкия",
+    "areaInComplex": 4506,
+    "areaApartment": 60,
+    "costPerSquare": 53
   },
   {
     "id": 48,
-    "totalArea": 454826.8,
-    "flatCount": 7783,
-    "priceAvg": 69140,
-    "objSquareLivingAmt": 454826.77,
-    "objCnt": 73
+    "name": "Республика Карелия",
+    "areaInComplex": 6520,
+    "areaApartment": 49,
+    "costPerSquare": 108
   },
   {
     "id": 49,
-    "totalArea": 3186.8,
-    "flatCount": 58,
-    "priceAvg": 85363,
-    "objSquareLivingAmt": 3186.83,
-    "objCnt": 1
+    "name": "Республика Коми",
+    "areaInComplex": 9299,
+    "areaApartment": 42,
+    "costPerSquare": 81
   },
   {
     "id": 50,
-    "totalArea": 8218500.2,
-    "flatCount": 178738,
-    "priceAvg": 148558,
-    "objSquareLivingAmt": 8218500.37,
-    "objCnt": 622
+    "name": "Республика Крым",
+    "areaInComplex": 5416,
+    "areaApartment": 49,
+    "costPerSquare": 95
   },
   {
     "id": 51,
-    "totalArea": 5271.4,
-    "flatCount": 100,
-    "priceAvg": 70602,
-    "objSquareLivingAmt": 5271.4,
-    "objCnt": 1
+    "name": "Республика Марий Эл",
+    "areaInComplex": 6148,
+    "areaApartment": 60,
+    "costPerSquare": 63
   },
   {
     "id": 52,
-    "totalArea": 1147532.2,
-    "flatCount": 21682,
-    "priceAvg": 106487,
-    "objSquareLivingAmt": 1147532.16,
-    "objCnt": 131
+    "name": "Республика Мордовия",
+    "areaInComplex": 7487,
+    "areaApartment": 52,
+    "costPerSquare": 73
   },
   {
     "id": 53,
-    "totalArea": 77383.8,
-    "flatCount": 1450,
-    "priceAvg": 71014,
-    "objSquareLivingAmt": 77383.75,
-    "objCnt": 13
+    "name": "Республика Саха (Якутия)",
+    "areaInComplex": 7189,
+    "areaApartment": 50,
+    "costPerSquare": 120
   },
   {
     "id": 54,
-    "totalArea": 3465916.9,
-    "flatCount": 68169,
-    "priceAvg": 106530,
-    "objSquareLivingAmt": 3468482.46,
-    "objCnt": 514
+    "name": "Республика Северная Осетия",
+    "areaInComplex": 6297,
+    "areaApartment": 65,
+    "costPerSquare": 72
   },
   {
     "id": 55,
-    "totalArea": 552013.5,
-    "flatCount": 10068,
-    "priceAvg": 84691,
-    "objSquareLivingAmt": 552013.51,
-    "objCnt": 64
+    "name": "Республика Татарстан",
+    "areaInComplex": 9702,
+    "areaApartment": 51,
+    "costPerSquare": 135
   },
   {
     "id": 56,
-    "totalArea": 438084.8,
-    "flatCount": 8975,
-    "priceAvg": 66808,
-    "objSquareLivingAmt": 438085.17,
-    "objCnt": 57
+    "name": "Республика Тыва",
+    "areaInComplex": 3185,
+    "areaApartment": 44,
+    "costPerSquare": 123
   },
   {
     "id": 57,
-    "totalArea": 311673.4,
-    "flatCount": 5381,
-    "priceAvg": 34194,
-    "objSquareLivingAmt": 311673.43,
-    "objCnt": 27
+    "name": "Республика Хакасия",
+    "areaInComplex": 5443,
+    "areaApartment": 52,
+    "costPerSquare": 67
   },
   {
     "id": 58,
-    "totalArea": 1257497.0,
-    "flatCount": 23172,
-    "priceAvg": 74291,
-    "objSquareLivingAmt": 1257497.04,
-    "objCnt": 98
+    "name": "Ростовская область",
+    "areaInComplex": 10987,
+    "areaApartment": 48,
+    "costPerSquare": 94
   },
   {
     "id": 59,
-    "totalArea": 1656401.4,
-    "flatCount": 33743,
-    "priceAvg": 101629,
-    "objSquareLivingAmt": 1656401.38,
-    "objCnt": 140
+    "name": "Рязанская область",
+    "areaInComplex": 14581,
+    "areaApartment": 49,
+    "costPerSquare": 76
   },
   {
     "id": 60,
-    "totalArea": 218481.0,
-    "flatCount": 4233,
-    "priceAvg": 59133,
-    "objSquareLivingAmt": 218481.01,
-    "objCnt": 38
+    "name": "Самарская область",
+    "areaInComplex": 10571,
+    "areaApartment": 55,
+    "costPerSquare": 82
   },
   {
     "id": 61,
-    "totalArea": 2790815.6,
-    "flatCount": 57789,
-    "priceAvg": 94335,
-    "objSquareLivingAmt": 2790815.55,
-    "objCnt": 254
+    "name": "Саратовская область",
+    "areaInComplex": 7789,
+    "areaApartment": 53,
+    "costPerSquare": 59
   },
   {
     "id": 62,
-    "totalArea": 1122750.6,
-    "flatCount": 22772,
-    "priceAvg": 76168,
-    "objSquareLivingAmt": 1122750.59,
-    "objCnt": 77
+    "name": "Сахалинская область",
+    "areaInComplex": 5668,
+    "areaApartment": 51,
+    "costPerSquare": 153
   },
   {
     "id": 63,
-    "totalArea": 2082471.7,
-    "flatCount": 37726,
-    "priceAvg": 82324,
-    "objSquareLivingAmt": 2082471.74,
-    "objCnt": 197
+    "name": "Свердловская область",
+    "areaInComplex": 12467,
+    "areaApartment": 48,
+    "costPerSquare": 111
   },
   {
     "id": 64,
-    "totalArea": 638664.9,
-    "flatCount": 11982,
-    "priceAvg": 59320,
-    "objSquareLivingAmt": 638664.92,
-    "objCnt": 82
+    "name": "Смоленская область",
+    "areaInComplex": 5512,
+    "areaApartment": 55,
+    "costPerSquare": 54
   },
   {
     "id": 65,
-    "totalArea": 277718.5,
-    "flatCount": 5418,
-    "priceAvg": 153297,
-    "objSquareLivingAmt": 277718.51,
-    "objCnt": 49
+    "name": "Ставропольский край",
+    "areaInComplex": 7762,
+    "areaApartment": 54,
+    "costPerSquare": 80
   },
   {
     "id": 66,
-    "totalArea": 4051855.4,
-    "flatCount": 85142,
-    "priceAvg": 110720,
-    "objSquareLivingAmt": 4051855.37,
-    "objCnt": 325
+    "name": "Тамбовская область",
+    "areaInComplex": 6631,
+    "areaApartment": 54,
+    "costPerSquare": 61
   },
   {
     "id": 67,
-    "totalArea": 325201.7,
-    "flatCount": 5895,
-    "priceAvg": 53924,
-    "objSquareLivingAmt": 325201.67,
-    "objCnt": 59
+    "name": "Тверская область",
+    "areaInComplex": 5696,
+    "areaApartment": 52,
+    "costPerSquare": 79
   },
   {
     "id": 68,
-    "totalArea": 305018.1,
-    "flatCount": 5691,
-    "priceAvg": 61498,
-    "objSquareLivingAmt": 305018.06,
-    "objCnt": 46
+    "name": "Томская область",
+    "areaInComplex": 4397,
+    "areaApartment": 51,
+    "costPerSquare": 105
   },
   {
     "id": 69,
-    "totalArea": 467081.2,
-    "flatCount": 8962,
-    "priceAvg": 79237,
-    "objSquareLivingAmt": 467081.17,
-    "objCnt": 82
+    "name": "Тульская область",
+    "areaInComplex": 7696,
+    "areaApartment": 48,
+    "costPerSquare": 90
   },
   {
     "id": 70,
-    "totalArea": 281391.0,
-    "flatCount": 5551,
-    "priceAvg": 104611,
-    "objSquareLivingAmt": 281391.03,
-    "objCnt": 64
+    "name": "Тюменская область",
+    "areaInComplex": 11328,
+    "areaApartment": 52,
+    "costPerSquare": 100
   },
   {
     "id": 71,
-    "totalArea": 992802.1,
-    "flatCount": 20633,
-    "priceAvg": 89967,
-    "objSquareLivingAmt": 992802.07,
-    "objCnt": 129
+    "name": "Удмуртская Республика",
+    "areaInComplex": 6701,
+    "areaApartment": 49,
+    "costPerSquare": 83
   },
   {
     "id": 72,
-    "totalArea": 3115076.8,
-    "flatCount": 60096,
-    "priceAvg": 100219,
-    "objSquareLivingAmt": 3115076.85,
-    "objCnt": 275
+    "name": "Ульяновская область",
+    "areaInComplex": 7177,
+    "areaApartment": 48,
+    "costPerSquare": 75
   },
   {
     "id": 73,
-    "totalArea": 437822.7,
-    "flatCount": 9120,
-    "priceAvg": 75329,
-    "objSquareLivingAmt": 437822.72,
-    "objCnt": 61
+    "name": "Хабаровский край",
+    "areaInComplex": 8358,
+    "areaApartment": 53,
+    "costPerSquare": 110
   },
   {
     "id": 74,
-    "totalArea": 1044332.8,
-    "flatCount": 20379,
-    "priceAvg": 78438,
-    "objSquareLivingAmt": 1044332.82,
-    "objCnt": 121
+    "name": "Ханты-Мансийский АО - Югра",
+    "areaInComplex": 9149,
+    "areaApartment": 56,
+    "costPerSquare": 109
   },
   {
     "id": 75,
-    "totalArea": 163028.2,
-    "flatCount": 3388,
-    "priceAvg": 129153,
-    "objSquareLivingAmt": 163028.15,
-    "objCnt": 23
+    "name": "Челябинская область",
+    "areaInComplex": 8631,
+    "areaApartment": 51,
+    "costPerSquare": 78
   },
   {
     "id": 76,
-    "totalArea": 656699.4,
-    "flatCount": 12248,
-    "priceAvg": 77390,
-    "objSquareLivingAmt": 656699.39,
-    "objCnt": 101
+    "name": "Чеченская Республика",
+    "areaInComplex": 20349,
+    "areaApartment": 70,
+    "costPerSquare": 58
   },
   {
     "id": 77,
-    "totalArea": 16322256.6,
-    "flatCount": 309477,
-    "priceAvg": 295872,
-    "objSquareLivingAmt": 1.632225665e7,
-    "objCnt": 703
+    "name": "Чувашская Республика",
+    "areaInComplex": 7738,
+    "areaApartment": 58,
+    "costPerSquare": 75
   },
   {
     "id": 78,
-    "totalArea": 7370217.2,
-    "flatCount": 170718,
-    "priceAvg": 202300,
-    "objSquareLivingAmt": 7370217.18,
-    "objCnt": 436
+    "name": "Ямало-Ненецкий АО",
+    "areaInComplex": 4020,
+    "areaApartment": 50,
+    "costPerSquare": 145
   },
   {
     "id": 79,
-    "totalArea": 2146.0,
-    "flatCount": 50,
-    "priceAvg": 62048,
-    "objSquareLivingAmt": 2145.95,
-    "objCnt": 1
-  },
-  {
-    "id": 86,
-    "totalArea": 439174.3,
-    "flatCount": 7860,
-    "priceAvg": 109173,
-    "objSquareLivingAmt": 439174.26,
-    "objCnt": 48
-  },
-  {
-    "id": 89,
-    "totalArea": 152761.8,
-    "flatCount": 3062,
-    "priceAvg": 144671,
-    "objSquareLivingAmt": 152761.83,
-    "objCnt": 38
-  },
-  {
-    "id": 91,
-    "totalArea": 882872.1,
-    "flatCount": 18151,
-    "priceAvg": 95417,
-    "objSquareLivingAmt": 882872.05,
-    "objCnt": 163
-  },
-  {
-    "id": 92,
-    "totalArea": 112259.8,
-    "flatCount": 2367,
-    "priceAvg": 135839,
-    "objSquareLivingAmt": 112259.82,
-    "objCnt": 19
+    "name": "Ярославская область",
+    "areaInComplex": 6502,
+    "areaApartment": 54,
+    "costPerSquare": 77
   }
 ]
diff --git a/client/src/assets/regionsData2.json b/client/src/assets/regionsData2.json
deleted file mode 100644
index dfe9ba0..0000000
--- a/client/src/assets/regionsData2.json
+++ /dev/null
@@ -1,30 +0,0 @@
-[
-  {
-    "id": 1,
-    "name": "Алтайский край",
-    "areaInComplex": 8384,
-    "areaApartment": 50,
-    "costPerSquare": 83
-  },
-  {
-    "id": 2,
-    "name": "Амурская область",
-    "areaInComplex": 5837,
-    "areaApartment": 48,
-    "costPerSquare": 131
-  },
-  {
-    "id": 3,
-    "name": "Архангельская область",
-    "areaInComplex": 6566,
-    "areaApartment": 44,
-    "costPerSquare": 101
-  },
-  {
-    "id": 4,
-    "name": "Астраханская область",
-    "areaInComplex": 11851,
-    "areaApartment": 50,
-    "costPerSquare": 96
-  }
-]
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 807d2f8..6b54603 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -3,13 +3,25 @@ import { ReactNode } from "react";
 interface ButtonProps {
   children: ReactNode;
   icon?: JSX.Element;
+  color?: "primary" | "secondary";
   className?: string;
+  handleClick?: () => void;
 }
 
-function Button({ children, icon, className }: ButtonProps) {
+function Button({
+  children,
+  color = "primary",
+  icon,
+  className,
+  handleClick,
+}: ButtonProps) {
   return (
     <button
-      className={`group relative px-6 py-2 rounded-full bg-gradient flex justify-between items-center overflow-hidden w-fit ${className}`}
+      onClick={handleClick}
+      className={`group relative px-6 py-2 rounded-full ${
+        (color === "primary" && "bg-gradient") ||
+        (color === "secondary" && "outline outline-1 outline-[#3D425C]")
+      } flex justify-between items-center overflow-hidden w-fit ${className}`}
     >
       <span className="group-hover:opacity-10 opacity-0 bg-black transition-opacity absolute top-0 left-0 w-full h-full"></span>
       <span className="relative font-gilroy font-medium">{children}</span>
diff --git a/client/src/components/Calc.tsx b/client/src/components/Calc.tsx
new file mode 100644
index 0000000..3c5e0e3
--- /dev/null
+++ b/client/src/components/Calc.tsx
@@ -0,0 +1,377 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import Slider from "react-rangeslider";
+import Button from "./Button";
+import CalcSelect from "./CalcSelect";
+import ArrowRightIcon from "./icons/ArrowRightIcon";
+import regionsData from "../assets/regionsData.json";
+import { useEffect, useState } from "react";
+import CloseIcon from "./icons/CloseIcon";
+
+interface Region {
+  id: number;
+  name: string;
+  areaInComplex: number;
+  areaApartment: number;
+  costPerSquare: number;
+}
+
+function Calc() {
+  const [consultations, setConsultations] = useState<number>(100);
+  const [selectedRegion, setSelectedRegion] = useState<Region>();
+  const [implementationPeriod, setImplementationPeriod] = useState<number>();
+  const [oldImplementationPeriod, setOldImplementationPeriod] =
+    useState<number>();
+  const [monthlyIncome, setMonthlyIncome] = useState<number>();
+  const [oldMonthlyIncome, setOldMonthlyIncome] = useState<number>();
+  const [isToolEnabled, setIsToolEnabled] = useState<boolean>(false);
+  const [reservation, setReservation] = useState<number>();
+  const [oldReservation, setOldReservation] = useState<number>();
+  const [sales, setSales] = useState<number>();
+  const [oldSales, setOldSales] = useState<number>();
+  const [diffImplementationPeriod, setDiffImplementationPeriod] =
+    useState<number>();
+  const [diffMonthlyIncome, setDiffMonthlyIncome] = useState<number>();
+  const [implementationPeriodEnding, setImplementationPeriodEnding] =
+    useState<string>();
+  const [oldImplementationPeriodEnding, setOldImplementationPeriodEnding] =
+    useState<string>();
+  const [diffImplementationPeriodEnding, setDiffImplementationPeriodEnding] =
+    useState<string>();
+
+  useEffect(() => {
+    setSelectedRegion(regionsData.find((region) => region.id === 11));
+  }, []);
+
+  useEffect(() => {
+    if (!consultations || !selectedRegion || !sales || !oldSales) return;
+
+    setOldImplementationPeriod(
+      Math.round(
+        selectedRegion.areaInComplex / selectedRegion.areaApartment / oldSales
+      )
+    );
+    setImplementationPeriod(
+      Math.round(
+        selectedRegion.areaInComplex / selectedRegion.areaApartment / sales
+      )
+    );
+
+    setOldMonthlyIncome(
+      Math.round(
+        (selectedRegion.areaApartment *
+          selectedRegion.costPerSquare *
+          oldSales) /
+          1000
+      )
+    );
+    setMonthlyIncome(
+      Math.round(
+        (selectedRegion.areaApartment * selectedRegion.costPerSquare * sales) /
+          1000
+      )
+    );
+  }, [consultations, selectedRegion, isToolEnabled, sales]);
+
+  useEffect(() => {
+    setOldReservation(Math.round((30 * consultations) / 100));
+    setReservation(Math.round((48 * consultations) / 100));
+
+    setOldSales(Math.round((((30 * consultations) / 100) * 30) / 100));
+    setSales(Math.round((((48 * consultations) / 100) * 42) / 100));
+  }, [consultations]);
+
+  useEffect(() => {
+    if (!implementationPeriod || !oldImplementationPeriod) return;
+
+    setDiffImplementationPeriod(oldImplementationPeriod - implementationPeriod);
+  }, [implementationPeriod, oldImplementationPeriod]);
+
+  useEffect(() => {
+    if (!monthlyIncome || !oldMonthlyIncome) return;
+
+    setDiffMonthlyIncome(monthlyIncome - oldMonthlyIncome);
+  }, [monthlyIncome, oldMonthlyIncome]);
+
+  useEffect(() => {
+    if (!implementationPeriod) return;
+
+    if (implementationPeriod > 10 && implementationPeriod < 15) {
+      setOldImplementationPeriodEnding("месяцев");
+      return;
+    }
+
+    if (implementationPeriod % 10 === 1) {
+      setImplementationPeriodEnding("месяц");
+    } else if (
+      implementationPeriod % 10 === 2 ||
+      implementationPeriod % 10 === 3 ||
+      implementationPeriod % 10 === 4
+    ) {
+      setImplementationPeriodEnding("месяца");
+    } else {
+      setImplementationPeriodEnding("месяцев");
+    }
+  }, [implementationPeriod]);
+
+  useEffect(() => {
+    if (!oldImplementationPeriod) return;
+
+    if (oldImplementationPeriod > 10 && oldImplementationPeriod < 15) {
+      setOldImplementationPeriodEnding("месяцев");
+      return;
+    }
+
+    if (oldImplementationPeriod % 10 === 1) {
+      setOldImplementationPeriodEnding("месяц");
+    } else if (
+      oldImplementationPeriod % 10 === 2 ||
+      oldImplementationPeriod % 10 === 3 ||
+      oldImplementationPeriod % 10 === 4
+    ) {
+      setOldImplementationPeriodEnding("месяца");
+    } else {
+      setOldImplementationPeriodEnding("месяцев");
+    }
+  }, [oldImplementationPeriod]);
+
+  useEffect(() => {
+    if (!diffImplementationPeriod) return;
+
+    if (diffImplementationPeriod > 10 && diffImplementationPeriod < 15) {
+      setDiffImplementationPeriodEnding("месяцев");
+      return;
+    }
+
+    if (diffImplementationPeriod % 10 === 1) {
+      setDiffImplementationPeriodEnding("месяц");
+    } else if (
+      diffImplementationPeriod % 10 === 2 ||
+      diffImplementationPeriod % 10 === 3 ||
+      diffImplementationPeriod % 10 === 4
+    ) {
+      setDiffImplementationPeriodEnding("месяца");
+    } else {
+      setDiffImplementationPeriodEnding("месяцев");
+    }
+  }, [diffImplementationPeriod]);
+
+  return (
+    <div className="relative flex flex-col gap-16">
+      <div className="grid grid-cols-4">
+        <div>
+          <CalcSelect
+            label="Регион"
+            placeholder="Выберите регион"
+            defaultOption={regionsData.find((region) => region.id === 11)?.name}
+            options={regionsData.map((regionItem) => regionItem.name)}
+            handleSelect={(option) => {
+              const foundRegion = regionsData.find(
+                (region) => region.name === option
+              );
+
+              if (foundRegion) {
+                setSelectedRegion(foundRegion);
+              }
+            }}
+          />
+          <div className="border border-t-0 border-[#3D425C] p-6">
+            <p className="text-[#52587A] text-xs leading-[120%]">
+              Установлены усредненные показатели по региону.
+              <br />
+              Источник:{" "}
+              <a
+                href="https://наш.дом.рф"
+                target="_blank"
+                className="text-[#798FFF]"
+              >
+                наш.дом.рф
+              </a>
+            </p>
+          </div>
+        </div>
+        <div className="px-8 py-6 flex flex-col justify-between border border-l-0 border-[#3D425C]">
+          <p className="text-sm">
+            Средняя площадь
+            <br />
+            жилья в комплексе, м2
+          </p>
+          <p className="text-5xl font-gilroy font-medium leading-none">
+            {(selectedRegion?.areaInComplex || 1500).toLocaleString()}
+          </p>
+        </div>
+        <div className="px-8 py-6 flex flex-col justify-between border border-l-0 border-[#3D425C]">
+          <p className="text-sm">
+            Средняя площадь
+            <br />
+            квартиры, м2
+          </p>
+          <p className="text-5xl font-gilroy font-medium leading-none">
+            {(selectedRegion?.areaApartment || 100).toLocaleString()}
+          </p>
+        </div>
+        <div className="px-8 py-6 flex flex-col justify-between border border-l-0 border-[#3D425C]">
+          <p className="text-sm">
+            Средняя стоимость
+            <br />
+            одного м2, тыс. руб.
+          </p>
+          <p className="text-5xl font-gilroy font-medium leading-none">
+            {(selectedRegion?.costPerSquare || 100).toLocaleString()}
+          </p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-4">
+        <div className="flex flex-col gap-6 mr-8 border-b border-[#3D425C]">
+          <div className="flex justify-between">
+            <p className="font-gilroy font-medium">
+              Очных консультаций в месяц
+            </p>
+            <p className="font-gilroy font-medium text-[#798FFF]">
+              {consultations}
+            </p>
+          </div>
+          <div className="py-[9px]">
+            <Slider
+              min={10}
+              max={1000}
+              step={10}
+              value={consultations}
+              onChange={(value) => setConsultations(value)}
+              tooltip={false}
+            />
+          </div>
+
+          <Button
+            icon={isToolEnabled ? <CloseIcon /> : <ArrowRightIcon />}
+            color={isToolEnabled ? "secondary" : "primary"}
+            handleClick={() => setIsToolEnabled((prev) => !prev)}
+            className="px-6 py-4 w-full"
+          >
+            {isToolEnabled ? "Отключить" : "Включить"} инструмент
+          </Button>
+        </div>
+
+        <div className="col-span-3 grid grid-cols-2">
+          <div>
+            <div className="px-8 py-6 border border-[#3D425C] flex flex-col gap-4">
+              <p className="text-sm">Срок реализации</p>
+              <div className="grid grid-cols-2">
+                <p
+                  className={`text-5xl font-gilroy font-medium  flex items-end gap-1.5 w-fit ${
+                    isToolEnabled && "text-gradient"
+                  }`}
+                >
+                  <span>
+                    {isToolEnabled
+                      ? implementationPeriod
+                      : oldImplementationPeriod}
+                  </span>
+                  <span className="text-2xl">
+                    {isToolEnabled
+                      ? implementationPeriodEnding
+                      : oldImplementationPeriodEnding}
+                  </span>
+                </p>
+
+                <p
+                  className={`text-xs transition-opacity ${
+                    isToolEnabled ? `opacity-100` : `opacity-0`
+                  }`}
+                >
+                  На{" "}
+                  <span className="text-[#798FFF]">
+                    {diffImplementationPeriod} {diffImplementationPeriodEnding}
+                  </span>{" "}
+                  вы сократили срок
+                  <br />
+                  реализации проекта
+                </p>
+              </div>
+            </div>
+
+            <div className="px-8 py-6 border border-t-0 border-[#3D425C] flex flex-col gap-4">
+              <p className="text-sm">Месячный доход</p>
+              <div className="grid grid-cols-2">
+                <p
+                  className={`text-5xl font-gilroy font-medium  flex items-end gap-1.5 w-fit ${
+                    isToolEnabled && "text-gradient"
+                  }`}
+                >
+                  <span>
+                    {isToolEnabled ? monthlyIncome : oldMonthlyIncome}
+                  </span>
+                  <span
+                    className={`${isToolEnabled && "text-gradient"} text-2xl`}
+                  >
+                    млн руб.
+                  </span>
+                </p>
+                <p
+                  className={`text-xs transition-opacity ${
+                    isToolEnabled ? `opacity-100` : `opacity-0`
+                  }`}
+                >
+                  На{" "}
+                  <span className="text-[#798FFF]">
+                    {diffMonthlyIncome} млн руб.
+                  </span>{" "}
+                  в месяц вы заработали больше
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="px-8 py-6 border border-l-0 border-[#3D425C] flex flex-col gap-4">
+            <p className="text-sm">Статистика продаж</p>
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center gap-4">
+                <p className="w-[36px] text-sm">100%</p>
+                <div className="w-[284px] bg-[#212431] rounded-full flex justify-center">
+                  <div className="p-3.5 bg-gradient rounded-full w-full">
+                    <p className="text-center">{consultations}</p>
+                  </div>
+                </div>
+                <p className="text-sm text-[#8088A7]">Консультаций в офисе</p>
+              </div>
+
+              <div className="flex items-center gap-4">
+                <p className="w-[36px] text-sm">{isToolEnabled ? 48 : 30}%</p>
+                <div className="w-[284px] bg-[#212431] rounded-full flex justify-center">
+                  <div
+                    className={`p-3.5 bg-gradient rounded-full transition-all w-[50%] ${
+                      isToolEnabled ? "w-[60%]" : "w-[50%]"
+                    }`}
+                  >
+                    <p className="text-center">
+                      {isToolEnabled ? reservation : oldReservation}
+                    </p>
+                  </div>
+                </div>
+                <p className="text-sm text-[#8088A7]">Бронь квартиры</p>
+              </div>
+
+              <div className="flex items-center gap-4">
+                <p className="w-[36px] text-sm">{isToolEnabled ? 42 : 30}%</p>
+                <div className="w-[284px] bg-[#212431] rounded-full flex justify-center">
+                  <div
+                    className={`p-3.5 bg-gradient rounded-full transition-all ${
+                      isToolEnabled ? "w-[32%]" : "w-[22%]"
+                    }`}
+                  >
+                    <p className="text-center">
+                      {isToolEnabled ? sales : oldSales}
+                    </p>
+                  </div>
+                </div>
+                <p className="text-sm text-[#8088A7]">Продажа</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Calc;
diff --git a/client/src/components/CalcSelect.tsx b/client/src/components/CalcSelect.tsx
index 67cfaed..5927ca5 100644
--- a/client/src/components/CalcSelect.tsx
+++ b/client/src/components/CalcSelect.tsx
@@ -6,6 +6,7 @@ import { useOnClickOutside } from "usehooks-ts";
 interface CalcSelectProps {
   label: string;
   placeholder: string;
+  defaultOption?: string;
   options: string[];
   handleSelect: (option: string) => void;
 }
@@ -13,10 +14,11 @@ interface CalcSelectProps {
 function CalcSelect({
   label,
   placeholder,
+  defaultOption = "",
   options,
   handleSelect,
 }: CalcSelectProps) {
-  const [selectedOption, setSelectedOption] = useState<string>("");
+  const [selectedOption, setSelectedOption] = useState<string>(defaultOption);
   const [isShow, setIsShow] = useState<boolean>(false);
   const ref = useRef<HTMLDivElement>(null);
   useOnClickOutside(ref, () => setIsShow(false));
diff --git a/client/src/components/ExampleCard.tsx b/client/src/components/ExampleCard.tsx
index 069941b..e2aef1f 100644
--- a/client/src/components/ExampleCard.tsx
+++ b/client/src/components/ExampleCard.tsx
@@ -8,7 +8,7 @@ interface ExampleCardProps {
 
 function ExampleCard({ title, company, image }: ExampleCardProps) {
   return (
-    <div className="mb-16 flex flex-col gap-4">
+    <div className="flex flex-col gap-4 xl:mb-16 sm:mb-10 mb-8">
       <motion.div
         initial={{ opacity: 0, translateY: 64 }}
         whileInView={{ opacity: 1, translateY: 0 }}
@@ -24,8 +24,8 @@ function ExampleCard({ title, company, image }: ExampleCardProps) {
         transition={{ duration: 1, ease: [0.58, 0.12, 0.27, 0.98], delay: 0.2 }}
         className="flex flex-col gap-1"
       >
-        <p className="font-medium text-xl font-gilroy">{title}</p>
-        <p className="text-sm">{company}</p>
+        <p className="font-medium xl:text-xl text-base font-gilroy">{title}</p>
+        <p className="xl:text-sm text-xs">{company}</p>
       </motion.div>
     </div>
   );
diff --git a/client/src/components/Headings/Heading2.tsx b/client/src/components/Headings/Heading2.tsx
new file mode 100644
index 0000000..2a6f933
--- /dev/null
+++ b/client/src/components/Headings/Heading2.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+
+interface Heading2Props {
+  children: ReactNode;
+  className?: string;
+}
+
+function Heading2({ children, className }: Heading2Props) {
+  return (
+    <h2
+      className={`2xl:text-[64px] xl:text-5xl text-[40px] text-gradient font-gilroy font-medium leading-none ${className}`}
+    >
+      {children}
+    </h2>
+  );
+}
+
+export default Heading2;
diff --git a/client/src/components/blendings/BlendingCalc.tsx b/client/src/components/blendings/BlendingCalc.tsx
new file mode 100644
index 0000000..2197abd
--- /dev/null
+++ b/client/src/components/blendings/BlendingCalc.tsx
@@ -0,0 +1,354 @@
+import React from "react";
+
+function BlendingCalc() {
+  return (
+    <svg
+      width="803"
+      height="856"
+      viewBox="0 0 803 856"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g opacity="0.3">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M361.718 843.401C432.802 805.511 403.527 673.881 472.303 631.947C531.065 596.119 619.643 692.949 675.169 652.284C723.222 617.093 674.863 534.799 685.08 476.121C694.685 420.959 752.022 370.295 733.468 317.467C714.249 262.745 630.396 262.235 594.078 217.016C557.936 172.017 580.354 80.955 526.61 59.915C470.765 38.0523 420.905 135.72 361.718 126.049C285.166 113.541 246.199 3.58393 168.661 1.42908C100.62 -0.461855 15.4587 49.1976 2.78225 116.074C-12.8603 198.598 78.9295 263.237 103.83 343.455C115.495 381.034 106.561 420.644 109.505 459.882C112.884 504.92 113.815 548.729 122.558 593.04C135.908 660.699 127.115 740.69 174.751 790.557C220.055 837.982 303.842 874.253 361.718 843.401Z"
+          stroke="url(#paint0_linear_1330_4355)"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M276.13 769.392C331.337 786.213 383.179 704.707 439.265 718.312C487.185 729.936 483.016 823.861 531.746 831.396C573.918 837.917 591.101 771.731 625.999 747.186C658.807 724.111 713.52 727.498 730.878 691.339C748.859 653.883 706.633 611.141 711.137 569.835C715.619 528.731 773.102 493.963 756.53 456.077C739.31 416.709 664.577 440.919 639.489 406.033C607.039 360.912 642.992 285.473 604.799 245.097C571.284 209.666 502.983 191.672 462.686 219.124C412.959 253 426.724 332.247 398.707 385.495C385.582 410.441 360.992 425.977 342.609 447.344C321.508 471.869 299.789 494.531 281.774 521.406C254.266 562.44 209.294 598.503 208.17 647.897C207.101 694.872 231.179 755.695 276.13 769.392Z"
+          stroke="url(#paint1_linear_1330_4355)"
+        />
+        <path
+          d="M477.963 640.002C408.617 678.804 432.62 809.644 361.148 844.375C302.954 872.654 221.694 833.808 178.783 785.385C133.662 734.468 145.281 655.937 134.616 588.747C127.631 544.743 128.33 501.521 126.659 456.998C125.204 418.208 135.473 379.49 125.36 342.014C103.772 262.016 15.6684 194.91 34.133 114.134C49.0964 48.6748 134.882 2.86178 201.887 7.23562C278.245 12.22 312.603 122.054 387.608 137.208C445.599 148.924 498.354 54.4824 552.6 78.0946C604.804 100.818 579.346 189.761 613.315 235.454C647.45 281.37 730.094 284.966 747.022 339.62C763.365 392.382 704.972 440.213 693.469 494.237C681.232 551.705 725.869 634.615 677.2 667.534C620.962 705.572 537.213 606.85 477.963 640.002Z"
+          stroke="url(#paint2_linear_1330_4355)"
+        />
+        <path
+          d="M482.75 647.856C412.969 683.542 431.803 813.386 360.077 844.982C301.677 870.708 223.017 829.423 182.509 780.114C139.914 728.266 154.262 651.293 146.228 584.675C140.967 541.047 143.249 498.473 143.245 454.528C143.241 416.242 154.791 378.46 146.205 341.15C127.877 261.507 43.515 192.116 64.6931 113.183C81.8554 49.2172 168.097 7.22668 233.978 14.0089C309.055 21.7376 338.869 131.259 412.237 148.961C468.961 162.648 524.441 71.5097 577.036 96.7829C627.653 121.105 599.28 207.83 631.076 254.118C663.027 300.633 744.351 307.225 759.02 361.717C773.181 414.323 713.864 459.312 700.534 512.136C686.354 568.326 727.292 651.689 678.108 682.34C621.276 717.757 542.371 617.366 482.75 647.856Z"
+          stroke="url(#paint3_linear_1330_4355)"
+        />
+        <path
+          d="M486.684 655.468C416.604 688.061 430.375 816.707 358.529 845.198C300.031 868.395 224.039 824.812 185.938 774.728C145.876 722.065 162.853 646.742 157.392 580.799C153.816 537.612 157.635 495.743 159.251 452.438C160.66 414.71 173.434 377.905 166.348 340.821C151.224 261.663 70.6492 190.173 94.4293 113.171C113.7 50.77 200.234 12.5715 264.906 21.684C338.604 32.0684 363.946 141.093 435.592 161.243C490.986 176.821 549.018 89.0572 599.916 115.901C648.898 141.736 617.741 226.15 647.367 272.936C677.138 319.952 757.034 329.447 769.48 383.685C781.496 436.047 721.384 478.194 706.3 529.755C690.255 584.604 727.523 668.262 677.925 696.652C620.615 729.458 546.561 627.62 486.684 655.468Z"
+          stroke="url(#paint4_linear_1330_4355)"
+        />
+        <path
+          d="M489.791 662.814C419.544 692.342 428.37 819.596 356.534 845.017C298.044 865.715 224.78 819.974 189.088 769.225C151.558 715.863 171.061 642.279 168.113 577.108C166.181 534.427 171.487 493.316 174.676 450.711C177.454 413.592 191.397 377.801 185.783 341.004C173.8 262.457 97.0496 189.052 123.317 114.064C144.604 53.2953 231.269 18.8509 294.65 30.2131C366.878 43.1611 387.827 151.51 457.673 174.003C511.675 191.394 572.086 107.066 621.243 135.39C668.55 162.648 634.741 244.668 662.205 291.855C689.803 339.274 768.17 351.574 778.433 405.47C788.341 457.502 727.563 496.81 710.801 547.054C692.971 600.501 726.604 684.298 676.692 710.44C619.018 740.649 549.811 637.585 489.791 662.814Z"
+          stroke="url(#paint5_linear_1330_4355)"
+        />
+        <path
+          d="M492.086 669.848C421.801 696.345 425.805 822.02 354.106 844.413C295.729 862.645 225.247 814.888 191.959 763.583C156.957 709.636 178.881 637.872 178.378 573.569C178.048 531.455 184.79 491.156 189.502 449.305C193.606 412.845 208.659 378.103 204.486 341.65C195.577 263.837 122.68 188.702 151.318 115.805C174.527 56.7301 261.164 25.9957 323.179 39.5239C393.849 54.9404 410.491 162.439 478.463 187.171C531.016 206.292 593.632 125.452 641.009 155.164C686.604 183.758 650.278 263.304 675.592 310.797C701.03 358.523 777.771 373.528 785.894 426.996C793.736 478.614 732.418 515.093 714.055 563.967C694.522 615.957 724.564 699.739 674.435 723.651C616.511 751.282 552.138 647.209 492.086 669.848Z"
+          stroke="url(#paint6_linear_1330_4355)"
+        />
+        <path
+          d="M493.587 676.555C423.392 700.059 422.704 823.975 351.268 843.385C293.104 859.19 225.451 809.56 194.558 757.807C162.075 703.389 186.31 633.522 188.185 570.175C189.412 528.689 197.537 489.249 203.719 448.208C209.104 412.452 225.209 378.792 222.442 342.738C216.536 265.778 147.513 189.097 178.403 118.361C203.436 61.0378 289.893 33.9626 350.468 49.5709C419.498 67.3576 431.927 173.839 497.957 200.699C549.009 221.467 613.653 144.162 659.217 175.169C703.067 205.009 664.361 282.009 687.541 329.715C710.834 377.654 785.858 395.259 791.888 448.215C797.71 499.339 735.977 533.004 716.092 580.46C694.939 630.941 721.438 714.559 671.189 736.261C613.124 761.337 553.563 656.472 493.587 676.555Z"
+          stroke="url(#paint7_linear_1330_4355)"
+        />
+        <path
+          d="M494.319 682.886C424.337 703.443 419.095 825.426 348.042 841.906C290.191 855.324 225.406 803.965 196.895 751.87C166.917 697.093 193.353 629.194 197.532 566.891C200.269 526.088 209.722 487.555 217.32 447.373C223.94 412.365 241.038 379.817 239.641 344.216C236.661 268.222 171.525 190.178 204.546 121.668C231.305 66.1497 317.43 42.6765 376.499 60.2765C443.812 80.333 452.126 185.633 516.152 214.514C565.653 236.843 632.151 163.109 675.873 195.317C717.949 226.314 677.001 300.703 698.067 348.529C719.236 396.589 792.458 416.687 796.445 469.05C800.293 519.602 738.27 550.475 716.942 596.468C694.255 645.393 717.266 728.701 666.99 748.217C608.894 770.768 554.112 665.322 494.319 682.886Z"
+          stroke="url(#paint8_linear_1330_4355)"
+        />
+        <path
+          d="M494.307 688.813C424.66 706.471 415.007 826.358 344.456 839.963C287.012 851.041 225.13 798.097 198.982 745.765C171.489 690.738 200.013 624.873 206.422 563.696C210.619 523.631 221.343 486.047 230.303 446.772C238.11 412.555 256.139 381.144 256.076 346.047C255.941 271.13 194.695 191.904 229.724 125.68C258.111 72.0137 343.757 52.0793 401.256 71.5805C466.781 93.8035 471.087 197.767 533.05 228.555C580.957 252.359 649.134 182.225 690.987 215.542C731.265 247.605 688.216 319.324 707.192 367.179C726.261 415.269 797.601 437.751 799.596 489.444C801.523 539.348 739.33 567.455 716.641 611.945C692.505 659.27 712.09 742.125 661.879 759.485C603.859 779.545 553.815 673.726 494.307 688.813Z"
+          stroke="url(#paint9_linear_1330_4355)"
+        />
+        <path
+          d="M493.582 694.318C424.387 709.131 410.472 826.764 340.536 837.556C283.593 846.343 224.639 791.959 200.833 739.492C175.8 684.323 206.299 620.551 214.859 560.579C220.465 521.303 232.403 484.709 242.668 446.386C251.61 412.998 270.511 382.748 271.741 348.205C274.367 274.469 217.007 194.242 253.921 130.356C283.835 78.5848 368.859 62.1202 424.731 83.4303C488.4 107.715 488.81 210.191 548.659 242.773C594.932 267.965 664.612 201.452 704.576 235.783C743.036 268.821 698.028 337.82 714.941 385.616C731.938 433.647 801.321 458.4 801.381 509.348C801.44 558.533 739.196 583.905 715.228 626.855C689.732 672.542 705.955 754.807 655.899 770.042C598.059 787.647 552.703 681.661 493.582 694.318Z"
+          stroke="url(#paint10_linear_1330_4355)"
+        />
+        <path
+          d="M492.16 699.364C423.53 711.392 405.508 826.623 336.298 834.666C279.946 841.215 223.941 785.534 202.448 733.034C179.849 677.83 212.205 616.205 222.835 557.512C229.797 519.073 242.891 483.506 254.402 446.176C264.43 413.654 284.141 384.587 286.623 350.644C291.92 278.188 238.435 197.138 277.108 135.638C308.448 85.7997 392.713 72.7302 446.903 95.7551C508.656 121.994 505.287 222.839 562.976 257.101C607.578 283.592 678.588 220.713 716.646 255.964C753.273 289.888 706.447 356.121 721.329 403.772C736.285 451.657 803.643 478.567 801.827 528.699C800.073 577.097 737.895 599.769 712.731 641.146C685.962 685.161 698.896 766.701 649.084 779.849C591.524 795.041 550.798 689.088 492.16 699.364Z"
+          stroke="url(#paint11_linear_1330_4355)"
+        />
+        <path
+          d="M490.07 703.926C422.116 713.232 400.147 825.92 331.768 831.285C276.094 835.653 223.05 778.818 203.84 726.382C183.64 671.246 217.738 611.817 230.355 554.472C238.618 516.916 252.807 482.412 265.504 446.114C276.566 414.491 297.025 386.623 300.716 353.325C308.594 282.246 258.964 200.548 299.269 141.475C331.933 93.6026 415.306 83.8481 467.765 108.492C527.546 136.576 520.521 235.653 576.008 271.481C618.909 299.182 691.076 239.942 727.217 276.019C761.998 310.738 713.497 374.168 726.384 421.59C739.333 469.245 804.603 498.195 800.971 547.443C797.465 594.987 735.466 615 709.189 654.777C681.236 697.088 690.959 777.775 641.474 788.875C584.293 801.701 548.13 695.976 490.07 703.926Z"
+          stroke="url(#paint12_linear_1330_4355)"
+        />
+        <path
+          d="M487.352 707.987C420.179 714.637 394.427 824.652 326.983 827.412C272.069 829.658 221.994 771.812 205.031 719.537C187.194 664.57 222.914 607.38 237.432 551.448C246.94 514.818 262.165 481.407 275.987 446.177C288.029 415.485 309.175 388.831 314.03 356.22C324.393 286.607 278.59 204.435 320.402 147.823C354.287 101.945 436.639 95.4202 487.324 121.587C545.083 151.406 534.528 248.585 587.78 285.862C628.951 314.683 702.104 259.08 736.319 295.889C769.247 331.314 719.216 391.909 730.144 439.02C741.126 486.363 804.25 517.237 798.867 565.536C793.67 612.163 731.96 629.564 704.654 667.715C675.607 708.297 682.2 788.007 633.126 797.102C576.419 807.611 544.744 702.305 487.352 707.987Z"
+          stroke="url(#paint13_linear_1330_4355)"
+        />
+        <path
+          d="M484.02 711.511C417.732 715.578 388.366 822.797 321.953 823.028C267.878 823.216 220.773 764.5 206.017 712.479C190.502 657.78 227.726 602.865 244.057 548.408C254.753 512.743 270.951 480.453 285.837 446.325C298.806 416.591 320.577 391.163 326.55 359.279C339.3 291.217 297.288 208.741 340.481 154.618C375.483 110.758 456.692 107.373 505.563 134.966C561.255 166.409 547.303 261.566 598.289 300.175C637.708 330.027 711.677 278.05 743.964 315.5C775.036 351.541 723.616 409.276 732.628 455.998C741.683 502.949 802.612 535.626 795.542 582.916C788.717 628.568 727.404 643.406 699.153 679.911C669.102 718.743 672.652 797.355 624.067 804.492C567.927 812.738 540.657 708.036 484.02 711.511Z"
+          stroke="url(#paint14_linear_1330_4355)"
+        />
+        <path
+          d="M480.112 714.486C414.806 716.046 381.998 820.354 316.71 818.138C263.551 816.334 219.408 756.887 206.818 705.212C193.579 650.876 232.186 598.268 250.242 545.34C262.067 510.678 279.176 479.535 295.063 446.537C308.904 417.788 331.239 393.595 338.282 362.474C353.317 296.044 315.055 213.43 359.501 161.82C395.519 119.996 475.467 119.656 522.49 148.575C576.075 181.53 558.862 274.549 607.557 314.375C645.207 345.167 719.825 296.798 750.184 334.797C779.4 371.365 726.734 426.224 733.874 472.48C741.049 518.962 799.736 553.323 791.048 599.545C782.661 644.168 721.848 656.497 692.737 691.339C661.77 728.403 662.369 805.804 614.351 811.031C558.865 817.072 535.911 713.154 480.112 714.486Z"
+          stroke="url(#paint15_linear_1330_4355)"
+        />
+        <path
+          d="M475.657 716.887C411.425 716.018 375.351 817.31 311.276 812.732C259.106 809.005 217.914 748.965 207.441 697.723C196.429 643.842 236.302 593.566 255.99 542.221C268.884 508.594 286.841 478.621 303.666 446.779C318.324 419.037 341.161 396.085 349.226 365.763C366.443 301.038 331.882 218.45 377.454 169.369C414.386 129.595 492.96 132.201 538.104 162.348C589.549 196.702 569.214 287.475 615.602 328.401C651.466 360.043 726.569 315.257 755.005 353.713C782.37 390.722 728.601 442.693 733.916 488.409C739.257 534.349 795.664 570.272 785.428 615.373C775.545 658.913 715.333 668.792 685.446 701.96C653.654 737.242 651.397 813.323 604.019 816.694C549.273 820.589 530.537 717.63 475.657 716.887Z"
+          stroke="url(#paint16_linear_1330_4355)"
+        />
+        <path
+          d="M470.687 718.693C407.618 715.478 368.457 813.659 305.68 806.806C254.565 801.226 216.305 740.731 207.9 690.007C199.063 636.671 240.08 588.746 261.309 539.03C275.212 506.47 293.954 477.685 311.653 447.023C327.072 420.309 350.35 398.601 359.388 369.11C378.68 306.158 347.763 223.755 394.336 177.215C432.079 139.499 509.173 144.948 552.414 176.223C601.689 211.863 578.377 300.289 622.443 342.199C656.513 374.602 731.939 333.367 758.46 372.19C783.983 409.553 729.251 458.631 732.793 503.737C736.351 549.064 790.444 586.428 778.73 630.357C767.422 672.767 707.908 680.258 677.328 711.743C644.799 745.234 639.786 819.891 593.119 821.461C539.194 823.275 524.573 721.441 470.687 718.693Z"
+          stroke="url(#paint17_linear_1330_4355)"
+        />
+        <path
+          d="M465.238 719.893C403.417 714.417 361.35 809.4 299.948 800.363C249.954 793.004 214.603 732.186 208.212 682.062C201.492 629.356 243.536 583.798 266.211 535.752C281.061 504.287 300.525 476.706 319.033 447.244C335.158 421.575 358.817 401.112 368.776 372.481C390.035 311.366 362.7 229.303 410.149 185.308C448.601 149.656 524.115 157.84 565.432 190.144C612.515 226.957 586.372 312.942 628.109 355.721C660.378 388.796 735.968 351.071 760.588 390.174C784.281 427.805 728.726 473.992 730.547 518.42C732.377 563.066 784.128 601.749 771.01 644.461C758.346 685.695 699.622 690.865 668.433 720.661C635.257 752.357 627.59 825.493 581.701 825.319C528.675 825.118 518.058 724.571 465.238 719.893Z"
+          stroke="url(#paint18_linear_1330_4355)"
+        />
+        <path
+          d="M459.336 720.469C398.843 712.822 354.054 804.529 294.102 793.4C245.289 784.339 212.815 723.329 208.381 673.884C203.72 621.891 246.671 578.708 270.698 532.37C286.433 502.023 306.556 475.661 325.809 447.415C342.583 422.806 366.562 403.585 377.392 375.842C400.509 316.621 376.685 235.048 424.886 193.599C463.947 160.009 537.785 170.819 577.163 204.052C622.037 241.924 593.212 325.382 632.617 368.915C663.084 402.573 738.683 368.313 761.418 407.608C783.297 445.425 727.058 488.729 727.214 532.415C727.37 576.315 776.758 616.194 762.31 657.646C748.363 697.664 690.519 700.582 658.803 728.69C625.067 758.589 614.854 830.111 569.807 828.254C517.754 826.109 511.023 727.003 459.336 720.469Z"
+          stroke="url(#paint19_linear_1330_4355)"
+        />
+        <path
+          d="M453.015 720.405C393.923 710.677 346.596 799.04 288.164 785.915C240.587 775.228 210.955 714.157 208.419 665.464C205.753 614.264 249.494 573.458 274.777 528.862C291.335 499.655 312.053 474.52 331.987 447.505C349.353 423.969 373.594 405.984 385.242 379.153C410.105 321.878 389.718 240.942 438.548 202.03C478.119 170.497 550.191 183.819 587.62 217.884C630.272 256.702 598.916 337.555 635.993 381.729C664.66 415.883 740.116 385.034 760.987 424.436C781.073 462.356 724.285 502.792 722.834 545.674C721.376 588.766 768.385 629.721 752.683 669.874C737.524 708.638 680.645 709.377 648.485 735.799C614.275 763.906 601.625 833.727 557.481 830.25C506.472 826.233 503.504 728.716 453.015 720.405Z"
+          stroke="url(#paint20_linear_1330_4355)"
+        />
+        <path
+          d="M446.314 719.689C388.692 707.974 339.014 792.934 282.165 777.911C235.878 765.679 209.046 704.67 208.345 656.802C207.608 606.47 252.023 568.039 278.466 525.212C295.784 497.164 317.034 473.263 337.583 447.489C355.487 425.034 379.931 408.279 392.344 382.381C418.84 327.099 401.808 246.94 451.146 210.555C491.128 181.07 561.354 196.787 596.826 231.583C637.25 271.236 603.517 349.414 638.274 394.117C665.147 428.679 740.313 401.182 759.344 440.608C777.66 478.551 720.458 516.139 717.461 558.159C714.448 600.386 759.068 642.295 742.188 681.114C725.892 718.591 670.058 717.228 637.534 741.971C602.938 768.291 587.963 836.332 544.779 831.3C494.879 825.485 495.546 729.697 446.314 719.689Z"
+          stroke="url(#paint21_linear_1330_4355)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_1330_4355"
+          x1="-18.6542"
+          y1="18.349"
+          x2="883.036"
+          y2="814.176"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_1330_4355"
+          x1="501.325"
+          y1="158.763"
+          x2="554.851"
+          y2="1018.73"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_1330_4355"
+          x1="16.6054"
+          y1="17.006"
+          x2="876.14"
+          y2="834.802"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_1330_4355"
+          x1="50.9994"
+          y1="16.8055"
+          x2="868.012"
+          y2="854.546"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint4_linear_1330_4355"
+          x1="84.4887"
+          y1="17.6929"
+          x2="858.707"
+          y2="873.358"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint5_linear_1330_4355"
+          x1="117.043"
+          y1="19.6298"
+          x2="848.283"
+          y2="891.208"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint6_linear_1330_4355"
+          x1="148.618"
+          y1="22.5526"
+          x2="836.789"
+          y2="908.044"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint7_linear_1330_4355"
+          x1="179.18"
+          y1="26.4242"
+          x2="824.277"
+          y2="923.845"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint8_linear_1330_4355"
+          x1="208.698"
+          y1="31.175"
+          x2="810.804"
+          y2="938.561"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint9_linear_1330_4355"
+          x1="237.144"
+          y1="36.7521"
+          x2="796.43"
+          y2="952.162"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint10_linear_1330_4355"
+          x1="264.498"
+          y1="43.1092"
+          x2="781.217"
+          y2="964.629"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint11_linear_1330_4355"
+          x1="290.727"
+          y1="50.1821"
+          x2="765.215"
+          y2="975.93"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint12_linear_1330_4355"
+          x1="315.812"
+          y1="57.9134"
+          x2="748.487"
+          y2="986.039"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint13_linear_1330_4355"
+          x1="339.746"
+          y1="66.2531"
+          x2="731.102"
+          y2="994.945"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint14_linear_1330_4355"
+          x1="362.5"
+          y1="75.1314"
+          x2="713.11"
+          y2="1002.62"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint15_linear_1330_4355"
+          x1="384.067"
+          y1="84.4997"
+          x2="694.576"
+          y2="1009.06"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint16_linear_1330_4355"
+          x1="404.437"
+          y1="94.2934"
+          x2="675.562"
+          y2="1014.24"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint17_linear_1330_4355"
+          x1="423.603"
+          y1="104.454"
+          x2="656.129"
+          y2="1018.16"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint18_linear_1330_4355"
+          x1="441.565"
+          y1="114.927"
+          x2="636.344"
+          y2="1020.81"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint19_linear_1330_4355"
+          x1="458.315"
+          y1="125.653"
+          x2="616.261"
+          y2="1022.19"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint20_linear_1330_4355"
+          x1="473.852"
+          y1="136.572"
+          x2="595.941"
+          y2="1022.3"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint21_linear_1330_4355"
+          x1="488.187"
+          y1="147.627"
+          x2="575.451"
+          y2="1021.15"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
+export default BlendingCalc;
diff --git a/client/src/components/blendings/BlendingClients.tsx b/client/src/components/blendings/BlendingClients.tsx
new file mode 100644
index 0000000..f697c94
--- /dev/null
+++ b/client/src/components/blendings/BlendingClients.tsx
@@ -0,0 +1,352 @@
+function BlendingClients() {
+  return (
+    <svg
+      width="1084"
+      height="953"
+      viewBox="0 0 1084 953"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g opacity="0.4">
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M482.394 1.11679C547.656 2.46361 612.659 15.0618 670.957 45.4287C728.804 75.5603 769.319 128.87 816.26 175.024C869.215 227.09 957.31 261.136 966.582 336.093C976.149 413.435 872.201 462.687 861.389 539.853C849.214 626.746 959.845 732.197 902.069 796.526C841.649 863.799 723.118 757.161 639.229 787.21C569.037 812.353 553.898 926.037 482.394 946.855C413.332 966.963 344.999 914.48 276.365 892.86C197.818 868.116 73.8497 889.83 46.8153 809.644C14.3203 713.26 163.177 629.627 153.374 528.056C145.345 444.854 6.30576 420.243 1.18186 336.795C-3.4011 262.157 79.696 213.315 130.8 160.402C178.215 111.307 228.716 65.4123 290.172 37.5703C350.599 10.195 416.438 -0.244367 482.394 1.11679Z"
+          stroke="url(#paint0_linear_1330_4379)"
+        />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M912.178 205.904C947.943 228.255 980.083 256.759 1003.01 292.893C1025.75 328.748 1031.72 371.714 1043.46 412.841C1056.7 459.236 1095.01 507.275 1076.95 551.898C1058.32 597.943 985.448 590.835 955.573 630.035C921.932 674.176 950.632 769.261 898.692 785.797C844.375 803.089 811.661 704.732 755.853 693.619C709.156 684.321 665.58 742.333 619.494 730.203C574.982 718.487 553.339 666.769 521.979 632.062C486.088 592.342 410.638 563.34 420.466 509.936C432.278 445.746 540.69 448.66 566.689 389.106C587.986 340.322 518.517 280.649 541.501 232.691C562.059 189.796 623.245 190.229 667.953 177.812C709.435 166.292 751.637 157.567 794.325 162.477C836.299 167.305 876.032 183.314 912.178 205.904Z"
+          stroke="url(#paint1_linear_1330_4379)"
+        />
+        <path
+          d="M688.903 63.7981C632.341 32.4835 568.77 18.4577 504.678 15.4805C439.905 12.4716 374.966 21.0604 314.945 46.4268C253.901 72.2258 203.193 116.04 155.442 163.077C103.976 213.773 21.1705 259.657 23.9052 333.109C26.9626 415.231 162.994 442.937 168.912 524.891C176.137 624.938 27.8951 703.341 57.5399 798.867C82.203 878.34 204.523 860.146 281.115 886.449C348.039 909.431 413.938 962.731 482.272 944.724C553.022 926.081 570.59 814.764 640.154 791.838C723.291 764.439 837.229 872.22 898.189 807.652C956.482 745.909 850.279 639.494 864.3 554.425C876.752 478.879 980.053 433.12 972.485 356.884C965.151 283 879.4 247.316 828.602 194.815C783.572 148.277 745.027 94.8702 688.903 63.7981Z"
+          stroke="url(#paint2_linear_1330_4379)"
+        />
+        <path
+          d="M706.491 81.5371C651.674 49.345 589.563 33.9575 526.679 29.4093C463.125 24.8128 399.135 31.604 339.578 54.9998C279.006 78.7945 228.16 120.547 180.141 165.54C128.387 214.032 45.9642 257.004 46.9106 329.223C47.9688 409.965 180.931 440.626 184.803 521.277C189.53 619.732 42.0608 692.988 68.9172 787.57C91.2605 866.258 211.842 851.486 286.452 879.262C351.645 903.533 415.112 957.556 482.66 941.6C552.597 925.08 572.491 816.183 641.363 795.426C723.675 770.619 833.039 879.375 894.446 817.497C953.168 758.326 851.369 651.108 867.156 567.904C881.177 494.013 983.73 451.684 978.102 376.608C972.647 303.849 889.262 266.625 840.609 213.769C797.48 166.916 760.884 113.48 706.491 81.5371Z"
+          stroke="url(#paint3_linear_1330_4379)"
+        />
+        <path
+          d="M723.744 98.6414C670.679 65.642 610.053 48.9591 548.411 42.9004C486.114 36.7772 423.118 41.8251 364.081 63.2903C304.039 85.1214 253.122 124.833 204.904 167.797C152.936 214.103 70.9834 254.212 70.2028 325.151C69.3301 404.463 199.167 437.938 201.059 517.231C203.37 614.029 56.8274 682.228 80.9597 775.783C101.037 853.617 219.792 842.165 292.398 871.33C355.839 896.813 416.882 951.469 483.589 937.512C552.654 923.061 574.767 816.633 642.889 797.996C724.302 775.721 829.117 885.284 890.882 826.078C949.944 769.463 852.522 661.601 869.994 580.299C885.511 508.097 987.215 469.129 983.466 395.266C979.833 323.682 898.834 285.018 852.311 231.884C811.07 184.783 776.399 131.385 723.744 98.6414Z"
+          stroke="url(#paint4_linear_1330_4379)"
+        />
+        <path
+          d="M740.685 115.1C689.375 81.3628 630.258 63.4514 569.892 55.9433C508.883 48.3553 446.925 51.7155 388.465 71.2917C329.008 91.2015 278.087 128.894 229.738 169.849C177.628 213.988 96.2312 251.285 93.7858 320.902C91.0518 398.735 217.711 434.882 217.692 512.766C217.669 607.844 72.2042 671.08 93.6787 763.528C111.545 840.44 228.389 832.206 298.971 862.673C360.645 889.294 419.272 944.492 485.084 932.48C553.223 920.043 577.449 816.13 644.761 799.56C725.206 779.756 825.502 889.96 887.534 833.405C946.852 779.325 853.771 670.978 872.847 591.612C889.788 521.129 990.547 485.452 988.615 412.851C986.743 342.49 908.147 302.485 863.736 249.149C824.367 201.87 791.597 148.575 740.685 115.1Z"
+          stroke="url(#paint5_linear_1330_4379)"
+        />
+        <path
+          d="M757.335 130.909C707.783 96.5044 650.195 77.4317 591.136 68.5361C531.448 59.5459 470.568 61.2752 412.738 79.0055C353.922 97.0382 303.061 132.737 254.647 171.702C202.468 213.697 121.71 248.237 117.663 316.489C113.139 392.797 236.574 431.474 234.713 507.901C232.441 601.201 88.1996 659.572 107.085 750.834C122.797 826.76 237.652 821.637 306.193 853.321C366.083 881.006 422.308 936.655 487.174 926.533C554.333 916.054 580.565 814.697 647.009 800.14C726.419 782.743 822.232 893.424 884.442 839.498C943.93 787.93 855.154 679.254 875.751 601.855C894.043 533.118 993.762 500.659 993.584 429.367C993.412 360.274 917.232 319.029 874.913 265.566C837.4 218.175 806.503 165.047 757.335 130.909Z"
+          stroke="url(#paint6_linear_1330_4379)"
+        />
+        <path
+          d="M773.715 146.06C725.921 111.057 669.881 90.8902 612.156 80.6698C553.818 70.3406 494.057 70.4966 436.909 86.4261C378.786 102.627 328.05 136.359 279.636 173.357C227.457 213.232 147.421 245.07 141.836 311.92C135.593 386.661 255.763 427.724 252.129 502.648C247.693 594.113 104.819 647.723 121.186 737.725C134.802 812.603 247.591 810.483 314.077 843.298C372.172 871.97 426.01 927.982 489.88 919.694C556.008 911.113 584.137 812.351 649.661 799.753C727.97 784.696 819.34 895.693 881.641 844.368C941.216 795.288 856.701 686.435 878.737 611.031C898.306 544.067 996.893 514.749 998.405 444.81C999.871 377.029 926.118 334.642 885.869 281.127C850.191 233.689 821.14 180.791 773.715 146.06Z"
+          stroke="url(#paint7_linear_1330_4379)"
+        />
+        <path
+          d="M789.854 160.552C743.815 125.02 689.338 103.827 632.976 92.3453C576.013 80.741 517.408 79.3825 460.992 93.5575C403.615 107.974 353.065 139.769 304.716 174.824C252.606 212.605 173.37 241.802 166.313 307.213C158.424 380.345 275.291 423.651 269.957 497.03C263.444 586.608 122.074 635.564 135.995 724.233C147.577 798.002 258.228 798.776 322.648 832.636C378.938 862.221 430.407 918.508 493.233 911.996C558.281 905.255 588.2 809.121 652.75 798.424C729.896 785.639 816.869 896.794 879.174 848.04C938.754 801.419 858.453 692.541 881.844 619.158C902.617 553.988 999.984 527.732 1003.12 459.189C1006.16 392.76 934.84 349.33 896.638 295.835C862.774 248.415 835.537 195.81 789.854 160.552Z"
+          stroke="url(#paint8_linear_1330_4379)"
+        />
+        <path
+          d="M805.772 174.373C761.482 138.379 708.584 116.229 653.608 103.549C598.046 90.7338 540.632 87.9204 484.996 100.389C428.412 113.07 378.111 142.957 329.889 176.097C277.917 211.814 199.557 238.429 191.094 302.369C181.632 373.855 295.165 419.259 288.202 491.052C279.701 578.694 139.969 623.107 151.519 710.375C161.129 782.978 269.573 786.535 331.919 821.353C386.396 851.776 435.518 908.251 497.256 903.457C561.177 898.493 592.776 805.017 656.303 796.163C732.225 785.582 814.851 896.738 877.077 850.523C936.58 806.33 860.44 697.576 885.103 626.235C907.005 562.879 1003.07 539.604 1007.76 472.496C1012.31 407.458 943.429 363.083 907.247 309.681C875.173 262.342 849.718 210.088 805.772 174.373Z"
+          stroke="url(#paint9_linear_1330_4379)"
+        />
+        <path
+          d="M821.491 187.532C778.945 151.145 727.637 128.104 674.068 114.29C619.929 100.329 563.739 96.1216 508.93 106.933C453.188 117.928 403.194 145.941 355.162 177.194C303.393 210.877 225.985 234.976 216.182 297.412C205.222 367.218 315.393 414.576 306.873 484.745C296.473 570.405 158.509 610.392 167.765 696.192C175.465 767.574 281.639 773.799 341.906 809.491C394.566 840.678 441.362 897.256 501.969 894.118C564.719 890.87 597.89 800.077 660.345 793.008C734.986 784.559 813.32 895.561 875.383 851.851C934.731 810.053 862.696 701.567 888.547 632.288C911.505 570.763 1006.18 550.385 1012.37 484.748C1018.36 421.137 951.915 375.916 917.723 322.676C887.415 275.481 863.707 223.638 821.491 187.532Z"
+          stroke="url(#paint10_linear_1330_4379)"
+        />
+        <path
+          d="M837.035 200.011C796.223 163.297 746.514 139.434 694.373 124.551C641.677 109.509 586.741 103.969 532.805 113.173C477.949 122.533 428.321 148.708 380.539 178.105C329.039 209.787 252.653 231.435 241.577 292.339C229.194 360.433 335.982 409.6 325.98 478.111C313.771 561.747 177.699 597.426 184.738 681.695C190.595 751.804 294.438 760.583 352.623 797.064C403.464 828.94 447.962 885.536 507.396 883.994C568.932 882.398 603.565 794.31 664.903 788.964C738.209 782.574 812.311 893.273 874.13 852.029C933.245 812.59 865.253 704.515 892.209 637.314C916.147 577.634 1009.36 560.067 1016.97 495.937C1024.34 433.785 960.328 387.815 928.097 334.806C899.526 287.817 877.53 236.44 837.035 200.011Z"
+          stroke="url(#paint11_linear_1330_4379)"
+        />
+        <path
+          d="M852.427 211.819C813.338 174.845 765.235 150.227 714.539 134.34C663.304 118.283 609.652 111.472 556.63 119.12C502.704 126.9 453.499 151.272 406.025 178.845C354.859 208.562 279.564 227.827 267.283 287.174C253.552 353.526 356.939 404.358 345.53 471.178C331.602 552.75 197.543 584.245 202.446 666.924C206.524 735.709 307.981 746.927 364.084 784.111C413.106 816.602 455.334 873.134 513.558 873.125C573.84 873.117 609.826 787.752 670.003 784.066C741.922 779.662 811.856 889.909 873.352 851.092C932.157 813.973 868.143 706.449 896.12 641.339C920.965 583.516 1012.63 568.671 1021.6 506.079C1030.28 445.417 968.699 398.796 938.396 346.085C911.534 299.36 891.213 248.506 852.427 211.819Z"
+          stroke="url(#paint12_linear_1330_4379)"
+        />
+        <path
+          d="M867.689 222.951C830.31 185.782 783.819 160.478 734.583 143.651C684.824 126.645 632.482 118.626 580.415 124.772C527.46 131.024 478.735 153.632 431.627 179.416C380.855 207.205 306.719 224.157 293.3 281.922C278.298 346.506 378.271 398.859 365.529 463.961C349.976 543.434 218.045 570.87 220.891 651.902C223.259 719.316 322.279 732.855 376.303 770.658C423.508 803.69 463.498 860.077 520.475 861.539C579.466 863.052 616.696 780.424 675.671 778.336C746.153 775.842 811.988 885.492 873.083 849.059C931.504 814.22 871.398 707.383 900.312 644.374C925.989 588.416 1016.05 576.203 1026.29 515.178C1036.22 456.035 977.06 408.858 948.65 356.511C923.465 310.109 904.779 259.832 867.689 222.951Z"
+          stroke="url(#paint13_linear_1330_4379)"
+        />
+        <path
+          d="M882.846 233.407C847.161 196.108 802.283 170.184 754.522 152.484C706.252 134.595 655.244 125.43 604.171 130.128C552.227 134.907 504.034 155.791 457.349 179.823C407.032 205.723 334.117 220.433 319.63 276.597C303.432 339.39 399.983 393.119 385.986 456.475C368.898 533.817 239.205 557.325 240.078 636.656C240.805 702.655 337.339 718.396 389.29 756.735C434.683 790.236 472.469 846.398 528.165 849.265C585.831 852.233 624.194 772.352 681.929 771.798C750.928 771.136 812.737 880.049 873.355 845.954C931.32 813.351 875.048 707.335 904.816 646.433C931.251 592.348 1019.63 582.674 1031.09 523.242C1042.2 465.644 985.44 418.006 958.885 366.088C935.346 320.066 918.254 270.416 882.846 233.407Z"
+          stroke="url(#paint14_linear_1330_4379)"
+        />
+        <path
+          d="M897.919 243.185C863.911 205.82 820.647 179.344 774.371 160.834C727.601 142.128 677.949 131.881 627.907 135.187C577.011 138.549 529.403 157.751 483.194 180.069C433.392 204.122 361.76 216.664 346.272 271.207C328.957 332.188 422.083 387.151 406.905 448.738C388.375 523.921 261.028 543.632 260.011 621.212C259.165 685.755 353.171 703.578 403.057 742.37C446.646 776.267 482.263 832.127 536.647 836.334C592.954 840.69 632.344 763.562 688.801 764.476C756.274 765.569 814.134 873.606 874.201 841.802C931.639 811.389 879.124 706.324 909.662 647.534C936.782 595.324 1023.41 588.095 1036.02 530.28C1048.24 474.249 993.869 426.245 969.132 374.818C947.203 329.231 931.664 280.26 897.919 243.185Z"
+          stroke="url(#paint15_linear_1330_4379)"
+        />
+        <path
+          d="M912.932 252.288C880.581 214.919 838.93 187.958 794.146 168.705C748.886 149.247 700.61 137.983 651.633 139.952C601.821 141.955 554.848 159.518 509.169 180.161C459.937 202.409 389.647 212.86 373.228 265.766C354.871 324.917 444.575 380.972 428.292 440.769C408.415 513.767 283.512 529.818 280.691 605.6C278.344 668.647 369.782 688.432 417.614 727.595C459.409 761.816 492.896 817.297 545.939 822.779C600.857 828.455 641.163 754.081 696.309 756.398C762.215 759.167 816.208 866.193 875.651 836.63C932.494 808.359 883.654 704.371 914.88 647.694C942.61 597.361 1027.43 592.48 1041.11 536.304C1054.37 481.861 1002.38 433.584 979.416 382.708C959.063 337.61 945.033 289.366 912.932 252.288Z"
+          stroke="url(#paint16_linear_1330_4379)"
+        />
+        <path
+          d="M927.905 260.719C897.19 223.409 857.146 196.028 813.863 176.097C770.118 155.954 723.235 143.737 675.356 144.427C626.661 145.127 580.372 161.097 535.274 180.107C486.669 200.595 417.774 209.031 400.493 260.287C381.172 317.593 467.461 374.598 450.15 432.588C429.018 503.379 306.656 515.909 302.116 589.849C298.339 651.363 387.175 672.989 432.967 712.443C472.98 746.917 504.378 801.945 556.052 808.635C609.553 815.561 650.67 743.941 704.472 747.593C768.773 751.957 818.984 857.843 877.735 830.468C933.916 804.29 888.666 701.501 920.496 646.935C948.763 598.477 1031.72 595.847 1046.4 541.328C1060.63 488.491 1010.99 440.032 989.764 389.767C970.949 345.21 958.382 297.74 927.905 260.719Z"
+          stroke="url(#paint17_linear_1330_4379)"
+        />
+        <path
+          d="M942.866 268.482C913.763 231.291 875.321 203.557 833.542 183.013C791.317 162.25 745.843 149.145 699.092 148.612C651.545 148.07 605.986 162.493 561.52 179.912C513.594 198.687 446.148 205.186 428.074 254.782C407.867 310.231 490.75 368.045 472.489 424.213C450.196 492.779 330.464 501.929 324.293 573.986C319.158 633.935 405.362 657.28 449.13 696.943C487.375 731.6 516.727 786.103 567.009 793.934C619.067 802.042 660.886 733.17 713.317 738.088C775.978 743.967 822.496 848.585 880.486 823.344C935.94 799.206 894.191 697.736 926.544 645.276C955.276 598.688 1036.31 598.21 1051.92 545.365C1067.06 494.15 1019.74 445.599 1000.21 396.002C982.892 352.036 971.743 305.385 942.866 268.482Z"
+          stroke="url(#paint18_linear_1330_4379)"
+        />
+        <path
+          d="M957.834 275.572C930.319 238.559 893.47 210.537 853.197 189.444C812.494 168.127 768.441 154.199 722.848 152.503C676.477 150.777 631.695 163.701 587.907 179.575C540.713 196.684 474.765 201.327 455.967 249.254C434.95 302.837 514.444 361.321 495.309 415.654C471.949 481.981 354.933 487.894 347.218 558.032C340.799 616.383 424.343 641.326 466.108 681.12C502.6 715.89 529.953 769.798 578.819 778.702C629.412 787.921 671.827 721.787 722.859 727.905C783.847 735.217 826.766 838.444 883.931 815.28C938.594 793.128 900.254 693.092 933.049 642.731C962.174 598.006 1041.23 599.578 1057.71 548.42C1073.68 498.84 1028.66 450.287 1010.77 401.412C994.915 358.087 985.136 312.298 957.834 275.572Z"
+          stroke="url(#paint19_linear_1330_4379)"
+        />
+        <path
+          d="M972.832 282.003C946.877 245.226 911.612 216.98 872.844 195.403C833.663 173.597 791.042 158.911 746.632 156.11C701.465 153.263 657.502 164.735 614.439 179.11C568.026 194.603 503.624 197.472 484.17 243.724C462.42 295.435 538.547 354.451 518.614 406.94C494.281 471.016 380.061 473.838 370.89 542.023C363.261 598.749 444.123 625.167 483.905 665.013C518.665 699.829 544.064 753.072 591.495 762.982C640.603 773.242 683.509 709.834 733.117 717.081C792.404 725.743 831.82 827.461 888.096 806.315C941.909 786.094 906.882 687.603 940.039 639.329C969.484 596.459 1046.52 599.979 1063.79 550.518C1080.52 502.583 1037.78 454.117 1021.49 406.018C1007.04 363.381 998.587 318.494 972.832 282.003Z"
+          stroke="url(#paint20_linear_1330_4379)"
+        />
+        <path
+          d="M987.883 287.772C963.459 251.289 929.763 222.883 892.499 200.887C854.838 178.657 813.658 163.277 770.455 159.432C726.515 155.523 683.413 165.596 641.12 178.519C595.537 192.447 532.722 193.623 512.682 238.197C490.277 288.032 563.06 347.444 542.407 398.082C517.194 459.9 405.844 459.778 395.307 525.98C386.541 581.056 464.704 608.827 502.527 648.648C535.576 683.443 559.071 735.955 605.05 746.802C652.655 758.033 695.947 697.333 744.11 705.641C801.669 715.57 837.682 815.663 893.008 796.475C945.913 778.126 914.1 681.287 947.538 635.088C977.234 594.059 1052.21 599.426 1070.19 551.67C1087.62 505.388 1047.12 457.094 1032.37 409.822C1019.3 367.918 1012.12 323.973 987.883 287.772Z"
+          stroke="url(#paint21_linear_1330_4379)"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="paint0_linear_1330_4379"
+          x1="-24.7967"
+          y1="932.46"
+          x2="986.318"
+          y2="-119.421"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_1330_4379"
+          x1="342.754"
+          y1="554.316"
+          x2="1224.74"
+          y2="292.019"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint2_linear_1330_4379"
+          x1="-15.733"
+          y1="917.726"
+          x2="1002.69"
+          y2="-90.1611"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint3_linear_1330_4379"
+          x1="-5.87111"
+          y1="902.464"
+          x2="1018.3"
+          y2="-61.8039"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint4_linear_1330_4379"
+          x1="4.80064"
+          y1="886.709"
+          x2="1033.19"
+          y2="-34.3645"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint5_linear_1330_4379"
+          x1="16.293"
+          y1="870.488"
+          x2="1047.39"
+          y2="-7.86335"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint6_linear_1330_4379"
+          x1="28.6156"
+          y1="853.835"
+          x2="1060.96"
+          y2="17.6879"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint7_linear_1330_4379"
+          x1="41.7743"
+          y1="836.779"
+          x2="1073.92"
+          y2="42.2725"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint8_linear_1330_4379"
+          x1="55.7825"
+          y1="819.357"
+          x2="1086.33"
+          y2="65.8854"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint9_linear_1330_4379"
+          x1="70.6445"
+          y1="801.589"
+          x2="1098.23"
+          y2="88.5074"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint10_linear_1330_4379"
+          x1="86.3653"
+          y1="783.523"
+          x2="1109.66"
+          y2="110.145"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint11_linear_1330_4379"
+          x1="102.95"
+          y1="765.174"
+          x2="1120.66"
+          y2="130.777"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint12_linear_1330_4379"
+          x1="120.403"
+          y1="746.586"
+          x2="1131.27"
+          y2="150.412"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint13_linear_1330_4379"
+          x1="138.726"
+          y1="727.786"
+          x2="1141.53"
+          y2="169.044"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint14_linear_1330_4379"
+          x1="157.921"
+          y1="708.807"
+          x2="1151.49"
+          y2="186.672"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint15_linear_1330_4379"
+          x1="177.989"
+          y1="689.679"
+          x2="1161.18"
+          y2="203.296"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint16_linear_1330_4379"
+          x1="198.929"
+          y1="670.435"
+          x2="1170.64"
+          y2="218.92"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint17_linear_1330_4379"
+          x1="220.738"
+          y1="651.11"
+          x2="1179.91"
+          y2="233.551"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint18_linear_1330_4379"
+          x1="243.419"
+          y1="631.733"
+          x2="1189.03"
+          y2="247.194"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint19_linear_1330_4379"
+          x1="266.965"
+          y1="612.33"
+          x2="1198.04"
+          y2="259.849"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint20_linear_1330_4379"
+          x1="291.374"
+          y1="592.941"
+          x2="1206.97"
+          y2="271.534"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+        <linearGradient
+          id="paint21_linear_1330_4379"
+          x1="316.639"
+          y1="573.591"
+          x2="1215.86"
+          y2="282.252"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#D375FF" />
+          <stop offset="0.598958" stopColor="#798FFF" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
+
+export default BlendingClients;
diff --git a/client/src/components/blendings/Blending1.tsx b/client/src/components/blendings/BlendingHeader.tsx
similarity index 100%
rename from client/src/components/blendings/Blending1.tsx
rename to client/src/components/blendings/BlendingHeader.tsx
diff --git a/client/src/components/icons/CloseIcon.tsx b/client/src/components/icons/CloseIcon.tsx
new file mode 100644
index 0000000..fd6ce0e
--- /dev/null
+++ b/client/src/components/icons/CloseIcon.tsx
@@ -0,0 +1,23 @@
+function CloseIcon() {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g opacity="0.8">
+        <path
+          d="M16.0001 15.9995L23.5427 8.45742M16.0001 15.9995L8.45765 8.45703M16.0001 15.9995L23.5426 23.542M16.0001 15.9995L8.4575 23.5421"
+          stroke="white"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default CloseIcon;
diff --git a/client/src/components/icons/PlayIcon.tsx b/client/src/components/icons/PlayIcon.tsx
new file mode 100644
index 0000000..4cab858
--- /dev/null
+++ b/client/src/components/icons/PlayIcon.tsx
@@ -0,0 +1,20 @@
+function PlayIcon() {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g opacity="0.8">
+        <path
+          d="M26.5708 15.1425C27.2182 15.5309 27.2182 16.4691 26.5708 16.8575L9.5145 27.0913C8.84797 27.4912 8 27.0111 8 26.2338L8 5.76619C8 4.9889 8.84797 4.50878 9.5145 4.9087L26.5708 15.1425Z"
+          fill="white"
+        />
+      </g>
+    </svg>
+  );
+}
+
+export default PlayIcon;
diff --git a/client/src/index.css b/client/src/index.css
index fc144a7..a7ec399 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -56,3 +56,17 @@ body {
 *::-webkit-scrollbar-thumb:hover {
   border-width: 2px;
 }
+
+.custom-line-through {
+  position: relative;
+}
+
+.custom-line-through::before {
+  content: "";
+  position: absolute;
+  top: 53%;
+  left: -2.5%;
+  width: 105%;
+  height: 6px;
+  background-color: #fff;
+}