From c1233f2643b5e62e8bb78a365f232ef28e3f464e Mon Sep 17 00:00:00 2001 From: abubakarim78 Date: Thu, 6 Nov 2025 12:02:10 +0000 Subject: [PATCH 1/8] Design a basic website for the therapy --- app/globals.css | 97 ++++++++++++--- app/layout.tsx | 37 +++--- app/page.tsx | 77 +++--------- app/providers.tsx | 15 +++ components.json | 22 ++++ components/About.tsx | 201 +++++++++++++++++++++++++++++++ components/ContactSection.tsx | 181 ++++++++++++++++++++++++++++ components/Footer.tsx | 181 ++++++++++++++++++++++++++++ components/Hero.tsx | 163 ++++++++++++++++++++++++++ components/Navbar.tsx | 94 +++++++++++++++ components/Section.tsx | 30 +++++ components/Services.tsx | 214 ++++++++++++++++++++++++++++++++++ components/ThemeProvider.tsx | 57 +++++++++ components/ThemeToggle.tsx | 36 ++++++ components/ui/button.tsx | 60 ++++++++++ components/ui/card.tsx | 92 +++++++++++++++ components/ui/input.tsx | 21 ++++ components/ui/sonner.tsx | 40 +++++++ components/ui/textarea.tsx | 18 +++ components/ui/toaster.tsx | 8 ++ lib/utils.ts | 6 + package.json | 21 +++- pnpm-lock.yaml | 147 +++++++++++++++++++++++ public/3786819.jpg | Bin 0 -> 211547 bytes 24 files changed, 1716 insertions(+), 102 deletions(-) create mode 100644 app/providers.tsx create mode 100644 components.json create mode 100644 components/About.tsx create mode 100644 components/ContactSection.tsx create mode 100644 components/Footer.tsx create mode 100644 components/Hero.tsx create mode 100644 components/Navbar.tsx create mode 100644 components/Section.tsx create mode 100644 components/Services.tsx create mode 100644 components/ThemeProvider.tsx create mode 100644 components/ThemeToggle.tsx create mode 100644 components/ui/button.tsx create mode 100644 components/ui/card.tsx create mode 100644 components/ui/input.tsx create mode 100644 components/ui/sonner.tsx create mode 100644 components/ui/textarea.tsx create mode 100644 components/ui/toaster.tsx create mode 100644 lib/utils.ts create mode 100644 public/3786819.jpg diff --git a/app/globals.css b/app/globals.css index a2dc41e..82c4b36 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,26 +1,93 @@ @import "tailwindcss"; :root { - --background: #ffffff; - --foreground: #171717; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; } @media (prefers-color-scheme: dark) { :root { - --background: #0a0a0a; - --foreground: #ededed; + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; } } -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 0 0% 3.9%; + --card: 0 0% 100%; + --card-foreground: 0 0% 3.9%; + --popover: 0 0% 100%; + --popover-foreground: 0 0% 3.9%; + --primary: 0 0% 9%; + --primary-foreground: 0 0% 98%; + --secondary: 0 0% 96.1%; + --secondary-foreground: 0 0% 9%; + --muted: 0 0% 96.1%; + --muted-foreground: 0 0% 45.1%; + --accent: 0 0% 96.1%; + --accent-foreground: 0 0% 9%; + --destructive: 0 84.2% 60.2%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 89.8%; + --input: 0 0% 89.8%; + --ring: 0 0% 3.9%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; + --radius: 0.5rem; + } + .dark { + --background: 0 0% 3.9%; + --foreground: 0 0% 98%; + --card: 0 0% 3.9%; + --card-foreground: 0 0% 98%; + --popover: 0 0% 3.9%; + --popover-foreground: 0 0% 98%; + --primary: 0 0% 98%; + --primary-foreground: 0 0% 9%; + --secondary: 0 0% 14.9%; + --secondary-foreground: 0 0% 98%; + --muted: 0 0% 14.9%; + --muted-foreground: 0 0% 63.9%; + --accent: 0 0% 14.9%; + --accent-foreground: 0 0% 98%; + --destructive: 0 62.8% 30.6%; + --destructive-foreground: 0 0% 98%; + --border: 0 0% 14.9%; + --input: 0 0% 14.9%; + --ring: 0 0% 83.1%; + --chart-1: 220 70% 50%; + --chart-2: 160 60% 45%; + --chart-3: 30 80% 55%; + --chart-4: 280 65% 60%; + --chart-5: 340 75% 55%; + } +} + +@layer base { + * { + border-color: hsl(var(--border)); + } + body { + background-color: #ffffff; + color: hsl(var(--foreground)); + } + html.dark body { + background-color: #1a1e26; + } + html { + scroll-behavior: smooth; + } +} + +@layer utilities { + .text-balance { + text-wrap: balance; + } } diff --git a/app/layout.tsx b/app/layout.tsx index f7fa87e..5b3bb9b 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,33 +1,28 @@ -import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; -import "./globals.css"; +import './globals.css'; +import type { Metadata } from 'next'; +import { Inter } from 'next/font/google'; +import { Providers } from './providers'; +import { Toaster } from '@/components/ui/toaster'; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); +const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + 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.', }; export default function RootLayout({ children, -}: Readonly<{ +}: { children: React.ReactNode; -}>) { +}) { return ( - - - {children} + + + + {children} + + ); diff --git a/app/page.tsx b/app/page.tsx index 295f8fd..fced93b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,65 +1,22 @@ -import Image from "next/image"; +import Section from "../components/Section"; +import { Footer } from "../components/Footer"; +import { HeroSection } from "@/components/Hero"; +import { About } from "@/components/About"; +import { Services } from "@/components/Services"; +import { ContactSection } from "@/components/ContactSection"; export default function Home() { return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - -
-
-
+
+ + + + + + + + +
+
); } diff --git a/app/providers.tsx b/app/providers.tsx new file mode 100644 index 0000000..e759ace --- /dev/null +++ b/app/providers.tsx @@ -0,0 +1,15 @@ +"use client"; + +import { ThemeProvider } from "../components/ThemeProvider"; +import { Navbar } from "../components/Navbar"; +import { type ReactNode } from "react"; + +export function Providers({ children }: { children: ReactNode }) { + return ( + + + {children} + + ); +} + diff --git a/components.json b/components.json new file mode 100644 index 0000000..b7b9791 --- /dev/null +++ b/components.json @@ -0,0 +1,22 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "new-york", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "", + "css": "app/globals.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "" + }, + "iconLibrary": "lucide", + "aliases": { + "components": "@/components", + "utils": "@/lib/utils", + "ui": "@/components/ui", + "lib": "@/lib", + "hooks": "@/hooks" + }, + "registries": {} +} diff --git a/components/About.tsx b/components/About.tsx new file mode 100644 index 0000000..dbc69fe --- /dev/null +++ b/components/About.tsx @@ -0,0 +1,201 @@ +'use client'; + +import { motion } from "framer-motion"; +import { useInView } from "framer-motion"; +import { useRef, useEffect, useState } from "react"; +import { Award, Heart, Users } from "lucide-react"; + +export function About() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: "-100px" }); + const [isDark, setIsDark] = useState(false); + + useEffect(() => { + const checkTheme = () => { + setIsDark(document.documentElement.classList.contains('dark')); + }; + + checkTheme(); + const observer = new MutationObserver(checkTheme); + observer.observe(document.documentElement, { + attributes: true, + attributeFilter: ['class'] + }); + + return () => observer.disconnect(); + }, []); + + 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 ( +
+
+ {!isDark && ( +
+ )} + {isDark && ( +
+ )} + +
+ + +
+ +
+ + + Meet Nathalie Mac-Guffie + + + A dedicated mental health professional specializing in helping children + under 10 and their families navigate trauma, emotional challenges, and + developmental needs. + + + +
+ +
+ + My Approach + +

