Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -6,9 +6,9 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import HeroLogo from '@/components/sections/hero/HeroLogo';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import { Heart } from "lucide-react";
@@ -29,7 +29,7 @@ export default function LandingPage() {
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-          <NavbarStyleCentered
+          <NavbarLayoutFloatingOverlay
             navItems={[
               { name: "Home", id: "hero" },
               { name: "About", id: "about" },
@@ -42,13 +42,11 @@ export default function LandingPage() {
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroLogoBillboard
+          <HeroLogo
             logoText="BloodBridge"
-            description="Connecting volunteer donors with hospitals instantly. Join the bridge that saves lives every single day."
+            description="Connecting volunteer donors with hospitals instantly. We integrate real-time supply and demand data to ensure that every donation finds its life-saving match exactly when it's needed most."
             buttons={[{ text: "Start Donating", href: "#contact" }, { text: "Learn More", href: "#about" }]}
-            background={{ variant: "sparkles-gradient" }}
             imageSrc="http://img.b2bpic.net/free-photo/3d-character-emerging-from-smartphone_23-2151336497.jpg"
-            mediaAnimation="slide-up"
           />
         </div>
 
@@ -61,7 +59,8 @@ export default function LandingPage() {
             icon={Heart}
             imageSrc="http://img.b2bpic.net/free-photo/team-doctors-standing-row_107420-84773.jpg"
             mediaAnimation="blur-reveal"
-            useInvertedBackground={false}
+            useInvertedBackground={true}
+            className="bg-zinc-950 text-white"
           />
         </div>
 
@@ -77,6 +76,7 @@ export default function LandingPage() {
             title="Our Collective Impact"
             description="Building a robust network of volunteers to meet critical medical demands."
             useInvertedBackground={true}
+            className="bg-zinc-950 text-white"
           />
         </div>
 
@@ -101,6 +101,7 @@ export default function LandingPage() {
             description="Three simple steps to make your contribution count."
             textboxLayout="inline-image"
             useInvertedBackground={true}
+            className="bg-zinc-950 text-white"
           />
         </div>
 
@@ -115,7 +116,8 @@ export default function LandingPage() {
               { id: "t1", name: "Sarah M.", handle: "@sarahdonate", testimonial: "The app made it incredibly easy to schedule my donation. I feel proud to be part of this community.", rating: 5 },
               { id: "t2", name: "James T.", handle: "@jdonations", testimonial: "Immediate notification saved me hours. Highly recommend to anyone wanting to contribute.", rating: 5 },
             ]}
-            useInvertedBackground={false}
+            useInvertedBackground={true}
+            className="bg-zinc-950 text-white"
           />
         </div>
 
@@ -130,6 +132,7 @@ export default function LandingPage() {
             sideDescription="Common queries addressed for our donors."
             faqsAnimation="slide-up"
             useInvertedBackground={true}
+            className="bg-zinc-950 text-white"
           />
         </div>
 
@@ -140,7 +143,8 @@ export default function LandingPage() {
             description="Join the largest volunteer network today."
             buttons={[{ text: "Register Now", href: "#" }]}
             background={{ variant: "sparkles-gradient" }}
-            useInvertedBackground={false}
+            useInvertedBackground={true}
+            className="bg-zinc-950 text-white"
           />
         </div>
 

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #09090b;
-  --card: #1a1a1a;
+  --card: #18181b;
-  --foreground: #fff5f5e6;
+  --foreground: #f4f4f5;
-  --primary-cta: #ff7a7a;
+  --primary-cta: #be123c;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #450a0a;
   --secondary-cta-text: #fff5f5e6;
-  --accent: #737373;
+  --accent: #e11d48;
-  --background-accent: #737373;
+  --background-accent: #1f0309;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);