Merge version_9_1780572180165 into main

Merge version_9_1780572180165 into main

src/pages/HomePage.tsx

@@ -11,7 +11,7 @@ import ContactSection from './HomePage/sections/Contact';
 export default function HomePage(): React.JSX.Element {
   return (
     <>
-      <HeroNewSection />
+      <HeroNewSection headline="Unlock Your Outdoor Oasis: Expert Landscaping for Lasting Beauty" />
       <AboutSection />
       <ServicesSection />
       <PortfolioSection />

src/pages/HomePage/sections/HeroNew.tsx

@@ -1,68 +1,73 @@
 // Created by add_section_from_catalog (HeroBillboardFeatures).
 
+"use client";
+
 import React from 'react';
-import HeroBillboardFeatures from '@/components/sections/hero/HeroBillboardFeatures';
-import { motion } from 'framer-motion';
+import ScrollReveal from '@/components/ui/ScrollReveal';
 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';
+import { motion } from 'framer-motion';
 
 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">
+      <section className="relative w-full bg-background overflow-hidden">
+        <div className="max-w-content-width 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">
+          <h1 className="text-5xl md:text-7xl font-bold text-foreground tracking-tight mb-6 max-w-content-width">
             Transform Your Landscape with Expertise and Care
           </h1>
-          <p className="text-lg md:text-xl text-muted-foreground mb-10 max-w-2xl">
+          <p className="text-lg md:text-xl text-muted-foreground max-w-content-width">
             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">
+          <div className="flex flex-wrap justify-center gap-4">
             <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">
+          <div className="relative w-full max-w-content-width mx-auto aspect-[4/3] md:aspect-[16/9] rounded-theme 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"
+            <ScrollReveal 
+              variant="slide-up"
+              delay={0.3}
+              className="absolute top-6 left-6 md:top-12 md:left-12 z-10"
             >
-              <Leaf className="w-10 h-10 text-primary-cta" />
-            </motion.div>
+              <div className="bg-card/90 backdrop-blur-md p-4 md:p-6 rounded-theme shadow-2xl border border-border flex items-center justify-center">
+                <Leaf className="w-8 h-8 md:w-12 md:h-12 text-primary-cta" />
+              </div>
+            </ScrollReveal>
 
             {/* 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"
+            <ScrollReveal 
+              variant="slide-up"
+              delay={0.5}
+              className="absolute bottom-6 left-1/2 -translate-x-1/2 md:bottom-12 z-10"
             >
-              <Sun className="w-10 h-10 text-primary-cta" />
-            </motion.div>
+              <div className="bg-card/90 backdrop-blur-md p-4 md:p-6 rounded-theme shadow-2xl border border-border flex items-center justify-center">
+                <Sun className="w-8 h-8 md:w-12 md:h-12 text-primary-cta" />
+              </div>
+            </ScrollReveal>
 
             {/* 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"
+            <ScrollReveal 
+              variant="slide-up"
+              delay={0.7}
+              className="absolute top-1/2 right-6 -translate-y-1/2 md:top-24 md:right-12 z-10"
             >
-              <Droplet className="w-10 h-10 text-primary-cta" />
-            </motion.div>
+              <div className="bg-card/90 backdrop-blur-md p-4 md:p-6 rounded-theme shadow-2xl border border-border flex items-center justify-center">
+                <Droplet className="w-8 h-8 md:w-12 md:h-12 text-primary-cta" />
+              </div>
+            </ScrollReveal>
           </div>
         </div>
       </section>
     </div>
   );
-}
+}