Updated about, service, and footer #8

Merged
ATS merged 1 commits from frontend/website into master 2025-11-07 21:48:23 +00:00
7 changed files with 152 additions and 43 deletions
Showing only changes of commit 42f1e7ae09 - Show all commits

15
app/icon.svg Normal file
View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="192" height="192" viewBox="0 0 24 24">
<defs>
<linearGradient id="iconGradient" x1="4" y1="4" x2="20" y2="20" gradientUnits="userSpaceOnUse">
<stop offset="0%" stop-color="#f43f5e" />
<stop offset="50%" stop-color="#ec4899" />
<stop offset="100%" stop-color="#fb923c" />
</linearGradient>
</defs>
<rect width="24" height="24" rx="6" fill="url(#iconGradient)" />
<path
d="M19.5 12.571 12 20 4.5 12.571a5.48 5.48 0 0 1 .12-7.77 5.34 5.34 0 0 1 7.74.208l.64.714.64-.714a5.34 5.34 0 0 1 7.74-.208 5.48 5.48 0 0 1 .12 7.77Z"
fill="#ffffff"
/>
</svg>

After

Width:  |  Height:  |  Size: 637 B

View File

@ -9,6 +9,9 @@ const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Attune Heart Therapy | Nathalie Mac Guffie, LCSW | Miami, FL', title: 'Attune Heart Therapy | Nathalie Mac Guffie, LCSW | Miami, FL',
description: 'Compassionate, evidence-based therapy in Miami, FL. Licensed Clinical Social Worker offering anxiety, depression, trauma therapy and more.', description: 'Compassionate, evidence-based therapy in Miami, FL. Licensed Clinical Social Worker offering anxiety, depression, trauma therapy and more.',
icons: {
icon: '/icon.svg',
},
}; };
export default function RootLayout({ export default function RootLayout({

View File

@ -139,7 +139,7 @@ export function About() {
animate={isInView ? { opacity: 1, x: 0 } : {}} animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.8, delay: 0.2 }} 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-3xl p-8 border border-border/50 backdrop-blur-sm"> <div className="bg-gradient-to-br from-rose-100/15 via-pink-100/15 to-orange-100/15 dark:from-rose-900/15 dark:via-pink-900/15 dark:to-orange-900/15 rounded-3xl p-8 border border-border/50 backdrop-blur-sm">
<motion.h3 <motion.h3
className="text-2xl font-semibold mb-4 bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent" className="text-2xl font-semibold mb-4 bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent"
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
@ -148,16 +148,37 @@ export function About() {
> >
My Approach My Approach
</motion.h3> </motion.h3>
<p className="text-muted-foreground mb-4 leading-relaxed"> <div className="flex flex-col sm:flex-row items-center sm:items-start gap-6">
I provide person-centered guidance, following your child's lead while <div className="relative flex-shrink-0">
drawing out their strengths and incorporating effective coping skills. <img
My interventions are relationship-based, creating a warm, non-judgmental src="/hshot.jpeg"
space for growth and healing. alt="Nathalie Mac-Guffie supporting clients"
</p> 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"
<p className="text-muted-foreground leading-relaxed"> loading="lazy"
Together, we'll set realistic, measurable, and achievable goals with />
clear objectives tailored to your family's unique needs. <motion.div
</p> 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(153,246,228,0.18), transparent 70%), radial-gradient(circle, rgba(20,184,166,0.12), transparent 70%)",
}}
/>
</div>
<div className="text-center sm:text-left">
<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>
</div>
</div> </div>
</motion.div> </motion.div>
@ -209,6 +230,71 @@ export function About() {
})} })}
</motion.div> </motion.div>
</div> </div>
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, delay: 0.5 }}
className="bg-card/60 dark:bg-background/80 backdrop-blur-sm border border-border/50 rounded-3xl p-8 mt-16"
>
<div className="flex flex-col md:flex-row md:items-start md:justify-between gap-8">
<div className="max-w-2xl">
<motion.h3
className="text-2xl font-semibold 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.6 }}
>
Professional Qualifications
</motion.h3>
<p className="text-muted-foreground leading-relaxed">
Nathalie Mac-Guffie brings more than three decades of licensed experience serving children, caregivers, and families
across South Florida. Her practice is grounded in ongoing professional development and nationally recognized credentials.
</p>
</div>
<motion.a
href="https://www.psychologytoday.com/us/therapists/nathalie-mac-guffie-miami-fl/1203864"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center justify-center self-start rounded-xl border border-border px-4 py-2 text-sm font-medium text-rose-600 dark:text-rose-400 hover:underline transition"
initial={{ opacity: 0, y: 10 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: 0.7 }}
>
View Psychology Today Verification
</motion.a>
</div>
<div className="mt-8 grid gap-6 md:grid-cols-2">
<div className="space-y-4">
<div>
<p className="text-sm font-semibold text-foreground uppercase tracking-wide">Verification</p>
<p className="text-sm text-muted-foreground">
Verified by Psychology Today Licensed by the State of Florida (LMHC #MH5585)
</p>
</div>
<div>
<p className="text-sm font-semibold text-foreground uppercase tracking-wide">Education</p>
<p className="text-sm text-muted-foreground">
Barry University Master of Science in Mental Health Counseling (1994)
</p>
</div>
</div>
<div className="space-y-4">
<div>
<p className="text-sm font-semibold text-foreground uppercase tracking-wide">Additional Credentials</p>
<p className="text-sm text-muted-foreground">
Licensed Mental Health Counselor Registered Play Therapist-Supervisor (Association of Play Therapy)
</p>
</div>
<div>
<p className="text-sm font-semibold text-foreground uppercase tracking-wide">Specialized Expertise</p>
<p className="text-sm text-muted-foreground">
Trauma-Focused CBT Infant Mental Health Dyadic and Relationship-Based Therapy
</p>
</div>
</div>
</div>
</motion.div>
</div> </div>
</section> </section>
); );

