|
|
|
|
@@ -1,20 +1,73 @@
|
|
|
|
|
// Created by add_section_from_catalog (HeroBillboardFeatures).
|
|
|
|
|
|
|
|
|
|
"use client";
|
|
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
|
import HeroBillboardFeatures from '@/components/sections/hero/HeroBillboardFeatures';
|
|
|
|
|
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">
|
|
|
|
|
<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 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-content-width">
|
|
|
|
|
Transform Your Landscape with Expertise and Care
|
|
|
|
|
</h1>
|
|
|
|
|
<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">
|
|
|
|
|
<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-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 */}
|
|
|
|
|
<ScrollReveal
|
|
|
|
|
variant="slide-up"
|
|
|
|
|
delay={0.3}
|
|
|
|
|
className="absolute top-6 left-6 md:top-12 md:left-12 z-10"
|
|
|
|
|
>
|
|
|
|
|
<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 */}
|
|
|
|
|
<ScrollReveal
|
|
|
|
|
variant="slide-up"
|
|
|
|
|
delay={0.5}
|
|
|
|
|
className="absolute bottom-6 left-1/2 -translate-x-1/2 md:bottom-12 z-10"
|
|
|
|
|
>
|
|
|
|
|
<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 */}
|
|
|
|
|
<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"
|
|
|
|
|
>
|
|
|
|
|
<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>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|
