feat: rebuild landing page from new Figma design (node 9505:537)

Complete redesign with 9 sections matching the updated 1920px layout:
- Header: sticky nav with globe/language toggle and Download CTA
- Hero: warm beige bg, iPhone mockup, "A Modern Way to Stay Connected"
- WhyTalkPro: 2x2 card grid with SVG icons and illustration
- CoreSystem: halftone bg, 6-card feature grid with 3D icons
- Experience: 3 vertical screenshot cards with exact Figma clip positions
- UseCases: split layout with 4 orange-header rows
- Trust: 4-column reliability features with sprite clipping and SVG dividers
- AppPreview: interactive phone carousel with prev/next fade transition
- DownloadCTA: polka-dot bg, TalkPro logo script, store badges
- Footer: logo, description, store badges, link columns

All 35 Figma assets downloaded locally (SVGs correctly named .svg).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

public/assets/cta-android-icon.svg

@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon">
+<rect width="44" height="44" rx="12" fill="var(--fill-0, #D55F31)"/>
+<path id="Vector" d="M23.8954 10H15.6259C14.728 10 14 10.8028 14 11.793V32.207C14 33.1972 14.728 34 15.6259 34H28.3741C29.272 34 30 33.1972 30 32.207V16.7328C30 16.1165 29.7778 15.5252 29.3827 15.0895L25.3848 10.6807C24.9897 10.245 24.4536 10 23.8947 10H23.8954Z" fill="var(--fill-0, white)"/>
+</g>
+</svg>

public/assets/cta-apple-icon.svg

@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 22.0004 26.9856" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M16.1918 0C16.2546 0 16.3174 0 16.3838 0C16.5378 1.90308 15.8115 3.32506 14.9286 4.35481C14.0624 5.37746 12.8762 6.36929 10.9578 6.21879C10.8298 4.34297 11.5574 3.02645 12.439 1.99907C13.2566 1.0416 14.7556 0.189597 16.1918 0Z" fill="var(--fill-0, white)"/>
+<path id="Vector_2" d="M22.0004 19.8082C22.0004 19.8271 22.0004 19.8437 22.0004 19.8615C21.4612 21.4944 20.6922 22.8939 19.7537 24.1926C18.8969 25.3717 17.847 26.9584 15.9724 26.9584C14.3525 26.9584 13.2766 25.9168 11.6164 25.8883C9.86025 25.8599 8.89449 26.7593 7.28883 26.9856C7.10516 26.9856 6.92149 26.9856 6.74137 26.9856C5.56231 26.815 4.61077 25.8812 3.91756 25.0399C1.87346 22.5538 0.293876 19.3425 0 15.233C0 14.8301 0 14.4284 0 14.0255C0.124423 11.0843 1.55351 8.69304 3.45304 7.53413C4.45554 6.91794 5.83367 6.39299 7.36823 6.62762C8.02589 6.72953 8.69778 6.95467 9.28672 7.17745C9.84484 7.39193 10.5428 7.77231 11.204 7.75217C11.6519 7.73913 12.0975 7.50569 12.549 7.34098C13.8714 6.86343 15.1678 6.31597 16.8765 6.57311C18.9301 6.88357 20.3876 7.79601 21.2882 9.20377C19.551 10.3094 18.1776 11.9754 18.4123 14.8206C18.6208 17.405 20.1234 18.9171 22.0004 19.8082Z" fill="var(--fill-0, white)"/>
+</g>
+</svg>

public/assets/cta-bg-pattern.png

