From 7527e0a7929ce290be2fb784d4be4b129c33e441 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Thu, 4 Jun 2026 11:08:59 +0000
Subject: [PATCH] Bob AI: Replaced hero section with custom JSX to show 3
 floating ico

---
 src/pages/HomePage/sections/HeroNew.tsx | 66 +++++++++++++++++++++----
 1 file changed, 57 insertions(+), 9 deletions(-)

diff --git a/src/pages/HomePage/sections/HeroNew.tsx b/src/pages/HomePage/sections/HeroNew.tsx
index 1638269..ccf9b99 100644
--- a/src/pages/HomePage/sections/HeroNew.tsx
+++ b/src/pages/HomePage/sections/HeroNew.tsx
@@ -2,19 +2,67 @@
 
 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">
-      <HeroBillboardFeatures
-        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."
-        features={[{"icon":"Leaf","description":"Sustainable and organic practices","title":"Eco-Friendly"},{"description":"Custom designs for your home","title":"Outdoor Living","icon":"Sun"},{"description":"Efficient irrigation systems","title":"Water Management","icon":"Droplet"}]}
-        secondaryButton={{"href":"#contact","text":"Get a Free Quote"}}
-        title="Transform Your Landscape with Expertise and Care"
-        imageSrc="http://img.b2bpic.net/free-photo/relaxation-space-garden-with-beds_1232-3472.jpg"
-        primaryButton={{"text":"Explore Services","href":"#services"}}
-        badge="Your Outdoor Oasis Awaits"
-      />
+      <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>
   );
 }
-- 
2.49.1