feat/authentication #5
@ -49,22 +49,37 @@ export function About() {
|
||||
ref={ref}
|
||||
className="relative py-20 px-4 overflow-hidden"
|
||||
>
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 z-0"
|
||||
style={{
|
||||
backgroundColor: isDark ? '#1a1e26' : '#ffffff'
|
||||
// backgroundImage: `url('https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Subtle overlay for readability - keeping background image clearly visible */}
|
||||
<div
|
||||
className="absolute inset-0 z-[1]"
|
||||
style={{
|
||||
backgroundColor: isDark ? 'rgba(0, 0, 0, 0.35)' : 'rgba(255, 255, 255, 0.30)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Very subtle gradient overlay */}
|
||||
{!isDark && (
|
||||
<div className="absolute inset-0 z-[1] bg-gradient-to-br from-rose-50/50 via-pink-50/50 to-orange-50/50" />
|
||||
<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-[1] bg-gradient-to-br from-gray-900/80 via-gray-800/80 to-gray-900/80" />
|
||||
<div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/25 via-gray-800/20 to-gray-900/25" />
|
||||
)}
|
||||
|
||||
<div className="absolute inset-0 overflow-hidden z-[2]">
|
||||
{/* Subtle animated blobs */}
|
||||
<div className="absolute inset-0 overflow-hidden z-[3]">
|
||||
<motion.div
|
||||
className="absolute top-10 left-10 w-64 h-64 bg-cyan-100 dark:bg-cyan-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-60"
|
||||
className="absolute top-10 left-10 w-64 h-64 bg-cyan-100 dark:bg-cyan-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
|
||||
animate={{
|
||||
x: [0, 80, 0],
|
||||
y: [0, 40, 0],
|
||||
@ -77,7 +92,7 @@ export function About() {
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-20 right-10 w-80 h-80 bg-emerald-100 dark:bg-emerald-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-60"
|
||||
className="absolute bottom-20 right-10 w-80 h-80 bg-emerald-100 dark:bg-emerald-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
|
||||
animate={{
|
||||
x: [0, -80, 0],
|
||||
y: [0, 60, 0],
|
||||
|
||||
@ -39,24 +39,42 @@ export function ContactSection() {
|
||||
|
||||
return (
|
||||
<section id="contact" className="relative overflow-hidden py-20" ref={ref}>
|
||||
{/* Theme sync like Hero/About/Navbar */}
|
||||
<div className="absolute inset-0 z-0" style={{ backgroundColor: isDark ? "#1a1e26" : "#ffffff" }} />
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 z-0"
|
||||
style={{
|
||||
// backgroundImage: `url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Subtle overlay for readability - keeping background image clearly visible */}
|
||||
<div
|
||||
className="absolute inset-0 z-[1]"
|
||||
style={{
|
||||
backgroundColor: isDark ? 'rgba(0, 0, 0, 0.35)' : 'rgba(255, 255, 255, 0.30)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Very subtle gradient overlay */}
|
||||
{!isDark && (
|
||||
<div className="absolute inset-0 z-[1] bg-gradient-to-br from-rose-50/40 via-pink-50/40 to-orange-50/40" />
|
||||
<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-[1] bg-gradient-to-br from-gray-900/70 via-gray-800/70 to-gray-900/70" />
|
||||
<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 */}
|
||||
<div className="absolute inset-0 z-[2] overflow-hidden">
|
||||
<div className="absolute inset-0 z-[3] overflow-hidden">
|
||||
<motion.div
|
||||
className={`absolute -top-10 left-10 h-64 w-64 rounded-full blur-3xl ${isDark ? "bg-pink-900/30 opacity-60" : "bg-pink-100 opacity-50"}`}
|
||||
className={`absolute -top-10 left-10 h-64 w-64 rounded-full blur-3xl ${isDark ? "bg-pink-900/30 opacity-50" : "bg-pink-100 opacity-40"}`}
|
||||
animate={{ x: [0, 60, 0], y: [0, 40, 0], scale: [1, 1.05, 1] }}
|
||||
transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
<motion.div
|
||||
className={`absolute -bottom-10 right-10 h-72 w-72 rounded-full blur-3xl ${isDark ? "bg-orange-900/30 opacity-60" : "bg-orange-100 opacity-50"}`}
|
||||
className={`absolute -bottom-10 right-10 h-72 w-72 rounded-full blur-3xl ${isDark ? "bg-orange-900/30 opacity-50" : "bg-orange-100 opacity-40"}`}
|
||||
animate={{ x: [0, -60, 0], y: [0, -40, 0], scale: [1, 1.08, 1] }}
|
||||
transition={{ duration: 22, repeat: Infinity, ease: "easeInOut" }}
|
||||
/>
|
||||
@ -78,37 +96,66 @@ export function ContactSection() {
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-12 lg:grid-cols-2">
|
||||
<div className="grid gap-12 lg:grid-cols-2 lg:items-stretch">
|
||||
{/* Left: Illustration replacing cards */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="relative"
|
||||
className="relative flex"
|
||||
>
|
||||
<Card className="bg-card/60 backdrop-blur-sm border border-border/50 overflow-hidden">
|
||||
<CardContent className="p-0">
|
||||
{/* Use a high-quality, license-friendly illustration */}
|
||||
<div className="relative">
|
||||
<img
|
||||
src="/3786819.jpg"
|
||||
alt="Contact illustration"
|
||||
className="mx-auto w-full max-w-xl p-6 select-none rounded-xl object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
<motion.div
|
||||
className="pointer-events-none absolute inset-0"
|
||||
animate={{ opacity: [0.3, 0.6, 0.3] }}
|
||||
transition={{ duration: 3, repeat: Infinity }}
|
||||
style={{ background: "radial-gradient(600px circle at 20% 10%, rgba(244,114,182,0.15), transparent 40%), radial-gradient(600px circle at 80% 80%, rgba(251,146,60,0.12), transparent 40%)" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="px-6 pb-6">
|
||||
<h3 className="text-2xl font-bold mb-2 text-foreground">Let's Begin Your Healing Journey</h3>
|
||||
<p className="text-muted-foreground leading-relaxed">
|
||||
Taking the first step toward therapy can feel daunting, but you're not alone. I'm here to support
|
||||
you through every stage of your journey toward wellness and growth.
|
||||
</p>
|
||||
<Card className="bg-gradient-to-br from-rose-100/30 via-pink-100/30 to-orange-100/30 dark:from-rose-900/20 dark:via-pink-900/20 dark:to-orange-900/20 backdrop-blur-sm border border-border/50 overflow-hidden relative h-full flex flex-col rounded-3xl">
|
||||
<CardContent className="p-0 flex-1 flex flex-col">
|
||||
{/* Background image for the card */}
|
||||
<div
|
||||
className="absolute inset-0 z-0 rounded-3xl"
|
||||
style={{
|
||||
// backgroundImage: `url('https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
opacity: 0.3,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Content */}
|
||||
<div className="relative z-10 p-6 flex-1 flex flex-col">
|
||||
{/* Image and text side by side */}
|
||||
<div className="flex flex-col sm:flex-row items-center sm:items-start gap-6 flex-1">
|
||||
{/* Modern therapy-related illustration */}
|
||||
<div className="relative flex-shrink-0">
|
||||
<img
|
||||
src="/mmmfil.jpeg"
|
||||
alt="Nathalie Mac Guffie, LCSW - Your therapist"
|
||||
className="w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 select-none rounded-full object-cover shadow-lg"
|
||||
loading="lazy"
|
||||
/>
|
||||
<motion.div
|
||||
className="pointer-events-none absolute inset-0 rounded-full"
|
||||
animate={{ opacity: [0.3, 0.6, 0.3] }}
|
||||
transition={{ duration: 3, repeat: Infinity }}
|
||||
style={{ background: "radial-gradient(circle, rgba(244,114,182,0.15), transparent 70%), radial-gradient(circle, rgba(251,146,60,0.12), transparent 70%)" }}
|
||||
/>
|
||||
</div>
|
||||
{/* Text content */}
|
||||
<div className="flex-1 text-center sm:text-left flex flex-col justify-center">
|
||||
<h3 className="text-2xl font-bold mb-4 text-foreground">Let's Begin Your Healing Journey</h3>
|
||||
<div className="space-y-3 text-muted-foreground leading-relaxed">
|
||||
<p>
|
||||
Taking the first step toward therapy can feel daunting, but you're not alone. I'm here to support
|
||||
you through every stage of your journey toward wellness and growth.
|
||||
</p>
|
||||
<p>
|
||||
Whether you're seeking help for yourself or your child, I provide a warm, non-judgmental space where
|
||||
healing can begin. My approach is relationship-based and tailored to meet your unique needs.
|
||||
</p>
|
||||
<p>
|
||||
Reach out today to schedule a consultation. Together, we can explore how therapy can support you
|
||||
in creating positive change and building resilience.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@ -28,22 +28,37 @@ export function HeroSection() {
|
||||
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={{
|
||||
backgroundColor: isDark ? '#1a1e26' : '#ffffff'
|
||||
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-[1] bg-gradient-to-br from-rose-50/50 via-pink-50/50 to-orange-50/50" />
|
||||
<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-[1] bg-gradient-to-br from-gray-900/80 via-gray-800/80 to-gray-900/80" />
|
||||
<div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/25 via-gray-800/20 to-gray-900/25" />
|
||||
)}
|
||||
|
||||
<div className="absolute inset-0 overflow-hidden z-[2]">
|
||||
{/* 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-50 dark:opacity-70"
|
||||
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],
|
||||
@ -56,7 +71,7 @@ export function HeroSection() {
|
||||
}}
|
||||
/>
|
||||
<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-50 dark:opacity-70"
|
||||
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],
|
||||
@ -69,7 +84,7 @@ export function HeroSection() {
|
||||
}}
|
||||
/>
|
||||
<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-50 dark:opacity-70"
|
||||
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],
|
||||
@ -91,7 +106,7 @@ export function HeroSection() {
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<motion.h1
|
||||
className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent"
|
||||
className="text-5xl md:text-7xl font-bold mb-6 text-white drop-shadow-lg"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
@ -100,7 +115,7 @@ export function HeroSection() {
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
className="text-xl md:text-2xl text-muted-foreground mb-4"
|
||||
className="text-xl md:text-2xl text-white/95 mb-4 drop-shadow-md"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
@ -109,7 +124,7 @@ export function HeroSection() {
|
||||
</motion.p>
|
||||
|
||||
<motion.p
|
||||
className="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto"
|
||||
className="text-lg md:text-xl text-white/90 mb-8 max-w-2xl mx-auto drop-shadow-md"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.6 }}
|
||||
|
||||
@ -30,31 +30,37 @@ export function Services() {
|
||||
icon: Brain,
|
||||
title: "Trauma-Focused Therapy",
|
||||
description: "Evidence-based TF-CBT to help children process and heal from traumatic experiences in a safe, supportive environment.",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Play Therapy",
|
||||
description: "Child-centered play therapy allowing children to express themselves naturally and build emotional regulation skills.",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
|
||||
},
|
||||
{
|
||||
icon: Baby,
|
||||
title: "Infant Mental Health",
|
||||
description: "Specialized support for infants and toddlers, focusing on early attachment, developmental milestones, and caregiver relationships.",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
|
||||
},
|
||||
{
|
||||
icon: Users2,
|
||||
title: "Dyadic Therapy",
|
||||
description: "Strengthening parent-child relationships through interactive sessions that enhance communication and connection.",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
|
||||
},
|
||||
{
|
||||
icon: HeartHandshake,
|
||||
title: "Social-Emotional Support",
|
||||
description: "Building emotional literacy and self-regulation skills to help children navigate relationships and challenges.",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Relationship-Based Care",
|
||||
description: "Fostering healing through nurturing therapeutic relationships and caregiver collaboration.",
|
||||
backgroundImage: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
|
||||
},
|
||||
];
|
||||
|
||||
@ -64,22 +70,37 @@ export function Services() {
|
||||
ref={ref}
|
||||
className="relative py-20 px-4 overflow-hidden"
|
||||
>
|
||||
{/* Background Image */}
|
||||
<div
|
||||
className="absolute inset-0 z-0"
|
||||
style={{
|
||||
backgroundColor: isDark ? '#1a1e26' : '#ffffff'
|
||||
backgroundImage: `url('/large.jpeg')`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Minimal overlay - allowing background image to show at near original opaqueness */}
|
||||
<div
|
||||
className="absolute inset-0 z-[1]"
|
||||
style={{
|
||||
backgroundColor: isDark ? 'rgba(0, 0, 0, 0.15)' : 'rgba(255, 255, 255, 0.10)'
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Very subtle gradient overlay */}
|
||||
{!isDark && (
|
||||
<div className="absolute inset-0 z-[1] bg-gradient-to-br from-rose-50/50 via-pink-50/50 to-orange-50/50" />
|
||||
<div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/10 via-pink-50/8 to-orange-50/10" />
|
||||
)}
|
||||
{isDark && (
|
||||
<div className="absolute inset-0 z-[1] bg-gradient-to-br from-gray-900/80 via-gray-800/80 to-gray-900/80" />
|
||||
<div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/10 via-gray-800/8 to-gray-900/10" />
|
||||
)}
|
||||
|
||||
<div className="absolute inset-0 overflow-hidden z-[2]">
|
||||
{/* Subtle animated blobs */}
|
||||
<div className="absolute inset-0 overflow-hidden z-[3]">
|
||||
<motion.div
|
||||
className="absolute top-20 right-20 w-72 h-72 bg-pink-100 dark:bg-pink-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-60"
|
||||
className="absolute top-20 right-20 w-72 h-72 bg-pink-100 dark:bg-pink-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
|
||||
animate={{
|
||||
x: [0, -90, 0],
|
||||
y: [0, 50, 0],
|
||||
@ -92,7 +113,7 @@ export function Services() {
|
||||
}}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute bottom-10 left-20 w-96 h-96 bg-orange-100 dark:bg-orange-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-40 dark:opacity-60"
|
||||
className="absolute bottom-10 left-20 w-96 h-96 bg-orange-100 dark:bg-orange-900/20 rounded-full mix-blend-multiply dark:mix-blend-lighten filter blur-xl opacity-30 dark:opacity-50"
|
||||
animate={{
|
||||
x: [0, 70, 0],
|
||||
y: [0, -60, 0],
|
||||
@ -142,29 +163,36 @@ export function Services() {
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
className="group bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 hover:scale-105 transition-all duration-300 cursor-pointer"
|
||||
>
|
||||
<motion.div
|
||||
className="bg-gradient-to-br from-rose-500/20 via-pink-500/20 to-orange-500/20 dark:from-rose-500/30 dark:via-pink-500/30 dark:to-orange-500/30 w-14 h-14 rounded-xl flex items-center justify-center mb-4"
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<Icon className="h-7 w-7 text-rose-600 dark:text-rose-400" />
|
||||
</motion.div>
|
||||
<motion.h3
|
||||
className="text-xl font-semibold mb-3 text-foreground"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={isInView ? { opacity: 1 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
|
||||
>
|
||||
{service.title}
|
||||
</motion.h3>
|
||||
<motion.p
|
||||
className="text-muted-foreground leading-relaxed"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={isInView ? { opacity: 1 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
|
||||
>
|
||||
{service.description}
|
||||
</motion.p>
|
||||
{/* Content */}
|
||||
<div className="relative z-10">
|
||||
<motion.div
|
||||
className="w-16 h-16 rounded-xl overflow-hidden mb-4 shadow-lg"
|
||||
whileHover={{ scale: 1.1, rotate: 5 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
>
|
||||
<img
|
||||
src={service.backgroundImage}
|
||||
alt={service.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</motion.div>
|
||||
<motion.h3
|
||||
className="text-xl font-semibold mb-3 text-foreground"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={isInView ? { opacity: 1 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }}
|
||||
>
|
||||
{service.title}
|
||||
</motion.h3>
|
||||
<motion.p
|
||||
className="text-muted-foreground leading-relaxed"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={isInView ? { opacity: 1 } : {}}
|
||||
transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
|
||||
>
|
||||
{service.description}
|
||||
</motion.p>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -6,3 +6,4 @@ export function Toaster() {
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
BIN
public/hshot.jpeg
Normal file
BIN
public/hshot.jpeg
Normal file
Binary file not shown.
BIN
public/large.jpeg
Normal file
BIN
public/large.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
BIN
public/mmmfil.jpeg
Normal file
BIN
public/mmmfil.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Loading…
Reference in New Issue
Block a user