128 lines
9.5 KiB
TypeScript
128 lines
9.5 KiB
TypeScript
"use client";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import { Facebook, Hammer, Instagram, ShieldCheck, Twitter, Users } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSizeMediumTitles"
|
|
background="noiseDiagonalGradient"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[{name: 'Home', id: 'hero'}, {name: 'About', id: 'about'}, {name: 'Services', id: 'features'}, {name: 'Testimonials', id: 'testimonials'}, {name: 'FAQ', id: 'faq'}, {name: 'Contact', id: 'contact'}]}
|
|
brandName="Rick's Roofing"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
title="Rick's Roofing and Repairs Inc."
|
|
description="Your trusted partner for all roofing solutions, delivering quality craftsmanship and lasting protection for your home or business."
|
|
background={{variant: 'radial-gradient'}}
|
|
buttons={[{text: 'Get a Free Estimate', href: 'contact'}, {text: 'Our Services', href: 'features'}]}
|
|
mediaAnimation="blur-reveal"
|
|
imageSrc="https://img.b2bpic.net/free-photo/new-roof-house-residential-construction-roofing-contractor-installing-new-roof-shingles-covering_342744-239.jpg"
|
|
imageAlt="Professional roofer installing new shingles on a residential house"
|
|
imagePosition="right"
|
|
fixedMediaHeight={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="Quality Roofing Services You Can Trust"
|
|
metrics={[{icon: Hammer, label: 'Years in Business', value: '20+'}, {icon: Users, label: 'Satisfied Customers', value: '5000+'}, {icon: ShieldCheck, label: 'Projects Completed', value: '3000+'}]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFour
|
|
features={[{id: '1', title: 'Residential Roofing', author: "Rick's Roofing Team", description: "From minor repairs to complete re-roofs, we ensure your home's roof is durable and aesthetically pleasing. We handle all types of residential roofing materials.", tags: ['Residential', 'Repairs'], imageSrc: 'https://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24989.jpg', imageAlt: 'Residential roof with new shingles'}, {id: '2', title: 'Commercial Roofing', author: "Rick's Roofing Team", description: 'Protect your business with our reliable commercial roofing services. We specialize in flat roofs, TPO, and other industrial solutions.', tags: ['Commercial', 'Installation'], imageSrc: 'https://img.b2bpic.net/free-photo/agricultural-silo_146671-19121.jpg', imageAlt: 'Commercial flat roof on a building'}]}
|
|
animationType="slide-up"
|
|
title="Our Comprehensive Services"
|
|
description="We offer a full range of roofing services tailored to meet your specific needs."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="Services"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
testimonials={[{id: '1', name: 'Sarah Johnson', role: 'Homeowner', testimonial: "Rick's Roofing did an incredible job on our new roof. Professional, efficient, and great quality! Highly recommend their services.", imageSrc: 'https://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg'}, {id: '2', name: 'Michael Chen', role: 'Business Owner', testimonial: 'Their commercial roofing team handled our project flawlessly. The new roof looks fantastic and was completed ahead of schedule.', imageSrc: 'https://img.b2bpic.net/free-photo/smiling-young-businessman-suit-looking-camera-meeting_1163-4654.jpg'}, {id: '3', name: 'Emily Rodriguez', role: 'Property Manager', testimonial: "For urgent repairs, Rick's Roofing is always our first call. Their responsiveness and expertise are unmatched. A truly reliable company.", imageSrc: 'https://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg'}, {id: '4', name: 'David Kim', role: 'Residential Client', testimonial: "We had a leak, and Rick's team identified and fixed it quickly. The service was excellent, and they kept us informed every step of the way.", imageSrc: 'https://img.b2bpic.net/free-photo/portrait-worker-factory_107420-96555.jpg'}]}
|
|
animationType="depth-3d"
|
|
title="What Our Customers Say"
|
|
description="Hear directly from our satisfied clients about their experience with Rick's Roofing and Repairs Inc."
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
tag="Testimonials"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metric" data-section="metric">
|
|
<MetricCardFourteen
|
|
title="Why Choose Rick's Roofing?"
|
|
tag="Our Commitment"
|
|
metrics={[{id: '1', value: 'Expert Team', description: 'Our highly skilled and certified roofers ensure top-quality workmanship on every project.'}, {id: '2', value: 'Customer Satisfaction', description: 'We prioritize your satisfaction with clear communication, transparent pricing, and reliable service.'}, {id: '3', value: 'Durable Materials', description: "Using only the best materials, we guarantee long-lasting results that protect your investment."}, {id: '4', value: 'Timely Completion', description: 'We pride ourselves on completing projects efficiently and on schedule, without compromising quality.'}]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
faqs={[{id: '1', title: 'What types of roofing services do you offer?', content: 'We offer a full range of residential and commercial roofing services, including new installations, repairs, replacements, and maintenance for various roofing materials like asphalt shingles, metal roofs, flat roofs, and more.'}, {id: '2', title: 'Are you licensed and insured?', content: "Yes, Rick's Roofing and Repairs Inc. is fully licensed, bonded, and insured. We prioritize safety and compliance with all local regulations to provide you with peace of mind."}, {id: '3', title: 'How do I get a free estimate?', content: "You can request a free, no-obligation estimate by filling out our contact form, calling us directly, or emailing us. We'll schedule a convenient time to assess your roofing needs."}, {id: '4', title: 'What areas do you serve?', content: 'We proudly serve [Your City/Region] and the surrounding areas. Please contact us to confirm service availability in your specific location.'}, {id: '5', title: 'Do you offer warranty on your work?', content: 'Yes, we stand by the quality of our workmanship and the materials we use. We offer comprehensive warranties on both our labor and the roofing products we install.'}]}
|
|
title="Frequently Asked Questions"
|
|
description="Find quick answers to the most common questions about our roofing services."
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get Your Free Roofing Estimate Today!"
|
|
description="Reach out to us to discuss your roofing project, ask questions, or schedule a consultation. We're here to help!"
|
|
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 (Optional)'}]}
|
|
textarea={{name: 'message', placeholder: 'Tell us about your roofing needs...', rows: 5, required: true}}
|
|
useInvertedBackground={false}
|
|
imageSrc="https://img.b2bpic.net/free-photo/uniform-construction-tools-wooden-table-top-view_169016-24245.jpg"
|
|
imageAlt="Roofing crew working on a roof with tools and materials"
|
|
mediaAnimation="opacity"
|
|
mediaPosition="right"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Rick's Roofing"
|
|
copyrightText="© 2024 Rick's Roofing and Repairs Inc. All rights reserved."
|
|
socialLinks={[{icon: Facebook, href: 'https://facebook.com/ricksroofing', ariaLabel: 'Facebook'}, {icon: Twitter, href: 'https://twitter.com/ricksroofing', ariaLabel: 'Twitter'}, {icon: Instagram, href: 'https://instagram.com/ricksroofing', ariaLabel: 'Instagram'}]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|