feat: update consultation section image

Merge version_17_1778231348086 into main

src/components/custom/AnimatedBackground.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const AnimatedBackground = () => {
+  return (
+    <div className="absolute inset-0 z-0 overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-br from-background-light via-background to-background-dark" />
+      <div className="absolute inset-0 animate-pulse-slow">
+        <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/10 rounded-full filter blur-3xl opacity-50" />
+        <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-secondary/10 rounded-full filter blur-3xl opacity-50" />
+      </div>
+    </div>
+  );
+};
+
+export default AnimatedBackground;

src/components/custom/TestimonialCard.css

@@ -0,0 +1,11 @@
+.testimonial-card {
+  transition: opacity 0.5s ease-in-out;
+}
+
+.fade-in {
+  opacity: 1;
+}
+
+.fade-out {
+  opacity: 0;
+}

src/components/custom/TestimonialCard.tsx

@@ -0,0 +1,52 @@
+import { useState, useEffect } from 'react';
+import './TestimonialCard.css';
+
+const testimonials = [
+  {
+    quote: "Their team transformed our yard into a paradise. So professional and creative!",
+    author: "Alex & Jamie R.",
+    avatar: "https://randomuser.me/api/portraits/women/44.jpg",
+  },
+  {
+    quote: "Incredible attention to detail. Our garden has never looked better. Highly recommend!",
+    author: "Casey L.",
+    avatar: "https://randomuser.me/api/portraits/men/32.jpg",
+  },
+  {
+    quote: "The best landscaping service in town. They exceeded all our expectations.",
+    author: "Jordan P.",
+    avatar: "https://randomuser.me/api/portraits/women/65.jpg",
+  },
+];
+
+const TestimonialCard = () => {
+  const [index, setIndex] = useState(0);
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setVisible(false);
+      setTimeout(() => {
+        setIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
+        setVisible(true);
+      }, 500); // CSS transition duration
+    }, 3000);
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="z-20">
+      <div className={`testimonial-card ${visible ? 'fade-in' : 'fade-out'}`}>
+        <div className="bg-white/80 backdrop-blur-sm rounded-lg p-4 max-w-sm shadow-lg">
+          <p className="text-gray-800 italic">"{testimonials[index].quote}"</p>
+          <div className="flex items-center mt-3">
+            <img src={testimonials[index].avatar} alt={testimonials[index].author} className="w-10 h-10 rounded-full mr-3" />
+            <p className="text-gray-900 font-semibold">{testimonials[index].author}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default TestimonialCard;

src/components/sections/about/AboutFeaturesSplit.tsx

@@ -1,3 +1,4 @@
+import AnimatedBackground from "@/components/custom/AnimatedBackground";
 import type { LucideIcon } from "lucide-react";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
