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

Reviewed-on: http://35.207.46.142/ATTUNE-HEART-THERAPY/website/pulls/18

app/(auth)/login/page.tsx

@@ -21,21 +21,27 @@ export default function Login() {
       {/* Background Image */}
       <div className="absolute inset-0 z-0">
         <Image
-          src="/doctors.png"
-          alt="Medical professionals"
+          src="/section-image.png"
+          alt="Therapy and counseling session with African American clients"
           fill
           className="object-cover object-center"
           priority
           sizes="100vw"
         />
         {/* Overlay for better readability */}
-        <div className="absolute inset-0 bg-black/20"></div>
+        <div className="absolute inset-0 bg-black/50"></div>
       </div>
 
       {/* Branding - Top Left */}
-      <div className="absolute top-8 left-8 flex items-center gap-3 z-30">
-        <Heart className="w-6 h-6 text-white" fill="white" />
-        <span className="text-white text-xl font-semibold">Attune Heart Therapy</span>
+      <div className="absolute top-8 left-8 flex items-center gap-2 z-30">
+        <Link href="/" className="flex items-center gap-2">
+          <div className="bg-gradient-to-r from-rose-500 to-pink-600 p-2 rounded-xl">
+            <Heart className="h-5 w-5 text-white fill-white" />
+          </div>
+          <span className={`font-bold text-lg drop-shadow-lg ${isDark ? 'text-rose-400' : 'text-rose-500'}`}>
+            Attune Heart Therapy
+          </span>
+        </Link>
       </div>
 
 

app/(pages)/book-now/page.tsx

@@ -219,8 +219,8 @@ export default function BookNowPage() {
         <div className={`hidden lg:block fixed top-0 left-0 h-screen w-1/2 overflow-hidden z-10 bg-gradient-to-br ${isDark ? 'from-gray-900 via-gray-800 to-gray-900' : 'from-rose-100 via-pink-50 to-orange-50'}`}>
           <div className="absolute inset-0">
             <Image
-              src="/doctors.png"
-              alt="Therapy session"
+              src="/section-image.png"
+              alt="Therapy session with diverse clients"
               fill
               className="object-cover"
               priority

components/ClientFocus.tsx

@@ -143,7 +143,7 @@ export function ClientFocus() {
             <p className="text-muted-foreground">Individuals</p>
           </motion.div>
 
-          {/* Ethnicity */}
+          {/* Communities */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={isInView ? { opacity: 1, y: 0 } : {}}
@@ -154,9 +154,51 @@ export function ClientFocus() {
               <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>
+              <h3 className="text-xl font-semibold text-foreground">Client Focus</h3>
+            </div>
+            <div className="space-y-3">
+              <div className="flex flex-wrap gap-3 justify-center items-center">
+                {[
+                  { flag: '🇭🇹', name: 'Haitian', type: 'emoji' },
+                  { flag: '🇯🇲', name: 'Jamaican', type: 'emoji' },
+                  { flag: '🇧🇸', name: 'Bahamian', type: 'emoji' },
+                  { flag: 'pan-african', name: 'Pan-African', type: 'css' },
+                  { flag: '🇮🇱', name: 'Israeli', type: 'emoji' },
+                  { flag: '🇻🇪', name: 'Venezuelan', type: 'emoji' },
+                  { flag: 'pride', name: 'LGBTQ+', type: 'css' },
+                ].map((community, index) => (
+                  <motion.div
+                    key={community.name}
+                    initial={{ opacity: 0, scale: 0.8 }}
+                    animate={isInView ? { opacity: 1, scale: 1 } : {}}
+                    transition={{ duration: 0.3, delay: 0.5 + index * 0.05 }}
+                    className="p-2 rounded-lg hover:bg-rose-50 dark:hover:bg-rose-900/20 transition-colors"
+                    title={community.name}
+                  >
+                    {community.type === 'emoji' ? (
+                      <span className="text-2xl sm:text-3xl" role="img" aria-label={community.name}>
+                        {community.flag}
+                      </span>
+                    ) : community.flag === 'pan-african' ? (
+                      <div className="w-8 h-6 sm:w-10 sm:h-7 rounded border border-gray-300 dark:border-gray-600 overflow-hidden flex flex-col">
+                        <div className="h-1/3 bg-red-600"></div>
+                        <div className="h-1/3 bg-black"></div>
+                        <div className="h-1/3 bg-green-600"></div>
+                      </div>
+                    ) : community.flag === 'pride' ? (
+                      <div className="w-8 h-6 sm:w-10 sm:h-7 rounded border border-gray-300 dark:border-gray-600 overflow-hidden flex flex-col">
+                        <div className="h-1/6 bg-red-500"></div>
+                        <div className="h-1/6 bg-orange-500"></div>
+                        <div className="h-1/6 bg-yellow-400"></div>
+                        <div className="h-1/6 bg-green-500"></div>
+                        <div className="h-1/6 bg-blue-500"></div>
+                        <div className="h-1/6 bg-purple-600"></div>
+                      </div>
+                    ) : null}
+                  </motion.div>
+                ))}
+              </div>
             </div>
-            <p className="text-muted-foreground">Black and African American</p>
           </motion.div>
         </div>
       </div>

components/Finances.tsx

@@ -3,7 +3,7 @@
 import { motion } from "framer-motion";
 import { useInView } from "framer-motion";
 import { useRef } from "react";
-import { CreditCard, DollarSign, Shield } from "lucide-react";
+import { CreditCard, DollarSign } from "lucide-react";
 import { useAppTheme } from "@/components/ThemeProvider";
 
 export function Finances() {
@@ -19,31 +19,6 @@ export function Finances() {
     "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 
@@ -132,7 +107,7 @@ export function Finances() {
           </motion.p>
         </motion.div>
 
-        <div className="grid md:grid-cols-3 gap-6 mb-8">
+        <div className="grid md:grid-cols-2 gap-6 mb-8">
           {/* Fees */}
           <motion.div
             initial={{ opacity: 0, y: 20 }}
@@ -178,33 +153,6 @@ export function Finances() {
             </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

@@ -29,7 +29,7 @@ export function HeroSection() {
       <div 
         className="absolute inset-0 z-[1]" 
         style={{
-          backgroundColor: isDark ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.25)'
+          backgroundColor: isDark ? 'rgba(0, 0, 0, 0.65)' : 'rgba(0, 0, 0, 0.55)'
         }}
       />
       

components/Services.tsx

@@ -220,8 +220,8 @@ export function Services() {
               animate={isInView ? { opacity: 1 } : {}}
               transition={{ duration: 0.8, delay: 0.9 }}
             >
-              Therapy is tailored for children (age 6–10), teens, adults, and older adults, with services offered to individuals and a 
-              special focus on supporting Black and African American families in Miami and Hollywood, Florida.
+              Therapy is tailored for children (age 6–10), teens, adults, and older adults, with services offered to individuals. 
+              I welcome clients from diverse backgrounds and communities throughout Miami and Hollywood, Florida.
             </motion.p>
           </div>
         </motion.div>