155 lines
4.1 KiB
TypeScript
155 lines
4.1 KiB
TypeScript
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="M4 9l3 3 7-7"
|
|
stroke="var(--color-success)"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</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>
|
|
);
|
|
}
|