Enhaced UI updated
This commit is contained in:
100
app/apps/page.tsx
Normal file
100
app/apps/page.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
"use client";
|
||||
|
||||
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";
|
||||
|
||||
export default function AppsPage() {
|
||||
return (
|
||||
<div className="relative min-h-screen">
|
||||
<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">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -30 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
className="flex-1 space-y-8"
|
||||
>
|
||||
<h1 className="text-5xl md:text-8xl font-black tracking-tighter">
|
||||
Connected <span className="text-gradient">Care</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>
|
||||
|
||||
<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
|
||||
</button>
|
||||
<button className="glass px-8 py-4 rounded-full font-bold flex items-center gap-3">
|
||||
Play Store
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="flex-1 relative lg:block hidden"
|
||||
>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-40">
|
||||
{[
|
||||
{ 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." }
|
||||
].map((feature, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: i * 0.1 }}
|
||||
className="glass p-8 rounded-3xl border-white/5 space-y-4 hover:border-primary/30 transition-colors"
|
||||
>
|
||||
<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>
|
||||
<h3 className="text-xl font-bold">{feature.title}</h3>
|
||||
<p className="text-foreground/50 text-sm leading-relaxed">{feature.desc}</p>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<Footer />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
75
app/components/layout/Footer.tsx
Normal file
75
app/components/layout/Footer.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
"use client";
|
||||
|
||||
import { Activity, ShieldCheck, Twitter, Linkedin } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
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>
|
||||
|
||||
<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="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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -2,13 +2,14 @@
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Menu, X, Activity, Brain, Mic, Pill } from "lucide-react";
|
||||
import { Menu, X, Activity, Brain, Mic, ShieldCheck } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
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: "AI Prescription", icon: Pill, href: "#prescription" },
|
||||
{ name: "Apps & Security", icon: ShieldCheck, href: "/apps" },
|
||||
];
|
||||
|
||||
export default function Navbar() {
|
||||
|
||||
91
app/components/sections/AppEcosystem.tsx
Normal file
91
app/components/sections/AppEcosystem.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Smartphone, ShieldCheck, HeartPulse, Fingerprint } from "lucide-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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
81
app/components/sections/DeviceShowcase.tsx
Normal file
81
app/components/sections/DeviceShowcase.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Activity, Bluetooth, Gauge, MonitorSmartphone } from "lucide-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"
|
||||
}
|
||||
];
|
||||
|
||||
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>
|
||||
</div>
|
||||
<h2 className="text-4xl md:text-6xl font-black tracking-tighter">
|
||||
A Connected <span className="text-gradient">Hardware</span> Ecosystem
|
||||
</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.
|
||||
</p>
|
||||
</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>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
95
app/components/sections/TelehealthSolutions.tsx
Normal file
95
app/components/sections/TelehealthSolutions.tsx
Normal file
@@ -0,0 +1,95 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Video, ShoppingCart, ShieldCheck, Globe } from "lucide-react";
|
||||
|
||||
export default function TelehealthSolutions() {
|
||||
return (
|
||||
<section className="py-24 relative overflow-hidden bg-primary/5">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
108
app/devices/page.tsx
Normal file
108
app/devices/page.tsx
Normal file
@@ -0,0 +1,108 @@
|
||||
"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";
|
||||
|
||||
export default function DevicesPage() {
|
||||
return (
|
||||
<div className="relative min-h-screen">
|
||||
<DNAHeroBackground />
|
||||
<Navbar />
|
||||
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
{/* 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 />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
25
app/page.tsx
25
app/page.tsx
@@ -6,6 +6,10 @@ 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 DeviceShowcase from "./components/sections/DeviceShowcase";
|
||||
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() {
|
||||
@@ -52,27 +56,14 @@ export default function Home() {
|
||||
{/* AI Service Sections */}
|
||||
<div className="space-y-32 pb-32">
|
||||
<AIVoiceSoap />
|
||||
<DeviceShowcase />
|
||||
<AIDiagnosis />
|
||||
<TelehealthSolutions />
|
||||
<AIPrescription />
|
||||
<AppEcosystem />
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="glass border-t-0 py-16">
|
||||
<div className="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between gap-8">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 rounded-lg bg-primary" />
|
||||
<span className="text-2xl font-bold tracking-tighter text-gradient">Skyheal</span>
|
||||
</div>
|
||||
<div className="flex gap-8 text-foreground/40 text-sm">
|
||||
<a href="#" className="hover:text-primary transition-colors">Privacy Policy</a>
|
||||
<a href="#" className="hover:text-primary transition-colors">Terms of Service</a>
|
||||
<a href="#" className="hover:text-primary transition-colors">Contact</a>
|
||||
</div>
|
||||
<p className="text-foreground/40 text-sm">
|
||||
© 2026 Skyheal AI. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
<Footer />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user