234 lines
9.7 KiB
TypeScript
234 lines
9.7 KiB
TypeScript
'use client';
|
||
|
||
import { motion } from "framer-motion";
|
||
import { useInView } from "framer-motion";
|
||
import { useRef } from "react";
|
||
import { Baby, Brain, HeartHandshake, Sparkles, Users2, Shield, Users, Heart, Feather } from "lucide-react";
|
||
import { useAppTheme } from "@/components/ThemeProvider";
|
||
|
||
export function Services() {
|
||
const ref = useRef(null);
|
||
const isInView = useInView(ref, { once: true, margin: "-100px" });
|
||
const { theme } = useAppTheme();
|
||
const isDark = theme === "dark";
|
||
|
||
const services = [
|
||
{
|
||
icon: Users,
|
||
title: "Child & Adolescent Support",
|
||
description:
|
||
"Developmentally attuned support for children, teens, adults, and elders—navigating adoption stories, peer relationships, and social-emotional growth alongside caregivers.",
|
||
backgroundImage: "https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?auto=format&fit=crop&w=1000&q=80",
|
||
},
|
||
{
|
||
icon: Sparkles,
|
||
title: "Coping Skills Coaching",
|
||
description:
|
||
"Solution-focused strategies that build resilience, emotional literacy, and daily coping tools for individuals across the lifespan.",
|
||
backgroundImage: "https://images.unsplash.com/photo-1531512073830-ba890ca4eba2?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
|
||
},
|
||
{
|
||
icon: Heart,
|
||
title: "Self-Esteem Building",
|
||
description:
|
||
"Strength-based interventions that nurture confidence, self-worth, and advocacy skills for children, teens, adults, and elders.",
|
||
backgroundImage: "https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?auto=format&fit=crop&w=1000&q=80",
|
||
},
|
||
{
|
||
icon: Users2,
|
||
title: "Family & Caregiver Collaboration",
|
||
description:
|
||
"Dyadic therapy that reduces family conflict, strengthens parenting partnerships, and supports intergenerational understanding.",
|
||
backgroundImage: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
|
||
},
|
||
{
|
||
icon: Feather,
|
||
title: "Life Transitions & Perinatal Care",
|
||
description:
|
||
"Guidance through perinatal adjustments, caregiving shifts, and later-life transitions with compassion for each stage of adulthood.",
|
||
backgroundImage: "https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?auto=format&fit=crop&w=1000&q=80",
|
||
},
|
||
{
|
||
icon: Shield,
|
||
title: "Trauma & PTSD Recovery",
|
||
description:
|
||
"Trauma-focused CBT and play-based interventions that promote emotional safety, caregiver bonding, and long-term healing.",
|
||
backgroundImage: "https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
|
||
},
|
||
];
|
||
|
||
return (
|
||
<section
|
||
id="services"
|
||
ref={ref}
|
||
className="relative py-20 px-4 overflow-hidden"
|
||
>
|
||
{/* Background Image */}
|
||
<div
|
||
className="absolute inset-0 z-0"
|
||
style={{
|
||
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-[2] bg-gradient-to-br from-rose-50/10 via-pink-50/8 to-orange-50/10" />
|
||
)}
|
||
{isDark && (
|
||
<div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/10 via-gray-800/8 to-gray-900/10" />
|
||
)}
|
||
|
||
{/* 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-30 dark:opacity-50"
|
||
animate={{
|
||
x: [0, -90, 0],
|
||
y: [0, 50, 0],
|
||
scale: [1, 1.2, 1],
|
||
}}
|
||
transition={{
|
||
duration: 20,
|
||
repeat: Infinity,
|
||
ease: 'easeInOut',
|
||
}}
|
||
/>
|
||
<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-30 dark:opacity-50"
|
||
animate={{
|
||
x: [0, 70, 0],
|
||
y: [0, -60, 0],
|
||
scale: [1, 1.15, 1],
|
||
}}
|
||
transition={{
|
||
duration: 24,
|
||
repeat: Infinity,
|
||
ease: 'easeInOut',
|
||
}}
|
||
/>
|
||
</div>
|
||
|
||
<div className="container max-w-6xl mx-auto relative z-10">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.8 }}
|
||
className="text-center mb-16"
|
||
>
|
||
<motion.h2
|
||
className="text-3xl sm:text-4xl md:text-5xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent px-4"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.8, delay: 0.2 }}
|
||
>
|
||
Services
|
||
</motion.h2>
|
||
<motion.p
|
||
className="text-base sm:text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto px-4"
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.8, delay: 0.4 }}
|
||
>
|
||
Comprehensive, relationship-based therapy anchored in clinical expertise and compassionate collaboration.
|
||
</motion.p>
|
||
</motion.div>
|
||
|
||
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6 px-4">
|
||
{services.map((service, index) => {
|
||
const Icon = service.icon;
|
||
return (
|
||
<motion.div
|
||
key={service.title}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||
className="group bg-card/50 backdrop-blur-sm rounded-xl sm:rounded-2xl p-4 sm: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"
|
||
>
|
||
<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>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
||
transition={{ duration: 0.8, delay: 0.6 }}
|
||
className="mt-16 bg-gradient-to-br from-rose-100/25 via-pink-100/25 to-orange-100/25 dark:from-rose-900/20 dark:via-pink-900/20 dark:to-orange-900/20 rounded-3xl p-8 border border-border/50 backdrop-blur-sm"
|
||
>
|
||
<motion.h3
|
||
className="text-2xl font-semibold mb-4 text-center bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent"
|
||
initial={{ opacity: 0 }}
|
||
animate={isInView ? { opacity: 1 } : {}}
|
||
transition={{ duration: 0.8, delay: 0.7 }}
|
||
>
|
||
Who I Work With
|
||
</motion.h3>
|
||
<div className="max-w-3xl mx-auto text-center">
|
||
<motion.p
|
||
className="text-muted-foreground leading-relaxed mb-4"
|
||
initial={{ opacity: 0 }}
|
||
animate={isInView ? { opacity: 1 } : {}}
|
||
transition={{ duration: 0.8, delay: 0.8 }}
|
||
>
|
||
I collaborate closely with caregivers and individuals to foster emotional literacy,
|
||
self-regulation, and secure relationships during times of transition or trauma.
|
||
</motion.p>
|
||
<motion.p
|
||
className="text-muted-foreground leading-relaxed"
|
||
initial={{ opacity: 0 }}
|
||
animate={isInView ? { opacity: 1 } : {}}
|
||
transition={{ duration: 0.8, delay: 0.9 }}
|
||
>
|
||
Therapy is tailored for children (age 6–10), teens, adults, and older adults, with services offered to individuals and a
|
||
special focus on supporting Black and African American families in Miami and Hollywood, Florida.
|
||
</motion.p>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
|