Merge version_1 into main #2
442
src/app/page.tsx
442
src/app/page.tsx
@@ -15,326 +15,148 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "#products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Fence Unlimited"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Products", id: "#products" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Fence Unlimited"
|
||||
button={{ text: "Get a Quote", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Secure Your Property with Fence Unlimited"
|
||||
description="Expert fence installation, premium materials, and unmatched craftsmanship for your home or business."
|
||||
tag="Trusted Fencing Experts"
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Free Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/carpenter-man-using-tape-measure_23-2148748801.jpg?_wi=1",
|
||||
imageAlt: "Residential fence installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-trees-forest-metal-fence_181624-22874.jpg?_wi=1",
|
||||
imageAlt: "Modern aluminum fence",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-stairs-japanese-culture_23-2149301065.jpg?_wi=1",
|
||||
imageAlt: "Custom wood privacy fence",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japan-building-with-fence_23-2149301077.jpg",
|
||||
imageAlt: "Backyard fence installation",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japanese-building-with-fence_23-2149301121.jpg",
|
||||
imageAlt: "Luxury property fencing",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-people-running-outdoors_23-2150351996.jpg",
|
||||
imageAlt: "Professional fencing service",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Secure Your Property with Fence Unlimited"
|
||||
description="Expert fence installation, premium materials, and unmatched craftsmanship for your home or business."
|
||||
tag="Trusted Fencing Experts"
|
||||
buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/carpenter-man-using-tape-measure_23-2148748801.jpg", imageAlt: "Residential fence installation" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-trees-forest-metal-fence_181624-22874.jpg", imageAlt: "Modern aluminum fence" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-stairs-japanese-culture_23-2149301065.jpg", imageAlt: "Custom wood privacy fence" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japan-building-with-fence_23-2149301077.jpg", imageAlt: "Backyard fence installation" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japanese-building-with-fence_23-2149301121.jpg", imageAlt: "Luxury property fencing" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-people-running-outdoors_23-2150351996.jpg", imageAlt: "Professional fencing service" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Built for ",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: "Durability and Style.",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/country-music-band-singing-outdoors_23-2149498487.jpg",
|
||||
alt: "Fence construction experts",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Built for " },
|
||||
{ type: "text", content: "Durability and Style." },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/country-music-band-singing-outdoors_23-2149498487.jpg", alt: "Fence construction experts" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Premium Materials",
|
||||
description: "We only use high-grade vinyl, wood, and steel.",
|
||||
tag: "Quality",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/carpenter-man-using-tape-measure_23-2148748801.jpg?_wi=2",
|
||||
imageAlt: "residential fence installation modern home",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Expert Installation",
|
||||
description: "Experienced builders ensure precision and longevity.",
|
||||
tag: "Precision",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-trees-forest-metal-fence_181624-22874.jpg?_wi=2",
|
||||
imageAlt: "modern aluminum security fence home",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Custom Designs",
|
||||
description: "Tailored solutions for your specific landscape needs.",
|
||||
tag: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-stairs-japanese-culture_23-2149301065.jpg?_wi=2",
|
||||
imageAlt: "custom wood privacy fence backyard",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Us?"
|
||||
description="We combine premium materials with professional service for your peace of mind."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "1", title: "Premium Materials", description: "We only use high-grade vinyl, wood, and steel.", tag: "Quality", imageSrc: "http://img.b2bpic.net/free-photo/carpenter-man-using-tape-measure_23-2148748801.jpg" },
|
||||
{ id: "2", title: "Expert Installation", description: "Experienced builders ensure precision and longevity.", tag: "Precision", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-trees-forest-metal-fence_181624-22874.jpg" },
|
||||
{ id: "3", title: "Custom Designs", description: "Tailored solutions for your specific landscape needs.", tag: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-stairs-japanese-culture_23-2149301065.jpg" },
|
||||
]}
|
||||
title="Why Choose Us?"
|
||||
description="We combine premium materials with professional service for your peace of mind."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Vinyl Privacy Fence",
|
||||
price: "Contact for Quote",
|
||||
variant: "Premium",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stripe-lights-polished-space-solid_1404-206.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Steel Security Fence",
|
||||
price: "Contact for Quote",
|
||||
variant: "Heavy Duty",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rich-african-man-stylish-traditional-clothes-hat-posed-outdoor-background-his-mansion_627829-3365.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Wood Cedar Fence",
|
||||
price: "Contact for Quote",
|
||||
variant: "Natural",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cute-yellow-rural-house-with-wooden-stairs-countryside_176420-7158.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Aluminum Pool Fence",
|
||||
price: "Contact for Quote",
|
||||
variant: "Safety",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stair-swimming-pool-beautiful-luxury-hotel-pool-resort_1339-5453.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Traditional Picket Fence",
|
||||
price: "Contact for Quote",
|
||||
variant: "Classic",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wooden-fences-park-surrounded-by-trees_181624-37663.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Composite Privacy Fence",
|
||||
price: "Contact for Quote",
|
||||
variant: "Modern",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-wooden-fence-street_181624-15424.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Fencing Solutions"
|
||||
description="Explore our diverse range of secure and aesthetic fencing options."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Vinyl Privacy Fence", price: "Contact for Quote", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/stripe-lights-polished-space-solid_1404-206.jpg" },
|
||||
{ id: "2", name: "Steel Security Fence", price: "Contact for Quote", variant: "Heavy Duty", imageSrc: "http://img.b2bpic.net/free-photo/rich-african-man-stylish-traditional-clothes-hat-posed-outdoor-background-his-mansion_627829-3365.jpg" },
|
||||
{ id: "3", name: "Wood Cedar Fence", price: "Contact for Quote", variant: "Natural", imageSrc: "http://img.b2bpic.net/free-photo/cute-yellow-rural-house-with-wooden-stairs-countryside_176420-7158.jpg" },
|
||||
{ id: "4", name: "Aluminum Pool Fence", price: "Contact for Quote", variant: "Safety", imageSrc: "http://img.b2bpic.net/free-photo/stair-swimming-pool-beautiful-luxury-hotel-pool-resort_1339-5453.jpg" },
|
||||
{ id: "5", name: "Traditional Picket Fence", price: "Contact for Quote", variant: "Classic", imageSrc: "http://img.b2bpic.net/free-photo/wooden-fences-park-surrounded-by-trees_181624-37663.jpg" },
|
||||
{ id: "6", name: "Composite Privacy Fence", price: "Contact for Quote", variant: "Modern", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-wooden-fence-street_181624-15424.jpg" },
|
||||
]}
|
||||
title="Our Fencing Solutions"
|
||||
description="Explore our diverse range of secure and aesthetic fencing options."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Great Experience",
|
||||
quote: "Fence Unlimited did an amazing job on our backyard privacy fence!",
|
||||
name: "John Doe",
|
||||
role: "Homeowner",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/couple-cutting-grass-with-lawn-mover-back-yard-male-black-apron-family-working-home_1157-41441.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Professional Team",
|
||||
quote: "Highly recommend their professional installation service.",
|
||||
name: "Sarah Smith",
|
||||
role: "Property Owner",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/real-communication-concept-positive-young-married-couple-mixed-race-friends-enjoys-spare-time-have-fun-talk-each-other_273609-18716.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Top Quality",
|
||||
quote: "The vinyl quality is outstanding and looks beautiful.",
|
||||
name: "Mike Johnson",
|
||||
role: "Homeowner",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-riding-bicycle-near-fence_23-2147713871.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Quick Turnaround",
|
||||
quote: "Fast service and clean execution. Very impressed.",
|
||||
name: "Emily Davis",
|
||||
role: "Business Owner",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-friends-handshaking-outdoors_23-2149073970.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Excellent Service",
|
||||
quote: "Professional team that delivered beyond expectations.",
|
||||
name: "Robert Brown",
|
||||
role: "Homeowner",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/boy-putting-up-electric-guitar_23-2148006422.jpg",
|
||||
},
|
||||
]}
|
||||
title="Customer Stories"
|
||||
description="What our clients say about Fence Unlimited."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Great Experience", quote: "Fence Unlimited did an amazing job on our backyard privacy fence!", name: "John Doe", role: "Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/couple-cutting-grass-with-lawn-mover-back-yard-male-black-apron-family-working-home_1157-41441.jpg" },
|
||||
{ id: "2", title: "Professional Team", quote: "Highly recommend their professional installation service.", name: "Sarah Smith", role: "Property Owner", imageSrc: "http://img.b2bpic.net/free-photo/real-communication-concept-positive-young-married-couple-mixed-race-friends-enjoys-spare-time-have-fun-talk-each-other_273609-18716.jpg" },
|
||||
{ id: "3", title: "Top Quality", quote: "The vinyl quality is outstanding and looks beautiful.", name: "Mike Johnson", role: "Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-riding-bicycle-near-fence_23-2147713871.jpg" },
|
||||
{ id: "4", title: "Quick Turnaround", quote: "Fast service and clean execution. Very impressed.", name: "Emily Davis", role: "Business Owner", imageSrc: "http://img.b2bpic.net/free-photo/male-friends-handshaking-outdoors_23-2149073970.jpg" },
|
||||
{ id: "5", title: "Excellent Service", quote: "Professional team that delivered beyond expectations.", name: "Robert Brown", role: "Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/boy-putting-up-electric-guitar_23-2148006422.jpg" },
|
||||
]}
|
||||
title="Customer Stories"
|
||||
description="What our clients say about Fence Unlimited."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Do you provide free estimates?",
|
||||
content: "Yes, we offer free onsite consultations and estimates.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "How long does installation take?",
|
||||
content: "Most projects are completed within 3-5 business days.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Do you offer financing?",
|
||||
content: "We offer flexible financing options for all projects.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our fencing services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "Do you provide free estimates?", content: "Yes, we offer free onsite consultations and estimates." },
|
||||
{ id: "2", title: "How long does installation take?", content: "Most projects are completed within 3-5 business days." },
|
||||
{ id: "3", title: "Do you offer financing?", content: "We offer flexible financing options for all projects." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our fencing services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Get in touch"
|
||||
title="Ready to get started?"
|
||||
description="Contact us today to discuss your fencing needs and get a free estimate."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-african-girl-smiling-speaking-phone-sitting-cafe-shot-from-outside_176420-6926.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Request Quote"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get in touch"
|
||||
title="Ready to get started?"
|
||||
description="Contact us today to discuss your fencing needs and get a free estimate."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautiful-african-girl-smiling-speaking-phone-sitting-cafe-shot-from-outside_176420-6926.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Request Quote"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Fence Unlimited"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{ items: [{ label: "Services", href: "#products" }, { label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] },
|
||||
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
logoText="Fence Unlimited"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user