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="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg card"
+        className={cls(
+          "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

@@ -31,17 +31,18 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
 
   return (
     <>
-      
       {menuOpen && (
         <div
-            className="fixed inset-0 z-999 bg-foreground"
+          className="fixed inset-0 z-500 bg-black/20 backdrop-blur-md"
           onClick={() => setMenuOpen(false)}
         />
       )}
       
 
       <nav className="fixed z-1000 top-5 left-1/2 -translate-x-1/2 w-content-width">
-        <div className="mx-auto w-full md:w-1/2 overflow-hidden rounded-theme-capped border border-white/10 bg-white/10 backdrop-blur-lg shadow-lg">
+        <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 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;
-  --card: #ffffff;
-  --foreground: #001a0a;
-  --primary-cta: #0a705f;
-  --primary-cta-text: #fafffb;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #001a0a;
-  --accent: #a8d9be;
-  --background-accent: #6bbfb8;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #ffffff;
+  --primary-cta: #1f7cff;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #010101;
+  --secondary-cta-text: #ffffff;
+  --accent: #1f7cff;
+  --background-accent: #f96b2f;
 
   /* @layout/border-radius/rounded */
   --radius: 1.5rem;

src/pages/HomePage.tsx

@@ -2,8 +2,8 @@ import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
 import ContactCta from '@/components/sections/contact/ContactCta';
 import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
 import HeroOverlay from '@/components/sections/hero/HeroOverlay';
-import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
-import ProductMediaCards from '@/components/sections/product/ProductMediaCards';
+import MetricsGradientCards from '@/components/sections/metrics/MetricsGradientCards';
+import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
 import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
 import { Leaf, ShieldCheck, Sparkles } from "lucide-react";
 
@@ -13,7 +13,7 @@ export default function HomePage() {
   <div id="hero" data-section="hero">
       <HeroOverlay
       tag="Your Outdoor Oasis Awaits"
-      title="Transforming Landscapes, Enhancing Lives"
+      title="Redefining Landscapes, Enhancing Lives"
       description="From lush gardens to perfectly manicured lawns, we craft stunning outdoor spaces tailored to your vision. Experience nature's beauty with expert care."
       primaryButton={{
         text: "Our Services",
@@ -49,7 +49,7 @@ export default function HomePage() {
           description: "We use only premium materials and eco-friendly practices to ensure lasting beauty and environmental responsibility.",
         },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/people-making-notes-about-flower_23-2147768470.jpg"
+      imageSrc="https://pixabay.com/get/g4fd875caee0818c883cfd796b43d19cc5aa317fcbcc705d5213185bda563c6d98622aa0f965cd4df11783705e252c77f7bcf1f949eb8b116321445884163e6f7_1280.jpg?id=6577149"
       primaryButton={{
         text: "Learn More",
         href: "#",
@@ -88,77 +88,63 @@ export default function HomePage() {
   </div>
 
   <div id="portfolio" data-section="portfolio">
-      <ProductMediaCards
-      tag="Our Portfolio"
-      title="Inspired Outdoor Creations"
-      description="Explore a gallery of our completed projects, showcasing diverse styles and innovative designs. See the quality and artistry we bring to every landscape."
-      products={[
+      <FeaturesDetailedSteps
+        tag="Our Process"
+        title="From Vision to Reality"
+        description="Our systematic approach ensures every project is a seamless and rewarding experience for our clients. We handle every detail with precision and care."
+        steps={[
           {
-          name: "Backyard Oasis",
-          price: "Luxury Residential",
-          imageSrc: "http://img.b2bpic.net/free-photo/suburban-housing_53876-14307.jpg",
+            tag: "Step 1",
+            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://pixabay.com/get/g6eb973f7cd05906bc2621830e50b2d57806471945669fcd710c139c12f74b2c6ab1ec1881f11e73276203d0658440cb7c2c2d34258d5efd4665f3b9e79118db3_1280.jpg?id=9464875",
           },
           {
-          name: "Modern Frontage",
-          price: "Curb Appeal Boost",
-          imageSrc: "http://img.b2bpic.net/free-photo/plants-pot-with-watering-can_23-2148905227.jpg",
+            tag: "Step 2",
+            title: "Design",
+            subtitle: "Crafting the Blueprint",
+            description: "Our design team creates a detailed landscape plan, incorporating your ideas into a beautiful and functional design. We use 3D renderings to help you visualize the final outcome before we break ground.",
+            imageSrc: "http://img.b2bpic.net/free-photo/greenhouse-with-flowers_1398-4315.jpg",
           },
           {
-          name: "Urban Rooftop Garden",
-          price: "Cityscape Green",
-          imageSrc: "http://img.b2bpic.net/free-photo/artists-garden-filled-with-variety-plants-beautiful-flowers_1258-296326.jpg",
+            tag: "Step 3",
+            title: "Installation",
+            subtitle: "Bringing the Design to Life",
+            description: "Our skilled professionals execute the plan with meticulous attention to detail. We use high-quality materials and proven techniques to ensure a flawless installation that stands the test of time.",
+            imageSrc: "http://img.b2bpic.net/free-photo/gardener-woman-holding-flower-pot_1157-25532.jpg",
           },
           {
-          name: "Tranquil Water Feature",
-          price: "Natural & Serene",
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-gardening-concept_23-2148127956.jpg",
-        },
-        {
-          name: "Commercial Grounds",
-          price: "Business Park",
-          imageSrc: "http://img.b2bpic.net/free-photo/city-square_1359-1040.jpg",
-        },
-        {
-          name: "Custom Pergola & Patio",
-          price: "Outdoor Living",
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-pavilion-garden_1339-3182.jpg",
+            tag: "Step 4",
+            title: "Maintenance",
+            subtitle: "Ensuring Lasting Beauty",
+            description: "We offer comprehensive maintenance services to keep your new landscape looking its best. From seasonal care to ongoing upkeep, we ensure your outdoor space continues to thrive and bring you joy.",
+            imageSrc: "http://img.b2bpic.net/free-photo/gardener-checking-his-plants_23-2147656308.jpg",
           },
         ]}
       />
     </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricsFeatureCards
+      <MetricsGradientCards
       tag="Our Impact"
       title="Proven Excellence in Landscaping"
       description="Our commitment to quality and customer satisfaction is reflected in our achievements and long-lasting client relationships."
       metrics={[
         {
           value: "15+",
-          title: "Years of Experience",
-          features: [
-            "Local industry leaders",
-            "Skilled & certified team",
-            "Reliable service delivery",
-          ],
+          label: "Years of Experience",
+          description: "Local industry leaders, skilled & certified team, reliable service delivery.",
         },
         {
           value: "500+",
-          title: "Projects Completed",
-          features: [
-            "Residential & commercial",
-            "Diverse design styles",
-            "On-time & on-budget",
-          ],
+          label: "Projects Completed",
+          description: "Residential & commercial, diverse design styles, on-time & on-budget.",
         },
         {
           value: "98%",
-          title: "Customer Satisfaction",
-          features: [
-            "Glowing testimonials",
-            "Repeat clientele",
-            "Dedicated support",
-          ],
+          label: "Customer Satisfaction",
+          description: "Glowing testimonials, repeat clientele, and dedicated support.",
         },
       ]}
     />