Merge pull request 'fix/landing-page' (#13) from fix/landing-page into master

Reviewed-on: https://gitea.blackbusinesslabs.com/ATTUNE-HEART-THERAPY/website/pulls/13

app/(admin)/_components/header.tsx

@@ -53,7 +53,7 @@ export function Header() {
       <div className="px-3 sm:px-4 md:px-6 lg:px-8">
         <div className="flex items-center justify-between h-14 sm:h-16">
           {/* Logo */}
-          <Link href="/admin/dashboard" className="flex items-center gap-2 sm:gap-3">
+          <Link href="/" className="flex items-center gap-2 sm:gap-3">
             <div className="flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-lg bg-linear-to-r from-rose-100 to-pink-100">
               <Heart className="w-4 h-4 sm:w-6 sm:h-6 text-rose-600" fill="currentColor" />
             </div>

app/(admin)/_components/side-nav.tsx

@@ -44,12 +44,12 @@ export default function SideNav() {
     <>
       {/* Mobile Top Bar */}
       <div className="flex md:hidden items-center justify-between px-4 py-3 border-b border-gray-200 bg-white z-30 fixed top-0 left-0 right-0">
-        <div className="flex items-center gap-3">
+        <Link href="/" className="flex items-center gap-3">
           <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-linear-to-r from-rose-100 to-pink-100">
             <Heart className="w-5 h-5 text-rose-600" fill="currentColor" />
           </div>
           <span className="text-lg font-semibold text-gray-900">Attune Heart Therapy</span>
-        </div>
+        </Link>
         <Button
           variant="ghost"
           size="icon"
@@ -76,12 +76,12 @@ export default function SideNav() {
       >
         {/* Logo Section */}
         <div className="shrink-0 px-3 pb-4 flex flex-col gap-1 md:block mb-5 pt-16 md:pt-4">
-          <div className="flex items-center gap-2 mb-1 ml-2 md:ml-3">
+          <Link href="/" className="flex items-center gap-2 mb-1 ml-2 md:ml-3">
             <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-linear-to-r from-rose-100 to-pink-100">
               <Heart className="w-5 h-5 text-rose-600" fill="currentColor" />
             </div>
             <span className="text-sm font-semibold text-gray-900">Attune Heart</span>
-          </div>
+          </Link>
         </div>
 
         <hr className="shrink-0 -mt-10 mb-4 mx-3 border-gray-200 md:block hidden" />

app/page.tsx

@@ -3,6 +3,10 @@ import { Footer } from "../components/Footer";
 import { HeroSection } from "@/components/Hero";
 import { About } from "@/components/About";
 import { Services } from "@/components/Services";
+import { Specialties } from "@/components/Specialties";
+import { ClientFocus } from "@/components/ClientFocus";
+import { Finances } from "@/components/Finances";
+import { Location } from "@/components/Location";
 import { ContactSection } from "@/components/ContactSection";
 import { Navbar } from "../components/Navbar";
 
@@ -17,6 +21,14 @@ export default function Home() {
 
       <Services />
 
+      <Specialties />
+
+      <ClientFocus />
+
+      <Finances />
+
+      <Location />
+
       <ContactSection />
 
       <Footer />

components/ClientFocus.tsx

@@ -0,0 +1,179 @@
+'use client';
+
+import { motion } from "framer-motion";
+import { useInView } from "framer-motion";
+import { useRef, useEffect, useState } from "react";
+import { Users, UserCheck, Globe } from "lucide-react";
+
+export function ClientFocus() {
+  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 ages = [
+    "Children (6 to 10)",
+    "Teen",
+    "Adults",
+    "Elders (65+)"
+  ];
+
+  return (
+    <section 
+      id="client-focus"
+      ref={ref} 
+      className="relative py-20 px-4 overflow-hidden"
+    >
+      {/* Background Image */}
+      <div 
+        className="absolute inset-0 z-0"
+        style={{
+          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 && (
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/10 via-pink-50/8 to-orange-50/10" />
+      )}
+      {isDark && (
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/10 via-gray-800/8 to-gray-900/10" />
+      )}
+
+      {/* Subtle animated blobs */}
+      <div className="absolute inset-0 overflow-hidden z-[3]">
+        <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-30 dark:opacity-50"
+          animate={{
+            x: [0, -90, 0],
+            y: [0, 50, 0],
+            scale: [1, 1.2, 1],
+          }}
+          transition={{
+            duration: 20,
+            repeat: Infinity,
+            ease: 'easeInOut',
+          }}
+        />
+        <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-30 dark:opacity-50"
+          animate={{
+            x: [0, 70, 0],
+            y: [0, -60, 0],
+            scale: [1, 1.15, 1],
+          }}
+          transition={{
+            duration: 24,
+            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-4xl md:text-5xl font-bold mb-6 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 }}
+          >
+            Client Focus
+          </motion.h2>
+        </motion.div>
+
+        <div className="grid md:grid-cols-3 gap-6">
+          {/* Age */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="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"
+          >
+            <div className="flex items-center gap-3 mb-4">
+              <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">
+                <Users className="h-6 w-6 text-rose-600 dark:text-rose-400" />
+              </div>
+              <h3 className="text-xl font-semibold text-foreground">Age</h3>
+            </div>
+            <ul className="space-y-2">
+              {ages.map((age, index) => (
+                <motion.li
+                  key={age}
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={isInView ? { opacity: 1, x: 0 } : {}}
+                  transition={{ duration: 0.3, delay: 0.3 + index * 0.05 }}
+                  className="text-muted-foreground"
+                >
+                  {age}
+                </motion.li>
+              ))}
+            </ul>
+          </motion.div>
+
+          {/* Participants */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.5, delay: 0.3 }}
+            className="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"
+          >
+            <div className="flex items-center gap-3 mb-4">
+              <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">
+                <UserCheck className="h-6 w-6 text-rose-600 dark:text-rose-400" />
+              </div>
+              <h3 className="text-xl font-semibold text-foreground">Participants</h3>
+            </div>
+            <p className="text-muted-foreground">Individuals</p>
+          </motion.div>
+
+          {/* Ethnicity */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.5, delay: 0.4 }}
+            className="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"
+          >
+            <div className="flex items-center gap-3 mb-4">
+              <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">
+                <Globe className="h-6 w-6 text-rose-600 dark:text-rose-400" />
+              </div>
+              <h3 className="text-xl font-semibold text-foreground">Ethnicity</h3>
+            </div>
+            <p className="text-muted-foreground">Black and African American</p>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}
+

components/Finances.tsx

@@ -0,0 +1,226 @@
+'use client';
+
+import { motion } from "framer-motion";
+import { useInView } from "framer-motion";
+import { useRef, useEffect, useState } from "react";
+import { CreditCard, DollarSign, Shield } from "lucide-react";
+
+export function Finances() {
+  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 paymentMethods = [
+    "American Express",
+    "Discover",
+    "Mastercard",
+    "Visa"
+  ];
+
+  const insuranceProviders = [
+    "Aetna",
+    "Aetna - Medicare",
+    "Aetna - WebTPA",
+    "All Savers",
+    "Ambetter",
+    "AvMed",
+    "Cigna and Evernorth",
+    "EAP:Cigna",
+    "EAP:UnitedHealthcare/Optum",
+    "Golden Rule",
+    "Harvard Pilgrim/United",
+    "Humana",
+    "Humana - Medicare",
+    "Humana Dual- Medicaid/Medicare",
+    "Medicaid",
+    "Optum",
+    "Oscar Health",
+    "Oxford",
+    "Surest (formerly Bind)",
+    "Tufts Health/Cigna",
+    "UHC/Optum - Medicare",
+    "United Medical Resources (UMR)",
+    "UnitedHealthcare UHC | UBH"
+  ];
+
+  return (
+    <section 
+      id="finances"
+      ref={ref} 
+      className="relative py-20 px-4 overflow-hidden"
+    >
+      {/* Background Image */}
+      <div 
+        className="absolute inset-0 z-0"
+        style={{
+          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 && (
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/10 via-pink-50/8 to-orange-50/10" />
+      )}
+      {isDark && (
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/10 via-gray-800/8 to-gray-900/10" />
+      )}
+
+      {/* Subtle animated blobs */}
+      <div className="absolute inset-0 overflow-hidden z-[3]">
+        <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-30 dark:opacity-50"
+          animate={{
+            x: [0, -90, 0],
+            y: [0, 50, 0],
+            scale: [1, 1.2, 1],
+          }}
+          transition={{
+            duration: 20,
+            repeat: Infinity,
+            ease: 'easeInOut',
+          }}
+        />
+        <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-30 dark:opacity-50"
+          animate={{
+            x: [0, 70, 0],
+            y: [0, -60, 0],
+            scale: [1, 1.15, 1],
+          }}
+          transition={{
+            duration: 24,
+            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-4xl md:text-5xl font-bold mb-6 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 }}
+          >
+            Finances
+          </motion.h2>
+          <motion.p
+            className="text-xl text-muted-foreground max-w-3xl mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.4 }}
+          >
+            Transparent pricing and flexible payment options to support your therapeutic journey
+          </motion.p>
+        </motion.div>
+
+        <div className="grid md:grid-cols-3 gap-6 mb-8">
+          {/* Fees */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.5, delay: 0.2 }}
+            className="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"
+          >
+            <div className="flex items-center gap-3 mb-4">
+              <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">
+                <DollarSign className="h-6 w-6 text-rose-600 dark:text-rose-400" />
+              </div>
+              <h3 className="text-xl font-semibold text-foreground">Fees</h3>
+            </div>
+            <p className="text-2xl font-bold text-foreground mb-2">Individual Sessions</p>
+            <p className="text-3xl font-bold bg-gradient-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent">$175</p>
+          </motion.div>
+
+          {/* Payment Methods */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.5, delay: 0.3 }}
+            className="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"
+          >
+            <div className="flex items-center gap-3 mb-4">
+              <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">
+                <CreditCard className="h-6 w-6 text-rose-600 dark:text-rose-400" />
+              </div>
+              <h3 className="text-xl font-semibold text-foreground">Payment Methods</h3>
+            </div>
+            <div className="space-y-2">
+              {paymentMethods.map((method, index) => (
+                <motion.p
+                  key={method}
+                  className="text-muted-foreground"
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={isInView ? { opacity: 1, x: 0 } : {}}
+                  transition={{ duration: 0.3, delay: 0.4 + index * 0.05 }}
+                >
+                  {method}
+                </motion.p>
+              ))}
+            </div>
+          </motion.div>
+
+          {/* Insurance */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.5, delay: 0.4 }}
+            className="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"
+          >
+            <div className="flex items-center gap-3 mb-4">
+              <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">
+                <Shield className="h-6 w-6 text-rose-600 dark:text-rose-400" />
+              </div>
+              <h3 className="text-xl font-semibold text-foreground">Insurance</h3>
+            </div>
+            <div className="max-h-64 overflow-y-auto space-y-2 pr-2">
+              {insuranceProviders.map((provider, index) => (
+                <motion.p
+                  key={provider}
+                  className="text-sm text-muted-foreground"
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={isInView ? { opacity: 1, x: 0 } : {}}
+                  transition={{ duration: 0.3, delay: 0.5 + index * 0.02 }}
+                >
+                  {provider}
+                </motion.p>
+              ))}
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}
+

components/Hero.tsx

@@ -120,7 +120,7 @@ export function HeroSection() {
               animate={{ opacity: 1, y: 0 }}
               transition={{ duration: 0.8, delay: 0.4 }}
             >
-              Nathalie Mac Guffie, LCSW
+              Nathalie Mac-Guffie, LMHC
             </motion.p>
 
             <motion.p
@@ -155,6 +155,12 @@ export function HeroSection() {
                 size="lg" 
                 variant="outline"
                 className="cursor-pointer hover:scale-105 hover:bg-gray-100 dark:hover:bg-gray-800 hover:border-cyan-300 dark:hover:border-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition-all"
+                onClick={() => {
+                  const servicesSection = document.getElementById('services');
+                  if (servicesSection) {
+                    servicesSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                  }
+                }}
               >
                 Learn More
               </Button>

components/Location.tsx

@@ -0,0 +1,263 @@
+'use client';
+
+import { motion } from "framer-motion";
+import { useInView } from "framer-motion";
+import { useRef, useEffect, useState } from "react";
+import { MapPin, Phone, Building2 } from "lucide-react";
+
+export function Location() {
+  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 cities = [
+    "Hollywood, FL",
+    "Jacksonville, FL",
+    "Miami, FL",
+    "Pensacola, FL"
+  ];
+
+  const counties = [
+    "Broward",
+    "Duval",
+    "Escambia",
+    "Miami-dade"
+  ];
+
+  const zips = [
+    "32256",
+    "32503",
+    "33021",
+    "33145"
+  ];
+
+  const neighborhoods = [
+    "Coral Gate",
+    "Coral Way",
+    "Royal Lakes"
+  ];
+
+  return (
+    <section 
+      id="location"
+      ref={ref} 
+      className="relative py-20 px-4 overflow-hidden"
+    >
+      {/* Background Image */}
+      <div 
+        className="absolute inset-0 z-0"
+        style={{
+          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 && (
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/10 via-pink-50/8 to-orange-50/10" />
+      )}
+      {isDark && (
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/10 via-gray-800/8 to-gray-900/10" />
+      )}
+
+      {/* Subtle animated blobs */}
+      <div className="absolute inset-0 overflow-hidden z-[3]">
+        <motion.div
+          className="absolute top-20 left-20 w-72 h-72 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-20 w-96 h-96 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-4xl md:text-5xl font-bold mb-6 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 }}
+          >
+            Location
+          </motion.h2>
+        </motion.div>
+
+        <div className="grid md:grid-cols-2 gap-6 mb-8">
+          {/* Primary Location */}
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            animate={isInView ? { opacity: 1, x: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="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 transition-all duration-300"
+          >
+            <div className="flex items-center gap-3 mb-4">
+              <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">
+                <MapPin className="h-6 w-6 text-rose-600 dark:text-rose-400" />
+              </div>
+              <h3 className="text-xl font-semibold text-foreground">Primary Location</h3>
+            </div>
+            <p className="text-muted-foreground mb-2">Miami, FL 33145</p>
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Phone className="h-4 w-4" />
+              <span>(954) 807-3027</span>
+            </div>
+          </motion.div>
+
+          {/* Additional Location */}
+          <motion.div
+            initial={{ opacity: 0, x: 50 }}
+            animate={isInView ? { opacity: 1, x: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            className="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 transition-all duration-300"
+          >
+            <div className="flex items-center gap-3 mb-4">
+              <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">
+                <Building2 className="h-6 w-6 text-rose-600 dark:text-rose-400" />
+              </div>
+              <h3 className="text-xl font-semibold text-foreground">Additional Location</h3>
+            </div>
+            <p className="text-muted-foreground mb-2">Hollywood, FL 33021</p>
+            <div className="flex items-center gap-2 text-muted-foreground">
+              <Phone className="h-4 w-4" />
+              <span>(954) 807-3027</span>
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Nearby Areas */}
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.8, delay: 0.4 }}
+          className="bg-card/50 backdrop-blur-sm rounded-2xl p-8 border border-border/50"
+        >
+          <h3 className="text-2xl font-semibold text-foreground mb-6">Nearby Areas</h3>
+          
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {/* Cities */}
+            <div>
+              <h4 className="font-semibold text-foreground mb-3">Cities</h4>
+              <ul className="space-y-2">
+                {cities.map((city, index) => (
+                  <motion.li
+                    key={city}
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={isInView ? { opacity: 1, x: 0 } : {}}
+                    transition={{ duration: 0.3, delay: 0.5 + index * 0.05 }}
+                    className="text-sm text-muted-foreground"
+                  >
+                    {city}
+                  </motion.li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Counties */}
+            <div>
+              <h4 className="font-semibold text-foreground mb-3">Counties</h4>
+              <ul className="space-y-2">
+                {counties.map((county, index) => (
+                  <motion.li
+                    key={county}
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={isInView ? { opacity: 1, x: 0 } : {}}
+                    transition={{ duration: 0.3, delay: 0.6 + index * 0.05 }}
+                    className="text-sm text-muted-foreground"
+                  >
+                    {county}
+                  </motion.li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Zips */}
+            <div>
+              <h4 className="font-semibold text-foreground mb-3">Zips</h4>
+              <ul className="space-y-2">
+                {zips.map((zip, index) => (
+                  <motion.li
+                    key={zip}
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={isInView ? { opacity: 1, x: 0 } : {}}
+                    transition={{ duration: 0.3, delay: 0.7 + index * 0.05 }}
+                    className="text-sm text-muted-foreground"
+                  >
+                    {zip}
+                  </motion.li>
+                ))}
+              </ul>
+            </div>
+
+            {/* Neighborhoods */}
+            <div>
+              <h4 className="font-semibold text-foreground mb-3">Neighborhoods</h4>
+              <ul className="space-y-2">
+                {neighborhoods.map((neighborhood, index) => (
+                  <motion.li
+                    key={neighborhood}
+                    initial={{ opacity: 0, x: -10 }}
+                    animate={isInView ? { opacity: 1, x: 0 } : {}}
+                    transition={{ duration: 0.3, delay: 0.8 + index * 0.05 }}
+                    className="text-sm text-muted-foreground"
+                  >
+                    {neighborhood}
+                  </motion.li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
+

components/Navbar.tsx

@@ -7,6 +7,7 @@ import { ThemeToggle } from "@/components/ThemeToggle";
 import { useEffect, useState } from "react";
 import { LoginDialog } from "@/components/LoginDialog";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 
 export function Navbar() {
   const [isDark, setIsDark] = useState(false);
@@ -52,19 +53,20 @@ export function Navbar() {
     >
       <div className="container mx-auto px-4">
         <div className="flex items-center justify-between h-16">
-          <motion.a
+          <motion.div
-            href="#home"
             className="flex items-center gap-2"
             whileHover={{ scale: 1.05 }}
             whileTap={{ scale: 0.95 }}
           >
-            <div className="bg-linear-to-r from-rose-500 to-pink-600 p-2 rounded-xl">
+            <Link href="/" className="flex items-center gap-2">
-              <Heart className="h-5 w-5 text-white fill-white" />
+              <div className="bg-linear-to-r from-rose-500 to-pink-600 p-2 rounded-xl">
-            </div>
+                <Heart className="h-5 w-5 text-white fill-white" />
-            <span className="font-bold text-lg bg-linear-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent">
+              </div>
-              Attune Heart Therapy
+              <span className="font-bold text-lg bg-linear-to-r from-rose-600 via-pink-600 to-orange-600 bg-clip-text text-transparent">
-            </span>
+                Attune Heart Therapy
-          </motion.a>
+              </span>
+            </Link>
+          </motion.div>
 
           <div className="hidden md:flex items-center gap-6">
             <button

components/Specialties.tsx

@@ -0,0 +1,195 @@
+'use client';
+
+import { motion } from "framer-motion";
+import { useInView } from "framer-motion";
+import { useRef, useEffect, useState } from "react";
+import { Star, Award } from "lucide-react";
+
+export function Specialties() {
+  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 topSpecialties = [
+    "Child or Adolescent",
+    "Coping Skills",
+    "Self Esteem"
+  ];
+
+  const expertise = [
+    "Adoption",
+    "Family Conflict",
+    "Geriatric and Seniors",
+    "Life Transitions",
+    "Parenting",
+    "Peer Relationships",
+    "Perinatal Mental Health",
+    "Trauma and PTSD"
+  ];
+
+  return (
+    <section 
+      id="specialties"
+      ref={ref} 
+      className="relative py-20 px-4 overflow-hidden"
+    >
+      {/* Background Image */}
+      <div 
+        className="absolute inset-0 z-0"
+        style={{
+          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 && (
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-rose-50/10 via-pink-50/8 to-orange-50/10" />
+      )}
+      {isDark && (
+        <div className="absolute inset-0 z-[2] bg-gradient-to-br from-gray-900/10 via-gray-800/8 to-gray-900/10" />
+      )}
+
+      {/* Subtle animated blobs */}
+      <div className="absolute inset-0 overflow-hidden z-[3]">
+        <motion.div
+          className="absolute top-20 left-20 w-72 h-72 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-20 w-96 h-96 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-4xl md:text-5xl font-bold mb-6 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 }}
+          >
+            Specialties and Expertise
+          </motion.h2>
+          <motion.p
+            className="text-xl text-muted-foreground max-w-3xl mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.4 }}
+          >
+            Comprehensive therapeutic support tailored to your unique needs
+          </motion.p>
+        </motion.div>
+
+        <div className="grid md:grid-cols-2 gap-8">
+          {/* Top Specialties */}
+          <motion.div
+            initial={{ opacity: 0, x: -50 }}
+            animate={isInView ? { opacity: 1, x: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="bg-card/50 backdrop-blur-sm rounded-2xl p-8 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 transition-all duration-300"
+          >
+            <div className="flex items-center gap-3 mb-6">
+              <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">
+                <Star className="h-6 w-6 text-rose-600 dark:text-rose-400" />
+              </div>
+              <h3 className="text-2xl font-semibold text-foreground">Top Specialties</h3>
+            </div>
+            <ul className="space-y-4">
+              {topSpecialties.map((specialty, index) => (
+                <motion.li
+                  key={specialty}
+                  initial={{ opacity: 0, x: -20 }}
+                  animate={isInView ? { opacity: 1, x: 0 } : {}}
+                  transition={{ duration: 0.5, delay: 0.4 + index * 0.1 }}
+                  className="flex items-center gap-3 text-lg text-muted-foreground"
+                >
+                  <div className="w-2 h-2 rounded-full bg-gradient-to-r from-rose-500 to-pink-600" />
+                  <span className="text-foreground">{specialty}</span>
+                </motion.li>
+              ))}
+            </ul>
+          </motion.div>
+
+          {/* Expertise */}
+          <motion.div
+            initial={{ opacity: 0, x: 50 }}
+            animate={isInView ? { opacity: 1, x: 0 } : {}}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            className="bg-card/50 backdrop-blur-sm rounded-2xl p-8 border border-border/50 hover:border-rose-500/50 hover:shadow-lg hover:shadow-rose-500/10 transition-all duration-300"
+          >
+            <div className="flex items-center gap-3 mb-6">
+              <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">
+                <Award className="h-6 w-6 text-rose-600 dark:text-rose-400" />
+              </div>
+              <h3 className="text-2xl font-semibold text-foreground">Expertise</h3>
+            </div>
+            <ul className="space-y-4">
+              {expertise.map((item, index) => (
+                <motion.li
+                  key={item}
+                  initial={{ opacity: 0, x: 20 }}
+                  animate={isInView ? { opacity: 1, x: 0 } : {}}
+                  transition={{ duration: 0.5, delay: 0.5 + index * 0.1 }}
+                  className="flex items-center gap-3 text-lg text-muted-foreground"
+                >
+                  <div className="w-2 h-2 rounded-full bg-gradient-to-r from-rose-500 to-pink-600" />
+                  <span className="text-foreground">{item}</span>
+                </motion.li>
+              ))}
+            </ul>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}
+