From 14b528f02b74d77f0f003024a7ba79bef67dcbc2 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Tue, 12 May 2026 16:30:36 +0800
Subject: [PATCH] feat: add Hero section

---
 src/components/Hero.astro | 82 +++++++++++++++++++++++++++++++++++++++
 src/pages/index.astro     |  2 +
 2 files changed, 84 insertions(+)
 create mode 100644 src/components/Hero.astro

diff --git a/src/components/Hero.astro b/src/components/Hero.astro
new file mode 100644
index 0000000..694590a
--- /dev/null
+++ b/src/components/Hero.astro
@@ -0,0 +1,82 @@
+---
+const floatCards = [
+  {
+    icon: '☷',
+    title: 'Work / Private / Protected',
+    desc: 'One account, multiple communication worlds.',
+    pos: 'left-[-40px] top-[75.5px]',
+  },
+  {
+    icon: '✦',
+    title: 'AI Summary Ready',
+    desc: 'Long conversations and group highlights organized automatically.',
+    pos: 'left-[180px] top-[270px]',
+  },
+  {
+    icon: '◌',
+    title: 'Protected Hidden Space',
+    desc: 'When privacy needs more, enter a protected space.',
+    pos: 'left-[20px] top-[540px]',
+  },
+]
+---
+
+<section class="relative w-full overflow-hidden">
+  <img src="/assets/hero-bg.png" alt="" class="absolute inset-0 w-full h-full object-cover pointer-events-none" aria-hidden="true" />
+
+  <div class="relative flex items-center gap-[70px] h-[683px] px-[130px] py-[80px] max-w-[1440px] mx-auto">
+    <!-- Left column -->
+    <div class="flex flex-col gap-[30px] items-start w-[600px] shrink-0">
+      <div class="flex flex-col gap-6">
+        <div class="bg-[rgba(255,255,255,0.62)] border border-white px-[14px] py-[9px] rounded-full w-fit">
+          <p class="font-bold text-text-secondary text-[14px] tracking-[-0.09px] whitespace-pre">✦  Available on iOS and Android</p>
+        </div>
+
+        <div class="font-bold text-text-primary text-[72px] tracking-[-1.61px] leading-[0.96] w-[560px]">
+          <p>One User.</p>
+          <p>Multiple Worlds.</p>
+        </div>
+
+        <p class="text-text-secondary text-[20px] font-normal leading-[1.5] tracking-[-0.33px]">
+          Talk Pro is a modern messaging app designed for clear, simple, and reliable communication. From private chats to group conversations, channels, voice calls, and video calls, Talk Pro helps people stay connected in one familiar experience.
+        </p>
+      </div>
+
+      <div class="flex items-center gap-[14px]">
+        <button class="bg-brand text-white font-bold text-[15px] px-6 py-[14px] rounded-[17px] tracking-[-0.13px] hover:opacity-90 transition-opacity whitespace-pre">
+          Download Talk Pro  ↓
+        </button>
+        <button class="bg-[rgba(255,255,255,0.55)] border border-border-light text-text-primary font-bold text-[15px] px-6 py-[14px] rounded-[17px] tracking-[-0.13px] hover:bg-white transition-colors whitespace-pre">
+          Explore Features  →
+        </button>
+      </div>
+
+      <div class="flex items-center gap-[10px]">
+        {['Identity Layer', 'AI Native Messaging', 'Adaptive Privacy'].map((tag) => (
+          <div class="bg-[rgba(255,255,255,0.68)] border border-white px-[14px] py-[9px] rounded-full">
+            <p class="font-bold text-text-secondary text-[14px] tracking-[-0.09px] whitespace-nowrap">{tag}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <!-- Phone mockup -->
+    <div class="relative h-[690px] w-[430px] shrink-0">
+      <div class="absolute bg-text-primary h-[620px] left-[63px] rounded-[44px] top-[35px] w-[304px] overflow-hidden">
+        <img src="/assets/hero-phone.png" alt="Talk Pro app" class="absolute left-3 top-3 w-[280px] h-[596px] rounded-[34px] object-cover" />
+      </div>
+
+      {floatCards.map((card) => (
+        <div class={`absolute ${card.pos} flex items-start gap-3 bg-[rgba(255,255,255,0.86)] border border-white backdrop-blur-[3.7px] rounded-[24px] pl-4 pr-[18px] py-4`}>
+          <div class="bg-[#fff0e5] rounded-[14px] size-[38px] flex items-center justify-center shrink-0">
+            <span class="text-brand font-bold text-[18px]">{card.icon}</span>
+          </div>
+          <div class="flex flex-col gap-1">
+            <p class="font-bold text-text-primary text-[14px] tracking-[-0.09px] whitespace-nowrap">{card.title}</p>
+            <p class="text-text-secondary text-[12px] font-normal leading-[1.45] tracking-[0.01px] w-[185px]">{card.desc}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 97c715a..56cf065 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,8 +1,10 @@
 ---
 import Base from '../layouts/Base.astro'
 import Header from '../components/Header.astro'
+import Hero from '../components/Hero.astro'
 ---
 
 <Base>
   <Header />
+  <Hero />
 </Base>