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/components/landing/ForUsersSection.tsx

@@ -0,0 +1,151 @@
+import { For } from "solid-js";
+import type { JSX } from "solid-js";
+import { cn } from "~/lib/utils";
+import Card from "~/components/ui/Card";
+import PageContainer from "~/components/layout/PageContainer";
+
+function CheckIcon() {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="flex-shrink-0"
+    >
+      <path
+        d="M7.5 12L4 8.5L5.1 7.4L7.5 9.8L12.4 4.9L13.5 6L7.5 12Z"
+        fill="var(--color-success)"
+      />
+    </svg>
+  );
+}
+
+function IndividualIcon() {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="w-10 h-10 text-[var(--color-brand-primary)]"
+    >
+      <circle cx="20" cy="14" r="6" fill="currentColor" />
+      <path
+        d="M8 32c0-6.6 5.4-12 12-12s12 5.4 12 12H8z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function FamilyIcon() {
+  return (
+    <svg
+      width="40"
+      height="40"
+      viewBox="0 0 40 40"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      class="w-10 h-10 text-[var(--color-brand-primary)]"
+    >
+      <circle cx="14" cy="12" r="5" fill="currentColor" />
+      <circle cx="26" cy="12" r="4" fill="currentColor" opacity="0.7" />
+      <path
+        d="M2 30c0-5 4-9 9-9 1.5 0 3 .4 4.2 1.1C16.5 21.5 18 21 20 21s3.5.5 4.8 1.1C26 21.4 27.5 21 29 21c5 0 9 4 9 9H2z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+interface PanelProps {
+  title: string;
+  description: string;
+  items: string[];
+  icon: () => JSX.Element;
+}
+
+function Panel(props: PanelProps) {
+  const Icon = props.icon;
+  return (
+    <Card class="h-full">
+      <div class="flex flex-col h-full">
+        <div class="mb-4">
+          <Icon />
+        </div>
+        <h3 class="text-xl font-semibold text-[var(--color-text-primary)] mb-2">
+          {props.title}
+        </h3>
+        <p class="text-[var(--color-text-secondary)] mb-6">
+          {props.description}
+        </p>
+        <ul class="space-y-3 flex-1">
+          <For each={props.items}>
+            {(item) => (
+              <li class="flex items-start gap-2.5">
+                <CheckIcon />
+                <span class="text-[var(--color-text-secondary)] text-sm">
+                  {item}
+                </span>
+              </li>
+            )}
+          </For>
+        </ul>
+      </div>
+    </Card>
+  );
+}
+
+interface ForUsersSectionProps {
+  class?: string;
+}
+
+export default function ForUsersSection(props: ForUsersSectionProps) {
+  return (
+    <section
+      id="for-users"
+      class={cn("py-20 md:py-28 scroll-mt-16", props.class)}
+    >
+      <PageContainer py="py-8">
+        <div class="text-center mb-16">
+          <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-[var(--color-text-primary)] mb-4">
+            For Everyone
+          </h2>
+          <p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
+            Whether you're protecting yourself or your whole family
+          </p>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <Panel
+            title="For Individuals"
+            description="Personal identity protection tailored to your digital footprint."
+            icon={IndividualIcon}
+            items={[
+              "Monitor personal email and phone numbers",
+              "Dark web credential scanning",
+              "Voiceprint clone detection",
+              "Spam and scam call filtering",
+              "Data broker opt-out service",
+            ]}
+          />
+          <Panel
+            title="For Families"
+            description="Group management tools to keep every household member safe."
+            icon={FamilyIcon}
+            items={[
+              "Add unlimited family members",
+              "Shared alert dashboard",
+              "Child account monitoring",
+              "Family-wide dark web scans",
+              "Centralized threat notifications",
+            ]}
+          />
+        </div>
+      </PageContainer>
+    </section>
+  );
+}