feat(landing): enhance hero section and update page backgrounds
This commit introduces a significant visual overhaul to the landing page to create a more dynamic and engaging user experience.
Key changes include:
- Replaced the static mobile phone SVG in the hero section with an animated GIF, complete with a "dynamic island" overlay for a more modern look.
- Updated the main page background from a full cover image to a more subtle header background image (`header-bg.svg`).
- Added a new background layer (`bottom-bg.svg`) near the footer to create more visual depth and separation for the contact section.
- Numbered the three main feature descriptions ("1. Discover", "2. Prepare", "3. Win") for improved clarity and flow.
This commit is contained in:
@@ -0,0 +1,62 @@
|
||||
<svg width="75" height="22" viewBox="0 0 75 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M64.1061 21.679H10.8436C4.85652 21.679 0 16.8279 0 10.8315C0 4.85113 4.85652 0 10.8436 0H64.1061C70.0932 0 74.9497 4.85113 74.9497 10.8315C74.9497 16.812 70.0932 21.679 64.1061 21.679Z" fill="black"/>
|
||||
<g clip-path="url(#clip0_4423_8560)">
|
||||
<path d="M60.9749 17.0202C64.2942 17.0202 66.985 14.3294 66.985 11.0101C66.985 7.69081 64.2942 5 60.9749 5C57.6557 5 54.9648 7.69081 54.9648 11.0101C54.9648 14.3294 57.6557 17.0202 60.9749 17.0202Z" fill="url(#paint0_linear_4423_8560)"/>
|
||||
<path d="M60.9754 14.4392C62.869 14.4392 64.404 12.9042 64.404 11.0106C64.404 9.11706 62.869 7.58203 60.9754 7.58203C59.0819 7.58203 57.5469 9.11706 57.5469 11.0106C57.5469 12.9042 59.0819 14.4392 60.9754 14.4392Z" fill="url(#paint1_linear_4423_8560)"/>
|
||||
<path d="M63.9808 11.0089C63.9808 12.6627 62.6295 14.014 60.9757 14.014C59.322 14.014 57.9707 12.6829 57.9707 11.0089C57.9707 9.335 59.3018 8.00391 60.9757 8.00391C62.6497 8.00391 63.9808 9.335 63.9808 11.0089Z" fill="url(#paint2_linear_4423_8560)"/>
|
||||
<path style="mix-blend-mode:multiply" d="M63.9808 11.0089C63.9808 12.6627 62.6295 14.014 60.9757 14.014C59.322 14.014 57.9707 12.6829 57.9707 11.0089C57.9707 9.335 59.3018 8.00391 60.9757 8.00391C62.6497 8.00391 63.9808 9.335 63.9808 11.0089Z" fill="url(#paint3_radial_4423_8560)"/>
|
||||
<path style="mix-blend-mode:screen" d="M63.6984 12.5611C63.6984 11.9762 63.2143 11.4922 62.6295 11.4922C62.0446 11.4922 61.5605 11.9762 61.5605 12.5611C61.5605 13.146 62.0446 13.63 62.6295 13.63C63.2143 13.63 63.6984 13.146 63.6984 12.5611Z" fill="url(#paint4_radial_4423_8560)"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_4423_8560" x1="60.9749" y1="16.637" x2="60.9749" y2="4.81849" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#666666"/>
|
||||
<stop offset="1" stop-color="#010104"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_4423_8560" x1="60.9956" y1="7.78371" x2="60.9956" y2="14.54" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#0B131C"/>
|
||||
<stop offset="1" stop-color="#354039"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_4423_8560" x1="63.1136" y1="13.1266" x2="58.8581" y2="8.87113" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#231F20"/>
|
||||
<stop offset="0.08" stop-color="#212226"/>
|
||||
<stop offset="0.2" stop-color="#1F2C37"/>
|
||||
<stop offset="0.33" stop-color="#1A3C53"/>
|
||||
<stop offset="0.47" stop-color="#13537B"/>
|
||||
<stop offset="0.62" stop-color="#0A70AE"/>
|
||||
<stop offset="0.78" stop-color="#0095EE"/>
|
||||
<stop offset="0.8" stop-color="#0387D6"/>
|
||||
<stop offset="0.84" stop-color="#0D689F"/>
|
||||
<stop offset="0.88" stop-color="#154D71"/>
|
||||
<stop offset="0.91" stop-color="#1B394E"/>
|
||||
<stop offset="0.95" stop-color="#1F2A34"/>
|
||||
<stop offset="0.98" stop-color="#222225"/>
|
||||
<stop offset="1" stop-color="#231F20"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="paint3_radial_4423_8560" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60.9757 11.0089) scale(3.00504)">
|
||||
<stop stop-color="#231F20"/>
|
||||
<stop offset="0.2" stop-color="#165068"/>
|
||||
<stop offset="0.38" stop-color="#0C78A1"/>
|
||||
<stop offset="0.54" stop-color="#0594CB"/>
|
||||
<stop offset="0.66" stop-color="#01A6E4"/>
|
||||
<stop offset="0.73" stop-color="#00ADEE"/>
|
||||
<stop offset="0.76" stop-color="#01A5E3"/>
|
||||
<stop offset="0.81" stop-color="#0693C8"/>
|
||||
<stop offset="0.87" stop-color="#0D749B"/>
|
||||
<stop offset="0.94" stop-color="#184A5E"/>
|
||||
<stop offset="1" stop-color="#231F20"/>
|
||||
</radialGradient>
|
||||
<radialGradient id="paint4_radial_4423_8560" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(62.6295 12.5611) scale(1.06891)">
|
||||
<stop stop-color="#CCCCCC"/>
|
||||
<stop offset="0.02" stop-color="#C4C4C4"/>
|
||||
<stop offset="0.22" stop-color="#898989"/>
|
||||
<stop offset="0.41" stop-color="#585858"/>
|
||||
<stop offset="0.59" stop-color="#313131"/>
|
||||
<stop offset="0.75" stop-color="#161616"/>
|
||||
<stop offset="0.89" stop-color="#050505"/>
|
||||
<stop offset="1"/>
|
||||
</radialGradient>
|
||||
<clipPath id="clip0_4423_8560">
|
||||
<rect width="12" height="12" fill="white" transform="translate(54.9844 5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.0 KiB |
Reference in New Issue
Block a user