193 lines
7.4 KiB
TypeScript
193 lines
7.4 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Heart, Mail, Phone, MapPin } from "lucide-react";
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
|
|
export function Footer() {
|
|
const [isDark, setIsDark] = useState(false);
|
|
|
|
useEffect(() => {
|
|
const checkTheme = () => {
|
|
setIsDark(document.documentElement.classList.contains('dark'));
|
|
};
|
|
|
|
checkTheme();
|
|
const observer = new MutationObserver(checkTheme);
|
|
observer.observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ['class']
|
|
});
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const scrollToSection = (id: string) => {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
};
|
|
|
|
const quickLinks = [
|
|
{ name: 'Home', href: '#home', isScroll: true },
|
|
{ name: 'About', href: '#about', isScroll: true },
|
|
{ name: 'Services', href: '#services', isScroll: true },
|
|
{ name: 'Contact', href: '#contact', isScroll: true },
|
|
{ name: 'Admin Panel', href: '/login', isScroll: false },
|
|
];
|
|
|
|
return (
|
|
<footer
|
|
className="relative py-12 overflow-hidden border-t border-border/50"
|
|
style={{
|
|
backgroundColor: isDark ? '#1a1e26' : '#ffffff'
|
|
}}
|
|
>
|
|
{!isDark && (
|
|
<div className="absolute inset-0 bg-gradient-to-br from-rose-50/30 via-pink-50/30 to-orange-50/30" />
|
|
)}
|
|
{isDark && (
|
|
<div className="absolute inset-0 bg-gradient-to-br from-gray-900/40 via-gray-800/40 to-gray-900/40" />
|
|
)}
|
|
|
|
<div className="container mx-auto px-4 relative z-10">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
|
|
{/* Brand Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="lg:col-span-1"
|
|
>
|
|
<div className="flex items-center gap-2 mb-4">
|
|
<div className="bg-gradient-to-br from-rose-500 to-pink-600 p-2 rounded-xl">
|
|
<Heart className="h-5 w-5 text-white fill-white" />
|
|
</div>
|
|
<span className="font-bold text-lg bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent">
|
|
Attune Heart Therapy
|
|
</span>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground mb-2">
|
|
Nathalie Mac-Guffie, LMHC, RPT-S, IMH-E, TF-CBT
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Licensed Mental Health Counselor • Florida
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Quick Links */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
className="lg:col-span-1"
|
|
>
|
|
<h3 className="font-semibold mb-4 text-foreground">Quick Links</h3>
|
|
<ul className="space-y-2">
|
|
{quickLinks.map((link) => (
|
|
<li key={link.name}>
|
|
{link.isScroll ? (
|
|
<button
|
|
onClick={() => scrollToSection(link.href.replace('#', ''))}
|
|
className="text-sm text-muted-foreground hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer hover:translate-x-1 inline-block transition-transform"
|
|
>
|
|
{link.name}
|
|
</button>
|
|
) : (
|
|
<Link
|
|
href={link.href}
|
|
className="text-sm text-muted-foreground hover:text-rose-600 dark:hover:text-rose-400 transition-colors cursor-pointer hover:translate-x-1 inline-block transition-transform"
|
|
>
|
|
{link.name}
|
|
</Link>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
|
|
{/* Contact Info */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="lg:col-span-1"
|
|
>
|
|
<h3 className="font-semibold mb-4 text-foreground">Contact</h3>
|
|
<ul className="space-y-3">
|
|
<li className="flex items-start gap-3">
|
|
<Phone className="h-4 w-4 mt-1 text-rose-600 dark:text-rose-400 flex-shrink-0" />
|
|
<a
|
|
href="tel:+19548073027"
|
|
className="text-sm text-muted-foreground hover:text-rose-600 dark:hover:text-rose-400 transition-colors"
|
|
>
|
|
(954) 807-3027
|
|
</a>
|
|
</li>
|
|
<li className="flex items-start gap-3">
|
|
<Mail className="h-4 w-4 mt-1 text-rose-600 dark:text-rose-400 flex-shrink-0" />
|
|
<a
|
|
href="mailto:info@attunehearttherapy.com"
|
|
className="text-sm text-muted-foreground hover:text-rose-600 dark:hover:text-rose-400 transition-colors"
|
|
>
|
|
info@attunehearttherapy.com
|
|
</a>
|
|
</li>
|
|
<li className="flex items-start gap-3">
|
|
<MapPin className="h-4 w-4 mt-1 text-rose-600 dark:text-rose-400 flex-shrink-0" />
|
|
<span className="text-sm text-muted-foreground">
|
|
Miami, Florida
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</motion.div>
|
|
|
|
{/* Services Summary */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
className="lg:col-span-1"
|
|
>
|
|
<h3 className="font-semibold mb-4 text-foreground">Services</h3>
|
|
<ul className="space-y-2 text-sm text-muted-foreground">
|
|
<li>Trauma-Focused Therapy</li>
|
|
<li>Play Therapy</li>
|
|
<li>Infant Mental Health</li>
|
|
<li>Dyadic Therapy</li>
|
|
<li>Social-Emotional Support</li>
|
|
</ul>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Bottom Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.4 }}
|
|
className="mt-8 pt-8 border-t border-border/50"
|
|
>
|
|
<div className="grid grid-cols-1 items-center gap-3 text-center md:grid-cols-3 md:text-left">
|
|
<p className="text-sm text-muted-foreground md:justify-self-start">
|
|
© {new Date().getFullYear()} Attune Heart Therapy. All rights reserved.
|
|
</p>
|
|
<p className="text-xs text-muted-foreground md:justify-self-center">
|
|
This site is for informational purposes only and does not constitute medical advice.
|
|
</p>
|
|
<p className="text-sm text-muted-foreground md:justify-self-end md:text-right">
|
|
Providing compassionate, trauma-informed care for children and families.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|