Merge version_1 into main #1
353
src/app/page.tsx
353
src/app/page.tsx
@@ -18,252 +18,131 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Features",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Detroid"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Detroid"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Detroid Construction"
|
||||
description="Building the future of urban living through precision, passion, and architectural excellence. Your trusted partner for modern construction."
|
||||
buttons={[
|
||||
{
|
||||
text: "View Projects",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283288.jpg",
|
||||
imageAlt: "Construction project",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-working-elegant-cozy-office-space_23-2149548739.jpg",
|
||||
imageAlt: "Urban building",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/raw-concrete-building-construction-against-cloudy-sky_626616-500.jpg",
|
||||
imageAlt: "Construction site",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-modern-building-with-wooden-walls-blue-windows-white-lamp-lights_181624-6838.jpg",
|
||||
imageAlt: "Architectural build",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/building-construction-worker-site-with-architect_23-2149124270.jpg",
|
||||
imageAlt: "Building process",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-building-full-windows_1127-102.jpg",
|
||||
imageAlt: "Final design",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Detroid Construction"
|
||||
description="Building the future of urban living through precision, passion, and architectural excellence. Your trusted partner for modern construction."
|
||||
buttons={[
|
||||
{ text: "View Projects", href: "#features" },
|
||||
{ text: "Contact Us", href: "#contact" },
|
||||
]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/abstract-city-building-shadows_23-2149283288.jpg", imageAlt: "modern construction project site" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/people-working-elegant-cozy-office-space_23-2149548739.jpg", imageAlt: "luxury residential building facade" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/raw-concrete-building-construction-against-cloudy-sky_626616-500.jpg", imageAlt: "construction engineering building" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/low-angle-view-modern-building-with-wooden-walls-blue-windows-white-lamp-lights_181624-6838.jpg", imageAlt: "architectural building interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/building-construction-worker-site-with-architect_23-2149124270.jpg", imageAlt: "building renovation progress" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-building-full-windows_1127-102.jpg", imageAlt: "modern urban construction" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Crafting Architectural Excellence"
|
||||
description={[
|
||||
"At Detroid, we believe that every building tells a story. With over 20 years of experience in residential and commercial construction, we combine traditional craftsmanship with innovative technology to deliver projects that stand the test of time.",
|
||||
"Our team of dedicated architects, engineers, and project managers work tirelessly to ensure every detail meets our rigorous standards of safety, quality, and aesthetics.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={true}
|
||||
title="Crafting Architectural Excellence"
|
||||
description={[
|
||||
"At Detroid, we believe that every building tells a story. With over 20 years of experience in residential and commercial construction, we combine traditional craftsmanship with innovative technology to deliver projects that stand the test of time.", "Our team of dedicated architects, engineers, and project managers work tirelessly to ensure every detail meets our rigorous standards of safety, quality, and aesthetics."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Quality Materials",
|
||||
description: "We source only the finest construction materials to ensure long-term durability and structural integrity.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-building-facade-with-geometric-protrusions_23-2152032131.jpg",
|
||||
},
|
||||
{
|
||||
title: "Sustainable Building",
|
||||
description: "Eco-friendly construction practices that reduce environmental impact without sacrificing performance.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/eco-friendly-wind-power-project-layout-desk_23-2148847799.jpg",
|
||||
},
|
||||
{
|
||||
title: "On-Time Delivery",
|
||||
description: "Our streamlined processes guarantee project completion within agreed timelines and budgets.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delivery-team-review-shipment-logistics-looking-list-products-order-details-storage-room-young-people-checking-inventory-list-computer-working-quality-control-handheld-shot_482257-63352.jpg",
|
||||
},
|
||||
]}
|
||||
title="Why Choose Detroid?"
|
||||
description="We don't just build structures; we create environments where memories are formed and businesses thrive."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Quality Materials", description: "We source only the finest construction materials to ensure long-term durability and structural integrity.", imageSrc: "http://img.b2bpic.net/free-photo/modern-building-facade-with-geometric-protrusions_23-2152032131.jpg" },
|
||||
{ title: "Sustainable Building", description: "Eco-friendly construction practices that reduce environmental impact without sacrificing performance.", imageSrc: "http://img.b2bpic.net/free-photo/eco-friendly-wind-power-project-layout-desk_23-2148847799.jpg" },
|
||||
{ title: "On-Time Delivery", description: "Our streamlined processes guarantee project completion within agreed timelines and budgets.", imageSrc: "http://img.b2bpic.net/free-photo/delivery-team-review-shipment-logistics-looking-list-products-order-details-storage-room-young-people-checking-inventory-list-computer-working-quality-control-handheld-shot_482257-63352.jpg" },
|
||||
]}
|
||||
title="Why Choose Detroid?"
|
||||
description="We don't just build structures; we create environments where memories are formed and businesses thrive."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
role: "Architect",
|
||||
company: "Studio Design",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-architect-looking-camera_23-2148242889.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "James Chen",
|
||||
role: "Owner",
|
||||
company: "Tech Corp",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/businessman_23-2148006271.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Client",
|
||||
company: "Private Residency",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-man_23-2151020288.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Mark Johnson",
|
||||
role: "Developer",
|
||||
company: "Urban Homes",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-architects-shaking-hands_23-2148269341.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Linda White",
|
||||
role: "Designer",
|
||||
company: "Elite Interiors",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-woman-showing-model-house_23-2148040021.jpg",
|
||||
},
|
||||
]}
|
||||
kpiItems={[
|
||||
{
|
||||
value: "500+",
|
||||
label: "Projects Completed",
|
||||
},
|
||||
{
|
||||
value: "150+",
|
||||
label: "Happy Clients",
|
||||
},
|
||||
{
|
||||
value: "25+",
|
||||
label: "Years Experience",
|
||||
},
|
||||
]}
|
||||
title="Client Success Stories"
|
||||
description="Hear from those who have trusted Detroid to bring their vision to life."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", role: "Architect", company: "Studio Design", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-architect-looking-camera_23-2148242889.jpg" },
|
||||
{ id: "2", name: "James Chen", role: "Owner", company: "Tech Corp", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/businessman_23-2148006271.jpg" },
|
||||
{ id: "3", name: "Elena Rodriguez", role: "Client", company: "Private Residency", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-hispanic-business-man_23-2151020288.jpg" },
|
||||
{ id: "4", name: "Mark Johnson", role: "Developer", company: "Urban Homes", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/low-angle-architects-shaking-hands_23-2148269341.jpg" },
|
||||
{ id: "5", name: "Linda White", role: "Designer", company: "Elite Interiors", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-american-woman-showing-model-house_23-2148040021.jpg" },
|
||||
]}
|
||||
kpiItems={[
|
||||
{ value: "500+", label: "Projects Completed" },
|
||||
{ value: "150+", label: "Happy Clients" },
|
||||
{ value: "25+", label: "Years Experience" },
|
||||
]}
|
||||
title="Client Success Stories"
|
||||
description="Hear from those who have trusted Detroid to bring their vision to life."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "How do I get a quote?",
|
||||
content: "Contact us through our form, and our project managers will get in touch to assess your requirements.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Do you handle permits?",
|
||||
content: "Yes, we handle all necessary building permits and documentation for every project we undertake.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "What regions do you serve?",
|
||||
content: "We currently serve the greater metro area and surrounding suburban regions.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/architects-checking-documents_1098-4061.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about starting your building journey with Detroid."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "How do I get a quote?", content: "Contact us through our form, and our project managers will get in touch to assess your requirements." },
|
||||
{ id: "2", title: "Do you handle permits?", content: "Yes, we handle all necessary building permits and documentation for every project we undertake." },
|
||||
{ id: "3", title: "What regions do you serve?", content: "We currently serve the greater metro area and surrounding suburban regions." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/architects-checking-documents_1098-4061.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about starting your building journey with Detroid."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "animated-grid",
|
||||
}}
|
||||
text="Ready to start your building project? Let's build your future together."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get in Touch",
|
||||
href: "mailto:hello@detroid.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "animated-grid" }}
|
||||
text="Ready to start your building project? Let's build your future together."
|
||||
buttons={[{ text: "Get in Touch", href: "mailto:hello@detroid.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Detroid"
|
||||
copyrightText="© 2025 Detroid Building Construction"
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "#",
|
||||
ariaLabel: "Linkedin",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Detroid"
|
||||
copyrightText="© 2025 Detroid Building Construction"
|
||||
socialLinks={[
|
||||
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
{ icon: Linkedin, href: "#", ariaLabel: "Linkedin" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user