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
This commit is contained in:
41
web/src/components/landing/CTABannerSection.tsx
Normal file
41
web/src/components/landing/CTABannerSection.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { A } from "@solidjs/router";
|
||||
import { cn } from "~/lib/utils";
|
||||
import { Button } from "~/components/ui";
|
||||
import PageContainer from "~/components/layout/PageContainer";
|
||||
|
||||
interface CTABannerSectionProps {
|
||||
class?: string;
|
||||
}
|
||||
|
||||
export default function CTABannerSection(props: CTABannerSectionProps) {
|
||||
return (
|
||||
<section
|
||||
id="cta"
|
||||
class={cn("py-20 md:py-28 scroll-mt-16", props.class)}
|
||||
>
|
||||
<PageContainer py="py-8">
|
||||
<div class="gradient-card border border-[var(--color-border)]/50 rounded-2xl p-10 md:p-16 text-center">
|
||||
<h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-[var(--color-text-primary)] mb-4">
|
||||
Ready to protect your identity?
|
||||
</h2>
|
||||
<p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto mb-10">
|
||||
Join thousands of users who trust ShieldAI to keep their digital
|
||||
identity safe from emerging threats.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<A href="/signup">
|
||||
<Button variant="primary" size="lg">
|
||||
Create Account
|
||||
</Button>
|
||||
</A>
|
||||
<A href="/login">
|
||||
<Button variant="secondary" size="lg">
|
||||
Sign In
|
||||
</Button>
|
||||
</A>
|
||||
</div>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
213
web/src/components/landing/FeaturesGridSection.tsx
Normal file
213
web/src/components/landing/FeaturesGridSection.tsx
Normal file
@@ -0,0 +1,213 @@
|
||||
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";
|
||||
|
||||
interface Feature {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: () => JSX.Element;
|
||||
}
|
||||
|
||||
function DarkWatchIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-[var(--color-brand-primary)]"
|
||||
>
|
||||
<path
|
||||
d="M16 2L4 8v10c0 7.4 5.1 14.1 12 16 6.9-1.9 12-8.6 12-16V8L16 2zm0 2.8L26 9.5v8.5c0 6.1-4.2 11.7-10 13.4C10.2 29.7 6 24.1 6 18V9.5L16 4.8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function VoicePrintIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-[var(--color-brand-primary)]"
|
||||
>
|
||||
<path
|
||||
d="M14 2h4v4h-4V2zM10 6h12v2h-2v10h2v2H10v-2h2V8h-2V6z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function SpamShieldIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-[var(--color-brand-primary)]"
|
||||
>
|
||||
<path
|
||||
d="M10 2h12l4 4v4c0 8-4 14-8 16-4-2-8-8-8-16V6l4-4zm1 2L8 8v3c0 6.7 3.4 12.2 8 14.4 4.6-2.2 8-7.7 8-14.4V8l-3-4H11z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function HomeTitleIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-[var(--color-brand-primary)]"
|
||||
>
|
||||
<path
|
||||
d="M16 4L4 12v14h8v-8h8v8h8V12L16 4zm0 3.2L24 12v2H8v-2L16 7.2z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function RemoveBrokersIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-[var(--color-brand-primary)]"
|
||||
>
|
||||
<path
|
||||
d="M12 4h8v2h-8V4zm-2 4h12l2 2v2H8v-2l2-2zm-2 4h16v12H8V12zm2 2v8h12v-8H10z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function FamilyPlansIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-[var(--color-brand-primary)]"
|
||||
>
|
||||
<path
|
||||
d="M12 6c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zm8 0c-2.2 0-4 1.8-4 4s1.8 4 4 4 4-1.8 4-4-1.8-4-4-4zM8 16c-2.8 0-5 2.2-5 5v5h10v-5c0-2.8-2.2-5-5-5zm10 0c-2.8 0-5 2.2-5 5v5h10v-5c0-2.8-2.2-5-5-5z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const features: Feature[] = [
|
||||
{
|
||||
title: "DarkWatch",
|
||||
description:
|
||||
"Continuous dark web monitoring to detect your exposed credentials and personal data.",
|
||||
icon: DarkWatchIcon,
|
||||
},
|
||||
{
|
||||
title: "VoicePrint",
|
||||
description:
|
||||
"AI-powered voice clone detection to protect against deepfake voice scams.",
|
||||
icon: VoicePrintIcon,
|
||||
},
|
||||
{
|
||||
title: "SpamShield",
|
||||
description:
|
||||
"Intelligent spam and scam call blocking that learns your patterns over time.",
|
||||
icon: SpamShieldIcon,
|
||||
},
|
||||
{
|
||||
title: "HomeTitle",
|
||||
description:
|
||||
"Property fraud alerts that notify you of unauthorized changes to your home records.",
|
||||
icon: HomeTitleIcon,
|
||||
},
|
||||
{
|
||||
title: "RemoveBrokers",
|
||||
description:
|
||||
"Automatic data broker removal to minimize your personal data footprint online.",
|
||||
icon: RemoveBrokersIcon,
|
||||
},
|
||||
{
|
||||
title: "Family Plans",
|
||||
description:
|
||||
"Protect your whole household with shared monitoring, alerts, and management tools.",
|
||||
icon: FamilyPlansIcon,
|
||||
},
|
||||
];
|
||||
|
||||
interface FeatureCardProps {
|
||||
feature: Feature;
|
||||
}
|
||||
|
||||
function FeatureCard(props: FeatureCardProps) {
|
||||
const Icon = props.feature.icon;
|
||||
return (
|
||||
<Card class="hover:shadow-lg transition-shadow duration-300">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="flex-shrink-0 p-2 rounded-lg bg-[var(--color-bg-secondary)]">
|
||||
<Icon />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-[var(--color-text-primary)] mb-1">
|
||||
{props.feature.title}
|
||||
</h3>
|
||||
<p class="text-[var(--color-text-secondary)] leading-relaxed">
|
||||
{props.feature.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
interface FeaturesGridSectionProps {
|
||||
class?: string;
|
||||
}
|
||||
|
||||
export default function FeaturesGridSection(props: FeaturesGridSectionProps) {
|
||||
return (
|
||||
<section
|
||||
id="features"
|
||||
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">
|
||||
Platform Features
|
||||
</h2>
|
||||
<p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
|
||||
Comprehensive protection powered by AI and real-time monitoring
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<For each={features}>
|
||||
{(feature) => <FeatureCard feature={feature} />}
|
||||
</For>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
151
web/src/components/landing/ForUsersSection.tsx
Normal file
151
web/src/components/landing/ForUsersSection.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
158
web/src/components/landing/HowItWorksSection.tsx
Normal file
158
web/src/components/landing/HowItWorksSection.tsx
Normal file
@@ -0,0 +1,158 @@
|
||||
import { For } from "solid-js";
|
||||
import type { JSX } from "solid-js";
|
||||
import { cn } from "~/lib/utils";
|
||||
import PageContainer from "~/components/layout/PageContainer";
|
||||
|
||||
interface Step {
|
||||
number: number;
|
||||
title: string;
|
||||
description: string;
|
||||
icon: () => JSX.Element;
|
||||
}
|
||||
|
||||
function EnrollIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-white"
|
||||
>
|
||||
<path
|
||||
d="M16 4C9.373 4 4 9.373 4 16s5.373 12 12 12 12-5.373 12-12S22.627 4 16 4zm0 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S6 21.523 6 16 10.477 6 16 6zm-1 3v5H9v2h6v5h2v-5h6v-2h-6V9h-2z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function MonitorIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-white"
|
||||
>
|
||||
<path
|
||||
d="M4 8v12a2 2 0 002 2h16a2 2 0 002-2V8a2 2 0 00-2-2H6a2 2 0 00-2 2zm2 0h20v12H6V8zm-4 4h4v2H4v-2zm16 0h4v2h-4v-2z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function AlertIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-white"
|
||||
>
|
||||
<path
|
||||
d="M16 2L4 8v10c0 7.4 5.1 14.1 12 16 6.9-1.9 12-8.6 12-16V8L16 2zm0 2.8L26 9.5v8.5c0 6.1-4.2 11.7-10 13.4C10.2 29.7 6 24.1 6 18V9.5L16 4.8zM15 10v2h2v-2h-2zm0 4v6h2v-6h-2z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const steps: Step[] = [
|
||||
{
|
||||
number: 1,
|
||||
title: "Enroll Your Identity",
|
||||
description:
|
||||
"Sign up and add your emails, phone numbers, and family members to create your protection profile.",
|
||||
icon: EnrollIcon,
|
||||
},
|
||||
{
|
||||
number: 2,
|
||||
title: "We Monitor 24/7",
|
||||
description:
|
||||
"Our system runs continuous dark web scans, voiceprint detection, and spam filtering to catch threats early.",
|
||||
icon: MonitorIcon,
|
||||
},
|
||||
{
|
||||
number: 3,
|
||||
title: "Get Instant Alerts",
|
||||
description:
|
||||
"Receive real-time notifications the moment a threat is detected, with clear guidance on what to do next.",
|
||||
icon: AlertIcon,
|
||||
},
|
||||
];
|
||||
|
||||
interface StepItemProps {
|
||||
step: Step;
|
||||
index: number;
|
||||
}
|
||||
|
||||
function StepItem(props: StepItemProps) {
|
||||
const isEven = props.index % 2 === 0;
|
||||
const Icon = props.step.icon;
|
||||
|
||||
return (
|
||||
<div
|
||||
class={cn(
|
||||
"flex items-center gap-8 md:gap-16",
|
||||
isEven ? "md:flex-row" : "md:flex-row-reverse",
|
||||
)}
|
||||
>
|
||||
<div class={cn("flex-shrink-0", isEven ? "" : "md:order-last")}>
|
||||
<div class="w-16 h-16 rounded-full gradient-primary shadow-glow-primary flex items-center justify-center">
|
||||
<Icon />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class={cn("flex-1", isEven ? "" : "md:text-right")}>
|
||||
<div class="inline-flex items-center gap-2 mb-2">
|
||||
<span class="text-sm font-semibold text-[var(--color-brand-primary)]">
|
||||
Step {props.step.number}
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-[var(--color-text-primary)] mb-3">
|
||||
{props.step.title}
|
||||
</h3>
|
||||
<p class="text-lg text-[var(--color-text-secondary)] leading-relaxed max-w-lg">
|
||||
{props.step.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface HowItWorksSectionProps {
|
||||
class?: string;
|
||||
}
|
||||
|
||||
export default function HowItWorksSection(props: HowItWorksSectionProps) {
|
||||
return (
|
||||
<section
|
||||
id="how-it-works"
|
||||
class={cn("bg-dot-grid 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">
|
||||
How It Works
|
||||
</h2>
|
||||
<p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
|
||||
Three simple steps to full identity protection
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-12 md:gap-16">
|
||||
<For each={steps}>
|
||||
{(step, index) => <StepItem step={step} index={index()} />}
|
||||
</For>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
185
web/src/components/landing/WhyShieldAISection.tsx
Normal file
185
web/src/components/landing/WhyShieldAISection.tsx
Normal file
@@ -0,0 +1,185 @@
|
||||
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 ProactiveIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-[var(--color-brand-primary)]"
|
||||
>
|
||||
<path
|
||||
d="M16 2L4 8v10c0 7.4 5.1 14.1 12 16 6.9-1.9 12-8.6 12-16V8L16 2zm0 2.8L26 9.5v8.5c0 6.1-4.2 11.7-10 13.4C10.2 29.7 6 24.1 6 18V9.5L16 4.8z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function AIIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-[var(--color-brand-primary)]"
|
||||
>
|
||||
<path
|
||||
d="M14 2h4v4h-4V2zM6 8h4v4H6V8zm16 0h4v4h-4V8zM6 16h4v4H6v-4zm16 0h4v4h-4v-4zm-8 8h4v4h-4v-4zM10 14h4v4h-4v-4zm8 0h4v4h-4v-4zM10 22h4v4h-4v-4zm8 0h4v4h-4v-4z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function PrivacyIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
class="w-8 h-8 text-[var(--color-brand-primary)]"
|
||||
>
|
||||
<path
|
||||
d="M14 4h4v4h-4V4zM10 8h12l2 2v2H8v-2l2-2zm-2 4h16v14H8V12zm2 2v10h12v-10H10z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
interface ValueProp {
|
||||
title: string;
|
||||
description: string;
|
||||
items: string[];
|
||||
icon: () => JSX.Element;
|
||||
}
|
||||
|
||||
const valueProps: ValueProp[] = [
|
||||
{
|
||||
title: "Proactive, Not Reactive",
|
||||
description:
|
||||
"We detect threats before they cause damage, so you can act early.",
|
||||
icon: ProactiveIcon,
|
||||
items: [
|
||||
"Real-time dark web scanning",
|
||||
"Pre-breach alerts and warnings",
|
||||
"Automated threat response",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "AI-Powered Detection",
|
||||
description:
|
||||
"Machine learning models trained on real scam data to catch the latest threats.",
|
||||
icon: AIIcon,
|
||||
items: [
|
||||
"Deepfake voice identification",
|
||||
"Pattern-based scam detection",
|
||||
"Continuous model improvement",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Privacy First",
|
||||
description:
|
||||
"Your data stays encrypted and private. We never sell your information.",
|
||||
icon: PrivacyIcon,
|
||||
items: [
|
||||
"End-to-end encrypted data",
|
||||
"GDPR and CCPA compliant",
|
||||
"Zero data selling policy",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
interface ValueCardProps {
|
||||
prop: ValueProp;
|
||||
}
|
||||
|
||||
function ValueCard(props: ValueCardProps) {
|
||||
const Icon = props.prop.icon;
|
||||
return (
|
||||
<Card class="backdrop-blur-2xl">
|
||||
<div class="flex flex-col h-full">
|
||||
<div class="mb-3 p-2 rounded-lg bg-[var(--color-bg-secondary)] w-fit">
|
||||
<Icon />
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-[var(--color-text-primary)] mb-2">
|
||||
{props.prop.title}
|
||||
</h3>
|
||||
<p class="text-[var(--color-text-secondary)] mb-4 leading-relaxed">
|
||||
{props.prop.description}
|
||||
</p>
|
||||
<ul class="space-y-2 flex-1">
|
||||
<For each={props.prop.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 WhyShieldAISectionProps {
|
||||
class?: string;
|
||||
}
|
||||
|
||||
export default function WhyShieldAISection(props: WhyShieldAISectionProps) {
|
||||
return (
|
||||
<section
|
||||
id="why-shieldai"
|
||||
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">
|
||||
Why ShieldAI
|
||||
</h2>
|
||||
<p class="text-lg text-[var(--color-text-secondary)] max-w-2xl mx-auto">
|
||||
Built on cutting-edge technology with your privacy at the core
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<For each={valueProps}>
|
||||
{(prop) => <ValueCard prop={prop} />}
|
||||
</For>
|
||||
</div>
|
||||
</PageContainer>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,2 +1,7 @@
|
||||
export { default as ColorWaveBackground } from "./ColorWaveBackground";
|
||||
export { ColorWaveBackground } from "./ColorWaveBackground";
|
||||
export { default as HeroSection } from "./HeroSection";
|
||||
export { default as HowItWorksSection } from "./HowItWorksSection";
|
||||
export { default as FeaturesGridSection } from "./FeaturesGridSection";
|
||||
export { default as ForUsersSection } from "./ForUsersSection";
|
||||
export { default as WhyShieldAISection } from "./WhyShieldAISection";
|
||||
export { default as CTABannerSection } from "./CTABannerSection";
|
||||
|
||||
379
web/src/components/landing/sections.test.tsx
Normal file
379
web/src/components/landing/sections.test.tsx
Normal file
@@ -0,0 +1,379 @@
|
||||
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||
import { render } from "solid-js/web";
|
||||
import type { JSX } from "solid-js";
|
||||
|
||||
vi.mock("@solidjs/router", () => ({
|
||||
A: (props: { href?: string; children?: JSX.Element }) => {
|
||||
const href = props.href || "#";
|
||||
return (
|
||||
<a href={href}>
|
||||
{props.children}
|
||||
</a>
|
||||
);
|
||||
},
|
||||
}));
|
||||
|
||||
import HowItWorksSection from "./HowItWorksSection";
|
||||
import FeaturesGridSection from "./FeaturesGridSection";
|
||||
import ForUsersSection from "./ForUsersSection";
|
||||
import WhyShieldAISection from "./WhyShieldAISection";
|
||||
import CTABannerSection from "./CTABannerSection";
|
||||
|
||||
function mount(comp: () => JSX.Element): HTMLDivElement {
|
||||
const container = document.createElement("div");
|
||||
document.body.appendChild(container);
|
||||
render(() => comp(), container);
|
||||
return container;
|
||||
}
|
||||
|
||||
beforeEach(() => {
|
||||
document.body.innerHTML = "";
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
document.body.innerHTML = "";
|
||||
});
|
||||
|
||||
describe("HowItWorksSection", () => {
|
||||
it("renders the section heading", () => {
|
||||
mount(() => <HowItWorksSection />);
|
||||
expect(document.body.textContent).toContain("How It Works");
|
||||
});
|
||||
|
||||
it("renders the section subheading", () => {
|
||||
mount(() => <HowItWorksSection />);
|
||||
expect(document.body.textContent).toContain(
|
||||
"Three simple steps to full identity protection",
|
||||
);
|
||||
});
|
||||
|
||||
it("renders all 3 steps", () => {
|
||||
mount(() => <HowItWorksSection />);
|
||||
expect(document.body.textContent).toContain("Enroll Your Identity");
|
||||
expect(document.body.textContent).toContain("We Monitor 24/7");
|
||||
expect(document.body.textContent).toContain("Get Instant Alerts");
|
||||
});
|
||||
|
||||
it("renders step descriptions", () => {
|
||||
mount(() => <HowItWorksSection />);
|
||||
expect(document.body.textContent).toContain(
|
||||
"Sign up and add your emails",
|
||||
);
|
||||
expect(document.body.textContent).toContain("dark web scans");
|
||||
expect(document.body.textContent).toContain("real-time notifications");
|
||||
});
|
||||
|
||||
it("renders 3 numbered circles with gradient-primary", () => {
|
||||
mount(() => <HowItWorksSection />);
|
||||
const circles = document.querySelectorAll(".gradient-primary");
|
||||
expect(circles.length).toBe(3);
|
||||
});
|
||||
|
||||
it("has the anchor ID for smooth scrolling", () => {
|
||||
mount(() => <HowItWorksSection />);
|
||||
const section = document.querySelector('#how-it-works');
|
||||
expect(section).toBeTruthy();
|
||||
});
|
||||
|
||||
it("applies custom class prop", () => {
|
||||
mount(() => <HowItWorksSection class="custom-how" />);
|
||||
const section = document.querySelector("section.custom-how");
|
||||
expect(section).toBeTruthy();
|
||||
});
|
||||
|
||||
it("wraps content in PageContainer", () => {
|
||||
mount(() => <HowItWorksSection />);
|
||||
const container = document.querySelector(".max-w-7xl");
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
||||
describe("FeaturesGridSection", () => {
|
||||
it("renders the section heading", () => {
|
||||
mount(() => <FeaturesGridSection />);
|
||||
expect(document.body.textContent).toContain("Platform Features");
|
||||
});
|
||||
|
||||
it("renders the section subheading", () => {
|
||||
mount(() => <FeaturesGridSection />);
|
||||
expect(document.body.textContent).toContain("Comprehensive protection");
|
||||
});
|
||||
|
||||
it("renders all 6 feature cards", () => {
|
||||
mount(() => <FeaturesGridSection />);
|
||||
expect(document.body.textContent).toContain("DarkWatch");
|
||||
expect(document.body.textContent).toContain("VoicePrint");
|
||||
expect(document.body.textContent).toContain("SpamShield");
|
||||
expect(document.body.textContent).toContain("HomeTitle");
|
||||
expect(document.body.textContent).toContain("RemoveBrokers");
|
||||
expect(document.body.textContent).toContain("Family Plans");
|
||||
});
|
||||
|
||||
it("renders 6 Card components", () => {
|
||||
mount(() => <FeaturesGridSection />);
|
||||
const cards = document.querySelectorAll(".gradient-card");
|
||||
expect(cards.length).toBe(6);
|
||||
});
|
||||
|
||||
it("renders feature descriptions", () => {
|
||||
mount(() => <FeaturesGridSection />);
|
||||
expect(document.body.textContent).toContain("dark web monitoring");
|
||||
expect(document.body.textContent).toContain("voice clone detection");
|
||||
expect(document.body.textContent).toContain("scam call blocking");
|
||||
});
|
||||
|
||||
it("has the anchor ID for smooth scrolling", () => {
|
||||
mount(() => <FeaturesGridSection />);
|
||||
const section = document.querySelector('#features');
|
||||
expect(section).toBeTruthy();
|
||||
});
|
||||
|
||||
it("applies custom class prop", () => {
|
||||
mount(() => <FeaturesGridSection class="custom-features" />);
|
||||
const section = document.querySelector("section.custom-features");
|
||||
expect(section).toBeTruthy();
|
||||
});
|
||||
|
||||
it("uses responsive grid layout", () => {
|
||||
mount(() => <FeaturesGridSection />);
|
||||
const grid = document.querySelector(".grid-cols-1");
|
||||
expect(grid).toBeTruthy();
|
||||
expect(grid!.className).toContain("md:grid-cols-2");
|
||||
expect(grid!.className).toContain("lg:grid-cols-3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("ForUsersSection", () => {
|
||||
it("renders the section heading", () => {
|
||||
mount(() => <ForUsersSection />);
|
||||
expect(document.body.textContent).toContain("For Everyone");
|
||||
});
|
||||
|
||||
it("renders the section subheading", () => {
|
||||
mount(() => <ForUsersSection />);
|
||||
expect(document.body.textContent).toContain(
|
||||
"Whether you're protecting yourself",
|
||||
);
|
||||
});
|
||||
|
||||
it("renders both panels", () => {
|
||||
mount(() => <ForUsersSection />);
|
||||
expect(document.body.textContent).toContain("For Individuals");
|
||||
expect(document.body.textContent).toContain("For Families");
|
||||
});
|
||||
|
||||
it("renders individual panel description", () => {
|
||||
mount(() => <ForUsersSection />);
|
||||
expect(document.body.textContent).toContain(
|
||||
"Personal identity protection",
|
||||
);
|
||||
});
|
||||
|
||||
it("renders family panel description", () => {
|
||||
mount(() => <ForUsersSection />);
|
||||
expect(document.body.textContent).toContain("Group management tools");
|
||||
});
|
||||
|
||||
it("renders bullet items for individuals", () => {
|
||||
mount(() => <ForUsersSection />);
|
||||
expect(document.body.textContent).toContain(
|
||||
"Monitor personal email and phone numbers",
|
||||
);
|
||||
expect(document.body.textContent).toContain(
|
||||
"Dark web credential scanning",
|
||||
);
|
||||
});
|
||||
|
||||
it("renders bullet items for families", () => {
|
||||
mount(() => <ForUsersSection />);
|
||||
expect(document.body.textContent).toContain(
|
||||
"Add unlimited family members",
|
||||
);
|
||||
expect(document.body.textContent).toContain("Shared alert dashboard");
|
||||
});
|
||||
|
||||
it("renders checkmark icons", () => {
|
||||
mount(() => <ForUsersSection />);
|
||||
const checkmarks = document.querySelectorAll(
|
||||
'svg path[fill="var(--color-success)"]',
|
||||
);
|
||||
expect(checkmarks.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it("renders 2 Card components for panels", () => {
|
||||
mount(() => <ForUsersSection />);
|
||||
const cards = document.querySelectorAll(".gradient-card");
|
||||
expect(cards.length).toBe(2);
|
||||
});
|
||||
|
||||
it("has the anchor ID for smooth scrolling", () => {
|
||||
mount(() => <ForUsersSection />);
|
||||
const section = document.querySelector('#for-users');
|
||||
expect(section).toBeTruthy();
|
||||
});
|
||||
|
||||
it("applies custom class prop", () => {
|
||||
mount(() => <ForUsersSection class="custom-users" />);
|
||||
const section = document.querySelector("section.custom-users");
|
||||
expect(section).toBeTruthy();
|
||||
});
|
||||
|
||||
it("uses two-column grid on desktop", () => {
|
||||
mount(() => <ForUsersSection />);
|
||||
const grid = document.querySelector(".grid-cols-1");
|
||||
expect(grid).toBeTruthy();
|
||||
expect(grid!.className).toContain("md:grid-cols-2");
|
||||
});
|
||||
});
|
||||
|
||||
describe("WhyShieldAISection", () => {
|
||||
it("renders the section heading", () => {
|
||||
mount(() => <WhyShieldAISection />);
|
||||
expect(document.body.textContent).toContain("Why ShieldAI");
|
||||
});
|
||||
|
||||
it("renders the section subheading", () => {
|
||||
mount(() => <WhyShieldAISection />);
|
||||
expect(document.body.textContent).toContain(
|
||||
"Built on cutting-edge technology",
|
||||
);
|
||||
});
|
||||
|
||||
it("renders all 3 value prop cards", () => {
|
||||
mount(() => <WhyShieldAISection />);
|
||||
expect(document.body.textContent).toContain("Proactive, Not Reactive");
|
||||
expect(document.body.textContent).toContain("AI-Powered Detection");
|
||||
expect(document.body.textContent).toContain("Privacy First");
|
||||
});
|
||||
|
||||
it("renders value prop descriptions", () => {
|
||||
mount(() => <WhyShieldAISection />);
|
||||
expect(document.body.textContent).toContain(
|
||||
"detect threats before they cause damage",
|
||||
);
|
||||
expect(document.body.textContent).toContain(
|
||||
"Machine learning models trained",
|
||||
);
|
||||
expect(document.body.textContent).toContain("encrypted and private");
|
||||
});
|
||||
|
||||
it("renders bullet items for each card", () => {
|
||||
mount(() => <WhyShieldAISection />);
|
||||
expect(document.body.textContent).toContain(
|
||||
"Real-time dark web scanning",
|
||||
);
|
||||
expect(document.body.textContent).toContain(
|
||||
"Deepfake voice identification",
|
||||
);
|
||||
expect(document.body.textContent).toContain("End-to-end encrypted data");
|
||||
});
|
||||
|
||||
it("renders 3 Card components", () => {
|
||||
mount(() => <WhyShieldAISection />);
|
||||
const cards = document.querySelectorAll(".gradient-card");
|
||||
expect(cards.length).toBe(3);
|
||||
});
|
||||
|
||||
it("has the anchor ID for smooth scrolling", () => {
|
||||
mount(() => <WhyShieldAISection />);
|
||||
const section = document.querySelector('#why-shieldai');
|
||||
expect(section).toBeTruthy();
|
||||
});
|
||||
|
||||
it("applies custom class prop", () => {
|
||||
mount(() => <WhyShieldAISection class="custom-why" />);
|
||||
const section = document.querySelector("section.custom-why");
|
||||
expect(section).toBeTruthy();
|
||||
});
|
||||
|
||||
it("uses three-column grid on desktop", () => {
|
||||
mount(() => <WhyShieldAISection />);
|
||||
const grid = document.querySelector(".grid-cols-1");
|
||||
expect(grid).toBeTruthy();
|
||||
expect(grid!.className).toContain("md:grid-cols-3");
|
||||
});
|
||||
});
|
||||
|
||||
describe("CTABannerSection", () => {
|
||||
it("renders the CTA headline", () => {
|
||||
mount(() => <CTABannerSection />);
|
||||
expect(document.body.textContent).toContain(
|
||||
"Ready to protect your identity?",
|
||||
);
|
||||
});
|
||||
|
||||
it("renders the CTA subtext", () => {
|
||||
mount(() => <CTABannerSection />);
|
||||
expect(document.body.textContent).toContain(
|
||||
"Join thousands of users",
|
||||
);
|
||||
});
|
||||
|
||||
it("renders Create Account button", () => {
|
||||
mount(() => <CTABannerSection />);
|
||||
expect(document.body.textContent).toContain("Create Account");
|
||||
const primaryBtn = document.querySelector("button.gradient-primary");
|
||||
expect(primaryBtn).toBeTruthy();
|
||||
});
|
||||
|
||||
it("renders Sign In button", () => {
|
||||
mount(() => <CTABannerSection />);
|
||||
expect(document.body.textContent).toContain("Sign In");
|
||||
});
|
||||
|
||||
it("has Create Account link to /signup", () => {
|
||||
mount(() => <CTABannerSection />);
|
||||
const links = document.querySelectorAll("a");
|
||||
const signupLink = Array.from(links).find(
|
||||
(a) => a.getAttribute("href") === "/signup",
|
||||
);
|
||||
expect(signupLink).toBeTruthy();
|
||||
expect(signupLink!.textContent).toContain("Create Account");
|
||||
});
|
||||
|
||||
it("has Sign In link to /login", () => {
|
||||
mount(() => <CTABannerSection />);
|
||||
const links = document.querySelectorAll("a");
|
||||
const loginLink = Array.from(links).find(
|
||||
(a) => a.getAttribute("href") === "/login",
|
||||
);
|
||||
expect(loginLink).toBeTruthy();
|
||||
expect(loginLink!.textContent).toContain("Sign In");
|
||||
});
|
||||
|
||||
it("renders 2 buttons", () => {
|
||||
mount(() => <CTABannerSection />);
|
||||
const buttons = document.querySelectorAll("button");
|
||||
expect(buttons.length).toBe(2);
|
||||
});
|
||||
|
||||
it("has the anchor ID for smooth scrolling", () => {
|
||||
mount(() => <CTABannerSection />);
|
||||
const section = document.querySelector('#cta');
|
||||
expect(section).toBeTruthy();
|
||||
});
|
||||
|
||||
it("applies custom class prop", () => {
|
||||
mount(() => <CTABannerSection class="custom-cta" />);
|
||||
const section = document.querySelector("section.custom-cta");
|
||||
expect(section).toBeTruthy();
|
||||
});
|
||||
|
||||
it("uses centered text layout", () => {
|
||||
mount(() => <CTABannerSection />);
|
||||
const inner = document.querySelector(".text-center");
|
||||
expect(inner).toBeTruthy();
|
||||
});
|
||||
|
||||
it("wraps content in PageContainer", () => {
|
||||
mount(() => <CTABannerSection />);
|
||||
const container = document.querySelector(".max-w-7xl");
|
||||
expect(container).toBeTruthy();
|
||||
});
|
||||
|
||||
it("uses gradient card for CTA banner", () => {
|
||||
mount(() => <CTABannerSection />);
|
||||
const card = document.querySelector(".gradient-card");
|
||||
expect(card).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user