355 lines
11 KiB
TypeScript
355 lines
11 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactText from '@/components/sections/contact/ContactText';
|
||
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="expand-hover"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="pill"
|
||
contentWidth="small"
|
||
sizing="mediumLargeSizeLargeTitles"
|
||
background="floatingGradient"
|
||
cardStyle="outline"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="extrabold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleApple
|
||
navItems={[
|
||
{
|
||
name: "Home",
|
||
id: "hero",
|
||
},
|
||
{
|
||
name: "Services",
|
||
id: "services",
|
||
},
|
||
{
|
||
name: "About",
|
||
id: "about",
|
||
},
|
||
{
|
||
name: "Reviews",
|
||
id: "reviews",
|
||
},
|
||
]}
|
||
brandName="Roofing Pros"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardTestimonial
|
||
useInvertedBackground={true}
|
||
background={{
|
||
variant: "radial-gradient",
|
||
}}
|
||
title="Fort Worth’s Trusted Roofing Experts"
|
||
description="Luxury-level roofing craftsmanship for homes and businesses. Repairs, replacements, inspections, and emergency service available 24/7."
|
||
testimonials={[
|
||
{
|
||
name: "Sarah J.",
|
||
handle: "@fortworth",
|
||
testimonial: "They are always timely and very thorough in their work. Definitely the best around.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-attractive-young-mixed-race-model-with-large-afro-wearing-navy-jacket-her-naked-body-shorts_633478-1216.jpg",
|
||
},
|
||
{
|
||
name: "Mike D.",
|
||
handle: "@business",
|
||
testimonial: "They coordinated everything beautifully so I could keep my business running.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg",
|
||
},
|
||
{
|
||
name: "Elena R.",
|
||
handle: "@homeowner",
|
||
testimonial: "Professional, clean, and fast. The new roof looks incredible.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/joyful-business-woman-with-coffee-cup_23-2148095746.jpg",
|
||
},
|
||
{
|
||
name: "James T.",
|
||
handle: "@local",
|
||
testimonial: "Honest pricing and excellent communication throughout the process.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",
|
||
},
|
||
{
|
||
name: "Linda M.",
|
||
handle: "@resident",
|
||
testimonial: "Fixed my leak the same day I called. Lifesavers!",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-smiling-kitchen_107420-12357.jpg",
|
||
},
|
||
]}
|
||
buttons={[
|
||
{
|
||
text: "Get Free Inspection",
|
||
href: "#contact",
|
||
},
|
||
{
|
||
text: "Call Now",
|
||
href: "tel:4698485722",
|
||
},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/crescent-masjid-mountain-marbles-light-tourists_1142-1056.jpg"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/low-angle-closeup-shot-black-fire-escape-stairs_181624-3131.jpg",
|
||
alt: "Luxury roofing detail",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/wide-shot-brown-gray-houses-pink-sky_181624-3252.jpg",
|
||
alt: "Modern mansion roof",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/beautiful-shot-from-orange-buildings-fence-front-it_181624-19323.jpg",
|
||
alt: "Fort Worth architecture",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/brown-gray-house-blue-sky-daytime_422131-137.jpg",
|
||
alt: "Premium installation",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/man-walking-roof_1321-1040.jpg",
|
||
alt: "Roofer on site",
|
||
},
|
||
]}
|
||
marqueeItems={[
|
||
{
|
||
type: "text",
|
||
text: "Licensed & Insured",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "24/7 Emergency Support",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Award Winning Service",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Residential & Commercial",
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Fort Worth Local",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<InlineImageSplitTextAbout
|
||
useInvertedBackground={false}
|
||
heading={[
|
||
{
|
||
type: "text",
|
||
content: "Craftsmanship You Can Trust",
|
||
},
|
||
{
|
||
type: "image",
|
||
src: "http://img.b2bpic.net/free-photo/medium-shot-men-working-together_23-2149343659.jpg",
|
||
alt: "Our professional roofing team on a job site.",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardSix
|
||
textboxLayout="inline-image"
|
||
useInvertedBackground={true}
|
||
features={[
|
||
{
|
||
title: "Roof Repair",
|
||
description: "Quick, durable fixes for leaks and damage.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-metal-surface_23-2148796570.jpg",
|
||
},
|
||
{
|
||
title: "Leak Detection",
|
||
description: "Advanced tech to stop water before it enters.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet-outdoors_23-2149343635.jpg",
|
||
},
|
||
{
|
||
title: "Commercial Roofing",
|
||
description: "Expert warehouse and industrial solutions.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/empty-pool-with-chairs-near-cliff-sea_181624-3442.jpg",
|
||
},
|
||
]}
|
||
title="Premium Roofing Services"
|
||
description="Reliable, honest, and high-end craftsmanship for every project."
|
||
/>
|
||
</div>
|
||
|
||
<div id="transformations" data-section="transformations">
|
||
<ProductCardFour
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "1",
|
||
name: "Residential Luxury Upgrade",
|
||
price: "Featured",
|
||
variant: "Before/After",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/exterior-home_74190-4300.jpg",
|
||
},
|
||
{
|
||
id: "2",
|
||
name: "Commercial Warehouse",
|
||
price: "Featured",
|
||
variant: "Before/After",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-construction-worker-standing-rooftops-high-silos-storage-tanks_342744-442.jpg",
|
||
},
|
||
{
|
||
id: "3",
|
||
name: "Storm Damage Repair",
|
||
price: "Featured",
|
||
variant: "Before/After",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/photo-wood-texture-pattern_58702-13092.jpg",
|
||
},
|
||
]}
|
||
title="Before & After Transformations"
|
||
description="See the difference that quality craftsmanship makes."
|
||
/>
|
||
</div>
|
||
|
||
<div id="reviews" data-section="reviews">
|
||
<TestimonialCardTen
|
||
textboxLayout="default"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "1",
|
||
title: "Professionalism",
|
||
quote: "They are always timely and very thorough in their work.",
|
||
name: "Sarah J.",
|
||
role: "Homeowner",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg",
|
||
},
|
||
{
|
||
id: "2",
|
||
title: "Great Service",
|
||
quote: "Best and most reasonably priced roofing repair service in the area.",
|
||
name: "Michael Chen",
|
||
role: "Commercial Client",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-friendly-asian-girl-smiling-serving-coffee-barista-giving-you-cup-coffee_1258-199251.jpg",
|
||
},
|
||
{
|
||
id: "3",
|
||
title: "Peace of Mind",
|
||
quote: "When they finished the roof check, I felt so relieved.",
|
||
name: "David K.",
|
||
role: "Homeowner",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/boy-putting-up-electric-guitar_23-2148006422.jpg",
|
||
},
|
||
{
|
||
id: "4",
|
||
title: "Highly Recommended",
|
||
quote: "They coordinated everything beautifully so I could keep my business running.",
|
||
name: "Robert B.",
|
||
role: "Business Owner",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/experienced-florist-standing-with-arms-crossed_23-2148435667.jpg",
|
||
},
|
||
{
|
||
id: "5",
|
||
title: "Budget Friendly",
|
||
quote: "They came in right on my budget.",
|
||
name: "Emily R.",
|
||
role: "Homeowner",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022640.jpg",
|
||
},
|
||
]}
|
||
title="What Our Clients Say"
|
||
description="Trusted by hundreds across Fort Worth."
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactText
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "gradient-bars",
|
||
}}
|
||
text="Roof Leak? Storm Damage? We’re Available 24/7. Schedule your free inspection today at (469) 848-5722."
|
||
buttons={[
|
||
{
|
||
text: "Get My Free Estimate",
|
||
href: "#",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterMedia
|
||
imageSrc="http://img.b2bpic.net/free-photo/long-shot-man-with-helmet-sitting-roof_23-2149343711.jpg"
|
||
logoText="Roofing Repair & Installation Pros"
|
||
columns={[
|
||
{
|
||
title: "Company",
|
||
items: [
|
||
{
|
||
label: "About Us",
|
||
href: "#about",
|
||
},
|
||
{
|
||
label: "Services",
|
||
href: "#services",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Emergency",
|
||
items: [
|
||
{
|
||
label: "(469) 848-5722",
|
||
href: "tel:4698485722",
|
||
},
|
||
{
|
||
label: "Available 24/7",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Areas",
|
||
items: [
|
||
{
|
||
label: "Fort Worth",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Southlake",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Keller",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|