174 lines
6.5 KiB
TypeScript
174 lines
6.5 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ArrowRight, Calendar } from 'lucide-react';
|
|
import { useAppTheme } from '@/components/ThemeProvider';
|
|
|
|
export function HeroSection() {
|
|
const { theme } = useAppTheme();
|
|
const isDark = theme === "dark";
|
|
|
|
return (
|
|
<section
|
|
id="home"
|
|
className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"
|
|
>
|
|
{/* Background Image */}
|
|
<div
|
|
className="absolute inset-0 z-0"
|
|
style={{
|
|
backgroundImage: `url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
backgroundRepeat: 'no-repeat',
|
|
}}
|
|
/>
|
|
|
|
{/* Subtle dark overlay for better text readability - keeping background image clearly visible */}
|
|
<div
|
|
className="absolute inset-0 z-[1]"
|
|
style={{
|
|
backgroundColor: isDark ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.25)'
|
|
}}
|
|
/>
|
|
|
|
{/* Very subtle gradient overlay for warmth */}
|
|
{!isDark && (
|
|
<div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/20 via-pink-50/15 to-orange-50/20" />
|
|
)}
|
|
{isDark && (
|
|
<div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/25 via-gray-800/20 to-gray-900/25" />
|
|
)}
|
|
|
|
{/* Subtle animated blobs for depth */}
|
|
<div className="absolute inset-0 overflow-hidden z-[3]">
|
|
<motion.div
|
|
className="absolute top-20 left-10 w-72 h-72 bg-rose-100 dark:bg-rose-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-50"
|
|
animate={{
|
|
x: [0, 100, 0],
|
|
y: [0, 50, 0],
|
|
scale: [1, 1.1, 1],
|
|
}}
|
|
transition={{
|
|
duration: 20,
|
|
repeat: Infinity,
|
|
ease: 'easeInOut',
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="absolute top-40 right-10 w-96 h-96 bg-pink-100 dark:bg-pink-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-50"
|
|
animate={{
|
|
x: [0, -100, 0],
|
|
y: [0, 100, 0],
|
|
scale: [1, 1.2, 1],
|
|
}}
|
|
transition={{
|
|
duration: 25,
|
|
repeat: Infinity,
|
|
ease: 'easeInOut',
|
|
}}
|
|
/>
|
|
<motion.div
|
|
className="absolute bottom-20 left-1/3 w-80 h-80 bg-orange-100 dark:bg-orange-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-50"
|
|
animate={{
|
|
x: [0, 50, 0],
|
|
y: [0, -50, 0],
|
|
scale: [1, 1.15, 1],
|
|
}}
|
|
transition={{
|
|
duration: 22,
|
|
repeat: Infinity,
|
|
ease: 'easeInOut',
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="container mx-auto px-4 relative z-10">
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
>
|
|
<motion.h1
|
|
className="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-bold mb-4 sm:mb-6 text-white drop-shadow-lg px-4"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
>
|
|
Welcome to Attune Heart Therapy
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
className="text-lg sm:text-xl md:text-2xl text-white/95 mb-3 sm:mb-4 drop-shadow-md px-4"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
>
|
|
Nathalie Mac-Guffie, LMHC
|
|
</motion.p>
|
|
|
|
<motion.p
|
|
className="text-base sm:text-lg md:text-xl text-white/90 mb-6 sm:mb-8 max-w-2xl mx-auto drop-shadow-md px-4"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.6 }}
|
|
>
|
|
Compassionate, evidence-based therapy to help you heal, grow, and
|
|
thrive. Creating a safe space for your journey toward emotional
|
|
wellness.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
className="flex flex-col sm:flex-row gap-4 justify-center"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8, delay: 0.8 }}
|
|
>
|
|
<Button
|
|
size="lg"
|
|
className="bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white group cursor-pointer hover:scale-105 hover:shadow-lg transition-all"
|
|
asChild
|
|
>
|
|
<a href="/book-now">
|
|
<Calendar className="mr-2 h-5 w-5" />
|
|
Book Appointment
|
|
<ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
|
|
</a>
|
|
</Button>
|
|
<Button
|
|
size="lg"
|
|
variant="outline"
|
|
className="cursor-pointer hover:scale-105 hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-cyan-300 dark:hover:border-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all"
|
|
onClick={() => {
|
|
const servicesSection = document.getElementById('services');
|
|
if (servicesSection) {
|
|
servicesSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
}
|
|
}}
|
|
>
|
|
Learn More
|
|
</Button>
|
|
</motion.div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
|
|
<motion.div
|
|
className="absolute bottom-10 left-1/2 -translate-x-1/2"
|
|
animate={{ y: [0, 10, 0] }}
|
|
transition={{ duration: 2, repeat: Infinity }}
|
|
>
|
|
<div className="w-6 h-10 border-2 border-cyan-500/50 dark:border-cyan-400/50 rounded-full flex items-start justify-center p-2">
|
|
<motion.div
|
|
className="w-1.5 h-1.5 bg-cyan-500 dark:bg-cyan-400 rounded-full"
|
|
animate={{ y: [0, 12, 0] }}
|
|
transition={{ duration: 2, repeat: Infinity }}
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</section>
|
|
);
|
|
}
|