UI design Updated
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user