Bob AI: Replaced hero section with custom JSX to show 3 floating ico

Merge version_6_1780570949438 into main

src/components/sections/HomePage/sections/HeroNew.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import { Leaf, Sun, Cloud } from "lucide-react";
+
+export default function HeroNewSection() {
+  return (
+    <section
+      id="home"
+      data-webild-section="HeroNewSection"
+      className="relative flex flex-col items-center justify-center min-h-svh bg-background overflow-hidden"
+    >
+      {/* Decorative blur orb */}
+      <div className="absolute -z-10 w-96 h-96 rounded-full bg-primary-cta/20 blur-3xl top-1/4 left-1/4 animate-pulse" />
+      <div className="absolute -z-10 w-80 h-80 rounded-full bg-accent/20 blur-3xl bottom-1/4 right-1/4 animate-pulse" style={{ animationDelay: "500ms" }} />
+
+      <div className="relative z-10 max-w-content-width mx-auto px-6 flex flex-col items-center text-center gap-8">
+        <div className="flex flex-col items-center gap-4">
+          <TextAnimation
+            text="Transform Your Outdoor Space"
+            variant="slide-up"
+            gradientText={true}
+            tag="h1"
+            className="text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight leading-tight"
+          />
+          <TextAnimation
+            text="GreenScape Landscaping brings your vision to life with expert design, installation, and maintenance services."
+            variant="slide-up"
+            gradientText={false}
+            tag="p"
+            className="text-lg md:text-xl text-muted-foreground max-w-content-width"
+          />
+        </div>
+
+        <div className="flex flex-wrap justify-center gap-4 mt-4">
+          <Button
+            text="Explore Services"
+            href="#services"
+            variant="primary"
+            animate={true}
+            animationDelay={0.3}
+          />
+          <Button
+            text="Get a Free Quote"
+            href="#contact"
+            variant="secondary"
+            animate={true}
+            animationDelay={0.4}
+          />
+        </div>
+
+        <div className="relative w-full max-w-content-width aspect-video rounded-xl overflow-hidden shadow-lg border border-border/50 animation-container mt-8">
+          <ImageOrVideo
+            imageSrc="https://picsum.photos/seed/1431317374/1200/800"
+            className="object-cover w-full h-full"
+          />
+        </div>
+
+        {/* Floating Cards */}
+        <div className="absolute inset-0 pointer-events-none overflow-hidden z-20">
+          <div
+            className="absolute top-[20%] left-[5%] md:left-[15%] p-4 card rounded-lg shadow-xl border border-border/50 backdrop-blur-md bg-card/80 pointer-events-auto hover:-translate-y-2 transition-transform duration-300 animate-float"
+          >
+            <Leaf className="size-8 text-accent" />
+          </div>
+
+          <div
+            className="absolute top-[40%] right-[5%] md:right-[15%] p-4 card rounded-lg shadow-xl border border-border/50 backdrop-blur-md bg-card/80 pointer-events-auto hover:-translate-y-2 transition-transform duration-300 animate-float"
+            style={{ animationDelay: "1s" }}
+          >
+            <Sun className="size-8 text-yellow-500" />
+          </div>
+
+          <div
+            className="absolute bottom-[20%] left-[15%] md:left-[25%] p-4 card rounded-lg shadow-xl border border-border/50 backdrop-blur-md bg-card/80 pointer-events-auto hover:-translate-y-2 transition-transform duration-300 animate-float"
+            style={{ animationDelay: "2s" }}
+          >
+            <Cloud className="size-8 text-blue-400" />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/pages/HomePage.tsx

@@ -1,8 +1,5 @@
-// AUTO-GENERATED shell by per-section-migrate.
-// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
-// files directly; this shell only fixes render order.
-
 import React from 'react';
+import HeroNewSection from './HomePage/sections/HeroNew';
 import AboutSection from './HomePage/sections/About';
 import ServicesSection from './HomePage/sections/Services';
 import PortfolioSection from './HomePage/sections/Portfolio';
@@ -11,10 +8,10 @@ import TestimonialsSection from './HomePage/sections/Testimonials';
 import FaqSection from './HomePage/sections/Faq';
 import ContactSection from './HomePage/sections/Contact';
 
-
-import HeroSection from './HomePage/sections/Hero';export default function HomePage(): React.JSX.Element {
+export default function HomePage(): React.JSX.Element {
   return (
     <>
+      <HeroNewSection />
       <AboutSection />
       <ServicesSection />
       <PortfolioSection />
@@ -22,7 +19,6 @@ import HeroSection from './HomePage/sections/Hero';export default function HomeP
       <TestimonialsSection />
       <FaqSection />
       <ContactSection />
-          <HeroSection />
     </>
   );
-}
+}

src/pages/HomePage/sections/Hero.tsx

@@ -1,19 +0,0 @@
-// Created by add_section_from_catalog (HeroBillboard).
-
-import React from 'react';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
-
-export default function HeroSection(): React.JSX.Element {
-  return (
-    <div data-webild-section="hero" id="hero">
-      <HeroBillboard
-        secondaryButton={{"href":"#contact","text":"Get a Free Quote"}}
-        tag="Your Outdoor Oasis Awaits"
-        imageSrc="http://img.b2bpic.net/free-photo/relaxation-space-garden-with-beds_1232-3472.jpg"
-        primaryButton={{"href":"#services","text":"Explore Services"}}
-        description="At GreenScape Landscaping, we bring your vision to life. From lush gardens to functional outdoor living spaces, our team delivers unparalleled design, installation, and maintenance services."
-        title="Transform Your Landscape with Expertise and Care"
-      />
-    </div>
-  );
-}

src/pages/HomePage/sections/HeroNew.tsx

@@ -0,0 +1,68 @@
+// Created by add_section_from_catalog (HeroBillboardFeatures).
+
+import React from 'react';
+import HeroBillboardFeatures from '@/components/sections/hero/HeroBillboardFeatures';
+import { motion } from 'framer-motion';
+import Button from '@/components/ui/Button';
+import Tag from '@/components/ui/Tag';
+import ImageOrVideo from '@/components/ui/ImageOrVideo';
+import { Leaf, Sun, Droplet } from 'lucide-react';
+
+export default function HeroNewSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="hero-new" id="hero-new">
+      <section className="relative w-full pt-32 pb-24 bg-background overflow-hidden">
+        <div className="max-w-6xl mx-auto px-6 text-center flex flex-col items-center">
+          <Tag text="Your Outdoor Oasis Awaits" className="mb-6" />
+          <h1 className="text-5xl md:text-7xl font-bold text-foreground tracking-tight mb-6 max-w-4xl">
+            Transform Your Landscape with Expertise and Care
+          </h1>
+          <p className="text-lg md:text-xl text-muted-foreground mb-10 max-w-2xl">
+            At GreenScape Landscaping, we bring your vision to life. From lush gardens to functional outdoor living spaces, our team delivers unparalleled design, installation, and maintenance services.
+          </p>
+          <div className="flex flex-wrap justify-center gap-4 mb-16">
+            <Button text="Explore Services" href="#services" variant="primary" />
+            <Button text="Get a Free Quote" href="#contact" variant="secondary" />
+          </div>
+          
+          <div className="relative w-full max-w-5xl mx-auto aspect-[16/9] rounded-3xl overflow-hidden shadow-2xl">
+            <ImageOrVideo 
+              imageSrc="http://img.b2bpic.net/free-photo/relaxation-space-garden-with-beds_1232-3472.jpg" 
+              className="w-full h-full object-cover"
+            />
+            
+            {/* Floating Card 1 */}
+            <motion.div 
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.5 }}
+              className="absolute top-12 left-12 bg-card/90 backdrop-blur-md p-5 rounded-2xl shadow-2xl border border-border flex items-center justify-center"
+            >
+              <Leaf className="w-10 h-10 text-primary-cta" />
+            </motion.div>
+
+            {/* Floating Card 2 */}
+            <motion.div 
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.7 }}
+              className="absolute bottom-12 left-1/3 bg-card/90 backdrop-blur-md p-5 rounded-2xl shadow-2xl border border-border flex items-center justify-center"
+            >
+              <Sun className="w-10 h-10 text-primary-cta" />
+            </motion.div>
+
+            {/* Floating Card 3 */}
+            <motion.div 
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.9 }}
+              className="absolute top-24 right-12 bg-card/90 backdrop-blur-md p-5 rounded-2xl shadow-2xl border border-border flex items-center justify-center"
+            >
+              <Droplet className="w-10 h-10 text-primary-cta" />
+            </motion.div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}