From d515046ecc3ba6303ce0f26a166f45c71a0468ea Mon Sep 17 00:00:00 2001
From: sina_sajjadi <alisina.a.a50182@gmail.com>
Date: Sat, 5 Sep 2026 14:52:05 +0330
Subject: [PATCH] feat: add background SVG asset and HeroSection component

---
 components/sections/HeroSection.tsx |  2 +-
 public/assets/images/hero_back.svg  | 43 +++++++++++++++++++++++------
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/components/sections/HeroSection.tsx b/components/sections/HeroSection.tsx
index c5e1c54..541d41e 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_v8"
+          src="/assets/images/hero_back.svg?v=faded_waves_v13"
           alt=""
           fill
           priority
diff --git a/public/assets/images/hero_back.svg b/public/assets/images/hero_back.svg
index 16024a7..3406346 100644
--- a/public/assets/images/hero_back.svg
+++ b/public/assets/images/hero_back.svg
@@ -1016,26 +1016,26 @@
 <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">
+<!-- <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>
+</path> -->
 </g>
 <g filter="url(#filter2_f_4179_62380)">
 <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" />
 </path>
 </g>
-<g filter="url(#filter3_f_4179_62380)" mask="url(#waveFadeMask)">
-<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">
+<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> -->
 </g>
-<g filter="url(#filter4_f_4179_62380)" mask="url(#waveFadeMask)" style="mix-blend-mode:plus-lighter">
+<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> -->
 </g>
-<g filter="url(#filter5_f_4179_62380)" mask="url(#waveFadeMask)">
+<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> -->
@@ -1218,9 +1218,34 @@
   <stop offset="0.65" stop-color="white" stop-opacity="0.75"/>
   <stop offset="1" stop-color="white" stop-opacity="1"/>
 </linearGradient>
-<mask id="waveFadeMask" maskUnits="userSpaceOnUse" x="-100" y="-100" width="2100" height="1000">
-  <rect x="-100" y="-100" width="2100" height="1000" fill="url(#waveFadeGrad)"/>
+
+<linearGradient id="wave3TopFadeGrad" x1="0" y1="755" x2="0" y2="270" 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="wave3TopFadeMask" maskUnits="userSpaceOnUse" x="-300" y="0" width="2500" height="900">
+  <rect x="-300" y="0" width="2500" height="900" fill="url(#wave3TopFadeGrad)"/>
+</mask>
+
+<linearGradient id="wave4TopFadeGrad" x1="0" y1="705" x2="0" y2="320" 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="wave4TopFadeMask" maskUnits="userSpaceOnUse" x="-300" y="0" width="2500" height="900">
+  <rect x="-300" y="0" width="2500" height="900" fill="url(#wave4TopFadeGrad)"/>
+</mask>
+
+<linearGradient id="wave5TopFadeGrad" x1="0" y1="655" x2="0" y2="370" 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="wave5TopFadeMask" maskUnits="userSpaceOnUse" x="-300" y="0" width="2500" height="900">
+  <rect x="-300" y="0" width="2500" height="900" fill="url(#wave5TopFadeGrad)"/>
 </mask>
+
 <clipPath id="clip0_4179_62380">
 <path d="M0 0H1856V514.8C1856 532.722 1856 541.683 1852.51 548.528C1849.44 554.549 1844.55 559.444 1838.53 562.512C1831.68 566 1822.72 566 1804.8 566H51.1999C33.2783 566 24.3175 566 17.4723 562.512C11.4511 559.444 6.55574 554.549 3.48779 548.528C0 541.683 0 532.722 0 514.8V0Z" fill="white"/>
 </clipPath>