114 lines
8.0 KiB
TypeScript
114 lines
8.0 KiB
TypeScript
"use client";
|
|
|
|
import Navbar from "../components/layout/Navbar";
|
|
import DNAHeroBackground from "../components/canvas/DNAHeroBackground";
|
|
import Footer from "../components/layout/Footer";
|
|
import { motion } from "framer-motion";
|
|
import { Lock, Globe, MessageSquare, Bell, HeartPulse, ShieldCheck, Fingerprint, Zap } from "lucide-react";
|
|
|
|
export default function AppsPage() {
|
|
return (
|
|
<div className="relative min-h-screen bg-black">
|
|
<DNAHeroBackground />
|
|
<Navbar />
|
|
|
|
<main className="relative z-10 pt-48 pb-32">
|
|
<div className="container mx-auto px-6 text-center lg:text-left">
|
|
<div className="flex flex-col lg:flex-row gap-24 items-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -30 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
className="flex-1 space-y-12"
|
|
>
|
|
<div className="inline-flex items-center gap-3 px-6 py-2 rounded-full glass border-white/5 text-zinc-500 text-[10px] font-black tracking-[0.4em] uppercase mx-auto lg:mx-0">
|
|
<Zap className="w-4 h-4 text-white" />
|
|
<span>Neural Ecosystem v4.0</span>
|
|
</div>
|
|
<h1 className="text-8xl md:text-[11rem] font-extrabold tracking-tighter leading-[0.85] text-white">
|
|
Unified <br /><span className="text-zinc-500 italic uppercase">Access</span>
|
|
</h1>
|
|
<p className="text-2xl md:text-3xl text-zinc-600 leading-tight max-w-3xl font-medium tracking-tight mx-auto lg:mx-0">
|
|
Institutional clinical command center. Real-time bio-sync and clinical assistance designed for absolute operational security.
|
|
</p>
|
|
|
|
<div className="flex flex-wrap justify-center lg:justify-start gap-6 pt-6">
|
|
<button className="bg-white text-black px-12 py-5 rounded-xl font-black text-lg flex items-center gap-4 hover:bg-zinc-200 transition-all shadow-none uppercase italic">
|
|
Systems Deck
|
|
</button>
|
|
<button className="glass px-12 py-5 rounded-xl font-black text-lg flex items-center gap-4 hover:bg-white/5 transition-all border-white/10 shadow-none text-zinc-400 uppercase italic">
|
|
Audit Logs
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 1 }}
|
|
className="flex-1 relative lg:block hidden perspective-1000"
|
|
>
|
|
<div className="relative w-80 h-[640px] glass rounded-[3.5rem] p-5 border-white/5 shadow-none mx-auto overflow-hidden bg-white/[0.01]">
|
|
<div className="reflection" />
|
|
<div className="w-full h-full bg-black rounded-[2.9rem] overflow-hidden p-10 space-y-12 relative flex flex-col justify-center">
|
|
<div className="flex items-center gap-4 relative z-10 border-b border-white/5 pb-8 opacity-40">
|
|
<div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 shadow-none">
|
|
<HeartPulse className="text-white w-7 h-7" />
|
|
</div>
|
|
<div className="h-2 w-20 bg-white/10 rounded-full" />
|
|
</div>
|
|
|
|
<div className="space-y-8 relative z-10 text-center">
|
|
<h4 className="text-[8px] font-black uppercase tracking-[0.4em] text-zinc-600 italic">Live Clinical Sync</h4>
|
|
<div className="aspect-square glass rounded-[2.5rem] flex items-center justify-center border-white/5 shadow-none p-8 bg-white/[0.01]">
|
|
<motion.div
|
|
animate={{ scale: [1, 1.05, 1], opacity: [0.2, 0.4, 0.2] }}
|
|
transition={{ repeat: Infinity, duration: 5 }}
|
|
>
|
|
<HeartPulse className="w-24 h-24 text-white opacity-40 shadow-none" />
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
<div className="h-10 glass rounded-xl border-white/5 opacity-20" />
|
|
</div>
|
|
<div className="absolute top-0 inset-x-0 h-10 flex justify-center items-center">
|
|
<div className="w-28 h-6 bg-black rounded-b-[1.5rem] border-x border-b border-white/5" />
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mt-60">
|
|
{[
|
|
{ icon: Lock, title: "Zero-Trust Protocol", desc: "Institutional-grade multi-layer security for clinical data transfers." },
|
|
{ icon: MessageSquare, title: "Clinical AI Bridge", desc: "Real-time verification and documentation via medical LLM layers." },
|
|
{ icon: Bell, title: "Predictive SOS Audit", desc: "Automated institutional alerts based on verified vital trend analysis." },
|
|
{ icon: Globe, title: "Universal Sync Hub", desc: "Global access to clinical data on certified HIPAA infrastructure." },
|
|
{ icon: Fingerprint, title: "Biometric Audit", desc: "Hardware-locked PHI access ensures zero-bias clinical security." },
|
|
{ icon: ShieldCheck, title: "Institutional Verified", desc: "Certified infrastructure for sovereign clinical data integrity." }
|
|
].map((feature, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, scale: 0.98 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
transition={{ delay: i * 0.1 }}
|
|
whileHover={{ y: -5, borderColor: "rgba(255, 255, 255, 0.15)" }}
|
|
className="glass p-12 rounded-[3rem] border-white/5 space-y-8 transition-all shadow-none overflow-hidden group bg-white/[0.01]"
|
|
>
|
|
<div className="reflection opacity-0 group-hover:opacity-100" />
|
|
<div className="w-16 h-16 rounded-xl bg-white/5 flex items-center justify-center shadow-none border border-white/10 transition-all group-hover:bg-white/10">
|
|
<feature.icon className="w-8 h-8 text-white transition-opacity group-hover:opacity-100 opacity-60" />
|
|
</div>
|
|
<h3 className="text-2xl font-black tracking-tight text-white uppercase italic">{feature.title}</h3>
|
|
<p className="text-zinc-500 text-lg font-medium leading-[1.4] tracking-tight">{feature.desc}</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|