View File

@ -104,7 +104,7 @@ export function ContactSection() {
transition={{ duration: 0.6, delay: 0.2 }} transition={{ duration: 0.6, delay: 0.2 }}
className="relative flex" className="relative flex"
> >
<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"> <Card className="bg-gradient-to-br from-rose-100/15 via-pink-100/15 to-orange-100/15 dark:from-rose-900/15 dark:via-pink-900/15 dark:to-orange-900/15 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"> <CardContent className="p-0 flex-1 flex flex-col">
{/* Background image for the card */} {/* Background image for the card */}
<div <div

View File

@ -165,7 +165,7 @@ export function Footer() {
> >
<div className="grid grid-cols-1 items-center gap-3 text-center md:grid-cols-3 md:text-left"> <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"> <p className="text-sm text-muted-foreground md:justify-self-start">
© {new Date().getFullYear()} Attune Heart Therapy. All rights reserved. © {new Date().getFullYear()} Attune Heart Therapy, LLC. All rights reserved.
</p> </p>
<p className="text-xs text-muted-foreground md:justify-self-center"> <p className="text-xs text-muted-foreground md:justify-self-center">
This site is for informational purposes only and does not constitute medical advice. This site is for informational purposes only and does not constitute medical advice.

View File

@ -3,7 +3,7 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { useInView } from "framer-motion"; import { useInView } from "framer-motion";
import { useRef, useEffect, useState } from "react"; import { useRef, useEffect, useState } from "react";
import { Baby, Brain, HeartHandshake, Sparkles, Users2, Shield } from "lucide-react"; import { Users, Sparkles, Heart, Users2, Feather, Shield } from "lucide-react";
export function Services() { export function Services() {
const ref = useRef(null); const ref = useRef(null);
@ -27,40 +27,46 @@ export function Services() {
const services = [ const services = [
{ {
icon: Brain, icon: Users,
title: "Trauma-Focused Therapy", title: "Child & Adolescent Support",
description: "Evidence-based TF-CBT to help children process and heal from traumatic experiences in a safe, supportive environment.", description:
backgroundImage: "https://images.unsplash.com/photo-1519494026892-80bbd2d6fd0d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80", "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, icon: Sparkles,
title: "Play Therapy", title: "Coping Skills Coaching",
description: "Child-centered play therapy allowing children to express themselves naturally and build emotional regulation skills.", description:
backgroundImage: "https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80", "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: Baby, icon: Heart,
title: "Infant Mental Health", title: "Self-Esteem Building",
description: "Specialized support for infants and toddlers, focusing on early attachment, developmental milestones, and caregiver relationships.", description:
backgroundImage: "https://images.unsplash.com/photo-1515488042361-ee00e0ddd4e4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80", "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, icon: Users2,
title: "Dyadic Therapy", title: "Family & Caregiver Collaboration",
description: "Strengthening parent-child relationships through interactive sessions that enhance communication and connection.", 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", backgroundImage: "https://images.unsplash.com/photo-1529156069898-49953e39b3ac?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80",
}, },
{ {
icon: HeartHandshake, icon: Feather,
title: "Social-Emotional Support", title: "Life Transitions & Perinatal Care",
description: "Building emotional literacy and self-regulation skills to help children navigate relationships and challenges.", description:
backgroundImage: "https://images.unsplash.com/photo-1497486751825-1233686d5d80?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80", "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, icon: Shield,
title: "Relationship-Based Care", title: "Trauma & PTSD Recovery",
description: "Fostering healing through nurturing therapeutic relationships and caregiver collaboration.", description:
backgroundImage: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1000&q=80", "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",
}, },
]; ];
@ -140,7 +146,7 @@ export function Services() {
animate={isInView ? { opacity: 1, y: 0 } : {}} animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, delay: 0.2 }} transition={{ duration: 0.8, delay: 0.2 }}
> >
Specialized Services Services
</motion.h2> </motion.h2>
<motion.p <motion.p
className="text-xl text-muted-foreground max-w-3xl mx-auto" className="text-xl text-muted-foreground max-w-3xl mx-auto"
@ -148,7 +154,7 @@ export function Services() {
animate={isInView ? { opacity: 1, y: 0 } : {}} animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, delay: 0.4 }} transition={{ duration: 0.8, delay: 0.4 }}
> >
Comprehensive, evidence-based therapeutic support for children and families Comprehensive, relationship-based therapy anchored in clinical expertise and compassionate collaboration.
</motion.p> </motion.p>
</motion.div> </motion.div>
@ -163,7 +169,6 @@ export function Services() {
transition={{ duration: 0.5, delay: index * 0.1 }} 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" 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"
> >
{/* Content */}
<div className="relative z-10"> <div className="relative z-10">
<motion.div <motion.div
className="w-16 h-16 rounded-xl overflow-hidden mb-4 shadow-lg" className="w-16 h-16 rounded-xl overflow-hidden mb-4 shadow-lg"
@ -202,7 +207,7 @@ export function Services() {
initial={{ opacity: 0, y: 30 }} initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : {}} animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.8, delay: 0.6 }} transition={{ duration: 0.8, delay: 0.6 }}
className="mt-16 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-3xl p-8 border border-border/50 backdrop-blur-sm" 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 <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" 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"
@ -219,9 +224,8 @@ export function Services() {
animate={isInView ? { opacity: 1 } : {}} animate={isInView ? { opacity: 1 } : {}}
transition={{ duration: 0.8, delay: 0.8 }} transition={{ duration: 0.8, delay: 0.8 }}
> >
I specialize in working with <strong className="text-foreground">children under the age of 10</strong> who are I collaborate closely with caregivers and individuals to foster emotional literacy,
dealing with trauma, stressors, or social-emotional challenges and need understanding self-regulation, and secure relationships during times of transition or trauma.
and support.
</motion.p> </motion.p>
<motion.p <motion.p
className="text-muted-foreground leading-relaxed" className="text-muted-foreground leading-relaxed"
@ -229,8 +233,8 @@ export function Services() {
animate={isInView ? { opacity: 1 } : {}} animate={isInView ? { opacity: 1 } : {}}
transition={{ duration: 0.8, delay: 0.9 }} transition={{ duration: 0.8, delay: 0.9 }}
> >
The goal is to build a healthy foundation through nurturing relationships and Therapy is tailored for children (age 610), teens, adults, and older adults, with services offered to individuals and a
emotional literacy, helping children diminish distress and enhance self-regulation. special focus on supporting Black and African American families in Miami and Hollywood, Florida.
</motion.p> </motion.p>
</div> </div>
</motion.div> </motion.div>

View File

@ -7,3 +7,4 @@ export function Toaster() {