From 1e81796aeeccee5a5a44b2e030c074ab2105035f Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Tue, 12 May 2026 16:32:14 +0800
Subject: [PATCH] feat: add Core System section

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

diff --git a/src/components/CoreSystem.astro b/src/components/CoreSystem.astro
new file mode 100644
index 0000000..ac911f1
--- /dev/null
+++ b/src/components/CoreSystem.astro
@@ -0,0 +1,44 @@
+---
+const cards = [
+  { img: '/assets/icon-messaging.png', title: 'Private Messaging', desc: 'Stay connected through fast and familiar one-on-one conversations.' },
+  { img: '/assets/icon-groups.png',    title: 'Group Chats',       desc: 'Create spaces for friends, teams, communities, and shared discussions.' },
+  { img: '/assets/icon-channels.png',  title: 'Channels',          desc: 'Follow updates, announcements, and content from the people or communities you care about.' },
+  { img: '/assets/icon-voice.png',     title: 'Voice Calls',       desc: 'Talk in real time whenever messages are not enough.' },
+  { img: '/assets/icon-video.png',     title: 'Video Calls',       desc: 'Connect face-to-face with a simple and reliable video call experience.' },
+  { img: '/assets/icon-media.png',     title: 'Media Sharing',     desc: 'Share photos, videos, files, and updates in your conversations.' },
+]
+const rows = [cards.slice(0, 3), cards.slice(3)]
+---
+
+<section class="flex flex-col items-center px-[130px] py-[110px] max-w-[1440px] mx-auto">
+  <div class="flex flex-col items-center pb-[60px] w-full">
+    <p class="font-bold text-brand text-[13px] tracking-[-0.04px]">CORE SYSTEM</p>
+    <div class="h-[15px]"></div>
+    <div class="font-bold text-text-primary text-[52px] text-center tracking-[-1.16px] leading-[0.96]">
+      <p>Built for how modern</p>
+      <p>communication actually works.</p>
+    </div>
+    <div class="h-5"></div>
+    <p class="text-text-secondary text-[18px] font-normal leading-[1.5] text-center tracking-[-0.26px] max-w-[900px]">
+      Different identities, different conversations, and different privacy levels should not be forced into one flat interface. Talk Pro lets them exist in order inside one platform.
+    </p>
+  </div>
+
+  <div class="flex flex-col gap-[22px] w-[1280px]">
+    {rows.map((row) => (
+      <div class="flex gap-[22px]">
+        {row.map((card) => (
+          <div class="flex-1 flex flex-col items-center bg-[rgba(255,255,255,0.78)] border border-white rounded-[30px] p-8">
+            <div class="size-[240px] shrink-0 overflow-hidden rounded-2xl">
+              <img src={card.img} alt={card.title} class="w-full h-full object-cover" />
+            </div>
+            <div class="h-[22px]"></div>
+            <p class="font-bold text-text-primary text-[25px] tracking-[-0.5px] w-full">{card.title}</p>
+            <div class="h-[14px]"></div>
+            <p class="text-text-secondary text-[15px] font-normal leading-[1.5] tracking-[-0.13px] w-full">{card.desc}</p>
+          </div>
+        ))}
+      </div>
+    ))}
+  </div>
+</section>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 56cf065..0871c23 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -2,9 +2,11 @@
 import Base from '../layouts/Base.astro'
 import Header from '../components/Header.astro'
 import Hero from '../components/Hero.astro'
+import CoreSystem from '../components/CoreSystem.astro'
 ---
 
 <Base>
   <Header />
   <Hero />
+  <CoreSystem />
 </Base>