ATTUNE-HEART-THERAPY/website
6
0
Fork 0
Code Issues 7 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge branch 'frontend/website' of http://35.207.46.142/ATTUNE-HEART-THERAPY/website into feat/authentication

Browse Source
This commit is contained in:
iamkiddy 2025-11-07 11:52:51 +00:00
commit c9440d3924
8 changed files with 186 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
components/About.tsx
View File

@ -49,22 +49,37 @@ export function About() {
ref={ref} ref={ref}
className="relative py-20 px-4 overflow-hidden" className="relative py-20 px-4 overflow-hidden"
> >
{/* Background Image */}
<div <div
className="absolute inset-0 z-0" className="absolute inset-0 z-0"
style={{ 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 && ( {!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 && ( {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 <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={{ animate={{
x: [0, 80, 0], x: [0, 80, 0],
y: [0, 40, 0], y: [0, 40, 0],
@ -77,7 +92,7 @@ export function About() {
}} }}
/> />
<motion.div <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={{ animate={{
x: [0, -80, 0], x: [0, -80, 0],
y: [0, 60, 0], y: [0, 60, 0],

89
components/ContactSection.tsx
View File

@ -39,24 +39,42 @@ export function ContactSection() {
return ( return (
<section id="contact" className="relative overflow-hidden py-20" ref={ref}> <section id="contact" className="relative overflow-hidden py-20" ref={ref}>
{/* Theme sync like Hero/About/Navbar */} {/* Background Image */}
<div className="absolute inset-0 z-0" style={{ backgroundColor: isDark ? "#1a1e26" : "#ffffff" }} /> <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 && ( {!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 && ( {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 */} {/* Subtle animated blobs */}
<div className="absolute inset-0 z-[2] overflow-hidden"> <div className="absolute inset-0 z-[3] overflow-hidden">
<motion.div <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] }} animate={{ x: [0, 60, 0], y: [0, 40, 0], scale: [1, 1.05, 1] }}
transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }} transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
/> />
<motion.div <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] }} animate={{ x: [0, -60, 0], y: [0, -40, 0], scale: [1, 1.08, 1] }}
transition={{ duration: 22, repeat: Infinity, ease: "easeInOut" }} transition={{ duration: 22, repeat: Infinity, ease: "easeInOut" }}
/> />
@ -78,37 +96,66 @@ export function ContactSection() {
</p> </p>
</motion.div> </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 */} {/* Left: Illustration replacing cards */}
<motion.div <motion.div
initial={{ opacity: 0, x: -50 }} initial={{ opacity: 0, x: -50 }}
animate={isInView ? { opacity: 1, x: 0 } : {}} animate={isInView ? { opacity: 1, x: 0 } : {}}
transition={{ duration: 0.6, delay: 0.2 }} 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"> <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"> <CardContent className="p-0 flex-1 flex flex-col">
{/* Use a high-quality, license-friendly illustration */} {/* Background image for the card */}
<div className="relative"> <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 <img
src="/3786819.jpg" src="/mmmfil.jpeg"
alt="Contact illustration" alt="Nathalie Mac Guffie, LCSW - Your therapist"
className="mx-auto w-full max-w-xl p-6 select-none rounded-xl object-cover" 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" loading="lazy"
/> />
<motion.div <motion.div
className="pointer-events-none absolute inset-0" className="pointer-events-none absolute inset-0 rounded-full"
animate={{ opacity: [0.3, 0.6, 0.3] }} animate={{ opacity: [0.3, 0.6, 0.3] }}
transition={{ duration: 3, repeat: Infinity }} 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%)" }} 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> </div>
<div className="px-6 pb-6"> {/* Text content */}
<h3 className="text-2xl font-bold mb-2 text-foreground">Let's Begin Your Healing Journey</h3> <div className="flex-1 text-center sm:text-left flex flex-col justify-center">
<p className="text-muted-foreground leading-relaxed"> <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 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. you through every stage of your journey toward wellness and growth.
</p> </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> </div>
</CardContent> </CardContent>
</Card> </Card>

35
components/Hero.tsx
View File

@ -28,22 +28,37 @@ export function HeroSection() {
id="home" id="home"
className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20" className="relative min-h-screen flex items-center justify-center overflow-hidden pt-20"
> >
{/* Background Image */}
<div <div
className="absolute inset-0 z-0" className="absolute inset-0 z-0"
style={{ 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 && ( {!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 && ( {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 <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={{ animate={{
x: [0, 100, 0], x: [0, 100, 0],
y: [0, 50, 0], y: [0, 50, 0],
@ -56,7 +71,7 @@ export function HeroSection() {
}} }}
/> />
<motion.div <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={{ animate={{
x: [0, -100, 0], x: [0, -100, 0],
y: [0, 100, 0], y: [0, 100, 0],
@ -69,7 +84,7 @@ export function HeroSection() {
}} }}
/> />
<motion.div <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={{ animate={{
x: [0, 50, 0], x: [0, 50, 0],
y: [0, -50, 0], y: [0, -50, 0],
@ -91,7 +106,7 @@ export function HeroSection() {
transition={{ duration: 0.8 }} transition={{ duration: 0.8 }}
> >
<motion.h1 <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 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }} transition={{ duration: 0.8, delay: 0.2 }}
@ -100,7 +115,7 @@ export function HeroSection() {
</motion.h1> </motion.h1>
<motion.p <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 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }} transition={{ duration: 0.8, delay: 0.4 }}
@ -109,7 +124,7 @@ export function HeroSection() {
</motion.p> </motion.p>
<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 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }} transition={{ duration: 0.8, delay: 0.6 }}

44
components/Services.tsx
View File

@ -30,31 +30,37 @@ export function Services() {
icon: Brain, icon: Brain,
title: "Trauma-Focused Therapy", title: "Trauma-Focused Therapy",
description: "Evidence-based TF-CBT to help children process and heal from traumatic experiences in a safe, supportive environment.", 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, icon: Sparkles,
title: "Play Therapy", title: "Play Therapy",
description: "Child-centered play therapy allowing children to express themselves naturally and build emotional regulation skills.", 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, icon: Baby,
title: "Infant Mental Health", title: "Infant Mental Health",
description: "Specialized support for infants and toddlers, focusing on early attachment, developmental milestones, and caregiver relationships.", 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, icon: Users2,
title: "Dyadic Therapy", title: "Dyadic Therapy",
description: "Strengthening parent-child relationships through interactive sessions that enhance communication and connection.", 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, icon: HeartHandshake,
title: "Social-Emotional Support", title: "Social-Emotional Support",
description: "Building emotional literacy and self-regulation skills to help children navigate relationships and challenges.", 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, icon: Shield,
title: "Relationship-Based Care", title: "Relationship-Based Care",
description: "Fostering healing through nurturing therapeutic relationships and caregiver collaboration.", 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} ref={ref}
className="relative py-20 px-4 overflow-hidden" className="relative py-20 px-4 overflow-hidden"
> >
{/* Background Image */}
<div <div
className="absolute inset-0 z-0" className="absolute inset-0 z-0"
style={{ 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 && ( {!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 && ( {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 <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={{ animate={{
x: [0, -90, 0], x: [0, -90, 0],
y: [0, 50, 0], y: [0, 50, 0],
@ -92,7 +113,7 @@ export function Services() {
}} }}
/> />
<motion.div <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={{ animate={{
x: [0, 70, 0], x: [0, 70, 0],
y: [0, -60, 0], y: [0, -60, 0],
@ -142,12 +163,18 @@ 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">
<motion.div <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" className="w-16 h-16 rounded-xl overflow-hidden mb-4 shadow-lg"
whileHover={{ scale: 1.1, rotate: 5 }} whileHover={{ scale: 1.1, rotate: 5 }}
transition={{ duration: 0.2 }} transition={{ duration: 0.2 }}
> >
<Icon className="h-7 w-7 text-rose-600 dark:text-rose-400" /> <img
src={service.backgroundImage}
alt={service.title}
className="w-full h-full object-cover"
/>
</motion.div> </motion.div>
<motion.h3 <motion.h3
className="text-xl font-semibold mb-3 text-foreground" className="text-xl font-semibold mb-3 text-foreground"
@ -165,6 +192,7 @@ export function Services() {
> >
{service.description} {service.description}
</motion.p> </motion.p>
</div>
</motion.div> </motion.div>
); );
})} })}

1
components/ui/toaster.tsx
View File

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

BIN
public/hshot.jpeg Normal file
View File

Binary file not shown.

BIN
public/large.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
public/mmmfil.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 16 KiB