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

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">