[Landing] `AboutSection` + `HowItWorks` — implement remaining above-fold landing sections

[basanth-p]

Parent Epic

Part of #124 — Landing Page Polish, CTA/Form/Event Tracked Flows & Backend Integration Gaps

Depends on: #97 (HeroSection) being merged. Design tokens from #95 must be available.

---

🎯 Objective

Implement the AboutSection ("What is func(kode)?") and HowItWorks sections of the landing page, matching the Figma design. These are the two sections directly below the Hero and are the highest-priority content sections for communicating value to new visitors.

---

🛠️ Scope

components/landing/about-section.tsx

• Section ID: id="func-kode" (anchored by Navbar link /#func-kode)
• Heading: matches Figma copy — use landing-display or landing-hero token from [Landing] Design tokens — Tailwind config extensions for landing page typography & spacing #95
• Body copy: 2–3 paragraphs describing what func(kode) is and who it’s for
• Optional: illustrative visual or decorative element matching LandingBackground aesthetic (grain texture / subtle gradient — no decorative blobs or icon circles)
• Section uses --space-* tokens for all padding — no arbitrary pixel values
• aria-labelledby pointing to the section heading

components/landing/how-it-works-section.tsx

• Section ID: id="how-it-works" (anchored by Navbar link /#how-it-works)
• Heading matches Figma
• Steps or feature blocks: implement as described in Figma — do NOT use the 3-column icon-in-circle grid pattern (AI aesthetic anti-pattern); use numbered steps, a timeline layout, or an asymmetric feature layout
• Step descriptions use --text-base (16px) body copy
• CTA at section bottom (if present in Figma): wired to correct destination
• aria-labelledby on section

app/page.tsx wiring

• Both sections imported and rendered in correct order: HeroSection → AboutSection → HowItWorksSection
• Page remains a server component (no "use client" at root)
• No min-h-[4727px] or hardcoded canvas heights

Responsive QA

• 375px: sections stack cleanly, headings readable, no overflow
• 768px: layout correct
• 1024px+: desktop layout matches Figma
• 1440px: pixel-level match to Figma reference

---

🚨 Design Rules (non-negotiable)

• Use design tokens from #95 for ALL font sizes, spacing, and colours
• No hardcoded hex colours or pixel sizes outside of design tokens
• No icon-in-coloured-circle decoration for step/feature items
• No centered text for body copy (left-align body — only headings can center)
• Section anchor IDs must match exactly the href values in NAV_ITEMS in components/navbar.tsx

---

✅ Acceptance Criteria

• AboutSection renders at all 5 breakpoints with correct copy and layout
• HowItWorksSection renders at all 5 breakpoints
• Navbar anchor links /#func-kode and /#how-it-works scroll to the correct sections
• IntersectionObserver in [analytics] Instrument landing page — pageview, CTA clicks, section visibility, announcement popup #111 can detect these sections (correct id attributes)
• npm run build passes, no type errors
• Screenshots at 375px and 1440px attached to the PR