Update src/pages/HomePage.tsx

Merge version_25_1778236015160 into main

src/components/ui/NavbarCentered.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 
+import { Plus, ArrowRight } from "lucide-react";
 import { Plus, ArrowRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
@@ -52,7 +53,7 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
       <nav
         className={cls(
           "fixed z-1000 top-3 left-3 right-3 transition-all duration-500 ease-in-out",
-          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm rounded-lg" : "h-20 bg-background/0 backdrop-blur-0"
+          isScrolled ? "h-15 bg-background/80 backdrop-blur-[2px] rounded-lg" : "h-20 bg-background/0 backdrop-blur-0"
         )}
       >
         <div className="relative mx-auto flex items-center justify-between h-full w-content-width">
@@ -89,11 +90,12 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
         </div>
       </nav>
 
-      {menuOpen && (
       <div
         ref={menuRef}
-            
+        className={cls(
-            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg bg-background/80 backdrop-blur-sm"
+          "md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg bg-background/80 backdrop-blur-[2px] transition-all duration-300 ease-in-out",
+          menuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-4 pointer-events-none"
+        )}
       >
         <div className="flex items-center justify-between mb-6">
           <p className="text-xl text-foreground">Menu</p>
@@ -128,7 +130,6 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
           <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" />
         </div>
       </div>
-        )}
     </>
   );
 };

src/components/ui/NavbarFloating.tsx

@@ -33,7 +33,7 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
     <>
       {menuOpen && (
         <div
-          className="fixed inset-0 z-500 bg-black/20 backdrop-blur-lg"
+          className="fixed inset-0 z-500 bg-black/20 backdrop-blur-md"
           onClick={() => setMenuOpen(false)}
         />
       )}
@@ -41,8 +41,7 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
 
       <nav className="fixed z-1000 top-5 left-1/2 -translate-x-1/2 w-content-width">
         <div className={cls(
-          "mx-auto w-full md:w-1/2 overflow-hidden rounded-theme-capped border border-white/10 bg-white/10 shadow-lg",
+          "mx-auto w-full md:w-1/2 overflow-hidden rounded-theme-capped border border-white/10 bg-white/10 shadow-lg backdrop-blur-lg"
-          menuOpen ? "backdrop-blur-lg" : "backdrop-blur-lg"
         )}>
           <div className="relative z-10 flex items-center justify-between gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5">
             <a href="/" className="text-xl font-medium text-foreground">{logo}</a>

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #fafffb;
+  --background: #0a0a0a;
-  --card: #ffffff;
+  --card: #1a1a1a;
-  --foreground: #001a0a;
+  --foreground: #ffffff;
-  --primary-cta: #0a705f;
+  --primary-cta: #1f7cff;
-  --primary-cta-text: #fafffb;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #010101;
-  --secondary-cta-text: #001a0a;
+  --secondary-cta-text: #ffffff;
-  --accent: #a8d9be;
+  --accent: #1f7cff;
-  --background-accent: #6bbfb8;
+  --background-accent: #f96b2f;
 
   /* @layout/border-radius/rounded */
   --radius: 1.5rem;

src/pages/HomePage.tsx

@@ -98,7 +98,7 @@ export default function HomePage() {
             title: "Consultation",
             subtitle: "Understanding Your Vision",
             description: "We start with a thorough consultation to understand your needs, preferences, and the unique characteristics of your property. This allows us to create a tailored plan that aligns with your goals and budget.",
-            imageSrc: "https://images.unsplash.com/photo-1585345322958-15e8342b6c49?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+            imageSrc: "https://pixabay.com/get/g92afe6add7d6f383b3aeda10ad181a9bc3770191aa613cfb1c6d571e0047d81908c1526b7d801fb1d9e18ab4d20425d8f52dd074e6423a67045f82d1b19172b8_1280.jpg?id=9230049",
           },
           {
             tag: "Step 2",