@@ -24,7 +25,8 @@ const AboutFeaturesSplit = ({
   videoSrc,
 }: AboutFeaturesSplitProps) => {
   return (
-    <section aria-label="About section" className="py-20">
+    <section aria-label="About section" className="py-20 relative">
+      <AnimatedBackground />
       <div className="flex flex-col gap-8 mx-auto w-content-width">
         <div className="flex flex-col items-center gap-2">
           <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
@@ -54,7 +56,7 @@ const AboutFeaturesSplit = ({
         </div>
 
         <div className="flex flex-col md:flex-row md:items-stretch gap-5">
-          <div className="flex flex-col justify-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 w-full md:w-4/10 2xl:w-3/10 card rounded">
+          <div className="flex flex-col justify-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 w-full md:w-4/10 2xl:w-3/10 card rounded bg-transparent backdrop-blur-lg border border-white/20">
             {items.map((item, index) => {
               const ItemIcon = resolveIcon(item.icon);
               return (
@@ -74,7 +76,7 @@ const AboutFeaturesSplit = ({
             })}
           </div>
 
-          <div className="p-3 xl:p-4 2xl:p-5 w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden">
+          <div className="p-3 xl:p-4 2xl:p-5 w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden bg-transparent">
             <div className="relative size-full">
               <ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="absolute inset-0 object-cover rounded" />
             </div>

src/components/sections/contact/ContactCta.tsx

@@ -16,7 +16,11 @@ const ContactCta = ({
   return (
     <section aria-label="Contact section" className="py-20">
       <div className="w-content-width mx-auto">
-        <ScrollReveal variant="slide-up" className="flex items-center justify-center py-20 px-5 md:px-10 card rounded">
+        <ScrollReveal variant="slide-up" className="relative overflow-hidden flex items-center justify-center py-20 px-5 md:px-10 card rounded">
+          <div
+            className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] -z-10 bg-[radial-gradient(closest-side,theme(colors.background/0.5),transparent)]"
+            aria-hidden="true"
+          />
           <div className="w-full md:w-3/4 flex flex-col items-center gap-3">
             <span className="card rounded px-3 py-1 text-sm">{tag}</span>
 

src/components/sections/hero/HeroBillboardTiltedCarousel.tsx

@@ -2,6 +2,7 @@ import Button from "@/components/ui/Button";
 import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
 import TiltedCarousel from "@/components/ui/TiltedCarousel";
+import { Star } from "lucide-react";
 
 type HeroBillboardTiltedCarouselProps = {
   tag: string;
@@ -27,8 +28,6 @@ const HeroBillboardTiltedCarousel = ({
     >
       <HeroBackgroundSlot />
       <div className="flex flex-col items-center gap-2 w-content-width mx-auto text-center">
-        <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
-
         <TextAnimation
           text={title}
           variant="fade-blur"
@@ -37,6 +36,22 @@ const HeroBillboardTiltedCarousel = ({
           className="text-6xl font-medium text-balance"
         />
 
+        <div className="flex flex-col items-center gap-2">
+          <div className="flex items-center gap-1">
+            {[...Array(5)].map((_, i) => (
+              <Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
+            ))}
+          </div>
+          <div className="flex -space-x-2">
+            <img className="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
+            <img className="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1550525811-e58691053ba4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
+            <img className="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
+            <img className="inline-block h-8 w-8 rounded-full ring-2 ring-white" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
+          </div>
+        </div>
+
+        <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
+
         <TextAnimation
           text={description}
           variant="fade-blur"
@@ -49,6 +64,8 @@ const HeroBillboardTiltedCarousel = ({
           <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>
           <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
         </div>
+
+
       </div>
 
       <TiltedCarousel items={items} />

src/components/sections/hero/HeroOverlay.tsx

@@ -1,6 +1,7 @@
 import Button from "@/components/ui/Button";
 import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
 import TextAnimation from "@/components/ui/TextAnimation";
+import TestimonialCard from "@/components/custom/TestimonialCard";
 import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import AvatarGroup from "@/components/ui/AvatarGroup";
 
@@ -42,7 +43,8 @@ const HeroOverlay = ({
         aria-hidden="true"
       />
 
-      <div className="relative z-10 w-content-width mx-auto pb-10 md:pb-25">
+      <div className="relative z-10 w-content-width mx-auto pb-20 md:pb-20">
+        <div className="flex flex-col md:flex-row justify-between items-end gap-3 w-full">
           <div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10">
             <span className="w-fit px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
 
@@ -64,15 +66,29 @@ const HeroOverlay = ({
 
             <div className="flex flex-wrap gap-3 mt-3">
               <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />
-            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />
+              <Button
+                text={secondaryButton.text}
+                href={secondaryButton.href}
+                variant="secondary"
+                animationDelay={0.1}
+              />
             </div>
 
             {avatars && avatars.length > 0 && (
               <div className="mt-4">
-              <AvatarGroup avatars={avatars} size="lg" label={avatarsLabel} labelClassName="text-primary-cta-text" />
+                <AvatarGroup
+                  avatars={avatars}
+                  size="lg"
+                  label={avatarsLabel}
+                  labelClassName="text-primary-cta-text"
+                />
               </div>
             )}
           </div>
+          <div className="w-full md:w-auto">
+            <TestimonialCard />
+          </div>
+        </div>
       </div>
     </section>
   );

src/components/ui/NavbarCentered.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "motion/react";
+
 import { Plus, ArrowRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
@@ -51,8 +51,8 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
     <>
       <nav
         className={cls(
-          "fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
-          isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
+          "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"
         )}
       >
         <div className="relative mx-auto flex items-center justify-between h-full w-content-width">
@@ -89,15 +89,11 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
         </div>
       </nav>
 
-      <AnimatePresence>
       {menuOpen && (
-          <motion.div
+          <div
             ref={menuRef}
-            initial={{ y: "-135%" }}
-            animate={{ y: 0 }}
-            exit={{ y: "-135%" }}
-            transition={{ type: "spring", damping: 26, stiffness: 170 }}
-            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded card"
+            
+            className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 rounded-lg card"
           >
             <div className="flex items-center justify-between mb-6">
               <p className="text-xl text-foreground">Menu</p>
@@ -131,9 +127,8 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
             <div className="mt-6">
               <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" />
             </div>
-          </motion.div>
+          </div>
         )}
-      </AnimatePresence>
     </>
   );
 };

src/components/ui/NavbarFloating.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect } from "react";
-import { motion, AnimatePresence } from "motion/react";
 import { Plus, ArrowUpRight } from "lucide-react";
 import { cls } from "@/lib/utils";
 import Button from "@/components/ui/Button";
@@ -32,21 +31,17 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
 
   return (
     <>
-      <AnimatePresence>
+      
         {menuOpen && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 0.15 }}
-            exit={{ opacity: 0 }}
-            transition={{ duration: 0.4 }}
+          <div
             className="fixed inset-0 z-999 bg-foreground"
             onClick={() => setMenuOpen(false)}
           />
         )}
-      </AnimatePresence>
+      
 
       <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 backdrop-blur-sm card">
+        <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="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>
 
@@ -66,15 +61,9 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
             </button>
           </div>
 
-          <AnimatePresence>
+          
             {menuOpen && (
-              <motion.div
-                initial={{ height: 0 }}
-                animate={{ height: "auto" }}
-                exit={{ height: 0 }}
-                transition={{ duration: 0.5, ease: [0.625, 0.05, 0, 1] }}
-                className="overflow-hidden"
-              >
+              <div className="overflow-hidden">
                 <div className="flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 pt-0 xl:pt-0 2xl:pt-0">
                   <div className="px-3 xl:px-4 2xl:px-5 py-0 md:py-1 2xl:py-2 rounded card">
                     {navItems.map((item, index) => (
@@ -101,9 +90,9 @@ const NavbarFloating = ({ logo, navItems, ctaButton }: NavbarFloatingProps) => {
 
                   <Button text={ctaButton.text} href={ctaButton.href} variant="primary" animate={false} className="w-full" />
                 </div>
-              </motion.div>
+              </div>
             )}
-          </AnimatePresence>
+          
         </div>
       </nav>
     </>

src/index.css

@@ -16,7 +16,7 @@
   --background-accent: #6bbfb8;
 
   /* @layout/border-radius/rounded */
-  --radius: 1rem;
+  --radius: 1.5rem;
 
   /* @layout/content-width/medium */
   --width-content-width: clamp(40rem, 72.5vw, 100rem);

src/pages/HomePage.tsx

@@ -1,9 +1,9 @@
 import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
 import ContactCta from '@/components/sections/contact/ContactCta';
 import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
-import HeroBillboardTiltedCarousel from '@/components/sections/hero/HeroBillboardTiltedCarousel';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
 import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
-import ProductMediaCards from '@/components/sections/product/ProductMediaCards';
+import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
 import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
 import { Leaf, ShieldCheck, Sparkles } from "lucide-react";
 
@@ -11,7 +11,7 @@ export default function HomePage() {
   return (
     <>
   <div id="hero" data-section="hero">
-      <HeroBillboardTiltedCarousel
+      <HeroOverlay
       tag="Your Outdoor Oasis Awaits"
       title="Transforming 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."
@@ -23,26 +23,7 @@ export default function HomePage() {
         text: "View Portfolio",
         href: "#portfolio",
       }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/pool-hammocks_1203-141.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/suburban-housing-garden_53876-30332.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/view-automatic-smart-feeder-household-pets_23-2151482454.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-working-her-sustainable-greenhouse_23-2149072117.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/seedlings-gardening-tools_23-2147714872.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-stone-pot-pedestal-park_181624-14166.jpg",
-        },
-      ]}
+      imageSrc="http://img.b2bpic.net/free-photo/pool-hammocks_1203-141.jpg"
     />
   </div>
 
@@ -69,6 +50,10 @@ export default function HomePage() {
         },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/people-making-notes-about-flower_23-2147768470.jpg"
+      primaryButton={{
+        text: "Learn More",
+        href: "#",
+      }}
     />
   </div>
 
@@ -103,40 +88,38 @@ 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://images.unsplash.com/photo-1585345322958-15e8342b6c49?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
           },
           {
-          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",
           },
         ]}
       />

src/styles/animations.css

@@ -212,3 +212,18 @@
   77% { opacity: 0.05; }
   88% { opacity: 0; }
 }
+
+@keyframes pulse-slow {
+  0%, 100% {
+    transform: scale(1);
+    opacity: 0.5;
+  }
+  50% {
+    transform: scale(1.1);
+    opacity: 0.7;
+  }
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 8s infinite ease-in-out;
+}