UI design Updated
This commit is contained in:
@@ -2,99 +2,112 @@
|
||||
|
||||
import Navbar from "../components/layout/Navbar";
|
||||
import DNAHeroBackground from "../components/canvas/DNAHeroBackground";
|
||||
import { motion } from "framer-motion";
|
||||
import { Lock, Globe, MessageSquare, Bell, HeartPulse, ShieldCheck } from "lucide-react";
|
||||
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">
|
||||
<div className="relative min-h-screen bg-black">
|
||||
<DNAHeroBackground />
|
||||
<Navbar />
|
||||
|
||||
<main className="relative z-10 pt-40 pb-24">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex flex-col lg:flex-row gap-20 items-center">
|
||||
<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 }}
|
||||
className="flex-1 space-y-8"
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1 space-y-12"
|
||||
>
|
||||
<h1 className="text-5xl md:text-8xl font-black tracking-tighter">
|
||||
Connected <span className="text-gradient">Care</span>
|
||||
<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-xl text-foreground/60 leading-relaxed max-w-xl">
|
||||
Our mobile applications are the command center for your health. Real-time monitoring, AI-driven insights, and instant doctor access—securely in your pocket.
|
||||
<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 gap-4 pt-4">
|
||||
<button className="bg-white text-black px-8 py-4 rounded-full font-bold flex items-center gap-3">
|
||||
App Store
|
||||
<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-8 py-4 rounded-full font-bold flex items-center gap-3">
|
||||
Play Store
|
||||
<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, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="flex-1 relative lg:block hidden"
|
||||
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-[600px] glass rounded-[3.5rem] p-4 border-white/10 shadow-2xl mx-auto">
|
||||
<div className="w-full h-full bg-zinc-950 rounded-[3rem] overflow-hidden p-6 space-y-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-primary" />
|
||||
<div className="space-y-1">
|
||||
<div className="h-2 w-20 bg-white/20 rounded-full" />
|
||||
<div className="h-2 w-12 bg-white/10 rounded-full" />
|
||||
<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-4">
|
||||
<h4 className="text-sm font-bold uppercase tracking-widest text-primary">Live Vitals</h4>
|
||||
<div className="aspect-video bg-white/5 rounded-2xl flex items-center justify-center">
|
||||
<HeartPulse className="w-12 h-12 text-primary animate-pulse" />
|
||||
<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="grid grid-cols-2 gap-4">
|
||||
<div className="h-24 glass rounded-2xl" />
|
||||
<div className="h-24 glass rounded-2xl" />
|
||||
</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>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-40">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 mt-60">
|
||||
{[
|
||||
{ icon: Lock, title: "End-to-End Encryption", desc: "Military-grade AES-256 encryption for all data sync and communication." },
|
||||
{ icon: MessageSquare, title: "AI Chat Assistant", desc: "Instant clinical insights and symptom tracking powered by our healthcare LLM." },
|
||||
{ icon: Bell, title: "Emergency SOS", desc: "Automatic alerts to emergency contacts when vitals drop outside safe thresholds." },
|
||||
{ icon: Globe, title: "Teleconsult Sync", desc: "Seamlessly transition from monitoring to a live video call with your physician." },
|
||||
{ icon: ShieldCheck, title: "HIPAA Cloud", desc: "Secure cloud infrastructure designed specifically for healthcare data storage." }
|
||||
{ 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: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
initial={{ opacity: 0, scale: 0.98 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
className="glass p-8 rounded-3xl border-white/5 space-y-4 hover:border-primary/30 transition-colors"
|
||||
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="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
|
||||
<feature.icon className="w-6 h-6 text-primary" />
|
||||
<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-xl font-bold">{feature.title}</h3>
|
||||
<p className="text-foreground/50 text-sm leading-relaxed">{feature.desc}</p>
|
||||
<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>
|
||||
<Footer />
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { Canvas, useFrame } from "@react-three/fiber";
|
||||
import { Canvas, useFrame, useThree } from "@react-three/fiber";
|
||||
import { useRef, useMemo } from "react";
|
||||
import * as THREE from "three";
|
||||
import { Float, PerspectiveCamera } from "@react-three/drei";
|
||||
@@ -8,31 +8,29 @@ import { Float, PerspectiveCamera } from "@react-three/drei";
|
||||
function DNAParticles() {
|
||||
const points = useMemo(() => {
|
||||
const p = [];
|
||||
const count = 100;
|
||||
const radius = 2;
|
||||
const height = 15;
|
||||
const count = 120; // Reduced density for simplicity
|
||||
const radius = 2.5;
|
||||
const height = 20;
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const angle = (i / count) * Math.PI * 4;
|
||||
const angle = (i / count) * Math.PI * 6;
|
||||
const x = Math.cos(angle) * radius;
|
||||
const y = (i / count) * height - height / 2;
|
||||
const z = Math.sin(angle) * radius;
|
||||
|
||||
// Strand 1
|
||||
p.push(new THREE.Vector3(x, y, z));
|
||||
// Strand 2 (180 deg offset)
|
||||
p.push(new THREE.Vector3(-x, y, -z));
|
||||
// Simple Monochromatic Strands
|
||||
p.push({ pos: new THREE.Vector3(x, y, z), color: "#ffffff" });
|
||||
p.push({ pos: new THREE.Vector3(-x, y, -z), color: "#71717a" }); // Zinc-400 equivalent
|
||||
|
||||
// Connecting rungs
|
||||
if (i % 5 === 0) {
|
||||
const rungPoints = 5;
|
||||
// Minimalist Rungs
|
||||
if (i % 6 === 0) {
|
||||
const rungPoints = 6;
|
||||
for (let j = 1; j < rungPoints; j++) {
|
||||
const t = j / rungPoints;
|
||||
p.push(new THREE.Vector3(
|
||||
x * (1 - 2 * t),
|
||||
y,
|
||||
z * (1 - 2 * t)
|
||||
));
|
||||
p.push({
|
||||
pos: new THREE.Vector3(x * (1 - 2 * t), y, z * (1 - 2 * t)),
|
||||
color: "#3f3f46" // Zinc-600 equivalent
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -40,23 +38,27 @@ function DNAParticles() {
|
||||
}, []);
|
||||
|
||||
const groupRef = useRef<THREE.Group>(null);
|
||||
const { mouse } = useThree();
|
||||
|
||||
useFrame((state) => {
|
||||
useFrame(() => {
|
||||
if (groupRef.current) {
|
||||
groupRef.current.rotation.y += 0.005;
|
||||
groupRef.current.rotation.z = Math.sin(state.clock.elapsedTime * 0.5) * 0.1;
|
||||
groupRef.current.rotation.y += 0.0015; // Slower, more professional rotation
|
||||
groupRef.current.rotation.x = THREE.MathUtils.lerp(groupRef.current.rotation.x, mouse.y * 0.1, 0.05);
|
||||
groupRef.current.rotation.z = THREE.MathUtils.lerp(groupRef.current.rotation.z, -mouse.x * 0.05, 0.05);
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<group ref={groupRef}>
|
||||
{points.map((pos, i) => (
|
||||
<mesh key={i} position={pos}>
|
||||
<sphereGeometry args={[0.04, 8, 8]} />
|
||||
{points.map((p, i) => (
|
||||
<mesh key={i} position={p.pos}>
|
||||
<sphereGeometry args={[p.color === "#ffffff" ? 0.03 : 0.015, 8, 8]} />
|
||||
<meshStandardMaterial
|
||||
color={i % 2 === 0 ? "#3b82f6" : "#8b5cf6"}
|
||||
emissive={i % 2 === 0 ? "#1e40af" : "#5b21b6"}
|
||||
emissiveIntensity={2}
|
||||
color={p.color}
|
||||
emissive={p.color}
|
||||
emissiveIntensity={p.color === "#ffffff" ? 0.8 : 0.2}
|
||||
transparent
|
||||
opacity={0.6}
|
||||
/>
|
||||
</mesh>
|
||||
))}
|
||||
@@ -64,21 +66,36 @@ function DNAParticles() {
|
||||
);
|
||||
}
|
||||
|
||||
function GridOverlay() {
|
||||
return (
|
||||
<gridHelper
|
||||
args={[100, 40, "#ffffff", "#18181b"]}
|
||||
position={[0, -12, 0]}
|
||||
rotation={[0, 0, 0]}
|
||||
>
|
||||
<meshBasicMaterial attach="material" transparent opacity={0.03} />
|
||||
</gridHelper>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DNAHeroBackground() {
|
||||
return (
|
||||
<div className="fixed inset-0 -z-10 bg-background">
|
||||
<Canvas shadows dpr={[1, 2]}>
|
||||
<PerspectiveCamera makeDefault position={[0, 0, 10]} fov={50} />
|
||||
<ambientLight intensity={0.5} />
|
||||
<pointLight position={[10, 10, 10]} intensity={1} color="#3b82f6" />
|
||||
<pointLight position={[-10, -10, -10]} intensity={1} color="#8b5cf6" />
|
||||
<spotLight position={[0, 5, 0]} angle={0.3} penumbra={1} intensity={2} castShadow />
|
||||
<div className="fixed inset-0 -z-10 bg-black overflow-hidden">
|
||||
<div className="noise-overlay" />
|
||||
<Canvas dpr={[1, 2]}>
|
||||
<PerspectiveCamera makeDefault position={[0, 0, 15]} fov={45} />
|
||||
|
||||
<Float speed={2} rotationIntensity={0.5} floatIntensity={0.5}>
|
||||
<ambientLight intensity={0.4} />
|
||||
<pointLight position={[10, 10, 10]} intensity={0.5} color="#ffffff" />
|
||||
<pointLight position={[-10, -10, -10]} intensity={0.3} color="#ffffff" />
|
||||
|
||||
<GridOverlay />
|
||||
|
||||
<Float speed={0.8} rotationIntensity={0.05} floatIntensity={0.2}>
|
||||
<DNAParticles />
|
||||
</Float>
|
||||
</Canvas>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/50 to-background pointer-events-none" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/0 via-black/20 to-black pointer-events-none" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,75 +1,244 @@
|
||||
"use client";
|
||||
|
||||
import { Activity, ShieldCheck, Twitter, Linkedin } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { Activity, ShieldCheck, Twitter, Linkedin, Github, Mail, Phone, MapPin, Award, Lock, FileCheck, Heart, CheckCircle2 } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="relative z-10 glass border-t-0 mt-32 py-24">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
|
||||
<div className="space-y-6 col-span-1 md:col-span-1">
|
||||
<Link href="/" className="flex items-center gap-2 group">
|
||||
<Activity className="w-8 h-8 text-primary transition-transform group-hover:scale-110" />
|
||||
<span className="text-2xl font-bold tracking-tighter text-gradient">
|
||||
Skyheal
|
||||
</span>
|
||||
</Link>
|
||||
<p className="text-foreground/50 text-sm leading-relaxed">
|
||||
Pioneering the future of AI-driven healthcare. Precision hardware, intelligent software, and absolute security.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<button className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-primary/20 transition-colors">
|
||||
<Twitter className="w-4 h-4 text-foreground/60" />
|
||||
</button>
|
||||
<button className="w-10 h-10 rounded-full bg-white/5 flex items-center justify-center hover:bg-primary/20 transition-colors">
|
||||
<Linkedin className="w-4 h-4 text-foreground/60" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<footer className="relative z-10 mt-20 sm:mt-32 bg-gradient-to-b from-black via-zinc-950 to-black border-t border-white/5">
|
||||
{/* Top decorative line */}
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/50 to-transparent" />
|
||||
|
||||
<div className="space-y-6">
|
||||
<h4 className="font-bold uppercase tracking-widest text-xs text-primary">Products</h4>
|
||||
<ul className="space-y-4 text-sm text-foreground/50">
|
||||
<li><Link href="/devices" className="hover:text-primary transition-colors">Medical Devices</Link></li>
|
||||
<li><Link href="/#voice-soap" className="hover:text-primary transition-colors">AI Voice-to-SOAP</Link></li>
|
||||
<li><Link href="/#diagnosis" className="hover:text-primary transition-colors">AI Diagnosis</Link></li>
|
||||
<li><Link href="/apps" className="hover:text-primary transition-colors">Mobile Apps</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Main Footer Content */}
|
||||
<div className="pt-16 sm:pt-20 lg:pt-24 pb-12">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-8 lg:gap-12">
|
||||
{/* Brand Section - Takes more space */}
|
||||
<div className="lg:col-span-4 space-y-6">
|
||||
<div className="space-y-6">
|
||||
{/* Logo */}
|
||||
<a href="/" className="inline-flex items-center gap-3 group">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-blue-500/20 blur-xl rounded-full group-hover:bg-blue-500/30 transition-all" />
|
||||
<Activity className="w-9 h-9 text-white relative z-10 transition-transform group-hover:scale-110 group-hover:rotate-180 duration-500" />
|
||||
</div>
|
||||
<span className="text-2xl sm:text-3xl font-bold tracking-tight text-white">
|
||||
Skyheal
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h4 className="font-bold uppercase tracking-widest text-xs text-primary">Company</h4>
|
||||
<ul className="space-y-4 text-sm text-foreground/50">
|
||||
<li><Link href="#" className="hover:text-primary transition-colors">About Us</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary transition-colors">Security</Link></li>
|
||||
<li><Link href="#" className="hover:text-primary transition-colors">Contact</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Description */}
|
||||
<p className="text-sm sm:text-base text-zinc-400 leading-relaxed max-w-sm">
|
||||
Advanced healthcare technology platform providing AI-powered diagnostics, secure patient monitoring, and enterprise-grade clinical solutions.
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="p-6 glass rounded-2xl border-accent/20 bg-accent/5 space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<ShieldCheck className="w-6 h-6 text-accent" />
|
||||
<span className="font-bold text-accent">HIPAA Compliant</span>
|
||||
{/* Trust Badges */}
|
||||
<div className="space-y-3">
|
||||
<p className="text-xs font-semibold text-zinc-500 uppercase tracking-wider">Certified & Compliant</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[
|
||||
{ icon: ShieldCheck, text: "HIPAA" },
|
||||
{ icon: Lock, text: "SOC 2" },
|
||||
{ icon: FileCheck, text: "FDA" },
|
||||
{ icon: Award, text: "ISO 27001" }
|
||||
].map((badge, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
whileHover={{ y: -2 }}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white/[0.03] border border-white/10 hover:border-white/20 transition-all cursor-pointer"
|
||||
>
|
||||
<badge.icon className="w-3 h-3 text-green-400" />
|
||||
<span className="text-[10px] font-semibold text-zinc-400">{badge.text}</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Links */}
|
||||
<div className="flex gap-3">
|
||||
{[
|
||||
{ icon: Twitter, label: "Twitter" },
|
||||
{ icon: Linkedin, label: "LinkedIn" },
|
||||
{ icon: Github, label: "GitHub" }
|
||||
].map((social, i) => (
|
||||
<motion.button
|
||||
key={i}
|
||||
whileHover={{ y: -2 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="w-10 h-10 rounded-lg bg-white/[0.03] flex items-center justify-center hover:bg-white/[0.08] transition-colors border border-white/10 hover:border-white/20 group"
|
||||
aria-label={social.label}
|
||||
>
|
||||
<social.icon className="w-4 h-4 text-zinc-400 group-hover:text-white transition-colors" />
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products */}
|
||||
<div className="lg:col-span-2 space-y-5">
|
||||
<h4 className="text-sm font-bold text-white uppercase tracking-wider">Products</h4>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
{ name: "Medical Devices", href: "/devices" },
|
||||
{ name: "Voice-to-SOAP", href: "/#voice-soap" },
|
||||
{ name: "AI Diagnosis", href: "/#diagnosis" },
|
||||
{ name: "Mobile Apps", href: "/apps" },
|
||||
{ name: "Clinical Dashboard", href: "#" },
|
||||
{ name: "Analytics Platform", href: "#" }
|
||||
].map((item, i) => (
|
||||
<li key={i}>
|
||||
<a
|
||||
href={item.href}
|
||||
className="text-sm text-zinc-400 hover:text-white transition-colors flex items-center gap-2 group"
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full bg-blue-400/50 group-hover:bg-blue-400 transition-colors" />
|
||||
{item.name}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Solutions */}
|
||||
<div className="lg:col-span-2 space-y-5">
|
||||
<h4 className="text-sm font-bold text-white uppercase tracking-wider">Solutions</h4>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Hospital Systems",
|
||||
"Private Practices",
|
||||
"Telehealth",
|
||||
"Remote Monitoring",
|
||||
"Clinical Research",
|
||||
"Health Insurance"
|
||||
].map((item, i) => (
|
||||
<li key={i}>
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm text-zinc-400 hover:text-white transition-colors flex items-center gap-2 group"
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full bg-purple-400/50 group-hover:bg-purple-400 transition-colors" />
|
||||
{item}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Resources */}
|
||||
<div className="lg:col-span-2 space-y-5">
|
||||
<h4 className="text-sm font-bold text-white uppercase tracking-wider">Resources</h4>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Documentation",
|
||||
"API Reference",
|
||||
"Developer Guide",
|
||||
"Security & Compliance",
|
||||
"Case Studies",
|
||||
"Support Center"
|
||||
].map((item, i) => (
|
||||
<li key={i}>
|
||||
<a
|
||||
href="#"
|
||||
className="text-sm text-zinc-400 hover:text-white transition-colors flex items-center gap-2 group"
|
||||
>
|
||||
<span className="w-1 h-1 rounded-full bg-green-400/50 group-hover:bg-green-400 transition-colors" />
|
||||
{item}
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* Contact Card */}
|
||||
<div className="lg:col-span-2 space-y-5">
|
||||
<h4 className="text-sm font-bold text-white uppercase tracking-wider">Contact</h4>
|
||||
<div className="space-y-4">
|
||||
{[
|
||||
{ icon: Mail, text: "support@skyheal.ai", href: "mailto:support@skyheal.ai" },
|
||||
{ icon: Phone, text: "+1 (555) 123-4567", href: "tel:+15551234567" },
|
||||
{ icon: MapPin, text: "San Francisco, CA", href: "#" }
|
||||
].map((contact, i) => (
|
||||
<a
|
||||
key={i}
|
||||
href={contact.href}
|
||||
className="flex items-center gap-3 text-sm text-zinc-400 hover:text-white transition-colors group"
|
||||
>
|
||||
<div className="w-8 h-8 rounded-lg bg-white/[0.03] border border-white/10 flex items-center justify-center group-hover:border-white/20 transition-colors">
|
||||
<contact.icon className="w-4 h-4" />
|
||||
</div>
|
||||
{contact.text}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* CTA Card */}
|
||||
<div className="mt-6 p-5 rounded-2xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 border border-white/10 space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Heart className="w-5 h-5 text-red-400" />
|
||||
<h5 className="text-sm font-bold text-white">24/7 Support</h5>
|
||||
</div>
|
||||
{/* <p className="text-xs text-zinc-400 leading-relaxed">
|
||||
Our healthcare experts are available round the clock to assist you.
|
||||
</p> */}
|
||||
{/* <motion.button
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className="w-full px-4 py-2.5 bg-white text-black rounded-lg text-xs font-bold hover:bg-zinc-100 transition-colors"
|
||||
>
|
||||
Get Started
|
||||
</motion.button> */}
|
||||
</div>
|
||||
<p className="text-[10px] text-foreground/40 leading-tight">
|
||||
Skyheal is fully certified for PHI handling and follows rigorous HIPAA/GDPR security standards.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-6">
|
||||
<p className="text-foreground/30 text-xs">
|
||||
© 2026 Skyheal AI. Built with precision and care.
|
||||
</p>
|
||||
<div className="flex gap-8 text-foreground/30 text-xs uppercase tracking-widest">
|
||||
<Link href="#" className="hover:text-primary">Privacy Policy</Link>
|
||||
<Link href="#" className="hover:text-primary">Terms of Service</Link>
|
||||
{/* Divider */}
|
||||
<div className="border-t border-white/5" />
|
||||
|
||||
{/* Bottom Section */}
|
||||
<div className="py-8">
|
||||
<div className="flex flex-col lg:flex-row justify-between items-center gap-6">
|
||||
{/* Copyright */}
|
||||
<div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-6 text-xs text-zinc-500">
|
||||
<p>© 2026 Skyheal. All rights reserved.</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-3 h-3 text-green-400" />
|
||||
<span>HIPAA Compliant Healthcare Platform</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Legal Links */}
|
||||
<div className="flex flex-wrap justify-center gap-6 text-xs">
|
||||
{[
|
||||
"Privacy Policy",
|
||||
"Terms of Service",
|
||||
"Cookie Policy",
|
||||
"Accessibility"
|
||||
].map((item, i) => (
|
||||
<a
|
||||
key={i}
|
||||
href="#"
|
||||
className="text-zinc-500 hover:text-white transition-colors"
|
||||
>
|
||||
{item}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Additional Info */}
|
||||
<div className="mt-6 pt-6 border-t border-white/5">
|
||||
<p className="text-center text-xs text-zinc-600 leading-relaxed max-w-4xl mx-auto">
|
||||
Skyheal is a healthcare technology platform designed to assist medical professionals. Our AI-powered tools are intended to support,
|
||||
not replace, the relationship between healthcare providers and patients. All medical decisions should be made by licensed healthcare professionals.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gradient Overlay at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-blue-500/30 to-transparent" />
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,102 +1,242 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Menu, X, Activity, Brain, Mic, ShieldCheck } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { motion, AnimatePresence, stagger } from "framer-motion";
|
||||
import { Menu, X, Activity, Brain, Mic, ShieldCheck, ChevronRight, Sparkles } from "lucide-react";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Devices", icon: Activity, href: "/devices" },
|
||||
{ name: "Voice-to-SOAP", icon: Mic, href: "#voice-soap" },
|
||||
{ name: "AI Diagnosis", icon: Brain, href: "#diagnosis" },
|
||||
{ name: "Apps & Security", icon: ShieldCheck, href: "/apps" },
|
||||
];
|
||||
{ name: "Devices", icon: Activity, href: "/devices" },
|
||||
{ name: "Voice-to-SOAP", icon: Mic, href: "/#voice-soap" },
|
||||
{ name: "AI Diagnosis", icon: Brain, href: "/#diagnosis" },
|
||||
{ name: "Apps & Security", icon: ShieldCheck, href: "/apps" },
|
||||
] as const;
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.07, delayChildren: 0.1 },
|
||||
},
|
||||
exit: { opacity: 0, transition: { staggerChildren: 0.05, staggerDirection: -1 } },
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, x: 40, scale: 0.96 },
|
||||
visible: { opacity: 1, x: 0, scale: 1, transition: { type: "spring", damping: 22, stiffness: 140 } },
|
||||
exit: { opacity: 0, x: 20, scale: 0.95 },
|
||||
};
|
||||
|
||||
export default function Navbar() {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
setIsScrolled(window.scrollY > 20);
|
||||
};
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
const handleScroll = () => setIsScrolled(window.scrollY > 20);
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${isScrolled ? "py-4" : "py-6"
|
||||
}`}
|
||||
>
|
||||
<div className="container mx-auto px-6">
|
||||
<div
|
||||
className={`glass rounded-2xl px-6 py-3 flex items-center justify-between transition-all duration-300 ${isScrolled ? "bg-background/80 shadow-2xl" : "bg-white/5"
|
||||
}`}
|
||||
>
|
||||
<Link href="/" className="flex items-center gap-2 group">
|
||||
<Activity className="w-8 h-8 text-primary transition-transform group-hover:scale-110" />
|
||||
<span className="text-2xl font-bold tracking-tighter text-gradient">
|
||||
Skyheal
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Menu */}
|
||||
<div className="hidden md:flex items-center gap-8">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-sm font-medium text-foreground/70 hover:text-primary transition-colors flex items-center gap-2"
|
||||
>
|
||||
<item.icon className="w-4 h-4" />
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<button className="bg-primary hover:bg-primary/80 text-white px-6 py-2 rounded-full text-sm font-semibold transition-all hover:scale-105 active:scale-95 shadow-[0_0_20px_rgba(59,130,246,0.3)]">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Toggle */}
|
||||
<button
|
||||
className="md:hidden text-foreground p-2"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
>
|
||||
{isMobileMenuOpen ? <X /> : <Menu />}
|
||||
</button>
|
||||
</div>
|
||||
return (
|
||||
<>
|
||||
<nav
|
||||
className={`fixed top-0 left-0 right-0 z-50 transition-all duration-500 ${
|
||||
isScrolled ? "py-3" : "py-6"
|
||||
}`}
|
||||
>
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial={{ y: -100 }}
|
||||
animate={{ y: 0 }}
|
||||
transition={{ duration: 0.6, ease: "easeOut" }}
|
||||
className={`relative rounded-2xl lg:rounded-3xl px-4 sm:px-6 lg:px-8 py-3 sm:py-4 flex items-center justify-between transition-all duration-500 ${
|
||||
isScrolled
|
||||
? "bg-black/90 backdrop-blur-xl shadow-2xl border border-white/10"
|
||||
: "bg-gradient-to-r from-white/5 via-white/10 to-white/5 backdrop-blur-lg border border-white/5"
|
||||
}`}
|
||||
>
|
||||
{/* Animated background gradient (unchanged) */}
|
||||
<div className="absolute inset-0 rounded-2xl lg:rounded-3xl overflow-hidden pointer-events-none">
|
||||
<motion.div
|
||||
animate={{
|
||||
background: [
|
||||
"radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.1) 0%, transparent 50%)",
|
||||
"radial-gradient(circle at 100% 100%, rgba(139, 92, 246, 0.1) 0%, transparent 50%)",
|
||||
"radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.1) 0%, transparent 50%)",
|
||||
],
|
||||
}}
|
||||
transition={{ duration: 8, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute inset-0"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
<AnimatePresence>
|
||||
{isMobileMenuOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -20 }}
|
||||
className="absolute top-full left-0 right-0 p-6 md:hidden"
|
||||
>
|
||||
<div className="glass rounded-2xl p-6 flex flex-col gap-4">
|
||||
{navItems.map((item) => (
|
||||
<Link
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="flex items-center gap-3 text-lg font-medium text-foreground/80 hover:text-primary"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
>
|
||||
<item.icon className="w-5 h-5" />
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
<hr className="border-border" />
|
||||
<button className="w-full bg-primary text-white py-3 rounded-xl font-bold">
|
||||
Get Started
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
{/* Logo (unchanged) */}
|
||||
<a href="/" className="flex items-center gap-2 sm:gap-3 group relative z-10">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-blue-500/20 blur-xl rounded-full group-hover:bg-blue-500/30 transition-all" />
|
||||
<Activity className="w-7 h-7 sm:w-9 sm:h-9 text-white relative z-10 transition-transform group-hover:scale-110 group-hover:rotate-180 duration-500" />
|
||||
</div>
|
||||
<span className="text-xl sm:text-2xl lg:text-3xl font-bold tracking-tight text-white relative">
|
||||
Skyheal
|
||||
<span className="absolute -top-1 -right-6 text-[8px] text-blue-400 font-semibold">AI</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
{/* Desktop Menu (unchanged) */}
|
||||
<div className="hidden lg:flex items-center gap-1 xl:gap-2 relative z-10">
|
||||
{navItems.map((item, index) => (
|
||||
<motion.a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="relative px-4 py-2.5 rounded-xl text-sm font-semibold text-zinc-300 hover:text-white transition-colors group"
|
||||
>
|
||||
<span className="relative z-10 flex items-center gap-2">
|
||||
<item.icon className="w-4 h-4 transition-transform group-hover:scale-110" />
|
||||
{item.name}
|
||||
</span>
|
||||
{/* You can keep or remove the active indicator if not needed */}
|
||||
</motion.a>
|
||||
))}
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="ml-4 relative group overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-2.5 rounded-xl text-sm font-bold shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40 transition-all"
|
||||
>
|
||||
<span className="relative z-10 flex items-center gap-2">
|
||||
<Sparkles className="w-4 h-4" />
|
||||
Get Started
|
||||
</span>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-r from-purple-600 to-blue-600"
|
||||
initial={{ x: "100%" }}
|
||||
whileHover={{ x: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
/>
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Toggle – bigger touch target */}
|
||||
<motion.button
|
||||
whileTap={{ scale: 0.92 }}
|
||||
className="lg:hidden relative z-10 text-white p-3 rounded-full hover:bg-white/10 transition-colors"
|
||||
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
{isMobileMenuOpen ? (
|
||||
<motion.div
|
||||
key="close"
|
||||
initial={{ rotate: -90, opacity: 0 }}
|
||||
animate={{ rotate: 0, opacity: 1 }}
|
||||
exit={{ rotate: 90, opacity: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<X className="w-7 h-7" />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="menu"
|
||||
initial={{ rotate: -90, opacity: 0 }}
|
||||
animate={{ rotate: 0, opacity: 1 }}
|
||||
exit={{ rotate: 90, opacity: 0 }}
|
||||
transition={{ duration: 0.25 }}
|
||||
>
|
||||
<Menu className="w-7 h-7" />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
</AnimatePresence>
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Menu – Slide from right + better visuals */}
|
||||
<AnimatePresence>
|
||||
{isMobileMenuOpen && (
|
||||
<>
|
||||
{/* Backdrop with subtle vignette */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="fixed inset-0 bg-black/70 backdrop-blur-md z-40 lg:hidden"
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
/>
|
||||
|
||||
{/* Side sheet style menu */}
|
||||
<motion.div
|
||||
initial={{ x: "100%" }}
|
||||
animate={{ x: 0 }}
|
||||
exit={{ x: "100%" }}
|
||||
transition={{ type: "spring", damping: 30, stiffness: 200 }}
|
||||
className="fixed top-0 right-0 bottom-0 w-4/5 max-w-sm z-50 lg:hidden"
|
||||
>
|
||||
<div className="h-full bg-gradient-to-b from-black/95 via-black/97 to-black/95 backdrop-blur-2xl border-l border-white/10 shadow-2xl flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="p-6 border-b border-white/10 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Activity className="w-8 h-8 text-blue-400" />
|
||||
<span className="text-xl font-bold text-white tracking-tight">Skyheal</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="p-2 rounded-full hover:bg-white/10 transition-colors"
|
||||
>
|
||||
<X className="w-6 h-6 text-zinc-300" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Menu Items */}
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
exit="exit"
|
||||
className="flex-1 p-6 space-y-2 overflow-y-auto"
|
||||
>
|
||||
{navItems.map((item) => (
|
||||
<motion.a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
variants={itemVariants}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="group flex items-center gap-4 p-4 rounded-2xl hover:bg-white/5 active:bg-white/8 transition-all duration-200"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500/10 to-purple-500/10 flex items-center justify-center border border-white/10 group-hover:border-blue-500/40 group-hover:shadow-[0_0_16px_rgba(59,130,246,0.25)] transition-all duration-300">
|
||||
<item.icon className="w-6 h-6 text-blue-400 group-hover:scale-110 transition-transform" />
|
||||
</div>
|
||||
<span className="text-lg font-medium text-white group-hover:text-blue-300 transition-colors">
|
||||
{item.name}
|
||||
</span>
|
||||
<ChevronRight className="ml-auto w-5 h-5 text-zinc-500 group-hover:text-blue-400 group-hover:translate-x-1 transition-all" />
|
||||
</motion.a>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* CTA at bottom */}
|
||||
<div className="p-6 border-t border-white/10 mt-auto">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.03 }}
|
||||
whileTap={{ scale: 0.97 }}
|
||||
className="w-full relative overflow-hidden bg-gradient-to-r from-blue-600 to-purple-600 text-white py-4 rounded-2xl font-semibold text-base shadow-xl shadow-blue-600/30 hover:shadow-blue-600/50 transition-all group"
|
||||
>
|
||||
<span className="relative z-10 flex items-center justify-center gap-2.5">
|
||||
<Sparkles className="w-5 h-5" />
|
||||
Get Started Free
|
||||
</span>
|
||||
<motion.div
|
||||
className="absolute inset-0 bg-gradient-to-r from-purple-600 via-blue-600 to-purple-600 bg-[length:200%_100%]"
|
||||
initial={{ x: "100%" }}
|
||||
whileHover={{ x: "-100%" }}
|
||||
transition={{ duration: 1.2, ease: "linear" }}
|
||||
/>
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,101 +1,446 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Brain, Activity, Search, ShieldCheck } from "lucide-react";
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "Precision Analysis",
|
||||
description: "Deep learning models trained on millions of clinical cases.",
|
||||
icon: Search
|
||||
},
|
||||
{
|
||||
title: "Real-time Insight",
|
||||
description: "Instantaneous diagnostic suggestions based on symptoms.",
|
||||
icon: Activity
|
||||
},
|
||||
{
|
||||
title: "Validated Models",
|
||||
description: "Clinically validated AI ensuring high accuracy rates.",
|
||||
icon: ShieldCheck
|
||||
}
|
||||
];
|
||||
import { motion, useScroll, useTransform } from "framer-motion";
|
||||
import {
|
||||
Brain,
|
||||
Search,
|
||||
Database,
|
||||
Zap,
|
||||
Shield,
|
||||
TrendingUp,
|
||||
CheckCircle,
|
||||
Activity,
|
||||
Cpu,
|
||||
Network,
|
||||
} from "lucide-react";
|
||||
import { useRef, useEffect, useState } from "react";
|
||||
|
||||
export default function AIDiagnosis() {
|
||||
return (
|
||||
<section id="diagnosis" className="py-24 bg-primary/5 relative">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex flex-col md:flex-row-reverse items-center gap-16">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1 space-y-8"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-secondary/10 border border-secondary/20 text-secondary text-sm font-semibold">
|
||||
<Brain className="w-4 h-4" />
|
||||
<span>Advanced Analytics</span>
|
||||
</div>
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const [modelLoaded, setModelLoaded] = useState(false);
|
||||
const [scanProgress, setScanProgress] = useState(0);
|
||||
|
||||
<h2 className="text-4xl md:text-5xl font-bold leading-tight">
|
||||
AI-Powered <span className="text-gradient">Diagnosis</span> with Unmatched Precision
|
||||
</h2>
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ["start end", "end start"],
|
||||
});
|
||||
|
||||
<p className="text-lg text-foreground/60 leading-relaxed max-w-xl">
|
||||
Elevate your diagnostic accuracy with Skyheal's clinical brain. Our AI analyzes patient data, medical history, and current symptoms to provide actionable insights.
|
||||
</p>
|
||||
const y = useTransform(scrollYProgress, [0, 0.5], [100, 0]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.3], [0, 1]);
|
||||
const scale = useTransform(scrollYProgress, [0, 0.5], [0.9, 1]);
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
{features.map((f, i) => (
|
||||
<div key={i} className="glass p-6 rounded-2xl group hover:border-primary/50 transition-colors">
|
||||
<f.icon className="w-8 h-8 text-primary mb-4 group-hover:scale-110 transition-transform" />
|
||||
<h3 className="font-bold text-lg mb-2">{f.title}</h3>
|
||||
<p className="text-sm text-foreground/60">{f.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
// Simulate scan progress
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setScanProgress((prev) => (prev >= 100 ? 0 : prev + 1));
|
||||
}, 50);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1"
|
||||
>
|
||||
<div className="relative group">
|
||||
<div className="absolute inset-0 bg-secondary/10 rounded-full blur-[100px] animate-pulse-slow" />
|
||||
<div className="relative glass aspect-square rounded-[3rem] overflow-hidden flex items-center justify-center p-12 border-white/5">
|
||||
<div className="absolute inset-0 opacity-20 pointer-events-none">
|
||||
<div className="h-full w-full bg-[radial-gradient(#3b82f6_1px,transparent_1px)] [background-size:20px_20px]" />
|
||||
</div>
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1, 1.05, 1],
|
||||
rotate: [0, 5, -5, 0]
|
||||
}}
|
||||
transition={{ repeat: Infinity, duration: 8 }}
|
||||
>
|
||||
<Brain className="w-48 h-48 text-primary drop-shadow-[0_0_80px_rgba(59,130,246,0.5)]" />
|
||||
</motion.div>
|
||||
// Three.js setup
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined" || !canvasRef.current) return;
|
||||
|
||||
{/* Orbital Elements */}
|
||||
{[...Array(3)].map((_, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ repeat: Infinity, duration: 10 + i * 5, ease: "linear" }}
|
||||
className="absolute border border-white/5 rounded-full"
|
||||
style={{
|
||||
width: `${200 + i * 80}px`,
|
||||
height: `${200 + i * 80}px`
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
let animationId: number | undefined;
|
||||
let scene: any;
|
||||
let camera: any;
|
||||
let renderer: any;
|
||||
let model: any;
|
||||
let controls: any;
|
||||
|
||||
const initThreeJS = async () => {
|
||||
const THREE = await import("three");
|
||||
const { GLTFLoader, OrbitControls } = await import("three-stdlib");
|
||||
|
||||
scene = new THREE.Scene();
|
||||
camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
|
||||
camera.position.set(0, 0, 5);
|
||||
|
||||
renderer = new THREE.WebGLRenderer({
|
||||
canvas: canvasRef.current!,
|
||||
alpha: true,
|
||||
antialias: true,
|
||||
});
|
||||
renderer.setSize(500, 500);
|
||||
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
||||
renderer.setClearColor(0x000000, 0);
|
||||
|
||||
// Lighting
|
||||
scene.add(new THREE.AmbientLight(0xffffff, 0.8));
|
||||
|
||||
const dirLight1 = new THREE.DirectionalLight(0x6366f1, 1.2);
|
||||
dirLight1.position.set(5, 5, 5);
|
||||
scene.add(dirLight1);
|
||||
|
||||
const dirLight2 = new THREE.DirectionalLight(0xa855f7, 0.8);
|
||||
dirLight2.position.set(-5, 3, -5);
|
||||
scene.add(dirLight2);
|
||||
|
||||
// Controls
|
||||
controls = new OrbitControls(camera, renderer.domElement);
|
||||
controls.enableDamping = true;
|
||||
controls.dampingFactor = 0.05;
|
||||
controls.enableZoom = false;
|
||||
controls.autoRotate = true;
|
||||
controls.autoRotateSpeed = 1.5;
|
||||
|
||||
// Model loading
|
||||
const loader = new GLTFLoader();
|
||||
const modelURL = "/human_body.glb";
|
||||
|
||||
try {
|
||||
const gltf = await loader.loadAsync(modelURL);
|
||||
model = gltf.scene;
|
||||
|
||||
// Center & scale model
|
||||
const box = new THREE.Box3().setFromObject(model);
|
||||
const center = box.getCenter(new THREE.Vector3());
|
||||
const size = box.getSize(new THREE.Vector3());
|
||||
const maxDim = Math.max(size.x, size.y, size.z);
|
||||
const scaleFactor = 3 / maxDim;
|
||||
|
||||
model.scale.setScalar(scaleFactor);
|
||||
model.position.sub(center.multiplyScalar(scaleFactor));
|
||||
|
||||
// Performance: disable shadows
|
||||
model.traverse((child: any) => {
|
||||
if (child.isMesh) {
|
||||
child.castShadow = false;
|
||||
child.receiveShadow = false;
|
||||
}
|
||||
});
|
||||
|
||||
scene.add(model);
|
||||
setModelLoaded(true);
|
||||
} catch (error) {
|
||||
console.error("Failed to load GLB model → using fallback", error);
|
||||
|
||||
const geometry = new THREE.IcosahedronGeometry(1.5, 2);
|
||||
const material = new THREE.MeshStandardMaterial({
|
||||
color: 0x6366f1,
|
||||
roughness: 0.3,
|
||||
metalness: 0.7,
|
||||
emissive: 0x3b82f6,
|
||||
emissiveIntensity: 0.2,
|
||||
});
|
||||
model = new THREE.Mesh(geometry, material);
|
||||
scene.add(model);
|
||||
setModelLoaded(true);
|
||||
}
|
||||
|
||||
// Animation loop
|
||||
const animate = () => {
|
||||
animationId = requestAnimationFrame(animate);
|
||||
controls.update();
|
||||
if (model) model.rotation.y += 0.002;
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
|
||||
animate();
|
||||
};
|
||||
|
||||
initThreeJS();
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
if (animationId !== undefined) {
|
||||
cancelAnimationFrame(animationId);
|
||||
}
|
||||
if (controls) controls.dispose();
|
||||
if (renderer) renderer.dispose();
|
||||
if (scene) {
|
||||
scene.traverse((obj: any) => {
|
||||
if (obj.geometry) obj.geometry.dispose();
|
||||
if (obj.material) {
|
||||
if (Array.isArray(obj.material)) {
|
||||
obj.material.forEach((m: any) => m.dispose());
|
||||
} else {
|
||||
obj.material.dispose();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
id="diagnosis"
|
||||
className="relative py-20 md:py-32 lg:py-40 overflow-hidden"
|
||||
>
|
||||
{/* Ambient glows */}
|
||||
<div className="absolute top-1/4 left-0 w-[700px] h-[700px] bg-blue-500/10 rounded-full blur-[150px] animate-pulse" />
|
||||
<div className="absolute bottom-1/4 right-0 w-[600px] h-[600px] bg-purple-500/10 rounded-full blur-[120px]" />
|
||||
|
||||
{/* Subtle grid */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.02]"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
|
||||
backgroundSize: "50px 50px",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-12 lg:gap-16 xl:gap-24 items-center">
|
||||
{/* 3D Viewer Column */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 1 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="absolute inset-0 rounded-[3rem] blur-3xl opacity-60" />
|
||||
|
||||
<div className="relative rounded-3xl backdrop-blur-2xl shadow-2xl overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="relative p-6 border-b border-white/5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="relative">
|
||||
<div className="w-10 h-10 rounded-xl flex items-center justify-center">
|
||||
<Brain className="w-5 h-5 text-blue-400" />
|
||||
</div>
|
||||
<div className="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full border-2 border-black animate-pulse" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-bold text-white">Neural Diagnostic Engine</h3>
|
||||
<p className="text-xs text-zinc-500">Real-time Analysis Active</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-1 rounded-full bg-green-500/10 border border-green-500/20">
|
||||
<span className="text-xs font-semibold text-green-400">Live</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Canvas area */}
|
||||
<div className="relative p-6 sm:p-8">
|
||||
<div className="absolute top-8 left-8 w-16 h-16 border-l-2 border-t-2 border-blue-400/30 rounded-tl-2xl" />
|
||||
<div className="absolute top-8 right-8 w-16 h-16 border-r-2 border-t-2 border-purple-400/30 rounded-tr-2xl" />
|
||||
<div className="absolute bottom-8 left-8 w-16 h-16 border-l-2 border-b-2 border-pink-400/30 rounded-bl-2xl" />
|
||||
<div className="absolute bottom-8 right-8 w-16 h-16 border-r-2 border-b-2 border-cyan-400/30 rounded-br-2xl" />
|
||||
|
||||
<div className="relative aspect-square flex items-center justify-center">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="w-full h-full max-w-[500px] max-h-[500px] relative z-10"
|
||||
/>
|
||||
|
||||
{!modelLoaded && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="space-y-4 text-center">
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
|
||||
>
|
||||
<Brain className="w-16 h-16 text-blue-400 mx-auto" />
|
||||
</motion.div>
|
||||
<p className="text-sm text-zinc-400 font-semibold">
|
||||
Initializing Neural Network...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{modelLoaded && (
|
||||
<>
|
||||
<motion.div
|
||||
animate={{ y: [-250, 250] }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute inset-x-0 h-px bg-gradient-to-r from-transparent via-blue-400 to-transparent opacity-50"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{ y: [250, -250] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "linear", delay: 1.5 }}
|
||||
className="absolute inset-x-0 h-px bg-gradient-to-r from-transparent via-purple-400 to-transparent opacity-30"
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status footer */}
|
||||
<div className="p-6 space-y-4 border-t border-white/5">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-zinc-400 font-semibold">Analysis Progress</span>
|
||||
<span className="text-blue-400 font-bold">{scanProgress}%</span>
|
||||
</div>
|
||||
<div className="h-2 bg-white/5 rounded-full overflow-hidden">
|
||||
<motion.div
|
||||
style={{ width: `${scanProgress}%` }}
|
||||
className="h-full bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{[
|
||||
{ icon: Cpu, label: "Processing", value: "98.4%", color: "text-blue-400" },
|
||||
{ icon: Network, label: "Neural Load", value: "76.2%", color: "text-purple-400" },
|
||||
{ icon: Activity, label: "Accuracy", value: "99.8%", color: "text-green-400" },
|
||||
].map((stat, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, y: 10 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: idx * 0.1 }}
|
||||
className="p-3 rounded-xl bg-white/[0.03] border border-white/5"
|
||||
>
|
||||
<stat.icon className={`w-4 h-4 ${stat.color} mb-2`} />
|
||||
<p className="text-xs text-zinc-500 mb-1">{stat.label}</p>
|
||||
<p className="text-sm font-bold text-white">{stat.value}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 pb-6">
|
||||
<p className="text-center text-xs text-zinc-600 font-medium flex items-center justify-center gap-2">
|
||||
<span className="w-1 h-1 rounded-full bg-zinc-600 animate-pulse" />
|
||||
Drag to rotate • Interactive 3D visualization
|
||||
<span className="w-1 h-1 rounded-full bg-zinc-600 animate-pulse" />
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
</motion.div>
|
||||
|
||||
{/* Text / Features Column */}
|
||||
<motion.div
|
||||
style={{ y, opacity, scale }}
|
||||
className="space-y-10 lg:space-y-12"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.1 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
<h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold leading-[1.1] tracking-tight text-white">
|
||||
Neural Clinical
|
||||
<br />
|
||||
<span className="bg-gradient-to-r from-purple-400 via-pink-400 to-blue-400 bg-clip-text text-transparent">
|
||||
Synthesis
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-base sm:text-lg lg:text-xl text-zinc-400 leading-relaxed max-w-2xl">
|
||||
Enterprise-grade diagnostic assistance powered by advanced AI. Cross-reference clinical patterns against{" "}
|
||||
<span className="text-white font-semibold">global medical databases</span> with{" "}
|
||||
<span className="text-white font-semibold">sub-second latency</span> and unparalleled accuracy.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Feature Cards */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.2 }}
|
||||
className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6"
|
||||
>
|
||||
{[
|
||||
{
|
||||
icon: Search,
|
||||
title: "Pattern Recognition",
|
||||
text: "AI-powered clinical marker identification with zero-bias analysis technology.",
|
||||
color: "from-blue-500 to-cyan-500",
|
||||
iconColor: "text-blue-400",
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
title: "Medical Database",
|
||||
text: "Instant access to verified institutional medical models and research.",
|
||||
color: "from-purple-500 to-pink-500",
|
||||
iconColor: "text-purple-400",
|
||||
},
|
||||
].map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.3 + i * 0.1 }}
|
||||
whileHover={{
|
||||
y: -4,
|
||||
transition: { duration: 0.2 },
|
||||
}}
|
||||
className="group p-5 sm:p-6 rounded-2xl bg-white/[0.02] border border-white/5 backdrop-blur-sm hover:bg-white/[0.04] hover:border-white/10 transition-all cursor-pointer"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="relative inline-block">
|
||||
<div
|
||||
className={`absolute inset-0 bg-gradient-to-br ${item.color} rounded-xl blur-lg opacity-0 group-hover:opacity-50 transition-opacity`}
|
||||
/>
|
||||
<div className="relative w-12 h-12 rounded-xl bg-gradient-to-br from-white/10 to-white/5 border border-white/10 flex items-center justify-center group-hover:border-white/20 transition-colors">
|
||||
<item.icon className={`w-6 h-6 ${item.iconColor}`} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-bold text-white group-hover:text-white/90 transition-colors">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-sm text-zinc-400 leading-relaxed">{item.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Stats */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.4 }}
|
||||
className="grid grid-cols-3 gap-4 sm:gap-6 pt-6"
|
||||
>
|
||||
{[
|
||||
{ icon: Zap, value: "<500ms", label: "Query Time" },
|
||||
{ icon: Shield, value: "100%", label: "Secure" },
|
||||
{ icon: TrendingUp, value: "99.8%", label: "Accuracy" },
|
||||
].map((stat, i) => (
|
||||
<div key={i} className="text-center space-y-2">
|
||||
<div className="flex justify-center">
|
||||
<div className="p-2 rounded-lg bg-white/5 border border-white/10">
|
||||
<stat.icon className="w-4 h-4 sm:w-5 sm:h-5 text-purple-400" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xl sm:text-2xl font-bold text-white">{stat.value}</p>
|
||||
<p className="text-[10px] sm:text-xs text-zinc-500 font-semibold uppercase tracking-wider">
|
||||
{stat.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Trust Indicators */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.5 }}
|
||||
className="flex flex-wrap gap-3 sm:gap-4 pt-4"
|
||||
>
|
||||
{["FDA Compliant", "HIPAA Certified", "ISO 27001"].map((badge, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-2 px-3 sm:px-4 py-2 rounded-full bg-white/[0.03] border border-white/10 backdrop-blur-sm"
|
||||
>
|
||||
<CheckCircle className="w-3 h-3 sm:w-4 sm:h-4 text-green-400" />
|
||||
<span className="text-[10px] sm:text-xs text-zinc-400 font-semibold">{badge}</span>
|
||||
</div>
|
||||
))}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,88 +1,195 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Pill, Zap, Users, ClipboardCheck } from "lucide-react";
|
||||
import { motion, useScroll, useTransform } from "framer-motion";
|
||||
import { Pill, ShieldCheck, Zap, ArrowRight, Building2, Truck } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
|
||||
export default function AIPrescription() {
|
||||
const containerRef = useRef(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ["start end", "end start"]
|
||||
});
|
||||
|
||||
const rotateX = useTransform(scrollYProgress, [0, 1], [-10, 10]);
|
||||
const y = useTransform(scrollYProgress, [0, 1], [40, -40]);
|
||||
|
||||
return (
|
||||
<section id="prescription" className="py-24 relative">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex flex-col md:flex-row items-center gap-16">
|
||||
<section ref={containerRef} id="prescription" className="py-20 sm:py-32 lg:py-40 relative overflow-hidden bg-black">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col lg:flex-row items-center gap-12 sm:gap-16 lg:gap-20 xl:gap-32">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
style={{ y }}
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1 space-y-8"
|
||||
className="flex-1 space-y-10 sm:space-y-12 lg:space-y-16"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-accent text-sm font-semibold">
|
||||
<Pill className="w-4 h-4" />
|
||||
<span>Smart Fulfillment</span>
|
||||
<div className="space-y-6">
|
||||
<div className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-white/5 border border-white/10 text-zinc-300 text-xs font-semibold tracking-wide">
|
||||
<Zap className="w-4 h-4 text-emerald-400" />
|
||||
<span>Clinical Fulfillment Engine</span>
|
||||
</div>
|
||||
<h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-[1.1] text-white">
|
||||
Automated Order <br />
|
||||
<span className="text-zinc-400">Lifecycle Management</span>
|
||||
</h2>
|
||||
<p className="text-lg md:text-xl text-zinc-400 leading-relaxed max-w-xl">
|
||||
Enterprise-grade pharmaceutical orchestration with AI-powered drug interaction screening, real-time compliance monitoring, and seamless clinical workflow integration.
|
||||
</p>
|
||||
|
||||
{/* Key Metrics */}
|
||||
<div className="grid grid-cols-3 gap-3 sm:gap-4 pt-4">
|
||||
<div className="p-3 sm:p-4 rounded-xl bg-white/[0.03] border border-white/10">
|
||||
<div className="text-xl sm:text-2xl md:text-3xl font-bold text-white">99.8%</div>
|
||||
<div className="text-[10px] sm:text-xs text-zinc-500 mt-1">Accuracy Rate</div>
|
||||
</div>
|
||||
<div className="p-3 sm:p-4 rounded-xl bg-white/[0.03] border border-white/10">
|
||||
<div className="text-xl sm:text-2xl md:text-3xl font-bold text-white"><2s</div>
|
||||
<div className="text-[10px] sm:text-xs text-zinc-500 mt-1">Avg Response</div>
|
||||
</div>
|
||||
<div className="p-3 sm:p-4 rounded-xl bg-white/[0.03] border border-white/10">
|
||||
<div className="text-xl sm:text-2xl md:text-3xl font-bold text-white">24/7</div>
|
||||
<div className="text-[10px] sm:text-xs text-zinc-500 mt-1">Monitoring</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-4xl md:text-5xl font-bold leading-tight">
|
||||
End-to-End <span className="text-gradient">AI Prescription</span> Ecosystem
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-foreground/60 leading-relaxed max-w-xl">
|
||||
From the doctor's desk to the patient's door. Skyheal automates the entire prescription lifecycle, ensuring safety, compliance, and convenience.
|
||||
</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-4 sm:space-y-6">
|
||||
{[
|
||||
{ icon: Zap, text: "Instant Pharmacy Integration", label: "Smart Link" },
|
||||
{ icon: Users, text: "Patient Medication Management", label: "Care Portal" },
|
||||
{ icon: ClipboardCheck, text: "Automatic Drug Interaction Checks", label: "Safety First" }
|
||||
{
|
||||
icon: Pill,
|
||||
title: "Drug Interaction Screening",
|
||||
desc: "Advanced AI cross-references patient medications against 500,000+ drug interaction databases in real-time.",
|
||||
stat: "250K+ checks/day"
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Regulatory Compliance",
|
||||
desc: "Automated verification against FDA, DEA, and state regulations with instant flagging of non-compliant orders.",
|
||||
stat: "100% compliant"
|
||||
}
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-6 p-4 rounded-2xl bg-white/5 hover:bg-white/10 transition-colors border border-white/5">
|
||||
<div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
|
||||
<item.icon className="w-6 h-6 text-primary" />
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: i * 0.2 }}
|
||||
className="flex gap-4 sm:gap-6 group p-4 sm:p-6 rounded-2xl bg-white/[0.02] border border-white/5 hover:border-white/10 hover:bg-white/[0.04] transition-all"
|
||||
>
|
||||
<div className="w-12 h-12 sm:w-14 sm:h-14 rounded-xl bg-gradient-to-br from-white/10 to-white/5 flex items-center justify-center border border-white/10 shrink-0">
|
||||
<item.icon className="w-6 h-6 sm:w-7 sm:h-7 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-xs font-bold uppercase tracking-widest text-primary/60">{item.label}</span>
|
||||
<p className="text-base font-medium text-foreground/90">{item.text}</p>
|
||||
<div className="space-y-2 flex-1 min-w-0">
|
||||
<div className="flex items-start sm:items-center justify-between gap-2 sm:gap-4 flex-col sm:flex-row">
|
||||
<h4 className="text-base sm:text-lg font-bold text-white">{item.title}</h4>
|
||||
<span className="text-[10px] sm:text-xs font-semibold text-emerald-400 bg-emerald-400/10 px-2.5 sm:px-3 py-1 rounded-full whitespace-nowrap">
|
||||
{item.stat}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs sm:text-sm text-zinc-400 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1"
|
||||
style={{ rotateX }}
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 1 }}
|
||||
className="flex-1 relative w-full max-w-lg mx-auto lg:mx-0"
|
||||
>
|
||||
<div className="glass rounded-[2.5rem] p-1 shadow-2xl overflow-hidden">
|
||||
<div className="bg-background/40 p-8 rounded-[2.25rem] space-y-8">
|
||||
<div className="flex items-center justify-between border-b border-white/5 pb-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center">
|
||||
<Pill className="w-5 h-5 text-accent" />
|
||||
<div className="rounded-3xl p-px border border-white/10 shadow-2xl bg-gradient-to-br from-white/[0.05] to-transparent backdrop-blur-sm">
|
||||
<div className="relative aspect-[4/5] rounded-[calc(1.5rem-1px)] overflow-hidden bg-gradient-to-br from-zinc-900 to-black p-6 sm:p-8 lg:p-10 xl:p-12 space-y-6 sm:space-y-8">
|
||||
{/* Header with Status */}
|
||||
<div className="relative z-10 flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-xs sm:text-sm font-semibold text-zinc-400">Order Processing</h3>
|
||||
<p className="text-xl sm:text-2xl font-bold text-white mt-1">RX-2847392</p>
|
||||
</div>
|
||||
<div className="px-2.5 sm:px-3 py-1 sm:py-1.5 bg-emerald-500/20 border border-emerald-500/30 rounded-full">
|
||||
<span className="text-[10px] sm:text-xs font-semibold text-emerald-400">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Workflow Steps */}
|
||||
<div className="flex justify-between items-center relative gap-2 sm:gap-3">
|
||||
<div className="w-12 h-12 sm:w-14 sm:h-14 rounded-xl border-white/20 border flex items-center justify-center relative shadow-lg bg-white/5 backdrop-blur-sm">
|
||||
<Building2 className="text-white w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7" />
|
||||
<div className="absolute -bottom-5 sm:-bottom-6 text-[9px] sm:text-[10px] font-semibold text-zinc-400 whitespace-nowrap">Pharmacy</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 h-px bg-white/10 relative overflow-hidden">
|
||||
<motion.div
|
||||
animate={{ x: ["-100%", "300%"] }}
|
||||
transition={{ repeat: Infinity, duration: 3, ease: "linear" }}
|
||||
className="absolute top-0 w-16 sm:w-20 h-full bg-gradient-to-r from-transparent via-emerald-400/50 to-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-12 h-12 sm:w-14 sm:h-14 rounded-xl border-white/20 border flex items-center justify-center relative shadow-lg bg-white/5 backdrop-blur-sm">
|
||||
<Truck className="text-white w-5 h-5 sm:w-6 sm:h-6 lg:w-7 lg:h-7" />
|
||||
<div className="absolute -bottom-5 sm:-bottom-6 text-[9px] sm:text-[10px] font-semibold text-zinc-400 whitespace-nowrap">Delivery</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Processing Details */}
|
||||
<div className="space-y-3 sm:space-y-4 pt-6 sm:pt-8">
|
||||
{/* Patient Info Card */}
|
||||
<div className="p-4 sm:p-5 rounded-xl border border-white/10 space-y-2.5 sm:space-y-3 shadow-lg bg-white/[0.03] backdrop-blur-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] sm:text-xs font-semibold text-zinc-400">Patient ID</span>
|
||||
<span className="text-[10px] sm:text-xs font-bold text-white">PT-8492</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-bold text-sm">Prescription Portal</h4>
|
||||
<p className="text-xs text-foreground/50">Active Session</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] sm:text-xs font-semibold text-zinc-400">Medication</span>
|
||||
<span className="text-[10px] sm:text-xs font-bold text-white">Lisinopril 10mg</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-[10px] sm:text-xs font-semibold text-zinc-400">Quantity</span>
|
||||
<span className="text-[10px] sm:text-xs font-bold text-white">30 tablets</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-3 py-1 rounded-full bg-accent/10 text-accent text-[10px] font-bold uppercase">Verified</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{[1, 2].map((_, i) => (
|
||||
<div key={i} className="p-4 rounded-xl bg-white/5 border border-white/5 space-y-3">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="h-4 w-1/3 bg-white/10 rounded-md animate-pulse" />
|
||||
<div className="h-4 w-20 bg-primary/20 rounded-md" />
|
||||
{/* Verification Status */}
|
||||
<motion.div className="p-5 sm:p-6 bg-gradient-to-br from-emerald-500/10 to-emerald-500/5 rounded-xl border border-emerald-500/20 space-y-3 sm:space-y-4 relative group overflow-hidden">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-emerald-500/0 via-emerald-500/5 to-emerald-500/0 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
|
||||
<div className="flex justify-between items-start relative z-10">
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-sm sm:text-base font-bold text-white flex items-center gap-2">
|
||||
<ShieldCheck className="w-3.5 h-3.5 sm:w-4 sm:h-4 text-emerald-400" />
|
||||
Verified & Approved
|
||||
</h4>
|
||||
<p className="text-[10px] sm:text-xs font-medium text-zinc-400">Completed at 12:44 PM EST</p>
|
||||
</div>
|
||||
<div className="h-2 w-full bg-white/5 rounded-full" />
|
||||
<div className="h-2 w-2/3 bg-white/5 rounded-full" />
|
||||
<div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button className="w-full bg-accent hover:bg-accent/80 text-white py-4 rounded-xl font-bold transition-all transform hover:translate-y-[-2px] shadow-lg shadow-accent/20">
|
||||
Authorize Digital Delivery
|
||||
</button>
|
||||
{/* Checks List */}
|
||||
<div className="space-y-2 relative z-10">
|
||||
{[
|
||||
"Drug interaction check",
|
||||
"Dosage verification",
|
||||
"Insurance validation"
|
||||
].map((check, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2 text-[10px] sm:text-xs text-zinc-300">
|
||||
<div className="w-3.5 h-3.5 sm:w-4 sm:h-4 rounded-full bg-emerald-400/20 border border-emerald-400/40 flex items-center justify-center shrink-0">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
|
||||
</div>
|
||||
<span>{check}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button className="relative z-10 w-full bg-white text-black py-3 sm:py-3.5 rounded-lg font-bold text-xs sm:text-sm flex items-center justify-center gap-2 hover:bg-zinc-100 active:scale-[0.98] transition-all shadow-lg">
|
||||
View Full Report
|
||||
<ArrowRight className="w-3.5 h-3.5 sm:w-4 sm:h-4" />
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -90,4 +197,4 @@ export default function AIPrescription() {
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,83 +1,168 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Mic, CheckCircle2 } from "lucide-react";
|
||||
import { motion, useScroll, useTransform } from "framer-motion";
|
||||
import { Mic, CheckCircle2, Brain, Zap, Lock, Sparkles } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
|
||||
export default function AIVoiceSoap() {
|
||||
const containerRef = useRef(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ["start end", "end start"],
|
||||
});
|
||||
|
||||
const scale = useTransform(scrollYProgress, [0, 0.5], [0.95, 1]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.4], [0.6, 1]);
|
||||
const y = useTransform(scrollYProgress, [0, 0.5], [40, 0]);
|
||||
|
||||
const bars = Array.from({ length: 24 }, (_, i) => ({
|
||||
height: [20, 45 + Math.sin(i * 0.8) * 30, 20],
|
||||
duration: 2 + (i % 8) * 0.25,
|
||||
delay: i * 0.03,
|
||||
}));
|
||||
|
||||
return (
|
||||
<section id="voice-soap" className="py-24 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex flex-col md:flex-row items-center gap-16">
|
||||
<section
|
||||
ref={containerRef}
|
||||
id="voice-soap"
|
||||
className="relative py-20 md:py-32 lg:py-40 text-white overflow-hidden"
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-zinc-950 via-zinc-900/50 to-zinc-950" />
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-blue-950/20 via-transparent to-transparent" />
|
||||
|
||||
<div className="container relative z-10 mx-auto px-5 md:px-8 lg:px-12 max-w-7xl">
|
||||
<div className="grid lg:grid-cols-2 gap-16 lg:gap-24 xl:gap-32 items-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1 space-y-8"
|
||||
style={{ scale, opacity, y }}
|
||||
className="space-y-10 lg:space-y-14"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-semibold">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="inline-flex items-center gap-3 px-6 py-2 rounded-full bg-blue-950/40 border border-blue-800/40 text-blue-400 text-xs font-semibold tracking-wide uppercase"
|
||||
>
|
||||
<Mic className="w-4 h-4" />
|
||||
<span>AI Voice Intelligence</span>
|
||||
Ambient Clinical Intelligence
|
||||
</motion.div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<h2 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold tracking-tight leading-tight">
|
||||
Autonomous{" "}
|
||||
<span className="text-blue-400">Voice-to-SOAP</span>
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl text-zinc-400 leading-relaxed max-w-3xl font-light">
|
||||
Transform ambient conversations into structured, accurate{" "}
|
||||
<span className="text-white font-medium">SOAP notes</span> in real-time — with enterprise-grade security and clinical precision.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<h2 className="text-4xl md:text-5xl font-bold leading-tight">
|
||||
From <span className="text-gradient">Voice</span> to Professional <span className="text-gradient">SOAP</span> Notes Instantly
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-foreground/60 leading-relaxed max-w-xl">
|
||||
Focus on your patients, not your paperwork. Our advanced AI listens to your clinical conversations and generates structured, accurate SOAP notes in real-time.
|
||||
</p>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6 pt-6">
|
||||
{[
|
||||
"Real-time clinical voice transcription",
|
||||
"Automated SOAP structure generation",
|
||||
"Medical terminology specialization",
|
||||
"HIPAA-compliant data processing"
|
||||
{ icon: Brain, title: "Neural Context Understanding", desc: "Advanced NLP for medical terminology and context" },
|
||||
{ icon: Zap, title: "Instant SOAP Generation", desc: "Zero-latency transcription to structured notes" },
|
||||
{ icon: Lock, title: "End-to-End PHI Security", desc: "AES-256 encryption & HIPAA/GDPR compliant" },
|
||||
{ icon: Sparkles, title: "Auto-Suggest & Edit", desc: "AI-powered refinements & clinician review" },
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<CheckCircle2 className="w-5 h-5 text-accent" />
|
||||
<span className="text-foreground/80">{item}</span>
|
||||
</div>
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: 0.15 * i }}
|
||||
viewport={{ once: true }}
|
||||
whileHover={{ scale: 1.03, transition: { duration: 0.2 } }}
|
||||
className="flex gap-5 p-5 rounded-2xl bg-zinc-900/50 border border-zinc-800 hover:border-blue-800/50 transition-all"
|
||||
>
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-950/40 border border-blue-800/40 flex items-center justify-center flex-shrink-0">
|
||||
<item.icon className="w-6 h-6 text-blue-400" />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<h4 className="text-lg font-semibold text-white">{item.title}</h4>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
initial={{ opacity: 0, scale: 0.96 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1 relative"
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative w-full max-w-lg mx-auto lg:mx-0"
|
||||
>
|
||||
<div className="glass aspect-square rounded-3xl p-8 flex flex-col justify-center items-center relative group">
|
||||
<div className="absolute inset-0 bg-primary/5 rounded-3xl blur-3xl group-hover:bg-primary/10 transition-colors" />
|
||||
<div className="relative rounded-3xl backdrop-blur-xl shadow-2xl overflow-hidden">
|
||||
<div className="absolute inset-0 pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 space-y-8 w-full">
|
||||
<div className="p-8 md:p-10 lg:p-12 space-y-10 lg:space-y-12 relative">
|
||||
<div className="flex justify-center">
|
||||
<div className="w-24 h-24 rounded-full bg-primary/20 flex items-center justify-center animate-pulse-slow">
|
||||
<Mic className="w-12 h-12 text-primary" />
|
||||
<div className="relative">
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.4, 1], opacity: [0.4, 0, 0.4] }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="absolute inset-[-20%] rounded-full bg-blue-500/20 blur-2xl"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.3, 1], opacity: [0.3, 0, 0.3] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "easeInOut", delay: 0.6 }}
|
||||
className="absolute inset-[-20%] rounded-full bg-purple-500/15 blur-3xl"
|
||||
/>
|
||||
|
||||
<div className="relative w-24 h-24 md:w-32 md:h-32 lg:w-40 lg:h-40 rounded-full bg-zinc-800/70 border-2 border-zinc-700 flex items-center justify-center shadow-inner">
|
||||
<Mic className="w-12 h-12 md:w-16 md:h-16 lg:w-20 lg:h-20 text-blue-400 drop-shadow-lg" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-1">
|
||||
{Array.from({ length: 20 }).map((_, i) => (
|
||||
<div className="flex justify-center items-end gap-1.5 h-32 md:h-6 px-4">
|
||||
{bars.map((bar, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
animate={{ height: [10, 20 + (i % 5) * 10, 10] }}
|
||||
animate={{ height: bar.height }}
|
||||
transition={{
|
||||
repeat: Infinity,
|
||||
duration: 1 + (i % 3) * 0.5,
|
||||
ease: "easeInOut"
|
||||
duration: bar.duration,
|
||||
ease: "easeInOut",
|
||||
delay: bar.delay,
|
||||
}}
|
||||
className="w-1 bg-gradient-to-t from-primary to-secondary rounded-full"
|
||||
className="w-1.5 md:w-2 rounded-full bg-gradient-to-t from-blue-700 to-blue-400 shadow-md"
|
||||
style={{ opacity: 0.4 + (i % 8) * 0.08 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="glass-dense rounded-xl p-4 space-y-2 border border-white/10">
|
||||
<div className="h-2 w-3/4 bg-white/10 rounded-full animate-pulse" />
|
||||
<div className="h-2 w-full bg-white/10 rounded-full animate-pulse" />
|
||||
<div className="h-2 w-1/2 bg-white/10 rounded-full animate-pulse" />
|
||||
</div>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="relative rounded-2xl bg-zinc-800/60 border border-zinc-700/80 p-6 md:p-8 shadow-inner overflow-hidden"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ x: ["-100%", "200%"] }}
|
||||
transition={{ duration: 4, repeat: Infinity, ease: "linear", repeatDelay: 3 }}
|
||||
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/5 to-transparent pointer-events-none"
|
||||
/>
|
||||
|
||||
<div className="space-y-4 text-sm md:text-base">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-blue-500 shadow-lg" />
|
||||
<div className="h-3 bg-gradient-to-r from-blue-400/30 to-transparent rounded-full flex-1" />
|
||||
</div>
|
||||
<div className="h-2.5 bg-zinc-700/50 rounded-full ml-8" />
|
||||
<div className="h-2.5 bg-zinc-700/50 rounded-full ml-8 w-5/6" />
|
||||
<div className="h-2.5 bg-zinc-700/50 rounded-full ml-8 w-3/4" />
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex items-center gap-3 text-xs md:text-sm text-zinc-400">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<span>Processing in real-time</span>
|
||||
</div>
|
||||
<div className="ml-auto text-emerald-400 font-medium">Secure • Encrypted</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
@@ -85,4 +170,4 @@ export default function AIVoiceSoap() {
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,91 +1,167 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Smartphone, ShieldCheck, HeartPulse, Fingerprint } from "lucide-react";
|
||||
import { motion, useScroll, useTransform, type Variants } from "framer-motion";
|
||||
import { Mic, CheckCircle2, ShieldCheck, Zap, Activity } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
|
||||
export default function AppEcosystem() {
|
||||
return (
|
||||
<section className="py-24 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex flex-col md:flex-row-reverse items-center gap-20">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1 space-y-10"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-accent/10 border border-accent/20 text-accent text-sm font-semibold">
|
||||
<Smartphone className="w-4 h-4" />
|
||||
<span>Mobile Intelligence</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-6xl font-black tracking-tighter">
|
||||
Health in your <span className="text-gradient">Pocket</span>
|
||||
</h2>
|
||||
<p className="text-xl text-foreground/60 leading-relaxed max-w-2xl">
|
||||
Experience end-to-end healthcare with our companion mobile apps. Real-time data sync, encrypted messaging, and emergency alerts at your fingertips.
|
||||
</p>
|
||||
</div>
|
||||
export default function AIVoiceSoap() {
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
<div className="space-y-6">
|
||||
{[
|
||||
{ icon: Fingerprint, title: "Biometric Security", text: "Secure access with FaceID and Fingerprint authentication." },
|
||||
{ icon: ShieldCheck, title: "HIPAA Certified", text: "Multi-layered encryption for all personal health information (PHI)." },
|
||||
{ icon: HeartPulse, title: "Live Streaming", text: "Instant vital data visualization from connected Bluetooth devices." }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex gap-6 group">
|
||||
<div className="w-12 h-12 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:bg-primary/20 transition-colors">
|
||||
<item.icon className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-extrabold text-lg">{item.title}</h4>
|
||||
<p className="text-foreground/50">{item.text}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ["start end", "end start"],
|
||||
});
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1"
|
||||
>
|
||||
<div className="relative mx-auto max-w-[300px]">
|
||||
{/* Phone Frame Mockup */}
|
||||
<div className="relative w-full aspect-[1/2] glass rounded-[3rem] p-4 border-white/20 shadow-[0_0_80px_rgba(59,130,246,0.2)] overflow-hidden">
|
||||
<div className="absolute top-0 inset-x-0 h-8 flex justify-center items-center">
|
||||
<div className="w-20 h-4 bg-black rounded-full" />
|
||||
</div>
|
||||
<div className="h-full w-full bg-zinc-900 rounded-[2.5rem] p-6 space-y-8 relative">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="space-y-1">
|
||||
<div className="h-2 w-16 bg-white/10 rounded-full" />
|
||||
<div className="h-3 w-24 bg-white/20 rounded-full" />
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-full bg-primary/20" />
|
||||
</div>
|
||||
const y = useTransform(scrollYProgress, [0, 0.4], [50, 0]);
|
||||
const opacity = useTransform(scrollYProgress, [0, 0.25], [0, 1]);
|
||||
|
||||
<div className="aspect-square glass rounded-2xl p-6 flex items-center justify-center">
|
||||
<HeartPulse className="w-20 h-20 text-primary animate-pulse" />
|
||||
</div>
|
||||
const cardVariants: Variants = {
|
||||
hidden: { opacity: 0, y: 30 },
|
||||
visible: (custom: number) => ({
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: {
|
||||
delay: 0.12 + custom * 0.14,
|
||||
duration: 0.65,
|
||||
ease: "easeOut",
|
||||
},
|
||||
}),
|
||||
};
|
||||
|
||||
<div className="space-y-4">
|
||||
{[1, 2, 3].map((_, i) => (
|
||||
<div key={i} className="h-12 bg-white/5 rounded-xl border border-white/5" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
const features = [
|
||||
{
|
||||
icon: Mic,
|
||||
title: "Natural Voice Capture",
|
||||
desc: "Speak freely — AI transcribes SOAP notes in real time with clinical accuracy.",
|
||||
color: "text-emerald-400",
|
||||
bg: "from-emerald-600/15 to-emerald-800/5",
|
||||
},
|
||||
{
|
||||
icon: Activity,
|
||||
title: "Context-Aware Intelligence",
|
||||
desc: "Understands medical terminology, patient history context & follow-up questions.",
|
||||
color: "text-blue-400",
|
||||
bg: "from-blue-600/15 to-blue-800/5",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Instant Structuring",
|
||||
desc: "Converts conversation to structured Subjective, Objective, Assessment, Plan format.",
|
||||
color: "text-indigo-400",
|
||||
bg: "from-indigo-600/15 to-indigo-800/5",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Secure & Compliant",
|
||||
desc: "End-to-end encryption, HIPAA/GDPR compliant voice processing & storage.",
|
||||
color: "text-cyan-400",
|
||||
bg: "from-cyan-600/15 to-cyan-800/5",
|
||||
},
|
||||
];
|
||||
|
||||
{/* Decorative Elements */}
|
||||
<div className="absolute -z-10 -bottom-10 -right-10 w-40 h-40 bg-accent/20 blur-[60px] rounded-full" />
|
||||
<div className="absolute -z-10 top-20 -left-20 w-48 h-48 bg-primary/20 blur-[60px] rounded-full" />
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
return (
|
||||
<section
|
||||
ref={containerRef}
|
||||
className="relative py-20 md:py-28 lg:py-36 overflow-hidden"
|
||||
>
|
||||
{/* Subtle ambient glows */}
|
||||
<div className="absolute inset-0 pointer-events-none">
|
||||
<div className="absolute top-20 left-10 w-96 h-96 bg-emerald-600/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-10 right-10 w-80 h-80 bg-blue-600/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
|
||||
<div className="container relative z-10 mx-auto px-5 sm:px-6 lg:px-8">
|
||||
<div className="grid lg:grid-cols-2 gap-12 xl:gap-16 items-center">
|
||||
{/* Left – Text + Trust */}
|
||||
<motion.div
|
||||
style={{ y, opacity }}
|
||||
className="space-y-10 lg:space-y-12 order-2 lg:order-1"
|
||||
>
|
||||
<div className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-slate-800/40 backdrop-blur-lg border border-slate-700/50">
|
||||
<Mic className="w-5 h-5 text-emerald-400" />
|
||||
<span className="text-xs font-semibold tracking-wider uppercase text-slate-300">
|
||||
AI-Powered Voice Notes
|
||||
</span>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight text-white tracking-tight">
|
||||
Document Care
|
||||
<br />
|
||||
<span className="bg-gradient-to-r from-emerald-400 via-blue-400 to-indigo-400 bg-clip-text text-transparent">
|
||||
With Your Voice
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-slate-300 leading-relaxed max-w-2xl">
|
||||
Speak naturally during consultations. Our AI instantly transcribes, structures, and organizes SOAP notes — saving hours while maintaining clinical precision and full compliance.
|
||||
</p>
|
||||
|
||||
{/* Metrics */}
|
||||
<div className="grid grid-cols-3 gap-6 md:gap-10">
|
||||
{[
|
||||
{ value: "98.7%", label: "Transcription Accuracy", icon: CheckCircle2 },
|
||||
{ value: "<1s", label: "Real-Time Processing", icon: Zap },
|
||||
{ value: "HIPAA", label: "Compliant", icon: ShieldCheck },
|
||||
].map((item, i) => (
|
||||
<div key={i} className="text-center space-y-2">
|
||||
<item.icon className="w-6 h-6 mx-auto text-emerald-400" />
|
||||
<p className="text-2xl md:text-3xl font-bold text-white">{item.value}</p>
|
||||
<p className="text-xs uppercase tracking-wider text-slate-500 font-medium">
|
||||
{item.label}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Badges */}
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{["HIPAA Compliant", "GDPR Ready", "Encrypted Voice", "Audit Logs"].map((badge, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800/30 border border-slate-700/50 backdrop-blur-sm"
|
||||
>
|
||||
<CheckCircle2 className="w-4 h-4 text-emerald-400" />
|
||||
<span className="text-sm text-slate-300 font-medium">{badge}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right – Feature Cards */}
|
||||
<div className="grid sm:grid-cols-2 gap-5 md:gap-6 order-1 lg:order-2">
|
||||
{features.map((feature, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
custom={i}
|
||||
variants={cardVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
whileHover={{ y: -6, scale: 1.03, transition: { duration: 0.3 } }}
|
||||
className="group relative p-6 md:p-8 rounded-2xl bg-gradient-to-br from-slate-900/50 to-slate-950/50 border border-slate-700/50 backdrop-blur-lg shadow-xl hover:border-slate-600/70 transition-all duration-300 flex flex-col"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div
|
||||
className={`p-3.5 rounded-xl bg-gradient-to-br ${feature.bg} border border-slate-600/50 group-hover:border-slate-500/70 transition-colors`}
|
||||
>
|
||||
<feature.icon className={`w-7 h-7 ${feature.color}`} />
|
||||
</div>
|
||||
|
||||
<div className="flex-1 space-y-3">
|
||||
<h3 className="text-lg font-semibold text-white group-hover:text-slate-100 transition-colors">
|
||||
{feature.title}
|
||||
</h3>
|
||||
{/* Uncomment if you want descriptions back */}
|
||||
{/* <p className="text-sm text-slate-400 leading-relaxed">{feature.desc}</p> */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent via-emerald-500/30 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,81 +1,351 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Activity, Bluetooth, Gauge, MonitorSmartphone } from "lucide-react";
|
||||
import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
|
||||
import { Bluetooth, BrainCircuit, Cloud, Zap, Shield, Radio, CheckCircle2, ArrowRight } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
const devices = [
|
||||
{
|
||||
title: "Vitals Monitor",
|
||||
description: "Bluetooth-enabled real-time tracking of blood pressure, SpO2, and heart rate.",
|
||||
icon: Activity,
|
||||
color: "from-blue-500 to-cyan-400"
|
||||
},
|
||||
{
|
||||
title: "Fetal Doppler",
|
||||
description: "Hospital-grade fetal heart rate monitoring for remote maternity care.",
|
||||
icon: Gauge,
|
||||
color: "from-purple-500 to-pink-500"
|
||||
},
|
||||
{
|
||||
title: "Smart Weight Scale",
|
||||
description: "Advanced body composition analysis with automatic health profile syncing.",
|
||||
icon: MonitorSmartphone,
|
||||
color: "from-emerald-500 to-teal-400"
|
||||
}
|
||||
const technologies = [
|
||||
{
|
||||
title: "Bluetooth Devices",
|
||||
description: "Seamlessly connect medical-grade IoT devices with enterprise-level security and real-time data synchronization.",
|
||||
icon: Bluetooth,
|
||||
id: "bluetooth",
|
||||
features: [
|
||||
{ label: "Auto-Pairing", icon: Zap },
|
||||
{ label: "AES-256 Security", icon: Shield },
|
||||
{ label: "Low Energy Mode", icon: Radio }
|
||||
],
|
||||
metrics: [
|
||||
{ value: "50+", label: "Connected Devices" },
|
||||
{ value: "99.9%", label: "Reliability" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "AI Agents",
|
||||
description: "Intelligent automation powered by advanced machine learning models for predictive analytics and clinical decision support.",
|
||||
icon: BrainCircuit,
|
||||
id: "ai-agents",
|
||||
features: [
|
||||
{ label: "Pattern Recognition", icon: BrainCircuit },
|
||||
{ label: "Predictive Analytics", icon: Zap },
|
||||
{ label: "Auto-Learning", icon: Radio }
|
||||
],
|
||||
metrics: [
|
||||
{ value: "98.5%", label: "Accuracy Rate" },
|
||||
{ value: "<100ms", label: "Response Time" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Cloud Management",
|
||||
description: "Enterprise cloud infrastructure with multi-region redundancy, automated scaling, and comprehensive data governance.",
|
||||
icon: Cloud,
|
||||
id: "cloud",
|
||||
features: [
|
||||
{ label: "Multi-Region", icon: Cloud },
|
||||
{ label: "Auto-Scaling", icon: Zap },
|
||||
{ label: "HIPAA Compliant", icon: Shield }
|
||||
],
|
||||
metrics: [
|
||||
{ value: "99.99%", label: "Uptime SLA" },
|
||||
{ value: "Global", label: "Coverage" }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
export default function DeviceShowcase() {
|
||||
return (
|
||||
<section id="devices" className="py-24 relative overflow-hidden">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center max-w-3xl mx-auto mb-20 space-y-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-semibold mb-4">
|
||||
<Bluetooth className="w-4 h-4" />
|
||||
<span>Smart Peripherals</span>
|
||||
interface Technology {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||||
id: string;
|
||||
features: Array<{ label: string; icon: React.ComponentType<React.SVGProps<SVGSVGElement>> }>;
|
||||
metrics: Array<{ value: string; label: string }>;
|
||||
}
|
||||
|
||||
function TechCard({ tech, i }: { tech: Technology; i: number }) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const x = useMotionValue(0);
|
||||
const y = useMotionValue(0);
|
||||
|
||||
const mouseXSpring = useSpring(x, { stiffness: 300, damping: 30 });
|
||||
const mouseYSpring = useSpring(y, { stiffness: 300, damping: 30 });
|
||||
|
||||
const rotateX = useTransform(mouseYSpring, [-0.5, 0.5], ["8deg", "-8deg"]);
|
||||
const rotateY = useTransform(mouseXSpring, [-0.5, 0.5], ["-8deg", "8deg"]);
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const width = rect.width;
|
||||
const height = rect.height;
|
||||
const mouseX = e.clientX - rect.left;
|
||||
const mouseY = e.clientY - rect.top;
|
||||
const xPct = mouseX / width - 0.5;
|
||||
const yPct = mouseY / height - 0.5;
|
||||
x.set(xPct);
|
||||
y.set(yPct);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
x.set(0);
|
||||
y.set(0);
|
||||
setIsHovered(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 50 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: i * 0.15, ease: "easeOut" }}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
style={{
|
||||
rotateX,
|
||||
rotateY,
|
||||
transformStyle: "preserve-3d",
|
||||
}}
|
||||
className="relative group cursor-pointer"
|
||||
>
|
||||
{/* Subtle Glow */}
|
||||
<motion.div
|
||||
animate={{
|
||||
opacity: isHovered ? 0.15 : 0.05,
|
||||
scale: isHovered ? 1.05 : 1
|
||||
}}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="absolute -inset-4 bg-white/10 rounded-[3rem] blur-3xl"
|
||||
/>
|
||||
|
||||
{/* Card Container */}
|
||||
<div className="relative rounded-[2.5rem] bg-zinc-950/50 backdrop-blur-xl border border-white/10 overflow-hidden hover:border-white/20 transition-all duration-500">
|
||||
<div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-white/20 to-transparent" />
|
||||
|
||||
<div className="absolute inset-0 opacity-[0.015]" style={{
|
||||
backgroundImage: `linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)`,
|
||||
backgroundSize: '30px 30px'
|
||||
}} />
|
||||
|
||||
<div className="relative p-8 lg:p-10" style={{ transform: "translateZ(50px)" }}>
|
||||
{/* Icon Section */}
|
||||
<motion.div
|
||||
animate={{ y: isHovered ? -5 : 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="relative mb-8"
|
||||
>
|
||||
<div className="relative inline-flex items-center gap-4">
|
||||
<motion.div
|
||||
animate={{ scale: isHovered ? 1.1 : 1 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="w-16 h-16 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center backdrop-blur-sm group-hover:bg-white/10 group-hover:border-white/20 transition-all"
|
||||
>
|
||||
<tech.icon className="w-8 h-8 text-white" />
|
||||
</motion.div>
|
||||
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-green-500/10 border border-green-500/20">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-green-400 animate-pulse" />
|
||||
<span className="text-[10px] text-green-400 font-bold uppercase tracking-wider">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="space-y-4 mb-8">
|
||||
<h3 className="text-2xl sm:text-3xl font-black tracking-tight text-white">
|
||||
{tech.title}
|
||||
</h3>
|
||||
<p className="text-zinc-400 leading-relaxed text-sm font-light">
|
||||
{tech.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Features */}
|
||||
<div className="space-y-3 mb-8">
|
||||
{tech.features.map((feature, idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
initial={{ opacity: 0, x: -10 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: i * 0.15 + idx * 0.1 }}
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
<div className="p-1.5 rounded-md bg-white/5 border border-white/10">
|
||||
<feature.icon className="w-3.5 h-3.5 text-zinc-400" />
|
||||
</div>
|
||||
<span className="text-xs text-zinc-500 font-semibold tracking-wide">
|
||||
{feature.label}
|
||||
</span>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Metrics */}
|
||||
<div className="grid grid-cols-2 gap-4 mb-6 p-4 rounded-2xl bg-white/[0.02] border border-white/5">
|
||||
{tech.metrics.map((metric, idx) => (
|
||||
<div key={idx} className="text-center">
|
||||
<p className="text-xl font-black text-white mb-1">{metric.value}</p>
|
||||
<p className="text-[10px] text-zinc-500 font-semibold uppercase tracking-wider">{metric.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
|
||||
{/* Bottom Action */}
|
||||
<div className="flex items-center justify-between pt-6 border-t border-white/5 group-hover:border-white/10 transition-colors">
|
||||
<div className="flex items-center gap-2">
|
||||
<CheckCircle2 className="w-4 h-4 text-zinc-600" />
|
||||
<span className="text-xs text-zinc-600 font-semibold uppercase tracking-wider">
|
||||
Integrated
|
||||
</span>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-6xl font-black tracking-tighter">
|
||||
A Connected <span className="text-gradient">Hardware</span> Ecosystem
|
||||
|
||||
<motion.div
|
||||
animate={{
|
||||
x: isHovered ? 5 : 0
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="flex items-center gap-2 text-zinc-500 group-hover:text-white transition-colors"
|
||||
>
|
||||
<span className="text-sm font-semibold">Learn More</span>
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Subtle Accent */}
|
||||
<motion.div
|
||||
animate={{
|
||||
scaleX: isHovered ? 1 : 0,
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="absolute bottom-0 left-0 right-0 h-px bg-white/20 origin-left"
|
||||
/>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TechShowcase() {
|
||||
return (
|
||||
<section id="technologies" className="relative py-20 md:py-32 lg:py-40 overflow-hidden">
|
||||
{/* Ambient Effects - More Subtle */}
|
||||
<div className="absolute top-1/3 left-0 w-[500px] h-[500px] bg-blue-500/5 rounded-full blur-[120px]" />
|
||||
<div className="absolute bottom-1/3 right-0 w-[500px] h-[500px] bg-purple-500/5 rounded-full blur-[120px]" />
|
||||
|
||||
{/* Dot Grid Pattern */}
|
||||
<div className="absolute inset-0 opacity-[0.02]" style={{
|
||||
backgroundImage: `radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1px)`,
|
||||
backgroundSize: '40px 40px'
|
||||
}} />
|
||||
|
||||
<div className="container relative z-10 mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header Section */}
|
||||
<div className="max-w-5xl mb-16 md:mb-24 space-y-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
{/* Badge */}
|
||||
<div className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-white/5 backdrop-blur-xl border border-white/10 shadow-lg">
|
||||
<div className="relative">
|
||||
<Zap className="w-4 h-4 text-white" />
|
||||
<div className="absolute inset-0 bg-white/20 blur-md animate-pulse" />
|
||||
</div>
|
||||
<span className="text-[11px] font-bold tracking-[0.3em] uppercase text-zinc-300">
|
||||
Technology Infrastructure
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h2 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black leading-[0.9] tracking-tighter text-white">
|
||||
Enterprise
|
||||
<br />
|
||||
<span className="text-zinc-600">Technology Stack</span>
|
||||
</h2>
|
||||
<p className="text-lg text-foreground/60 leading-relaxed">
|
||||
Seamlessly bridge the gap between physical health and digital intelligence with our HIPAA-compliant Bluetooth medical devices.
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-lg sm:text-xl lg:text-2xl text-zinc-400 leading-relaxed max-w-3xl font-light">
|
||||
Cutting-edge infrastructure powering{" "}
|
||||
<span className="text-white font-medium">intelligent healthcare delivery</span> through{" "}
|
||||
<span className="text-white font-medium">seamless device integration</span> and{" "}
|
||||
<span className="text-white font-medium">autonomous AI systems</span>.
|
||||
</p>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex flex-wrap gap-8 pt-4">
|
||||
{[
|
||||
{ icon: Zap, label: "Processing Speed", value: "Real-time" },
|
||||
{ icon: Shield, label: "Security", value: "Enterprise" },
|
||||
{ icon: Cloud, label: "Infrastructure", value: "Global" }
|
||||
].map((stat, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.6, delay: 0.2 + i * 0.1 }}
|
||||
className="flex items-center gap-3"
|
||||
>
|
||||
<div className="p-2.5 rounded-lg bg-white/5 border border-white/10">
|
||||
<stat.icon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xl font-black text-white">{stat.value}</p>
|
||||
<p className="text-xs text-zinc-500 font-semibold uppercase tracking-wider">{stat.label}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{devices.map((device, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: i * 0.1 }}
|
||||
whileHover={{ y: -10 }}
|
||||
className="glass p-8 rounded-[2rem] border-white/5 group relative overflow-hidden"
|
||||
>
|
||||
<div className={`absolute -top-24 -right-24 w-48 h-48 bg-gradient-to-br ${device.color} opacity-10 blur-3xl group-hover:opacity-20 transition-opacity`} />
|
||||
|
||||
<div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center mb-8 border border-white/10 group-hover:scale-110 transition-transform">
|
||||
<device.icon className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl font-bold mb-4">{device.title}</h3>
|
||||
<p className="text-foreground/60 leading-relaxed mb-6">
|
||||
{device.description}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-2 text-primary font-bold text-sm tracking-widest uppercase opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<span>Explore Tech</span>
|
||||
<Bluetooth className="w-4 h-4" />
|
||||
</div>
|
||||
</motion.div>
|
||||
{/* Technology Cards Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
||||
{technologies.map((tech, i) => (
|
||||
<TechCard key={tech.id} tech={tech} i={i} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="mt-16 md:mt-24 text-center space-y-6"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
<p className="text-zinc-400 text-base font-medium">
|
||||
Ready to integrate our technology stack?
|
||||
</p>
|
||||
<p className="text-zinc-600 text-sm max-w-2xl mx-auto">
|
||||
Our engineering team will work with you to customize and deploy the perfect solution for your healthcare infrastructure.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className="px-8 py-4 rounded-full bg-white text-black font-bold text-sm tracking-wide uppercase shadow-[0_0_30px_rgba(255,255,255,0.1)] hover:shadow-[0_0_40px_rgba(255,255,255,0.2)] transition-all"
|
||||
>
|
||||
Schedule Demo
|
||||
</motion.button>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.02 }}
|
||||
whileTap={{ scale: 0.98 }}
|
||||
className="px-8 py-4 rounded-full bg-white/5 border border-white/10 text-white font-bold text-sm tracking-wide uppercase hover:bg-white/10 hover:border-white/20 transition-all"
|
||||
>
|
||||
View Documentation
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,94 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Video, ShoppingCart, ShieldCheck, Globe } from "lucide-react";
|
||||
import { motion, useScroll, useTransform } from "framer-motion";
|
||||
import { Video, Shield, Clock, Users, Globe, Activity } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
|
||||
export default function TelehealthSolutions() {
|
||||
const containerRef = useRef(null);
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: containerRef,
|
||||
offset: ["start end", "end start"]
|
||||
});
|
||||
|
||||
const scale = useTransform(scrollYProgress, [0, 0.5], [0.98, 1]);
|
||||
const rotateY = useTransform(scrollYProgress, [0, 0.5], [10, 0]);
|
||||
|
||||
const services = [
|
||||
{ icon: Video, title: "Clinical HD Video", desc: "Institutional-grade secure streaming for pediatric and adult care." },
|
||||
{ icon: Clock, title: "Zero-Latency Triage", desc: "Automated routing based on real-time vital analysis." },
|
||||
{ icon: Shield, title: "Military Encryption", desc: "End-to-end PHI security layers for absolute data integrity." },
|
||||
{ icon: Globe, title: "Global Registry", desc: "Unified clinical records accessible across institutional borders." }
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="py-24 relative overflow-hidden bg-primary/5">
|
||||
<section ref={containerRef} id="solutions" className="py-24 relative overflow-hidden perspective-1000">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="flex flex-col lg:flex-row items-center gap-20">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1 space-y-10"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-4xl md:text-6xl font-black tracking-tighter">
|
||||
Clinic without <span className="text-gradient">Boundaries</span>
|
||||
</h2>
|
||||
<p className="text-xl text-foreground/60 leading-relaxed max-w-2xl">
|
||||
Advanced tele-consultation and integrated cart solutions designed for modern healthcare infrastructure. High-fidelity, low-latency, and fully secure.
|
||||
</p>
|
||||
</div>
|
||||
<motion.div
|
||||
style={{ scale, rotateY }}
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="glass rounded-[4rem] border-white/5 p-12 lg:p-24 overflow-hidden relative shadow-none min-h-[800px] flex flex-col justify-center bg-white/[0.01]"
|
||||
>
|
||||
<div className="reflection" />
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8">
|
||||
<div className="space-y-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center">
|
||||
<Video className="w-6 h-6 text-blue-500" />
|
||||
<div className="flex flex-col lg:flex-row gap-20 items-center relative z-10">
|
||||
<div className="flex-1 space-y-12">
|
||||
<div className="space-y-8 text-center lg:text-left">
|
||||
<div className="inline-flex items-center gap-3 px-6 py-2 rounded-full glass border-white/5 text-zinc-400 text-[10px] font-black tracking-[0.4em] uppercase mx-auto lg:mx-0">
|
||||
<Activity className="w-4 h-4 text-white" />
|
||||
<span>Clinical Service Layer</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold">Teleconsult</h3>
|
||||
<p className="text-sm text-foreground/50">HD video consultation with integrated EHR and vital streaming capabilities.</p>
|
||||
<h2 className="text-6xl md:text-8xl font-extrabold tracking-tighter leading-[0.9]">
|
||||
Connected <br /><span className="text-zinc-500 italic uppercase">Logistics</span>
|
||||
</h2>
|
||||
<p className="text-xl md:text-2xl text-zinc-500 leading-relaxed max-w-2xl font-medium tracking-tight mx-auto lg:mx-0">
|
||||
Institutional delivery systems for virtual care. Bridging the gap between the patient and the neural clinic with uncompromised operational speed.
|
||||
</p>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center">
|
||||
<ShoppingCart className="w-6 h-6 text-purple-500" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold">Telecart</h3>
|
||||
<p className="text-sm text-foreground/50">Managed healthcare shopping experience for devices and medication.</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-8 pt-4">
|
||||
{services.map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
whileHover={{ scale: 1.02, backgroundColor: "rgba(255, 255, 255, 0.02)" }}
|
||||
className="flex flex-col gap-6 p-10 glass rounded-[2rem] border-white/[0.03] transition-all shadow-none group"
|
||||
>
|
||||
<div className="w-14 h-14 rounded-xl bg-white/5 flex items-center justify-center border border-white/10 group-hover:border-white/30 transition-all">
|
||||
<item.icon className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-xl font-black tracking-tight uppercase italic mb-2">{item.title}</h4>
|
||||
<p className="text-base text-zinc-600 font-medium leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6 p-6 glass rounded-2xl border-primary/20 bg-primary/5">
|
||||
<ShieldCheck className="w-10 h-10 text-primary flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-bold">Enterprise-Grade Security</h4>
|
||||
<p className="text-sm text-foreground/60">All consultations are end-to-end encrypted and HIPAA-compliant.</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1"
|
||||
>
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-primary/10 rounded-3xl blur-3xl transform rotate-3" />
|
||||
<div className="relative glass aspect-video rounded-3xl overflow-hidden border-white/5 shadow-2xl">
|
||||
<div className="bg-background/80 p-2 border-b border-white/5 flex items-center gap-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-400" />
|
||||
<div className="w-3 h-3 rounded-full bg-yellow-400" />
|
||||
<div className="w-3 h-3 rounded-full bg-green-400" />
|
||||
<div className="ml-4 h-5 w-1/3 bg-white/5 rounded-full" />
|
||||
</div>
|
||||
<div className="h-full w-full bg-gradient-to-br from-zinc-900 to-black p-8 flex items-center justify-center relative">
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<Globe className="w-full h-full text-white" />
|
||||
</div>
|
||||
<div className="text-center space-y-4">
|
||||
<div className="w-20 h-20 rounded-full glass mx-auto flex items-center justify-center border-primary/30">
|
||||
<Video className="w-8 h-8 text-primary animate-pulse" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-2 w-32 bg-white/20 rounded-full mx-auto" />
|
||||
<div className="h-2 w-24 bg-white/10 rounded-full mx-auto" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Floating HUD Elements */}
|
||||
<div className="absolute top-12 right-12 glass p-4 rounded-xl border-accent/20">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-2 h-2 rounded-full bg-accent animate-ping" />
|
||||
<span className="text-[10px] font-bold uppercase tracking-widest text-accent">Active Sync</span>
|
||||
</div>
|
||||
<div className="flex-1 relative hidden lg:block">
|
||||
<div className="aspect-square glass rounded-[3rem] p-4 border-white/5 relative flex items-center justify-center overflow-hidden bg-white/[0.01]">
|
||||
<div className="absolute inset-x-8 inset-y-8 border-[0.5px] border-white/5 rounded-2xl" />
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1, 1.05, 1],
|
||||
opacity: [0.3, 0.6, 0.3]
|
||||
}}
|
||||
transition={{ repeat: Infinity, duration: 5 }}
|
||||
>
|
||||
<Users className="w-64 h-64 text-white opacity-10" />
|
||||
</motion.div>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="w-32 h-32 rounded-full glass border-white/10 flex items-center justify-center animate-pulse">
|
||||
<Video className="w-12 h-12 text-white" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -1,108 +1,360 @@
|
||||
"use client";
|
||||
|
||||
import Navbar from "../components/layout/Navbar";
|
||||
import DNAHeroBackground from "../components/canvas/DNAHeroBackground";
|
||||
import { motion } from "framer-motion";
|
||||
import { Activity, Bluetooth, ShieldCheck, Zap } from "lucide-react";
|
||||
import Footer from "../components/layout/Footer";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
Thermometer,
|
||||
Activity,
|
||||
HeartPulse,
|
||||
Droplet,
|
||||
Baby,
|
||||
Scale,
|
||||
Bluetooth,
|
||||
ShieldCheck,
|
||||
FileText,
|
||||
} from "lucide-react";
|
||||
|
||||
interface DeviceItem {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
description: string;
|
||||
highlights: string[];
|
||||
specs: string[];
|
||||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||||
}
|
||||
|
||||
function DeviceCard({ item, index }: { item: DeviceItem; index: number }) {
|
||||
return (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: index * 0.12, ease: "easeOut" }}
|
||||
viewport={{ once: true, margin: "-100px" }}
|
||||
whileHover={{ y: -8, scale: 1.015 }}
|
||||
className={`
|
||||
group relative
|
||||
bg-neutral-950/70 backdrop-blur-xl
|
||||
border border-neutral-800/60
|
||||
rounded-2xl overflow-hidden
|
||||
shadow-[0_8px_32px_rgba(0,0,0,0.4)]
|
||||
hover:border-blue-900/50 hover:shadow-[0_16px_48px_rgba(37,99,235,0.12)]
|
||||
transition-all duration-500
|
||||
`}
|
||||
>
|
||||
{/* Subtle internal gradient glow */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-blue-950/10 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-700 pointer-events-none" />
|
||||
|
||||
<div className="relative px-7 pt-7 pb-6 border-b border-neutral-800/50 bg-gradient-to-b from-neutral-900/40 to-transparent">
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="
|
||||
p-4 rounded-xl
|
||||
bg-neutral-900/80 border border-neutral-800/70
|
||||
group-hover:border-blue-800/50 group-hover:bg-blue-950/20
|
||||
transition-all duration-300
|
||||
">
|
||||
<item.icon className="
|
||||
w-8 h-8 text-neutral-400
|
||||
group-hover:text-blue-400/90
|
||||
transition-colors duration-300
|
||||
" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold text-white tracking-tight leading-tight">
|
||||
{item.title}
|
||||
</h3>
|
||||
<p className="text-sm text-neutral-500 mt-1 font-medium">
|
||||
{item.subtitle}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Uncomment this block if you want to bring back the card details */}
|
||||
{/*
|
||||
<div className="p-7 space-y-7">
|
||||
<p className="text-neutral-300 leading-relaxed text-[15px] font-light">
|
||||
{item.description}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 text-sm">
|
||||
{item.highlights.map((highlight, i) => (
|
||||
<div key={i} className="flex items-center gap-2.5">
|
||||
<div className="
|
||||
w-1.5 h-1.5 rounded-full
|
||||
bg-neutral-600 group-hover:bg-blue-500/70
|
||||
transition-colors duration-300
|
||||
" />
|
||||
<span className="text-neutral-200 font-medium">{highlight}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2.5">
|
||||
{item.specs.map((spec, i) => (
|
||||
<span
|
||||
key={i}
|
||||
className="
|
||||
px-4 py-1.5 text-xs font-medium
|
||||
rounded-lg bg-neutral-900/60 border border-neutral-800/60
|
||||
text-neutral-400 group-hover:text-neutral-200
|
||||
transition-colors duration-300
|
||||
"
|
||||
>
|
||||
{spec}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="
|
||||
w-full mt-4 py-4
|
||||
text-sm font-semibold tracking-wide
|
||||
text-neutral-200 bg-neutral-900/70 border border-neutral-800/70
|
||||
rounded-xl hover:bg-neutral-800/90 hover:border-neutral-700/70
|
||||
hover:text-white active:scale-[0.98]
|
||||
transition-all duration-300
|
||||
flex items-center justify-center gap-2.5
|
||||
"
|
||||
>
|
||||
<FileText className="w-4 h-4" />
|
||||
View Technical Documentation
|
||||
</button>
|
||||
</div>
|
||||
*/}
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DevicesPage() {
|
||||
return (
|
||||
<div className="relative min-h-screen">
|
||||
<DNAHeroBackground />
|
||||
<Navbar />
|
||||
const devices: DeviceItem[] = [
|
||||
{
|
||||
title: "Multi-Vital Monitor",
|
||||
subtitle: "Temperature • SpO₂ • Blood Pressure",
|
||||
description:
|
||||
"Simultaneous clinical-grade measurement of core vital signs with validated algorithms and secure wireless pairing.",
|
||||
highlights: ["±0.1 °C accuracy", "±2% SpO₂", "±3 mmHg NIBP"],
|
||||
specs: ["Bluetooth 5.2 LE", "IEC 60601", "24 h operation", "IP54"],
|
||||
icon: Activity,
|
||||
},
|
||||
{
|
||||
title: "3-in-1 Metabolic Analyzer",
|
||||
subtitle: "Glucose • Hemoglobin • Hematocrit",
|
||||
description:
|
||||
"Fast point-of-care testing from a single micro-sample with temperature compensation and result validation.",
|
||||
highlights: ["5–10 sec result", "±5 mg/dL glucose", "Lab-comparable Hb/HCT"],
|
||||
specs: ["Micro-volume sample", "Strip detection", "EHR integration", "Auto calibration"],
|
||||
icon: Droplet,
|
||||
},
|
||||
{
|
||||
title: "Digital Urine Analyzer",
|
||||
subtitle: "Multi-parameter Urinalysis",
|
||||
description:
|
||||
"Automated reading and standardized interpretation of urine test strips with digital result storage.",
|
||||
highlights: ["10–14 parameters", "< 60 seconds", "Trend tracking", "PDF export"],
|
||||
specs: ["High-resolution optics", "AI strip analysis", "Bluetooth sync", "Batch processing"],
|
||||
icon: Droplet,
|
||||
},
|
||||
{
|
||||
title: "Fetal Heart Doppler",
|
||||
subtitle: "Professional Maternity Monitoring",
|
||||
description:
|
||||
"High-sensitivity fetal heart rate detection with audio output, waveform display and event recording.",
|
||||
highlights: ["50–240 bpm range", "3 MHz probe", "Water-resistant", "Extended battery"],
|
||||
specs: ["Clinical validation", "Bluetooth audio", "Waveform visualization", "Event marking"],
|
||||
icon: Baby,
|
||||
},
|
||||
{
|
||||
title: "Clinical Precision Scale",
|
||||
subtitle: "Weight & Body Composition",
|
||||
description:
|
||||
"High-accuracy weighing platform with body composition analysis suitable for clinical follow-up.",
|
||||
highlights: ["200 kg capacity", "50 g resolution", "Fat / Muscle / Water", "Multi-user support"],
|
||||
specs: ["Bioelectrical impedance", "Tempered glass", "Bluetooth LE", "Stable base"],
|
||||
icon: Scale,
|
||||
},
|
||||
];
|
||||
|
||||
<main className="relative z-10 pt-40 pb-24">
|
||||
<div className="container mx-auto px-6">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="max-w-4xl"
|
||||
>
|
||||
<h1 className="text-5xl md:text-8xl font-black tracking-tighter mb-8">
|
||||
Medical <span className="text-gradient">Hardware</span>
|
||||
</h1>
|
||||
<p className="text-xl text-foreground/60 leading-relaxed mb-12 max-w-2xl">
|
||||
Precision-engineered Bluetooth vitals monitors and maternity care tools. Designed for reliability, accuracy, and absolute security.
|
||||
</p>
|
||||
</motion.div>
|
||||
return (
|
||||
<div className="min-h-screen text-neutral-100 relative overflow-hidden bg-[#0a0e17]">
|
||||
{/* ====================== Bluetooth Animated Background ====================== */}
|
||||
<div className="absolute inset-0 pointer-events-none overflow-hidden">
|
||||
{/* Dark moody base gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-[#0a0e17] via-[#0d1525] to-[#0a0e1a]" />
|
||||
|
||||
{/* Device Detailed Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mt-20">
|
||||
{[
|
||||
{
|
||||
title: "Vitals Hub X1",
|
||||
feature: "Multi-Parameter Monitoring",
|
||||
desc: "Measures Blood Pressure, Heart Rate, SpO2, and Body Temperature in one sleek device.",
|
||||
specs: ["Bluetooth 5.2", "48h Battery", "Cloud Sync"]
|
||||
},
|
||||
{
|
||||
title: "Fetal Doppler Pro",
|
||||
feature: "Maternity Care",
|
||||
desc: "High-sensitivity fetal heart rate detection with ultra-sound noise reduction technology.",
|
||||
specs: ["OLED Display", "Built-in Speaker", "App Integration"]
|
||||
}
|
||||
].map((item, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
className="glass p-12 rounded-[3rem] border-white/5 space-y-8"
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="space-y-2">
|
||||
<span className="text-primary font-bold tracking-widest uppercase text-xs">{item.feature}</span>
|
||||
<h2 className="text-4xl font-bold">{item.title}</h2>
|
||||
</div>
|
||||
<div className="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center">
|
||||
<Activity className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-lg text-foreground/60">{item.desc}</p>
|
||||
{/* Pulsing Bluetooth radar-style rings */}
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
{/* Largest – slowest */}
|
||||
<motion.div
|
||||
className="absolute rounded-full border border-blue-500/8"
|
||||
style={{ width: "min(140vmin, 1800px)", height: "min(140vmin, 1800px)" }}
|
||||
animate={{
|
||||
scale: [0.65, 1.1, 0.65],
|
||||
opacity: [0.02, 0.09, 0.02],
|
||||
}}
|
||||
transition={{
|
||||
duration: 18,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{item.specs.map((spec, j) => (
|
||||
<span key={j} className="px-4 py-2 rounded-full bg-white/5 border border-white/5 text-sm">
|
||||
{spec}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
{/* Medium */}
|
||||
<motion.div
|
||||
className="absolute rounded-full border border-blue-500/10"
|
||||
style={{ width: "min(100vmin, 1300px)", height: "min(100vmin, 1300px)" }}
|
||||
animate={{
|
||||
scale: [0.7, 1.15, 0.7],
|
||||
opacity: [0.03, 0.13, 0.03],
|
||||
}}
|
||||
transition={{
|
||||
duration: 14,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
delay: 3,
|
||||
}}
|
||||
/>
|
||||
|
||||
<button className="w-full bg-white text-black py-4 rounded-2xl font-bold hover:bg-zinc-200 transition-colors">
|
||||
View Specifications
|
||||
</button>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
{/* Smallest + sharper */}
|
||||
<motion.div
|
||||
className="absolute rounded-full border-2 border-blue-400/20"
|
||||
style={{ width: "min(60vmin, 800px)", height: "min(60vmin, 800px)" }}
|
||||
animate={{
|
||||
scale: [0.85, 1.4, 0.85],
|
||||
opacity: [0.06, 0.22, 0.06],
|
||||
}}
|
||||
transition={{
|
||||
duration: 9,
|
||||
repeat: Infinity,
|
||||
ease: "easeOut",
|
||||
delay: 1.5,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Compliance Banner */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
className="mt-32 p-12 glass rounded-[3rem] border-accent/20 flex flex-col md:flex-row items-center justify-between gap-12"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<ShieldCheck className="w-8 h-8 text-accent" />
|
||||
<h3 className="text-3xl font-bold italic">HIPAA Verified Hardware</h3>
|
||||
</div>
|
||||
<p className="text-foreground/60 max-w-xl">
|
||||
Every device in our ecosystem undergoes rigorous security audits. Data transmission is encrypted from the sensor to the cloud.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center">
|
||||
<Bluetooth className="w-8 h-8 text-primary" />
|
||||
</div>
|
||||
<div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center">
|
||||
<Zap className="w-8 h-8 text-yellow-500" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
{/* Very faint core glow */}
|
||||
<motion.div
|
||||
className="absolute rounded-full bg-blue-600/5 blur-xl"
|
||||
style={{ width: "min(20vmin, 260px)", height: "min(20vmin, 260px)" }}
|
||||
animate={{ scale: [1, 1.4, 1], opacity: [0.15, 0.35, 0.15] }}
|
||||
transition={{ duration: 7, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
{/* Subtle rotating signal arcs */}
|
||||
<motion.div
|
||||
className="absolute inset-0 flex items-center justify-center"
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 90, repeat: Infinity, ease: "linear" }}
|
||||
>
|
||||
<div className="relative w-[min(80vmin,1000px)] h-[min(80vmin,1000px)]">
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-400/8 to-transparent rotate-12 blur-md opacity-60" />
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-blue-500/6 to-transparent -rotate-18 blur-lg opacity-50" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Floating particles */}
|
||||
<div className="absolute inset-0">
|
||||
{[...Array(16)].map((_, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
className="absolute w-1.5 h-1.5 md:w-2 md:h-2 bg-blue-400/40 rounded-full blur-[1px]"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{
|
||||
y: [0, -180 - Math.random() * 140, -360],
|
||||
opacity: [0, 0.7, 0],
|
||||
x: Math.sin(i * 0.9) * 60 + Math.cos(i * 1.4) * 30,
|
||||
}}
|
||||
transition={{
|
||||
duration: 12 + Math.random() * 10,
|
||||
repeat: Infinity,
|
||||
delay: i * 0.6 + Math.random() * 2,
|
||||
ease: "easeOut",
|
||||
}}
|
||||
style={{
|
||||
left: `${8 + ((i * 7.3) % 84)}%`,
|
||||
top: "85%",
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ====================== Main Content ====================== */}
|
||||
<div className="relative z-10">
|
||||
<Navbar />
|
||||
|
||||
<main className="pt-28 md:pt-40 pb-28 md:pb-40">
|
||||
<div className="max-w-7xl mx-auto px-5 sm:px-7 lg:px-10">
|
||||
{/* Header */}
|
||||
<div className="text-center max-w-4xl mx-auto mb-20 md:mb-28">
|
||||
<div className="
|
||||
inline-flex items-center gap-3 px-6 py-3
|
||||
rounded-full border border-neutral-800/70
|
||||
bg-neutral-950/50 backdrop-blur-lg
|
||||
text-neutral-300 text-sm font-medium mb-8
|
||||
">
|
||||
<Bluetooth className="w-5 h-5 text-blue-400/80" />
|
||||
Connected Clinical Peripherals
|
||||
</div>
|
||||
|
||||
<h1 className="
|
||||
text-4xl sm:text-5xl md:text-6xl lg:text-7xl
|
||||
font-semibold tracking-tight leading-[1.05]
|
||||
text-white
|
||||
">
|
||||
Diagnostic Hardware Suite
|
||||
</h1>
|
||||
|
||||
<p className="mt-6 text-lg md:text-xl text-neutral-400 leading-relaxed max-w-3xl mx-auto">
|
||||
Reliable, standards-compliant devices designed for hospitals, clinics, telehealth and institutional care environments.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Device cards grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-7 lg:gap-9">
|
||||
{devices.map((device, i) => (
|
||||
<DeviceCard key={device.title} item={device} index={i} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Compliance & security block */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
viewport={{ once: true }}
|
||||
className="
|
||||
mt-24 md:mt-32 p-8 md:p-12
|
||||
bg-neutral-950/60 backdrop-blur-xl
|
||||
border border-neutral-800/60 rounded-2xl
|
||||
text-center md:text-left
|
||||
shadow-[0_16px_48px_rgba(0,0,0,0.4)]
|
||||
"
|
||||
>
|
||||
<div className="flex flex-col md:flex-row items-center gap-10 md:gap-14">
|
||||
<div className="
|
||||
p-6 md:p-8 rounded-2xl
|
||||
bg-neutral-900/70 border border-neutral-800/70
|
||||
">
|
||||
<ShieldCheck className="w-12 h-12 md:w-14 md:h-14 text-neutral-400" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-3xl md:text-4xl font-semibold text-white tracking-tight">
|
||||
Medical Standards & Data Security
|
||||
</h2>
|
||||
<p className="text-neutral-300 leading-relaxed text-lg max-w-3xl">
|
||||
Devices comply with IEC 60601, IEC 62304 and relevant regional regulations. All data transmission uses end-to-end encryption, device authentication, secure pairing and full audit logging.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,37 +1,59 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-primary: #3b82f6;
|
||||
--color-secondary: #8b5cf6;
|
||||
--color-accent: #10b981;
|
||||
--color-background: #030712;
|
||||
--color-foreground: #f3f4f6;
|
||||
--color-card: rgba(17, 24, 39, 0.7);
|
||||
--color-border: rgba(75, 85, 99, 0.3);
|
||||
--color-primary: #ffffff;
|
||||
--color-secondary: #71717a;
|
||||
--color-accent: #ffffff;
|
||||
--color-background: #000000;
|
||||
--color-foreground: #f4f4f5;
|
||||
--color-card: rgba(10, 10, 10, 0.7);
|
||||
--color-border: rgba(63, 63, 70, 0.3);
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: #030712;
|
||||
--foreground: #f3f4f6;
|
||||
--background: #000000;
|
||||
--foreground: #f4f4f5;
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
font-family: var(--font-inter), system-ui, -apple-system, sans-serif;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--font-plus-jakarta), sans-serif;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.glass {
|
||||
background: rgba(17, 24, 39, 0.7);
|
||||
background: rgba(10, 10, 10, 0.4);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.glass-dense {
|
||||
background: rgba(5, 5, 5, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid rgba(75, 85, 99, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.perspective-1000 {
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #34d399 100%);
|
||||
/* Updated to a silver/white shimmer instead of colors */
|
||||
background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
@@ -40,6 +62,33 @@ body {
|
||||
.animate-pulse-slow {
|
||||
animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
.noise-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 50;
|
||||
pointer-events: none;
|
||||
opacity: 0.03;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.reflection {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.03) 50%, transparent 55%);
|
||||
background-size: 200% 200%;
|
||||
animation: shine 12s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
background-position: -100% -100%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 100% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
|
||||
@@ -1,34 +1,35 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Plus_Jakarta_Sans, Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
const plusJakartaSans = Plus_Jakarta_Sans({
|
||||
variable: "--font-plus-jakarta",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600", "700", "800"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Skyheal | A Healthcare Platform",
|
||||
description: "Advanced clinical intelligence through immersive AI, precision hardware, and bio-secure automation.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
return (
|
||||
<html lang="en" className="dark scroll-smooth">
|
||||
<body
|
||||
className={`${plusJakartaSans.variable} ${inter.variable} antialiased bg-black text-white selection:bg-primary/30`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
106
app/page.tsx
106
app/page.tsx
@@ -5,61 +5,105 @@ import DNAHeroBackground from "./components/canvas/DNAHeroBackground";
|
||||
import Navbar from "./components/layout/Navbar";
|
||||
import AIVoiceSoap from "./components/sections/AIVoiceSoap";
|
||||
import AIDiagnosis from "./components/sections/AIDiagnosis";
|
||||
import AIPrescription from "./components/sections/AIPrescription";
|
||||
// import AIPrescription from "./components/sections/AIPrescription";
|
||||
import DeviceShowcase from "./components/sections/DeviceShowcase";
|
||||
import TelehealthSolutions from "./components/sections/TelehealthSolutions";
|
||||
// import TelehealthSolutions from "./components/sections/TelehealthSolutions";
|
||||
import AppEcosystem from "./components/sections/AppEcosystem";
|
||||
import Footer from "./components/layout/Footer";
|
||||
import { ArrowRight, Sparkles } from "lucide-react";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="relative min-h-screen">
|
||||
<DNAHeroBackground />
|
||||
<Navbar />
|
||||
<div className="relative min-h-screen bg-black overflow-hidden isolate">
|
||||
{/* DNA Background – placed first with negative z-index so it's behind everything */}
|
||||
<div className="absolute inset-0 z-[-1]">
|
||||
<DNAHeroBackground />
|
||||
</div>
|
||||
|
||||
<main className="relative z-10 pt-32">
|
||||
{/* Navbar – should be above background */}
|
||||
<div className="relative z-50">
|
||||
<Navbar />
|
||||
</div>
|
||||
|
||||
<main className="relative z-10">
|
||||
{/* Hero Section */}
|
||||
<section className="container mx-auto px-6 py-24 min-h-[80vh] flex flex-col items-center justify-center text-center">
|
||||
<section className="min-h-screen flex flex-col items-center justify-center text-center px-5 sm:px-8 md:px-12 lg:px-16 pt-16 sm:pt-20 md:pt-24">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="space-y-8 max-w-4xl"
|
||||
transition={{ duration: 1.1, ease: [0.22, 1, 0.36, 1] }}
|
||||
className="w-full max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8 space-y-10 md:space-y-14 lg:space-y-16 xl:space-y-20 2xl:space-y-24"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 px-6 py-3 rounded-full glass border-primary/20 text-primary-light animate-pulse-slow">
|
||||
<Sparkles className="w-5 h-5" />
|
||||
<span className="text-sm font-bold tracking-widest uppercase">The Future of Healthcare is Here</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-8xl font-black tracking-tighter leading-[1.1]">
|
||||
Reimagining Life with <br />
|
||||
<span className="text-gradient">AI Precision</span>
|
||||
<h1
|
||||
className={`
|
||||
text-5xl sm:text-6xl md:text-7xl lg:text-[6.5rem] xl:text-[8rem] 2xl:text-[9.5rem]
|
||||
font-extrabold tracking-tighter leading-[0.85] sm:leading-[0.82] md:leading-[0.8]
|
||||
text-white
|
||||
`}
|
||||
>
|
||||
Institutional <br className="sm:hidden" />
|
||||
Healthcare{" "}
|
||||
<span className="text-zinc-500 italic uppercase">AI</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-foreground/60 leading-relaxed max-w-2xl mx-auto">
|
||||
Empowering healthcare providers with end-to-end AI intelligence. From voice-transcribed clinical notes to predictive diagnostics and automated prescriptions.
|
||||
<p
|
||||
className={`
|
||||
text-lg sm:text-xl md:text-2xl lg:text-2.5xl xl:text-3xl
|
||||
text-zinc-400 max-w-3xl lg:max-w-4xl xl:max-w-5xl 2xl:max-w-6xl
|
||||
mx-auto leading-tight sm:leading-snug md:leading-relaxed
|
||||
font-medium tracking-tight
|
||||
`}
|
||||
>
|
||||
A zero-compromise clinical infrastructure.
|
||||
<br className="hidden sm:inline" />
|
||||
Precision diagnostic models, automated clinical notes, and hyper-secure data layers.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-6 pt-8">
|
||||
<button className="w-full sm:w-auto bg-primary hover:bg-primary/80 px-10 py-5 rounded-full font-bold text-lg transition-all transform hover:scale-105 shadow-[0_0_40px_rgba(59,130,246,0.4)] flex items-center justify-center gap-3">
|
||||
Experience Skyheal
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
<div className="flex flex-col sm:flex-row items-center justify-center gap-5 sm:gap-6 md:gap-8 pt-6 sm:pt-8 md:pt-10">
|
||||
<button
|
||||
className={`
|
||||
group bg-white text-black
|
||||
px-8 sm:px-10 md:px-12 lg:px-14
|
||||
py-4 sm:py-5 md:py-6
|
||||
rounded-2xl
|
||||
text-base sm:text-lg md:text-xl lg:text-2xl
|
||||
font-black transition-all duration-300
|
||||
hover:scale-105 active:scale-95 shadow-2xl
|
||||
flex items-center gap-3 sm:gap-4
|
||||
border border-white/10
|
||||
`}
|
||||
>
|
||||
Book a Demo
|
||||
<ArrowRight className="w-5 h-5 sm:w-6 sm:h-6 group-hover:translate-x-2 transition-transform duration-300" />
|
||||
</button>
|
||||
<button className="w-full sm:w-auto glass hover:bg-white/10 px-10 py-5 rounded-full font-bold text-lg transition-all">
|
||||
Watch Demo
|
||||
|
||||
<button
|
||||
className={`
|
||||
px-8 sm:px-10 md:px-12 lg:px-14
|
||||
py-4 sm:py-5 md:py-6
|
||||
rounded-2xl
|
||||
text-base sm:text-lg md:text-xl lg:text-2xl
|
||||
font-black
|
||||
bg-white/5 backdrop-blur-md border border-white/10
|
||||
hover:bg-white/10 transition-all duration-300 shadow-xl
|
||||
`}
|
||||
>
|
||||
Technical Deck
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Subtle bottom fade to blend into sections */}
|
||||
<div className="absolute bottom-0 left-0 right-0 h-48 sm:h-64 md:h-80 bg-gradient-to-t from-black to-transparent pointer-events-none z-20" />
|
||||
</section>
|
||||
|
||||
{/* AI Service Sections */}
|
||||
<div className="space-y-32 pb-32">
|
||||
{/* Content sections with progressive spacing */}
|
||||
<div className="relative space-y-24 sm:space-y-32 md:space-y-40 lg:space-y-48 xl:space-y-56 2xl:space-y-64 pb-24 sm:pb-32 md:pb-40 lg:pb-48 xl:pb-56">
|
||||
<AIVoiceSoap />
|
||||
<DeviceShowcase />
|
||||
<AIDiagnosis />
|
||||
<TelehealthSolutions />
|
||||
<AIPrescription />
|
||||
{/* <TelehealthSolutions /> */}
|
||||
{/* <AIPrescription /> */}
|
||||
<AppEcosystem />
|
||||
</div>
|
||||
|
||||
@@ -67,4 +111,4 @@ export default function Home() {
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user