@@ -0,0 +1,339 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1920 923" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Layer_1" clip-path="url(#clip0_0_16)">
+<path id="Vector" d="M12.1851 -29.997L0.00488281 -17.7969L12.1851 -5.59676L24.3653 -17.7969L12.1851 -29.997Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_2" d="M102.45 -30.0001L90.2725 -17.7969L102.45 -5.59361L114.627 -17.7969L102.45 -30.0001Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_3" d="M192.717 -30.0001L180.54 -17.7969L192.717 -5.59361L204.894 -17.7969L192.717 -30.0001Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_4" d="M282.985 -30.0001L270.808 -17.7969L282.985 -5.59361L295.162 -17.7969L282.985 -30.0001Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_5" d="M373.252 -30.0001L361.075 -17.7969L373.252 -5.59361L385.429 -17.7969L373.252 -30.0001Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_6" d="M463.519 -30.0001L451.342 -17.7969L463.519 -5.59361L475.696 -17.7969L463.519 -30.0001Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_7" d="M553.787 -29.9894L541.61 -17.7861L553.787 -5.58287L565.964 -17.7861L553.787 -29.9894Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_8" d="M644.065 -29.9894L631.888 -17.7861L644.065 -5.58287L656.242 -17.7862L644.065 -29.9894Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_9" d="M734.329 -29.9972L722.152 -17.7939L734.329 -5.59068L746.506 -17.7939L734.329 -29.9972Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_10" d="M824.607 -29.9972L812.43 -17.7939L824.607 -5.59068L836.784 -17.7939L824.607 -29.9972Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_11" d="M914.875 -29.9972L902.698 -17.7939L914.875 -5.59068L927.052 -17.794L914.875 -29.9972Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_12" d="M1005.14 -29.9972L992.965 -17.7939L1005.14 -5.59068L1017.32 -17.7939L1005.14 -29.9972Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_13" d="M1095.4 -29.9973L1083.22 -17.7939L1095.4 -5.59068L1107.58 -17.794L1095.4 -29.9973Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_14" d="M1185.68 -29.9972L1173.5 -17.7939L1185.68 -5.59068L1197.85 -17.7939L1185.68 -29.9972Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_15" d="M1275.94 -29.9972L1263.77 -17.7939L1275.94 -5.59068L1288.12 -17.7939L1275.94 -29.9972Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_16" d="M1366.22 -29.9943L1354.04 -17.791L1366.22 -5.58775L1378.4 -17.791L1366.22 -29.9943Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_17" d="M1456.49 -29.9934L1444.31 -17.79L1456.49 -5.58677L1468.66 -17.7901L1456.49 -29.9934Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_18" d="M1546.75 -30.0001L1534.57 -17.7969L1546.75 -5.59358L1558.93 -17.7968L1546.75 -30.0001Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_19" d="M1637.02 -29.9973L1624.84 -17.7939L1637.02 -5.59075L1649.2 -17.7941L1637.02 -29.9973Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_20" d="M1727.29 -29.9982L1715.11 -17.7949L1727.29 -5.59163L1739.46 -17.7949L1727.29 -29.9982Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_21" d="M1817.56 -29.9953L1805.38 -17.792L1817.56 -5.58873L1829.73 -17.792L1817.56 -29.9953Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_22" d="M1907.82 -29.9952L1895.65 -17.792L1907.82 -5.58872L1920 -17.792L1907.82 -29.9952Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_23" d="M12.1871 44.9044L0.00683594 57.1045L12.1871 69.3046L24.3673 57.1045L12.1871 44.9044Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_24" d="M102.451 44.9012L90.2744 57.1045L102.451 69.3078L114.629 57.1045L102.451 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_25" d="M192.718 44.9012L180.541 57.1045L192.718 69.3078L204.895 57.1045L192.718 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_26" d="M282.987 44.9012L270.81 57.1045L282.987 69.3078L295.164 57.1045L282.987 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_27" d="M373.253 44.9012L361.076 57.1045L373.253 69.3078L385.43 57.1045L373.253 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_28" d="M463.521 44.9012L451.344 57.1045L463.521 69.3078L475.698 57.1045L463.521 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_29" d="M553.789 44.9012L541.612 57.1045L553.789 69.3078L565.966 57.1045L553.789 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_30" d="M644.056 44.911L631.879 57.1143L644.056 69.3175L656.233 57.1142L644.056 44.911Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_31" d="M734.33 44.8934L722.153 57.0967L734.33 69.2999L746.507 57.0967L734.33 44.8934Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_32" d="M824.598 44.9042L812.421 57.1074L824.598 69.3107L836.775 57.1074L824.598 44.9042Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_33" d="M914.876 44.9041L902.699 57.1074L914.876 69.3107L927.053 57.1074L914.876 44.9041Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_34" d="M1005.14 44.9042L992.967 57.1074L1005.14 69.3107L1017.32 57.1074L1005.14 44.9042Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_35" d="M1095.4 44.9041L1083.22 57.1074L1095.4 69.3107L1107.58 57.1074L1095.4 44.9041Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_36" d="M1185.68 44.9042L1173.5 57.1074L1185.68 69.3107L1197.86 57.1074L1185.68 44.9042Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_37" d="M1275.95 44.9042L1263.77 57.1074L1275.95 69.3107L1288.12 57.1074L1275.95 44.9042Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_38" d="M1366.22 44.8973L1354.04 57.1006L1366.22 69.3038L1378.4 57.1006L1366.22 44.8973Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_39" d="M1456.48 44.9002L1444.31 57.1035L1456.48 69.3068L1468.66 57.1034L1456.48 44.9002Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_40" d="M1546.75 44.8993L1534.57 57.1026L1546.75 69.3058L1558.93 57.1026L1546.75 44.8993Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_41" d="M1637.02 44.9021L1624.84 57.1055L1637.02 69.3087L1649.2 57.1053L1637.02 44.9021Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_42" d="M1727.29 44.9012L1715.11 57.1045L1727.29 69.3078L1739.46 57.1045L1727.29 44.9012Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_43" d="M1817.56 44.9042L1805.38 57.1074L1817.56 69.3107L1829.73 57.1074L1817.56 44.9042Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_44" d="M1907.82 44.9051L1895.65 57.1084L1907.82 69.3117L1920 57.1084L1907.82 44.9051Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_45" d="M12.189 119.805L0.00878906 132.005L12.189 144.205L24.3692 132.005L12.189 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_46" d="M102.452 119.802L90.2754 132.005L102.452 144.208L114.63 132.005L102.452 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_47" d="M192.72 119.802L180.543 132.005L192.72 144.208L204.897 132.005L192.72 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_48" d="M282.989 119.802L270.812 132.005L282.989 144.208L295.166 132.005L282.989 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_49" d="M373.255 119.802L361.078 132.005L373.255 144.208L385.432 132.005L373.255 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_50" d="M463.523 119.802L451.346 132.005L463.523 144.208L475.7 132.005L463.523 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_51" d="M553.79 119.802L541.613 132.005L553.79 144.208L565.967 132.005L553.79 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_52" d="M644.058 119.802L631.881 132.005L644.058 144.208L656.235 132.005L644.058 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_53" d="M734.332 119.795L722.155 131.998L734.332 144.201L746.509 131.998L734.332 119.795Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_54" d="M824.6 119.805L812.423 132.008L824.6 144.211L836.777 132.008L824.6 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_55" d="M914.868 119.805L902.69 132.008L914.867 144.211L927.045 132.008L914.868 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_56" d="M1005.14 119.805L992.958 132.008L1005.14 144.211L1017.31 132.008L1005.14 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_57" d="M1095.4 119.795L1083.23 131.998L1095.4 144.201L1107.58 131.998L1095.4 119.795Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_58" d="M1185.68 119.805L1173.5 132.008L1185.68 144.211L1197.86 132.008L1185.68 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_59" d="M1275.95 119.805L1263.77 132.008L1275.95 144.211L1288.13 132.008L1275.95 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_60" d="M1366.22 119.798L1354.05 132.001L1366.22 144.204L1378.4 132.001L1366.22 119.798Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_61" d="M1456.48 119.8L1444.31 132.003L1456.48 144.206L1468.66 132.003L1456.48 119.8Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_62" d="M1546.75 119.798L1534.57 132.001L1546.75 144.204L1558.93 132.001L1546.75 119.798Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_63" d="M1637.02 119.802L1624.84 132.005L1637.02 144.208L1649.2 132.005L1637.02 119.802Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_64" d="M1727.29 119.8L1715.11 132.003L1727.29 144.206L1739.46 132.003L1727.29 119.8Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_65" d="M1817.56 119.804L1805.38 132.007L1817.56 144.21L1829.73 132.007L1817.56 119.804Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_66" d="M1907.82 119.805L1895.65 132.008L1907.82 144.211L1920 132.008L1907.82 119.805Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_67" d="M12.191 194.695L0.0107422 206.896L12.191 219.096L24.3712 206.896L12.191 194.695Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_68" d="M102.454 194.703L90.2773 206.906L102.454 219.109L114.631 206.906L102.454 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_69" d="M192.722 194.703L180.545 206.906L192.722 219.109L204.899 206.906L192.722 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_70" d="M282.991 194.703L270.813 206.906L282.991 219.109L295.168 206.906L282.991 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_71" d="M373.257 194.703L361.08 206.906L373.257 219.109L385.434 206.906L373.257 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_72" d="M463.525 194.703L451.348 206.906L463.525 219.109L475.702 206.906L463.525 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_73" d="M553.792 194.703L541.615 206.906L553.792 219.109L565.969 206.906L553.792 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_74" d="M644.06 194.703L631.883 206.906L644.06 219.109L656.237 206.906L644.06 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_75" d="M734.334 194.696L722.157 206.899L734.334 219.103L746.511 206.899L734.334 194.696Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_76" d="M824.602 194.696L812.425 206.899L824.602 219.103L836.779 206.899L824.602 194.696Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_77" d="M914.869 194.706L902.692 206.909L914.869 219.112L927.047 206.909L914.869 194.706Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_78" d="M1005.14 194.706L992.96 206.909L1005.14 219.112L1017.31 206.909L1005.14 194.706Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_79" d="M1095.4 194.696L1083.23 206.899L1095.4 219.103L1107.58 206.899L1095.4 194.696Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_80" d="M1185.67 194.706L1173.49 206.909L1185.67 219.112L1197.85 206.909L1185.67 194.706Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_81" d="M1275.94 194.706L1263.76 206.909L1275.94 219.112L1288.12 206.909L1275.94 194.706Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_82" d="M1366.21 194.699L1354.04 206.902L1366.21 219.106L1378.39 206.902L1366.21 194.699Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_83" d="M1456.48 194.699L1444.31 206.902L1456.48 219.106L1468.66 206.902L1456.48 194.699Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_84" d="M1546.75 194.697L1534.57 206.9L1546.75 219.104L1558.93 206.9L1546.75 194.697Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_85" d="M1637.02 194.701L1624.84 206.904L1637.02 219.107L1649.2 206.904L1637.02 194.701Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_86" d="M1727.29 194.699L1715.11 206.902L1727.29 219.106L1739.46 206.902L1727.29 194.699Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_87" d="M1817.56 194.703L1805.38 206.906L1817.56 219.109L1829.73 206.906L1817.56 194.703Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_88" d="M1907.82 194.704L1895.65 206.907L1907.82 219.11L1920 206.907L1907.82 194.704Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_89" d="M12.1822 269.597L0.00195312 281.797L12.1822 293.997L24.3624 281.797L12.1822 269.597Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_90" d="M102.446 269.594L90.2686 281.797L102.446 294L114.623 281.797L102.446 269.594Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_91" d="M192.724 269.604L180.547 281.808L192.724 294.011L204.901 281.808L192.724 269.604Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_92" d="M282.992 269.604L270.814 281.808L282.992 294.011L295.169 281.808L282.992 269.604Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_93" d="M373.259 269.604L361.082 281.808L373.259 294.011L385.436 281.808L373.259 269.604Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_94" d="M463.526 269.604L451.349 281.808L463.526 294.011L475.703 281.808L463.526 269.604Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_95" d="M553.794 269.604L541.617 281.808L553.794 294.011L565.971 281.808L553.794 269.604Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_96" d="M644.062 269.604L631.885 281.808L644.062 294.011L656.239 281.808L644.062 269.604Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_97" d="M734.336 269.597L722.159 281.8L734.336 294.003L746.513 281.8L734.336 269.597Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_98" d="M824.603 269.597L812.426 281.8L824.603 294.003L836.78 281.8L824.603 269.597Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_99" d="M914.871 269.596L902.694 281.8L914.871 294.003L927.049 281.8L914.871 269.596Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_100" d="M1005.14 269.597L992.962 281.8L1005.14 294.003L1017.32 281.8L1005.14 269.597Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_101" d="M1095.41 269.596L1083.23 281.8L1095.41 294.003L1107.58 281.8L1095.41 269.596Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_102" d="M1185.67 269.607L1173.5 281.811L1185.67 294.014L1197.85 281.811L1185.67 269.607Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_103" d="M1275.94 269.607L1263.76 281.811L1275.94 294.014L1288.12 281.811L1275.94 269.607Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_104" d="M1366.22 269.598L1354.04 281.801L1366.22 294.004L1378.39 281.801L1366.22 269.598Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_105" d="M1456.48 269.598L1444.31 281.802L1456.48 294.005L1468.66 281.802L1456.48 269.598Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_106" d="M1546.75 269.597L1534.57 281.8L1546.75 294.003L1558.93 281.8L1546.75 269.597Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_107" d="M1637.02 269.6L1624.84 281.804L1637.02 294.007L1649.2 281.804L1637.02 269.6Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_108" d="M1727.29 269.598L1715.11 281.802L1727.29 294.005L1739.46 281.802L1727.29 269.598Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_109" d="M1817.56 269.602L1805.38 281.806L1817.56 294.009L1829.73 281.806L1817.56 269.602Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_110" d="M1907.82 269.603L1895.65 281.807L1907.82 294.01L1920 281.807L1907.82 269.603Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_111" d="M12.1841 344.498L0.00390625 356.698L12.1841 368.898L24.3644 356.698L12.1841 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_112" d="M102.448 344.495L90.2705 356.698L102.448 368.901L114.625 356.698L102.448 344.495Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_113" d="M192.716 344.495L180.539 356.698L192.716 368.901L204.893 356.698L192.716 344.495Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_114" d="M282.983 344.495L270.806 356.698L282.983 368.901L295.16 356.698L282.983 344.495Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_115" d="M373.25 344.495L361.073 356.698L373.25 368.901L385.427 356.698L373.25 344.495Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_116" d="M463.528 344.505L451.351 356.708L463.528 368.911L475.705 356.708L463.528 344.505Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_117" d="M553.796 344.505L541.619 356.708L553.796 368.911L565.973 356.708L553.796 344.505Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_118" d="M644.063 344.505L631.886 356.708L644.063 368.911L656.24 356.708L644.063 344.505Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_119" d="M734.338 344.498L722.161 356.701L734.338 368.904L746.515 356.701L734.338 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_120" d="M824.605 344.498L812.428 356.701L824.605 368.904L836.782 356.701L824.605 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_121" d="M914.873 344.498L902.696 356.701L914.873 368.904L927.05 356.701L914.873 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_122" d="M1005.14 344.498L992.964 356.701L1005.14 368.904L1017.32 356.701L1005.14 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_123" d="M1095.41 344.498L1083.23 356.701L1095.41 368.904L1107.58 356.701L1095.41 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_124" d="M1185.68 344.508L1173.5 356.711L1185.68 368.914L1197.85 356.711L1185.68 344.508Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_125" d="M1275.94 344.508L1263.77 356.711L1275.94 368.914L1288.12 356.711L1275.94 344.508Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_126" d="M1366.22 344.497L1354.04 356.7L1366.22 368.904L1378.39 356.7L1366.22 344.497Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_127" d="M1456.48 344.498L1444.31 356.701L1456.48 368.904L1468.66 356.701L1456.48 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_128" d="M1546.75 344.496L1534.57 356.699L1546.75 368.902L1558.93 356.699L1546.75 344.496Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_129" d="M1637.02 344.499L1624.84 356.702L1637.02 368.905L1649.2 356.702L1637.02 344.499Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_130" d="M1727.29 344.498L1715.11 356.701L1727.29 368.904L1739.46 356.701L1727.29 344.498Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_131" d="M1817.56 344.501L1805.38 356.704L1817.56 368.907L1829.73 356.704L1817.56 344.501Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_132" d="M1907.82 344.503L1895.65 356.706L1907.82 368.909L1920 356.706L1907.82 344.503Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_133" d="M12.1851 419.399L0.00488281 431.599L12.1851 443.799L24.3653 431.599L12.1851 419.399Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_134" d="M102.45 419.396L90.2725 431.599L102.45 443.802L114.627 431.599L102.45 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_135" d="M192.718 419.396L180.541 431.599L192.718 443.802L204.895 431.599L192.718 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_136" d="M282.985 419.396L270.808 431.599L282.985 443.802L295.162 431.599L282.985 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_137" d="M373.252 419.396L361.075 431.599L373.252 443.802L385.429 431.599L373.252 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_138" d="M463.519 419.406L451.342 431.609L463.519 443.813L475.696 431.609L463.519 419.406Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_139" d="M553.787 419.406L541.61 431.609L553.787 443.813L565.964 431.609L553.787 419.406Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_140" d="M644.054 419.406L631.877 431.609L644.054 443.813L656.231 431.609L644.054 419.406Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_141" d="M734.329 419.398L722.152 431.602L734.329 443.805L746.506 431.602L734.329 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_142" d="M824.607 419.398L812.43 431.602L824.607 443.805L836.784 431.602L824.607 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_143" d="M914.875 419.398L902.698 431.602L914.875 443.805L927.052 431.602L914.875 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_144" d="M1005.14 419.398L992.965 431.602L1005.14 443.805L1017.32 431.602L1005.14 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_145" d="M1095.4 419.398L1083.22 431.602L1095.4 443.805L1107.58 431.602L1095.4 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_146" d="M1185.68 419.398L1173.5 431.602L1185.68 443.805L1197.85 431.602L1185.68 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_147" d="M1275.94 419.409L1263.77 431.612L1275.94 443.816L1288.12 431.612L1275.94 419.409Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_148" d="M1366.22 419.396L1354.04 431.599L1366.22 443.802L1378.39 431.599L1366.22 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_149" d="M1456.48 419.396L1444.31 431.6L1456.48 443.803L1468.66 431.599L1456.48 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_150" d="M1546.75 419.396L1534.57 431.599L1546.75 443.802L1558.93 431.599L1546.75 419.396Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_151" d="M1637.02 419.398L1624.84 431.602L1637.02 443.805L1649.2 431.601L1637.02 419.398Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_152" d="M1727.29 419.397L1715.11 431.601L1727.29 443.804L1739.46 431.601L1727.29 419.397Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_153" d="M1817.56 419.401L1805.38 431.605L1817.56 443.808L1829.73 431.605L1817.56 419.401Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_154" d="M1907.82 419.402L1895.65 431.605L1907.82 443.809L1920 431.605L1907.82 419.402Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_155" d="M12.1871 494.3L0.00683594 506.5L12.1871 518.7L24.3673 506.5L12.1871 494.3Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_156" d="M102.451 494.297L90.2744 506.5L102.452 518.703L114.629 506.5L102.451 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_157" d="M192.718 494.297L180.541 506.5L192.718 518.703L204.895 506.5L192.718 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_158" d="M282.987 494.297L270.81 506.5L282.987 518.703L295.164 506.5L282.987 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_159" d="M373.254 494.297L361.077 506.5L373.254 518.703L385.431 506.5L373.254 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_160" d="M463.521 494.297L451.344 506.5L463.521 518.703L475.698 506.5L463.521 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_161" d="M553.789 494.297L541.612 506.5L553.789 518.703L565.966 506.5L553.789 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_162" d="M644.056 494.308L631.879 506.511L644.056 518.714L656.233 506.511L644.056 494.308Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_163" d="M734.331 494.289L722.154 506.492L734.331 518.696L746.508 506.492L734.331 494.289Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_164" d="M824.598 494.3L812.421 506.503L824.598 518.706L836.775 506.503L824.598 494.3Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_165" d="M914.867 494.3L902.689 506.503L914.867 518.706L927.044 506.503L914.867 494.3Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_166" d="M1005.13 494.3L992.956 506.503L1005.13 518.706L1017.31 506.503L1005.13 494.3Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_167" d="M1095.4 494.3L1083.22 506.503L1095.4 518.706L1107.58 506.503L1095.4 494.3Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_168" d="M1185.68 494.3L1173.5 506.503L1185.68 518.706L1197.86 506.503L1185.68 494.3Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_169" d="M1275.94 494.302L1263.76 506.505L1275.94 518.708L1288.12 506.505L1275.94 494.302Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_170" d="M1366.22 494.295L1354.04 506.498L1366.22 518.701L1378.39 506.498L1366.22 494.295Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_171" d="M1456.48 494.296L1444.31 506.499L1456.48 518.702L1468.66 506.499L1456.48 494.296Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_172" d="M1546.75 494.295L1534.57 506.498L1546.75 518.701L1558.93 506.498L1546.75 494.295Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_173" d="M1637.02 494.299L1624.84 506.502L1637.02 518.705L1649.2 506.502L1637.02 494.299Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_174" d="M1727.29 494.297L1715.11 506.5L1727.29 518.703L1739.46 506.5L1727.29 494.297Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_175" d="M1817.56 494.301L1805.38 506.504L1817.56 518.707L1829.73 506.504L1817.56 494.301Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_176" d="M1907.82 494.302L1895.65 506.505L1907.82 518.708L1920 506.505L1907.82 494.302Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_177" d="M12.189 569.201L0.00878906 581.401L12.189 593.601L24.3693 581.401L12.189 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_178" d="M102.453 569.198L90.2764 581.401L102.453 593.605L114.631 581.401L102.453 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_179" d="M192.72 569.198L180.543 581.401L192.72 593.605L204.897 581.401L192.72 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_180" d="M282.989 569.198L270.812 581.401L282.989 593.605L295.166 581.401L282.989 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_181" d="M373.255 569.198L361.078 581.401L373.255 593.605L385.432 581.401L373.255 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_182" d="M463.523 569.198L451.346 581.401L463.523 593.605L475.7 581.401L463.523 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_183" d="M553.791 569.198L541.614 581.401L553.791 593.605L565.968 581.401L553.791 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_184" d="M644.058 569.198L631.881 581.401L644.058 593.605L656.235 581.401L644.058 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_185" d="M734.332 569.19L722.155 581.393L734.332 593.597L746.509 581.394L734.332 569.19Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_186" d="M824.6 569.201L812.423 581.404L824.6 593.608L836.777 581.404L824.6 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_187" d="M914.869 569.201L902.691 581.404L914.869 593.608L927.046 581.404L914.869 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_188" d="M1005.14 569.201L992.958 581.404L1005.14 593.608L1017.31 581.404L1005.14 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_189" d="M1095.4 569.19L1083.23 581.393L1095.4 593.597L1107.58 581.393L1095.4 569.19Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_190" d="M1185.67 569.201L1173.49 581.404L1185.67 593.608L1197.85 581.404L1185.67 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_191" d="M1275.94 569.201L1263.76 581.404L1275.94 593.608L1288.12 581.404L1275.94 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_192" d="M1366.22 569.194L1354.04 581.398L1366.22 593.601L1378.39 581.398L1366.22 569.194Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_193" d="M1456.48 569.195L1444.31 581.398L1456.48 593.602L1468.66 581.398L1456.48 569.195Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_194" d="M1546.75 569.194L1534.57 581.398L1546.75 593.601L1558.93 581.398L1546.75 569.194Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_195" d="M1637.02 569.198L1624.84 581.401L1637.02 593.605L1649.2 581.401L1637.02 569.198Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_196" d="M1727.29 569.196L1715.11 581.399L1727.29 593.603L1739.46 581.399L1727.29 569.196Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_197" d="M1817.56 569.2L1805.38 581.403L1817.56 593.607L1829.73 581.403L1817.56 569.2Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_198" d="M1907.82 569.201L1895.65 581.404L1907.82 593.608L1920 581.404L1907.82 569.201Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_199" d="M12.191 644.092L0.0107422 656.292L12.191 668.492L24.3712 656.292L12.191 644.092Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_200" d="M102.454 644.098L90.2773 656.302L102.454 668.505L114.632 656.302L102.454 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_201" d="M192.722 644.098L180.545 656.302L192.722 668.505L204.899 656.302L192.722 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_202" d="M282.991 644.098L270.813 656.302L282.991 668.505L295.168 656.302L282.991 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_203" d="M373.257 644.098L361.08 656.302L373.257 668.505L385.434 656.302L373.257 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_204" d="M463.525 644.098L451.348 656.302L463.525 668.505L475.702 656.302L463.525 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_205" d="M553.792 644.099L541.615 656.302L553.792 668.505L565.969 656.302L553.792 644.099Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_206" d="M644.06 644.098L631.883 656.302L644.06 668.505L656.237 656.302L644.06 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_207" d="M734.334 644.091L722.157 656.295L734.334 668.498L746.511 656.295L734.334 644.091Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_208" d="M824.602 644.101L812.425 656.305L824.602 668.508L836.779 656.305L824.602 644.101Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_209" d="M914.869 644.102L902.692 656.306L914.869 668.509L927.047 656.306L914.869 644.102Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_210" d="M1005.14 644.101L992.96 656.305L1005.14 668.508L1017.31 656.305L1005.14 644.101Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_211" d="M1095.4 644.091L1083.23 656.295L1095.4 668.498L1107.58 656.295L1095.4 644.091Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_212" d="M1185.67 644.098L1173.5 656.302L1185.67 668.505L1197.85 656.302L1185.67 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_213" d="M1275.94 644.099L1263.76 656.303L1275.94 668.506L1288.12 656.303L1275.94 644.099Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_214" d="M1366.22 644.093L1354.04 656.297L1366.22 668.5L1378.39 656.297L1366.22 644.093Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_215" d="M1456.48 644.094L1444.31 656.298L1456.48 668.501L1468.66 656.298L1456.48 644.094Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_216" d="M1546.75 644.093L1534.57 656.296L1546.75 668.499L1558.93 656.296L1546.75 644.093Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_217" d="M1637.02 644.097L1624.84 656.3L1637.02 668.503L1649.2 656.3L1637.02 644.097Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_218" d="M1727.29 644.094L1715.11 656.298L1727.29 668.501L1739.46 656.298L1727.29 644.094Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_219" d="M1817.56 644.098L1805.38 656.302L1817.56 668.505L1829.73 656.302L1817.56 644.098Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_220" d="M1907.82 644.099L1895.65 656.303L1907.82 668.506L1920 656.303L1907.82 644.099Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_221" d="M12.1822 718.993L0.00195312 731.193L12.1822 743.394L24.3624 731.194L12.1822 718.993Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_222" d="M102.447 718.99L90.2695 731.193L102.447 743.397L114.624 731.194L102.447 718.99Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_223" d="M192.714 719L180.537 731.203L192.714 743.406L204.891 731.203L192.714 719Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_224" d="M282.992 719L270.814 731.203L282.992 743.406L295.169 731.203L282.992 719Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_225" d="M373.259 719L361.082 731.203L373.259 743.406L385.436 731.203L373.259 719Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_226" d="M463.527 719L451.35 731.203L463.527 743.406L475.704 731.203L463.527 719Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_227" d="M553.794 719L541.617 731.203L553.794 743.406L565.971 731.203L553.794 719Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_228" d="M644.062 719L631.885 731.203L644.062 743.406L656.239 731.203L644.062 719Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_229" d="M734.336 718.992L722.159 731.195L734.336 743.399L746.513 731.195L734.336 718.992Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_230" d="M824.604 718.992L812.427 731.195L824.604 743.399L836.781 731.195L824.604 718.992Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_231" d="M914.871 718.992L902.694 731.195L914.871 743.399L927.049 731.195L914.871 718.992Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_232" d="M1005.14 719.004L992.962 731.207L1005.14 743.41L1017.32 731.207L1005.14 719.004Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_233" d="M1095.41 718.992L1083.23 731.195L1095.41 743.399L1107.58 731.195L1095.41 718.992Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_234" d="M1185.67 718.998L1173.5 731.201L1185.67 743.405L1197.85 731.201L1185.67 718.998Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_235" d="M1275.94 719L1263.76 731.203L1275.94 743.406L1288.12 731.203L1275.94 719Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_236" d="M1366.22 718.992L1354.04 731.195L1366.22 743.399L1378.39 731.195L1366.22 718.992Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_237" d="M1456.48 718.994L1444.31 731.197L1456.48 743.401L1468.66 731.197L1456.48 718.994Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_238" d="M1546.75 718.992L1534.57 731.195L1546.75 743.399L1558.93 731.195L1546.75 718.992Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_239" d="M1637.02 718.996L1624.84 731.199L1637.02 743.402L1649.2 731.199L1637.02 718.996Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_240" d="M1727.29 718.994L1715.11 731.197L1727.29 743.401L1739.46 731.197L1727.29 718.994Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_241" d="M1817.56 718.998L1805.38 731.201L1817.56 743.405L1829.73 731.201L1817.56 718.998Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_242" d="M1907.82 719L1895.65 731.203L1907.82 743.406L1920 731.203L1907.82 719Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_243" d="M12.1841 793.893L0.00390625 806.093L12.1842 818.293L24.3644 806.093L12.1841 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_244" d="M102.448 793.89L90.2705 806.093L102.448 818.296L114.625 806.093L102.448 793.89Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_245" d="M192.716 793.89L180.539 806.093L192.716 818.296L204.893 806.093L192.716 793.89Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_246" d="M282.983 793.9L270.806 806.103L282.983 818.307L295.16 806.103L282.983 793.9Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_247" d="M373.25 793.89L361.073 806.093L373.25 818.296L385.427 806.093L373.25 793.89Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_248" d="M463.518 793.9L451.341 806.103L463.518 818.307L475.695 806.103L463.518 793.9Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_249" d="M553.785 793.9L541.608 806.103L553.785 818.307L565.963 806.103L553.785 793.9Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_250" d="M644.064 793.9L631.887 806.103L644.064 818.307L656.241 806.103L644.064 793.9Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_251" d="M734.338 793.893L722.161 806.097L734.338 818.3L746.515 806.097L734.338 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_252" d="M824.605 793.893L812.428 806.097L824.605 818.3L836.782 806.097L824.605 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_253" d="M914.873 793.893L902.696 806.097L914.873 818.3L927.05 806.097L914.873 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_254" d="M1005.14 793.893L992.964 806.097L1005.14 818.3L1017.32 806.097L1005.14 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_255" d="M1095.41 793.893L1083.23 806.097L1095.41 818.3L1107.58 806.097L1095.41 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_256" d="M1185.67 793.897L1173.5 806.1L1185.67 818.304L1197.85 806.1L1185.67 793.897Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_257" d="M1275.94 793.898L1263.76 806.102L1275.94 818.305L1288.12 806.102L1275.94 793.898Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_258" d="M1366.22 793.892L1354.04 806.095L1366.22 818.298L1378.39 806.095L1366.22 793.892Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_259" d="M1456.48 793.893L1444.31 806.096L1456.48 818.299L1468.66 806.096L1456.48 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_260" d="M1546.75 793.891L1534.57 806.094L1546.75 818.297L1558.93 806.094L1546.75 793.891Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_261" d="M1637.02 793.895L1624.84 806.099L1637.02 818.302L1649.2 806.099L1637.02 793.895Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_262" d="M1727.29 793.893L1715.11 806.096L1727.29 818.299L1739.46 806.096L1727.29 793.893Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_263" d="M1817.56 793.897L1805.38 806.1L1817.56 818.304L1829.73 806.1L1817.56 793.897Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_264" d="M1907.82 793.898L1895.65 806.102L1907.82 818.305L1920 806.102L1907.82 793.898Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_265" d="M12.1861 868.794L0.00585938 880.994L12.1861 893.194L24.3663 880.994L12.1861 868.794Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_266" d="M102.45 868.791L90.2725 880.994L102.45 893.197L114.627 880.994L102.45 868.791Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_267" d="M192.718 868.791L180.541 880.994L192.718 893.197L204.895 880.994L192.718 868.791Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_268" d="M282.985 868.791L270.808 880.994L282.985 893.197L295.162 880.994L282.985 868.791Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_269" d="M373.252 868.791L361.075 880.994L373.252 893.197L385.429 880.994L373.252 868.791Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_270" d="M463.52 868.802L451.343 881.005L463.52 893.208L475.697 881.005L463.52 868.802Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_271" d="M553.787 868.802L541.61 881.005L553.787 893.208L565.965 881.005L553.787 868.802Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_272" d="M644.055 868.802L631.878 881.005L644.055 893.208L656.232 881.005L644.055 868.802Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_273" d="M734.329 868.794L722.152 880.997L734.329 893.2L746.506 880.997L734.329 868.794Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_274" d="M824.597 868.794L812.42 880.997L824.597 893.2L836.774 880.997L824.597 868.794Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_275" d="M914.875 868.794L902.698 880.997L914.875 893.2L927.052 880.997L914.875 868.794Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_276" d="M1005.14 868.794L992.965 880.997L1005.14 893.2L1017.32 880.997L1005.14 868.794Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_277" d="M1095.4 868.793L1083.23 880.996L1095.4 893.199L1107.58 880.996L1095.4 868.793Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_278" d="M1185.67 868.797L1173.5 881L1185.67 893.203L1197.85 881L1185.67 868.797Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_279" d="M1275.94 868.798L1263.76 881.001L1275.94 893.204L1288.12 881.001L1275.94 868.798Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_280" d="M1366.22 868.791L1354.04 880.994L1366.22 893.197L1378.39 880.994L1366.22 868.791Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_281" d="M1456.48 868.792L1444.31 880.995L1456.48 893.198L1468.66 880.995L1456.48 868.792Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_282" d="M1546.75 868.79L1534.57 880.993L1546.75 893.196L1558.93 880.993L1546.75 868.79Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_283" d="M1637.02 868.795L1624.84 880.998L1637.02 893.201L1649.2 880.998L1637.02 868.795Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_284" d="M1727.29 868.792L1715.11 880.995L1727.29 893.198L1739.46 880.995L1727.29 868.792Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_285" d="M1817.56 868.797L1805.38 881L1817.56 893.203L1829.73 881L1817.56 868.797Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_286" d="M1907.82 868.798L1895.65 881.001L1907.82 893.204L1920 881.001L1907.82 868.798Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_287" d="M12.1871 943.695L0.00683594 955.896L12.1871 968.096L24.3673 955.896L12.1871 943.695Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_288" d="M102.451 943.692L90.2744 955.896L102.452 968.099L114.629 955.896L102.451 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_289" d="M192.719 943.692L180.542 955.896L192.719 968.099L204.896 955.896L192.719 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_290" d="M282.987 943.692L270.81 955.896L282.987 968.099L295.164 955.896L282.987 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_291" d="M373.254 943.692L361.077 955.896L373.254 968.099L385.431 955.896L373.254 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_292" d="M463.521 943.692L451.344 955.896L463.521 968.099L475.698 955.896L463.521 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_293" d="M553.789 943.703L541.612 955.906L553.789 968.109L565.966 955.906L553.789 943.703Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_294" d="M644.056 943.703L631.879 955.906L644.056 968.109L656.233 955.906L644.056 943.703Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_295" d="M734.331 943.684L722.154 955.888L734.331 968.091L746.508 955.888L734.331 943.684Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_296" d="M824.598 943.695L812.421 955.898L824.598 968.102L836.775 955.898L824.598 943.695Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_297" d="M914.867 943.695L902.689 955.898L914.867 968.102L927.044 955.898L914.867 943.695Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_298" d="M1005.13 943.695L992.956 955.898L1005.13 968.102L1017.31 955.898L1005.13 943.695Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_299" d="M1095.41 943.692L1083.23 955.896L1095.41 968.099L1107.58 955.895L1095.41 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_300" d="M1185.67 943.696L1173.5 955.9L1185.67 968.103L1197.85 955.9L1185.67 943.696Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_301" d="M1275.94 943.697L1263.76 955.9L1275.94 968.104L1288.12 955.9L1275.94 943.697Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_302" d="M1366.22 943.69L1354.04 955.894L1366.22 968.097L1378.39 955.894L1366.22 943.69Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_303" d="M1456.48 943.692L1444.31 955.896L1456.48 968.099L1468.66 955.895L1456.48 943.692Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_304" d="M1546.75 943.689L1534.57 955.893L1546.75 968.096L1558.93 955.893L1546.75 943.689Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_305" d="M1637.02 943.694L1624.84 955.897L1637.02 968.101L1649.2 955.897L1637.02 943.694Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_306" d="M1727.29 943.691L1715.11 955.895L1727.29 968.098L1739.46 955.895L1727.29 943.691Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_307" d="M1817.56 943.696L1805.38 955.9L1817.56 968.103L1829.73 955.9L1817.56 943.696Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_308" d="M1907.82 943.697L1895.65 955.9L1907.82 968.104L1920 955.9L1907.82 943.697Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_309" d="M12.189 1018.6L0.00878906 1030.8L12.189 1043L24.3693 1030.8L12.189 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_310" d="M102.453 1018.59L90.2764 1030.8L102.453 1043L114.631 1030.8L102.453 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_311" d="M192.72 1018.59L180.543 1030.8L192.72 1043L204.897 1030.8L192.72 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_312" d="M282.989 1018.59L270.812 1030.8L282.989 1043L295.166 1030.8L282.989 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_313" d="M373.256 1018.59L361.079 1030.8L373.256 1043L385.433 1030.8L373.256 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_314" d="M463.523 1018.6L451.346 1030.81L463.523 1043.01L475.7 1030.81L463.523 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_315" d="M553.791 1018.6L541.614 1030.81L553.791 1043.01L565.968 1030.81L553.791 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_316" d="M644.058 1018.6L631.881 1030.81L644.058 1043.01L656.235 1030.81L644.058 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_317" d="M734.333 1018.6L722.156 1030.8L734.333 1043L746.51 1030.8L734.333 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_318" d="M824.6 1018.6L812.423 1030.8L824.6 1043L836.777 1030.8L824.6 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_319" d="M914.869 1018.6L902.691 1030.8L914.869 1043L927.046 1030.8L914.869 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_320" d="M1005.14 1018.6L992.958 1030.8L1005.14 1043L1017.31 1030.8L1005.14 1018.6Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_321" d="M1095.41 1018.59L1083.23 1030.8L1095.41 1043L1107.58 1030.8L1095.41 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_322" d="M1185.67 1018.59L1173.5 1030.8L1185.67 1043L1197.85 1030.8L1185.67 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_323" d="M1275.94 1018.59L1263.76 1030.8L1275.94 1043L1288.12 1030.8L1275.94 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_324" d="M1366.22 1018.59L1354.04 1030.79L1366.22 1043L1378.39 1030.79L1366.22 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_325" d="M1456.48 1018.59L1444.31 1030.79L1456.48 1043L1468.66 1030.79L1456.48 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_326" d="M1546.75 1018.59L1534.57 1030.79L1546.75 1043L1558.93 1030.79L1546.75 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_327" d="M1637.02 1018.59L1624.84 1030.8L1637.02 1043L1649.2 1030.79L1637.02 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_328" d="M1727.29 1018.59L1715.11 1030.8L1727.29 1043L1739.46 1030.8L1727.29 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_329" d="M1817.56 1018.59L1805.38 1030.8L1817.56 1043L1829.73 1030.8L1817.56 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+<path id="Vector_330" d="M1907.82 1018.59L1895.65 1030.8L1907.82 1043L1920 1030.8L1907.82 1018.59Z" fill="var(--fill-0, #FFF0E8)"/>
+</g>
+<defs>
+<clipPath id="clip0_0_16">
+<rect width="1920" height="923" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/assets/cta-talkpro-logo.png

@@ -0,0 +1,14 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 187.801 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 175584">
+<path id="Vector" d="M98.5724 56.3166C105.506 56.2187 112.442 56.3695 119.363 56.7677C139.793 57.9357 161.687 61.7026 181.076 68.5661C182.332 69.0109 184.68 69.7326 185.539 70.686C186.04 73.7965 174.791 70.4433 173.623 70.1805C151.914 65.356 129.759 62.7571 107.511 62.4274C79.8146 61.5564 50.3772 65.6841 23.4228 71.8478C22.387 72.0842 20.7438 72.1091 20.2019 71.0375C20.4422 69.5599 25.0328 68.1695 26.4037 67.6983C49.4098 59.7943 74.3118 56.8874 98.5724 56.3166Z" fill="var(--fill-0, #F28A4B)"/>
+<path id="Vector_2" d="M75.4035 6.21199C76.7201 6.19147 79.1802 5.90736 80.0807 6.88122C80.1912 8.30019 78.1779 17.6553 77.7802 19.6472C77.2517 22.2942 76.3512 27.9716 75.6538 30.486C78.383 28.2763 81.1036 25.653 83.6485 23.3327C86.8357 20.4285 87.7271 18.8091 92.4044 19.3757C93.6438 19.5257 95.8122 18.8675 96.518 20.1633C96.4756 20.599 96.5059 20.659 96.148 21.0078C92.2107 24.8448 87.7751 28.2905 83.7268 32.0076C85.7591 36.0561 88.8657 40.9428 91.2019 44.9614C91.7282 45.8011 92.2751 46.5019 92.3641 47.4758C92.2416 47.8688 92.1027 48.0266 91.7456 48.2413C90.3863 49.0589 85.5677 48.8789 84.0591 48.3896C82.4325 47.864 77.9547 38.1996 77.0221 36.3813C76.0324 37.2178 75.047 38.0591 74.0661 38.9067C73.4359 41.399 73.3222 44.0222 72.7116 46.4877C72.0698 48.931 70.0181 48.7874 68.1382 48.6785C65.2884 48.5128 63.8111 49.3651 64.5221 45.7427C65.0535 43.0373 65.7052 40.1157 66.2335 37.4435L69.572 20.4317C70.3942 16.4084 71.1016 12.3567 71.9067 8.33019C72.3425 6.15044 73.518 6.24829 75.4035 6.21199Z" fill="var(--fill-0, #2E2A28)"/>
+<path id="Vector_3" d="M2.26688 7.06162C7.84809 6.79575 13.5415 7.01572 19.1336 7.01572C23.1192 7.01572 27.689 6.75302 31.6032 7.04105C31.937 7.06637 32.1813 7.10594 32.4709 7.28952C32.7869 7.48892 32.8937 7.88455 32.917 8.2343C32.9949 9.40064 31.9229 13.0658 31.0763 13.8555C29.9695 14.8874 21.8044 14.3588 19.9426 14.343C17.9995 22.5928 16.5948 31.243 14.729 39.6005C14.2627 41.8192 13.8554 46.4166 12.5416 48.0846C11.7926 49.0341 5.81729 49.1022 4.7692 47.9501C4.55502 46.5685 10.5752 17.9765 11.2797 14.3762C8.96011 14.3271 1.48486 14.8557 0.129146 13.7068C-0.147233 13.1038 0.0772667 12.0783 0.270193 11.4532C0.837388 9.61586 0.304144 7.98741 2.26688 7.06162Z" fill="var(--fill-0, #2E2A28)"/>
+<path id="Vector_4" d="M61.3185 6.19364C62.4629 6.17462 65.1478 6.02728 66.1459 6.51209C67.1634 7.00798 66.1443 10.2305 65.95 11.3205C65.7031 12.7036 65.3428 14.2943 65.0538 15.7487L62.0133 31.2053C61.0281 36.2799 60.238 41.4178 59.2086 46.4877C58.8027 48.4871 58.4112 48.7516 56.489 48.7548C55.0398 48.7326 52.0926 49.0859 51.0794 48.1939C50.8676 48.0086 50.8634 47.9294 50.8898 47.5919C51.2324 43.1923 52.5386 38.4171 53.3681 34.1157L56.7259 16.6565C57.2967 13.7413 57.8475 10.8183 58.4947 7.91896C58.8906 6.14611 59.8524 6.23166 61.3185 6.19364Z" fill="var(--fill-0, #2E2A28)"/>
+<g id="Vector_5">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M172.511 18.4678C179.813 17.8626 186.731 21.2812 187.682 29.1226C188.224 33.7457 186.906 38.396 184.018 42.0481C180.612 46.3068 176.228 48.4003 170.885 48.9772C163.285 49.7083 156.062 46.239 155.27 37.9863C154.853 33.2608 156.328 28.5619 159.375 24.924C162.79 20.8638 167.327 18.9391 172.511 18.4678ZM177.677 38.0589C180.95 32.2679 180.364 24.3375 171.813 25.0562C166.51 26.1061 163.575 30.6158 163.622 35.8739C163.664 40.746 166.59 42.866 171.278 42.4893C174.03 41.873 176.284 40.5239 177.677 38.0589Z" fill="var(--fill-0, #F28A4B)"/>
+<path d="M154.323 18.1443C155.081 18.0545 157.117 18.3623 157.124 19.09C157.141 20.7764 155.914 25.1174 155.125 26.4767C154.068 26.5344 152.803 26.4367 151.758 26.5601C145.24 27.3231 144.18 32.3085 143.166 37.5632C142.72 39.8683 142.315 42.1831 141.951 44.5043C141.477 47.4554 141.657 49.1851 138.015 48.7346C136.711 48.5727 134.325 49.1482 133.381 48.2537C133.113 47.6846 133.163 47.6686 133.255 47.0611C134.12 43.4831 138.198 20.1112 138.967 19.3866C139.38 18.9971 140.247 18.8752 140.781 18.8496C141.93 18.7951 145.228 18.6268 146.021 19.3449C146.474 20.2378 145.87 22.8571 145.717 24.0418C147.895 20.7684 150.316 18.545 154.323 18.1443Z" fill="var(--fill-0, #F28A4B)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M117.845 6.5344C122.685 6.53913 128.878 6.45055 132.584 10.0897C137.724 15.1383 135.648 25.2847 130.794 29.8605C125.591 34.7686 119.629 35.0041 112.919 34.9584L111.04 34.9454C110.65 36.8636 109.09 47.2003 108.28 47.976C107.387 48.8318 103.97 48.5673 102.667 48.5783C101.84 48.5846 101 48.5431 100.382 47.9378C100.063 46.6792 103.641 30.1446 104.083 27.7993L106.598 14.8972C107.036 12.6685 107.406 10.3927 107.907 8.17661C108.12 7.2357 108.586 7.05573 109.39 6.59864C110.052 6.57815 110.716 6.5622 111.378 6.55116C113.534 6.53225 115.689 6.5281 117.845 6.5344ZM122.145 13.9942C119.913 13.6852 117.433 13.8019 115.162 13.8145C114.659 16.6043 114.134 19.3895 113.584 22.1698C113.259 23.8422 112.725 26.2246 112.615 27.8654C116.55 27.8859 119.441 28.1819 122.962 26.2623C127.653 23.2959 129.119 14.9558 122.145 13.9942Z" fill="var(--fill-0, #F28A4B)"/>
+</g>
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M35.7559 18.7795C47.4524 17.4446 50.8083 23.7072 48.0883 34.0974C47.7767 35.2873 46.6482 40.6423 46.4982 41.7071C45.7424 47.0851 49.1571 48.8275 41.216 48.6967C38.6382 48.6304 38.2689 47.2962 38.3859 45.025C34.9164 48.5399 31.0461 50.1656 26.0144 48.9695C24.1421 48.5234 22.93 47.432 21.7078 46.0323C18.7908 41.4867 20.9746 35.2155 25.6206 32.796C30.1405 30.4427 35.8227 30.5767 40.8138 30.4695C41.9075 25.0553 38.9224 23.9042 34.0355 25.1761C31.8107 25.7545 30.9207 26.9825 29.0809 28.1505L28.9134 28.2557C28.716 28.1533 28.5217 28.0449 28.3315 27.9298C22.041 24.1817 27.5943 20.9045 31.9017 19.5363C33.2009 19.1234 34.4071 18.9465 35.7559 18.7795ZM39.6827 35.7192C38.1738 35.7144 36.5907 35.6734 35.094 35.8057C34.1157 35.9019 33.4599 35.9877 32.3896 36.2005C29.5592 36.7632 26.623 40.4941 29.5948 42.7544C30.4858 43.4336 31.9375 43.5058 33.1027 43.4349C37.3247 42.4782 39.1261 39.8362 39.6827 35.7192Z" fill="var(--fill-0, #2E2A28)"/>
+</g>
+</svg>

public/assets/footer-android-icon.svg

@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon">
+<rect width="44" height="44" rx="12" fill="var(--fill-0, #D55F31)"/>
+<path id="Vector" d="M23.8954 10H15.6259C14.728 10 14 10.8028 14 11.793V32.207C14 33.1972 14.728 34 15.6259 34H28.3741C29.272 34 30 33.1972 30 32.207V16.7328C30 16.1165 29.7778 15.5252 29.3827 15.0895L25.3848 10.6807C24.9897 10.245 24.4536 10 23.8947 10H23.8954Z" fill="var(--fill-0, white)"/>
+</g>
+</svg>

public/assets/footer-apple-icon.svg

@@ -0,0 +1,6 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 22.0004 26.9856" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M16.1918 0C16.2546 0 16.3174 0 16.3838 0C16.5378 1.90308 15.8115 3.32506 14.9286 4.35481C14.0624 5.37746 12.8762 6.36929 10.9578 6.21879C10.8298 4.34297 11.5574 3.02645 12.439 1.99907C13.2566 1.0416 14.7556 0.189597 16.1918 0Z" fill="var(--fill-0, white)"/>
+<path id="Vector_2" d="M22.0004 19.8082C22.0004 19.8271 22.0004 19.8437 22.0004 19.8615C21.4612 21.4944 20.6922 22.8939 19.7537 24.1926C18.8969 25.3717 17.847 26.9584 15.9724 26.9584C14.3525 26.9584 13.2766 25.9168 11.6164 25.8883C9.86025 25.8599 8.89449 26.7593 7.28883 26.9856C7.10516 26.9856 6.92149 26.9856 6.74137 26.9856C5.56231 26.815 4.61077 25.8812 3.91756 25.0399C1.87346 22.5538 0.293876 19.3425 0 15.233C0 14.8301 0 14.4284 0 14.0255C0.124423 11.0843 1.55351 8.69304 3.45304 7.53413C4.45554 6.91794 5.83367 6.39299 7.36823 6.62762C8.02589 6.72953 8.69778 6.95467 9.28672 7.17745C9.84484 7.39193 10.5428 7.77231 11.204 7.75217C11.6519 7.73913 12.0975 7.50569 12.549 7.34098C13.8714 6.86343 15.1678 6.31597 16.8765 6.57311C18.9301 6.88357 20.3876 7.79601 21.2882 9.20377C19.551 10.3094 18.1776 11.9754 18.4123 14.8206C18.6208 17.405 20.1234 18.9171 22.0004 19.8082Z" fill="var(--fill-0, white)"/>
+</g>
+</svg>

public/assets/header-globe.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Electric Cars, Solar &#38; Clean Energy _ Tesla-6 1">
+<path id="Vector" d="M23.8327 13.0003C23.8327 18.9836 18.9826 23.8337 12.9993 23.8337C7.0161 23.8337 2.16602 18.9836 2.16602 13.0003C2.16602 7.01708 7.0161 2.16699 12.9993 2.16699C18.9826 2.16699 23.8327 7.01708 23.8327 13.0003ZM10.0245 21.7179C9.69954 21.2484 9.4209 20.7484 9.19252 20.2251C8.75485 19.2392 8.41035 18.0747 8.1796 16.792H4.6046C5.12443 17.9392 5.87339 18.968 6.80545 19.8151C7.73752 20.6622 8.83298 21.3098 10.0245 21.7179ZM10.6778 19.5642C11.0418 20.3843 11.4556 20.9986 11.8727 21.3951C12.2865 21.7894 12.6657 21.9378 12.9993 21.9378C13.333 21.9378 13.7122 21.7894 14.126 21.3962C14.5431 20.9986 14.9569 20.3843 15.3209 19.5653C15.6687 18.7821 15.9579 17.8428 16.1659 16.792H9.83168C10.0397 17.8428 10.3289 18.7821 10.6767 19.5653L10.6778 19.5642ZM9.47852 13.0003C9.47852 13.7489 9.51751 14.4737 9.5901 15.167H16.4086C16.4812 14.4737 16.5202 13.7489 16.5202 13.0003C16.5202 12.2517 16.4812 11.527 16.4086 10.8337H9.5901C9.51751 11.527 9.47852 12.2517 9.47852 13.0003ZM7.95643 10.8337H4.04777C3.87684 11.5432 3.79066 12.2705 3.79102 13.0003C3.79102 13.7467 3.87985 14.4726 4.04777 15.167H7.95643C7.81688 13.7259 7.81688 12.2747 7.95643 10.8337ZM9.83276 9.20866H16.1648C15.959 8.15783 15.6687 7.21858 15.3209 6.43533C14.9569 5.61633 14.5431 5.00208 14.126 4.60449C13.7122 4.21124 13.333 4.06283 12.9993 4.06283C12.6657 4.06283 12.2865 4.21124 11.8727 4.60449C11.4556 5.00208 11.0418 5.61633 10.6778 6.43533C10.33 7.21858 10.0408 8.15783 9.83276 9.20866ZM18.0412 10.8337C18.1809 12.2747 18.1809 13.7259 18.0412 15.167H21.952C22.1226 14.4574 22.2084 13.7301 22.2077 13.0003C22.2081 12.2705 22.1219 11.5432 21.9509 10.8337H18.0412ZM21.393 9.20866C20.8733 8.06154 20.1245 7.03282 19.1926 6.18572C18.2608 5.33862 17.1655 4.69102 15.9742 4.28274C16.2851 4.72474 16.5624 5.22849 16.8062 5.77558C17.2438 6.76141 17.5883 7.92599 17.8191 9.20866H21.3941H21.393ZM8.1796 9.20866C8.41035 7.92599 8.75485 6.76033 9.19252 5.77558C9.43627 5.22849 9.71251 4.72474 10.0245 4.28274C8.83318 4.69102 7.73793 5.33862 6.80606 6.18572C5.87419 7.03282 5.12539 8.06154 4.60568 9.20866H8.1796ZM16.8062 20.2251C16.5624 20.7722 16.2862 21.2759 15.9742 21.7179C17.1655 21.3096 18.2608 20.662 19.1926 19.8149C20.1245 18.9678 20.8733 17.9391 21.393 16.792H17.818C17.5883 18.0747 17.2438 19.2403 16.8062 20.2251Z" fill="var(--fill-0, #2E2A28)"/>
+</g>
+</svg>

public/assets/header-logo-wordmark.svg

@@ -0,0 +1,14 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 77.9999 27.3466" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 8">
+<path id="Vector" d="M40.9405 20.8327C43.8201 20.792 46.7009 20.8546 49.5757 21.02C58.0611 21.5051 67.1544 23.0697 75.207 25.9203C75.7287 26.1051 76.704 26.4048 77.0609 26.8008C77.2687 28.0927 72.5969 26.7 72.1119 26.5908C63.0951 24.587 53.8933 23.5076 44.6529 23.3707C33.1497 23.0089 20.9234 24.7233 9.72826 27.2833C9.29807 27.3815 8.61557 27.3918 8.39051 26.9468C8.49032 26.3331 10.397 25.7556 10.9663 25.5599C20.5216 22.2771 30.8642 21.0698 40.9405 20.8327Z" fill="var(--fill-0, #F28A4B)"/>
+<path id="Vector_2" d="M31.318 0.0224661C31.8649 0.0139438 32.8866 -0.104058 33.2606 0.300423C33.3065 0.889771 32.4703 4.77527 32.3052 5.60259C32.0856 6.70196 31.7116 9.06001 31.422 10.1043C32.5555 9.18653 33.6855 8.09699 34.7424 7.13332C36.0662 5.92709 36.4364 5.25449 38.3791 5.48983C38.8939 5.55211 39.7945 5.27874 40.0876 5.81696C40.07 5.99789 40.0826 6.0228 39.9339 6.16768C38.2986 7.76135 36.4564 9.19244 34.775 10.7363C35.619 12.4178 36.9093 14.4474 37.8796 16.1165C38.0982 16.4652 38.3254 16.7563 38.3624 17.1608C38.3115 17.324 38.2538 17.3896 38.1055 17.4787C37.5409 17.8183 35.5396 17.7435 34.913 17.5403C34.2374 17.322 32.3776 13.308 31.9903 12.5528C31.5792 12.9003 31.1699 13.2497 30.7626 13.6017C30.5008 14.6369 30.4536 15.7264 30.2 16.7504C29.9334 17.7652 29.0813 17.7055 28.3005 17.6603C27.1169 17.5915 26.5033 17.9455 26.7986 16.441C27.0193 15.3173 27.29 14.1039 27.5094 12.994L28.896 5.9284C29.2375 4.25738 29.5313 2.57456 29.8657 0.90223C30.0467 -0.00309788 30.5349 0.0375439 31.318 0.0224661Z" fill="var(--fill-0, #2E2A28)"/>
+<path id="Vector_3" d="M0.941515 0.37534C3.25959 0.264915 5.62425 0.356276 7.94687 0.356276C9.60223 0.356276 11.5002 0.247168 13.1259 0.366795C13.2646 0.377311 13.366 0.393748 13.4863 0.469994C13.6176 0.552812 13.6619 0.717133 13.6716 0.862394C13.704 1.34682 13.2587 2.8691 12.9071 3.19709C12.4474 3.62564 9.05615 3.40611 8.28287 3.39953C7.47585 6.82599 6.89241 10.4187 6.11747 13.8899C5.92381 14.8114 5.75465 16.7208 5.20897 17.4136C4.89788 17.808 2.41612 17.8363 1.98082 17.3577C1.89186 16.7839 4.39226 4.90867 4.68484 3.41333C3.72145 3.39296 0.616716 3.61249 0.0536389 3.1353C-0.061151 2.88487 0.0320916 2.45895 0.11222 2.19932C0.347797 1.43621 0.126322 0.759855 0.941515 0.37534Z" fill="var(--fill-0, #2E2A28)"/>
+<path id="Vector_4" d="M25.4674 0.0148448C25.9427 0.00694851 27.0579 -0.0542471 27.4724 0.147108C27.895 0.35307 27.4717 1.69149 27.391 2.14421C27.2885 2.71866 27.1388 3.37932 27.0188 3.98339L25.756 10.4031C25.3468 12.5107 25.0186 14.6447 24.5911 16.7504C24.4225 17.5808 24.2599 17.6907 23.4616 17.692C22.8596 17.6828 21.6356 17.8295 21.2147 17.4591C21.1268 17.3821 21.125 17.3492 21.136 17.209C21.2783 15.3817 21.8208 13.3984 22.1653 11.6119L23.56 4.36044C23.797 3.14967 24.0258 1.93562 24.2946 0.731434C24.459 -0.00489494 24.8585 0.0306374 25.4674 0.0148448Z" fill="var(--fill-0, #2E2A28)"/>
+<g id="Vector_5">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M71.6495 5.11303C74.6824 4.86166 77.5554 6.28123 77.9503 9.53783C78.1755 11.4579 77.6281 13.3892 76.4288 14.906C75.0142 16.6748 73.1939 17.5443 70.9747 17.7839C67.818 18.0877 64.8171 16.6472 64.4884 13.2195C64.3149 11.2569 64.9282 9.30557 66.1935 7.79467C67.6121 6.10827 69.4964 5.30877 71.6495 5.11303ZM71.3595 7.84935C69.1568 8.28547 67.9375 10.1587 67.9572 12.3425C67.975 14.3657 69.1902 15.2459 71.1368 15.0896C72.2798 14.8336 73.2163 14.2735 73.795 13.2497C75.1541 10.8445 74.911 7.55083 71.3595 7.84935Z" fill="var(--fill-0, #F28A4B)"/>
+<path d="M64.0954 4.9784C64.4103 4.94111 65.2562 5.06895 65.2588 5.37122C65.2661 6.07163 64.7563 7.87458 64.4288 8.43917C63.9897 8.46314 63.4642 8.42253 63.0303 8.47379C60.3232 8.79071 59.8827 10.8613 59.4615 13.0438C59.2766 14.0012 59.1082 14.9626 58.957 15.9266C58.7602 17.1524 58.8349 17.8707 57.3221 17.6837C56.7807 17.6164 55.7896 17.8554 55.3974 17.4839C55.2865 17.2476 55.3069 17.2409 55.3452 16.9886C55.7044 15.5025 57.3981 5.79532 57.7177 5.49439C57.8893 5.3326 58.2492 5.282 58.471 5.27135C58.9484 5.24871 60.3179 5.1788 60.6474 5.47707C60.8355 5.84792 60.5846 6.93582 60.5212 7.42784C61.4258 6.0683 62.4315 5.14485 64.0954 4.9784Z" fill="var(--fill-0, #F28A4B)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M48.9446 0.1562C50.955 0.158164 53.5275 0.122138 55.0666 1.63374C57.201 3.7307 56.339 7.94429 54.3235 9.84468C52.1625 11.8833 49.6855 11.9808 46.8987 11.9619L46.1184 11.957C45.9559 12.7548 45.3084 17.0471 44.9719 17.3691C44.6001 17.7241 43.1814 17.6145 42.6409 17.6191C42.2972 17.6217 41.9482 17.6038 41.6916 17.3525C41.5596 16.8275 43.0455 9.96145 43.2288 8.98823L44.2737 3.62983C44.4556 2.70432 44.6085 1.7591 44.8166 0.838817C44.905 0.448118 45.0992 0.373253 45.4329 0.183544C45.7078 0.175033 45.9841 0.168595 46.259 0.164012C47.1544 0.15616 48.0492 0.153582 48.9446 0.1562ZM47.8303 3.18061C47.6215 4.33916 47.4035 5.49572 47.175 6.65034C47.0402 7.34484 46.8186 8.33409 46.7727 9.01557C48.4072 9.0241 49.6081 9.14689 51.0706 8.34956C53.0184 7.11729 53.6271 3.65427 50.7307 3.25483C49.8037 3.12652 48.7737 3.17538 47.8303 3.18061Z" fill="var(--fill-0, #F28A4B)"/>
+</g>
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M14.8502 5.24274C19.7083 4.68825 21.102 7.28866 19.9723 11.6041C19.8429 12.0983 19.3743 14.3233 19.3122 14.7652C18.9984 16.9987 20.4166 17.7218 17.1188 17.6675C16.048 17.64 15.8944 17.0865 15.943 16.1431C14.502 17.603 12.8943 18.2777 10.8043 17.7808C10.0268 17.5955 9.52384 17.1424 9.01625 16.5611C7.80468 14.6731 8.71157 12.0689 10.6413 11.064C12.5185 10.0867 14.8779 10.1417 16.9508 10.0972C17.405 7.84867 16.1659 7.37086 14.1364 7.89899C13.2123 8.13925 12.8419 8.64924 12.0778 9.13434L12.0084 9.17829C11.9265 9.13578 11.8462 9.09028 11.7672 9.04255C9.15458 7.48582 11.4606 6.12449 13.2497 5.55622C13.7891 5.38473 14.2902 5.31212 14.8502 5.24274ZM16.4821 12.2779C15.8553 12.2759 15.1975 12.2591 14.5758 12.314C14.1695 12.354 13.8972 12.3897 13.4528 12.4781C12.2772 12.7118 11.0575 14.261 12.2916 15.1998C12.6616 15.4819 13.2647 15.5124 13.7487 15.483C15.5022 15.0856 16.2509 13.9879 16.4821 12.2779Z" fill="var(--fill-0, #2E2A28)"/>
+</g>
+</svg>

public/assets/preview-arrow-left.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 175571">
+<path id="Vector" d="M5.5925 11.0298L14.0925 4.33982C15.1125 3.52982 16.6125 4.25982 16.6125 5.55982V18.9398C16.6125 20.2398 15.1125 20.9698 14.0925 20.1598L5.5925 13.4698C4.8025 12.8498 4.8025 11.6498 5.5925 11.0198V11.0298Z" fill="var(--fill-0, white)"/>
+</g>
+</svg>

public/assets/preview-arrow-right.svg

@@ -0,0 +1,5 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame 175571">
+<path id="Vector" d="M5.5925 11.0298L14.0925 4.33982C15.1125 3.52982 16.6125 4.25982 16.6125 5.55982V18.9398C16.6125 20.2398 15.1125 20.9698 14.0925 20.1598L5.5925 13.4698C4.8025 12.8498 4.8025 11.6498 5.5925 11.0198V11.0298Z" fill="var(--fill-0, white)"/>
+</g>
+</svg>

public/assets/trust-divider.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 1 118" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 16" d="M0.5 0V118" stroke="var(--stroke-0, #F08458)" stroke-opacity="0.5"/>
+</svg>

public/assets/why-icon-connected.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 44.0005 43.9141" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M30.717 41.8428C27.9992 43.2162 25.0668 43.9141 22.0002 43.9141C18.9337 43.914 16.0021 43.2162 13.2844 41.8428L14.4474 39.542C19.1554 41.9236 24.845 41.9235 29.5529 39.542L30.717 41.8428ZM3.22186 28.0195C6.36294 26.2075 10.2762 27.349 12.0265 30.3789C13.8073 33.4615 12.7515 37.4018 9.66717 39.1836C6.57694 40.9653 2.64108 39.9046 0.861506 36.8242C-0.914556 33.7465 0.144168 29.797 3.22186 28.0195ZM31.9738 30.3789C33.7241 27.3491 37.6372 26.2075 40.7785 28.0195C43.8563 29.7971 44.9151 33.7464 43.1388 36.8242C41.3615 39.9009 37.4278 40.968 34.3332 39.1836C31.2509 37.4029 30.1921 33.4632 31.9738 30.3789ZM12.8234 10.5527C8.38347 13.4645 5.55977 18.3585 5.26776 23.6406L2.69451 23.499C3.02938 17.4013 6.28762 11.757 11.4084 8.39844L12.8234 10.5527ZM32.592 8.39844C37.7129 11.757 40.9709 17.4013 41.3058 23.499L38.7326 23.6406C38.4406 18.3585 35.6169 13.4654 31.1769 10.5537L32.592 8.39844ZM22.0002 0C25.5539 0 28.4455 2.89155 28.4455 6.44531C28.4455 9.99907 25.5539 12.8906 22.0002 12.8906C18.4465 12.8906 15.5549 9.99903 15.5549 6.44531C15.5549 2.89159 18.4465 6.78247e-05 22.0002 0Z" fill="var(--fill-0, white)"/>
+</svg>

public/assets/why-icon-familiar.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 38 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M38 0V40H0V0H38ZM20.5771 2.35254V37.6475H35.4229V2.35254H20.5771Z" fill="var(--fill-0, white)"/>
+</svg>

public/assets/why-icon-modern.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 24.168 44.001" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Union" d="M24.168 36.0859V44.001H0V24.0576L24.168 36.0859ZM6.02539 36.1299C5.60296 37.1749 4.75786 38.0199 3.71289 38.4424C4.75786 38.8648 5.60296 39.7099 6.02539 40.7549C6.44783 39.7099 7.29292 38.8648 8.33789 38.4424C7.29292 38.0199 6.44783 37.1749 6.02539 36.1299ZM24.168 21.1445V28.8379L0 16.8096V9.09375L24.168 21.1445ZM24.168 18.9658L0 6.9375V0H24.168V18.9658Z" fill="var(--fill-0, white)"/>
+</svg>

public/assets/why-icon-simple.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 44.001 43.9639" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M31.7793 34.1846L22.001 43.9639L12.2217 34.1846L22.001 24.4062L31.7793 34.1846ZM19.5576 22.0107L9.77832 31.7891L0 22.0107L9.77832 12.2314L19.5576 22.0107ZM44.001 21.9902L34.2227 31.7686L24.4434 21.9902L34.2227 12.2109L44.001 21.9902ZM31.7529 9.7793L21.9746 19.5576L12.1953 9.7793L21.9746 0L31.7529 9.7793Z" fill="var(--fill-0, white)"/>
+</svg>

public/assets/why-underline.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 295.5 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector 15" d="M0 0.5H295.5" stroke="var(--stroke-0, #F08458)"/>
+</svg>

src/components/AppPreview.astro

@@ -0,0 +1,93 @@
+---
+const slides = [
+  "/assets/preview-phone.png",
+  "/assets/preview-phone.png",
+  "/assets/preview-phone.png",
+]
+---
+
+<section class="bg-[#fef0eb] w-full flex flex-col gap-[60px] items-center pt-[120px] px-[130px] overflow-hidden">
+  <!-- Heading -->
+  <div class="flex flex-col gap-[40px] items-start overflow-clip w-[940px]">
+    <p class="font-bold text-[#1a1a1a] text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">
+      A Familiar App Experience, Reimagined with a Modern Look
+    </p>
+    <p class="font-normal text-[#7a726d] text-[18px] text-center tracking-[-0.33px] leading-[1.5] w-full">
+      TalkPro keeps the communication experience familiar while refining the visual layer with updated icons, colors, spacing, and interface details.
+    </p>
+  </div>
+
+  <!-- Carousel -->
+  <div class="flex gap-[20px] items-end justify-center shrink-0" id="carousel">
+
+    <!-- Left phone -->
+    <div class="relative h-[396px] w-[336px] opacity-20 shrink-0 overflow-hidden pointer-events-none transition-opacity duration-300">
+      <img id="phone-left" alt="" class="absolute h-[175.34%] left-0 max-w-none top-[-0.03%] w-full transition-opacity duration-300" src={slides[slides.length - 1]} />
+    </div>
+
+    <!-- Prev button -->
+    <div class="flex items-end self-stretch shrink-0">
+      <div class="flex items-center justify-center h-full">
+        <button id="btn-prev" class="bg-[#f08458] flex items-center justify-center rounded-[9999px] size-[48px] hover:bg-[#e07a3b] active:scale-95 transition-all shrink-0 cursor-pointer">
+          <img alt="Previous" class="block size-[24px]" src="/assets/preview-arrow-left.svg" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Center phone -->
+    <div class="relative h-[542px] w-[459px] shrink-0 overflow-hidden pointer-events-none">
+      <img id="phone-center" alt="TalkPro app preview" class="absolute h-[175.34%] left-0 max-w-none top-[-0.03%] w-full transition-opacity duration-300" src={slides[0]} />
+    </div>
+
+    <!-- Next button -->
+    <div class="flex items-end self-stretch shrink-0">
+      <div class="flex items-center justify-center h-full">
+        <button id="btn-next" class="bg-[#f08458] flex items-center justify-center rounded-[9999px] size-[48px] hover:bg-[#e07a3b] active:scale-95 transition-all shrink-0 cursor-pointer">
+          <img alt="Next" class="block size-[24px] rotate-180" src="/assets/preview-arrow-right.svg" />
+        </button>
+      </div>
+    </div>
+
+    <!-- Right phone -->
+    <div class="relative h-[396px] w-[336px] opacity-20 shrink-0 overflow-hidden pointer-events-none transition-opacity duration-300">
+      <img id="phone-right" alt="" class="absolute h-[175.34%] left-0 max-w-none top-[-0.03%] w-full transition-opacity duration-300" src={slides[1]} />
+    </div>
+
+  </div>
+</section>
+
+<script>
+  const slides: string[] = (window as any).__carouselSlides || [];
+
+  // Read slides injected via data attribute
+  const carousel = document.getElementById('carousel')!;
+  const allSlides: string[] = JSON.parse(carousel.dataset.slides || '[]');
+
+  const leftImg   = document.getElementById('phone-left')   as HTMLImageElement;
+  const centerImg = document.getElementById('phone-center') as HTMLImageElement;
+  const rightImg  = document.getElementById('phone-right')  as HTMLImageElement;
+  const btnPrev   = document.getElementById('btn-prev')!;
+  const btnNext   = document.getElementById('btn-next')!;
+
+  let current = 0;
+
+  function mod(n: number, m: number) { return ((n % m) + m) % m; }
+
+  function transition(next: number) {
+    [leftImg, centerImg, rightImg].forEach(img => img.style.opacity = '0');
+    setTimeout(() => {
+      current = mod(next, allSlides.length);
+      leftImg.src   = allSlides[mod(current - 1, allSlides.length)];
+      centerImg.src = allSlides[current];
+      rightImg.src  = allSlides[mod(current + 1, allSlides.length)];
+      [leftImg, centerImg, rightImg].forEach(img => img.style.opacity = '1');
+    }, 200);
+  }
+
+  btnPrev.addEventListener('click', () => transition(current - 1));
+  btnNext.addEventListener('click', () => transition(current + 1));
+</script>
+
+<script define:vars={{ slides }}>
+  document.getElementById('carousel').dataset.slides = JSON.stringify(slides);
+</script>

src/components/CoreSystem.astro

@@ -1,44 +1,66 @@
 ---
+const halftone = "/assets/core-halftone-bg.png";
+const iconPrivate = "/assets/core-icon-private.png";
+const iconGroups = "/assets/core-icon-groups.png";
+const iconChannels = "/assets/core-icon-channels.png";
+const iconVoice = "/assets/core-icon-voice.png";
+const iconVideo = "/assets/core-icon-video.png";
+const iconMedia = "/assets/core-icon-media.png";
+
 const cards = [
-  { img: '/assets/icon-messaging.png', title: 'Private Messaging', desc: 'Stay connected through fast and familiar one-on-one conversations.' },
+  { img: iconPrivate,  title: 'Private Messaging', desc: 'Stay connected through fast and familiar one-on-one conversations.' },
-  { img: '/assets/icon-groups.png',    title: 'Group Chats',       desc: 'Create spaces for friends, teams, communities, and shared discussions.' },
+  { img: iconGroups,   title: 'Group Chats',       desc: 'Create spaces for friends, teams, communities, and shared discussions.' },
-  { img: '/assets/icon-channels.png',  title: 'Channels',          desc: 'Follow updates, announcements, and content from the people or communities you care about.' },
+  { img: iconChannels, title: 'Channels',           desc: 'Follow updates, announcements, and content from the people or communities you care about.' },
-  { img: '/assets/icon-voice.png',     title: 'Voice Calls',       desc: 'Talk in real time whenever messages are not enough.' },
+  { img: iconVoice,    title: 'Voice Calls',        desc: 'Talk in real time whenever messages are not enough.' },
-  { img: '/assets/icon-video.png',     title: 'Video Calls',       desc: 'Connect face-to-face with a simple and reliable video call experience.' },
+  { img: iconVideo,    title: 'Video Calls',         desc: 'Connect face-to-face with a simple and reliable video call experience.' },
-  { img: '/assets/icon-media.png',     title: 'Media Sharing',     desc: 'Share photos, videos, files, and updates in your conversations.' },
+  { img: iconMedia,    title: 'Media Sharing',      desc: 'Share photos, videos, files, and updates in your conversations.' },
 ]
-const rows = [cards.slice(0, 3), cards.slice(3)]
 ---
 
-<section class="flex flex-col items-center px-[130px] py-[110px] max-w-[1440px] mx-auto">
+<section id="features" class="relative w-full flex flex-col gap-[60px] items-center py-[120px] overflow-hidden">
-  <div class="flex flex-col items-center pb-[60px] w-full">
+  <!-- Background halftone -->
-    <p class="font-bold text-brand text-[13px] tracking-[-0.04px]">CORE SYSTEM</p>
+  <img alt="" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[1319px] w-[2363px] object-cover pointer-events-none opacity-20" src={halftone} />
-    <div class="h-[15px]"></div>
+
-    <div class="font-bold text-text-primary text-[52px] text-center tracking-[-1.16px] leading-[0.96]">
+  <!-- Section header -->
-      <p>Built for how modern</p>
+  <div class="relative flex flex-col gap-[24px] items-center justify-end overflow-clip px-[180px] w-[1280px]">
-      <p>communication actually works.</p>
+    <div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
+      <span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">CORE FEATURES</span>
     </div>
-    <div class="h-5"></div>
+    <p class="font-bold text-[#1a1a1a] text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">Everything You Need to Communicate</p>
-    <p class="text-text-secondary text-[18px] font-normal leading-[1.5] text-center tracking-[-0.26px] max-w-[900px]">
+    <p class="font-normal text-[#7a726d] text-[18px] text-center tracking-[-0.33px] leading-[1.5] w-full">
       Different identities, different conversations, and different privacy levels should not be forced into one flat interface. TalkPro lets them exist in order inside one platform.
     </p>
   </div>
 
-  <div class="flex flex-col gap-[22px] w-[1280px]">
+  <!-- Card grid -->
-    {rows.map((row) => (
+  <div class="relative flex flex-col gap-[22px] items-start w-[1280px]">
-      <div class="flex gap-[22px]">
+    <!-- Row 1 -->
-        {row.map((card) => (
+    <div class="flex gap-[22px] items-start w-full">
-          <div class="flex-1 flex flex-col items-center bg-[rgba(255,255,255,0.78)] border border-white rounded-[30px] p-8">
+      {cards.slice(0, 3).map(card => (
-            <div class="size-[240px] shrink-0 overflow-hidden rounded-2xl">
+        <div class="bg-[rgba(255,255,255,0.78)] flex flex-1 flex-col gap-[16px] items-center min-w-0 p-[32px] rounded-[30px] self-stretch">
-              <img src={card.img} alt={card.title} class="w-full h-full object-cover" />
+          <div class="relative shrink-0 size-[160px] overflow-hidden">
+            <img alt={card.title} class="absolute inset-0 max-w-none size-full object-contain" src={card.img} />
+          </div>
+          <div class="flex flex-col gap-[12px] items-start text-center w-full">
+            <p class="font-bold text-[#2e2a28] text-[24px] tracking-[-0.5px] leading-normal w-full">{card.title}</p>
+            <p class="font-normal text-[#7a726d] text-[15px] tracking-[-0.13px] leading-[1.5] w-full">{card.desc}</p>
           </div>
-            <div class="h-[22px]"></div>
-            <p class="font-bold text-text-primary text-[25px] tracking-[-0.5px] w-full">{card.title}</p>
-            <div class="h-[14px]"></div>
-            <p class="text-text-secondary text-[15px] font-normal leading-[1.5] tracking-[-0.13px] w-full">{card.desc}</p>
         </div>
       ))}
     </div>
+    <!-- Row 2 -->
+    <div class="flex gap-[22px] items-center w-full">
+      {cards.slice(3).map(card => (
+        <div class="bg-[rgba(255,255,255,0.78)] flex flex-1 flex-col gap-[16px] items-center min-w-0 p-[32px] rounded-[30px] self-stretch">
+          <div class="relative shrink-0 size-[160px] overflow-hidden">
+            <img alt={card.title} class="absolute inset-0 max-w-none size-full object-contain" src={card.img} />
+          </div>
+          <div class="flex flex-col gap-[12px] items-start text-center w-full">
+            <p class="font-bold text-[#2e2a28] text-[24px] tracking-[-0.5px] leading-normal w-full">{card.title}</p>
+            <p class="font-normal text-[#7a726d] text-[15px] tracking-[-0.13px] leading-[1.5] w-full">{card.desc}</p>
+          </div>
+        </div>
       ))}
     </div>
+  </div>
 </section>

src/components/DownloadCTA.astro

@@ -1,39 +1,59 @@
 ---
+const bgPattern = "/assets/cta-bg-pattern.png";
+const talkproLogo = "/assets/cta-talkpro-logo.png";
+const androidIcon = "/assets/cta-android-icon.svg";
+const appleIcon = "/assets/cta-apple-icon.svg";
+const phoneArt = "/assets/cta-phone-art.png";
 ---
 
-<section class="flex flex-col items-center bg-surface-alt px-[130px] py-[110px] w-full">
+<section id="download" class="relative bg-white border-t border-[#eec8b8] w-full flex items-center justify-center overflow-hidden h-[600px]">
-  <div class="bg-[rgba(255,255,255,0.78)] rounded-[34px] p-[52px] flex flex-col items-center max-w-[1180px] w-full">
+  <!-- Background pattern -->
-    <p class="font-bold text-brand text-[13px] tracking-[2.86px]">DOWNLOAD</p>
+  <img alt="" class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 h-[923px] w-full max-w-[1920px] pointer-events-none" src={bgPattern} />
-    <div class="h-[15px]"></div>
+
-    <div class="font-bold text-text-primary text-[44px] text-center tracking-[-2.2px] leading-[1.04] max-w-[1076px]">
+  <div class="relative flex items-center w-[1280px]">
-      <p>Start with one conversation.</p>
+    <!-- Left: download panel -->
-      <p>Build your own communication space.</p>
+    <div class="flex flex-1 flex-col gap-[36px] items-start justify-center min-w-0 overflow-clip">
+      <div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
+        <span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">DOWNLOAD</span>
       </div>
-    <div class="h-5"></div>
+
-    <p class="text-text-secondary text-[18px] font-normal leading-[1.75] text-center max-w-[800px]">
+      <div class="flex flex-col gap-[16px] items-start w-full">
-      Talk Pro supports iOS and Android. Official store links, QR codes, version information, and compatibility notes are reserved on the download page.
+        <div class="flex gap-[20px] items-start shrink-0">
+          <p class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] leading-[1.2] whitespace-nowrap">Download</p>
+          <div class="relative shrink-0 h-[72px] w-[188px]">
+            <img alt="TalkPro" class="absolute inset-0 block max-w-none size-full" src={talkproLogo} />
+          </div>
+        </div>
+        <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] max-w-[542px]">
+          Download TalkPro and experience a cleaner, simpler, and more modern way to stay connected.
         </p>
-    <div class="h-8"></div>
+      </div>
 
-    <div class="flex gap-2 items-center">
+      <!-- Store badges -->
-      <!-- Android badge -->
+      <div class="flex gap-[16px] items-center overflow-clip shrink-0">
-      <div class="bg-brand border border-border-light rounded-[20px] flex items-center gap-2 h-[70px] px-4 py-3">
+        <div class="bg-[#f28a4b] border border-[#c5834e] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] shrink-0 w-[260px]">
-        <img src="/assets/badge-android-icon.png" alt="Android" class="size-[44px]" />
+          <img alt="Android" class="block shrink-0 size-[44px]" src={androidIcon} />
-        <div class="flex flex-col gap-[3px]">
+          <div class="flex flex-col gap-[3px] items-start overflow-clip shrink-0 whitespace-nowrap">
-          <p class="font-bold text-[#ffd6bc] text-[11px] tracking-[0.66px]">ANDROID</p>
+            <p class="font-semibold text-[#ffd6bc] text-[11px] tracking-[0.05px] leading-normal">ANDROID</p>
-          <p class="font-bold text-white text-[15px]">Download APK</p>
+            <p class="font-semibold text-white text-[15px] tracking-[-0.13px] leading-normal">APK Coming Soon</p>
+          </div>
+        </div>
+        <div class="bg-[#383838] border border-[#141414] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] shrink-0 w-[260px]">
+          <div class="bg-[#151515] flex items-center justify-center rounded-[12px] shrink-0 size-[44px]">
+            <img alt="Apple" class="block h-[27px] w-[22px]" src={appleIcon} />
+          </div>
+          <div class="flex flex-col gap-[3px] items-start overflow-clip shrink-0 whitespace-nowrap">
+            <p class="font-semibold text-[#ccc] text-[11px] tracking-[0.05px] leading-normal">IOS</p>
+            <p class="font-semibold text-white text-[15px] tracking-[-0.13px] leading-normal">Coming on App Store</p>
+          </div>
+        </div>
       </div>
     </div>
 
-      <!-- iOS badge -->
+    <!-- Right: phone art -->
-      <div class="bg-[rgba(18,18,18,0.94)] border border-border-light rounded-[20px] flex items-center gap-2 h-[70px] px-4 py-3">
+    <div class="relative shrink-0 h-[510px] w-[418px]">
-        <div class="bg-[#323232] rounded-[12px] size-[44px] flex items-center justify-center">
+      <div class="absolute inset-0 overflow-hidden pointer-events-none">
-          <img src="/assets/badge-ios-icon.png" alt="Apple" class="w-[22px] h-[27px]" />
+        <img alt="TalkPro on phone" class="absolute h-[136.1%] left-[3.8%] max-w-none top-[-18.05%] w-[92.43%]" src={phoneArt} />
-        </div>
-        <div class="flex flex-col gap-[3px]">
-          <p class="font-bold text-[#ccc] text-[11px] tracking-[0.66px]">IOS</p>
-          <p class="font-bold text-white text-[15px]">Coming on App Store</p>
-        </div>
       </div>
     </div>
   </div>

src/components/Experience.astro

@@ -0,0 +1,65 @@
+---
+---
+
+<section id="experience" class="bg-white w-full flex flex-col items-center justify-center py-[120px]">
+  <div class="flex flex-col gap-[40px] items-center justify-center w-[1008px]">
+    <p class="font-bold text-[#1a1a1a] text-[48px] text-center tracking-[-1.16px] leading-[1.2] w-full">
+      A Cleaner, More Comfortable Messaging Experience
+    </p>
+
+    <div class="flex flex-col items-start w-full">
+      <!-- 3 cards row -->
+      <div class="flex gap-[24px] h-[477px] items-center w-full shrink-0">
+
+        <!-- Card 1: Clear Interface -->
+        <div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-[320px]">
+          <div class="relative h-[232px] shrink-0 w-[320px]">
+            <div class="absolute inset-0 overflow-hidden pointer-events-none">
+              <img alt="Clear interface screenshot" class="absolute h-[298.5%] left-0 max-w-none top-[-58.58%] w-full" src="/assets/exp-card-1.png" />
+            </div>
+          </div>
+          <div class="flex flex-col gap-[16px] items-start overflow-clip text-center w-full">
+            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[1.4] w-full">Clear Interface</p>
+            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A clean layout that makes conversations easy to follow.</p>
+          </div>
+        </div>
+
+        <!-- Card 2: Smooth Navigation -->
+        <div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-[320px]">
+          <div class="bg-[#ffeddf] flex flex-col items-start shrink-0 w-[320px]">
+            <div class="relative h-[232px] shrink-0 w-full">
+              <div class="absolute inset-0 overflow-hidden pointer-events-none">
+                <img alt="Smooth navigation screenshot" class="absolute h-[411.28%] left-[-5.95%] max-w-none top-[-335.6%] w-[137.79%]" src="/assets/exp-card-2.png" />
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col gap-[16px] items-start overflow-clip text-center w-full">
+            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[1.4] w-full">Smooth Navigation</p>
+            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">Move between chats, groups, and channels with familiar controls.</p>
+          </div>
+        </div>
+
+        <!-- Card 3: Refined Visual Design -->
+        <div class="bg-gradient-to-b from-[#fef0eb] to-white flex flex-col gap-[36px] h-full items-center overflow-clip pb-[36px] px-[36px] rounded-tl-[30px] rounded-tr-[30px] shrink-0 w-[320px]">
+          <div class="bg-[#ffeddf] flex flex-col h-[232px] items-start overflow-clip shrink-0 w-[320px]">
+            <div class="flex-1 min-h-0 relative w-full">
+              <div class="absolute inset-0 overflow-hidden pointer-events-none">
+                <img alt="Refined visual design screenshot" class="absolute h-[298.5%] left-0 max-w-none top-[-99.23%] w-full" src="/assets/exp-card-3.png" />
+              </div>
+            </div>
+          </div>
+          <div class="flex flex-col gap-[16px] items-start overflow-clip text-center w-full">
+            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[1.4] w-full">Refined Visual Design</p>
+            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">Modern icons, colors, and interface details create a more polished experience.</p>
+          </div>
+        </div>
+
+      </div>
+
+      <!-- Footer caption -->
+      <p class="font-normal text-[#7a726d] text-[18px] text-center tracking-[-0.33px] leading-[1.5] w-full mt-0">
+        TalkPro is designed with clarity in mind. Every screen is built to help users focus on their conversations, reduce distractions, and move naturally between chats, groups, channels, and calls.
+      </p>
+    </div>
+  </div>
+</section>

src/components/Footer.astro

@@ -1,42 +1,65 @@
 ---
-const columns: Record<string, string[]> = {
+const logoFull = "/assets/footer-logo.png";
-  Product: ['Features', 'Product', 'Download'],
+const androidIcon = "/assets/footer-android-icon.svg";
-  Privacy: ['Privacy Policy', 'Protected Space', 'Security'],
+const appleIcon = "/assets/footer-apple-icon.svg";
-  Company: ['About', 'Support', 'Contact'],
-}
 ---
 
-<footer class="bg-surface-footer px-[130px] pt-[58px] pb-[30px] w-full">
+<footer class="bg-[#fef0eb] w-full flex flex-col items-center justify-center py-[120px]">
-  <div class="flex gap-[42px] items-start max-w-[1180px]">
+  <div class="flex flex-col gap-[36px] items-start w-[1280px]">
-    <!-- Brand -->
+    <!-- Top row -->
-    <div class="flex flex-col gap-[14px] w-[280px]">
+    <div class="flex items-start justify-between w-full">
-      <div class="bg-brand rounded-[12px] size-9"></div>
+      <!-- Brand col -->
-      <p class="font-bold text-text-primary text-[18px] tracking-[-0.54px]">Talk Pro</p>
+      <div class="flex flex-col gap-[24px] items-start overflow-clip shrink-0">
-      <div class="text-text-secondary text-[14px] font-normal leading-[1.7]">
+        <div class="relative h-[64px] w-[220px]">
-        <p>Designed for modern communication,</p>
+          <img alt="TalkPro" class="absolute inset-0 max-w-none object-cover size-full pointer-events-none" src={logoFull} />
-        <p>privacy, and intelligent connection.</p>
+        </div>
+        <p class="font-normal text-[#7a726d] text-[14px] tracking-[-0.09px] leading-[1.5] max-w-[320px]">
+          TalkPro is a modern communication app designed for messaging, group conversations, channels, voice calls, and video calls.
+        </p>
+        <!-- Store badges -->
+        <div class="flex gap-[16px] items-center overflow-clip shrink-0">
+          <div class="bg-[#f28a4b] border border-[#c5834e] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] shrink-0 w-[260px]">
+            <img alt="Android" class="block shrink-0 size-[44px]" src={androidIcon} />
+            <div class="flex flex-col gap-[3px] items-start overflow-clip shrink-0 whitespace-nowrap">
+              <p class="font-semibold text-[#ffd6bc] text-[11px] tracking-[0.05px] leading-normal">ANDROID</p>
+              <p class="font-semibold text-white text-[15px] tracking-[-0.13px] leading-normal">APK Coming Soon</p>
+            </div>
+          </div>
+          <div class="bg-[#383838] border border-[#141414] flex gap-[8px] h-[70px] items-center overflow-clip px-[16px] py-[12px] rounded-[20px] shrink-0 w-[260px]">
+            <div class="bg-[#151515] flex items-center justify-center rounded-[12px] shrink-0 size-[44px]">
+              <img alt="Apple" class="block h-[27px] w-[22px]" src={appleIcon} />
+            </div>
+            <div class="flex flex-col gap-[3px] items-start overflow-clip shrink-0 whitespace-nowrap">
+              <p class="font-semibold text-[#ccc] text-[11px] tracking-[0.05px] leading-normal">IOS</p>
+              <p class="font-semibold text-white text-[15px] tracking-[-0.13px] leading-normal">Coming on App Store</p>
+            </div>
+          </div>
         </div>
       </div>
 
-    <div class="flex-1"></div>
+      <!-- Link cols -->
-
+      <div class="flex gap-[32px] items-center leading-normal shrink-0">
-    {Object.entries(columns).map(([heading, items]) => (
+        <div class="flex flex-col gap-[24px] items-start overflow-clip w-[160px]">
-      <div class="flex flex-col gap-3">
+          <a href="#download" class="font-normal text-[#4a4a4a] text-[14px] whitespace-nowrap hover:text-[#f28a4b] transition-colors">Download</a>
-        <p class="font-bold text-text-primary text-[15px]">{heading}</p>
+          <a href="#features" class="font-normal text-[#4a4a4a] text-[14px] whitespace-nowrap hover:text-[#f28a4b] transition-colors">Features</a>
-        {items.map((item) => (
+          <a href="#" class="font-normal text-[#4a4a4a] text-[14px] whitespace-nowrap hover:text-[#f28a4b] transition-colors">About</a>
-          <a href="#" class="text-text-secondary text-[14px] font-normal hover:text-text-primary transition-colors whitespace-nowrap">{item}</a>
+        </div>
-        ))}
+        <div class="flex flex-col gap-[24px] items-start overflow-clip w-[160px]">
+          <p class="font-medium text-[#4a4a4a] text-[14px] whitespace-nowrap">Contact</p>
+          <p class="font-normal text-[#4a4a4a] text-[14px] whitespace-nowrap">email@hotmail.com</p>
+          <p class="font-normal text-[#4a4a4a] text-[14px] whitespace-nowrap">+01 123 45562334</p>
+        </div>
       </div>
-    ))}
     </div>
 
-  <div class="h-11"></div>
+    <!-- Divider -->
-  <div class="max-w-[1180px] border-t border-border-light"></div>
+    <div class="w-full h-px bg-[#e3d9d1]"></div>
-  <div class="h-6"></div>
 
-  <div class="flex items-center gap-5 max-w-[1180px]">
+    <!-- Bottom row -->
-    <p class="text-text-secondary text-[14px] font-normal">© 2026 Talk Pro. All rights reserved.</p>
+    <div class="flex gap-[20px] items-center overflow-clip w-full">
-    <div class="flex-1"></div>
+      <p class="font-normal text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">© 2026 TalkPro. All rights reserved.</p>
-    <p class="text-text-secondary text-[14px] font-normal">Terms of Use · Privacy Policy · Support</p>
+      <div class="flex-1 min-w-0"></div>
+      <p class="font-normal text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">Terms of Use · Privacy Policy · Support</p>
+    </div>
   </div>
 </footer>

src/components/Header.astro

@@ -1,28 +1,41 @@
 ---
+const logoIcon = "/assets/header-logo-icon.png";
+const logoWordmark = "/assets/header-logo-wordmark.svg";
+const globeIcon = "/assets/header-globe.svg";
 ---
 
-<header class="fixed top-0 left-0 w-full h-[78px] bg-[rgba(248,243,238,0.84)] border-b border-border-light backdrop-blur-sm z-50 flex items-center justify-center">
+<header class="bg-white border-b border-[#e3d9d1] w-full flex items-center justify-center h-[72px] sticky top-0 z-50">
-  <div class="w-[1280px] flex items-center">
+  <div class="flex items-center w-[1280px]">
-    <div class="flex-1">
+    <!-- Logo -->
-      <a href="/" class="flex items-center gap-2 w-fit">
+    <div class="flex flex-1 items-center min-w-0">
-        <img src="/assets/logo-icon.png" alt="Talk Pro icon" class="h-[42px] w-[53px] object-cover" />
+      <a href="/" class="relative h-[42px] w-[143px] shrink-0 block">
-        <img src="/assets/logo-wordmark.png" alt="Talk Pro" class="h-6" />
+        <div class="absolute h-[42px] left-0 top-0 w-[53px] overflow-hidden">
+          <img alt="TalkPro icon" class="absolute h-[126.98%] left-0 max-w-none top-[-13.49%] w-full" src={logoIcon} />
+        </div>
+        <div class="absolute inset-[26.97%_0_7.92%_45.45%]">
+          <img alt="TalkPro" class="absolute block inset-0 max-w-none size-full" src={logoWordmark} />
+        </div>
       </a>
     </div>
 
-    <nav class="flex items-center gap-7 font-bold text-[14px] text-text-secondary tracking-[-0.09px]">
+    <!-- Nav -->
-      <a href="#" class="hover:text-text-primary transition-colors">Home</a>
+    <nav class="flex items-center gap-[32px] shrink-0">
-      <a href="#" class="hover:text-text-primary transition-colors">Features</a>
+      <a href="#" class="font-semibold text-[14px] text-[#f28a4b] tracking-[-0.09px] whitespace-nowrap leading-normal">Home</a>
-      <a href="#" class="hover:text-text-primary transition-colors">Product</a>
+      <a href="#features" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Features</a>
-      <a href="#" class="hover:text-text-primary transition-colors">Privacy</a>
+      <a href="#experience" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Experience</a>
-      <a href="#" class="hover:text-text-primary transition-colors">About</a>
+      <a href="#use-cases" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Use Cases</a>
+      <a href="#reliability" class="font-semibold text-[14px] text-[#7a726d] tracking-[-0.09px] whitespace-nowrap leading-normal hover:text-[#f28a4b] transition-colors">Reliability</a>
     </nav>
 
-    <div class="flex-1 flex justify-end">
+    <!-- Actions -->
-      <button class="bg-brand text-white font-bold text-[14px] px-[22px] py-[13px] rounded-[17px] hover:opacity-90 transition-opacity">
+    <div class="flex flex-1 gap-[12px] items-center justify-end min-w-0">
-        Download
+      <button class="border border-[rgba(46,42,40,0.3)] flex gap-[8px] h-[43px] items-center justify-center pl-[12px] pr-[16px] rounded-[17px] shrink-0 hover:border-[#f28a4b] transition-colors">
+        <img alt="Language" class="block size-[26px] object-contain" src={globeIcon} />
+        <span class="font-semibold text-[14px] text-[#2e2a28] tracking-[-0.09px] whitespace-nowrap leading-[14px]">EN</span>
       </button>
+      <a href="#download" class="bg-[#f28a4b] flex items-center justify-center px-[22px] py-[13px] rounded-[17px] shrink-0 hover:bg-[#e07a3b] transition-colors">
+        <span class="font-bold text-[14px] text-white leading-normal whitespace-nowrap">Download</span>
+      </a>
     </div>
   </div>
 </header>
-<div class="h-[78px]"></div>

src/components/Hero.astro

@@ -1,82 +1,58 @@
 ---
-const floatCards = [
+const heroBg = "/assets/hero-bg.png";
-  {
+const phoneMockup = "/assets/hero-phone.png";
-    icon: '☷',
-    title: 'Work / Private / Protected',
-    desc: 'One account, multiple communication worlds.',
-    pos: 'left-[-40px] top-[75.5px]',
-  },
-  {
-    icon: '✦',
-    title: 'AI Summary Ready',
-    desc: 'Long conversations and group highlights organized automatically.',
-    pos: 'left-[180px] top-[270px]',
-  },
-  {
-    icon: '◌',
-    title: 'Protected Hidden Space',
-    desc: 'When privacy needs more, enter a protected space.',
-    pos: 'left-[20px] top-[540px]',
-  },
-]
 ---
 
-<section class="relative w-full overflow-hidden">
+<section class="relative w-full flex items-start justify-center h-[891px] overflow-hidden">
-  <img src="/assets/hero-bg.png" alt="" class="absolute inset-0 w-full h-full object-cover pointer-events-none" aria-hidden="true" />
+  <img alt="" class="absolute inset-0 max-w-none object-cover size-full pointer-events-none" src={heroBg} />
 
-  <div class="relative flex items-center gap-[70px] h-[683px] px-[130px] py-[80px] max-w-[1440px] mx-auto">
+  <div class="relative flex gap-[40px] items-start w-[1280px] h-full">
-    <!-- Left column -->
+    <!-- Phone mockup -->
-    <div class="flex flex-col gap-[30px] items-start w-[600px] shrink-0">
+    <div class="flex flex-1 items-center min-w-0 pt-[60px] h-full">
-      <div class="flex flex-col gap-6">
+      <div class="relative w-full" style="aspect-ratio: 673/1108;">
-        <div class="bg-[rgba(255,255,255,0.62)] border border-white px-[14px] py-[9px] rounded-full w-fit">
+        <div class="absolute inset-0 overflow-hidden pointer-events-none">
-          <p class="font-bold text-text-secondary text-[14px] tracking-[-0.09px] whitespace-pre">✦  Available on iOS and Android</p>
+          <img alt="TalkPro app on iPhone" class="absolute h-[114.36%] left-[-2.67%] max-w-none top-[-7.18%] w-[105.35%]" src={phoneMockup} />
+        </div>
+      </div>
     </div>
 
-        <div class="font-bold text-text-primary text-[72px] tracking-[-1.61px] leading-[0.96] w-[560px]">
+    <!-- Hero copy -->
-          <p>One User.</p>
+    <div class="flex flex-col gap-[60px] h-full items-start justify-center overflow-clip shrink-0 w-[660px]">
-          <p>Multiple Worlds.</p>
+      <!-- Pill -->
+      <div class="bg-white border border-[#f08458] flex items-center overflow-clip px-[16px] py-[12px] rounded-[999px] shrink-0">
+        <p class="font-bold text-[#0d0d0d] text-[14px] tracking-[-0.09px] leading-normal">✦&nbsp; Available on iOS and Android</p>
       </div>
 
-        <p class="text-text-secondary text-[20px] font-normal leading-[1.5] tracking-[-0.33px]">
+      <div class="flex flex-col gap-[24px] items-start shrink-0 w-full">
+        <div class="font-bold text-[#2e2a28] text-[72px] tracking-[-1.61px] w-full">
+          <p class="leading-[1.1] mb-0">A Modern Way to</p>
+          <p class="leading-[1.1]">Stay Connected</p>
+        </div>
+        <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
           TalkPro is a modern messaging app designed for clear, simple, and reliable communication. From private chats to group conversations, channels, voice calls, and video calls, TalkPro helps people stay connected in one familiar experience.
         </p>
-      </div>
+        <div class="flex gap-[14px] items-center overflow-clip shrink-0">
-
+          <a href="#download" class="bg-[#f28a4b] flex items-center justify-center overflow-clip px-[24px] py-[14px] rounded-[17px] shrink-0 hover:bg-[#e07a3b] transition-colors">
-      <div class="flex items-center gap-[14px]">
+            <span class="font-bold text-white text-[15px] tracking-[-0.13px] leading-normal">Download TalkPro  ↓</span>
-        <button class="bg-brand text-white font-bold text-[15px] px-6 py-[14px] rounded-[17px] tracking-[-0.13px] hover:opacity-90 transition-opacity whitespace-pre">
+          </a>
-          Download Talk Pro  ↓
+          <a href="#features" class="bg-[rgba(255,255,255,0.55)] border border-[#e3d9d1] flex items-center justify-center overflow-clip px-[24px] py-[14px] rounded-[17px] shrink-0 hover:bg-white transition-colors">
-        </button>
+            <span class="font-bold text-[#2e2a28] text-[15px] tracking-[-0.13px] leading-normal">Explore Features  →</span>
-        <button class="bg-[rgba(255,255,255,0.55)] border border-border-light text-text-primary font-bold text-[15px] px-6 py-[14px] rounded-[17px] tracking-[-0.13px] hover:bg-white transition-colors whitespace-pre">
+          </a>
-          Explore Features  →
-        </button>
-      </div>
-
-      <div class="flex items-center gap-[10px]">
-        {['Identity Layer', 'AI Native Messaging', 'Adaptive Privacy'].map((tag) => (
-          <div class="bg-[rgba(255,255,255,0.68)] border border-white px-[14px] py-[9px] rounded-full">
-            <p class="font-bold text-text-secondary text-[14px] tracking-[-0.09px] whitespace-nowrap">{tag}</p>
-          </div>
-        ))}
         </div>
       </div>
 
-    <!-- Phone mockup -->
+      <!-- Tags -->
-    <div class="relative h-[690px] w-[430px] shrink-0">
+      <div class="flex gap-[10px] items-center overflow-clip shrink-0">
-      <div class="absolute bg-text-primary h-[620px] left-[63px] rounded-[44px] top-[35px] w-[304px] overflow-hidden">
+        <div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
-        <img src="/assets/hero-phone.png" alt="Talk Pro app" class="absolute left-3 top-3 w-[280px] h-[596px] rounded-[34px] object-cover" />
+          <span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">Identity Layer</span>
         </div>
-
+        <div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
-      {floatCards.map((card) => (
+          <span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">AI Native Messaging</span>
-        <div class={`absolute ${card.pos} flex items-start gap-3 bg-[rgba(255,255,255,0.86)] border border-white backdrop-blur-[3.7px] rounded-[24px] pl-4 pr-[18px] py-4`}>
-          <div class="bg-[#fff0e5] rounded-[14px] size-[38px] flex items-center justify-center shrink-0">
-            <span class="text-brand font-bold text-[18px]">{card.icon}</span>
         </div>
-          <div class="flex flex-col gap-1">
+        <div class="bg-[rgba(255,255,255,0.68)] border border-white flex items-center overflow-clip px-[14px] py-[9px] rounded-[999px] shrink-0">
-            <p class="font-bold text-text-primary text-[14px] tracking-[-0.09px] whitespace-nowrap">{card.title}</p>
+          <span class="font-bold text-[#7a726d] text-[14px] tracking-[-0.09px] whitespace-nowrap leading-normal">Adaptive Privacy</span>
-            <p class="text-text-secondary text-[12px] font-normal leading-[1.45] tracking-[0.01px] w-[185px]">{card.desc}</p>
         </div>
       </div>
-      ))}
     </div>
   </div>
 </section>

src/components/Trust.astro

@@ -0,0 +1,96 @@
+---
+---
+
+<section id="reliability" class="bg-white w-full flex flex-col items-center justify-center p-[120px]">
+  <div class="flex flex-col gap-[40px] items-start w-[1280px]">
+
+    <!-- Header -->
+    <div class="flex flex-col gap-[24px] items-start overflow-clip w-full">
+      <div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
+        <span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">RELIABILITY</span>
+      </div>
+      <p class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] leading-[1.2] w-full">Built with User Trust in Mind</p>
+      <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
+        TalkPro is designed with a privacy-conscious approach and a focus on dependable communication. The app keeps the user experience simple while supporting the core communication features people expect from a modern messaging platform.
+      </p>
+    </div>
+
+    <!-- 4-column feature row -->
+    <div class="flex gap-[24px] items-center justify-center w-full">
+
+      <!-- Card 1: Privacy-Conscious Design -->
+      <div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
+        <div class="relative shrink-0 size-[128px]">
+          <div class="absolute inset-0 overflow-hidden pointer-events-none">
+            <img alt="" class="absolute h-[174.55%] left-[-31.48%] max-w-none top-[7.04%] w-[312.73%]" src="/assets/trust-icon-sprite.png" />
+          </div>
+        </div>
+        <div class="flex flex-col gap-[8px] items-start w-full">
+          <p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Privacy-Conscious Design</p>
+          <p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">Built with careful consideration for user communication and data handling.</p>
+        </div>
+      </div>
+
+      <!-- Divider -->
+      <div class="relative h-[118px] shrink-0 w-0">
+        <div class="absolute inset-[0_-0.5px]">
+          <img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
+        </div>
+      </div>
+
+      <!-- Card 2: Minimal and Focused -->
+      <div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
+        <div class="relative shrink-0 size-[128px]">
+          <div class="absolute inset-0 overflow-hidden pointer-events-none">
+            <img alt="" class="absolute h-[187.32%] left-[-164.72%] max-w-none top-[3.1%] w-[335.61%]" src="/assets/trust-icon-sprite.png" />
+          </div>
+        </div>
+        <div class="flex flex-col gap-[8px] items-start w-full">
+          <p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Minimal and Focused</p>
+          <p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">Designed around essential messaging features without unnecessary complexity.</p>
+        </div>
+      </div>
+
+      <!-- Divider -->
+      <div class="relative h-[118px] shrink-0 w-0">
+        <div class="absolute inset-[0_-0.5px]">
+          <img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
+        </div>
+      </div>
+
+      <!-- Card 3: Reliable Experience -->
+      <div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
+        <div class="relative shrink-0 size-[128px]">
+          <div class="absolute inset-0 overflow-hidden pointer-events-none">
+            <img alt="" class="absolute h-[211.46%] left-[-187.93%] max-w-none top-[-105.62%] w-[378.86%]" src="/assets/trust-icon-sprite.png" />
+          </div>
+        </div>
+        <div class="flex flex-col gap-[8px] items-start w-full">
+          <p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Reliable Experience</p>
+          <p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">Focused on providing a stable and familiar communication experience.</p>
+        </div>
+      </div>
+
+      <!-- Divider -->
+      <div class="relative h-[118px] shrink-0 w-0">
+        <div class="absolute inset-[0_-0.5px]">
+          <img alt="" class="block max-w-none size-full" src="/assets/trust-divider.svg" />
+        </div>
+      </div>
+
+      <!-- Card 4: Continuous Improvement -->
+      <div class="flex flex-1 flex-col gap-[16px] items-center justify-end min-w-0 p-[24px] rounded-[30px]">
+        <div class="relative shrink-0 size-[128px]">
+          <div class="absolute inset-0 overflow-hidden pointer-events-none">
+            <img alt="" class="absolute left-[4.14%] max-w-none size-full top-0" src="/assets/trust-icon-improvement.png" />
+          </div>
+        </div>
+        <div class="flex flex-col gap-[8px] items-start w-full">
+          <p class="font-semibold text-[#0d0d0d] text-[16px] leading-[22px] w-full">Continuous Improvement</p>
+          <p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] w-full">TalkPro will continue to improve its interface, features, and overall user experience.</p>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</section>

src/components/UseCases.astro

@@ -1,31 +1,39 @@
 ---
-const cases = [
+const rows = [
-  { title: 'Work Identity',    desc: 'Keep work communication clear, organized, and easier to review.' },
+  { title: 'Personal Conversations', desc: 'Message friends, family, and close contacts in a simple private chat experience.' },
-  { title: 'Private Identity', desc: 'Keep personal conversations natural, focused, and separate from work noise.' },
+  { title: 'Communities',            desc: 'Join group conversations and stay active in shared interest spaces.' },
-  { title: 'Protected Space',  desc: 'Some conversations are not only private. They require stronger boundaries and another layer of protection.' },
+  { title: 'Teams and Projects',     desc: 'Coordinate discussions, updates, and quick decisions in group chats.' },
+  { title: 'News and Updates',       desc: 'Follow channels for announcements, information, and community content.' },
 ]
 ---
 
-<section class="flex flex-col items-center bg-surface px-[130px] py-[110px] w-full">
+<section id="use-cases" class="bg-[#fef0eb] w-full flex items-start justify-center px-[130px] py-[120px]">
-  <div class="flex flex-col items-center pb-[60px] max-w-[1180px] w-full">
+  <div class="flex gap-[40px] items-center w-[1280px]">
-    <p class="font-bold text-brand text-[13px] tracking-[2.86px]">USE CASES</p>
+    <!-- Left: heading -->
-    <div class="h-[15px]"></div>
+    <div class="flex flex-col gap-[24px] items-start overflow-clip shrink-0 w-[540px]">
-    <p class="font-bold text-text-primary text-[52px] text-center tracking-[-2.6px] leading-[1.04]">
+      <div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
-      Designed for the worlds you already live in.
+        <span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">USE CASES</span>
+      </div>
+      <p class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] leading-[1.2] w-full">
+        Made for Personal, Social, and Community Communication
       </p>
-    <div class="h-5"></div>
+      <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
-    <p class="text-text-secondary text-[18px] font-normal leading-[1.75] text-center max-w-[900px]">
+        With separate spaces for every context, TalkPro keeps your personal, social, and professional communications distinct and organized.
-      Work, private life, and protected conversations should not interfere with each other inside one identity.
       </p>
     </div>
 
-  <div class="flex gap-[22px]">
+    <!-- Right: rows -->
-    {cases.map((c) => (
+    <div class="flex flex-1 flex-col items-start min-w-0 overflow-clip rounded-[30px] gap-px">
-      <div class="bg-[rgba(255,255,255,0.78)] border border-white rounded-[30px] p-8 h-[245px] w-[378px] flex flex-col">
+      {rows.map(row => (
-        <p class="font-bold text-text-primary text-[25px] tracking-[-0.75px]">{c.title}</p>
+        <div class="bg-[#faede8] flex h-[120px] items-center overflow-clip w-full shrink-0">
-        <div class="h-4"></div>
+          <div class="bg-[#f08458] flex h-full items-center px-[36px] py-[24px] shrink-0 w-[300px]">
-        <p class="text-text-secondary text-[15px] font-normal leading-[1.72]">{c.desc}</p>
+            <p class="flex-1 font-semibold text-[20px] text-white tracking-[-0.6px] leading-normal min-w-0">{row.title}</p>
+          </div>
+          <div class="bg-white flex flex-1 h-full items-center min-w-0 px-[36px] py-[24px]">
+            <p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] flex-1 min-w-0">{row.desc}</p>
+          </div>
         </div>
       ))}
     </div>
+  </div>
 </section>

src/components/WhyTalkPro.astro

@@ -0,0 +1,89 @@
+---
+const underline    = "/assets/why-underline.svg";
+const iconSimple   = "/assets/why-icon-simple.svg";
+const iconFamiliar = "/assets/why-icon-familiar.svg";
+const iconConn     = "/assets/why-icon-connected.svg";
+const iconModern   = "/assets/why-icon-modern.svg";
+---
+
+<section class="bg-white w-full flex flex-col items-center justify-center py-[120px]">
+  <div class="flex flex-col gap-[40px] items-start w-[1280px]">
+
+    <!-- Header row -->
+    <div class="flex gap-[36px] items-start overflow-clip w-full">
+      <!-- Left: pill + heading + description -->
+      <div class="flex flex-1 flex-col gap-[36px] items-start min-w-0">
+        <div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
+          <span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">WHY TALKPRO</span>
+        </div>
+        <div class="flex flex-col gap-[24px] items-start w-full">
+          <div class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] w-full">
+            <p class="leading-[1.2] mb-0">Designed for the Way</p>
+            <p class="leading-[1.2]">People Communicate Today</p>
+          </div>
+          <!-- Underline decoration -->
+          <div class="relative h-0 w-[295.5px] shrink-0">
+            <div class="absolute inset-[-0.5px_0]">
+              <img alt="" class="block max-w-none size-full" src={underline} />
+            </div>
+          </div>
+          <p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
+            Communication today happens across personal conversations, communities, work groups, and content channels. TalkPro brings these essential communication experiences together in a simple and familiar interface, making it easier for users to connect, share, and stay updated.
+          </p>
+        </div>
+      </div>
+
+      <!-- Right: illustration -->
+      <div class="relative shrink-0 size-[480px]">
+        <img alt="People communicating with TalkPro" class="absolute inset-0 size-full object-contain" src="/assets/why-illustration.png" />
+      </div>
+    </div>
+
+    <!-- 2×2 card grid -->
+    <div class="flex flex-col gap-[24px] items-start overflow-clip w-full">
+      <!-- Row 1 -->
+      <div class="flex gap-[24px] items-center w-full">
+        <div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
+          <div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
+            <img alt="" class="block size-[44px]" src={iconSimple} />
+          </div>
+          <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
+            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Simple</p>
+            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">An easy-to-use experience designed for everyday communication.</p>
+          </div>
+        </div>
+        <div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
+          <div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
+            <img alt="" class="block" style="width:38px;height:40px;" src={iconFamiliar} />
+          </div>
+          <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
+            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Familiar</p>
+            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A messaging structure that feels natural from the first use.</p>
+          </div>
+        </div>
+      </div>
+      <!-- Row 2 -->
+      <div class="flex gap-[24px] items-center w-full">
+        <div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
+          <div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
+            <img alt="" class="block size-[44px]" src={iconConn} />
+          </div>
+          <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
+            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Connected</p>
+            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">Private chats, groups, channels, voice, and video in one app.</p>
+          </div>
+        </div>
+        <div class="bg-[#fef0eb] border border-[#e8e4de] flex flex-1 gap-[24px] h-[152px] items-center min-w-0 overflow-clip p-[36px] rounded-[30px]">
+          <div class="bg-[#f08458] aspect-square h-full flex items-center justify-center overflow-clip rounded-[9999px] shrink-0">
+            <img alt="" class="block" style="width:24px;height:44px;" src={iconModern} />
+          </div>
+          <div class="flex flex-1 flex-col gap-[12px] items-start min-w-0 overflow-clip">
+            <p class="font-semibold text-[#0d0d0d] text-[24px] tracking-[-0.47px] leading-[20px] w-full">Modern</p>
+            <p class="font-medium text-[#7a726d] text-[16px] tracking-[-0.18px] leading-[1.5] w-full">A refined interface with clean visuals and smooth interaction.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</section>

src/pages/index.astro

@@ -2,8 +2,12 @@
 import Base from '../layouts/Base.astro'
 import Header from '../components/Header.astro'
 import Hero from '../components/Hero.astro'
+import WhyTalkPro from '../components/WhyTalkPro.astro'
 import CoreSystem from '../components/CoreSystem.astro'
+import Experience from '../components/Experience.astro'
 import UseCases from '../components/UseCases.astro'
+import Trust from '../components/Trust.astro'
+import AppPreview from '../components/AppPreview.astro'
 import DownloadCTA from '../components/DownloadCTA.astro'
 import Footer from '../components/Footer.astro'
 ---
@@ -11,8 +15,12 @@ import Footer from '../components/Footer.astro'
 <Base>
   <Header />
   <Hero />
+  <WhyTalkPro />
   <CoreSystem />
+  <Experience />
   <UseCases />
+  <Trust />
+  <AppPreview />
   <DownloadCTA />
   <Footer />
 </Base>