Merge version_1 into main #2
331
src/app/page.tsx
331
src/app/page.tsx
@@ -15,239 +15,122 @@ import { Home, ShieldCheck, Wrench } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="normal"
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Apex Roofing"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Apex Roofing"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Expert Roofing Solutions You Can Trust"
|
||||
description="Apex Roofing provides high-quality roof repairs, installations, and inspections. Protect your home with our durable and professional services."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a Free Quote",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-wearing-helmets_23-2149343655.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Expert Roofing Solutions You Can Trust"
|
||||
description="Apex Roofing provides high-quality roof repairs, installations, and inspections. Protect your home with our durable and professional services."
|
||||
buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-wearing-helmets_23-2149343655.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Built on Quality & Integrity"
|
||||
description="With over 15 years of experience, we specialize in comprehensive roofing services for residential properties. Our team is committed to safety, durability, and customer satisfaction."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14806.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Built on Quality & Integrity"
|
||||
description="With over 15 years of experience, we specialize in comprehensive roofing services for residential properties. Our team is committed to safety, durability, and customer satisfaction."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14806.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Home,
|
||||
title: "Roof Installation",
|
||||
description: "New roof installations using premium materials and expert craftsmanship.",
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "Roof Repair",
|
||||
description: "Fast and effective repair services to stop leaks and storm damage.",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Roof Inspection",
|
||||
description: "Detailed evaluations to assess your roof's condition and lifespan.",
|
||||
},
|
||||
]}
|
||||
title="Our Roofing Services"
|
||||
description="We offer a wide range of expert services to maintain the integrity of your home."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: Home, title: "Roof Installation", description: "New roof installations using premium materials and expert craftsmanship." },
|
||||
{ icon: Wrench, title: "Roof Repair", description: "Fast and effective repair services to stop leaks and storm damage." },
|
||||
{ icon: ShieldCheck, title: "Roof Inspection", description: "Detailed evaluations to assess your roof's condition and lifespan." },
|
||||
]}
|
||||
title="Our Roofing Services"
|
||||
description="We offer a wide range of expert services to maintain the integrity of your home."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "John Doe",
|
||||
handle: "@johndoe",
|
||||
testimonial: "Excellent service and professionalism. My new roof looks fantastic!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-wearing-helmets_23-2149343655.jpg?_wi=2",
|
||||
imageAlt: "professional roofing installation project",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sarah Smith",
|
||||
handle: "@sarahsmith",
|
||||
testimonial: "Quick response time and fixed my leak immediately. Highly recommended.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14806.jpg?_wi=2",
|
||||
imageAlt: "professional roofing contractor team",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mike Johnson",
|
||||
handle: "@mikej",
|
||||
testimonial: "Trustworthy and reliable. They explained everything clearly.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-prague_1398-2722.jpg?_wi=1",
|
||||
imageAlt: "roofing project house exterior",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Emily Davis",
|
||||
handle: "@emilyd",
|
||||
testimonial: "Top-tier quality and a great price. Thank you, Apex Roofing!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-wearing-helmets_23-2149343655.jpg?_wi=3",
|
||||
imageAlt: "professional roofing installation project",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Robert Brown",
|
||||
handle: "@robertb",
|
||||
testimonial: "Very satisfied with the installation. The crew was clean and professional.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14806.jpg?_wi=3",
|
||||
imageAlt: "professional roofing contractor team",
|
||||
},
|
||||
]}
|
||||
showRating={true}
|
||||
title="What Our Clients Say"
|
||||
description="Hear from local homeowners about our commitment to excellence."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "John Doe", handle: "@johndoe", testimonial: "Excellent service and professionalism. My new roof looks fantastic!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-wearing-helmets_23-2149343655.jpg", imageAlt: "professional roofing installation project" },
|
||||
{ id: "2", name: "Sarah Smith", handle: "@sarahsmith", testimonial: "Quick response time and fixed my leak immediately. Highly recommended.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14806.jpg", imageAlt: "professional roofing contractor team" },
|
||||
{ id: "3", name: "Mike Johnson", handle: "@mikej", testimonial: "Trustworthy and reliable. They explained everything clearly.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/top-view-prague_1398-2722.jpg", imageAlt: "roofing project house exterior" },
|
||||
{ id: "4", name: "Emily Davis", handle: "@emilyd", testimonial: "Top-tier quality and a great price. Thank you, Apex Roofing!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-wearing-helmets_23-2149343655.jpg", imageAlt: "professional roofing installation project" },
|
||||
{ id: "5", name: "Robert Brown", handle: "@robertb", testimonial: "Very satisfied with the installation. The crew was clean and professional.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-man-looking-into-solid-fuel-boiler-working-with-biofuels-economical-heating-top-view_169016-14806.jpg", imageAlt: "professional roofing contractor team" },
|
||||
]}
|
||||
showRating={true}
|
||||
title="What Our Clients Say"
|
||||
description="Hear from local homeowners about our commitment to excellence."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "How long does a roof installation take?",
|
||||
content: "Typically 1-3 days depending on roof size.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Do you offer warranties?",
|
||||
content: "Yes, we provide full material and workmanship warranties.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Are you licensed and insured?",
|
||||
content: "We are fully licensed, bonded, and insured contractors.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Here is what you need to know about your roofing project."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "How long does a roof installation take?", content: "Typically 1-3 days depending on roof size." },
|
||||
{ id: "q2", title: "Do you offer warranties?", content: "Yes, we provide full material and workmanship warranties." },
|
||||
{ id: "q3", title: "Are you licensed and insured?", content: "We are fully licensed, bonded, and insured contractors." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Here is what you need to know about your roofing project."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Request a Free Estimate"
|
||||
description="Contact us today for a free evaluation and professional quote."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Project details",
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-prague_1398-2722.jpg?_wi=2"
|
||||
mediaAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Request a Free Estimate"
|
||||
description="Contact us today for a free evaluation and professional quote."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name" },
|
||||
{ name: "email", type: "email", placeholder: "Your Email" },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Project details" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-prague_1398-2722.jpg"
|
||||
mediaAnimation="opacity"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-wearing-helmets_23-2149343655.jpg?_wi=4"
|
||||
columns={[
|
||||
{
|
||||
title: "Apex Roofing",
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2025 Apex Roofing"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-people-wearing-helmets_23-2149343655.jpg"
|
||||
columns={[
|
||||
{ title: "Apex Roofing", items: [{ label: "Home", href: "#hero" }, { label: "About", href: "#about" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
copyrightText="© 2025 Apex Roofing"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user