UI Screens updated
This commit is contained in:
84
app/components/canvas/DNAHeroBackground.tsx
Normal file
84
app/components/canvas/DNAHeroBackground.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
"use client";
|
||||
|
||||
import { Canvas, useFrame } from "@react-three/fiber";
|
||||
import { useRef, useMemo } from "react";
|
||||
import * as THREE from "three";
|
||||
import { Float, PerspectiveCamera } from "@react-three/drei";
|
||||
|
||||
function DNAParticles() {
|
||||
const points = useMemo(() => {
|
||||
const p = [];
|
||||
const count = 100;
|
||||
const radius = 2;
|
||||
const height = 15;
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const angle = (i / count) * Math.PI * 4;
|
||||
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));
|
||||
|
||||
// Connecting rungs
|
||||
if (i % 5 === 0) {
|
||||
const rungPoints = 5;
|
||||
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)
|
||||
));
|
||||
}
|
||||
}
|
||||
}
|
||||
return p;
|
||||
}, []);
|
||||
|
||||
const groupRef = useRef<THREE.Group>(null);
|
||||
|
||||
useFrame((state) => {
|
||||
if (groupRef.current) {
|
||||
groupRef.current.rotation.y += 0.005;
|
||||
groupRef.current.rotation.z = Math.sin(state.clock.elapsedTime * 0.5) * 0.1;
|
||||
}
|
||||
});
|
||||
|
||||
return (
|
||||
<group ref={groupRef}>
|
||||
{points.map((pos, i) => (
|
||||
<mesh key={i} position={pos}>
|
||||
<sphereGeometry args={[0.04, 8, 8]} />
|
||||
<meshStandardMaterial
|
||||
color={i % 2 === 0 ? "#3b82f6" : "#8b5cf6"}
|
||||
emissive={i % 2 === 0 ? "#1e40af" : "#5b21b6"}
|
||||
emissiveIntensity={2}
|
||||
/>
|
||||
</mesh>
|
||||
))}
|
||||
</group>
|
||||
);
|
||||
}
|
||||
|
||||
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 />
|
||||
|
||||
<Float speed={2} rotationIntensity={0.5} floatIntensity={0.5}>
|
||||
<DNAParticles />
|
||||
</Float>
|
||||
</Canvas>
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-background/50 to-background pointer-events-none" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
101
app/components/layout/Navbar.tsx
Normal file
101
app/components/layout/Navbar.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Menu, X, Activity, Brain, Mic, Pill } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Voice-to-SOAP", icon: Mic, href: "#voice-soap" },
|
||||
{ name: "AI Diagnosis", icon: Brain, href: "#diagnosis" },
|
||||
{ name: "AI Prescription", icon: Pill, href: "#prescription" },
|
||||
];
|
||||
|
||||
export default function Navbar() {
|
||||
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);
|
||||
}, []);
|
||||
|
||||
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>
|
||||
</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>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
101
app/components/sections/AIDiagnosis.tsx
Normal file
101
app/components/sections/AIDiagnosis.tsx
Normal file
@@ -0,0 +1,101 @@
|
||||
"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
|
||||
}
|
||||
];
|
||||
|
||||
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>
|
||||
|
||||
<h2 className="text-4xl md:text-5xl font-bold leading-tight">
|
||||
AI-Powered <span className="text-gradient">Diagnosis</span> with Unmatched Precision
|
||||
</h2>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
93
app/components/sections/AIPrescription.tsx
Normal file
93
app/components/sections/AIPrescription.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Pill, Zap, Users, ClipboardCheck } from "lucide-react";
|
||||
|
||||
export default function AIPrescription() {
|
||||
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">
|
||||
<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-accent/10 border border-accent/20 text-accent text-sm font-semibold">
|
||||
<Pill className="w-4 h-4" />
|
||||
<span>Smart Fulfillment</span>
|
||||
</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">
|
||||
{[
|
||||
{ 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" }
|
||||
].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" />
|
||||
</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>
|
||||
</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="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>
|
||||
<div>
|
||||
<h4 className="font-bold text-sm">Prescription Portal</h4>
|
||||
<p className="text-xs text-foreground/50">Active Session</p>
|
||||
</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" />
|
||||
</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>
|
||||
))}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
88
app/components/sections/AIVoiceSoap.tsx
Normal file
88
app/components/sections/AIVoiceSoap.tsx
Normal file
@@ -0,0 +1,88 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Mic, CheckCircle2 } from "lucide-react";
|
||||
|
||||
export default function AIVoiceSoap() {
|
||||
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">
|
||||
<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-primary/10 border border-primary/20 text-primary text-sm font-semibold">
|
||||
<Mic className="w-4 h-4" />
|
||||
<span>AI Voice Intelligence</span>
|
||||
</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">
|
||||
{[
|
||||
"Real-time clinical voice transcription",
|
||||
"Automated SOAP structure generation",
|
||||
"Medical terminology specialization",
|
||||
"HIPAA-compliant data processing"
|
||||
].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>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
className="flex-1 relative"
|
||||
>
|
||||
<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 z-10 space-y-8 w-full">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center gap-1">
|
||||
{Array.from({ length: 20 }).map((_, i) => (
|
||||
<motion.div
|
||||
key={i}
|
||||
animate={{ height: [10, 20 + (i % 5) * 10, 10] }}
|
||||
transition={{
|
||||
repeat: Infinity,
|
||||
duration: 1 + (i % 3) * 0.5,
|
||||
ease: "easeInOut"
|
||||
}}
|
||||
className="w-1 bg-gradient-to-t from-primary to-secondary rounded-full"
|
||||
/>
|
||||
))}
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user