Files
d0fab969-e686-4cf8-89d1-e58…/src/app/page.tsx
2026-04-18 16:34:54 +00:00

182 lines
9.6 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 FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import TextAbout from '@/components/sections/about/TextAbout';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="fluid"
cardStyle="solid"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="layered"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "hero" },
{ name: "About", id: "/about" },
{ name: "Services", id: "services" },
{ name: "Projects", id: "projects" },
{ name: "Contact", id: "contact" },
]}
brandName="DC Construction"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{ variant: "gradient-bars" }}
title="Building the Future of Washington DC"
description="Premium construction services dedicated to quality, precision, and the local community. Your vision, expertly built."
buttons={[
{ text: "Get a Quote", href: "#contact" },
{ text: "Our Services", href: "#services" },
]}
mediaItems={[
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-tokyo-street-background_23-2149394930.jpg", imageAlt: "Construction site project 1" },
{ imageSrc: "http://img.b2bpic.net/free-photo/diverse-engineers-handling-assembly-workflow-with-industrial-plans-standing-near-steel-machinery_482257-136066.jpg", imageAlt: "Construction site project 2" },
{ imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-vienna-railway-station-vienna-austria_181624-10305.jpg", imageAlt: "Construction site project 3" },
{ imageSrc: "http://img.b2bpic.net/free-photo/analog-city-landscape-with-buildings-daylight_23-2149661430.jpg", imageAlt: "Construction site project 4" },
{ imageSrc: "http://img.b2bpic.net/free-photo/bird-s-eye-view-city-with-old-buildings-evening-with-mountains_181624-15547.jpg", imageAlt: "Construction site project 5" },
{ imageSrc: "http://img.b2bpic.net/free-photo/monochrome-scene-depicting-life-workers-construction-industry-site_23-2151431544.jpg", imageAlt: "Construction site project 6" },
]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
useInvertedBackground={false}
title="Your Trusted Local Construction Partner"
buttons={[
{ text: "Learn More", href: "/about" },
]}
/>
</div>
<div id="services" data-section="services">
<FeatureCardThree
animationType="slide-up"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={false}
features={[
{ title: "Residential Construction", description: "Custom homes and full renovations with local expertise.", imageSrc: "http://img.b2bpic.net/free-photo/draftsman-construction-site_23-2147785488.jpg" },
{ title: "Commercial Builds", description: "Professional spaces built to exceed industry standards.", imageSrc: "http://img.b2bpic.net/free-photo/architectural-blueprints_1359-490.jpg" },
{ title: "Renovation Services", description: "Revitalizing existing structures with modern techniques.", imageSrc: "http://img.b2bpic.net/free-photo/aerial-view-business-district-night_107420-95724.jpg" },
]}
title="Our Expert Services"
description="Comprehensive construction solutions for residential and commercial projects."
/>
</div>
<div id="projects" data-section="projects">
<ProductCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Classic Home Facade", price: "Completed", imageSrc: "http://img.b2bpic.net/free-photo/city-background-panoramic-view_23-2148892916.jpg" },
{ id: "p2", name: "Modern Office Space", price: "In Progress", imageSrc: "http://img.b2bpic.net/free-photo/neo-brutalism-inspired-building_23-2151004769.jpg" },
{ id: "p3", name: "Custom Masonry Work", price: "Completed", imageSrc: "http://img.b2bpic.net/free-photo/architect-showing-miniature-projects_23-2148242924.jpg" },
{ id: "p4", name: "Apartment Renovation", price: "Completed", imageSrc: "http://img.b2bpic.net/free-photo/modern-kitchen-design-interior_23-2150954766.jpg" },
{ id: "p5", name: "Sustainable Housing", price: "In Progress", imageSrc: "http://img.b2bpic.net/free-photo/city-building-with-vegetation_23-2148798649.jpg" },
{ id: "p6", name: "Urban Design Build", price: "Completed", imageSrc: "http://img.b2bpic.net/free-photo/construction-building-architecture-concept_53876-125393.jpg" },
]}
title="Featured Projects"
description="Showcasing our dedication to excellence and architectural detail."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="depth-3d"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
metrics={[
{ id: "m1", value: "15+", description: "Years of Experience" },
{ id: "m2", value: "300+", description: "Projects Completed" },
{ id: "m3", value: "100%", description: "Client Satisfaction" },
]}
title="Results You Can Rely On"
description="Numbers behind our commitment to excellence."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardTen
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "1", title: "Great Work", quote: "Reliable and precise. DC Construction transformed our home.", name: "Sarah Miller", role: "Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/happy-mature-lawyer-sitting-with-business-customer_23-2147898441.jpg" },
{ id: "2", title: "Highly Recommend", quote: "Professional team with exceptional attention to detail.", name: "Mark Roberts", role: "Business Owner", imageSrc: "http://img.b2bpic.net/free-photo/front-view-happy-old-man-with-white-helmet_23-2148269398.jpg" },
{ id: "3", title: "Excellent Service", quote: "Exceeded expectations on our office renovation.", name: "Jessica Lee", role: "Office Manager", imageSrc: "http://img.b2bpic.net/free-photo/constructors-talking-construction-site_23-2147710751.jpg" },
{ id: "4", title: "Reliable Partner", quote: "Solid construction work delivered on time and budget.", name: "David Clark", role: "Real Estate Developer", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-man-choosing-color_23-2148903521.jpg" },
{ id: "5", title: "Outstanding Quality", quote: "The quality of masonry is top-tier. Very happy.", name: "Anna Petrova", role: "Homeowner", imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-keys-just-bought-new-appartment_1303-28900.jpg" },
]}
title="What Clients Say"
description="Professional construction, reliable results."
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
textboxLayout="default"
useInvertedBackground={false}
faqs={[
{ id: "f1", title: "Do you handle residential and commercial projects?", content: "Yes, our team is highly experienced in both domains." },
{ id: "f2", title: "How long do most projects take?", content: "Timeline varies by project size; we provide detailed estimates upon consultation." },
{ id: "f3", title: "Are you licensed in Washington DC?", content: "Yes, fully licensed, bonded, and insured in the DC area." },
]}
title="Frequently Asked Questions"
description="Answers to commonly asked questions about our process."
faqsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Let's Build Together"
description="CONTACT | +1 209-568-8813"
inputs={[
{ name: "name", type: "text", placeholder: "Your Name" },
{ name: "email", type: "email", placeholder: "Your Email" },
]}
textarea={{ name: "message", placeholder: "Tell us about your project" }}
imageSrc="http://img.b2bpic.net/free-photo/happy-african-american-lady-standing-near-model-building-table_23-2148039868.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{ title: "Links", items: [{ label: "About", href: "/about" }, { label: "Services", href: "#services" }, { label: "Contact", href: "#contact" }] },
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
]}
logoText="DC Construction"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}