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>

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>