181 lines
8.0 KiB
TypeScript
181 lines
8.0 KiB
TypeScript
"use client";
|
|
|
|
import { motion, type Variants } from "framer-motion";
|
|
import { ArrowRight, Activity, ShieldCheck, Zap } from "lucide-react";
|
|
import GravityWave from "./components/canvas/GravityWave";
|
|
import Navbar from "./components/layout/Navbar";
|
|
import AIVoiceSoap from "./components/sections/AIVoiceSoap";
|
|
import AIDiagnosis from "./components/sections/AIDiagnosis";
|
|
import DeviceShowcase from "./components/sections/DeviceShowcase";
|
|
import AppEcosystem from "./components/sections/AppEcosystem";
|
|
import Footer from "./components/layout/Footer";
|
|
|
|
const fadeInUp: Variants = {
|
|
hidden: { opacity: 0, y: 30 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.8,
|
|
ease: "easeOut" as const
|
|
}
|
|
}
|
|
};
|
|
|
|
const staggerContainer: Variants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2,
|
|
delayChildren: 0.1
|
|
}
|
|
}
|
|
};
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div className="relative min-h-screen bg-gray-950 text-white selection:bg-cyan-500/30 selection:text-cyan-200 overflow-x-hidden font-sans">
|
|
|
|
<div className="fixed top-0 left-0 right-0 z-50 px-4 pt-4 flex justify-center">
|
|
<div className="w-full max-w-7xl">
|
|
<Navbar />
|
|
</div>
|
|
</div>
|
|
|
|
<main className="relative z-10 flex flex-col items-center w-full">
|
|
|
|
{/* HERO SECTION */}
|
|
<section className="relative min-h-screen w-full flex flex-col items-center justify-center pt-20 px-6 overflow-hidden">
|
|
|
|
<div className="absolute inset-0 z-0">
|
|
<div className="hidden md:block absolute inset-0">
|
|
<GravityWave />
|
|
</div>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-gray-950/50 via-transparent to-gray-950 pointer-events-none" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-cyan-900/10 via-gray-950/60 to-gray-950 pointer-events-none" />
|
|
</div>
|
|
|
|
<motion.div
|
|
variants={staggerContainer}
|
|
initial="hidden"
|
|
animate="visible"
|
|
className="relative z-10 w-full max-w-6xl mx-auto text-center flex flex-col items-center gap-8"
|
|
>
|
|
<motion.h1 variants={fadeInUp} className="max-w-5xl mx-auto">
|
|
<span className="block text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight text-white mb-2">
|
|
Skyheal redefines
|
|
</span>
|
|
<span className="block text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-extrabold tracking-tight bg-gradient-to-r from-cyan-200 via-cyan-400 to-emerald-400 text-transparent bg-clip-text drop-shadow-2xl">
|
|
Healthcare
|
|
</span>
|
|
</motion.h1>
|
|
|
|
<motion.p variants={fadeInUp} className="text-lg sm:text-xl md:text-2xl text-gray-300/90 max-w-3xl leading-relaxed font-light">
|
|
Enterprise-grade AI clinical infrastructure — built for absolute{" "}
|
|
<span className="text-white font-medium">accuracy</span>,{" "}
|
|
<span className="text-white font-medium">security</span>, and{" "}
|
|
<span className="text-white font-medium">human-centered care</span>.
|
|
</motion.p>
|
|
|
|
<motion.div variants={fadeInUp} className="flex flex-col sm:flex-row items-center gap-4 mt-4 w-full justify-center">
|
|
<button className="group relative px-8 py-4 rounded-full bg-cyan-500 text-white font-semibold text-lg overflow-hidden transition-all duration-300 hover:scale-105 hover:shadow-[0_0_40px_-10px_rgba(20,184,166,0.5)]">
|
|
<div className="absolute inset-0 bg-white/20 group-hover:translate-x-full transition-transform duration-500 ease-out -skew-x-12" />
|
|
<span className="relative flex items-center gap-2">
|
|
Book a Demo
|
|
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
|
</span>
|
|
</button>
|
|
|
|
<button className="px-8 py-4 rounded-full bg-white/5 border border-white/10 text-white font-medium text-lg backdrop-blur-sm transition-all duration-300 hover:bg-white/10 hover:border-white/20 hover:scale-105">
|
|
View Technical Deck
|
|
</button>
|
|
</motion.div>
|
|
|
|
<motion.div variants={fadeInUp} className="pt-12 flex flex-wrap justify-center gap-8 md:gap-16 opacity-80">
|
|
<div className="flex items-center gap-2 text-sm font-medium text-cyan-100/60">
|
|
<ShieldCheck className="w-5 h-5" /> HIPAA Compliant
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm font-medium text-cyan-100/60">
|
|
<Activity className="w-5 h-5" /> 99.9% Uptime
|
|
</div>
|
|
<div className="flex items-center gap-2 text-sm font-medium text-cyan-100/60">
|
|
<Zap className="w-5 h-5" /> < 50ms Latency
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
</section>
|
|
|
|
{/* CONTENT SECTIONS CONTAINER */}
|
|
<div className="w-full relative bg-gray-950">
|
|
|
|
<div className="relative z-30 space-y-32 py-24">
|
|
|
|
{/* === 1. AI VOICE SOAP SECTION === */}
|
|
<section className="relative w-full overflow-hidden">
|
|
<div className="absolute inset-0 z-0">
|
|
<img
|
|
src="/neurons3.gif"
|
|
alt="Voice Soap Animation"
|
|
className="w-full h-full object-cover object-center opacity-30"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950/40 to-gray-950 pointer-events-none" />
|
|
</div>
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<AIVoiceSoap />
|
|
</div>
|
|
</section>
|
|
|
|
{/* === 2. DEVICE SHOWCASE SECTION (Modified) === */}
|
|
<section className="relative w-full overflow-hidden">
|
|
<div className="absolute inset-0 z-0">
|
|
<img
|
|
src="/dna.gif"
|
|
alt="Device Animation"
|
|
className="hidden md:block w-full h-full object-cover object-center opacity-70"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950/40 to-gray-950 pointer-events-none" />
|
|
</div>
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<DeviceShowcase />
|
|
</div>
|
|
</section>
|
|
|
|
{/* === 3. AI DIAGNOSIS SECTION === */}
|
|
<section className="relative w-full overflow-hidden">
|
|
<div className="absolute inset-0 z-0">
|
|
<img
|
|
src="/diagnosis-bg.gif"
|
|
alt="Diagnosis Animation"
|
|
className="w-full h-full object-cover object-center opacity-30"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950/40 to-gray-950 pointer-events-none" />
|
|
</div>
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<AIDiagnosis />
|
|
</div>
|
|
</section>
|
|
|
|
{/* === 4. APP ECOSYSTEM SECTION === */}
|
|
<section className="relative w-full overflow-hidden">
|
|
<div className="absolute inset-0 z-0">
|
|
<img
|
|
src="/ecosystem-bg.gif"
|
|
alt="Ecosystem Animation"
|
|
className="w-full h-full object-cover object-center opacity-30"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-b from-gray-950 via-gray-950/40 to-gray-950 pointer-events-none" />
|
|
</div>
|
|
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
|
<AppEcosystem />
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<Footer />
|
|
</main>
|
|
</div>
|
|
);
|
|
} |