sina_sajjadi
/
TeamBy-Landing
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat: add background SVG asset and HeroSection component

master
sina_sajjadi 2 weeks ago
parent
f0bf527d8e
commit
d515046ecc
2 changed files with 35 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      components/sections/HeroSection.tsx
  2. 43
      public/assets/images/hero_back.svg

2
components/sections/HeroSection.tsx
View File

@ -17,7 +17,7 @@ export function HeroSection() {
{/* Background Graphic & Curve (back_4178_60221: x: 32, y: 230, w: 1856, h: 566) */} {/* 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"> <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 <Image
src="/assets/images/hero_back.svg?v=faded_waves_v8"
src="/assets/images/hero_back.svg?v=faded_waves_v13"
alt="" alt=""
fill fill
priority priority

43
public/assets/images/hero_back.svg
View File

@ -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"/> <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>
<g filter="url(#filter1_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">
<!-- <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" /> <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>
<g filter="url(#filter2_f_4179_62380)"> <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"> <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.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> </path>
</g> </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" /> <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>
<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"> <!-- <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" /> <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> -->
</g> </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"> <!-- <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" /> <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> -->
@ -1218,9 +1218,34 @@
<stop offset="0.65" stop-color="white" stop-opacity="0.75"/> <stop offset="0.65" stop-color="white" stop-opacity="0.75"/>
<stop offset="1" stop-color="white" stop-opacity="1"/> <stop offset="1" stop-color="white" stop-opacity="1"/>
</linearGradient> </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> </mask>
<clipPath id="clip0_4179_62380"> <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"/> <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> </clipPath>

Write Preview
Loading…
Cancel
Save