Add icon SVG and update layout metadata to include icon reference. Adjust ContactSection card background gradient for improved visibility. Update footer copyright text to include LLC designation

This commit is contained in:
iamkiddy 2025-11-13 13:00:02 +00:00
commit 934f31e1f5
7 changed files with 159 additions and 41 deletions

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

@ -126,7 +126,11 @@ 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 }}
> >
<<<<<<< HEAD
<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"> <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">
=======
<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">
>>>>>>> 79a5bb9fb99183cdae6841a62b115a1f8b88161e
<motion.h3 <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" 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 }} initial={{ opacity: 0 }}
@ -135,16 +139,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>
@ -196,6 +221,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

@ -97,7 +97,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

@ -151,7 +151,7 @@ export function Footer() {
> >
<div className="grid grid-cols-1 items-center gap-3 text-center sm:grid-cols-3 sm:text-left"> <div className="grid grid-cols-1 items-center gap-3 text-center sm:grid-cols-3 sm: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

@ -2,9 +2,14 @@
import { motion } from "framer-motion"; import { motion } from "framer-motion";
import { useInView } from "framer-motion"; import { useInView } from "framer-motion";
<<<<<<< HEAD
import { useRef } from "react"; import { useRef } from "react";
import { Baby, Brain, HeartHandshake, Sparkles, Users2, Shield } from "lucide-react"; import { Baby, Brain, HeartHandshake, Sparkles, Users2, Shield } from "lucide-react";
import { useAppTheme } from "@/components/ThemeProvider"; import { useAppTheme } from "@/components/ThemeProvider";
=======
import { useRef, useEffect, useState } from "react";
import { Users, Sparkles, Heart, Users2, Feather, Shield } from "lucide-react";
>>>>>>> 79a5bb9fb99183cdae6841a62b115a1f8b88161e
export function Services() { export function Services() {
const ref = useRef(null); const ref = useRef(null);
@ -14,40 +19,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",
}, },
]; ];
@ -127,7 +138,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-base sm:text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto px-4" className="text-base sm:text-lg md:text-xl text-muted-foreground max-w-3xl mx-auto px-4"
@ -135,7 +146,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>
@ -150,7 +161,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-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" 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"
> >
{/* 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"
@ -189,7 +199,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"
@ -206,9 +216,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"
@ -216,8 +225,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() {