84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
"use client";
|
|
import Badge from "@/utils/badge";
|
|
import Stat from "@/utils/statCard";
|
|
|
|
import { ShieldCheck, KeyRound, FileText } from "lucide-react";
|
|
|
|
export default function LeftPanel() {
|
|
return (
|
|
|
|
<div className="relative overflow-hidden border-r border-slate-800 bg-[#091523] hidden lg:block">
|
|
{/* Grid Background overlay */}
|
|
<div
|
|
className="absolute inset-0 opacity-10 pointer-events-none"
|
|
style={{
|
|
backgroundImage: `
|
|
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px)
|
|
`,
|
|
backgroundSize: "44px 44px",
|
|
}}
|
|
/>
|
|
|
|
<div className="relative flex h-full flex-col justify-between p-16 z-10">
|
|
<div>
|
|
{/* Logo Group */}
|
|
<div className="mb-20 flex items-center gap-3">
|
|
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gradient-to-br from-teal-300 to-cyan-500 font-bold text-black shadow-md text-lg">
|
|
K
|
|
</div>
|
|
<h2 className="text-2xl font-bold tracking-wider text-white">
|
|
KAF<span className="text-teal-400">M</span>
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Subtitle */}
|
|
<p className="mb-6 text-xs font-semibold uppercase tracking-[4px] text-teal-400/90">
|
|
Unified Facility Platform
|
|
</p>
|
|
|
|
{/*Text*/}
|
|
<h1 className="max-w-lg text-4xl font-bold tracking-tight text-white leading-[1]">
|
|
One platform.
|
|
<br />
|
|
Configure it.
|
|
<br />
|
|
Run it.
|
|
</h1>
|
|
|
|
{/* Paragraph explanation */}
|
|
<p className="mt-6 max-w-md text-[16px] leading-relaxed text-slate-400">
|
|
Administer tenants, sites and access — then operate every
|
|
building from the same console. Multi-tenant, scoped to the site
|
|
in front of you.
|
|
</p>
|
|
|
|
{/* Badges Stack */}
|
|
<div className="mt-10 flex flex-col items-start gap-3">
|
|
<Badge icon={<ShieldCheck size={14} className="text-teal-400" />}>
|
|
MFA enforced
|
|
</Badge>
|
|
<Badge icon={<KeyRound size={14} className="text-teal-400" />}>
|
|
Encrypted in transit
|
|
</Badge>
|
|
<Badge icon={<FileText size={14} className="text-teal-400" />}>
|
|
Full audit trail
|
|
</Badge>
|
|
</div>
|
|
</div>
|
|
|
|
{/*StatCard is used */}
|
|
<div className=" flex gap-2 mt-10 text-slate-300 ">
|
|
<Stat number="4" label="TENANTS" />
|
|
<Stat number="8" label="MODULES" />
|
|
<Stat number="2" label="WORKSPACES" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
);
|
|
}
|
|
|
|
|
|
|