From 316dbe3c78276cfa8260928e64755dbf9fb758e5 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Tue, 12 May 2026 16:28:30 +0800
Subject: [PATCH] feat: add Header component

---
 src/components/Header.astro | 28 ++++++++++++++++++++++++++++
 src/pages/index.astro       |  3 ++-
 2 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Header.astro

diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..911e4d4
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,28 @@
+---
+---
+
+<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">
+  <div class="w-[1280px] flex items-center">
+    <div class="flex-1">
+      <a href="/" class="flex items-center gap-2 w-fit">
+        <img src="/assets/logo-icon.png" alt="Talk Pro icon" class="h-[42px] w-[53px] object-cover" />
+        <img src="/assets/logo-wordmark.png" alt="Talk Pro" class="h-6" />
+      </a>
+    </div>
+
+    <nav class="flex items-center gap-7 font-bold text-[14px] text-text-secondary tracking-[-0.09px]">
+      <a href="#" class="hover:text-text-primary transition-colors">Home</a>
+      <a href="#" class="hover:text-text-primary transition-colors">Features</a>
+      <a href="#" class="hover:text-text-primary transition-colors">Product</a>
+      <a href="#" class="hover:text-text-primary transition-colors">Privacy</a>
+      <a href="#" class="hover:text-text-primary transition-colors">About</a>
+    </nav>
+
+    <div class="flex-1 flex justify-end">
+      <button class="bg-brand text-white font-bold text-[14px] px-[22px] py-[13px] rounded-[17px] hover:opacity-90 transition-opacity">
+        Download
+      </button>
+    </div>
+  </div>
+</header>
+<div class="h-[78px]"></div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 673e65a..97c715a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,8 @@
 ---
 import Base from '../layouts/Base.astro'
+import Header from '../components/Header.astro'
 ---
 
 <Base>
-  <p class="text-text-primary text-4xl font-bold p-8">Talk Pro — scaffold works</p>
+  <Header />
 </Base>