Update src/app/page.tsx
This commit is contained in:
266
src/app/page.tsx
266
src/app/page.tsx
@@ -33,59 +33,38 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#home",
|
||||
},
|
||||
name: "Home", id: "#home"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
name: "Services", id: "#services"},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
name: "Pricing", id: "#pricing"},
|
||||
{
|
||||
name: "Team",
|
||||
id: "#team",
|
||||
},
|
||||
name: "Team", id: "#team"},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
name: "Testimonials", id: "#testimonials"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
name: "FAQ", id: "#faq"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
brandName="Village Barber Shop"
|
||||
button={{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Book Appointment", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "downward-rays-static",
|
||||
}}
|
||||
variant: "downward-rays-static"}}
|
||||
imagePosition="right"
|
||||
title="Experience the Art of Grooming at Village Barber Shop"
|
||||
description="Step into a timeless space where classic techniques meet modern styles. Our expert barbers are dedicated to providing you with the perfect cut, shave, and grooming experience."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Visit",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Your Visit", href: "#contact"},
|
||||
{
|
||||
text: "View Services",
|
||||
href: "#services",
|
||||
},
|
||||
text: "View Services", href: "#services"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/top-view-male-self-care-setting-still-life_23-2150326541.jpg"
|
||||
imageAlt="Interior of a classic barber shop with a barber working"
|
||||
@@ -93,52 +72,32 @@ export default function LandingPage() {
|
||||
fixedMediaHeight={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg",
|
||||
alt: "Satisfied customer 1",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-young-business-man-posing-with-crossed-arms_23-2149206526.jpg", alt: "Satisfied customer 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/merry-young-adult-enjoying-christmas-conversation-video-call-room-decorated-festivity-celebration-talking-woman-preparing-drink-wine-kitchen-with-joyful-ornaments_482257-28400.jpg",
|
||||
alt: "Satisfied customer 2",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/merry-young-adult-enjoying-christmas-conversation-video-call-room-decorated-festivity-celebration-talking-woman-preparing-drink-wine-kitchen-with-joyful-ornaments_482257-28400.jpg", alt: "Satisfied customer 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/male-hairdresser-working-with-hair-elderly-client_23-2148181885.jpg",
|
||||
alt: "Satisfied customer 3",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/male-hairdresser-working-with-hair-elderly-client_23-2148181885.jpg", alt: "Satisfied customer 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/funny-smiling-hipster-handsome-man-guy-stylish-summer-cloth-street-sunglasses_158538-2119.jpg",
|
||||
alt: "Satisfied customer 4",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/funny-smiling-hipster-handsome-man-guy-stylish-summer-cloth-street-sunglasses_158538-2119.jpg", alt: "Satisfied customer 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-from-laughing-girl-enjoying-morning-balcony-with-funny-pet-lovely-young-lady-good-mood-playing-with-beagle-dog-while-resting-after-dinner-terrace_197531-4839.jpg",
|
||||
alt: "Satisfied customer 5",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-from-laughing-girl-enjoying-morning-balcony-with-funny-pet-lovely-young-lady-good-mood-playing-with-beagle-dog-while-resting-after-dinner-terrace_197531-4839.jpg", alt: "Satisfied customer 5"},
|
||||
]}
|
||||
avatarText="Join our community of impeccably groomed gentlemen"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Precision Cuts",
|
||||
icon: Scissors,
|
||||
type: "text-icon", text: "Precision Cuts", icon: Scissors,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Hot Lather Shaves",
|
||||
icon: Droplets,
|
||||
type: "text-icon", text: "Hot Lather Shaves", icon: Droplets,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Beard Styling",
|
||||
icon: Feather,
|
||||
type: "text-icon", text: "Beard Styling", icon: Feather,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Expert Barbers",
|
||||
icon: Sparkles,
|
||||
type: "text-icon", text: "Expert Barbers", icon: Sparkles,
|
||||
},
|
||||
{
|
||||
type: "text-icon",
|
||||
text: "Classic Atmosphere",
|
||||
icon: Award,
|
||||
type: "text-icon", text: "Classic Atmosphere", icon: Award,
|
||||
},
|
||||
]}
|
||||
marqueeSpeed={30}
|
||||
@@ -151,7 +110,6 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
tag="Our Story"
|
||||
title="Where Tradition Meets Modern Craftsmanship"
|
||||
description="Village Barber Shop has been a cornerstone of the community for generations, offering more than just a haircut – it's an experience. We pride ourselves on meticulous attention to detail, personalized service, and a welcoming atmosphere where every client leaves feeling refreshed and confident. We honor the rich heritage of barbering while embracing contemporary trends to deliver exceptional results."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -163,25 +121,13 @@ export default function LandingPage() {
|
||||
tag="Grooming Excellence"
|
||||
accordionItems={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Precision Haircuts",
|
||||
content: "Our skilled barbers deliver sharp, personalized haircuts, from classic styles to the latest trends, ensuring you look your absolute best.",
|
||||
},
|
||||
id: "1", title: "Precision Haircuts", content: "Our skilled barbers deliver sharp, personalized haircuts, from classic styles to the latest trends, ensuring you look your absolute best."},
|
||||
{
|
||||
id: "2",
|
||||
title: "Traditional Hot Lather Shaves",
|
||||
content: "Indulge in the ultimate relaxation with our hot towel and straight razor shave. A close, comfortable shave leaving your skin smooth and revitalized.",
|
||||
},
|
||||
id: "2", title: "Traditional Hot Lather Shaves", content: "Indulge in the ultimate relaxation with our hot towel and straight razor shave. A close, comfortable shave leaving your skin smooth and revitalized."},
|
||||
{
|
||||
id: "3",
|
||||
title: "Expert Beard Trims & Styling",
|
||||
content: "Maintain your beard with precision. Our barbers will sculpt, trim, and style your beard to perfection, enhancing your natural features.",
|
||||
},
|
||||
id: "3", title: "Expert Beard Trims & Styling", content: "Maintain your beard with precision. Our barbers will sculpt, trim, and style your beard to perfection, enhancing your natural features."},
|
||||
{
|
||||
id: "4",
|
||||
title: "Signature Hair & Scalp Treatments",
|
||||
content: "Rejuvenate your hair and scalp with our specialized treatments designed to promote health, shine, and vitality for all hair types.",
|
||||
},
|
||||
id: "4", title: "Signature Hair & Scalp Treatments", content: "Rejuvenate your hair and scalp with our specialized treatments designed to promote health, shine, and vitality for all hair types."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-barber-cutting-client-s-beard_23-2148242865.jpg"
|
||||
imageAlt="Barber giving a precision haircut to a client"
|
||||
@@ -197,70 +143,37 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "plan-1",
|
||||
name: "The Classic Cut",
|
||||
price: "$35",
|
||||
features: [
|
||||
"Precision Haircut",
|
||||
"Hot Towel Finish",
|
||||
"Style & Product Application",
|
||||
],
|
||||
id: "plan-1", name: "The Classic Cut", price: "$35", features: [
|
||||
"Precision Haircut", "Hot Towel Finish", "Style & Product Application"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "plan-2",
|
||||
name: "The Executive Shave",
|
||||
price: "$45",
|
||||
features: [
|
||||
"Hot Lather Shave",
|
||||
"Straight Razor Finish",
|
||||
"Moisturizing Treatment",
|
||||
],
|
||||
id: "plan-2", name: "The Executive Shave", price: "$45", features: [
|
||||
"Hot Lather Shave", "Straight Razor Finish", "Moisturizing Treatment"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "plan-3",
|
||||
name: "Beard Sculpt & Trim",
|
||||
price: "$25",
|
||||
features: [
|
||||
"Beard Shaping",
|
||||
"Precision Trim",
|
||||
"Beard Oil Application",
|
||||
],
|
||||
id: "plan-3", name: "Beard Sculpt & Trim", price: "$25", features: [
|
||||
"Beard Shaping", "Precision Trim", "Beard Oil Application"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "plan-4",
|
||||
name: "Full Grooming Package",
|
||||
price: "$85",
|
||||
features: [
|
||||
"Classic Cut",
|
||||
"Executive Shave",
|
||||
"Beard Sculpt & Trim",
|
||||
],
|
||||
id: "plan-4", name: "Full Grooming Package", price: "$85", features: [
|
||||
"Classic Cut", "Executive Shave", "Beard Sculpt & Trim"],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
],
|
||||
badge: "Best Value",
|
||||
},
|
||||
badge: "Best Value"},
|
||||
]}
|
||||
title="Our Valued Pricing"
|
||||
description="Quality grooming doesn't have to break the bank. Explore our transparent pricing for all our premium services."
|
||||
@@ -276,23 +189,11 @@ export default function LandingPage() {
|
||||
membersAnimation="slide-up"
|
||||
members={[
|
||||
{
|
||||
id: "member-1",
|
||||
name: "John \"The Blade\" Smith",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-hair-salon_23-2150665449.jpg",
|
||||
imageAlt: "Professional male barber John Smith",
|
||||
},
|
||||
id: "member-1", name: "John \"The Blade\" Smith", imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-hair-salon_23-2150665449.jpg", imageAlt: "Professional male barber John Smith"},
|
||||
{
|
||||
id: "member-2",
|
||||
name: "Maria \"The Stylist\" Rodriguez",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-looking-down-young-beautiful-female-barber-uniform-wearing-glasses-combing-hair-isolated-blue-wall_141793-106074.jpg",
|
||||
imageAlt: "Professional female barber Maria Rodriguez",
|
||||
},
|
||||
id: "member-2", name: "Maria \"The Stylist\" Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/pleased-looking-down-young-beautiful-female-barber-uniform-wearing-glasses-combing-hair-isolated-blue-wall_141793-106074.jpg", imageAlt: "Professional female barber Maria Rodriguez"},
|
||||
{
|
||||
id: "member-3",
|
||||
name: "David \"The Veteran\" Lee",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-man-apron-shaving-his-beard-using-razor-standing-pink-wall_141793-50703.jpg",
|
||||
imageAlt: "Professional male barber David Lee",
|
||||
},
|
||||
id: "member-3", name: "David \"The Veteran\" Lee", imageSrc: "http://img.b2bpic.net/free-photo/barber-man-apron-shaving-his-beard-using-razor-standing-pink-wall_141793-50703.jpg", imageAlt: "Professional male barber David Lee"},
|
||||
]}
|
||||
memberVariant="card"
|
||||
/>
|
||||
@@ -306,50 +207,20 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex P.",
|
||||
role: "Regular Client",
|
||||
company: "Local Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-woman-laboratory-robes-talk-each-other-standing-greenhouse_8353-7139.jpg",
|
||||
imageAlt: "Portrait of Alex P.",
|
||||
},
|
||||
id: "1", name: "Alex P.", role: "Regular Client", company: "Local Resident", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-woman-laboratory-robes-talk-each-other-standing-greenhouse_8353-7139.jpg", imageAlt: "Portrait of Alex P."},
|
||||
{
|
||||
id: "2",
|
||||
name: "Samantha K.",
|
||||
role: "Visitor",
|
||||
company: "Tourist",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/friendly-assistant-teaching-boss-use-new-app_1262-16106.jpg",
|
||||
imageAlt: "Portrait of Samantha K.",
|
||||
},
|
||||
id: "2", name: "Samantha K.", role: "Visitor", company: "Tourist", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/friendly-assistant-teaching-boss-use-new-app_1262-16106.jpg", imageAlt: "Portrait of Samantha K."},
|
||||
{
|
||||
id: "3",
|
||||
name: "Robert L.",
|
||||
role: "Long-time Customer",
|
||||
company: "Community Member",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-lifestyle-joy-happiness-concept_343059-3584.jpg",
|
||||
imageAlt: "Portrait of Robert L.",
|
||||
},
|
||||
id: "3", name: "Robert L.", role: "Long-time Customer", company: "Community Member", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/people-lifestyle-joy-happiness-concept_343059-3584.jpg", imageAlt: "Portrait of Robert L."},
|
||||
{
|
||||
id: "4",
|
||||
name: "Michael D.",
|
||||
role: "Student",
|
||||
company: "University",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-attractive-girl-denim-clothes-glasses-simple-dark-green-background-with-empty-place-text_78826-3437.jpg",
|
||||
imageAlt: "Portrait of Michael D.",
|
||||
},
|
||||
id: "4", name: "Michael D.", role: "Student", company: "University", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-attractive-girl-denim-clothes-glasses-simple-dark-green-background-with-empty-place-text_78826-3437.jpg", imageAlt: "Portrait of Michael D."},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jessica R.",
|
||||
role: "New Client",
|
||||
company: "New Resident",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/romantic-laughing-girl-playfully-posing-light-wall-indoor-portrait-dreamy-attractive-female-model-with-curly-hair_197531-22015.jpg",
|
||||
imageAlt: "Portrait of Jessica R.",
|
||||
},
|
||||
id: "5", name: "Jessica R.", role: "New Client", company: "New Resident", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/romantic-laughing-girl-playfully-posing-light-wall-indoor-portrait-dreamy-attractive-female-model-with-curly-hair_197531-22015.jpg", imageAlt: "Portrait of Jessica R."},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Hear directly from our satisfied customers about their Village Barber Shop experience."
|
||||
@@ -362,25 +233,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1",
|
||||
title: "How do I book an appointment?",
|
||||
content: "You can easily book an appointment through our website's 'Contact' section, by calling us directly, or by visiting our shop during business hours. We recommend booking in advance to secure your preferred time.",
|
||||
},
|
||||
id: "faq-1", title: "How do I book an appointment?", content: "You can easily book an appointment through our website's 'Contact' section, by calling us directly, or by visiting our shop during business hours. We recommend booking in advance to secure your preferred time."},
|
||||
{
|
||||
id: "faq-2",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept cash, major credit cards (Visa, Mastercard, American Express), and contactless payments like Apple Pay and Google Pay for your convenience.",
|
||||
},
|
||||
id: "faq-2", title: "What payment methods do you accept?", content: "We accept cash, major credit cards (Visa, Mastercard, American Express), and contactless payments like Apple Pay and Google Pay for your convenience."},
|
||||
{
|
||||
id: "faq-3",
|
||||
title: "Do you offer gift certificates?",
|
||||
content: "Yes, gift certificates are available for purchase at the shop or online. They make the perfect gift for any gentleman looking for a premium grooming experience.",
|
||||
},
|
||||
id: "faq-3", title: "Do you offer gift certificates?", content: "Yes, gift certificates are available for purchase at the shop or online. They make the perfect gift for any gentleman looking for a premium grooming experience."},
|
||||
{
|
||||
id: "faq-4",
|
||||
title: "What if I need to cancel or reschedule?",
|
||||
content: "We kindly ask for at least 24 hours' notice for any cancellations or rescheduling requests. This allows us to offer the slot to another client. You can manage your appointment through your booking confirmation email or by calling us.",
|
||||
},
|
||||
id: "faq-4", title: "What if I need to cancel or reschedule?", content: "We kindly ask for at least 24 hours' notice for any cancellations or rescheduling requests. This allows us to offer the slot to another client. You can manage your appointment through your booking confirmation email or by calling us."},
|
||||
]}
|
||||
sideTitle="Got Questions?"
|
||||
sideDescription="Find quick answers to the most common questions about our services, appointments, and policies."
|
||||
@@ -393,8 +252,7 @@ export default function LandingPage() {
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
tag="Get in Touch"
|
||||
title="Book Your Next Grooming Experience"
|
||||
description="Ready for a fresh cut or a luxurious shave? Schedule your appointment with Village Barber Shop today. We look forward to seeing you!"
|
||||
@@ -413,19 +271,13 @@ export default function LandingPage() {
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "#",
|
||||
ariaLabel: "Facebook",
|
||||
},
|
||||
href: "#", ariaLabel: "Facebook"},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
href: "#", ariaLabel: "Instagram"},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
href: "#", ariaLabel: "Twitter"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user