From fd50abc6aa98b2d366993db2da8beda541432223 Mon Sep 17 00:00:00 2001
From: sina_sajjadi <alisina.a.a50182@gmail.com>
Date: Sat, 5 Sep 2026 15:10:29 +0330
Subject: [PATCH] feat: add hero section component and background graphic

---
 components/sections/HeroSection.tsx |  2 +-
 public/assets/images/hero_back.svg  | 40 +++++++++++++++++------------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/components/sections/HeroSection.tsx b/components/sections/HeroSection.tsx
index 541d41e..3c2f996 100644
--- a/components/sections/HeroSection.tsx
+++ b/components/sections/HeroSection.tsx
@@ -17,7 +17,7 @@ export function HeroSection() {
       {/* Background Graphic & Curve (back_4178_60221: x: 32, y: 230, w: 1856, h: 566) */}
       <div className="absolute top-[230px] left-1/2 -translate-x-1/2 w-[1856px] max-w-[calc(100vw-64px)] h-[566px] rounded-b-[32px] overflow-hidden z-0">
         <Image
-          src="/assets/images/hero_back.svg?v=faded_waves_v13"
+          src="/assets/images/hero_back.svg?v=faded_waves_v14"
           alt=""
           fill
           priority
diff --git a/public/assets/images/hero_back.svg b/public/assets/images/hero_back.svg
index 3406346..facebc7 100644
--- a/public/assets/images/hero_back.svg
+++ b/public/assets/images/hero_back.svg
@@ -1015,30 +1015,30 @@
 <g filter="url(#filter0_f_4179_62380)">
 <path d="M567.876 344.795C295.596 341.558 23.316 330.933 -220.116 318.315C-233.837 317.604 -247.467 316.886 -261 316.163V614H-220.116H567.876H2117V316C1603.93 330.781 1089.77 350.894 567.876 344.795Z" fill="#001766"/>
 </g>
-<g filter="url(#filter1_f_4179_62380)">
-<!-- <path d="M-32 854.998L1888 855V255.003C1888 255.003 1536.5 335 928 335.001C319.5 335.003 -32 255 -32 255V854.998Z" fill="#0029B2">
-  <animate attributeName="d" dur="5.2s" repeatCount="indefinite" values="M-32 855L1888 855V255C1888 255 1536.5 335 928 335C319.5 335 -32 255 -32 255V855Z;M-32 855L1888 855V170C1888 170 1480 260 928 445C380 250 -32 330 -32 330V855Z;M-32 855L1888 855V330C1888 330 1590 410 928 235C260 420 -32 170 -32 170V855Z;M-32 855L1888 855V215C1888 215 1505 295 928 375C345 295 -32 285 -32 285V855Z;M-32 855L1888 855V255C1888 255 1536.5 335 928 335C319.5 335 -32 255 -32 255V855Z" />
-</path> -->
-</g>
-<g filter="url(#filter2_f_4179_62380)">
+<!-- <g filter="url(#filter1_f_4179_62380)"> -->
+<path d="M-32 854.998L1888 855V255.003C1888 255.003 1536.5 335 928 335.001C319.5 335.003 -32 255 -32 255V854.998Z" fill="#0029B2">
+  <animate attributeName="d" dur="8.2s" repeatCount="indefinite" values="M-32 855L1888 855V255C1888 255 1536.5 335 928 335C319.5 335 -32 255 -32 255V855Z;M-32 855L1888 855V170C1888 170 1480 260 928 445C380 250 -32 330 -32 330V855Z;M-32 855L1888 855V330C1888 330 1590 410 928 235C260 420 -32 170 -32 170V855Z;M-32 855L1888 855V215C1888 215 1505 295 928 375C345 295 -32 285 -32 285V855Z;M-32 855L1888 855V255C1888 255 1536.5 335 928 335C319.5 335 -32 255 -32 255V855Z" />
+</path>
+<!-- </g> -->
+<g filter="url(#filter2_f_4179_62380)" mask="url(#wave2TopFadeMask)">
 <path d="M-32 804.998L1888 805V305.002C1888 305.002 1532.5 385.001 928 385.001C323.5 385.001 -32 305 -32 305V804.998Z" fill="#3D6FE5">
-  <animate attributeName="d" dur="5.8s" repeatCount="indefinite" values="M-32 805L1888 805V305C1888 305 1532.5 385 928 385C323.5 385 -32 305 -32 305V805Z;M-32 805L1888 805V220C1888 220 1475 310 928 495C385 300 -32 380 -32 380V805Z;M-32 805L1888 805V380C1888 380 1590 460 928 285C260 470 -32 220 -32 220V805Z;M-32 805L1888 805V265C1888 265 1505 345 928 425C345 345 -32 335 -32 335V805Z;M-32 805L1888 805V305C1888 305 1532.5 385 928 385C323.5 385 -32 305 -32 305V805Z" />
+  <animate attributeName="d" dur="5.2s" repeatCount="indefinite" values="M-32 805L1888 805V305C1888 305 1532.5 385 928 385C323.5 385 -32 305 -32 305V805Z;M-32 805L1888 805V220C1888 220 1475 310 928 495C385 300 -32 380 -32 380V805Z;M-32 805L1888 805V380C1888 380 1590 460 928 285C260 470 -32 220 -32 220V805Z;M-32 805L1888 805V265C1888 265 1505 345 928 425C345 345 -32 335 -32 335V805Z;M-32 805L1888 805V305C1888 305 1532.5 385 928 385C323.5 385 -32 305 -32 305V805Z" />
 </path>
 </g>
 <g filter="url(#filter3_f_4179_62380)" mask="url(#wave3TopFadeMask)">
-<!-- <path d="M-32 754.999L1888 755V355.002C1888 355.002 1532.5 435.001 928 435.001C323.5 435.001 -32 355 -32 355V754.999Z" fill="#4B80FF">
-  <animate attributeName="d" dur="7.4s" repeatCount="indefinite" values="M-32 755L1888 755V355C1888 355 1532.5 435 928 435C323.5 435 -32 355 -32 355V755Z;M-32 755L1888 755V270C1888 270 1475 360 928 545C385 350 -32 430 -32 430V755Z;M-32 755L1888 755V430C1888 430 1590 510 928 335C260 520 -32 270 -32 270V755Z;M-32 755L1888 755V315C1888 315 1505 395 928 475C345 395 -32 385 -32 385V755Z;M-32 755L1888 755V355C1888 355 1532.5 435 928 435C323.5 435 -32 355 -32 355V755Z" />
-</path> -->
+<path d="M-32 754.999L1888 755V355.002C1888 355.002 1532.5 435.001 928 435.001C323.5 435.001 -32 355 -32 355V754.999Z" fill="#4B80FF">
+  <animate attributeName="d" dur="4.4s" repeatCount="indefinite" values="M-32 755L1888 755V355C1888 355 1532.5 435 928 435C323.5 435 -32 355 -32 355V755Z;M-32 755L1888 755V270C1888 270 1475 360 928 545C385 350 -32 430 -32 430V755Z;M-32 755L1888 755V430C1888 430 1590 510 928 335C260 520 -32 270 -32 270V755Z;M-32 755L1888 755V315C1888 315 1505 395 928 475C345 395 -32 385 -32 385V755Z;M-32 755L1888 755V355C1888 355 1532.5 435 928 435C323.5 435 -32 355 -32 355V755Z" />
+</path>
 </g>
 <g filter="url(#filter4_f_4179_62380)" mask="url(#wave4TopFadeMask)" style="mix-blend-mode:plus-lighter">
-<!-- <path d="M-32 704.999L1888 705V405.001C1888 405.001 1531 485.001 928 485.001C325 485.001 -32 405 -32 405V704.999Z" fill="#2D4D99">
-  <animate attributeName="d" dur="5.6s" repeatCount="indefinite" values="M-32 705L1888 705V405C1888 405 1531 485 928 485C325 485 -32 405 -32 405V705Z;M-32 705L1888 705V320C1888 320 1475 410 928 595C385 400 -32 480 -32 480V705Z;M-32 705L1888 705V480C1888 480 1590 560 928 385C260 570 -32 320 -32 320V705Z;M-32 705L1888 705V365C1888 365 1505 445 928 525C345 445 -32 435 -32 435V705Z;M-32 705L1888 705V405C1888 405 1531 485 928 485C325 485 -32 405 -32 405V705Z" />
-</path> -->
+<path d="M-32 704.999L1888 705V405.001C1888 405.001 1531 485.001 928 485.001C325 485.001 -32 405 -32 405V704.999Z" fill="#2D4D99">
+  <animate attributeName="d" dur="12.6s" repeatCount="indefinite" values="M-32 705L1888 705V405C1888 405 1531 485 928 485C325 485 -32 405 -32 405V705Z;M-32 705L1888 705V320C1888 320 1475 410 928 595C385 400 -32 480 -32 480V705Z;M-32 705L1888 705V480C1888 480 1590 560 928 385C260 570 -32 320 -32 320V705Z;M-32 705L1888 705V365C1888 365 1505 445 928 525C345 445 -32 435 -32 435V705Z;M-32 705L1888 705V405C1888 405 1531 485 928 485C325 485 -32 405 -32 405V705Z" />
+</path>
 </g>
 <g filter="url(#filter5_f_4179_62380)" mask="url(#wave5TopFadeMask)">
-<!-- <path d="M-32 654.999L1888 655V455.001C1888 455.001 1532.5 535 928 535C323.5 535 -32 455 -32 455V654.999Z" fill="white">
-  <animate attributeName="d" dur="6.0s" repeatCount="indefinite" values="M-32 655L1888 655V455C1888 455 1532.5 535 928 535C323.5 535 -32 455 -32 455V655Z;M-32 655L1888 655V370C1888 370 1475 460 928 645C385 450 -32 530 -32 530V655Z;M-32 655L1888 655V530C1888 530 1590 610 928 435C260 620 -32 370 -32 370V655Z;M-32 655L1888 655V415C1888 415 1505 495 928 575C345 495 -32 485 -32 485V655Z;M-32 655L1888 655V455C1888 455 1532.5 535 928 535C323.5 535 -32 455 -32 455V655Z" />
-</path> -->
+<path d="M-32 654.999L1888 655V515.001C1888 515.001 1532.5 565 928 565C323.5 565 -32 515 -32 515V654.999Z" fill="white">
+  <animate attributeName="d" dur="6.0s" repeatCount="indefinite" values="M-32 655L1888 655V515C1888 515 1532.5 565 928 565C323.5 565 -32 515 -32 515V655Z;M-32 655L1888 655V440C1888 440 1475 510 928 645C385 510 -32 550 -32 550V655Z;M-32 655L1888 655V560C1888 560 1590 615 928 495C260 625 -32 440 -32 440V655Z;M-32 655L1888 655V485C1888 485 1505 535 928 595C345 535 -32 535 -32 535V655Z;M-32 655L1888 655V515C1888 515 1532.5 565 928 565C323.5 565 -32 515 -32 515V655Z" />
+</path>
 </g>
 <g opacity="0.9">
 <path d="M1344.17 392.934C1343.49 392.934 1342.95 393.481 1342.95 394.157C1342.95 394.832 1343.49 395.379 1344.17 395.379C1344.84 395.379 1345.39 394.832 1345.39 394.157C1345.39 393.481 1344.84 392.934 1344.17 392.934Z" fill="#9ECBFF"/>
@@ -1218,6 +1218,14 @@
   <stop offset="0.65" stop-color="white" stop-opacity="0.75"/>
   <stop offset="1" stop-color="white" stop-opacity="1"/>
 </linearGradient>
+<linearGradient id="wave2TopFadeGrad" x1="0" y1="805" x2="0" y2="220" gradientUnits="userSpaceOnUse">
+  <stop offset="0" stop-color="white" stop-opacity="1"/>
+  <stop offset="0.7" stop-color="white" stop-opacity="1"/>
+  <stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<mask id="wave2TopFadeMask" maskUnits="userSpaceOnUse" x="-300" y="0" width="2500" height="900">
+  <rect x="-300" y="0" width="2500" height="900" fill="url(#wave2TopFadeGrad)"/>
+</mask>
 
 <linearGradient id="wave3TopFadeGrad" x1="0" y1="755" x2="0" y2="270" gradientUnits="userSpaceOnUse">
   <stop offset="0" stop-color="white" stop-opacity="1"/>