Files
e21ca6e1-0dc9-4e94-830f-433…/src/app/page.tsx
2026-04-25 07:38:12 +00:00

244 lines
7.6 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="background-highlight"
borderRadius="soft"
contentWidth="medium"
sizing="largeSizeMediumTitles"
background="aurora"
cardStyle="outline"
primaryButtonStyle="double-inset"
secondaryButtonStyle="radial-glow"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "/",
},
{
name: "About",
id: "/about",
},
{
name: "Services",
id: "/services",
},
{
name: "Projects",
id: "/projects",
},
{
name: "Contact",
id: "/contact",
},
]}
brandName="MIKE-SHINE"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardCarousel
background={{
variant: "plain",
}}
title="Premium Roofing Solutions in Port Harcourt"
description="Delivering durable, elegant, and professionally engineered roofing systems that stand the test of time."
buttons={[
{
text: "Get a Quote",
href: "/contact",
},
{
text: "Call Now",
href: "tel:08081314550",
},
]}
mediaItems={[
{
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-smiley-man-working-roof_23-2149343672.jpg?_wi=1",
imageAlt: "Luxury Roof Installation",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/modern-skyscrapers-japan-business-district_23-2148836784.jpg",
imageAlt: "Completed Residential Roofing",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/glass-roof-modern-building-blue-sky_181624-6620.jpg",
imageAlt: "Completed Commercial Roofing",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/top-view-prague_1398-2722.jpg",
imageAlt: "Architectural Roofing Project",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/3d-geometric-abstract-twist-background_1048-17253.jpg",
imageAlt: "Structural Finish Detail",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/front-view-construction-roof_23-2148748814.jpg",
imageAlt: "Professional Engineering",
},
]}
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardTwo
animationType="slide-up"
textboxLayout="split"
gridVariant="bento-grid"
useInvertedBackground={false}
metrics={[
{
id: "m1",
value: "4.8",
description: "Client Rating",
},
{
id: "m2",
value: "30+",
description: "Happy Clients",
},
{
id: "m3",
value: "10+",
description: "Years Experience",
},
]}
title="Engineering Excellence"
description="Trusted by hundreds for quality roofing."
/>
</div>
<div id="features" data-section="features">
<FeatureCardThree
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
features={[
{
title: "Roof Installation",
description: "New builds with precision and premium materials.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-men-working-together_23-2149343665.jpg",
},
{
title: "Roof Replacement",
description: "Upgrade old or damaged roofs to modern materials.",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-roof-house-made-wooden-tiles_169016-24747.jpg",
},
{
title: "Roof Repairs",
description: "Fast, reliable fixes and reinforcement.",
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet_23-2149343634.jpg",
},
]}
title="Our Roofing Services"
description="Precision engineering and premium materials for your property."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Sarah J.",
handle: "@client1",
testimonial: "Affordable prices, trustworthy, professional service throughout.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/businesspeople-working-together_23-2148908963.jpg",
},
{
id: "t2",
name: "Michael C.",
handle: "@client2",
testimonial: "They understand quality roof installation like no other.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-working-as-real-estate-agent_23-2151065019.jpg",
},
{
id: "t3",
name: "Emily R.",
handle: "@client3",
testimonial: "Always deliver eye-catching, durable results. Very impressed.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/workers-having-little-chat-while-having-cup-coffee_329181-15689.jpg",
},
{
id: "t4",
name: "David K.",
handle: "@client4",
testimonial: "Professional, clean, and timely project delivery.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg",
},
{
id: "t5",
name: "Amaka E.",
handle: "@client5",
testimonial: "Highly recommended for structural finishing in PH.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/cute-family-holding-roof-their-head_23-2149038355.jpg",
},
]}
showRating={true}
title="Client Feedback"
description="Hear what our clients say about our professional roofing work."
/>
</div>
<div id="socialProof" data-section="socialProof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={false}
title="Trusted Partnerships"
description="Building long-term value with industry leaders."
names={[
"Alpha Construction",
"Delta Structural",
"Beta Real Estate",
"Gamma Engineering",
"Epsilon Developments",
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="MIKE-SHINE"
leftLink={{
text: "Privacy Policy",
href: "#",
}}
rightLink={{
text: "Contact Us",
href: "/contact",
}}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}