244 lines
14 KiB
TypeScript
244 lines
14 KiB
TypeScript
"use client";
|
|
|
|
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 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="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>
|
|
|
|
{/* 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>
|
|
|
|
{/* 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 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>
|
|
);
|
|
} |