feat: add landing page Features, How It Works, and CTA sections

- HowItWorksSection: 3-step staggered timeline with gradient circles
- FeaturesGridSection: 6-card responsive grid (DarkWatch, VoicePrint, SpamShield, HomeTitle, RemoveBrokers, Family Plans)
- ForUsersSection: Split panel for Individuals and Families with checkmark lists
- WhyShieldAISection: 3 value prop cards (Proactive, AI-Powered, Privacy First)
- CTABannerSection: Final CTA with Create Account and Sign In buttons
- Updated routes/index.tsx with clip-path polygon transitions between sections
- Added 49 unit tests for all new sections

web/src/routes/index.tsx

@@ -1,15 +1,62 @@
 import { Title } from "@solidjs/meta";
-import { ColorWaveBackground, HeroSection } from "~/components/landing";
+import {
+  ColorWaveBackground,
+  HeroSection,
+  HowItWorksSection,
+  FeaturesGridSection,
+  ForUsersSection,
+  WhyShieldAISection,
+  CTABannerSection,
+} from "~/components/landing";
+
+const cut = "clamp(16px, 2.5vw, 40px)";
 
 export default function Home() {
   return (
-    <main class="relative min-h-[calc(100vh-4rem)] overflow-hidden">
+    <main class="relative overflow-hidden">
       <Title>ShieldAI — AI-Powered Identity Protection</Title>
-      <div class="absolute inset-0 z-0">
-        <ColorWaveBackground />
+
+      <div class="relative">
+        <ColorWaveBackground yOffset={-0.1} scale={0.65} speed={0.5} />
+        <div class="relative z-10">
+          <HeroSection />
+        </div>
       </div>
-      <div class="relative z-10">
-        <HeroSection />
+
+      <div
+        style={{
+          "clip-path": `polygon(0 var(--cut, ${cut}), 100% 0, 100% 100%, 0 100%)`,
+        }}
+      >
+        <HowItWorksSection />
+      </div>
+
+      <div
+        style={{
+          "clip-path": `polygon(0 0, 100% 0, 100% calc(100% - var(--cut, ${cut})), 0 100%)`,
+        }}
+      >
+        <FeaturesGridSection />
+      </div>
+
+      <div
+        style={{
+          "clip-path": `polygon(0 var(--cut, ${cut}), 100% 0, 100% 100%, 0 100%)`,
+        }}
+      >
+        <ForUsersSection />
+      </div>
+
+      <div
+        style={{
+          "clip-path": `polygon(0 0, 100% 0, 100% calc(100% - var(--cut, ${cut})), 0 100%)`,
+        }}
+      >
+        <WhyShieldAISection />
+      </div>
+
+      <div>
+        <CTABannerSection />
       </div>
     </main>
   );