feat: replace hero section with overlay style

Merge version_6_1778225178203 into main

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/pages/HomePage.tsx

@@ -1,7 +1,7 @@
 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 TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
@@ -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>