Switch to version 5: modified src/app/page.tsx

This commit is contained in:
2026-04-29 14:13:25 +00:00
parent 86bf0151e8
commit 8bdfa3c5dd

View File

@@ -2,13 +2,17 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import { Award } from "lucide-react";
export default function LandingPage() {
return (
@@ -25,88 +29,156 @@ export default function LandingPage() {
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "About", id: "about" },
{ name: "Features", id: "features" },
{ name: "FAQ", id: "faq" },
{ name: "Proof", id: "proof" },
]}
brandName="Estatia"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "About", id: "about" },
{ name: "Services", id: "services" },
{ name: "Our Work", id: "projects" },
{ name: "Process", id: "process" },
{ name: "Contact", id: "contact" },
]}
brandName="Estatia"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
background={{ variant: "gradient-bars" }}
title="Renovation That Redefines Your Home."
description="Premium kitchen, bathroom & home transformations built with natural materials and lasting craftsmanship."
buttons={[{ text: "Get a Quote", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/photorealistic-wooden-house-interior-with-timber-decor-furnishings_23-2151263514.jpg"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
background={{ variant: "gradient-bars" }}
title="Renovation That Redefines Your Home."
description="Premium kitchen, bathroom & home transformations built with natural materials and lasting craftsmanship."
tag="● Available for New Projects"
buttons={[
{ text: "Get a Quote", href: "#contact" },
{ text: "Explore Services ↗", href: "#services" },
]}
imageSrc="http://img.b2bpic.net/free-photo/photorealistic-wooden-house-interior-with-timber-decor-furnishings_23-2151263514.jpg"
imageAlt="Kitchen Reno"
/>
</div>
<div id="about" data-section="about">
<MetricSplitMediaAbout
title="Quality & Precision"
description="With 15+ years of experience, we transform spaces into sanctuaries using sustainable materials."
metrics={[
{ value: "15+", title: "Years Experience" },
{ value: "500+", title: "Projects Completed" },
{ value: "100%", title: "Client Satisfaction" }
]}
imageSrc="http://img.b2bpic.net/free-photo/young-woman-with-messy-bun-hair-style_23-2149459199.jpg"
useInvertedBackground={false}
mediaAnimation="opacity"
metricsAnimation="slide-up"
/>
</div>
<div id="marquee" data-section="marquee">
<SocialProofOne
title="Renovation Services"
description="Trusted by homeowners for quality transformations."
textboxLayout="default"
useInvertedBackground={false}
names={[
"KITCHEN RENOVATIONS ·", "BATHROOM REMODELLING ·", "HOME EXTENSIONS ·", "CUSTOM JOINERY ·", "INTERIOR DESIGN ·", "FLOORING & TILING ·", "OUTDOOR UPGRADES ·", "FULL RENOVATIONS ·"]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardNineteen
title="Our Renovation Process"
description="We make your renovation simple, transparent, and rewarding."
textboxLayout="split"
useInvertedBackground={false}
features={[
{ tag: "Planning", title: "Design Phase", subtitle: "Concept creation", description: "Collaborative design process.", imageSrc: "http://img.b2bpic.net/free-photo/couple-painting-walls-their-new-home-together_23-2149086830.jpg" },
{ tag: "Execution", title: "Construction", subtitle: "Skilled labor", description: "High-precision building work.", imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-kitchen-dining-area-with-white-furniture_23-2151983256.jpg" }
]}
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={false}
tag="ABOUT US"
title="Home Improvement Specialists"
description="We specialize in crafting bespoke living spaces using natural stone, timber, and sustainable materials. With 15+ years of experience, we transform houses into sanctuaries that reflect your personal aesthetic and lifestyle needs."
subdescription="Every project begins with a deep listening process, ensuring that the final build is a perfect harmony of function and form."
icon={Award}
imageSrc="http://img.b2bpic.net/free-photo/young-woman-with-messy-bun-hair-style_23-2149459199.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
sideTitle="Frequently Asked Questions"
sideDescription="Everything you need to know about our renovation process."
faqs={[
{ id: "1", title: "How do I start?", content: "Simply book a consultation through our contact form." },
{ id: "2", title: "Do you offer guarantees?", content: "Yes, we stand by the quality of our craftsmanship." }
]}
faqsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="services" data-section="services">
<FaqDouble
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "1", title: "Kitchen Renovations", content: "Custom cabinetry, natural stone bench tops, and layouts designed for how you live." },
{ id: "2", title: "Bathroom Renovations", content: "Timber, stone, and glass — spa-like sanctuaries tailored to your style." },
{ id: "3", title: "Home Extensions", content: "Open-plan additions that connect inside to out, adding space and value." },
{ id: "4", title: "Custom Joinery", content: "Bespoke built-ins, wardrobes, and cabinetry from sustainably sourced materials." },
{ id: "5", title: "Full Home Renovations", content: "Complete transformations from concept to final reveal." },
{ id: "6", title: "Exterior & Outdoor Works", content: "Driveways, patios, landscaping — first impressions count." },
]}
title="Services Built Around You"
description="Customized renovation solutions designed to enhance your daily life."
faqsAnimation="blur-reveal"
/>
</div>
<div id="proof" data-section="proof">
<SocialProofOne
title="Trusted By Clients"
names={["Kitchen Renovations", "Bathroom Remodelling", "Custom Joinery", "Home Extensions"]}
textboxLayout="default"
description="Partnering with industry leaders to deliver excellence."
useInvertedBackground={false}
/>
</div>
<div id="projects" data-section="projects">
<ProductCardThree
animationType="slide-up"
textboxLayout="split-description"
gridVariant="bento-grid"
useInvertedBackground={false}
products={[
{ id: "p1", name: "Modular Kitchen", price: "2024", imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-timber-house-interior-with-wooden-decor-furnishings_23-2151263585.jpg" },
{ id: "p2", name: "Timber Joinery", price: "2024", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-kitchen-interior-design_23-2150976546.jpg" },
{ id: "p3", name: "Stone Bathroom", price: "2023", imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-timber-house-interior-with-wooden-decor-furnishings_23-2151263629.jpg" },
{ id: "p4", name: "Garden Extension", price: "2023", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-shot-modern-house-kitchen_181624-4007.jpg" },
{ id: "p5", name: "Living Reno", price: "2022", imageSrc: "http://img.b2bpic.net/free-photo/couple-having-breakfast-home_657883-479.jpg" },
{ id: "p6", name: "Outdoor Patio", price: "2022", imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-wooden-house-interior-with-timber-decor-furnishings_23-2151263515.jpg" },
]}
title="Our Work Speaks for Itself"
description="See how we bring quality, clarity, and comfort to every space."
tag="PROJECTS"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "Home", href: "#" }, { label: "About", href: "#about" }] }
]}
logoText="Estatia"
/>
</div>
<div id="process" data-section="process">
<FeatureCardMedia
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{ id: "s1", title: "Free Consultation", description: "We visit your home, listen to your vision, and assess the space — no obligation.", tag: "01", imageSrc: "http://img.b2bpic.net/free-photo/couple-painting-walls-their-new-home-together_23-2149086830.jpg" },
{ id: "s2", title: "Design & Quote", description: "Our designers create your bespoke plan. Fixed price. No hidden costs.", tag: "02", imageSrc: "http://img.b2bpic.net/free-photo/ripe-sliced-banana-bowl-porridge-marble-surface_114579-61246.jpg" },
{ id: "s3", title: "Renovation", description: "Our expert trade team works with precision and respect for your home.", tag: "03", imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-kitchen-dining-area-with-white-furniture_23-2151983256.jpg" },
{ id: "s4", title: "Final Reveal", description: "We hand over your transformed space. We don't leave until it's perfect.", tag: "04", imageSrc: "http://img.b2bpic.net/free-photo/interior-design-with-vintage-bathtub_23-2148291599.jpg" },
]}
title="Your Journey With Us"
description="A streamlined four-step process from initial consultation to final reveal."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
useInvertedBackground={false}
testimonial="The renovation process was seamless. Our home was transformed exactly as we envisioned, and the craftsmanship of the timber joinery is simply unmatched. Truly luxury living realized."
rating={5}
author="Sarah & David, Oakwood"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-confident-attractive-fashionable-young-businessman-with-trimmed-beard-trendy-hairstyle-posing-modern-cozy-interior-dressed-formal-stylish-suit_343059-1778.jpg", alt: "Client" },
{ src: "http://img.b2bpic.net/free-photo/portrait-woman-sitting-couch_23-2148415817.jpg", alt: "Client" },
{ src: "http://img.b2bpic.net/free-photo/front-view-woman-sitting-chair_23-2149833734.jpg", alt: "Client" },
{ src: "http://img.b2bpic.net/free-photo/indoor-shot-two-architects-working-together-common-construction-project_273609-14129.jpg", alt: "Client" },
{ src: "http://img.b2bpic.net/free-photo/high-angle-modern-woman-talking-mobile_23-2148415912.jpg", alt: "Client" },
]}
ratingAnimation="blur-reveal"
avatarsAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Ready to Transform Your Space?"
description="Book your free in-home consultation today. No pressure. Just possibilities."
inputs={[
{ name: "name", type: "text", placeholder: "Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
]}
textarea={{ name: "message", placeholder: "Tell us about your project", required: true }}
imageSrc="http://img.b2bpic.net/free-photo/decorative-shiny-vase-interior-modern-kitchen_169016-20020.jpg"
mediaPosition="right"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "Home", href: "#" }, { label: "About", href: "#about" }, { label: "Services", href: "#services" }, { label: "Projects", href: "#projects" }, { label: "Contact", href: "#contact" }] },
{ items: [{ label: "Kitchens", href: "#services" }, { label: "Bathrooms", href: "#services" }, { label: "Extensions", href: "#services" }, { label: "Joinery", href: "#services" }, { label: "Full Reno", href: "#services" }] },
{ items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }, { label: "Houzz", href: "#" }, { label: "Reviews", href: "#" }] },
]}
logoText="Estatia"
/>
</div>
</ReactLenis>
</ThemeProvider>
);