115 lines
4.5 KiB
TypeScript
115 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="largeSmall"
|
|
background="none"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Testimonials", id: "#testimonials"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="The Sons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Premium Plumbing Done Right the First Time"
|
|
description="Family-owned. Precision-driven. Trusted by homeowners who expect more."
|
|
buttons={[
|
|
{
|
|
text: "Request Service Now", href: "#contact"},
|
|
{
|
|
text: "Call Now: (555) 123-4567", href: "tel:5551234567"},
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdPJRqIgg8ngXJ9CfoPA8RvgIz/professional-plumber-at-work-cinematic-l-1774815972984-ee460ab4.png"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[{ type: 'text', content: 'Meet Phillip: A Legacy of Craftsmanship' }]}
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Learn More", href: "#" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSix
|
|
textboxLayout="split"
|
|
animationType="slide-up"
|
|
title="Better Communication, Better Results"
|
|
description="We keep you informed from the first call to the final sign-off."
|
|
features={[
|
|
{ id: 1, title: "Transparent Updates", description: "You'll always know exactly where we are in the process.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdPJRqIgg8ngXJ9CfoPA8RvgIz/clock-and-calendar-icon-digital-ui-desig-1774815974671-f15302f4.png" },
|
|
{ id: 2, title: "Detailed Estimates", description: "No surprises—just clear, upfront pricing every time.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdPJRqIgg8ngXJ9CfoPA8RvgIz/detail-of-high-precision-wrench-on-pipe--1774815972971-f82d5d2a.png" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="Highlights from Our Community"
|
|
description="Real feedback from neighbors who trust our family."
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
kpiItems={[{ label: "Jobs Done", value: "500+" }, { label: "Happy Families", value: "450+" }, { label: "Years Serving", value: "15+" }]}
|
|
testimonials={[
|
|
{ id: "1", name: "Sarah M.", role: "Homeowner", company: "", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BdPJRqIgg8ngXJ9CfoPA8RvgIz/portrait-of-a-happy-homeowner-warm-light-1774815972663-c16fad9f.png" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Book Your Slot"
|
|
title="Ready to Fix Your Plumbing?"
|
|
description="Phillip and his team are ready to help. Fill out the form below to get started."
|
|
background={{ variant: "gradient-bars" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{ items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] }
|
|
]}
|
|
logoText="The Sons Plumbing Service"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |