feat: add Download CTA section

src/components/DownloadCTA.astro

@@ -0,0 +1,40 @@
+---
+---
+
+<section class="flex flex-col items-center bg-surface-alt px-[130px] py-[110px] w-full">
+  <div class="bg-[rgba(255,255,255,0.78)] rounded-[34px] p-[52px] flex flex-col items-center max-w-[1180px] w-full">
+    <p class="font-bold text-brand text-[13px] tracking-[2.86px]">DOWNLOAD</p>
+    <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]">
+      <p>Start with one conversation.</p>
+      <p>Build your own communication space.</p>
+    </div>
+    <div class="h-5"></div>
+    <p class="text-text-secondary text-[18px] font-normal leading-[1.75] text-center max-w-[800px]">
+      Talk Pro supports iOS and Android. Official store links, QR codes, version information, and compatibility notes are reserved on the download page.
+    </p>
+    <div class="h-8"></div>
+
+    <div class="flex gap-2 items-center">
+      <!-- Android badge -->
+      <div class="bg-brand border border-border-light rounded-[20px] flex items-center gap-2 h-[70px] px-4 py-3">
+        <img src="/assets/badge-android-icon.png" alt="Android" class="size-[44px]" />
+        <div class="flex flex-col gap-[3px]">
+          <p class="font-bold text-[#ffd6bc] text-[11px] tracking-[0.66px]">ANDROID</p>
+          <p class="font-bold text-white text-[15px]">Download APK</p>
+        </div>
+      </div>
+
+      <!-- iOS badge -->
+      <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="bg-[#323232] rounded-[12px] size-[44px] flex items-center justify-center">
+          <img src="/assets/badge-ios-icon.png" alt="Apple" class="w-[22px] h-[27px]" />
+        </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>
+</section>

src/pages/index.astro

@@ -4,6 +4,7 @@ import Header from '../components/Header.astro'
 import Hero from '../components/Hero.astro'
 import CoreSystem from '../components/CoreSystem.astro'
 import UseCases from '../components/UseCases.astro'
+import DownloadCTA from '../components/DownloadCTA.astro'
 ---
 
 <Base>
@@ -11,4 +12,5 @@ import UseCases from '../components/UseCases.astro'
   <Hero />
   <CoreSystem />
   <UseCases />
+  <DownloadCTA />
 </Base>