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/UseCases.astro

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