Update src/app/page.tsx
This commit is contained in:
478
src/app/page.tsx
478
src/app/page.tsx
@@ -20,352 +20,160 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Products",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="IronClad Fencing"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Products", id: "products" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="IronClad Fencing"
|
||||
button={{ text: "Get a Quote", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Built to Last, Designed to Impress"
|
||||
description="Professional residential and commercial fencing services. Quality craftsmanship, durable materials, and expert installation."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/pine-branches-white-wooden-fence_1372-71.jpg",
|
||||
alt: "Pine branches and white wooden fence",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/peaceful-path-outdoors_1137-215.jpg",
|
||||
alt: "Peaceful path outdoors",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-stylish-black-african-american-man-hat-sunglasses-against-fence_627829-3839.jpg",
|
||||
alt: "Portrait of stylish black african american man",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/brown-wooden-bridge_417767-270.jpg",
|
||||
alt: "Brown wooden bridge",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/fashion-bearded-hipster-posing-fence-style-diversity_482257-40662.jpg",
|
||||
alt: "Fashion bearded hipster",
|
||||
},
|
||||
]}
|
||||
avatarText="Trusted by over 1,000+ happy homeowners"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Built to Last, Designed to Impress"
|
||||
description="Professional residential and commercial fencing services. Quality craftsmanship, durable materials, and expert installation."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/old-haunted-house-empty-field_1127-3475.jpg"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/pine-branches-white-wooden-fence_1372-71.jpg", alt: "Pine branches and white wooden fence" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/peaceful-path-outdoors_1137-215.jpg", alt: "Peaceful path outdoors" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-stylish-black-african-american-man-hat-sunglasses-against-fence_627829-3839.jpg", alt: "Portrait of stylish black african american man" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/brown-wooden-bridge_417767-270.jpg", alt: "Brown wooden bridge" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/fashion-bearded-hipster-posing-fence-style-diversity_482257-40662.jpg", alt: "Fashion bearded hipster" },
|
||||
]}
|
||||
avatarText="Trusted by over 1,000+ happy homeowners"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Our Commitment to ",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/man-protective-gloves-is-painting-wooden-fence-bright-summer-day_613910-17104.jpg",
|
||||
alt: "About our team",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
content: " Quality & Security",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Our Commitment to " },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/man-protective-gloves-is-painting-wooden-fence-bright-summer-day_613910-17104.jpg", alt: "About our team" },
|
||||
{ type: "text", content: " Quality & Security" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
label: "Security",
|
||||
title: "High-Strength Materials",
|
||||
items: [
|
||||
"Reinforced iron structures",
|
||||
"Weather-resistant coatings",
|
||||
"Tamper-proof designs",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
label: "Aesthetics",
|
||||
title: "Custom Designs",
|
||||
items: [
|
||||
"Modern horizontal slats",
|
||||
"Classic ornamental styles",
|
||||
"Tailored picket designs",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
label: "Service",
|
||||
title: "Expert Installation",
|
||||
items: [
|
||||
"Precision ground leveling",
|
||||
"Quick turnaround time",
|
||||
"Site cleanup included",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Why Choose IronClad?"
|
||||
description="Premium service for every boundary requirement."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "f1", label: "Security", title: "High-Strength Materials", items: ["Reinforced iron structures", "Weather-resistant coatings", "Tamper-proof designs"] },
|
||||
{ id: "f2", label: "Aesthetics", title: "Custom Designs", items: ["Modern horizontal slats", "Classic ornamental styles", "Tailored picket designs"] },
|
||||
{ id: "f3", label: "Service", title: "Expert Installation", items: ["Precision ground leveling", "Quick turnaround time", "Site cleanup included"] },
|
||||
]}
|
||||
title="Why Choose IronClad?"
|
||||
description="Premium service for every boundary requirement."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "ProSeries",
|
||||
name: "Modern Aluminum Fence",
|
||||
price: "$1,200",
|
||||
rating: 5,
|
||||
reviewCount: "24",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-japanese-garden_23-2149359734.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "ClassicWood",
|
||||
name: "Cedar Wood Privacy Fence",
|
||||
price: "$1,500",
|
||||
rating: 4,
|
||||
reviewCount: "18",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/light-brown-wood-grain-texture_84443-73018.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "VinylMax",
|
||||
name: "White Vinyl Privacy Panel",
|
||||
price: "$900",
|
||||
rating: 5,
|
||||
reviewCount: "31",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wood-wall-text-background_1249-222.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "EliteIron",
|
||||
name: "Wrought Iron Luxury Gate",
|
||||
price: "$2,100",
|
||||
rating: 5,
|
||||
reviewCount: "12",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-modern-door_23-2151977064.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "SecureSteel",
|
||||
name: "Heavy Duty Steel Perimeter",
|
||||
price: "$1,800",
|
||||
rating: 4,
|
||||
reviewCount: "9",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-wooden-fence-lush-green-hedge-garden-landscape_626616-510.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "ModernSlat",
|
||||
name: "Horizontal Wood Privacy Slat",
|
||||
price: "$1,350",
|
||||
rating: 5,
|
||||
reviewCount: "22",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japanese-building-with-fence_23-2149301121.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Fence Collections"
|
||||
description="Browse our diverse range of fencing solutions tailored for your property."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", brand: "ProSeries", name: "Modern Aluminum Fence", price: "$1,200", rating: 5, reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-japanese-garden_23-2149359734.jpg" },
|
||||
{ id: "p2", brand: "ClassicWood", name: "Cedar Wood Privacy Fence", price: "$1,500", rating: 4, reviewCount: "18", imageSrc: "http://img.b2bpic.net/free-photo/light-brown-wood-grain-texture_84443-73018.jpg" },
|
||||
{ id: "p3", brand: "VinylMax", name: "White Vinyl Privacy Panel", price: "$900", rating: 5, reviewCount: "31", imageSrc: "http://img.b2bpic.net/free-photo/wood-wall-text-background_1249-222.jpg" },
|
||||
{ id: "p4", brand: "EliteIron", name: "Wrought Iron Luxury Gate", price: "$2,100", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-modern-door_23-2151977064.jpg" },
|
||||
{ id: "p5", brand: "SecureSteel", name: "Heavy Duty Steel Perimeter", price: "$1,800", rating: 4, reviewCount: "9", imageSrc: "http://img.b2bpic.net/free-photo/modern-wooden-fence-lush-green-hedge-garden-landscape_626616-510.jpg" },
|
||||
{ id: "p6", brand: "ModernSlat", name: "Horizontal Wood Privacy Slat", price: "$1,350", rating: 5, reviewCount: "22", imageSrc: "http://img.b2bpic.net/free-photo/house-entrance-japanese-building-with-fence_23-2149301121.jpg" },
|
||||
]}
|
||||
title="Our Fence Collections"
|
||||
description="Browse our diverse range of fencing solutions tailored for your property."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
title: "Projects Completed",
|
||||
value: "1,200+",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
title: "Happy Clients",
|
||||
value: "950+",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
title: "Years of Experience",
|
||||
value: "15+",
|
||||
icon: Shield,
|
||||
},
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Proven results for homes and businesses."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", title: "Projects Completed", value: "1,200+", icon: CheckCircle },
|
||||
{ id: "m2", title: "Happy Clients", value: "950+", icon: Award },
|
||||
{ id: "m3", title: "Years of Experience", value: "15+", icon: Shield },
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Proven results for homes and businesses."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="The quality of the fence is unmatched. Our backyard feels private and secure now. The team was incredibly professional during installation."
|
||||
rating={5}
|
||||
author="Mark R."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-pointing-camera_1262-3266.jpg",
|
||||
alt: "Customer 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-carring-bunny_23-2148568698.jpg",
|
||||
alt: "Customer 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-gathering-beets-from-farm_23-2150454966.jpg",
|
||||
alt: "Customer 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/couple-cutting-grass-with-lawn-mover-back-yard-male-black-apron-family-working-home_1157-41441.jpg",
|
||||
alt: "Customer 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/view-romantic-interracial-couple-hold-hands-walk-rural-setting_273609-18073.jpg",
|
||||
alt: "Customer 5",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="The quality of the fence is unmatched. Our backyard feels private and secure now. The team was incredibly professional during installation."
|
||||
rating={5}
|
||||
author="Mark R."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-happy-young-man-pointing-camera_1262-3266.jpg", alt: "Customer 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/woman-carring-bunny_23-2148568698.jpg", alt: "Customer 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/woman-gathering-beets-from-farm_23-2150454966.jpg", alt: "Customer 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/couple-cutting-grass-with-lawn-mover-back-yard-male-black-apron-family-working-home_1157-41441.jpg", alt: "Customer 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/view-romantic-interracial-couple-hold-hands-walk-rural-setting_273609-18073.jpg", alt: "Customer 5" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How long does installation take?",
|
||||
content: "Most residential projects are completed within 2-3 days, depending on scale.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you handle local permits?",
|
||||
content: "Yes, we handle all necessary paperwork for your local zoning requirements.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Are your materials weather resistant?",
|
||||
content: "We only use high-grade, treated materials built to withstand all local weather conditions.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/closeup-shot-wooden-criss-cross-fence-with-blurred_181624-16317.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Answers to common concerns about our fence installation process."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How long does installation take?", content: "Most residential projects are completed within 2-3 days, depending on scale." },
|
||||
{ id: "q2", title: "Do you handle local permits?", content: "Yes, we handle all necessary paperwork for your local zoning requirements." },
|
||||
{ id: "q3", title: "Are your materials weather resistant?", content: "We only use high-grade, treated materials built to withstand all local weather conditions." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/closeup-shot-wooden-criss-cross-fence-with-blurred_181624-16317.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Answers to common concerns about our fence installation process."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
text="Ready to secure your property? Get a free estimate today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Quote",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
text="Ready to secure your property? Get a free estimate today."
|
||||
buttons={[{ text: "Get a Quote", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Residential",
|
||||
href: "#products",
|
||||
},
|
||||
{
|
||||
label: "Commercial",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="IronClad Fencing"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Services", items: [{ label: "Residential", href: "#products" }, { label: "Commercial", href: "#products" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "#contact" }, { label: "Privacy Policy", href: "#" }] },
|
||||
]}
|
||||
logoText="IronClad Fencing"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user