Animation Added and Gif file updated
This commit is contained in:
@@ -3,111 +3,234 @@
|
||||
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";
|
||||
import { motion, useScroll, useTransform } from "framer-motion";
|
||||
import {
|
||||
Lock, Globe, MessageSquare, Bell, HeartPulse, ShieldCheck,
|
||||
Fingerprint, Zap, ArrowRight, LayoutGrid
|
||||
} from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
|
||||
// Animation Variants
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
staggerChildren: 0.15,
|
||||
delayChildren: 0.2
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
duration: 0.8,
|
||||
ease: [0.2, 0.65, 0.3, 0.9] as const
|
||||
}
|
||||
}
|
||||
} satisfies import("framer-motion").Variants;
|
||||
|
||||
export default function AppsPage() {
|
||||
return (
|
||||
<div className="relative min-h-screen bg-black">
|
||||
<DNAHeroBackground />
|
||||
<Navbar />
|
||||
const targetRef = useRef<HTMLDivElement>(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: targetRef,
|
||||
offset: ["start end", "end start"]
|
||||
});
|
||||
const y = useTransform(scrollYProgress, [0, 1], [100, -100]);
|
||||
|
||||
<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>
|
||||
return (
|
||||
<div className="relative min-h-screen bg-black text-white selection:bg-white selection:text-black overflow-x-hidden font-sans">
|
||||
{/* Background Layer */}
|
||||
<div className="fixed inset-0 z-0">
|
||||
<DNAHeroBackground />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/80 via-black/40 to-black pointer-events-none" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(255,255,255,0.05),transparent_40%)] pointer-events-none" />
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<Navbar />
|
||||
|
||||
<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>
|
||||
<main className="relative z-10 pt-32 pb-20 lg:pt-48 lg:pb-32">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
||||
|
||||
{/* --- HERO SECTION --- */}
|
||||
<div className="flex flex-col lg:flex-row gap-16 lg:gap-8 items-center lg:items-start min-h-[80vh]">
|
||||
|
||||
{/* Left: Text Content */}
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
className="flex-1 space-y-8 lg:space-y-10 text-center lg:text-left pt-10"
|
||||
>
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/5 border border-white/10 backdrop-blur-md text-zinc-400 text-[10px] sm:text-xs font-bold tracking-[0.2em] uppercase mx-auto lg:mx-0"
|
||||
>
|
||||
<Zap className="w-3 h-3 text-white" />
|
||||
<span>Neural Ecosystem v4.0</span>
|
||||
</motion.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>
|
||||
<motion.h1
|
||||
variants={itemVariants}
|
||||
className="text-5xl sm:text-7xl md:text-8xl xl:text-9xl font-extrabold tracking-tighter leading-[0.9] text-white"
|
||||
>
|
||||
Unified <br className="hidden lg:block" />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-zinc-500 via-zinc-200 to-white italic pr-2">
|
||||
Access
|
||||
</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
variants={itemVariants}
|
||||
className="text-lg sm:text-xl md:text-2xl text-zinc-400 leading-relaxed max-w-2xl mx-auto lg:mx-0 font-light"
|
||||
>
|
||||
The institutional clinical command center. Real-time bio-sync and clinical assistance designed for absolute operational security.
|
||||
</motion.p>
|
||||
|
||||
<motion.div
|
||||
variants={itemVariants}
|
||||
className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-4"
|
||||
>
|
||||
<button className="group relative w-full sm:w-auto px-8 py-4 bg-white text-black rounded-xl font-bold text-base uppercase tracking-wider overflow-hidden transition-transform active:scale-95 hover:shadow-[0_0_30px_rgba(255,255,255,0.3)]">
|
||||
<span className="relative z-10 flex items-center justify-center gap-2">
|
||||
Systems Deck <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
|
||||
</span>
|
||||
</button>
|
||||
<button className="w-full sm:w-auto px-8 py-4 bg-white/5 border border-white/10 text-zinc-300 rounded-xl font-bold text-base uppercase tracking-wider hover:bg-white/10 transition-colors backdrop-blur-sm">
|
||||
Audit Logs
|
||||
</button>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right: Phone Mockup Animation */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 1.2, ease: "easeOut" }}
|
||||
className="flex-1 relative w-full max-w-[400px] lg:max-w-none perspective-1000 hidden md:block"
|
||||
>
|
||||
{/* Decorative Background Blob */}
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-zinc-800/20 rounded-full blur-3xl pointer-events-none" />
|
||||
|
||||
<motion.div
|
||||
animate={{ y: [-15, 15, -15] }}
|
||||
transition={{ duration: 6, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="relative w-[300px] sm:w-[340px] h-[600px] sm:h-[680px] mx-auto"
|
||||
>
|
||||
{/* Glass Phone Frame */}
|
||||
<div className="absolute inset-0 rounded-[3.5rem] bg-gradient-to-b from-white/10 to-white/5 border border-white/10 backdrop-blur-xl shadow-2xl overflow-hidden z-20">
|
||||
|
||||
{/* Notch */}
|
||||
<div className="absolute top-0 inset-x-0 h-8 flex justify-center z-30">
|
||||
<div className="w-32 h-6 bg-black rounded-b-2xl border-x border-b border-white/10" />
|
||||
</div>
|
||||
|
||||
{/* Screen Content */}
|
||||
<div className="w-full h-full bg-black/80 p-8 flex flex-col relative">
|
||||
|
||||
{/* Status Header */}
|
||||
<div className="flex items-center justify-between mt-8 mb-12 opacity-50">
|
||||
<LayoutGrid className="w-6 h-6 text-white" />
|
||||
<div className="h-1.5 w-12 bg-white/20 rounded-full" />
|
||||
</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>
|
||||
{/* Dynamic Widget */}
|
||||
<div className="space-y-6 relative z-10 flex-grow flex flex-col justify-center">
|
||||
<div className="text-center space-y-2">
|
||||
<div className="inline-block p-4 rounded-full bg-white/5 border border-white/10 mb-4 animate-pulse">
|
||||
<HeartPulse className="w-12 h-12 text-white" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-white">Bio-Sync Active</h3>
|
||||
<p className="text-sm text-zinc-500 font-mono">ENCRYPTED STREAM • 42ms</p>
|
||||
</div>
|
||||
|
||||
{/* Dummy Chart Lines */}
|
||||
<div className="h-32 w-full flex items-end justify-between gap-1 px-2">
|
||||
{[40, 70, 45, 90, 60, 80, 50, 75, 60, 95].map((h, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
animate={{ height: [`${h/2}%`, `${h}%`, `${h/2}%`] }}
|
||||
transition={{ duration: 2, repeat: Infinity, delay: i * 0.1 }}
|
||||
className="w-full bg-zinc-700/50 rounded-t-sm"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
{/* Bottom Actions */}
|
||||
<div className="h-16 w-full bg-white/5 rounded-2xl border border-white/10 mt-auto flex items-center justify-around px-4 backdrop-blur-md">
|
||||
{[Bell, Globe, ShieldCheck].map((Icon, i) => (
|
||||
<Icon key={i} className="w-6 h-6 text-zinc-400" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reflection Gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-transparent pointer-events-none" />
|
||||
</div>
|
||||
|
||||
{/* Shadow / Depth Layer */}
|
||||
<div className="absolute inset-0 translate-x-4 translate-y-4 rounded-[3.5rem] bg-black/50 blur-xl -z-10" />
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* --- FEATURE GRID --- */}
|
||||
<div ref={targetRef} className="mt-32 lg:mt-48 relative">
|
||||
{/* Section Header */}
|
||||
<div className="mb-16 md:mb-24 space-y-4 max-w-2xl">
|
||||
<h2 className="text-3xl md:text-5xl font-bold tracking-tight text-white">System Architecture</h2>
|
||||
<p className="text-zinc-500 text-lg">Institutional-grade protocols built for the next generation of healthcare.</p>
|
||||
</div>
|
||||
|
||||
<motion.div
|
||||
style={{ y }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8"
|
||||
>
|
||||
{[
|
||||
{ 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, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, margin: "-50px" }}
|
||||
transition={{ delay: i * 0.1, duration: 0.6 }}
|
||||
whileHover={{ y: -8 }}
|
||||
className="group relative bg-zinc-900/40 border border-white/5 p-8 sm:p-10 rounded-[2.5rem] overflow-hidden backdrop-blur-sm hover:bg-zinc-900/60 transition-colors"
|
||||
>
|
||||
{/* Hover Glow */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
|
||||
|
||||
<div className="relative z-10 space-y-6">
|
||||
<div className="w-14 h-14 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center group-hover:bg-white/10 group-hover:scale-110 transition-all duration-300">
|
||||
<feature.icon className="w-7 h-7 text-zinc-300 group-hover:text-white transition-colors" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-xl font-bold tracking-wide text-white uppercase">{feature.title}</h3>
|
||||
<p className="text-zinc-500 text-base leading-relaxed group-hover:text-zinc-400 transition-colors">
|
||||
{feature.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user