Initial commit
This commit is contained in:
481
src/app/page.tsx
Normal file
481
src/app/page.tsx
Normal file
@@ -0,0 +1,481 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#home",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Barbers",
|
||||
id: "#barbers",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
]}
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
brandName="The Modern Cut"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroLogo
|
||||
logoText="The Modern Cut"
|
||||
description="Experience unparalleled grooming with precision cuts, classic shaves, and a style tailored just for you. Your destination for a timeless look."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book an Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Services",
|
||||
href: "#services",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/vintage-wooden-table-with-beard-shaping-salon-tools_53876-127084.jpg"
|
||||
imageAlt="Luxurious barber chair in a modern barbershop"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
useInvertedBackground={true}
|
||||
tag="Our Legacy"
|
||||
title="Crafting Sharp Looks Since 2005"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Signature Haircut",
|
||||
description: "Experience a bespoke haircut tailored to your head shape and style preferences, including a refreshing wash and finish.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairstylist-giving-haircut-client_23-2148506196.jpg",
|
||||
imageAlt: "Barber giving a detailed haircut",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-his-hair-cut_23-2148256900.jpg",
|
||||
imageAlt: "Barber styling a client's hair",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vintage-wooden-table-with-beard-shaping-salon-tools_53876-127084.jpg",
|
||||
imageAlt: "barber giving haircut close up",
|
||||
},
|
||||
{
|
||||
title: "Traditional Hot Shave",
|
||||
description: "Indulge in the ultimate classic hot towel shave, performed with a straight razor for an incredibly close and smooth finish.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-smears-face-with-foam-hairdressing-salon_613910-18406.jpg",
|
||||
imageAlt: "Barber performing a hot towel shave",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-shaving-home_23-2150226092.jpg",
|
||||
imageAlt: "Barber trimming a man's beard",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-making-hairstyle-blonde-woman-beauty-salon_176420-4456.jpg",
|
||||
imageAlt: "barber giving haircut close up",
|
||||
},
|
||||
{
|
||||
title: "Beard Trim & Shape",
|
||||
description: "Keep your beard looking its best with a professional trim, shaping, and conditioning, designed to complement your facial features.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/years-one-color-communication-30-35_1296-315.jpg",
|
||||
imageAlt: "Barber applying styling product",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/isolated-view-bald-caucasian-hipster-male-with-thick-bushy-beard-tattoo-raising-eyebrows-crossing-arms-chest-his-closed-posture-look-expressing-distrust-body-language_343059-1709.jpg",
|
||||
imageAlt: "Man admiring his styled hair in mirror",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-arms-dressed-white-shirt-grey-background_613910-8168.jpg",
|
||||
imageAlt: "barber giving haircut close up",
|
||||
},
|
||||
]}
|
||||
showStepNumbers={true}
|
||||
title="Precision Grooming, Unmatched Style"
|
||||
description="Discover a range of services designed to perfect your look, from classic cuts to modern styling and meticulous beard care."
|
||||
tag="Our Expertise"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "standard-cut",
|
||||
badge: "Popular",
|
||||
price: "$45",
|
||||
subtitle: "Essential Grooming",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Precision Haircut",
|
||||
"Hot Lather Neck Shave",
|
||||
"Styling & Finish",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "full-experience",
|
||||
badge: "Best Value",
|
||||
price: "$80",
|
||||
subtitle: "The Ultimate Pamper",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Signature Haircut",
|
||||
"Traditional Hot Shave",
|
||||
"Beard Trim & Shape",
|
||||
"Facial Massage",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "beard-express",
|
||||
badge: "Quick Fix",
|
||||
price: "$30",
|
||||
subtitle: "Beard Perfection",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Beard Trim",
|
||||
"Line-up & Fade",
|
||||
"Beard Conditioning",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Invest in Your Look"
|
||||
description="Choose from our range of premium grooming packages designed to fit your needs and keep you looking sharp."
|
||||
tag="Our Rates"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="barbers" data-section="barbers">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
groups={[
|
||||
{
|
||||
id: "master-barbers",
|
||||
groupTitle: "Expert Stylists",
|
||||
members: [
|
||||
{
|
||||
id: "barber-john",
|
||||
title: "John 'The Blade' Doe",
|
||||
subtitle: "Lead Stylist & Founder",
|
||||
detail: "With over 15 years of experience, John is a true master of classic cuts and modern fades. His passion for barbering shines through every detail.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/isolated-view-bald-caucasian-hipster-male-with-thick-bushy-beard-tattoo-raising-eyebrows-crossing-arms-chest-his-closed-posture-look-expressing-distrust-body-language_343059-1709.jpg",
|
||||
imageAlt: "Portrait of John, lead stylist",
|
||||
},
|
||||
{
|
||||
id: "barber-jane",
|
||||
title: "Jane 'The Artisan' Smith",
|
||||
subtitle: "Senior Barber & Colorist",
|
||||
detail: "Jane specializes in intricate beard designs and bold transformations. Her artistic eye ensures a unique style for every client.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-arms-dressed-white-shirt-grey-background_613910-8168.jpg",
|
||||
imageAlt: "Portrait of Jane, senior barber",
|
||||
},
|
||||
{
|
||||
id: "barber-mike",
|
||||
title: "Mike 'The Smooth' Johnson",
|
||||
subtitle: "Specialist in Shaves",
|
||||
detail: "Mike's traditional hot towel shaves are legendary. He guarantees the closest, smoothest shave you'll ever experience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-professional-chef-posing_23-2151232223.jpg",
|
||||
imageAlt: "Portrait of Mike, shave specialist",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vintage-wooden-table-with-beard-shaping-salon-tools_53876-127084.jpg",
|
||||
imageAlt: "professional male barber portrait",
|
||||
},
|
||||
]}
|
||||
title="Meet Our Master Barbers"
|
||||
description="Our team of skilled professionals is dedicated to providing you with the highest quality grooming experience, rooted in passion and expertise."
|
||||
tag="Our Talents"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Best haircut in years!",
|
||||
quote: "John always delivers an impeccable haircut. The attention to detail is unmatched, and the atmosphere is incredibly welcoming. Highly recommend!",
|
||||
name: "Alex P.",
|
||||
role: "Regular Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-positive-blond-bearded-male-dressed-red-fleece-shirt-makes-conversation_613910-13394.jpg",
|
||||
imageAlt: "Alex P.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Fantastic hot shave experience",
|
||||
quote: "Mike's hot towel shave is pure bliss. It's not just a shave; it's a relaxing ritual. My skin feels amazing every time.",
|
||||
name: "Ben C.",
|
||||
role: "Executive",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-with-long-beard-mustache-showing-thumbs-up-standing-front-grey-wall_181624-26654.jpg",
|
||||
imageAlt: "Ben C.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Jane styled my beard perfectly",
|
||||
quote: "I always struggled to find someone who understood my beard vision until I met Jane. She's an artist! My beard has never looked better.",
|
||||
name: "Chris D.",
|
||||
role: "Creative Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg",
|
||||
imageAlt: "Chris D.",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Consistently excellent service",
|
||||
quote: "The Modern Cut is my go-to. Every barber here is highly skilled, and they make you feel right at home. A truly professional establishment.",
|
||||
name: "David L.",
|
||||
role: "Business Owner",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-combing-beard-senior-client-salon_23-2148182003.jpg",
|
||||
imageAlt: "David L.",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "A true gem of a barbershop",
|
||||
quote: "From the moment you walk in, you know you're in good hands. The quality of the cut and the friendly staff make every visit a pleasure.",
|
||||
name: "Emily R.",
|
||||
role: "Photographer",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-goodlooking-man-showing-thumbs-up-praising-good-job-recommending-company-standing_1258-159836.jpg",
|
||||
imageAlt: "Emily R.",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
title: "My new favorite spot!",
|
||||
quote: "I tried The Modern Cut on a recommendation and haven't looked back. The best barbershop experience I've had in years. Always leave feeling fresh.",
|
||||
name: "Frank S.",
|
||||
role: "Student",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/shaving-concept-with-attractive-young-man_23-2148121910.jpg",
|
||||
imageAlt: "Frank S.",
|
||||
},
|
||||
]}
|
||||
title="Voices of Satisfaction"
|
||||
description="Hear directly from our valued clients who trust The Modern Cut for their grooming needs and exceptional service."
|
||||
tag="What Clients Say"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"GQ Magazine",
|
||||
"Men's Health",
|
||||
"Barber's Journal",
|
||||
"Local Style Awards",
|
||||
"CityLife Magazine",
|
||||
"Grooming Today",
|
||||
"The Daily Trim",
|
||||
]}
|
||||
title="Recognized for Excellence"
|
||||
description="Our commitment to quality grooming has been acknowledged by leading publications and local community awards."
|
||||
tag="Featured In"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1",
|
||||
title: "How do I book an appointment?",
|
||||
content: "You can easily book an appointment through our website's 'Book Now' button, or by calling us directly during business hours. We recommend booking in advance.",
|
||||
},
|
||||
{
|
||||
id: "faq-2",
|
||||
title: "Do you accept walk-ins?",
|
||||
content: "While we prioritize appointments to ensure timely service, we do accept walk-ins based on availability. Calling ahead is always advised.",
|
||||
},
|
||||
{
|
||||
id: "faq-3",
|
||||
title: "What products do you use?",
|
||||
content: "We use only premium grooming products from trusted brands, selected for their quality and effectiveness in maintaining healthy hair and skin.",
|
||||
},
|
||||
{
|
||||
id: "faq-4",
|
||||
title: "Can I request a specific barber?",
|
||||
content: "Yes, you can request your preferred barber when booking your appointment online or over the phone. Availability varies by barber.",
|
||||
},
|
||||
{
|
||||
id: "faq-5",
|
||||
title: "What is your cancellation policy?",
|
||||
content: "We require at least 24 hours notice for cancellations or rescheduling. Late cancellations may incur a fee.",
|
||||
},
|
||||
{
|
||||
id: "faq-6",
|
||||
title: "Do you offer gift cards?",
|
||||
content: "Yes, gift cards are available for purchase in-store and can be used towards any of our services.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Find quick answers to common questions about our services, booking, and barbershop policies."
|
||||
tag="Need Answers?"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Ready for a Fresh Look?"
|
||||
title="Book Your Next Appointment"
|
||||
description="Don't wait! Schedule your visit to The Modern Cut today and experience the difference of expert grooming."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Online Now",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
text: "Call Us: (123) 456-7890",
|
||||
href: "tel:+1234567890",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="The Modern Cut"
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Haircuts",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Shaves",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Beard Trims",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Styling",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Our Team",
|
||||
href: "#barbers",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 The Modern Cut. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user