chore: backup state before god-tier overhaul
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Temmuz Aslan
parent
82b12113ad
commit
b284562862
29 changed files with 3000 additions and 81 deletions
53
package-lock.json
generated
53
package-lock.json
generated
|
|
@ -8,6 +8,8 @@
|
||||||
"name": "kobilwebsite",
|
"name": "kobilwebsite",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"framer-motion": "^12.34.0",
|
||||||
|
"lucide-react": "^0.564.0",
|
||||||
"next": "16.1.6",
|
"next": "16.1.6",
|
||||||
"react": "19.2.3",
|
"react": "19.2.3",
|
||||||
"react-dom": "19.2.3"
|
"react-dom": "19.2.3"
|
||||||
|
|
@ -3585,6 +3587,33 @@
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/framer-motion": {
|
||||||
|
"version": "12.34.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.34.0.tgz",
|
||||||
|
"integrity": "sha512-+/H49owhzkzQyxtn7nZeF4kdH++I2FWrESQ184Zbcw5cEqNHYkE5yxWxcTLSj5lNx3NWdbIRy5FHqUvetD8FWg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"motion-dom": "^12.34.0",
|
||||||
|
"motion-utils": "^12.29.2",
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@emotion/is-prop-valid": "*",
|
||||||
|
"react": "^18.0.0 || ^19.0.0",
|
||||||
|
"react-dom": "^18.0.0 || ^19.0.0"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@emotion/is-prop-valid": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"react": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"react-dom": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/function-bind": {
|
"node_modules/function-bind": {
|
||||||
"version": "1.1.2",
|
"version": "1.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
|
||||||
|
|
@ -4833,6 +4862,15 @@
|
||||||
"yallist": "^3.0.2"
|
"yallist": "^3.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/lucide-react": {
|
||||||
|
"version": "0.564.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.564.0.tgz",
|
||||||
|
"integrity": "sha512-JJ8GVTQqFwuliifD48U6+h7DXEHdkhJ/E87kksGByII3qHxtPciVb8T8woQONHBQgHVOl7rSMrrip3SeVNy7Fg==",
|
||||||
|
"license": "ISC",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/magic-string": {
|
"node_modules/magic-string": {
|
||||||
"version": "0.30.21",
|
"version": "0.30.21",
|
||||||
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
|
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
|
||||||
|
|
@ -4900,6 +4938,21 @@
|
||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/motion-dom": {
|
||||||
|
"version": "12.34.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.34.0.tgz",
|
||||||
|
"integrity": "sha512-Lql3NuEcScRDxTAO6GgUsRHBZOWI/3fnMlkMcH5NftzcN37zJta+bpbMAV9px4Nj057TuvRooMK7QrzMCgtz6Q==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"motion-utils": "^12.29.2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/motion-utils": {
|
||||||
|
"version": "12.29.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.29.2.tgz",
|
||||||
|
"integrity": "sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/ms": {
|
"node_modules/ms": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,8 @@
|
||||||
"lint": "eslint"
|
"lint": "eslint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"framer-motion": "^12.34.0",
|
||||||
|
"lucide-react": "^0.564.0",
|
||||||
"next": "16.1.6",
|
"next": "16.1.6",
|
||||||
"react": "19.2.3",
|
"react": "19.2.3",
|
||||||
"react-dom": "19.2.3"
|
"react-dom": "19.2.3"
|
||||||
|
|
|
||||||
BIN
public/images/hero-ai-agents.jpg
Normal file
BIN
public/images/hero-ai-agents.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 358 KiB |
BIN
public/images/hero-home.jpg
Normal file
BIN
public/images/hero-home.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 135 KiB |
BIN
public/images/hero-industries.jpg
Normal file
BIN
public/images/hero-industries.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 248 KiB |
BIN
public/images/hero-platform.jpg
Normal file
BIN
public/images/hero-platform.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 358 KiB |
BIN
public/images/hero-security.jpg
Normal file
BIN
public/images/hero-security.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 372 KiB |
BIN
public/images/section-communication.jpg
Normal file
BIN
public/images/section-communication.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
BIN
public/images/section-identity.jpg
Normal file
BIN
public/images/section-identity.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
BIN
public/images/section-payments.jpg
Normal file
BIN
public/images/section-payments.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 334 KiB |
BIN
public/images/section-signatures.jpg
Normal file
BIN
public/images/section-signatures.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
BIN
public/kobil.png
Normal file
BIN
public/kobil.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
17
public/kobil.svg
Normal file
17
public/kobil.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<svg width="519" height="162" viewBox="0 0 519 162" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_7_22)">
|
||||||
|
<path d="M6.94604 36.5171H25.173V100.541H25.535L75.1 36.5171H96.743L58.166 85.5351L100.79 160.81H79.138L46.329 100.029L25.173 122.961V160.81H6.94604V36.5171Z" fill="black"/>
|
||||||
|
<path d="M101.773 98.6629C101.773 84.1962 102.186 74.5146 103.012 69.6179C103.637 65.449 105.007 61.4266 107.056 57.7429C109.972 52.0269 114.649 46.9316 121.086 42.4569C127.414 37.9289 135.31 35.6079 144.774 35.4939C154.348 35.6079 162.326 37.9379 168.708 42.4839C175.036 46.9739 179.603 52.0886 182.408 57.8279C184.655 61.4249 186.091 65.4689 186.614 69.6779C187.328 74.5659 187.685 84.2276 187.686 98.6629C187.686 112.871 187.329 122.476 186.614 127.477C186.108 131.743 184.671 135.847 182.405 139.497C179.598 145.238 175.031 150.296 168.705 154.671C162.322 159.219 154.345 161.606 144.772 161.833C135.305 161.605 127.41 159.218 121.085 154.671C114.646 150.295 109.969 145.237 107.054 139.497C106.174 137.622 105.377 135.832 104.662 134.127C103.9 131.968 103.347 129.741 103.011 127.477C102.185 122.477 101.772 112.872 101.773 98.6629ZM120 98.6629C120 110.908 120.441 119.195 121.323 123.523C121.888 127.396 123.521 131.035 126.039 134.031C128.059 136.669 130.663 138.804 133.647 140.267C137.008 142.218 140.846 143.194 144.73 143.085C148.693 143.185 152.609 142.212 156.063 140.267C158.95 138.796 161.445 136.659 163.34 134.031C165.868 131.022 167.553 127.396 168.221 123.523C169.047 119.195 169.46 110.908 169.461 98.6629C169.462 86.4176 169.048 78.0742 168.221 73.6329C167.529 69.8199 165.846 66.2562 163.34 63.2999C161.421 60.649 158.935 58.4598 156.063 56.8919C152.535 55.1604 148.66 54.2535 144.73 54.2399C140.879 54.244 137.083 55.1509 133.647 56.8879C130.678 58.4492 128.082 60.6354 126.039 63.2959C123.544 66.2398 121.911 69.8168 121.323 73.6309C120.441 78.0769 120 86.4209 120 98.6629Z" fill="black"/>
|
||||||
|
<path d="M204.554 36.5171H251.214C263.05 36.6311 271.941 39.7001 277.887 45.7241C283.887 51.8054 286.887 59.8471 286.887 69.8491C287.001 74.9621 285.778 80.0163 283.338 84.5111C281.908 86.9194 280.064 89.0553 277.889 90.8201C275.241 93.1075 272.298 95.0287 269.139 96.5321V96.8731C275.304 98.3477 280.651 102.171 284.039 107.529C287.175 113.002 288.804 119.209 288.759 125.516C288.648 136.258 285.398 144.754 279.007 151.005C272.674 157.542 264.768 160.81 255.289 160.81H204.554V36.5171ZM222.782 53.2171V88.9521H249.144C255.811 88.9521 260.714 87.1521 263.853 83.5521C265.443 81.8898 266.686 79.927 267.509 77.7787C268.332 75.6304 268.719 73.3395 268.646 71.0401C268.763 66.3236 267.044 61.7459 263.853 58.2711C260.712 55.0171 255.809 53.3318 249.144 53.2151L222.782 53.2171ZM222.782 105.645V143.085H250.923C257.709 142.973 262.676 141.064 265.823 137.358C268.95 133.761 270.632 129.131 270.541 124.365C270.652 119.545 268.971 114.855 265.823 111.202C262.679 107.611 257.712 105.759 250.923 105.645H222.782Z" fill="black"/>
|
||||||
|
<path d="M303.7 36.5171H321.927V160.81H303.7V36.5171Z" fill="black"/>
|
||||||
|
<path d="M436.268 36.5171H454.5V124.738H436.268V36.5171Z" fill="#2000FB"/>
|
||||||
|
<path d="M501.127 0H519.354V88.952H501.127V0Z" fill="#2000FB"/>
|
||||||
|
<path d="M468.7 18.2549H486.927V160.771H468.7V18.2549Z" fill="#2000FB"/>
|
||||||
|
<path d="M341.131 36.5171H359.359V143.085H418.041V160.81H341.131V36.5171Z" fill="black"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_7_22">
|
||||||
|
<rect width="519" height="162" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
387
src/app/ai-agents/page.tsx
Normal file
387
src/app/ai-agents/page.tsx
Normal file
|
|
@ -0,0 +1,387 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import {
|
||||||
|
Bot,
|
||||||
|
ArrowRight,
|
||||||
|
Fingerprint,
|
||||||
|
Link2,
|
||||||
|
ShieldCheck,
|
||||||
|
FileKey,
|
||||||
|
Eye,
|
||||||
|
Scale,
|
||||||
|
Network,
|
||||||
|
BrainCircuit,
|
||||||
|
CreditCard,
|
||||||
|
FileText,
|
||||||
|
Database,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { GlassCard } from "@/components/GlassCard";
|
||||||
|
import { GlowingButton } from "@/components/GlowingButton";
|
||||||
|
import { SectionWrapper, itemVariants } from "@/components/SectionWrapper";
|
||||||
|
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 problems = [
|
||||||
|
{
|
||||||
|
title: "No Verifiable Identity",
|
||||||
|
description:
|
||||||
|
"AI agents operate without credentials. You can't verify who sent an agent, what it's authorized to do, or if it's been compromised.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "No Accountability Chain",
|
||||||
|
description:
|
||||||
|
"When an agent acts on behalf of a human or organization, there's no cryptographic proof linking the action back to its principal.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "No Trust Framework",
|
||||||
|
description:
|
||||||
|
"Existing security infrastructure was built for humans clicking buttons — not for autonomous agents making API calls at machine speed.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
{
|
||||||
|
icon: Fingerprint,
|
||||||
|
title: "Agent Identity",
|
||||||
|
description:
|
||||||
|
"Cryptographically verifiable identities for AI agents. Every agent gets a unique, tamper-proof digital identity tied to its principal.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Link2,
|
||||||
|
title: "Principal Chain",
|
||||||
|
description:
|
||||||
|
"Unbreakable chain of accountability from agent to human to organization. Every action traceable back to a verified principal.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: ShieldCheck,
|
||||||
|
title: "Scoped Authorization",
|
||||||
|
description:
|
||||||
|
"Fine-grained permission boundaries. Define exactly what each agent can do, for how long, and on whose behalf.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: FileKey,
|
||||||
|
title: "Agent Signatures",
|
||||||
|
description:
|
||||||
|
"AI agents can sign documents and approve transactions with legally attributable digital signatures.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Eye,
|
||||||
|
title: "Real-Time Monitoring",
|
||||||
|
description:
|
||||||
|
"Continuous behavioral analysis of agent actions. Detect anomalies, enforce policies, and revoke access instantly.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Scale,
|
||||||
|
title: "Compliance Framework",
|
||||||
|
description:
|
||||||
|
"Built-in compliance for regulated industries. Audit trails, data residency controls, and regulatory reporting.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Network,
|
||||||
|
title: "Agent-to-Agent Trust",
|
||||||
|
description:
|
||||||
|
"Secure, authenticated communication between AI agents. Mutual verification before any data exchange or collaboration.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const useCases = [
|
||||||
|
{
|
||||||
|
icon: CreditCard,
|
||||||
|
title: "Autonomous Payments",
|
||||||
|
description:
|
||||||
|
"AI agents authorized to make purchases, process refunds, and manage subscriptions — with verified identity and spending limits.",
|
||||||
|
scenario: "E-commerce & FinTech",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: FileText,
|
||||||
|
title: "Document Processing",
|
||||||
|
description:
|
||||||
|
"Agents that review, sign, and route legal documents with full audit trails and legally binding signatures.",
|
||||||
|
scenario: "Legal & Enterprise",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Database,
|
||||||
|
title: "Data Access & Analysis",
|
||||||
|
description:
|
||||||
|
"Trusted agents that access sensitive databases, run analyses, and share results — all within verified permission boundaries.",
|
||||||
|
scenario: "Healthcare & Government",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: BrainCircuit,
|
||||||
|
title: "Multi-Agent Orchestration",
|
||||||
|
description:
|
||||||
|
"Coordinate fleets of specialized agents with verified identities, scoped permissions, and real-time monitoring.",
|
||||||
|
scenario: "AI-First Companies",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function AIAgentsPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="relative min-h-[70vh] flex items-center overflow-hidden">
|
||||||
|
<ParticleBackground />
|
||||||
|
|
||||||
|
{/* ── UNBOXED hero image — absolutely positioned background ── */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-0 right-0 h-full w-[60%] hidden lg:block"
|
||||||
|
initial={{ opacity: 0, scale: 1.02 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 1.4, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||||
|
style={{
|
||||||
|
maskImage: "linear-gradient(to left, black 40%, transparent 100%)",
|
||||||
|
WebkitMaskImage: "linear-gradient(to left, black 40%, transparent 100%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/images/hero-ai-agents.jpg"
|
||||||
|
alt="AI Agents Trust Infrastructure"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-tr from-accent-violet/[0.06] via-transparent to-accent/[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-violet/[0.07] via-accent/[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>
|
||||||
|
|
||||||
|
{/* Glow orb behind headline */}
|
||||||
|
<div className="absolute top-[-20%] left-[-10%] w-[500px] h-[500px] bg-violet-500/20 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]" />
|
||||||
|
|
||||||
|
<div className="relative z-10 mx-auto max-w-7xl px-6 pt-32 pb-20">
|
||||||
|
<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-accent-violet/[0.06] border border-accent-violet/[0.12] backdrop-blur-sm text-accent-violet text-[13px] font-medium tracking-wide mb-8">
|
||||||
|
<Bot className="h-4 w-4" />
|
||||||
|
The Future of Trust
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div variants={heroChild}>
|
||||||
|
<p className="text-xs tracking-[0.25em] uppercase text-accent mb-6 font-medium">
|
||||||
|
AI Agent Infrastructure
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.h1
|
||||||
|
variants={heroChild}
|
||||||
|
className="text-5xl md:text-6xl lg:text-7xl font-bold font-display leading-[1.05] tracking-[-0.02em]"
|
||||||
|
>
|
||||||
|
Trust Infrastructure
|
||||||
|
<br />
|
||||||
|
<span className="bg-gradient-to-r from-accent-violet via-accent to-accent-blue bg-clip-text text-transparent">
|
||||||
|
for AI Agents
|
||||||
|
</span>
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
variants={heroChild}
|
||||||
|
className="mt-6 text-lg md:text-xl text-slate-300 max-w-lg leading-relaxed"
|
||||||
|
>
|
||||||
|
AI agents are the next users of the internet. They need
|
||||||
|
identities, permissions, and accountability — just like humans.
|
||||||
|
KOBIL provides the trust layer.
|
||||||
|
</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">
|
||||||
|
See the Platform
|
||||||
|
</GlowingButton>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Problem */}
|
||||||
|
<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">
|
||||||
|
The Problem
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
||||||
|
AI Agents Are Here.{" "}
|
||||||
|
<span className="text-accent-violet">Trust Isn't.</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||||
|
The AI agent economy is emerging fast — but the trust infrastructure
|
||||||
|
hasn't kept up. Here's the gap.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
{problems.map((problem) => (
|
||||||
|
<motion.div key={problem.title} variants={itemVariants}>
|
||||||
|
<GlassCard className="p-8 h-full border-accent-violet/20">
|
||||||
|
<div className="w-12 h-12 rounded-lg bg-accent-violet/[0.06] border border-accent-violet/[0.12] backdrop-blur-sm flex items-center justify-center mb-4">
|
||||||
|
<Bot className="h-6 w-6 text-accent-violet" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-lg font-semibold mb-3">{problem.title}</h3>
|
||||||
|
<p className="text-slate-400 text-sm leading-relaxed">
|
||||||
|
{problem.description}
|
||||||
|
</p>
|
||||||
|
</GlassCard>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
|
||||||
|
{/* Solution Features */}
|
||||||
|
<SectionWrapper>
|
||||||
|
<motion.div className="text-center mb-16" variants={itemVariants}>
|
||||||
|
<p className="text-xs tracking-[0.25em] uppercase text-accent mb-4 font-medium">
|
||||||
|
The Solution
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
||||||
|
The KOBIL{" "}
|
||||||
|
<span className="bg-gradient-to-r from-accent-violet to-accent bg-clip-text text-transparent">
|
||||||
|
Agent Trust Layer
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||||
|
Seven capabilities that make AI agents trustworthy, accountable, and
|
||||||
|
enterprise-ready.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{features.map((feature) => (
|
||||||
|
<motion.div key={feature.title} variants={itemVariants}>
|
||||||
|
<GlassCard className="p-6 h-full">
|
||||||
|
<feature.icon className="h-8 w-8 text-accent-violet mb-4 opacity-80" />
|
||||||
|
<h3 className="text-lg font-semibold mb-2 tracking-tight">{feature.title}</h3>
|
||||||
|
<p className="text-slate-400 text-sm leading-relaxed">
|
||||||
|
{feature.description}
|
||||||
|
</p>
|
||||||
|
</GlassCard>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
|
||||||
|
{/* Use Cases */}
|
||||||
|
<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">
|
||||||
|
Applications
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
||||||
|
Real-World{" "}
|
||||||
|
<span className="text-accent">Use Cases</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||||
|
How trusted AI agents transform industries.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-8">
|
||||||
|
{useCases.map((uc) => (
|
||||||
|
<motion.div key={uc.title} variants={itemVariants}>
|
||||||
|
<GlassCard className="p-8 h-full">
|
||||||
|
<div className="flex items-center justify-between mb-4">
|
||||||
|
<uc.icon className="h-8 w-8 text-accent opacity-80" />
|
||||||
|
<span className="text-xs font-medium text-accent-violet bg-accent-violet/[0.06] border border-accent-violet/[0.12] backdrop-blur-sm px-3 py-1 rounded-lg">
|
||||||
|
{uc.scenario}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-3 tracking-tight">{uc.title}</h3>
|
||||||
|
<p className="text-slate-300 leading-relaxed">{uc.description}</p>
|
||||||
|
</GlassCard>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
|
||||||
|
{/* Vision */}
|
||||||
|
<SectionWrapper>
|
||||||
|
<div className="max-w-4xl mx-auto text-center">
|
||||||
|
<motion.div variants={itemVariants}>
|
||||||
|
<p className="text-xs tracking-[0.25em] uppercase text-accent-violet mb-4 font-medium">
|
||||||
|
Our Vision
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-bold font-display leading-tight tracking-tight">
|
||||||
|
The future isn't human{" "}
|
||||||
|
<span className="italic">or</span> AI.
|
||||||
|
<br />
|
||||||
|
<span className="bg-gradient-to-r from-accent-violet to-accent bg-clip-text text-transparent">
|
||||||
|
It's both — working together, with trust.
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-8 text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
|
||||||
|
KOBIL is building the trust infrastructure that allows humans and
|
||||||
|
AI agents to collaborate securely, with verifiable identities,
|
||||||
|
scoped permissions, and complete accountability. The AI agent
|
||||||
|
economy starts with trust.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
|
||||||
|
{/* 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-violet/[0.04] via-accent/[0.06] to-accent-blue/[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 for the{" "}
|
||||||
|
<span className="text-accent-violet">Agent Economy</span>?
|
||||||
|
</h2>
|
||||||
|
<p className="mt-6 text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
|
||||||
|
Be among the first to deploy trusted AI agent infrastructure.
|
||||||
|
Talk to our team about your use case.
|
||||||
|
</p>
|
||||||
|
<div className="mt-10">
|
||||||
|
<GlowingButton href="/contact">
|
||||||
|
Book a Demo <ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</GlowingButton>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
263
src/app/contact/page.tsx
Normal file
263
src/app/contact/page.tsx
Normal file
|
|
@ -0,0 +1,263 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import {
|
||||||
|
Mail,
|
||||||
|
Linkedin,
|
||||||
|
MapPin,
|
||||||
|
Globe,
|
||||||
|
Send,
|
||||||
|
ArrowRight,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { GlassCard } from "@/components/GlassCard";
|
||||||
|
import { SectionWrapper, itemVariants } from "@/components/SectionWrapper";
|
||||||
|
import { ParticleBackground } from "@/components/ParticleBackground";
|
||||||
|
|
||||||
|
export default function ContactPage() {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: "",
|
||||||
|
email: "",
|
||||||
|
company: "",
|
||||||
|
role: "",
|
||||||
|
message: "",
|
||||||
|
});
|
||||||
|
const [submitted, setSubmitted] = useState(false);
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
setSubmitted(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="relative min-h-[50vh] flex items-center overflow-hidden">
|
||||||
|
<ParticleBackground />
|
||||||
|
|
||||||
|
{/* Cinematic spotlights */}
|
||||||
|
<div className="absolute inset-0 pointer-events-none">
|
||||||
|
<div className="absolute top-0 right-0 w-[60%] h-[70%] bg-gradient-to-bl from-accent/[0.06] via-accent-blue/[0.03] to-transparent" />
|
||||||
|
<div className="absolute bottom-0 left-0 w-[40%] h-[50%] bg-gradient-to-tr from-accent-violet/[0.04] via-transparent to-transparent" />
|
||||||
|
<div className="absolute top-1/3 left-1/2 w-[500px] h-[500px] rounded-full bg-accent/[0.03] blur-[100px]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom fade */}
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-navy to-transparent z-[5]" />
|
||||||
|
|
||||||
|
<div className="relative z-10 mx-auto max-w-7xl px-6 pt-32 pb-20 text-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 40, filter: "blur(4px)" }}
|
||||||
|
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
|
||||||
|
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
|
||||||
|
>
|
||||||
|
<p className="text-xs tracking-[0.25em] uppercase text-accent mb-6 font-medium">
|
||||||
|
Get in Touch
|
||||||
|
</p>
|
||||||
|
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold font-display leading-[1.05] tracking-[-0.02em]">
|
||||||
|
Let's Build
|
||||||
|
<br />
|
||||||
|
<span className="bg-gradient-to-r from-accent via-accent-blue to-accent-violet bg-clip-text text-transparent">
|
||||||
|
Digital Trust Together
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<p className="mt-6 text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed">
|
||||||
|
Ready to see how KOBIL can transform your organization's
|
||||||
|
digital trust infrastructure? Get in touch.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Contact Form + Info */}
|
||||||
|
<SectionWrapper>
|
||||||
|
<div className="grid lg:grid-cols-5 gap-12">
|
||||||
|
{/* Form */}
|
||||||
|
<motion.div variants={itemVariants} className="lg:col-span-3">
|
||||||
|
<GlassCard className="p-8 md:p-10">
|
||||||
|
{submitted ? (
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<div className="w-16 h-16 rounded-lg bg-accent/[0.06] border border-accent/[0.12] backdrop-blur-sm flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Send className="h-8 w-8 text-accent" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-2xl font-bold font-display mb-3">
|
||||||
|
Message Sent!
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-300 max-w-md mx-auto leading-relaxed">
|
||||||
|
Thank you for reaching out. Our team will get back to you
|
||||||
|
within 24 hours.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<h2 className="text-2xl font-bold font-display mb-2 tracking-tight">
|
||||||
|
Book a Demo
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-400 mb-8 leading-relaxed">
|
||||||
|
Fill out the form and our team will reach out to schedule a
|
||||||
|
personalized demo.
|
||||||
|
</p>
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2 text-slate-300">
|
||||||
|
Full Name *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFormData({ ...formData, name: e.target.value })
|
||||||
|
}
|
||||||
|
className="w-full px-4 py-3 rounded-lg bg-white/[0.04] border border-white/[0.06] text-white placeholder:text-slate-500 focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/50 transition-colors"
|
||||||
|
placeholder="John Doe"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2 text-slate-300">
|
||||||
|
Work Email *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
required
|
||||||
|
value={formData.email}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFormData({ ...formData, email: e.target.value })
|
||||||
|
}
|
||||||
|
className="w-full px-4 py-3 rounded-lg bg-white/[0.04] border border-white/[0.06] text-white placeholder:text-slate-500 focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/50 transition-colors"
|
||||||
|
placeholder="john@company.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2 text-slate-300">
|
||||||
|
Company *
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
required
|
||||||
|
value={formData.company}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
company: e.target.value,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
className="w-full px-4 py-3 rounded-lg bg-white/[0.04] border border-white/[0.06] text-white placeholder:text-slate-500 focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/50 transition-colors"
|
||||||
|
placeholder="Acme Corp"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2 text-slate-300">
|
||||||
|
Role
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.role}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFormData({ ...formData, role: e.target.value })
|
||||||
|
}
|
||||||
|
className="w-full px-4 py-3 rounded-lg bg-white/[0.04] border border-white/[0.06] text-white placeholder:text-slate-500 focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/50 transition-colors"
|
||||||
|
placeholder="CISO, CTO, Product Manager..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium mb-2 text-slate-300">
|
||||||
|
Message
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
rows={4}
|
||||||
|
value={formData.message}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFormData({ ...formData, message: e.target.value })
|
||||||
|
}
|
||||||
|
className="w-full px-4 py-3 rounded-lg bg-white/[0.04] border border-white/[0.06] text-white placeholder:text-slate-500 focus:outline-none focus:border-accent/50 focus:ring-1 focus:ring-accent/50 transition-colors resize-none"
|
||||||
|
placeholder="Tell us about your use case or what you'd like to see in the demo..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full md:w-auto inline-flex items-center justify-center px-8 py-3 text-sm font-semibold rounded-lg bg-accent text-navy hover:bg-accent/90 transition-colors"
|
||||||
|
>
|
||||||
|
Send Message <ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</GlassCard>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Contact Info */}
|
||||||
|
<motion.div
|
||||||
|
variants={itemVariants}
|
||||||
|
className="lg:col-span-2 space-y-6"
|
||||||
|
>
|
||||||
|
<GlassCard className="p-6" hover={false}>
|
||||||
|
<h3 className="text-lg font-semibold mb-4 tracking-tight">Get in Touch</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<a
|
||||||
|
href="mailto:info@kobil.com"
|
||||||
|
className="flex items-center gap-3 text-slate-300 hover:text-accent transition-colors"
|
||||||
|
>
|
||||||
|
<Mail className="h-5 w-5" />
|
||||||
|
<span>info@kobil.com</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://linkedin.com/company/kobil"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center gap-3 text-slate-300 hover:text-accent transition-colors"
|
||||||
|
>
|
||||||
|
<Linkedin className="h-5 w-5" />
|
||||||
|
<span>KOBIL on LinkedIn</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
|
||||||
|
<GlassCard className="p-6" hover={false}>
|
||||||
|
<h3 className="text-lg font-semibold mb-4 tracking-tight">Headquarters</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-start gap-3 text-slate-300">
|
||||||
|
<MapPin className="h-5 w-5 flex-shrink-0 mt-0.5" />
|
||||||
|
<div>
|
||||||
|
<p>KOBIL GmbH</p>
|
||||||
|
<p>Worms, Germany</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-3 text-slate-300">
|
||||||
|
<Globe className="h-5 w-5" />
|
||||||
|
<span>Serving 50+ countries worldwide</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
|
||||||
|
<GlassCard className="p-6" hover={false}>
|
||||||
|
<h3 className="text-lg font-semibold mb-3 tracking-tight">Quick Facts</h3>
|
||||||
|
<ul className="space-y-3 text-sm text-slate-400">
|
||||||
|
<li className="flex items-center gap-2">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-accent" />
|
||||||
|
Founded in Germany, trusted globally
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-accent" />
|
||||||
|
25+ years of cybersecurity innovation
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-accent" />
|
||||||
|
100M+ identities secured worldwide
|
||||||
|
</li>
|
||||||
|
<li className="flex items-center gap-2">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-accent" />
|
||||||
|
ISO 27001, eIDAS, PSD2 compliant
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</GlassCard>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,26 +1,137 @@
|
||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
|
|
||||||
:root {
|
|
||||||
--background: #ffffff;
|
|
||||||
--foreground: #171717;
|
|
||||||
}
|
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--color-background: var(--background);
|
--color-navy: #0A0F2E;
|
||||||
--color-foreground: var(--foreground);
|
--color-navy-light: #111640;
|
||||||
--font-sans: var(--font-geist-sans);
|
--color-navy-mid: #0D1235;
|
||||||
--font-mono: var(--font-geist-mono);
|
--color-accent: #00D4FF;
|
||||||
|
--color-accent-blue: #0088FF;
|
||||||
|
--color-accent-violet: #6C63FF;
|
||||||
|
--color-text-secondary: #94A3B8;
|
||||||
|
--color-glass-border: rgba(255, 255, 255, 0.06);
|
||||||
|
--color-glass-bg: rgba(17, 22, 64, 0.5);
|
||||||
|
|
||||||
|
--font-sans: "Inter", system-ui, sans-serif;
|
||||||
|
--font-display: "Space Grotesk", system-ui, sans-serif;
|
||||||
|
|
||||||
|
--animate-float: float 8s ease-in-out infinite;
|
||||||
|
--animate-float-slow: float-slow 12s ease-in-out infinite;
|
||||||
|
--animate-glow-pulse: glow-pulse 3s ease-in-out infinite;
|
||||||
|
--animate-fade-in-up: fade-in-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||||
|
--animate-shimmer: shimmer 2.5s linear infinite;
|
||||||
|
--animate-spin-slow: spin 20s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
/* ── Keyframes ── */
|
||||||
:root {
|
@keyframes float {
|
||||||
--background: #0a0a0a;
|
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||||
--foreground: #ededed;
|
33% { transform: translateY(-12px) rotate(0.5deg); }
|
||||||
|
66% { transform: translateY(-6px) rotate(-0.3deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float-slow {
|
||||||
|
0%, 100% { transform: translateY(0px) scale(1); }
|
||||||
|
50% { transform: translateY(-20px) scale(1.02); }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes glow-pulse {
|
||||||
|
0%, 100% { opacity: 0.4; }
|
||||||
|
50% { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in-up {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(40px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
@keyframes shimmer {
|
||||||
background: var(--background);
|
0% { background-position: -200% 0; }
|
||||||
color: var(--foreground);
|
100% { background-position: 200% 0; }
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
}
|
||||||
|
|
||||||
|
@keyframes gradient-mesh {
|
||||||
|
0% { background-position: 0% 50%; }
|
||||||
|
50% { background-position: 100% 50%; }
|
||||||
|
100% { background-position: 0% 50%; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spotlight-drift {
|
||||||
|
0%, 100% { transform: translate(0, 0) scale(1); }
|
||||||
|
25% { transform: translate(3%, -2%) scale(1.05); }
|
||||||
|
50% { transform: translate(-2%, 3%) scale(0.98); }
|
||||||
|
75% { transform: translate(1%, -1%) scale(1.02); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Base ── */
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #0A0F2E;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: "Inter", system-ui, sans-serif;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Noise texture overlay on body ── */
|
||||||
|
body::before {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 9999;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0.035;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: 256px 256px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Cinematic spotlight ambient layer ── */
|
||||||
|
body::after {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
z-index: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 80% 60% at 75% 15%, rgba(0, 212, 255, 0.06) 0%, transparent 60%),
|
||||||
|
radial-gradient(ellipse 60% 50% at 20% 85%, rgba(108, 99, 255, 0.04) 0%, transparent 55%),
|
||||||
|
radial-gradient(ellipse 40% 40% at 50% 50%, rgba(0, 136, 255, 0.02) 0%, transparent 50%);
|
||||||
|
animation: spotlight-drift 20s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Scrollbar ── */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: #060920;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: #1a2050;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #00D4FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Selection ── */
|
||||||
|
::selection {
|
||||||
|
background: rgba(0, 212, 255, 0.25);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Logo white filter ── */
|
||||||
|
.logo-white {
|
||||||
|
filter: brightness(0) invert(1);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
244
src/app/industries/page.tsx
Normal file
244
src/app/industries/page.tsx
Normal file
|
|
@ -0,0 +1,244 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import {
|
||||||
|
Landmark,
|
||||||
|
Building2,
|
||||||
|
HeartPulse,
|
||||||
|
ShieldCheck,
|
||||||
|
Factory,
|
||||||
|
Bot,
|
||||||
|
ArrowRight,
|
||||||
|
Check,
|
||||||
|
type LucideIcon,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { GlassCard } from "@/components/GlassCard";
|
||||||
|
import { GlowingButton } from "@/components/GlowingButton";
|
||||||
|
import { SectionWrapper, itemVariants } from "@/components/SectionWrapper";
|
||||||
|
import { ParticleBackground } from "@/components/ParticleBackground";
|
||||||
|
|
||||||
|
interface Industry {
|
||||||
|
icon: LucideIcon;
|
||||||
|
name: string;
|
||||||
|
badgeClass: string;
|
||||||
|
checkClass: string;
|
||||||
|
valueProp: string;
|
||||||
|
useCases: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const industries: Industry[] = [
|
||||||
|
{
|
||||||
|
icon: Landmark,
|
||||||
|
name: "Banking & Finance",
|
||||||
|
badgeClass:
|
||||||
|
"bg-accent/[0.06] border-accent/[0.12] text-accent",
|
||||||
|
checkClass: "text-accent",
|
||||||
|
valueProp:
|
||||||
|
"Protect every transaction. Verify every customer. Meet every regulation — without friction.",
|
||||||
|
useCases: [
|
||||||
|
"PSD2-compliant strong customer authentication",
|
||||||
|
"Mobile banking security & transaction signing",
|
||||||
|
"KYC/AML identity verification at onboarding",
|
||||||
|
"Secure customer communication channels",
|
||||||
|
"Digital contract & document signing",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Building2,
|
||||||
|
name: "Government & Public Sector",
|
||||||
|
badgeClass:
|
||||||
|
"bg-accent-blue/[0.06] border-accent-blue/[0.12] text-accent-blue",
|
||||||
|
checkClass: "text-accent-blue",
|
||||||
|
valueProp:
|
||||||
|
"Deliver citizen-grade digital services with sovereign security and full regulatory compliance.",
|
||||||
|
useCases: [
|
||||||
|
"National digital identity programs",
|
||||||
|
"Secure citizen-government communication",
|
||||||
|
"eGovernment document signing",
|
||||||
|
"Cross-border identity verification (eIDAS)",
|
||||||
|
"Classified information access control",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: HeartPulse,
|
||||||
|
name: "Healthcare",
|
||||||
|
badgeClass:
|
||||||
|
"bg-accent-violet/[0.06] border-accent-violet/[0.12] text-accent-violet",
|
||||||
|
checkClass: "text-accent-violet",
|
||||||
|
valueProp:
|
||||||
|
"Protect patient data. Secure provider access. Enable trusted telemedicine at scale.",
|
||||||
|
useCases: [
|
||||||
|
"HIPAA-compliant patient authentication",
|
||||||
|
"Electronic health record access control",
|
||||||
|
"Telemedicine identity verification",
|
||||||
|
"Digital prescription signing",
|
||||||
|
"Secure provider-to-provider messaging",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: ShieldCheck,
|
||||||
|
name: "Insurance",
|
||||||
|
badgeClass:
|
||||||
|
"bg-accent/[0.06] border-accent/[0.12] text-accent",
|
||||||
|
checkClass: "text-accent",
|
||||||
|
valueProp:
|
||||||
|
"Accelerate claims, reduce fraud, and deliver seamless digital experiences — securely.",
|
||||||
|
useCases: [
|
||||||
|
"Digital policy signing & renewal",
|
||||||
|
"Claims authentication & fraud prevention",
|
||||||
|
"Secure agent-customer communication",
|
||||||
|
"Identity verification for underwriting",
|
||||||
|
"Mobile-first customer engagement",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Factory,
|
||||||
|
name: "Enterprise",
|
||||||
|
badgeClass:
|
||||||
|
"bg-accent-blue/[0.06] border-accent-blue/[0.12] text-accent-blue",
|
||||||
|
checkClass: "text-accent-blue",
|
||||||
|
valueProp:
|
||||||
|
"Unify identity, access, and communication security across your entire organization.",
|
||||||
|
useCases: [
|
||||||
|
"Zero-trust workforce authentication",
|
||||||
|
"Secure internal communications",
|
||||||
|
"Digital contract & procurement signing",
|
||||||
|
"Partner & vendor identity verification",
|
||||||
|
"Privileged access management",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Bot,
|
||||||
|
name: "AI-First Companies",
|
||||||
|
badgeClass:
|
||||||
|
"bg-accent-violet/[0.06] border-accent-violet/[0.12] text-accent-violet",
|
||||||
|
checkClass: "text-accent-violet",
|
||||||
|
valueProp:
|
||||||
|
"Build trust into your AI products from day one. Give your agents verifiable identities and accountability.",
|
||||||
|
useCases: [
|
||||||
|
"AI agent identity & credential management",
|
||||||
|
"Autonomous action authorization",
|
||||||
|
"Human-in-the-loop verification workflows",
|
||||||
|
"Agent-to-agent trust protocols",
|
||||||
|
"Compliance & audit trail automation",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function IndustriesPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="relative min-h-[60vh] flex items-center overflow-hidden">
|
||||||
|
<ParticleBackground />
|
||||||
|
|
||||||
|
{/* Cinematic spotlights */}
|
||||||
|
<div className="absolute inset-0 pointer-events-none">
|
||||||
|
<div className="absolute top-0 right-0 w-[60%] h-[70%] bg-gradient-to-bl from-accent/[0.06] via-accent-blue/[0.03] to-transparent" />
|
||||||
|
<div className="absolute bottom-0 left-0 w-[40%] h-[50%] bg-gradient-to-tr from-accent-violet/[0.04] via-transparent to-transparent" />
|
||||||
|
<div className="absolute top-1/3 left-1/2 w-[500px] h-[500px] rounded-full bg-accent-blue/[0.03] blur-[100px]" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom fade */}
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-navy to-transparent z-[5]" />
|
||||||
|
|
||||||
|
<div className="relative z-10 mx-auto max-w-7xl px-6 pt-32 pb-20 text-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 40, filter: "blur(4px)" }}
|
||||||
|
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
|
||||||
|
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
|
||||||
|
>
|
||||||
|
<p className="text-xs tracking-[0.25em] uppercase text-accent mb-6 font-medium">
|
||||||
|
Industries
|
||||||
|
</p>
|
||||||
|
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold font-display leading-[1.05] tracking-[-0.02em]">
|
||||||
|
Trusted Across
|
||||||
|
<br />
|
||||||
|
<span className="bg-gradient-to-r from-accent via-accent-blue to-accent-violet bg-clip-text text-transparent">
|
||||||
|
Every Industry
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<p className="mt-6 text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed">
|
||||||
|
From highly regulated financial services to cutting-edge AI
|
||||||
|
companies, KOBIL delivers digital trust infrastructure that meets
|
||||||
|
the unique demands of every sector.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Industries */}
|
||||||
|
{industries.map((industry, index) => (
|
||||||
|
<SectionWrapper
|
||||||
|
key={industry.name}
|
||||||
|
className={index % 2 === 0 ? "bg-navy-mid/50" : ""}
|
||||||
|
>
|
||||||
|
<div className="grid lg:grid-cols-2 gap-12 items-start">
|
||||||
|
<motion.div variants={itemVariants}>
|
||||||
|
<div
|
||||||
|
className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg border backdrop-blur-sm text-[13px] font-medium tracking-wide mb-6 ${industry.badgeClass}`}
|
||||||
|
>
|
||||||
|
<industry.icon className="h-4 w-4" />
|
||||||
|
{industry.name}
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold font-display mb-4 tracking-tight">
|
||||||
|
{industry.name}
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-300 text-lg leading-relaxed">
|
||||||
|
{industry.valueProp}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div variants={itemVariants}>
|
||||||
|
<GlassCard className="p-8">
|
||||||
|
<h3 className="text-sm font-semibold text-slate-400 uppercase tracking-wider mb-6">
|
||||||
|
Key Use Cases
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-4">
|
||||||
|
{industry.useCases.map((uc) => (
|
||||||
|
<li key={uc} className="flex items-start gap-3">
|
||||||
|
<Check
|
||||||
|
className={`h-5 w-5 flex-shrink-0 mt-0.5 ${industry.checkClass}`}
|
||||||
|
/>
|
||||||
|
<span className="text-slate-300">{uc}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</GlassCard>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* 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">
|
||||||
|
Don't See Your Industry?
|
||||||
|
</h2>
|
||||||
|
<p className="mt-6 text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
|
||||||
|
KOBIL's trust platform is adaptable to any sector that
|
||||||
|
requires verified identity, secure communication, or digital
|
||||||
|
signatures. Let's talk about your specific needs.
|
||||||
|
</p>
|
||||||
|
<div className="mt-10">
|
||||||
|
<GlowingButton href="/contact">
|
||||||
|
Book a Demo <ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</GlowingButton>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,20 +1,39 @@
|
||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Inter, Space_Grotesk } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
import { Navbar } from "@/components/Navbar";
|
||||||
|
import { Footer } from "@/components/Footer";
|
||||||
|
import { NoiseOverlay } from "@/components/NoiseOverlay";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const inter = Inter({
|
||||||
variable: "--font-geist-sans",
|
variable: "--font-inter",
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
});
|
});
|
||||||
|
|
||||||
const geistMono = Geist_Mono({
|
const spaceGrotesk = Space_Grotesk({
|
||||||
variable: "--font-geist-mono",
|
variable: "--font-space-grotesk",
|
||||||
subsets: ["latin"],
|
subsets: ["latin"],
|
||||||
});
|
});
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Create Next App",
|
title: "KOBIL | The Digital Trust Platform",
|
||||||
description: "Generated by create next app",
|
description:
|
||||||
|
"One platform for identity, communication, signatures, and payments. Trusted by governments and enterprises in 50+ countries for 25+ years.",
|
||||||
|
keywords: [
|
||||||
|
"digital trust",
|
||||||
|
"cybersecurity",
|
||||||
|
"identity verification",
|
||||||
|
"digital signatures",
|
||||||
|
"secure communication",
|
||||||
|
"AI agents",
|
||||||
|
"KOBIL",
|
||||||
|
],
|
||||||
|
openGraph: {
|
||||||
|
title: "KOBIL | The Digital Trust Platform",
|
||||||
|
description:
|
||||||
|
"One platform for identity, communication, signatures, and payments.",
|
||||||
|
type: "website",
|
||||||
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
|
|
@ -23,11 +42,17 @@ export default function RootLayout({
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}>) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en" className="dark">
|
||||||
<body
|
<body
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
className={`${inter.variable} ${spaceGrotesk.variable} font-sans antialiased bg-navy text-white`}
|
||||||
>
|
>
|
||||||
{children}
|
<NoiseOverlay />
|
||||||
|
{/* Cinematic fixed lighting — persists across all pages */}
|
||||||
|
<div className="fixed top-[-10%] right-[0%] w-[800px] h-[800px] bg-cyan-500/15 blur-[180px] rounded-full pointer-events-none z-0" />
|
||||||
|
<div className="fixed bottom-0 left-[-10%] w-[600px] h-[600px] bg-indigo-600/10 blur-[150px] rounded-full pointer-events-none z-0" />
|
||||||
|
<Navbar />
|
||||||
|
<main className="relative z-[1]">{children}</main>
|
||||||
|
<Footer />
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
515
src/app/page.tsx
515
src/app/page.tsx
|
|
@ -1,65 +1,488 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
import Image from "next/image";
|
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() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
<>
|
||||||
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
{/* ════════════════════════════════════════════
|
||||||
|
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
|
<Image
|
||||||
className="dark:invert"
|
src="/images/hero-home.jpg"
|
||||||
src="/next.svg"
|
alt="Digital trust ecosystem"
|
||||||
alt="Next.js logo"
|
fill
|
||||||
width={100}
|
className="object-cover"
|
||||||
height={20}
|
|
||||||
priority
|
priority
|
||||||
/>
|
/>
|
||||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
{/* Cyan tint overlay */}
|
||||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
<div className="absolute inset-0 bg-gradient-to-br from-accent/[0.06] via-transparent to-accent-violet/[0.04] mix-blend-screen" />
|
||||||
To get started, edit the page.tsx file.
|
</motion.div>
|
||||||
</h1>
|
|
||||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
{/* Cinematic spotlights */}
|
||||||
Looking for a starting point or more instructions? Head over to{" "}
|
<div className="absolute inset-0 pointer-events-none">
|
||||||
<a
|
<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" />
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
<div className="absolute bottom-0 left-0 w-[50%] h-[60%] bg-gradient-to-tr from-accent-violet/[0.05] via-transparent to-transparent" />
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
</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"
|
||||||
>
|
>
|
||||||
Templates
|
<motion.div variants={heroChild}>
|
||||||
</a>{" "}
|
<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">
|
||||||
or the{" "}
|
<span className="w-1.5 h-1.5 rounded-full bg-accent animate-glow-pulse" />
|
||||||
<a
|
Trusted by 100M+ identities worldwide
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
</div>
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
</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]"
|
||||||
>
|
>
|
||||||
Learning
|
One Platform.
|
||||||
</a>{" "}
|
<br />
|
||||||
center.
|
<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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
</div>
|
||||||
<a
|
</motion.div>
|
||||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
))}
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
</div>
|
||||||
target="_blank"
|
</SectionWrapper>
|
||||||
rel="noopener noreferrer"
|
|
||||||
|
{/* ════════════════════════════════════════════
|
||||||
|
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
|
<Image
|
||||||
className="dark:invert"
|
src="/images/hero-ai-agents.jpg"
|
||||||
src="/vercel.svg"
|
alt="AI Agents"
|
||||||
alt="Vercel logomark"
|
fill
|
||||||
width={16}
|
className="object-cover"
|
||||||
height={16}
|
|
||||||
/>
|
/>
|
||||||
Deploy Now
|
<div className="absolute inset-0 bg-gradient-to-r from-navy-mid/40 to-transparent mix-blend-multiply" />
|
||||||
</a>
|
</div>
|
||||||
<a
|
<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" />
|
||||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
</motion.div>
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
</div>
|
||||||
target="_blank"
|
</SectionWrapper>
|
||||||
rel="noopener noreferrer"
|
|
||||||
|
{/* ════════════════════════════════════════════
|
||||||
|
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] }}
|
||||||
>
|
>
|
||||||
Documentation
|
<h2 className="text-3xl md:text-5xl lg:text-6xl font-bold font-display tracking-tight">
|
||||||
</a>
|
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>
|
</div>
|
||||||
</main>
|
</motion.div>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
448
src/app/platform/page.tsx
Normal file
448
src/app/platform/page.tsx
Normal file
|
|
@ -0,0 +1,448 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import {
|
||||||
|
Shield,
|
||||||
|
MessageSquareLock,
|
||||||
|
FileSignature,
|
||||||
|
Wallet,
|
||||||
|
ArrowRight,
|
||||||
|
Check,
|
||||||
|
Layers,
|
||||||
|
Zap,
|
||||||
|
Globe,
|
||||||
|
Lock,
|
||||||
|
Smartphone,
|
||||||
|
Cloud,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { GlassCard } from "@/components/GlassCard";
|
||||||
|
import { GlowingButton } from "@/components/GlowingButton";
|
||||||
|
import { SectionWrapper, itemVariants } from "@/components/SectionWrapper";
|
||||||
|
import { ParticleBackground } from "@/components/ParticleBackground";
|
||||||
|
|
||||||
|
const principles = [
|
||||||
|
{
|
||||||
|
icon: Lock,
|
||||||
|
title: "Identity-First Architecture",
|
||||||
|
description: "Every action starts with verified identity. No exceptions.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Layers,
|
||||||
|
title: "Unified Platform",
|
||||||
|
description:
|
||||||
|
"One platform replaces dozens of point solutions. Simpler, safer, stronger.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Zap,
|
||||||
|
title: "Real-Time Trust",
|
||||||
|
description: "Continuous verification, not one-time checks. Trust is live.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Globe,
|
||||||
|
title: "Global Compliance",
|
||||||
|
description: "eIDAS, PSD2, GDPR, HIPAA — built in, not bolted on.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const identityFeatures = [
|
||||||
|
"Multi-factor authentication (MFA)",
|
||||||
|
"Biometric verification (face, fingerprint, voice)",
|
||||||
|
"Digital identity wallets",
|
||||||
|
"Identity lifecycle management",
|
||||||
|
"Zero-trust access control",
|
||||||
|
"Real-time risk scoring",
|
||||||
|
];
|
||||||
|
|
||||||
|
const communicationFeatures = [
|
||||||
|
"End-to-end encrypted messaging",
|
||||||
|
"Secure video conferencing",
|
||||||
|
"Verified sender identity",
|
||||||
|
"Tamper-proof message delivery",
|
||||||
|
"Encrypted file sharing",
|
||||||
|
"Audit trail for all communications",
|
||||||
|
];
|
||||||
|
|
||||||
|
const signatureFeatures = [
|
||||||
|
"Qualified electronic signatures (QES)",
|
||||||
|
"Advanced electronic signatures (AES)",
|
||||||
|
"eIDAS-compliant & court-admissible",
|
||||||
|
"Bulk signing workflows",
|
||||||
|
"Timestamp authority integration",
|
||||||
|
"Complete audit trails",
|
||||||
|
];
|
||||||
|
|
||||||
|
const paymentFeatures = [
|
||||||
|
"Strong customer authentication (SCA)",
|
||||||
|
"PSD2-compliant authorization",
|
||||||
|
"Transaction signing & verification",
|
||||||
|
"Multi-channel payment security",
|
||||||
|
"Real-time fraud detection",
|
||||||
|
"Secure mobile payments",
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function PlatformPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="relative min-h-[70vh] flex items-center overflow-hidden">
|
||||||
|
<ParticleBackground />
|
||||||
|
<div className="absolute inset-0 pointer-events-none">
|
||||||
|
<div className="absolute top-0 right-0 w-[60%] h-[70%] bg-gradient-to-bl from-accent/[0.06] via-transparent to-transparent" />
|
||||||
|
<div className="absolute bottom-0 left-0 w-[40%] h-[50%] bg-gradient-to-tr from-accent-blue/[0.04] via-transparent to-transparent" />
|
||||||
|
</div>
|
||||||
|
<div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-navy to-transparent z-[5]" />
|
||||||
|
|
||||||
|
<div className="relative z-10 mx-auto max-w-7xl px-6 pt-32 pb-20 text-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 40, filter: "blur(4px)" }}
|
||||||
|
animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
|
||||||
|
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
|
||||||
|
>
|
||||||
|
<p className="text-xs tracking-[0.25em] uppercase text-accent mb-6 font-medium">
|
||||||
|
The Platform
|
||||||
|
</p>
|
||||||
|
<h1 className="text-5xl md:text-6xl lg:text-7xl font-bold font-display leading-[1.05] tracking-[-0.02em]">
|
||||||
|
The Trust Platform
|
||||||
|
<br />
|
||||||
|
<span className="bg-gradient-to-r from-accent via-accent-blue to-accent-violet bg-clip-text text-transparent">
|
||||||
|
That Does It All
|
||||||
|
</span>
|
||||||
|
</h1>
|
||||||
|
<p className="mt-6 text-lg md:text-xl text-slate-300 max-w-2xl mx-auto leading-relaxed">
|
||||||
|
Identity, communication, signatures, and payments — unified in a
|
||||||
|
single, identity-first platform trusted by enterprises and
|
||||||
|
governments worldwide.
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Architecture Principles */}
|
||||||
|
<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">
|
||||||
|
Core Architecture
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
||||||
|
Identity-First{" "}
|
||||||
|
<span className="bg-gradient-to-r from-accent to-accent-blue bg-clip-text text-transparent">
|
||||||
|
Architecture
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||||
|
Every capability starts with a verified identity. This
|
||||||
|
isn't just a feature — it's the foundation.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||||
|
{principles.map((p) => (
|
||||||
|
<motion.div key={p.title} variants={itemVariants}>
|
||||||
|
<GlassCard className="p-6 h-full">
|
||||||
|
<p.icon className="h-7 w-7 text-accent mb-4 opacity-80" />
|
||||||
|
<h3 className="text-base font-semibold mb-2 tracking-tight">
|
||||||
|
{p.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-400 text-sm leading-relaxed">
|
||||||
|
{p.description}
|
||||||
|
</p>
|
||||||
|
</GlassCard>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
|
||||||
|
{/* Pillar 1: Identity */}
|
||||||
|
<SectionWrapper id="identity">
|
||||||
|
<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/[0.06] border border-accent/[0.12] backdrop-blur-sm text-accent text-[13px] font-medium tracking-wide mb-6">
|
||||||
|
<Shield className="h-4 w-4" />
|
||||||
|
Pillar 1
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold font-display tracking-tight">
|
||||||
|
Digital Identity &{" "}
|
||||||
|
<span className="text-accent">Authentication</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-slate-300 text-lg leading-relaxed">
|
||||||
|
Know exactly who you're dealing with — every time, every
|
||||||
|
channel, every device. From onboarding to ongoing verification,
|
||||||
|
KOBIL provides the identity layer your organization needs.
|
||||||
|
</p>
|
||||||
|
<ul className="mt-8 space-y-3">
|
||||||
|
{identityFeatures.map((f) => (
|
||||||
|
<li key={f} className="flex items-center gap-3 text-sm">
|
||||||
|
<Check className="h-4 w-4 text-accent flex-shrink-0" />
|
||||||
|
<span className="text-slate-300">{f}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
variants={itemVariants}
|
||||||
|
className="relative aspect-video overflow-hidden"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="relative w-full h-full"
|
||||||
|
style={{
|
||||||
|
maskImage: "linear-gradient(to left, transparent 0%, black 15%, black 85%, transparent 100%)",
|
||||||
|
WebkitMaskImage: "linear-gradient(to left, transparent 0%, black 15%, black 85%, transparent 100%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/images/section-identity.jpg"
|
||||||
|
alt="Digital Identity"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
|
||||||
|
{/* Pillar 2: Communication */}
|
||||||
|
<SectionWrapper className="bg-navy-mid/50" id="communication">
|
||||||
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<motion.div
|
||||||
|
variants={itemVariants}
|
||||||
|
className="relative aspect-video overflow-hidden order-2 lg:order-1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="relative w-full h-full"
|
||||||
|
style={{
|
||||||
|
maskImage: "linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)",
|
||||||
|
WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/images/section-communication.jpg"
|
||||||
|
alt="Secure Communication"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div variants={itemVariants} className="order-1 lg:order-2">
|
||||||
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-accent-blue/[0.06] border border-accent-blue/[0.12] backdrop-blur-sm text-accent-blue text-[13px] font-medium tracking-wide mb-6">
|
||||||
|
<MessageSquareLock className="h-4 w-4" />
|
||||||
|
Pillar 2
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold font-display tracking-tight">
|
||||||
|
Secure{" "}
|
||||||
|
<span className="text-accent-blue">Communication</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-slate-300 text-lg leading-relaxed">
|
||||||
|
Every message verified. Every participant authenticated. From
|
||||||
|
encrypted chat to secure video, KOBIL ensures your communications
|
||||||
|
are truly private and tamper-proof.
|
||||||
|
</p>
|
||||||
|
<ul className="mt-8 space-y-3">
|
||||||
|
{communicationFeatures.map((f) => (
|
||||||
|
<li key={f} className="flex items-center gap-3 text-sm">
|
||||||
|
<Check className="h-4 w-4 text-accent-blue flex-shrink-0" />
|
||||||
|
<span className="text-slate-300">{f}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
|
||||||
|
{/* Pillar 3: Signatures */}
|
||||||
|
<SectionWrapper id="signatures">
|
||||||
|
<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">
|
||||||
|
<FileSignature className="h-4 w-4" />
|
||||||
|
Pillar 3
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold font-display tracking-tight">
|
||||||
|
Digital{" "}
|
||||||
|
<span className="text-accent-violet">Signatures</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-slate-300 text-lg leading-relaxed">
|
||||||
|
Legally binding. Instantly verifiable. Court-admissible. KOBIL
|
||||||
|
digital signatures meet the highest regulatory standards while
|
||||||
|
delivering a seamless signing experience.
|
||||||
|
</p>
|
||||||
|
<ul className="mt-8 space-y-3">
|
||||||
|
{signatureFeatures.map((f) => (
|
||||||
|
<li key={f} className="flex items-center gap-3 text-sm">
|
||||||
|
<Check className="h-4 w-4 text-accent-violet flex-shrink-0" />
|
||||||
|
<span className="text-slate-300">{f}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div
|
||||||
|
variants={itemVariants}
|
||||||
|
className="relative aspect-video overflow-hidden"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="relative w-full h-full"
|
||||||
|
style={{
|
||||||
|
maskImage: "linear-gradient(to left, transparent 0%, black 15%, black 85%, transparent 100%)",
|
||||||
|
WebkitMaskImage: "linear-gradient(to left, transparent 0%, black 15%, black 85%, transparent 100%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/images/section-signatures.jpg"
|
||||||
|
alt="Digital Signatures"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
|
||||||
|
{/* Pillar 4: Payments */}
|
||||||
|
<SectionWrapper className="bg-navy-mid/50" id="payments">
|
||||||
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||||
|
<motion.div
|
||||||
|
variants={itemVariants}
|
||||||
|
className="relative aspect-video overflow-hidden order-2 lg:order-1"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="relative w-full h-full"
|
||||||
|
style={{
|
||||||
|
maskImage: "linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)",
|
||||||
|
WebkitMaskImage: "linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/images/section-payments.jpg"
|
||||||
|
alt="Secure Payments"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
<motion.div variants={itemVariants} className="order-1 lg:order-2">
|
||||||
|
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-accent/[0.06] border border-accent/[0.12] backdrop-blur-sm text-accent text-[13px] font-medium tracking-wide mb-6">
|
||||||
|
<Wallet className="h-4 w-4" />
|
||||||
|
Pillar 4
|
||||||
|
</div>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold font-display tracking-tight">
|
||||||
|
Secure{" "}
|
||||||
|
<span className="text-accent">Payments</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-slate-300 text-lg leading-relaxed">
|
||||||
|
Authorize every transaction with confidence. KOBIL delivers
|
||||||
|
PSD2-compliant strong customer authentication with real-time fraud
|
||||||
|
detection and multi-channel support.
|
||||||
|
</p>
|
||||||
|
<ul className="mt-8 space-y-3">
|
||||||
|
{paymentFeatures.map((f) => (
|
||||||
|
<li key={f} className="flex items-center gap-3 text-sm">
|
||||||
|
<Check className="h-4 w-4 text-accent flex-shrink-0" />
|
||||||
|
<span className="text-slate-300">{f}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
|
||||||
|
{/* Integration */}
|
||||||
|
<SectionWrapper>
|
||||||
|
<motion.div className="text-center mb-16" variants={itemVariants}>
|
||||||
|
<p className="text-xs tracking-[0.25em] uppercase text-accent mb-4 font-medium">
|
||||||
|
Integration
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
||||||
|
Two Paths to{" "}
|
||||||
|
<span className="bg-gradient-to-r from-accent to-accent-blue bg-clip-text text-transparent">
|
||||||
|
Trust
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||||
|
Whether you need a full platform or modular APIs, KOBIL adapts to
|
||||||
|
your architecture.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
<motion.div variants={itemVariants}>
|
||||||
|
<GlassCard className="p-8 h-full">
|
||||||
|
<Smartphone className="h-8 w-8 text-accent mb-4 opacity-80" />
|
||||||
|
<h3 className="text-xl font-semibold font-display tracking-tight mb-3">
|
||||||
|
KOBIL SDK & App
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-400 mb-6 leading-relaxed">
|
||||||
|
Deploy the full KOBIL experience with branded mobile apps and
|
||||||
|
SDKs. Pre-built UI components, biometric integration, and
|
||||||
|
offline capability out of the box.
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{["White-label mobile app", "iOS & Android SDKs", "Offline authentication", "Push notification triggers"].map((f) => (
|
||||||
|
<li key={f} className="flex items-center gap-2 text-sm text-slate-300">
|
||||||
|
<Check className="h-3 w-3 text-accent" />
|
||||||
|
{f}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</GlassCard>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div variants={itemVariants}>
|
||||||
|
<GlassCard className="p-8 h-full">
|
||||||
|
<Cloud className="h-8 w-8 text-accent-blue mb-4 opacity-80" />
|
||||||
|
<h3 className="text-xl font-semibold font-display tracking-tight mb-3">
|
||||||
|
KOBIL API Platform
|
||||||
|
</h3>
|
||||||
|
<p className="text-slate-400 mb-6 leading-relaxed">
|
||||||
|
Integrate KOBIL capabilities into your existing systems via
|
||||||
|
RESTful APIs. Full flexibility with enterprise-grade
|
||||||
|
reliability.
|
||||||
|
</p>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{["RESTful API endpoints", "Webhooks & event streams", "SSO & federation support", "Custom workflow builder"].map((f) => (
|
||||||
|
<li key={f} className="flex items-center gap-2 text-sm text-slate-300">
|
||||||
|
<Check className="h-3 w-3 text-accent-blue" />
|
||||||
|
{f}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</GlassCard>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<section className="relative py-32 overflow-hidden">
|
||||||
|
<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-[600px] h-[300px] bg-gradient-to-r from-accent/[0.04] via-accent-blue/[0.05] 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 font-bold font-display tracking-tight">
|
||||||
|
See the Platform in{" "}
|
||||||
|
<span className="text-accent">Action</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-6 text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
|
||||||
|
Schedule a personalized demo and discover how KOBIL can simplify
|
||||||
|
your trust infrastructure.
|
||||||
|
</p>
|
||||||
|
<div className="mt-10">
|
||||||
|
<GlowingButton href="/contact">
|
||||||
|
Book a Demo <ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</GlowingButton>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
339
src/app/security/page.tsx
Normal file
339
src/app/security/page.tsx
Normal file
|
|
@ -0,0 +1,339 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import {
|
||||||
|
Shield,
|
||||||
|
ArrowRight,
|
||||||
|
Lock,
|
||||||
|
Eye,
|
||||||
|
Server,
|
||||||
|
AlertTriangle,
|
||||||
|
Fingerprint,
|
||||||
|
ShieldAlert,
|
||||||
|
KeyRound,
|
||||||
|
Bug,
|
||||||
|
Wifi,
|
||||||
|
Smartphone,
|
||||||
|
Award,
|
||||||
|
Check,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { GlassCard } from "@/components/GlassCard";
|
||||||
|
import { GlowingButton } from "@/components/GlowingButton";
|
||||||
|
import { SectionWrapper, itemVariants } from "@/components/SectionWrapper";
|
||||||
|
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 securityLayers = [
|
||||||
|
{
|
||||||
|
icon: Fingerprint,
|
||||||
|
title: "Identity Layer",
|
||||||
|
description:
|
||||||
|
"Multi-factor authentication, biometric verification, and continuous identity assurance.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Lock,
|
||||||
|
title: "Encryption Layer",
|
||||||
|
description:
|
||||||
|
"End-to-end encryption for data at rest and in transit. AES-256 and TLS 1.3 standards.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Eye,
|
||||||
|
title: "Monitoring Layer",
|
||||||
|
description:
|
||||||
|
"Real-time threat detection, behavioral analytics, and anomaly detection across all channels.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Server,
|
||||||
|
title: "Infrastructure Layer",
|
||||||
|
description:
|
||||||
|
"Hardened cloud infrastructure with HSM-backed key management and geo-redundant deployment.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: ShieldAlert,
|
||||||
|
title: "Policy Layer",
|
||||||
|
description:
|
||||||
|
"Dynamic security policies, risk-based access control, and automated compliance enforcement.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: AlertTriangle,
|
||||||
|
title: "Response Layer",
|
||||||
|
description:
|
||||||
|
"Automated incident response, instant revocation, and forensic audit capabilities.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const threats = [
|
||||||
|
{ icon: KeyRound, name: "Credential Theft", status: "Mitigated" },
|
||||||
|
{ icon: Bug, name: "Malware & Ransomware", status: "Detected & Blocked" },
|
||||||
|
{ icon: Wifi, name: "Man-in-the-Middle", status: "Prevented" },
|
||||||
|
{ icon: Smartphone, name: "SIM Swapping", status: "Mitigated" },
|
||||||
|
{ icon: ShieldAlert, name: "Phishing Attacks", status: "Detected" },
|
||||||
|
{ icon: AlertTriangle, name: "Session Hijacking", status: "Prevented" },
|
||||||
|
{ icon: Eye, name: "Insider Threats", status: "Monitored" },
|
||||||
|
{ icon: Lock, name: "Data Exfiltration", status: "Blocked" },
|
||||||
|
{ icon: Server, name: "API Abuse", status: "Rate-Limited & Blocked" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const certifications = [
|
||||||
|
{
|
||||||
|
name: "ISO 27001",
|
||||||
|
description: "Information Security Management",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "eIDAS",
|
||||||
|
description: "EU Electronic Identification & Trust Services",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "PSD2",
|
||||||
|
description: "Payment Services Directive 2 Compliance",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "GDPR",
|
||||||
|
description: "General Data Protection Regulation",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "SOC 2 Type II",
|
||||||
|
description: "Service Organization Control",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Common Criteria",
|
||||||
|
description: "EAL4+ Certified Components",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function SecurityPage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{/* Hero */}
|
||||||
|
<section className="relative min-h-[70vh] flex items-center overflow-hidden">
|
||||||
|
<ParticleBackground />
|
||||||
|
|
||||||
|
{/* ── UNBOXED hero image — absolutely positioned background ── */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute top-0 right-0 h-full w-[60%] hidden lg:block"
|
||||||
|
initial={{ opacity: 0, scale: 1.02 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ duration: 1.4, delay: 0.3, ease: [0.16, 1, 0.3, 1] }}
|
||||||
|
style={{
|
||||||
|
maskImage: "linear-gradient(to left, black 40%, transparent 100%)",
|
||||||
|
WebkitMaskImage: "linear-gradient(to left, black 40%, transparent 100%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src="/images/hero-security.jpg"
|
||||||
|
alt="Security Architecture"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-tr from-accent/[0.06] via-transparent to-accent-blue/[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/[0.05] via-transparent to-transparent" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Glow orb behind headline */}
|
||||||
|
<div className="absolute top-[-20%] left-[-10%] w-[500px] h-[500px] bg-cyan-500/20 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]" />
|
||||||
|
|
||||||
|
<div className="relative z-10 mx-auto max-w-7xl px-6 pt-32 pb-20">
|
||||||
|
<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-accent/[0.06] border border-accent/[0.12] backdrop-blur-sm text-accent text-[13px] font-medium tracking-wide mb-8">
|
||||||
|
<Shield className="h-4 w-4" />
|
||||||
|
Enterprise-Grade Security
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div variants={heroChild}>
|
||||||
|
<p className="text-xs tracking-[0.25em] uppercase text-accent mb-6 font-medium">
|
||||||
|
Security Architecture
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.h1
|
||||||
|
variants={heroChild}
|
||||||
|
className="text-5xl md:text-6xl lg:text-7xl font-bold font-display leading-[1.05] tracking-[-0.02em]"
|
||||||
|
>
|
||||||
|
Security
|
||||||
|
<br />
|
||||||
|
<span className="bg-gradient-to-r from-accent via-accent-blue to-accent-violet bg-clip-text text-transparent">
|
||||||
|
That Thinks
|
||||||
|
</span>
|
||||||
|
</motion.h1>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
variants={heroChild}
|
||||||
|
className="mt-6 text-lg md:text-xl text-slate-300 max-w-lg leading-relaxed"
|
||||||
|
>
|
||||||
|
Multi-layered, AI-enhanced security architecture built on 25+
|
||||||
|
years of protecting the world's most sensitive digital
|
||||||
|
interactions.
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
<motion.div variants={heroChild} className="mt-10">
|
||||||
|
<GlowingButton href="/contact">
|
||||||
|
Book a Demo <ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</GlowingButton>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Security Architecture */}
|
||||||
|
<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">
|
||||||
|
Defense-in-Depth
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
||||||
|
Six Layers of{" "}
|
||||||
|
<span className="text-accent">Defense</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||||
|
Security isn't a feature — it's the architecture. Every
|
||||||
|
layer works together to create an impenetrable trust boundary.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{securityLayers.map((layer) => (
|
||||||
|
<motion.div key={layer.title} variants={itemVariants}>
|
||||||
|
<GlassCard className="p-6 h-full">
|
||||||
|
<layer.icon className="h-8 w-8 text-accent mb-4 opacity-80" />
|
||||||
|
<h3 className="text-lg font-semibold mb-2 tracking-tight">{layer.title}</h3>
|
||||||
|
<p className="text-slate-400 text-sm leading-relaxed">
|
||||||
|
{layer.description}
|
||||||
|
</p>
|
||||||
|
</GlassCard>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
|
||||||
|
{/* Threat Detection */}
|
||||||
|
<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">
|
||||||
|
Threat Intelligence
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
||||||
|
Threats We{" "}
|
||||||
|
<span className="text-accent">Neutralize</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||||
|
Real-time protection against the full spectrum of modern cyber
|
||||||
|
threats.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{threats.map((threat) => (
|
||||||
|
<motion.div key={threat.name} variants={itemVariants}>
|
||||||
|
<GlassCard className="p-5 h-full" hover={false}>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<threat.icon className="h-5 w-5 text-accent" />
|
||||||
|
<span className="font-medium text-sm">{threat.name}</span>
|
||||||
|
</div>
|
||||||
|
<span className="text-xs font-medium text-green-400 bg-green-400/[0.06] border border-green-400/[0.12] backdrop-blur-sm px-2 py-1 rounded-lg">
|
||||||
|
{threat.status}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
|
||||||
|
{/* Certifications */}
|
||||||
|
<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">
|
||||||
|
Compliance
|
||||||
|
</p>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-bold font-display tracking-tight">
|
||||||
|
Certified &{" "}
|
||||||
|
<span className="text-accent">Compliant</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-slate-300 max-w-2xl mx-auto text-lg leading-relaxed">
|
||||||
|
Meeting the highest security and compliance standards globally.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
|
||||||
|
{certifications.map((cert) => (
|
||||||
|
<motion.div key={cert.name} variants={itemVariants}>
|
||||||
|
<GlassCard className="p-6 text-center h-full">
|
||||||
|
<Award className="h-10 w-10 text-accent mx-auto mb-3 opacity-80" />
|
||||||
|
<h3 className="text-lg font-bold font-display tracking-tight">{cert.name}</h3>
|
||||||
|
<p className="text-slate-400 text-sm mt-1 leading-relaxed">
|
||||||
|
{cert.description}
|
||||||
|
</p>
|
||||||
|
</GlassCard>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</SectionWrapper>
|
||||||
|
|
||||||
|
{/* 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">
|
||||||
|
Security Questions?{" "}
|
||||||
|
<span className="text-accent">Let's Talk.</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-6 text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
|
||||||
|
Our security team is ready to walk you through our architecture,
|
||||||
|
certifications, and how we protect your most critical assets.
|
||||||
|
</p>
|
||||||
|
<div className="mt-10">
|
||||||
|
<GlowingButton href="/contact">
|
||||||
|
Book a Security Review{" "}
|
||||||
|
<ArrowRight className="ml-2 h-4 w-4" />
|
||||||
|
</GlowingButton>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
62
src/components/AnimatedCounter.tsx
Normal file
62
src/components/AnimatedCounter.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import { useInView } from "framer-motion";
|
||||||
|
|
||||||
|
interface AnimatedCounterProps {
|
||||||
|
target: number;
|
||||||
|
suffix?: string;
|
||||||
|
prefix?: string;
|
||||||
|
duration?: number;
|
||||||
|
label: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AnimatedCounter({
|
||||||
|
target,
|
||||||
|
suffix = "",
|
||||||
|
prefix = "",
|
||||||
|
duration = 2.5,
|
||||||
|
label,
|
||||||
|
}: AnimatedCounterProps) {
|
||||||
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
const isInView = useInView(ref, { once: true, margin: "-100px" });
|
||||||
|
const [count, setCount] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isInView) return;
|
||||||
|
|
||||||
|
let startTime: number;
|
||||||
|
const animate = (timestamp: number) => {
|
||||||
|
if (!startTime) startTime = timestamp;
|
||||||
|
const progress = Math.min(
|
||||||
|
(timestamp - startTime) / (duration * 1000),
|
||||||
|
1
|
||||||
|
);
|
||||||
|
const eased = 1 - Math.pow(1 - progress, 4);
|
||||||
|
setCount(Math.floor(eased * target));
|
||||||
|
|
||||||
|
if (progress < 1) {
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
} else {
|
||||||
|
setCount(target);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}, [isInView, target, duration]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={ref} className="text-center">
|
||||||
|
<div className="text-4xl md:text-5xl lg:text-6xl font-bold font-display tracking-tight">
|
||||||
|
<span className="bg-gradient-to-b from-white to-slate-400 bg-clip-text text-transparent">
|
||||||
|
{prefix}
|
||||||
|
{count}
|
||||||
|
{suffix}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="mt-3 text-sm text-slate-400 tracking-wide uppercase">
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
119
src/components/Footer.tsx
Normal file
119
src/components/Footer.tsx
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { Linkedin, Twitter } from "lucide-react";
|
||||||
|
|
||||||
|
const footerLinks = [
|
||||||
|
{
|
||||||
|
title: "Platform",
|
||||||
|
links: [
|
||||||
|
{ href: "/platform", label: "Overview" },
|
||||||
|
{ href: "/platform#identity", label: "Identity" },
|
||||||
|
{ href: "/platform#communication", label: "Communication" },
|
||||||
|
{ href: "/platform#signatures", label: "Signatures" },
|
||||||
|
{ href: "/platform#payments", label: "Payments" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Solutions",
|
||||||
|
links: [
|
||||||
|
{ href: "/ai-agents", label: "AI Agents" },
|
||||||
|
{ href: "/industries", label: "Industries" },
|
||||||
|
{ href: "/security", label: "Security" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Company",
|
||||||
|
links: [
|
||||||
|
{ href: "/contact", label: "Contact" },
|
||||||
|
{ href: "/contact", label: "Book a Demo" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="relative border-t border-white/[0.04] bg-[#060920]">
|
||||||
|
<div className="mx-auto max-w-7xl px-6 py-16">
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12">
|
||||||
|
{/* Logo & tagline */}
|
||||||
|
<div className="lg:col-span-2">
|
||||||
|
<Link href="/">
|
||||||
|
<Image
|
||||||
|
src="/kobil.svg"
|
||||||
|
alt="KOBIL"
|
||||||
|
width={100}
|
||||||
|
height={26}
|
||||||
|
className="logo-white opacity-80"
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
<p className="mt-4 text-slate-400 text-sm leading-relaxed max-w-xs">
|
||||||
|
The Digital Trust Platform. One platform for identity,
|
||||||
|
communication, signatures, and payments.
|
||||||
|
</p>
|
||||||
|
<p className="mt-6 text-slate-500 text-xs tracking-wide uppercase">
|
||||||
|
Headquartered in Germany. Trusted Worldwide.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-3 mt-4">
|
||||||
|
<a
|
||||||
|
href="https://linkedin.com/company/kobil"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="p-2 rounded-lg border border-white/[0.06] text-slate-500 hover:text-accent hover:border-accent/20 transition-all duration-300"
|
||||||
|
aria-label="LinkedIn"
|
||||||
|
>
|
||||||
|
<Linkedin size={16} />
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://x.com/kobil"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="p-2 rounded-lg border border-white/[0.06] text-slate-500 hover:text-accent hover:border-accent/20 transition-all duration-300"
|
||||||
|
aria-label="X (Twitter)"
|
||||||
|
>
|
||||||
|
<Twitter size={16} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Link columns */}
|
||||||
|
{footerLinks.map((column) => (
|
||||||
|
<div key={column.title}>
|
||||||
|
<h3 className="text-xs font-semibold text-slate-300 uppercase tracking-widest mb-5">
|
||||||
|
{column.title}
|
||||||
|
</h3>
|
||||||
|
<ul className="space-y-3">
|
||||||
|
{column.links.map((link) => (
|
||||||
|
<li key={link.label}>
|
||||||
|
<Link
|
||||||
|
href={link.href}
|
||||||
|
className="text-sm text-slate-500 hover:text-slate-200 transition-colors duration-300"
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-12 pt-8 border-t border-white/[0.04] flex flex-col md:flex-row justify-between items-center gap-4">
|
||||||
|
<p className="text-xs text-slate-600">
|
||||||
|
© {new Date().getFullYear()} KOBIL GmbH. All rights reserved.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-6 text-xs text-slate-600">
|
||||||
|
<span className="hover:text-slate-400 cursor-pointer transition-colors">
|
||||||
|
Privacy Policy
|
||||||
|
</span>
|
||||||
|
<span className="hover:text-slate-400 cursor-pointer transition-colors">
|
||||||
|
Terms of Service
|
||||||
|
</span>
|
||||||
|
<span className="hover:text-slate-400 cursor-pointer transition-colors">
|
||||||
|
Imprint
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
62
src/components/GlassCard.tsx
Normal file
62
src/components/GlassCard.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useRef, useState } from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
interface GlassCardProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
hover?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function GlassCard({
|
||||||
|
children,
|
||||||
|
className = "",
|
||||||
|
hover = true,
|
||||||
|
}: GlassCardProps) {
|
||||||
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
const [spotlightPos, setSpotlightPos] = useState({ x: 0, y: 0 });
|
||||||
|
const [isHovered, setIsHovered] = useState(false);
|
||||||
|
|
||||||
|
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||||
|
if (!ref.current || !hover) return;
|
||||||
|
const rect = ref.current.getBoundingClientRect();
|
||||||
|
setSpotlightPos({
|
||||||
|
x: e.clientX - rect.left,
|
||||||
|
y: e.clientY - rect.top,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
ref={ref}
|
||||||
|
className={`relative overflow-hidden rounded-xl border border-white/[0.06] bg-white/[0.02] backdrop-blur-xl ${className}`}
|
||||||
|
onMouseMove={handleMouseMove}
|
||||||
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
|
onMouseLeave={() => setIsHovered(false)}
|
||||||
|
whileHover={
|
||||||
|
hover
|
||||||
|
? {
|
||||||
|
y: -2,
|
||||||
|
borderColor: "rgba(255,255,255,0.1)",
|
||||||
|
transition: { duration: 0.3 },
|
||||||
|
}
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{/* Spotlight glow */}
|
||||||
|
{hover && (
|
||||||
|
<div
|
||||||
|
className="pointer-events-none absolute -inset-px transition-opacity duration-500"
|
||||||
|
style={{
|
||||||
|
opacity: isHovered ? 1 : 0,
|
||||||
|
background: `radial-gradient(500px circle at ${spotlightPos.x}px ${spotlightPos.y}px, rgba(0, 212, 255, 0.06), transparent 50%)`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{/* Top edge highlight */}
|
||||||
|
<div className="absolute top-0 left-[10%] right-[10%] h-px bg-gradient-to-r from-transparent via-white/[0.08] to-transparent" />
|
||||||
|
<div className="relative z-10">{children}</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
}
|
||||||
54
src/components/GlowingButton.tsx
Normal file
54
src/components/GlowingButton.tsx
Normal file
|
|
@ -0,0 +1,54 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
interface GlowingButtonProps {
|
||||||
|
href: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
variant?: "primary" | "ghost";
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function GlowingButton({
|
||||||
|
href,
|
||||||
|
children,
|
||||||
|
variant = "primary",
|
||||||
|
className = "",
|
||||||
|
}: GlowingButtonProps) {
|
||||||
|
if (variant === "ghost") {
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
href={href}
|
||||||
|
className={`group inline-flex items-center px-6 py-3 text-sm font-semibold tracking-wide rounded-lg border border-white/[0.1] text-slate-300 hover:text-white hover:border-white/20 hover:bg-white/[0.03] transition-all duration-300 ${className}`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link href={href} className={`group relative inline-flex ${className}`}>
|
||||||
|
{/* Outer glow */}
|
||||||
|
<div className="absolute -inset-px rounded-lg bg-gradient-to-r from-accent via-accent-blue to-accent opacity-60 blur-[3px] group-hover:opacity-100 group-hover:blur-[5px] transition-all duration-500" />
|
||||||
|
{/* Shimmer sweep */}
|
||||||
|
<div className="absolute inset-0 rounded-lg overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
"linear-gradient(110deg, transparent 25%, rgba(255,255,255,0.12) 50%, transparent 75%)",
|
||||||
|
backgroundSize: "200% 100%",
|
||||||
|
animation: "shimmer 2s linear infinite",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<motion.span
|
||||||
|
className="relative inline-flex items-center px-6 py-3 text-sm font-semibold tracking-wide rounded-lg bg-accent text-navy transition-all duration-300 group-hover:bg-accent/90 group-hover:shadow-[0_0_30px_rgba(0,212,255,0.3)]"
|
||||||
|
whileTap={{ scale: 0.97 }}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</motion.span>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
}
|
||||||
157
src/components/Navbar.tsx
Normal file
157
src/components/Navbar.tsx
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import Image from "next/image";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import { Menu, X } from "lucide-react";
|
||||||
|
|
||||||
|
const navLinks = [
|
||||||
|
{ href: "/", label: "Home" },
|
||||||
|
{ href: "/platform", label: "Platform" },
|
||||||
|
{ href: "/ai-agents", label: "AI Agents" },
|
||||||
|
{ href: "/industries", label: "Industries" },
|
||||||
|
{ href: "/security", label: "Security" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function Navbar() {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const [mobileOpen, setMobileOpen] = useState(false);
|
||||||
|
const [hidden, setHidden] = useState(false);
|
||||||
|
const [lastScrollY, setLastScrollY] = useState(0);
|
||||||
|
const [scrolled, setScrolled] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleScroll = () => {
|
||||||
|
const currentScrollY = window.scrollY;
|
||||||
|
setHidden(currentScrollY > lastScrollY && currentScrollY > 80);
|
||||||
|
setScrolled(currentScrollY > 20);
|
||||||
|
setLastScrollY(currentScrollY);
|
||||||
|
};
|
||||||
|
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||||
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
|
}, [lastScrollY]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setMobileOpen(false);
|
||||||
|
}, [pathname]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<motion.header
|
||||||
|
className={`fixed top-0 left-0 right-0 z-40 transition-all duration-500 ${
|
||||||
|
scrolled
|
||||||
|
? "bg-navy/60 backdrop-blur-2xl border-b border-white/[0.04] shadow-[0_4px_30px_rgba(0,0,0,0.3)]"
|
||||||
|
: "bg-transparent"
|
||||||
|
}`}
|
||||||
|
animate={{ y: hidden ? -100 : 0 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<nav className="mx-auto max-w-7xl px-6 py-4 flex items-center justify-between">
|
||||||
|
<Link href="/" className="flex items-center gap-2 relative z-10">
|
||||||
|
<Image
|
||||||
|
src="/kobil.svg"
|
||||||
|
alt="KOBIL"
|
||||||
|
width={110}
|
||||||
|
height={28}
|
||||||
|
className="logo-white"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Desktop nav */}
|
||||||
|
<div className="hidden md:flex items-center gap-1">
|
||||||
|
{navLinks.map((link) => (
|
||||||
|
<Link
|
||||||
|
key={link.href}
|
||||||
|
href={link.href}
|
||||||
|
className={`relative px-4 py-2 text-[13px] font-medium tracking-wide uppercase transition-all duration-300 rounded-md ${
|
||||||
|
pathname === link.href
|
||||||
|
? "text-accent"
|
||||||
|
: "text-slate-400 hover:text-white"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
{pathname === link.href && (
|
||||||
|
<motion.div
|
||||||
|
className="absolute bottom-0 left-2 right-2 h-px bg-gradient-to-r from-transparent via-accent to-transparent"
|
||||||
|
layoutId="nav-indicator"
|
||||||
|
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hidden md:block">
|
||||||
|
<Link
|
||||||
|
href="/contact"
|
||||||
|
className="group relative inline-flex items-center px-5 py-2.5 text-[13px] font-semibold tracking-wide uppercase rounded-lg bg-white/[0.04] border border-white/[0.08] text-white hover:border-accent/40 hover:bg-accent/[0.06] hover:text-accent hover:shadow-[0_0_20px_rgba(0,212,255,0.1)] backdrop-blur-sm transition-all duration-300"
|
||||||
|
>
|
||||||
|
Book a Demo
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile hamburger */}
|
||||||
|
<button
|
||||||
|
className="md:hidden text-white p-2 relative z-10"
|
||||||
|
onClick={() => setMobileOpen(!mobileOpen)}
|
||||||
|
aria-label="Toggle menu"
|
||||||
|
>
|
||||||
|
{mobileOpen ? <X size={24} /> : <Menu size={24} />}
|
||||||
|
</button>
|
||||||
|
</nav>
|
||||||
|
</motion.header>
|
||||||
|
|
||||||
|
{/* Mobile menu */}
|
||||||
|
<AnimatePresence>
|
||||||
|
{mobileOpen && (
|
||||||
|
<motion.div
|
||||||
|
className="fixed inset-0 z-30 bg-navy/95 backdrop-blur-2xl md:hidden"
|
||||||
|
initial={{ opacity: 0, x: "100%" }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
exit={{ opacity: 0, x: "100%" }}
|
||||||
|
transition={{ type: "tween", duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col items-center justify-center h-full gap-6">
|
||||||
|
{navLinks.map((link, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={link.href}
|
||||||
|
initial={{ opacity: 0, x: 40 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: i * 0.05 }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
href={link.href}
|
||||||
|
className={`text-2xl font-display font-semibold tracking-tight transition-colors ${
|
||||||
|
pathname === link.href
|
||||||
|
? "text-accent"
|
||||||
|
: "text-slate-300 hover:text-white"
|
||||||
|
}`}
|
||||||
|
onClick={() => setMobileOpen(false)}
|
||||||
|
>
|
||||||
|
{link.label}
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: 0.3 }}
|
||||||
|
>
|
||||||
|
<Link
|
||||||
|
href="/contact"
|
||||||
|
className="mt-4 inline-flex items-center px-8 py-3 text-lg font-semibold rounded-lg bg-accent/10 border border-accent/30 text-accent hover:bg-accent/20 transition-all"
|
||||||
|
onClick={() => setMobileOpen(false)}
|
||||||
|
>
|
||||||
|
Book a Demo
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
7
src/components/NoiseOverlay.tsx
Normal file
7
src/components/NoiseOverlay.tsx
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
// Noise is now rendered via body::before in globals.css for better performance.
|
||||||
|
// This component is kept as a no-op for backwards compatibility with layout.tsx.
|
||||||
|
export function NoiseOverlay() {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
98
src/components/ParticleBackground.tsx
Normal file
98
src/components/ParticleBackground.tsx
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
|
||||||
|
export function ParticleBackground() {
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const canvas = canvasRef.current;
|
||||||
|
if (!canvas) return;
|
||||||
|
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
if (!ctx) return;
|
||||||
|
|
||||||
|
let animationId: number;
|
||||||
|
const particles: {
|
||||||
|
x: number;
|
||||||
|
y: number;
|
||||||
|
vx: number;
|
||||||
|
vy: number;
|
||||||
|
size: number;
|
||||||
|
opacity: number;
|
||||||
|
}[] = [];
|
||||||
|
|
||||||
|
const resize = () => {
|
||||||
|
canvas.width = canvas.offsetWidth * window.devicePixelRatio;
|
||||||
|
canvas.height = canvas.offsetHeight * window.devicePixelRatio;
|
||||||
|
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||||
|
};
|
||||||
|
|
||||||
|
const createParticles = () => {
|
||||||
|
const count = Math.floor((canvas.offsetWidth * canvas.offsetHeight) / 15000);
|
||||||
|
for (let i = 0; i < count; i++) {
|
||||||
|
particles.push({
|
||||||
|
x: Math.random() * canvas.offsetWidth,
|
||||||
|
y: Math.random() * canvas.offsetHeight,
|
||||||
|
vx: (Math.random() - 0.5) * 0.3,
|
||||||
|
vy: (Math.random() - 0.5) * 0.3,
|
||||||
|
size: Math.random() * 2 + 0.5,
|
||||||
|
opacity: Math.random() * 0.5 + 0.1,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const drawParticles = () => {
|
||||||
|
ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
|
||||||
|
|
||||||
|
particles.forEach((p, i) => {
|
||||||
|
p.x += p.vx;
|
||||||
|
p.y += p.vy;
|
||||||
|
|
||||||
|
if (p.x < 0) p.x = canvas.offsetWidth;
|
||||||
|
if (p.x > canvas.offsetWidth) p.x = 0;
|
||||||
|
if (p.y < 0) p.y = canvas.offsetHeight;
|
||||||
|
if (p.y > canvas.offsetHeight) p.y = 0;
|
||||||
|
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
|
||||||
|
ctx.fillStyle = `rgba(0, 212, 255, ${p.opacity})`;
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
// Draw connections
|
||||||
|
for (let j = i + 1; j < particles.length; j++) {
|
||||||
|
const dx = p.x - particles[j].x;
|
||||||
|
const dy = p.y - particles[j].y;
|
||||||
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
if (dist < 120) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(p.x, p.y);
|
||||||
|
ctx.lineTo(particles[j].x, particles[j].y);
|
||||||
|
ctx.strokeStyle = `rgba(0, 212, 255, ${0.06 * (1 - dist / 120)})`;
|
||||||
|
ctx.lineWidth = 0.5;
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
animationId = requestAnimationFrame(drawParticles);
|
||||||
|
};
|
||||||
|
|
||||||
|
resize();
|
||||||
|
createParticles();
|
||||||
|
drawParticles();
|
||||||
|
|
||||||
|
window.addEventListener("resize", resize);
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener("resize", resize);
|
||||||
|
cancelAnimationFrame(animationId);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
className="absolute inset-0 w-full h-full pointer-events-none"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
48
src/components/SectionWrapper.tsx
Normal file
48
src/components/SectionWrapper.tsx
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
interface SectionWrapperProps {
|
||||||
|
children: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
id?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const containerVariants = {
|
||||||
|
hidden: { opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.08,
|
||||||
|
delayChildren: 0.05,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const itemVariants = {
|
||||||
|
hidden: { opacity: 0, y: 40 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] as const },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export function SectionWrapper({
|
||||||
|
children,
|
||||||
|
className = "",
|
||||||
|
id,
|
||||||
|
}: SectionWrapperProps) {
|
||||||
|
return (
|
||||||
|
<motion.section
|
||||||
|
id={id}
|
||||||
|
className={`relative py-24 md:py-32 ${className}`}
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
whileInView="visible"
|
||||||
|
viewport={{ once: true, margin: "-80px" }}
|
||||||
|
>
|
||||||
|
<div className="relative z-10 mx-auto max-w-7xl px-6">{children}</div>
|
||||||
|
</motion.section>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue