488 lines
21 KiB
TypeScript
488 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
import {
|
|
Shield,
|
|
MessageSquareLock,
|
|
FileSignature,
|
|
Wallet,
|
|
Building2,
|
|
Landmark,
|
|
HeartPulse,
|
|
ShieldCheck,
|
|
Factory,
|
|
Bot,
|
|
ArrowRight,
|
|
ChevronRight,
|
|
} from "lucide-react";
|
|
import { GlassCard } from "@/components/GlassCard";
|
|
import { GlowingButton } from "@/components/GlowingButton";
|
|
import { SectionWrapper, itemVariants } from "@/components/SectionWrapper";
|
|
import { AnimatedCounter } from "@/components/AnimatedCounter";
|
|
import { ParticleBackground } from "@/components/ParticleBackground";
|
|
|
|
/* ── Stagger helpers ── */
|
|
const heroStagger = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: { staggerChildren: 0.12, delayChildren: 0.2 },
|
|
},
|
|
};
|
|
const heroChild = {
|
|
hidden: { opacity: 0, y: 50, filter: "blur(4px)" },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
filter: "blur(0px)",
|
|
transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const },
|
|
},
|
|
};
|
|
|
|
const platformPillars = [
|
|
{
|
|
icon: Shield,
|
|
title: "Identity",
|
|
description:
|
|
"Verify anyone, anywhere, in real time. Multi-factor authentication, biometric verification, and digital identity management at scale.",
|
|
image: "/images/section-identity.jpg",
|
|
accent: "from-accent to-accent-blue",
|
|
},
|
|
{
|
|
icon: MessageSquareLock,
|
|
title: "Communication",
|
|
description:
|
|
"End-to-end encrypted messaging, video, and data exchange. Every conversation verified, every participant authenticated.",
|
|
image: "/images/section-communication.jpg",
|
|
accent: "from-accent-blue to-accent-violet",
|
|
},
|
|
{
|
|
icon: FileSignature,
|
|
title: "Signatures",
|
|
description:
|
|
"Legally binding digital signatures with full audit trails. eIDAS-compliant, court-admissible, and instantly verifiable.",
|
|
image: "/images/section-signatures.jpg",
|
|
accent: "from-accent-violet to-accent",
|
|
},
|
|
{
|
|
icon: Wallet,
|
|
title: "Payments",
|
|
description:
|
|
"Secure transaction authorization and payment verification. PSD2-compliant strong customer authentication built in.",
|
|
image: "/images/section-payments.jpg",
|
|
accent: "from-accent to-accent-violet",
|
|
},
|
|
];
|
|
|
|
const painPoints = [
|
|
{
|
|
stat: "80%",
|
|
title: "of breaches involve identity",
|
|
description:
|
|
"Stolen credentials remain the #1 attack vector. Passwords alone are not enough.",
|
|
},
|
|
{
|
|
stat: "$4.5M",
|
|
title: "average cost of a data breach",
|
|
description:
|
|
"Organizations without unified trust infrastructure pay the highest price.",
|
|
},
|
|
{
|
|
stat: "67%",
|
|
title: "of enterprises use 10+ security tools",
|
|
description:
|
|
"Fragmented security stacks create gaps, complexity, and integration nightmares.",
|
|
},
|
|
];
|
|
|
|
const industries = [
|
|
{ icon: Landmark, name: "Banking & Finance" },
|
|
{ icon: Building2, name: "Government" },
|
|
{ icon: HeartPulse, name: "Healthcare" },
|
|
{ icon: ShieldCheck, name: "Insurance" },
|
|
{ icon: Factory, name: "Enterprise" },
|
|
{ icon: Bot, name: "AI-First Companies" },
|
|
];
|
|
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
{/* ════════════════════════════════════════════
|
|
HERO — Full-viewport cinematic entrance
|
|
════════════════════════════════════════════ */}
|
|
<section className="relative min-h-screen flex items-center overflow-hidden">
|
|
{/* Particle grid */}
|
|
<ParticleBackground />
|
|
|
|
{/* ── UNBOXED hero image — 120% scale, bleeds off screen ── */}
|
|
<motion.div
|
|
className="absolute top-[-10%] right-[-10%] h-[120%] w-[70%] hidden lg:block"
|
|
initial={{ opacity: 0, scale: 1.05 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 1.6, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
|
style={{
|
|
maskImage: "linear-gradient(to left, black 50%, transparent 100%)",
|
|
WebkitMaskImage: "linear-gradient(to left, black 50%, transparent 100%)",
|
|
}}
|
|
>
|
|
<Image
|
|
src="/images/hero-home.jpg"
|
|
alt="Digital trust ecosystem"
|
|
fill
|
|
className="object-cover"
|
|
priority
|
|
/>
|
|
{/* Cyan tint overlay */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-accent/[0.06] via-transparent to-accent-violet/[0.04] mix-blend-screen" />
|
|
</motion.div>
|
|
|
|
{/* Cinematic spotlights */}
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="absolute top-0 right-0 w-[70%] h-[80%] bg-gradient-to-bl from-accent/[0.07] via-accent-blue/[0.03] to-transparent" />
|
|
<div className="absolute bottom-0 left-0 w-[50%] h-[60%] bg-gradient-to-tr from-accent-violet/[0.05] via-transparent to-transparent" />
|
|
</div>
|
|
|
|
{/* Atmospheric glow orbs */}
|
|
<div className="absolute top-[-20%] right-[-10%] w-[800px] h-[800px] bg-cyan-500/10 blur-[150px] rounded-full pointer-events-none" />
|
|
<div className="absolute bottom-0 left-[-10%] w-[600px] h-[600px] bg-purple-600/10 blur-[120px] rounded-full pointer-events-none" />
|
|
|
|
{/* Bottom fade */}
|
|
<div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-navy to-transparent z-[5]" />
|
|
|
|
{/* Content — text floats OVER the image */}
|
|
<div className="relative z-10 mx-auto max-w-7xl px-6 pt-32 pb-20 w-full">
|
|
<motion.div
|
|
variants={heroStagger}
|
|
initial="hidden"
|
|
animate="visible"
|
|
className="max-w-2xl"
|
|
>
|
|
<motion.div variants={heroChild}>
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white/[0.04] border border-white/[0.06] backdrop-blur-sm text-[13px] font-medium tracking-wide text-slate-300 mb-8">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-accent animate-glow-pulse" />
|
|
Trusted by 100M+ identities worldwide
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
variants={heroChild}
|
|
className="text-5xl md:text-6xl lg:text-[4.5rem] font-bold font-display leading-[1.05] tracking-[-0.02em]"
|
|
>
|
|
One Platform.
|
|
<br />
|
|
<span className="bg-gradient-to-r from-accent via-accent-blue to-accent-violet bg-clip-text text-transparent">
|
|
Total Digital Trust.
|
|
</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
variants={heroChild}
|
|
className="mt-6 text-lg md:text-xl text-slate-300 max-w-lg leading-relaxed"
|
|
>
|
|
Identity. Communication. Signatures. Payments. Everything your
|
|
organization needs to build, verify, and maintain digital trust
|
|
— in one platform.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
variants={heroChild}
|
|
className="mt-10 flex flex-wrap gap-4"
|
|
>
|
|
<GlowingButton href="/contact">
|
|
Book a Demo <ArrowRight className="ml-2 h-4 w-4" />
|
|
</GlowingButton>
|
|
<GlowingButton href="/platform" variant="ghost">
|
|
Explore the Platform <ChevronRight className="ml-1 h-4 w-4" />
|
|
</GlowingButton>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* ── Trust bar ── */}
|
|
<motion.div
|
|
className="mt-24 pt-10 border-t border-white/[0.04]"
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ delay: 1.2, duration: 0.8 }}
|
|
>
|
|
<p className="text-center text-xs text-slate-500 tracking-widest uppercase mb-8">
|
|
Trusted by leading enterprises and governments worldwide
|
|
</p>
|
|
<div className="flex flex-wrap justify-center gap-x-16 gap-y-4 items-center">
|
|
{[
|
|
"Deutsche Bank",
|
|
"Bundesdruckerei",
|
|
"T-Systems",
|
|
"Allianz",
|
|
"Commerzbank",
|
|
].map((name) => (
|
|
<span
|
|
key={name}
|
|
className="text-[11px] font-semibold text-slate-600 tracking-[0.2em] uppercase"
|
|
>
|
|
{name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ════════════════════════════════════════════
|
|
PROBLEM — "Digital Trust Is Broken"
|
|
════════════════════════════════════════════ */}
|
|
<SectionWrapper className="bg-navy-mid/50">
|
|
<motion.div className="text-center mb-16" variants={itemVariants}>
|
|
<p className="text-xs tracking-[0.25em] uppercase text-accent mb-4 font-medium">
|
|
The Problem
|
|
</p>
|
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
|
Digital Trust Is{" "}
|
|
<span className="bg-gradient-to-r from-accent to-accent-blue bg-clip-text text-transparent">
|
|
Broken
|
|
</span>
|
|
</h2>
|
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
|
Organizations cobble together dozens of point solutions, creating
|
|
security gaps, compliance nightmares, and terrible user experiences.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-6">
|
|
{painPoints.map((point) => (
|
|
<motion.div key={point.title} variants={itemVariants}>
|
|
<GlassCard className="p-8 h-full">
|
|
<div className="text-4xl md:text-5xl font-bold font-display tracking-tight bg-gradient-to-b from-white to-slate-400 bg-clip-text text-transparent mb-3">
|
|
{point.stat}
|
|
</div>
|
|
<h3 className="text-base font-semibold text-slate-200 mb-3">
|
|
{point.title}
|
|
</h3>
|
|
<p className="text-slate-400 text-sm leading-relaxed">
|
|
{point.description}
|
|
</p>
|
|
</GlassCard>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</SectionWrapper>
|
|
|
|
{/* ════════════════════════════════════════════
|
|
PLATFORM — Four Pillars
|
|
════════════════════════════════════════════ */}
|
|
<SectionWrapper>
|
|
<motion.div className="text-center mb-16" variants={itemVariants}>
|
|
<p className="text-xs tracking-[0.25em] uppercase text-accent-blue mb-4 font-medium">
|
|
The Platform
|
|
</p>
|
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
|
Four Pillars of{" "}
|
|
<span className="bg-gradient-to-r from-accent to-accent-blue bg-clip-text text-transparent">
|
|
Digital Trust
|
|
</span>
|
|
</h2>
|
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
|
One unified platform. Four essential capabilities. Zero
|
|
fragmentation.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
{platformPillars.map((pillar) => (
|
|
<motion.div key={pillar.title} variants={itemVariants}>
|
|
<div className="relative h-80 md:h-96 rounded-xl overflow-hidden group border border-white/[0.06] hover:border-white/[0.12] transition-colors duration-500">
|
|
{/* Image fills entire card background */}
|
|
<Image
|
|
src={pillar.image}
|
|
alt={pillar.title}
|
|
fill
|
|
className="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
|
|
/>
|
|
{/* Strong gradient overlay for readability */}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-[#0A0F2E] via-[#0A0F2E]/90 to-transparent" />
|
|
{/* Text pinned to bottom */}
|
|
<div className="relative z-20 flex flex-col justify-end h-full p-8">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="p-2 rounded-lg bg-white/[0.06] border border-white/[0.08] backdrop-blur-sm">
|
|
<pillar.icon className="h-5 w-5 text-accent" />
|
|
</div>
|
|
<h3 className="text-xl font-semibold font-display tracking-tight">
|
|
{pillar.title}
|
|
</h3>
|
|
</div>
|
|
<p className="text-slate-300 text-sm leading-relaxed">
|
|
{pillar.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</SectionWrapper>
|
|
|
|
{/* ════════════════════════════════════════════
|
|
AI AGENT TEASER
|
|
════════════════════════════════════════════ */}
|
|
<SectionWrapper className="bg-navy-mid/50">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
|
<motion.div variants={itemVariants}>
|
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-accent-violet/[0.06] border border-accent-violet/[0.12] backdrop-blur-sm text-accent-violet text-[13px] font-medium tracking-wide mb-6">
|
|
<Bot className="h-4 w-4" />
|
|
New: AI Agent Infrastructure
|
|
</div>
|
|
<h2 className="text-3xl md:text-5xl font-bold font-display leading-tight tracking-tight">
|
|
Built for Humans.
|
|
<br />
|
|
<span className="bg-gradient-to-r from-accent-violet to-accent bg-clip-text text-transparent">
|
|
Ready for AI Agents.
|
|
</span>
|
|
</h2>
|
|
<p className="mt-6 text-slate-300 text-lg max-w-lg leading-relaxed">
|
|
As AI agents begin to act autonomously — signing documents, making
|
|
payments, accessing systems — they need verifiable identities and
|
|
trust infrastructure. KOBIL is ready.
|
|
</p>
|
|
<div className="mt-8">
|
|
<GlowingButton href="/ai-agents">
|
|
Explore AI Agent Trust <ArrowRight className="ml-2 h-4 w-4" />
|
|
</GlowingButton>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="relative aspect-video overflow-hidden"
|
|
>
|
|
<div
|
|
className="relative w-full h-full animate-float"
|
|
style={{
|
|
maskImage:
|
|
"linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 100%)",
|
|
WebkitMaskImage:
|
|
"linear-gradient(to left, transparent 0%, black 20%, black 80%, transparent 100%)",
|
|
}}
|
|
>
|
|
<Image
|
|
src="/images/hero-ai-agents.jpg"
|
|
alt="AI Agents"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-navy-mid/40 to-transparent mix-blend-multiply" />
|
|
</div>
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[300px] h-[300px] bg-accent-violet/[0.06] rounded-full blur-[80px] -z-10" />
|
|
</motion.div>
|
|
</div>
|
|
</SectionWrapper>
|
|
|
|
{/* ════════════════════════════════════════════
|
|
NUMBERS
|
|
════════════════════════════════════════════ */}
|
|
<SectionWrapper>
|
|
<motion.div className="text-center mb-16" variants={itemVariants}>
|
|
<p className="text-xs tracking-[0.25em] uppercase text-accent mb-4 font-medium">
|
|
Proven at Scale
|
|
</p>
|
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
|
Trust at{" "}
|
|
<span className="bg-gradient-to-r from-accent to-accent-blue bg-clip-text text-transparent">
|
|
Scale
|
|
</span>
|
|
</h2>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
|
<AnimatedCounter target={25} suffix="+" label="Years of Innovation" />
|
|
<AnimatedCounter
|
|
target={100}
|
|
suffix="M+"
|
|
label="Identities Secured"
|
|
/>
|
|
<AnimatedCounter target={50} suffix="+" label="Countries Served" />
|
|
<AnimatedCounter target={99} suffix=".99%" label="Uptime SLA" />
|
|
</div>
|
|
|
|
{/* Divider line */}
|
|
<div className="mt-16 h-px bg-gradient-to-r from-transparent via-white/[0.06] to-transparent" />
|
|
</SectionWrapper>
|
|
|
|
{/* ════════════════════════════════════════════
|
|
INDUSTRY PREVIEW
|
|
════════════════════════════════════════════ */}
|
|
<SectionWrapper className="bg-navy-mid/50">
|
|
<motion.div className="text-center mb-16" variants={itemVariants}>
|
|
<p className="text-xs tracking-[0.25em] uppercase text-accent-violet mb-4 font-medium">
|
|
Industries
|
|
</p>
|
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
|
Trusted Across{" "}
|
|
<span className="bg-gradient-to-r from-accent via-accent-blue to-accent-violet bg-clip-text text-transparent">
|
|
Every Industry
|
|
</span>
|
|
</h2>
|
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
|
From regulated financial services to cutting-edge AI companies.
|
|
</p>
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-4">
|
|
{industries.map((industry) => (
|
|
<motion.div key={industry.name} variants={itemVariants}>
|
|
<GlassCard className="p-6 text-center">
|
|
<industry.icon className="h-7 w-7 text-accent mx-auto mb-3 opacity-80" />
|
|
<p className="font-medium text-sm text-slate-200">
|
|
{industry.name}
|
|
</p>
|
|
</GlassCard>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<motion.div className="mt-12 text-center" variants={itemVariants}>
|
|
<GlowingButton href="/industries" variant="ghost">
|
|
See All Industries <ChevronRight className="ml-1 h-4 w-4" />
|
|
</GlowingButton>
|
|
</motion.div>
|
|
</SectionWrapper>
|
|
|
|
{/* ════════════════════════════════════════════
|
|
FINAL CTA
|
|
════════════════════════════════════════════ */}
|
|
<section className="relative py-32 md:py-40 overflow-hidden">
|
|
{/* Ambient glow */}
|
|
<div className="absolute inset-0 pointer-events-none">
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-gradient-to-r from-accent/[0.04] via-accent-blue/[0.06] to-accent-violet/[0.04] rounded-full blur-[100px]" />
|
|
</div>
|
|
<div className="relative z-10 mx-auto max-w-4xl px-6 text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
|
|
>
|
|
<h2 className="text-3xl md:text-5xl lg:text-6xl font-bold font-display tracking-tight">
|
|
Ready to Build{" "}
|
|
<span className="bg-gradient-to-r from-accent to-accent-violet bg-clip-text text-transparent">
|
|
Digital Trust
|
|
</span>
|
|
?
|
|
</h2>
|
|
<p className="mt-6 text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
|
|
Join the organizations that trust KOBIL to secure their most
|
|
critical digital interactions. Book a demo and see the platform in
|
|
action.
|
|
</p>
|
|
<div className="mt-10 flex flex-wrap justify-center gap-4">
|
|
<GlowingButton href="/contact">
|
|
Book a Demo <ArrowRight className="ml-2 h-4 w-4" />
|
|
</GlowingButton>
|
|
<GlowingButton href="/platform" variant="ghost">
|
|
Learn More
|
|
</GlowingButton>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|