feat: add Use Cases section

src/components/UseCases.astro

@@ -0,0 +1,31 @@
+---
+const cases = [
+  { title: 'Work Identity',    desc: 'Keep work communication clear, organized, and easier to review.' },
+  { title: 'Private Identity', desc: 'Keep personal conversations natural, focused, and separate from work noise.' },
+  { title: 'Protected Space',  desc: 'Some conversations are not only private. They require stronger boundaries and another layer of protection.' },
+]
+---
+
+<section class="flex flex-col items-center bg-surface px-[130px] py-[110px] w-full">
+  <div class="flex flex-col items-center pb-[60px] max-w-[1180px] w-full">
+    <p class="font-bold text-brand text-[13px] tracking-[2.86px]">USE CASES</p>
+    <div class="h-[15px]"></div>
+    <p class="font-bold text-text-primary text-[52px] text-center tracking-[-2.6px] leading-[1.04]">
+      Designed for the worlds you already live in.
+    </p>
+    <div class="h-5"></div>
+    <p class="text-text-secondary text-[18px] font-normal leading-[1.75] text-center max-w-[900px]">
+      Work, private life, and protected conversations should not interfere with each other inside one identity.
+    </p>
+  </div>
+
+  <div class="flex gap-[22px]">
+    {cases.map((c) => (
+      <div class="bg-[rgba(255,255,255,0.78)] border border-white rounded-[30px] p-8 h-[245px] w-[378px] flex flex-col">
+        <p class="font-bold text-text-primary text-[25px] tracking-[-0.75px]">{c.title}</p>
+        <div class="h-4"></div>
+        <p class="text-text-secondary text-[15px] font-normal leading-[1.72]">{c.desc}</p>
+      </div>
+    ))}
+  </div>
+</section>

src/pages/index.astro

@@ -3,10 +3,12 @@ import Base from '../layouts/Base.astro'
 import Header from '../components/Header.astro'
 import Hero from '../components/Hero.astro'
 import CoreSystem from '../components/CoreSystem.astro'
+import UseCases from '../components/UseCases.astro'
 ---
 
 <Base>
   <Header />
   <Hero />
   <CoreSystem />
+  <UseCases />
 </Base>