From a071a8512190930c593606bd333a033a83d500c5 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Tue, 12 May 2026 16:34:58 +0800
Subject: [PATCH] feat: add Footer component

---
 src/components/Footer.astro | 42 +++++++++++++++++++++++++++++++++++++
 src/pages/index.astro       |  2 ++
 2 files changed, 44 insertions(+)
 create mode 100644 src/components/Footer.astro

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..0686fb3
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,42 @@
+---
+const columns: Record<string, string[]> = {
+  Product: ['Features', 'Product', 'Download'],
+  Privacy: ['Privacy Policy', 'Protected Space', 'Security'],
+  Company: ['About', 'Support', 'Contact'],
+}
+---
+
+<footer class="bg-surface-footer px-[130px] pt-[58px] pb-[30px] w-full">
+  <div class="flex gap-[42px] items-start max-w-[1180px]">
+    <!-- Brand -->
+    <div class="flex flex-col gap-[14px] w-[280px]">
+      <div class="bg-brand rounded-[12px] size-9"></div>
+      <p class="font-bold text-text-primary text-[18px] tracking-[-0.54px]">Talk Pro</p>
+      <div class="text-text-secondary text-[14px] font-normal leading-[1.7]">
+        <p>Designed for modern communication,</p>
+        <p>privacy, and intelligent connection.</p>
+      </div>
+    </div>
+
+    <div class="flex-1"></div>
+
+    {Object.entries(columns).map(([heading, items]) => (
+      <div class="flex flex-col gap-3">
+        <p class="font-bold text-text-primary text-[15px]">{heading}</p>
+        {items.map((item) => (
+          <a href="#" class="text-text-secondary text-[14px] font-normal hover:text-text-primary transition-colors whitespace-nowrap">{item}</a>
+        ))}
+      </div>
+    ))}
+  </div>
+
+  <div class="h-11"></div>
+  <div class="max-w-[1180px] border-t border-border-light"></div>
+  <div class="h-6"></div>
+
+  <div class="flex items-center gap-5 max-w-[1180px]">
+    <p class="text-text-secondary text-[14px] font-normal">© 2026 Talk Pro. All rights reserved.</p>
+    <div class="flex-1"></div>
+    <p class="text-text-secondary text-[14px] font-normal">Terms of Use · Privacy Policy · Support</p>
+  </div>
+</footer>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 504d746..bf5cbb4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,6 +5,7 @@ import Hero from '../components/Hero.astro'
 import CoreSystem from '../components/CoreSystem.astro'
 import UseCases from '../components/UseCases.astro'
 import DownloadCTA from '../components/DownloadCTA.astro'
+import Footer from '../components/Footer.astro'
 ---
 
 <Base>
@@ -13,4 +14,5 @@ import DownloadCTA from '../components/DownloadCTA.astro'
   <CoreSystem />
   <UseCases />
   <DownloadCTA />
+  <Footer />
 </Base>