204 lines
8.1 KiB
TypeScript
204 lines
8.1 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from "framer-motion";
|
|
import { useInView } from "framer-motion";
|
|
import { useRef } from "react";
|
|
import { Award, Heart, Users } from "lucide-react";
|
|
import { useAppTheme } from "@/components/ThemeProvider";
|
|
|
|
export function About() {
|
|
const ref = useRef(null);
|
|
const isInView = useInView(ref, { once: true, margin: "-100px" });
|
|
const { theme } = useAppTheme();
|
|
const isDark = theme === "dark";
|
|
|
|
const credentials = [
|
|
{
|
|
icon: Award,
|
|
title: "Licensed Mental Health Counselor (LMHC)",
|
|
description: "Florida licensed with 30 years of experience",
|
|
},
|
|
{
|
|
icon: Heart,
|
|
title: "Trauma-Focused Specialist",
|
|
description: "Certified in TF-CBT for trauma recovery",
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Infant Mental Health & Play Therapy",
|
|
description: "Registered Play Therapist (RPT-S) and IMH Endorsement",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section
|
|
id="about"
|
|
ref={ref}
|
|
className="relative py-20 px-4 overflow-hidden"
|
|
>
|
|
{/* Background Image */}
|
|
<div
|
|
className="absolute inset-0 z-0"
|
|
style={{
|
|
// 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-[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 */}
|
|
<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-30 dark:opacity-50"
|
|
animate={{
|
|
x: [0, 80, 0],
|
|
y: [0, 40, 0],
|
|
scale: [1, 1.1, 1],
|
|
}}
|
|
transition={{
|
|
duration: 18,
|
|
repeat: Infinity,
|
|
ease: 'easeInOut',
|
|
}}
|
|
/>
|
|
<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-30 dark:opacity-50"
|
|
animate={{
|
|
x: [0, -80, 0],
|
|
y: [0, 60, 0],
|
|
scale: [1, 1.15, 1],
|
|
}}
|
|
transition={{
|
|
duration: 22,
|
|
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 px-4 bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
>
|
|
Meet Nathalie Mac-Guffie
|
|
</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 }}
|
|
>
|
|
A dedicated mental health professional specializing in helping children
|
|
under 10 and their families navigate trauma, emotional challenges, and
|
|
developmental needs.
|
|
</motion.p>
|
|
</motion.div>
|
|
|
|
<div className="grid md:grid-cols-2 gap-8 md:gap-12 items-center mb-12 md:mb-16 px-4">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.2 }}
|
|
>
|
|
<div 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 rounded-2xl md:rounded-3xl p-6 md:p-8 border border-border/50 backdrop-blur-sm">
|
|
<motion.h3
|
|
className="text-xl sm:text-2xl font-semibold mb-3 md:mb-4 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.3 }}
|
|
>
|
|
My Approach
|
|
</motion.h3>
|
|
<p className="text-muted-foreground mb-4 leading-relaxed">
|
|
I provide person-centered guidance, following your child's lead while
|
|
drawing out their strengths and incorporating effective coping skills.
|
|
My interventions are relationship-based, creating a warm, non-judgmental
|
|
space for growth and healing.
|
|
</p>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
Together, we'll set realistic, measurable, and achievable goals with
|
|
clear objectives tailored to your family's unique needs.
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.8, delay: 0.4 }}
|
|
className="space-y-6"
|
|
>
|
|
{credentials.map((cred, index) => {
|
|
const Icon = cred.icon;
|
|
return (
|
|
<motion.div
|
|
key={cred.title}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={isInView ? { opacity: 1, y: 0 } : {}}
|
|
transition={{ duration: 0.5, delay: 0.6 + index * 0.1 }}
|
|
className="bg-card/50 backdrop-blur-sm rounded-2xl p-6 border border-border/50 hover:border-rose-500/50 hover:scale-105 transition-all cursor-pointer"
|
|
>
|
|
<div className="flex items-start gap-4">
|
|
<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 p-3 rounded-xl"
|
|
whileHover={{ scale: 1.1, rotate: 5 }}
|
|
transition={{ duration: 0.2 }}
|
|
>
|
|
<Icon className="h-6 w-6 text-rose-600 dark:text-rose-400" />
|
|
</motion.div>
|
|
<div>
|
|
<motion.h4
|
|
className="font-semibold mb-2 text-foreground"
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={isInView ? { opacity: 1, x: 0 } : {}}
|
|
transition={{ duration: 0.5, delay: 0.7 + index * 0.1 }}
|
|
>
|
|
{cred.title}
|
|
</motion.h4>
|
|
<motion.p
|
|
className="text-sm text-muted-foreground"
|
|
initial={{ opacity: 0 }}
|
|
animate={isInView ? { opacity: 1 } : {}}
|
|
transition={{ duration: 0.5, delay: 0.8 + index * 0.1 }}
|
|
>
|
|
{cred.description}
|
|
</motion.p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|