191 lines
7.8 KiB
TypeScript
191 lines
7.8 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import { Award, CheckCircle, Shield, Sparkles, Star, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSmall"
|
|
background="grid"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "home"},
|
|
{
|
|
name: "Services", id: "services"},
|
|
{
|
|
name: "Why Us", id: "why-us"},
|
|
{
|
|
name: "Reviews", id: "reviews"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="Vista Roofing Inc."
|
|
button={{
|
|
text: "(647) 567-5088", href: "tel:6475675088"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Toronto's Trusted Roofing Experts"
|
|
description="Quality roofing done right — on time, on budget, and built to last."
|
|
buttons={[
|
|
{
|
|
text: "Get a Free Quote", href: "#contact"},
|
|
{
|
|
text: "See Our Work", href: "#reviews"},
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/photo-ground-texture-pattern_58702-15922.jpg?_wi=1", imageAlt: "Vista Roofing Project 1"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/photo-ground-texture-pattern_58702-15922.jpg?_wi=2", imageAlt: "Vista Roofing Project 2"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/photo-ground-texture-pattern_58702-15922.jpg?_wi=3", imageAlt: "Vista Roofing Project 3"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/photo-ground-texture-pattern_58702-15922.jpg?_wi=4", imageAlt: "Vista Roofing Project 4"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/photo-ground-texture-pattern_58702-15922.jpg?_wi=5", imageAlt: "Vista Roofing Project 5"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/photo-ground-texture-pattern_58702-15922.jpg?_wi=6", imageAlt: "Vista Roofing Project 6"},
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
bentoComponent: "reveal-icon", icon: Shield,
|
|
title: "Roof Replacement", description: "Full tear-off and replacement for long-term protection."},
|
|
{
|
|
bentoComponent: "reveal-icon", icon: Zap,
|
|
title: "Shingle Repair", description: "Targeted repairs for damaged or missing shingles."},
|
|
{
|
|
bentoComponent: "reveal-icon", icon: Award,
|
|
title: "Attic & Roof Vents", description: "Improved airflow to prevent moisture buildup."},
|
|
{
|
|
bentoComponent: "reveal-icon", icon: Star,
|
|
title: "Soffit & Fascia Repair", description: "Protecting your roof edge and home structure."},
|
|
{
|
|
bentoComponent: "reveal-icon", icon: CheckCircle,
|
|
title: "Storm Damage Repair", description: "Fast restoration after extreme weather events."},
|
|
{
|
|
bentoComponent: "reveal-icon", icon: Sparkles,
|
|
title: "Eave & Gutter Work", description: "Professional drainage solutions for your roof."},
|
|
]}
|
|
title="What We Do"
|
|
description="Expert roofing solutions tailored to your home's needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-us" data-section="why-us">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", icon: Star,
|
|
title: "Customer Rating", value: "5.0"},
|
|
{
|
|
id: "m2", icon: CheckCircle,
|
|
title: "Satisfied Customers", value: "17+"},
|
|
{
|
|
id: "m3", icon: Award,
|
|
title: "Serving GTA", value: "Since 2019"},
|
|
]}
|
|
title="Why Homeowners Trust Vista Roofing"
|
|
description="We stand behind our work with quality, honesty, and clear communication."
|
|
/>
|
|
</div>
|
|
|
|
<div id="reviews" data-section="reviews">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Mark Ramkishun", imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-european-guy-living-alone-spending-all-day-home-while-social-distancing-being-optimistic-carefree-looking-camera-with-smile_343059-2035.jpg?_wi=1"},
|
|
{
|
|
id: "2", name: "Patrick Kwan", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-handsome-man_23-2148238926.jpg"},
|
|
{
|
|
id: "3", name: "Ana Shah", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67131.jpg"},
|
|
{
|
|
id: "4", name: "Kerry Wei", imageSrc: "http://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg"},
|
|
{
|
|
id: "5", name: "Sarah Miller", imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-european-guy-living-alone-spending-all-day-home-while-social-distancing-being-optimistic-carefree-looking-camera-with-smile_343059-2035.jpg?_wi=2"},
|
|
]}
|
|
cardTitle="What Our Customers Say"
|
|
cardTag="5.0 ⭐ Rated on Google"
|
|
cardAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Contact Us"
|
|
title="Get Your Free Roofing Estimate"
|
|
description="Ready to protect your home? Send us a message and we'll reach out shortly."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Vista Roofing Inc.", items: [
|
|
{
|
|
label: "26 Warren Bradley St, Markham, ON L6C 2W5", href: "#"},
|
|
{
|
|
label: "(647) 567-5088", href: "tel:6475675088"},
|
|
],
|
|
},
|
|
{
|
|
title: "Quick Links", items: [
|
|
{
|
|
label: "Services", href: "#services"},
|
|
{
|
|
label: "Why Us", href: "#why-us"},
|
|
{
|
|
label: "Reviews", href: "#reviews"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 Vista Roofing Inc. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|