Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 56440b53b0 | |||
| 1e5706c127 | |||
| fd1d7ec123 | |||
| bbf5febd14 | |||
| d41cb12a38 |
314
src/app/page.tsx
314
src/app/page.tsx
@@ -3,323 +3,125 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
||||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import { Calendar } from "lucide-react";
|
||||
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Calendar, Scissors, Sparkles, Phone, MapPin } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="soft"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Monheimer Barbershop"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Precision Cuts in Monheimer"
|
||||
description="Experience premium grooming in a relaxed, upscale environment designed for the modern gentleman."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Mark S.",
|
||||
handle: "@marks",
|
||||
testimonial: "Best haircut I've had in years. The attention to detail is unmatched.",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BqpkpcYV4lJq5utBbIhsGY5cLO/uploaded-1775226883136-lycmruwt.jpg?_wi=1",
|
||||
imageAlt: "User provided image",
|
||||
},
|
||||
{
|
||||
name: "John D.",
|
||||
handle: "@johnd",
|
||||
testimonial: "Fantastic atmosphere and service. Highly recommend.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg",
|
||||
imageAlt: "barbershop interior warm lighting",
|
||||
},
|
||||
{
|
||||
name: "Peter R.",
|
||||
handle: "@peterr",
|
||||
testimonial: "Clean, professional, and always on time.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-serious-man-friends-with-trendy-haircut-stand-close-each-other-think-where-spend-free-time_273609-16731.jpg?_wi=1",
|
||||
imageAlt: "happy client portrait male",
|
||||
},
|
||||
{
|
||||
name: "Steve L.",
|
||||
handle: "@stevel",
|
||||
testimonial: "Top-tier grooming experience every single visit.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg?_wi=1",
|
||||
imageAlt: "smiling customer in barbershop",
|
||||
},
|
||||
{
|
||||
name: "David W.",
|
||||
handle: "@davidw",
|
||||
testimonial: "The only place I trust with my beard.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-tattooer-dreamily-looking-camera-spending-time-modern-tattoo-studio_574295-673.jpg?_wi=1",
|
||||
imageAlt: "man looking sharp after haircut",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Visit",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
<HeroOverlay
|
||||
title="Precision Grooming"
|
||||
description="Experience premium cuts and styling in a clean, sophisticated environment. Your journey to a sharper look starts here."
|
||||
tag="Monheimer's Finest"
|
||||
tagIcon={Sparkles}
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BqpkpcYV4lJq5utBbIhsGY5cLO/uploaded-1775226883136-lycmruwt.jpg?_wi=2"
|
||||
imageAlt="Inside Monheimer Barbershop"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/bearded-serious-man-friends-with-trendy-haircut-stand-close-each-other-think-where-spend-free-time_273609-16731.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-tattooer-dreamily-looking-camera-spending-time-modern-tattoo-studio_574295-673.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-clenching-fist-happy-excited-shouting_141793-37149.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-young-man-posing-isolated-grey_171337-10592.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 500+ satisfied gentlemen"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Classic Cuts",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Beard Sculpting",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Shaves",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Hot Towel",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modern Style",
|
||||
},
|
||||
]}
|
||||
imageAlt="Modern barbershop interior"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
<MediaAbout
|
||||
title="Crafted for the Modern Gentleman"
|
||||
description="We combine traditional barber techniques with modern precision to provide a service that respects your time and elevates your personal style."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg"
|
||||
useInvertedBackground={true}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Mastering the Art of Grooming",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg",
|
||||
alt: "Barber shop service",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwelve
|
||||
<FeatureCardNine
|
||||
title="Signature Services"
|
||||
description="A curated selection of grooming treatments for the discerning individual."
|
||||
showStepNumbers={true}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "1",
|
||||
label: "Cut",
|
||||
title: "Classic Haircut",
|
||||
items: [
|
||||
"Precision detailing",
|
||||
"Hot towel service",
|
||||
"Straight razor finish",
|
||||
],
|
||||
id: 1,
|
||||
title: "Precision Haircut", description: "Bespoke cutting techniques tailored to your hair type and lifestyle.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/bearded-serious-man-friends-with-trendy-haircut-stand-close-each-other-think-where-spend-free-time_273609-16731.jpg" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/young-tattooer-dreamily-looking-camera-spending-time-modern-tattoo-studio_574295-673.jpg" }
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
label: "Beard",
|
||||
title: "Beard Sculpting",
|
||||
items: [
|
||||
"Beard shape up",
|
||||
"Essential oil treatment",
|
||||
"Hot steam therapy",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
label: "Combo",
|
||||
title: "The Full Experience",
|
||||
items: [
|
||||
"Full haircut",
|
||||
"Beard detailing",
|
||||
"Scalp massage",
|
||||
],
|
||||
},
|
||||
id: 2,
|
||||
title: "Beard Grooming", description: "Professional shape-ups, essential oil treatments, and hot steam therapy.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-clenching-fist-happy-excited-shouting_141793-37149.jpg" }
|
||||
}
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Premium grooming solutions tailored to your individual style."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwelve
|
||||
<TestimonialCardTen
|
||||
title="Voices of Style"
|
||||
description="Hear why our regulars keep coming back for more than just a cut."
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Mark S.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/bearded-serious-man-friends-with-trendy-haircut-stand-close-each-other-think-where-spend-free-time_273609-16731.jpg?_wi=2",
|
||||
id: "t1", title: "Excellent Service", quote: "The best grooming experience I've had in Monheimer. Truly professional.", name: "Mark S.", role: "Regular Client"
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "John D.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-sitting-chair_23-2149220533.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Peter R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-tattooer-dreamily-looking-camera-spending-time-modern-tattoo-studio_574295-673.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Steve L.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-clenching-fist-happy-excited-shouting_141793-37149.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "David W.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-posing-isolated-grey_171337-10592.jpg",
|
||||
},
|
||||
id: "t2", title: "Attention to Detail", quote: "Precision that matters. I always leave feeling more confident.", name: "John D.", role: "Regular Client"
|
||||
}
|
||||
]}
|
||||
cardTitle="What Our Clients Say"
|
||||
cardTag="Trusted by Locals"
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactFaq
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Yes, we recommend booking in advance to guarantee your preferred time.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What payment methods are accepted?",
|
||||
content: "We accept cash, major credit cards, and contactless payments.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Where are you located?",
|
||||
content: "We are located right in the heart of Monheimer.",
|
||||
},
|
||||
{ id: "f1", title: "How do I book?", content: "Simply use our online portal or reach out via phone." },
|
||||
{ id: "f2", title: "Are walk-ins welcome?", content: "While we prefer appointments, we strive to accommodate walk-ins when possible." }
|
||||
]}
|
||||
ctaTitle="Ready for a Refresh?"
|
||||
ctaDescription="Book your appointment today and secure your spot in the chair."
|
||||
ctaButton={{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
}}
|
||||
ctaTitle="Ready to look your best?"
|
||||
ctaDescription="Book your session today and secure your spot."
|
||||
ctaButton={{ text: "Book Now", href: "#" }}
|
||||
ctaIcon={Calendar}
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Explore",
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
<FooterCard
|
||||
logoText="Monheimer Barbershop"
|
||||
copyrightText="© 2025 Monheimer Barbershop"
|
||||
socialLinks={[{ icon: Scissors, href: "#", ariaLabel: "Instagram" }, { icon: MapPin, href: "#", ariaLabel: "Location" }]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user