Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -1,13 +1,13 @@
 "use client";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
 import ProductCardThree from '@/components/sections/product/ProductCardThree';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import { Building2, HandHeart, Heart, Home, Scale, ShieldCheck, Stethoscope, Users } from 'lucide-react';
@@ -35,7 +35,7 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroLogoBillboard 
+        <HeroLogoBillboardSplit 
           logoText='Paw Haven'
           description="Connecting loving homes with pets in need. Every animal deserves a second chance at happiness."
           buttons={[{text: 'Adopt a Pet', href: 'adopt'}, {text: 'Volunteer', href: 'features'}]}
@@ -44,6 +44,7 @@ export default function LandingPage() {
           imageAlt='Happy dog and cat in a shelter environment'
           mediaAnimation='blur-reveal'
           frameStyle='card'
+          layoutOrder='default'
         />
       </div>
 

src/app/styles/variables.css

@@ -2,21 +2,21 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #fbfaff;;
+  /* --background: #000802;;
-  --card: #f7f5ff;;
+  --card: #0b1a0b;;
-  --foreground: #0f0022;;
+  --foreground: #e6ffe6;;
-  --primary-cta: #8b5cf6;;
+  --primary-cta: #80da9b;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #07170b;;
-  --accent: #d8cef5;;
+  --accent: #38714a;;
-  --background-accent: #c4a8f9;; */
+  --background-accent: #2c6541;; */
 
-  --background: #fbfaff;;
+  --background: #000802;;
-  --card: #f7f5ff;;
+  --card: #0b1a0b;;
-  --foreground: #0f0022;;
+  --foreground: #e6ffe6;;
-  --primary-cta: #8b5cf6;;
+  --primary-cta: #80da9b;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #07170b;;
-  --accent: #d8cef5;;
+  --accent: #38714a;;
-  --background-accent: #c4a8f9;;
+  --background-accent: #2c6541;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);