bender/116eb5aa-a37a-451d-9c9c-ef70ab92a8d9
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_8_1780571547731 into main #7

Merged
bender merged 2 commits from version_8_1780571547731 into main 2026-06-04 11:16:19 +00:00
Conversation 0 Commits 2 Files Changed 1 +32 -30
1 changed files with 32 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/pages/HomePage/sections/HeroNew.tsx
View File

@@ -1,8 +1,7 @@
// Created by add_section_from_catalog (HeroBillboardFeatures).
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';
@@ -11,58 +10,61 @@ 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">
<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>
);
}
}