Files
708cc7c3-bf28-4287-b672-1ca…/src/app/page.tsx
2026-04-07 15:23:20 +00:00

196 lines
7.1 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
import { Sparkles } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="mediumLarge"
sizing="mediumSizeLargeTitles"
background="fluid"
cardStyle="layered-gradient"
primaryButtonStyle="gradient"
secondaryButtonStyle="solid"
headingFontWeight="extrabold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Services", id: "services"},
{
name: "About", id: "about"},
{
name: "Contact", id: "contact"},
]}
button={{
text: "Book Now", href: "#booking"}}
brandName="Moli Nails"
/>
</div>
<div id="hero" data-section="hero">
<HeroOverlay
title="Beautiful Nails, Done Right — Every Time"
description="Trusted Mitcham nail salon with 4.8★ from 160+ happy clients. Experience professional service in a clean, relaxing environment."
buttons={[
{
text: "Call Now", href: "tel:0400000000"},
{
text: "Book Appointment", href: "#booking"},
]}
imageSrc="http://img.b2bpic.net/free-photo/empty-wintertime-luxury-ski-resort_482257-102290.jpg"
imageAlt="Professional manicure work"
showDimOverlay={true}
avatars={[
{
src: "http://img.b2bpic.net/free-photo/empty-wintertime-luxury-ski-resort_482257-102290.jpg", alt: "Client 1"},
{
src: "http://img.b2bpic.net/free-photo/empty-wintertime-luxury-ski-resort_482257-102290.jpg", alt: "Client 2"},
{
src: "http://img.b2bpic.net/free-photo/empty-wintertime-luxury-ski-resort_482257-102290.jpg", alt: "Client 3"},
{
src: "http://img.b2bpic.net/free-photo/empty-wintertime-luxury-ski-resort_482257-102290.jpg", alt: "Client 4"},
{
src: "http://img.b2bpic.net/free-photo/empty-wintertime-luxury-ski-resort_482257-102290.jpg", alt: "Client 5"},
]}
avatarText="Join 160+ happy clients"
/>
</div>
<div id="social-proof" data-section="social-proof">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={[
"Sarah M.", "Jessica T.", "Emily R.", "Chloe K.", "Mia L.", "Olivia B.", "Grace P."]}
title="169+ 5-Star Reviews"
description="Our clients love the attention to detail and our friendly team. Experience long-lasting, quality nails."
/>
</div>
<div id="services" data-section="services">
<PricingCardThree
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
plans={[
{
id: "manc", price: "$45+", name: "Manicure", features: [
"Shellac", "SNS", "BIAB"],
buttons: [
{
text: "Book Now", href: "#booking"},
],
},
{
id: "pedi", price: "$65+", name: "Pedicure", features: [
"Classic Polish", "Hot Stones", "Exfoliation"],
buttons: [
{
text: "Book Now", href: "#booking"},
],
},
{
id: "art", price: "$20+", name: "Nail Art", features: [
"Custom Designs", "French Tips", "Glitter"],
buttons: [
{
text: "Book Now", href: "#booking"},
],
},
]}
title="Our Services"
description="Premium nail treatments designed for long-lasting beauty and comfort."
/>
</div>
<div id="gallery" data-section="gallery">
<TestimonialCardTwelve
cardTitle="Nail Gallery"
cardTag=""
cardAnimation="slide-up"
useInvertedBackground={false}
testimonials={[
{
id: "img1", name: "Nail Work 1", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C2AAevwbgkwA8bQOW6a1YvxSBR/uploaded-1775573588012-yfwb09z9.jpg"
},
{
id: "img2", name: "Nail Work 2", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C2AAevwbgkwA8bQOW6a1YvxSBR/uploaded-1775573588013-jnk4w2fe.jpg"
}
]}
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={true}
tag="About Us"
title="A Women-Owned Mitcham Local"
description="At Moli Nails, we believe in providing a relaxing, clean environment where your experience is our priority."
subdescription="With years of skill and attention to detail, we ensure every client leaves happy with long-lasting, high-quality nails."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3C2AAevwbgkwA8bQOW6a1YvxSBR/uploaded-1775574064049-ek15v1rk.jpg"
mediaAnimation="slide-up"
icon={Sparkles}
/>
</div>
<div id="booking" data-section="booking">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "canvas-reveal"}}
tag="Booking"
title="Book Your Appointment"
description="Appointments fill up fast! Send us your details and we'll be in touch to confirm your spot."
buttonText="Book Now"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Location", items: [
{
label: "Mitcham, VIC", href: "#"},
],
},
{
title: "Hours", items: [
{
label: "Mon-Sat: 9am-6pm", href: "#"},
],
},
{
title: "Quick Links", items: [
{
label: "Call Us", href: "tel:0400000000"},
{
label: "Book Now", href: "#booking"},
],
},
]}
bottomLeftText="© 2024 Moli Nails"
bottomRightText="Built with care for Mitcham"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}