+ 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. +

+

+ Together, we'll set realistic, measurable, and achievable goals with + clear objectives tailored to your family's unique needs. +

+
+ + + + {credentials.map((cred, index) => { + const Icon = cred.icon; + return ( + +
+ + + +
+ + {cred.title} + + + {cred.description} + +
+
+ + ); + })} + +
+
+
+ ); +} + diff --git a/components/ContactSection.tsx b/components/ContactSection.tsx new file mode 100644 index 0000000..088e3d7 --- /dev/null +++ b/components/ContactSection.tsx @@ -0,0 +1,181 @@ +"use client"; + +import { motion, useInView } from "framer-motion"; +import { useEffect, useRef, useState } from "react"; +import { Send } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { Card, CardContent } from "@/components/ui/card"; +import { toast } from "sonner"; + +export function ContactSection() { + const ref = useRef(null); + const isInView = useInView(ref, { once: true, margin: "-100px" }); + const [isDark, setIsDark] = useState(false); + const [formData, setFormData] = useState({ + name: "", + email: "", + phone: "", + message: "", + }); + + // Sync with global theme class like Navbar/Hero/About + useEffect(() => { + const sync = () => setIsDark(document.documentElement.classList.contains("dark")); + sync(); + const observer = new MutationObserver(sync); + observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class"] }); + return () => observer.disconnect(); + }, []); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + toast("Message Received", { + description: "Thank you for reaching out. We'll get back to you soon!", + }); + setFormData({ name: "", email: "", phone: "", message: "" }); + }; + + return ( +
+ {/* Theme sync like Hero/About/Navbar */} +
+ {!isDark && ( +
+ )} + {isDark && ( +
+ )} + + {/* Subtle animated blobs */} +
+ + +
+ +
+ +

+ Get in Touch +

+
+

+ Ready to start your journey? Reach out to schedule a consultation. +

+ + +
+ {/* Left: Illustration replacing cards */} + + + + {/* Use a high-quality, license-friendly illustration */} +
+ Contact illustration + +
+
+

Let's Begin Your Healing Journey

+

+ 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. +

+
+ + + + + {/* Right: Contact form */} + + + +

Send a Message

+
+
+ setFormData({ ...formData, name: e.target.value })} + required + className="bg-card text-foreground dark:text-zinc-100 placeholder:text-muted-foreground dark:placeholder:text-zinc-400 border-border focus-visible:ring-rose-500" + /> +
+
+ setFormData({ ...formData, email: e.target.value })} + required + className="bg-card text-foreground dark:text-zinc-100 placeholder:text-muted-foreground dark:placeholder:text-zinc-400 border-border focus-visible:ring-rose-500" + /> +
+
+ setFormData({ ...formData, phone: e.target.value })} + className="bg-card text-foreground dark:text-zinc-100 placeholder:text-muted-foreground dark:placeholder:text-zinc-400 border-border focus-visible:ring-rose-500" + /> +
+
+