Files
a6176ee0-c817-402e-9bc4-4b4…/src/app/page.tsx
2026-05-19 16:46:18 +00:00

311 lines
16 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { Award, Calendar, Grid, Home, MessageSquare, Palette, ShieldCheck, Wrench, TrendingUp, Truck, Users } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="largeSizeMediumTitles"
background="grid"
cardStyle="gradient-bordered"
primaryButtonStyle="flat"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home", id: "hero"},
{
name: "About", id: "about"},
{
name: "Services", id: "services"},
{
name: "Gallery", id: "gallery"},
{
name: "Contact", id: "contact"},
]}
brandName="TOWN & COUNTRY SHEDS"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
useInvertedBackground={true}
background={{
variant: "radial-gradient"}}
title="Custom Built Sheds Crafted To Last For Generations"
description="Premium sheds, cabins, barns & custom outdoor buildings handcrafted with exceptional craftsmanship and delivered with care."
testimonials={[
{
name: "Danny G.", handle: "@danny", testimonial: "We custom ordered a shed and got it a week early. The craftsmanship was over the top.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-kitchen-interior-design_23-2150976540.jpg", imageAlt: "luxury backyard cabin sunset"},
{
name: "Tommy D.", handle: "@tommy", testimonial: "Seven years later our shed still looks brand new.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/pottery-craftsperson-studio-creating-ceramics_23-2150164883.jpg", imageAlt: "luxury backyard cabin sunset"},
{
name: "Maureen R.", handle: "@maureen", testimonial: "They moved our cabin and leveled it perfectly without being asked.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/books-heart-shape-basket-arranged-shelf-living-room_1170-393.jpg", imageAlt: "luxury backyard cabin sunset"},
{
name: "Amy V.", handle: "@amy", testimonial: "13 years later the doors and windows are still square.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/rustic-patio-furniture-house-deck-with-vegetation_23-2150698300.jpg", imageAlt: "luxury backyard cabin sunset"},
{
name: "Sarah J.", handle: "@sarah", testimonial: "Amazing quality and great people to work with.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/view-old-abandoned-house-nature_23-2150166533.jpg", imageAlt: "luxury backyard cabin sunset"},
]}
buttons={[
{
text: "Get A Free Quote", href: "#contact"},
{
text: "View Custom Builds", href: "#gallery"},
]}
imageSrc="http://img.b2bpic.net/free-photo/beautiful-kitchen-interior-design_23-2150976540.jpg"
imageAlt="Luxury backyard cabin at golden hour"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/close-up-happy-middle-aged-caucasian-woman-sitting-comfortable-yellow-sofa-home-enjoying-little-things-positive-attitude_197531-31300.jpg", alt: "Portrait of happy woman"},
{
src: "http://img.b2bpic.net/free-photo/female-with-radiant-smile-sitting-room_259150-60488.jpg", alt: "Portrait of smiling woman"},
{
src: "http://img.b2bpic.net/free-photo/portrait-smiling-man-with-beard_23-2152009546.jpg", alt: "Portrait of man with beard"},
{
src: "http://img.b2bpic.net/free-photo/portrait-senior-entrepreneur_1098-15359.jpg", alt: "Portrait of senior entrepreneur"},
{
src: "http://img.b2bpic.net/free-photo/portrait-modern-man-performing-housework-gentle-dreamy-atmosphere_23-2151469408.jpg", alt: "Portrait of man in home atmosphere"},
]}
marqueeItems={[
{
type: "text", text: "14+ Years Experience"},
{
type: "text", text: "100% Custom Designs"},
{
type: "text", text: "Family Owned"},
{
type: "text", text: "Precision Engineering"},
{
type: "text", text: "Premium Timber"},
]}
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
names={[
"5-Star Google Reviews", "Custom Built Structures", "Delivery & Placement", "Built To Last 10+ Years", "Precision Engineering", "Family Owned Craft", "High-Ticket Quality"]}
title="Trusted by Homeowners for Over a Decade"
description="Our work is recognized for quality, durability, and a personalized approach to every build."
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={true}
tag="OUR STORY"
title="Old-School Craftsmanship. Modern Reliability."
description="Town & Country Sheds creates handcrafted outdoor structures built with precision, durability, and pride. From custom sheds and cabins to horse shelters, every structure is designed to withstand years of use while enhancing your property."
subdescription="Clients trust Town & Country because our communication is honest, delivery is reliable, and our custom work is truly personalized to your specific vision."
icon={Award}
imageSrc="http://img.b2bpic.net/free-photo/pottery-craftsperson-studio-creating-ceramics_23-2150164883.jpg"
mediaAnimation="blur-reveal"
/>
</div>
<div id="services" data-section="services">
<ProductCardThree
animationType="slide-up"
textboxLayout="split-description"
gridVariant="two-columns-alternating-heights"
useInvertedBackground={false}
products={[
{
id: "1", name: "Custom Sheds", price: "From $4,500", imageSrc: "http://img.b2bpic.net/free-photo/books-heart-shape-basket-arranged-shelf-living-room_1170-393.jpg"},
{
id: "2", name: "Backyard Cabins", price: "From $12,000", imageSrc: "http://img.b2bpic.net/free-photo/rustic-patio-furniture-house-deck-with-vegetation_23-2150698300.jpg"},
{
id: "3", name: "Horse Shelters", price: "From $6,000", imageSrc: "http://img.b2bpic.net/free-photo/view-old-abandoned-house-nature_23-2150166533.jpg"},
{
id: "4", name: "Chicken Coops", price: "From $2,200", imageSrc: "http://img.b2bpic.net/free-photo/tall-leggy-young-beautiful-elegant-model-woman-claret-coat_627829-6918.jpg"},
{
id: "5", name: "Shed Moving", price: "Custom Quote", imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-timber-house-interior-with-wooden-decor-furnishings_23-2151263588.jpg"},
{
id: "6", name: "Fully Custom", price: "Tailored Quote", imageSrc: "http://img.b2bpic.net/free-photo/two-horses-farm_23-2147758818.jpg"},
]}
title="Premium Outdoor Structures"
description="A curated range of handcrafted buildings designed for durability and beauty."
/>
</div>
<div id="features" data-section="features">
<FeatureHoverPattern
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
icon: Wrench,
title: "Premium Craftsmanship", description: "Every structure is built with precision and long-term durability in mind."},
{
icon: Truck,
title: "Fast & Reliable Delivery", description: "Projects consistently delivered on time — sometimes even early."},
{
icon: ShieldCheck,
title: "Truly Custom Builds", description: "No cookie-cutter structures. Everything is tailored to your exact needs."},
{
icon: Grid,
title: "Professional Installation", description: "Expert placement and leveling included for every building."},
{
icon: TrendingUp,
title: "Long-Term Value", description: "Structures still looking and performing like new after 10+ years."},
{
icon: MessageSquare,
title: "Honest Communication", description: "We keep you informed at every step of your build."},
]}
title="Why Homeowners Choose Town & Country"
description="Craftsmanship, integrity, and reliable service delivered with every project."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="split-description"
useInvertedBackground={false}
testimonials={[
{
id: "1", title: "Great quality!", quote: "We custom ordered a shed and got it early. Amazing.", name: "Danny G.", role: "Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/man-enjoying-cup-matcha-tea_23-2150215074.jpg"},
{
id: "2", title: "Lasts forever", quote: "Seven years later our shed still looks brand new.", name: "Tommy D.", role: "Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/man-white-shirt-with-open-hands-smiling_23-2152009543.jpg"},
{
id: "3", title: "Best service", quote: "They moved our cabin and leveled it perfectly.", name: "Maureen R.", role: "Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-young-woman-holding-yellow-flower-looking-away_23-2148049702.jpg"},
{
id: "4", title: "Built right", quote: "13 years later the doors are still square.", name: "Amy V.", role: "Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-family-eating-outdoors_23-2149302339.jpg"},
{
id: "5", title: "Five stars", quote: "Exceptional quality and people. Highly recommend.", name: "Mark S.", role: "Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/happy-adult-son-his-mature-father-holding-hands-while-greeting-each-other-kitchen_637285-10296.jpg"},
]}
title="Client Success Stories"
description="Hear what our happy customers have to say about their custom builds."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
useInvertedBackground={true}
metrics={[
{
id: "m1", value: "14+", title: "Years Experience", description: "Building trust through quality.", icon: Calendar,
},
{
id: "m2", value: "1200+", title: "Structures Built", description: "Tailored to every property.", icon: Home,
},
{
id: "m3", value: "500+", title: "Happy Clients", description: "References available upon request.", icon: Users,
},
{
id: "m4", value: "100%", title: "Custom Designs", description: "No cookie-cutter sheds.", icon: Palette,
},
]}
title="Built By The Numbers"
description="Over a decade of excellence in the outdoor building industry."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "f1", title: "Do you offer custom designs?", content: "Absolutely. We specialize in fully custom structures tailored to your site and specific needs."},
{
id: "f2", title: "Is delivery included?", content: "Yes, we include professional delivery and placement for every project we build."},
{
id: "f3", title: "How long do the structures last?", content: "Our buildings are designed for longevity; many of our structures are still in perfect condition after 14 years."},
{
id: "f4", title: "Do you need a permit?", content: "We can help guide you through the process, though local requirements vary by location."},
]}
title="Frequently Asked Questions"
description="Have questions about your custom shed or cabin project? Find answers below."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Ready To Build Something That Lasts?"
description="Get a custom quote today and create a structure designed specifically for your property."
inputs={[
{
name: "name", type: "text", placeholder: "Your Name", required: true,
},
{
name: "email", type: "email", placeholder: "Your Email", required: true,
},
{
name: "phone", type: "tel", placeholder: "Phone Number", required: true,
},
]}
textarea={{
name: "project", placeholder: "Tell us about your project...", rows: 4,
}}
imageSrc="http://img.b2bpic.net/free-photo/field-with-two-wooden-barns-surrounded-by-forests-covered-fog-cloudy-sky_181624-11458.jpg"
buttonText="Get My Free Quote"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "About Us", href: "#about"},
{
label: "Our Builds", href: "#services"},
{
label: "Contact", href: "#contact"},
],
},
{
items: [
{
label: "Gallery", href: "#gallery"},
{
label: "FAQ", href: "#faq"},
{
label: "Reviews", href: "#testimonials"},
],
},
]}
logoText="T&C SHEDS"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}