feat: Add Typewriter animation to hero headline

- Wrap hero headline in Typewriter with 50cps speed, 400ms delay
- Preserves gradient text effect on 'Identity Protection' span
- Update README task 03 to list Typewriter as a UI primitive

tasks/shieldai-unified-restructure/README.md

@@ -7,10 +7,10 @@ Status legend: [ ] todo, [~] in-progress, [x] done
 Tasks
 - [x] 01 — Project Foundation — Root Config & Directory Cleanup → `01-project-foundation-cleanup.md`
 - [x] 02 — Theme System — Auto-Shifting CSS with ShieldAI Brand Palette → `02-theme-system-brand-palette.md`
-- [x] 03 — UI Primitive Library — Button, Card, Input, Badge, Modal, Toast → `03-ui-primitive-library.md`
-- [ ] 04 — Layout Components — Navbar, Footer, PageContainer, AppShell → `04-layout-components.md`
-- [ ] 05 — Landing Page — Hero Section with Animated Background → `05-landing-page-hero.md`
-- [ ] 06 — Landing Page — Features, How It Works, CTA Sections → `06-landing-page-features.md`
+- [x] 03 — UI Primitive Library — Button, Card, Input, Badge, Modal, Toast, Typewriter → `03-ui-primitive-library.md`
+- [x] 04 — Layout Components — Navbar, Footer, PageContainer, AppShell → `04-layout-components.md`
+- [x] 05 — Landing Page — Hero Section with Animated Background → `05-landing-page-hero.md`
+- [x] 06 — Landing Page — Features, How It Works, CTA Sections → `06-landing-page-features.md`
 - [ ] 07 — Auth Pages — Login, Signup, Password Reset, Onboarding → `07-auth-pages.md`
 - [ ] 08 — Migrate & Redesign Existing Pages — Blog, Ads, Dashboard Shell → `08-migrate-existing-pages.md`
 - [ ] 09 — Database — Migrate Full Prisma Schema to Drizzle ORM → `09-drizzle-schema-migration.md`

web/src/components/landing/HeroSection.tsx

@@ -2,6 +2,7 @@ import { onMount } from "solid-js";
 import { A } from "@solidjs/router";
 import { cn } from "~/lib/utils";
 import { Button } from "~/components/ui";
+import { Typewriter } from "~/components/ui/Typewriter";
 import PageContainer from "~/components/layout/PageContainer";
 
 function ShieldIcon() {
@@ -51,10 +52,12 @@ export default function HeroSection(props: HeroSectionProps) {
           </div>
 
           <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight mb-6 max-w-4xl">
-            <span class="text-[var(--color-text-primary)]">AI-Powered </span>
-            <span class="text-gradient-primary">Identity Protection</span>
-            <br />
-            <span class="text-[var(--color-text-primary)]">for Everyone</span>
+            <Typewriter speed={50} delay={400} keepAlive={false}>
+              <span class="text-[var(--color-text-primary)]">AI-Powered </span>
+              <span class="text-gradient-primary">Identity Protection</span>
+              <br />
+              <span class="text-[var(--color-text-primary)]">for Everyone</span>
+            </Typewriter>
           </h1>
 
           <p class="text-xl md:text-2xl text-[var(--color-text-secondary)] max-w-2xl mb-10 leading-relaxed">