bender/927455fc-3c1d-456b-b6d5-84d4d94b5186
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-28 05:25:42 +00:00
parent d60452a0ca
commit 641c964121
1 changed files with 73 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

321
src/app/page.tsx
View File

@@ -32,37 +32,23 @@ export default function LandingPage() {
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "#home",
},
name: "Home", id: "#home"},
{
name: "About",
id: "#about",
},
name: "About", id: "#about"},
{
name: "Services",
id: "#services",
},
name: "Services", id: "#services"},
{
name: "Team",
id: "#team",
},
name: "Team", id: "#team"},
{
name: "Pricing",
id: "#pricing",
},
name: "Pricing", id: "#pricing"},
{
name: "Testimonials",
id: "#testimonials",
},
name: "Testimonials", id: "#testimonials"},
{
name: "FAQ",
id: "#faq",
},
name: "FAQ", id: "#faq"},
{
name: "Book Now",
id: "#book-now",
},
name: "Book Now", id: "#book-now"},
{
name: "Admin Dashboard", id: "/admin-dashboard"},
]}
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6pl0yg"
logoAlt="Disorder Barbershop Logo"
@@ -70,57 +56,34 @@ export default function LandingPage() {
bottomLeftText="Your Style, Our Craft"
bottomRightText="book@disorderbarbershop.com"
button={{
text: "Book Now",
href: "#book-now",
}}
text: "Book Now", href: "#book-now"}}
/>
</div>
<div id="home" data-section="home">
<HeroBillboardRotatedCarousel
background={{
variant: "rotated-rays-animated",
}}
variant: "rotated-rays-animated"}}
title="Precision Cuts. Timeless Style."
description="Disorder Barbershop offers expert grooming for the modern gentleman. Experience the perfect blend of traditional craft and contemporary flair."
tag="Your Style, Our Craft"
buttons={[
{
text: "Book Your Appointment",
href: "#book-now",
},
text: "Book Your Appointment", href: "#book-now"},
]}
carouselItems={[
{
id: "hero-carousel-1",
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg",
imageAlt: "Barber giving a sharp fade haircut",
},
id: "hero-carousel-1", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg", imageAlt: "Barber giving a sharp fade haircut"},
{
id: "hero-carousel-2",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506366.jpg",
imageAlt: "Client receiving a professional beard trim",
},
id: "hero-carousel-2", imageSrc: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506366.jpg", imageAlt: "Client receiving a professional beard trim"},
{
id: "hero-carousel-3",
imageSrc: "http://img.b2bpic.net/free-photo/person-creating-online-content-with-their-pets_23-2151420269.jpg",
imageAlt: "Interior of a modern barber shop with vintage touches",
},
id: "hero-carousel-3", imageSrc: "http://img.b2bpic.net/free-photo/person-creating-online-content-with-their-pets_23-2151420269.jpg", imageAlt: "Interior of a modern barber shop with vintage touches"},
{
id: "hero-carousel-4",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-shop-concept_23-2148506365.jpg",
imageAlt: "Satisfied client showcasing a fresh haircut",
},
id: "hero-carousel-4", imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-shop-concept_23-2148506365.jpg", imageAlt: "Satisfied client showcasing a fresh haircut"},
{
id: "hero-carousel-5",
imageSrc: "http://img.b2bpic.net/free-photo/shaving-process-small-dog-sits-table-dog-shaved-by-professional_1157-48803.jpg",
imageAlt: "Barber tools neatly arranged on a counter",
},
id: "hero-carousel-5", imageSrc: "http://img.b2bpic.net/free-photo/shaving-process-small-dog-sits-table-dog-shaved-by-professional_1157-48803.jpg", imageAlt: "Barber tools neatly arranged on a counter"},
{
id: "hero-carousel-6",
imageSrc: "http://img.b2bpic.net/free-photo/small-business-manager-his-workshop_23-2149094577.jpg",
imageAlt: "Barber focused on detailed cutting",
},
id: "hero-carousel-6", imageSrc: "http://img.b2bpic.net/free-photo/small-business-manager-his-workshop_23-2149094577.jpg", imageAlt: "Barber focused on detailed cutting"},
]}
autoPlay={true}
autoPlayInterval={4000}
@@ -135,9 +98,7 @@ export default function LandingPage() {
tag="Our Philosophy"
buttons={[
{
text: "Our Services",
href: "#services",
},
text: "Our Services", href: "#services"},
]}
imageSrc="http://img.b2bpic.net/free-photo/working-tools-barber-master_651396-126.jpg"
imageAlt="Barber working on a client in a stylish barbershop"
@@ -151,32 +112,17 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
id: "f-haircut",
title: "Precision Haircuts",
descriptions: [
"Tailored cuts to match your style, face shape, and hair type. Includes consultation, wash, cut, and style.",
],
imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-near-blurred-stylist_23-2147778876.jpg",
imageAlt: "Barber giving a precision haircut",
},
id: "f-haircut", title: "Precision Haircuts", descriptions: [
"Tailored cuts to match your style, face shape, and hair type. Includes consultation, wash, cut, and style."],
imageSrc: "http://img.b2bpic.net/free-photo/bearded-man-near-blurred-stylist_23-2147778876.jpg", imageAlt: "Barber giving a precision haircut"},
{
id: "f-beard",
title: "Expert Beard Trims",
descriptions: [
"Shape and refine your beard with precision trimming and styling, ensuring a sharp, well-groomed look.",
],
imageSrc: "http://img.b2bpic.net/free-photo/close-up-bearded-customer-looking-up_23-2148256859.jpg",
imageAlt: "Barber trimming a client's beard",
},
id: "f-beard", title: "Expert Beard Trims", descriptions: [
"Shape and refine your beard with precision trimming and styling, ensuring a sharp, well-groomed look."],
imageSrc: "http://img.b2bpic.net/free-photo/close-up-bearded-customer-looking-up_23-2148256859.jpg", imageAlt: "Barber trimming a client's beard"},
{
id: "f-shave",
title: "Classic Hot Lather Shaves",
descriptions: [
"Experience the ultimate relaxation with a traditional hot towel and straight razor shave for a smooth finish.",
],
imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985718.jpg",
imageAlt: "Barber performing a hot lather shave",
},
id: "f-shave", title: "Classic Hot Lather Shaves", descriptions: [
"Experience the ultimate relaxation with a traditional hot towel and straight razor shave for a smooth finish."],
imageSrc: "http://img.b2bpic.net/free-photo/young-man-getting-his-beard-styled-barber_23-2148985718.jpg", imageAlt: "Barber performing a hot lather shave"},
]}
title="Our Signature Services"
description="From precision haircuts to luxurious shaves, we offer a full range of grooming services tailored to your needs."
@@ -192,26 +138,11 @@ export default function LandingPage() {
useInvertedBackground={true}
members={[
{
id: "m-main-barber",
name: "Elijah 'The Blade' Stone",
role: "Master Barber & Founder",
imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg",
imageAlt: "Portrait of Elijah 'The Blade' Stone",
},
id: "m-main-barber", name: "Elijah 'The Blade' Stone", role: "Master Barber & Founder", imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg", imageAlt: "Portrait of Elijah 'The Blade' Stone"},
{
id: "m-style-specialist",
name: "Creative Stylist",
role: "Hair & Beard Artist",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-hairstilyst-giving-haircut_23-2148506300.jpg",
imageAlt: "Portrait of a creative barber stylist",
},
id: "m-style-specialist", name: "Creative Stylist", role: "Hair & Beard Artist", imageSrc: "http://img.b2bpic.net/free-photo/side-view-hairstilyst-giving-haircut_23-2148506300.jpg", imageAlt: "Portrait of a creative barber stylist"},
{
id: "m-grooming-expert",
name: "Grooming Expert",
role: "Specialist in Classic Shaves",
imageSrc: "http://img.b2bpic.net/free-photo/clueless-young-barber-wearing-uniform-glasses-holding-shaving-brush-hair-trimmer-looking-camera-isolated-blue-background_141793-138279.jpg",
imageAlt: "Portrait of a grooming expert",
},
id: "m-grooming-expert", name: "Grooming Expert", role: "Specialist in Classic Shaves", imageSrc: "http://img.b2bpic.net/free-photo/clueless-young-barber-wearing-uniform-glasses-holding-shaving-brush-hair-trimmer-looking-camera-isolated-blue-background_141793-138279.jpg", imageAlt: "Portrait of a grooming expert"},
]}
title="Meet The Barber"
description="Our passion for grooming is unmatched. With years of experience and a keen eye for detail, we're dedicated to perfecting your look."
@@ -226,58 +157,23 @@ export default function LandingPage() {
useInvertedBackground={false}
plans={[
{
id: "p-classic",
title: "The Classic Cut",
price: "$35",
period: "Haircut Only",
features: [
"Precision Haircut",
"Wash & Style",
"Neckline Shave",
],
id: "p-classic", title: "The Classic Cut", price: "$35", period: "Haircut Only", features: [
"Precision Haircut", "Wash & Style", "Neckline Shave"],
button: {
text: "Book Now",
href: "#book-now",
},
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-posing-tropical-location-background-palm-trees-greenery_1321-1421.jpg",
imageAlt: "Illustration of a classic haircut",
},
text: "Book Now", href: "#book-now"},
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-posing-tropical-location-background-palm-trees-greenery_1321-1421.jpg", imageAlt: "Illustration of a classic haircut"},
{
id: "p-premium",
title: "The Premium Groom",
price: "$60",
period: "Full Experience",
features: [
"Precision Haircut",
"Expert Beard Trim",
"Hot Lather Finish",
"Wash & Style",
],
id: "p-premium", title: "The Premium Groom", price: "$60", period: "Full Experience", features: [
"Precision Haircut", "Expert Beard Trim", "Hot Lather Finish", "Wash & Style"],
button: {
text: "Book Now",
href: "#book-now",
},
imageSrc: "http://img.b2bpic.net/free-photo/european-tattooed-bearded-exhausted-strong-tired-man-looks-sweaty-after-doing-workout_343596-1179.jpg",
imageAlt: "Illustration of a full grooming experience",
},
text: "Book Now", href: "#book-now"},
imageSrc: "http://img.b2bpic.net/free-photo/european-tattooed-bearded-exhausted-strong-tired-man-looks-sweaty-after-doing-workout_343596-1179.jpg", imageAlt: "Illustration of a full grooming experience"},
{
id: "p-royal",
title: "The Royal Shave",
price: "$50",
period: "Ultimate Relaxation",
features: [
"Traditional Hot Lather Shave",
"Facial Steaming",
"Aftershave Treatment",
"Face Massage",
],
id: "p-royal", title: "The Royal Shave", price: "$50", period: "Ultimate Relaxation", features: [
"Traditional Hot Lather Shave", "Facial Steaming", "Aftershave Treatment", "Face Massage"],
button: {
text: "Book Now",
href: "#book-now",
},
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-putting-shaving-cream-elderly-client-beauty-salon_23-2148182015.jpg",
imageAlt: "Illustration of a royal shave",
},
text: "Book Now", href: "#book-now"},
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-putting-shaving-cream-elderly-client-beauty-salon_23-2148182015.jpg", imageAlt: "Illustration of a royal shave"},
]}
title="Grooming Packages"
description="Choose the perfect package to define your style and elevate your grooming routine."
@@ -292,45 +188,15 @@ export default function LandingPage() {
useInvertedBackground={true}
testimonials={[
{
id: "t-1",
name: "Marcus A.",
handle: "@MarcusA_Style",
testimonial: "Best haircut I've had in years! The attention to detail is incredible, and the atmosphere is top-notch. Highly recommend Disorder Barbershop.",
imageSrc: "http://img.b2bpic.net/free-photo/man-looking-away-barber-shop_23-2148353460.jpg",
imageAlt: "Client Marcus A.",
},
id: "t-1", name: "Marcus A.", handle: "@MarcusA_Style", testimonial: "Best haircut I've had in years! The attention to detail is incredible, and the atmosphere is top-notch. Highly recommend Disorder Barbershop.", imageSrc: "http://img.b2bpic.net/free-photo/man-looking-away-barber-shop_23-2148353460.jpg", imageAlt: "Client Marcus A."},
{
id: "t-2",
name: "Javier L.",
handle: "@JavierL_Groom",
testimonial: "Came in for a beard trim and left with a masterpiece. The barber truly understands facial hair. I won't go anywhere else.",
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205927.jpg",
imageAlt: "Client Javier L.",
},
id: "t-2", name: "Javier L.", handle: "@JavierL_Groom", testimonial: "Came in for a beard trim and left with a masterpiece. The barber truly understands facial hair. I won't go anywhere else.", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205927.jpg", imageAlt: "Client Javier L."},
{
id: "t-3",
name: "David P.",
handle: "@DavidP_Fresh",
testimonial: "The hot lather shave is pure luxury. It's more than just a shave; it's an experience. Feel like a new man every time!",
imageSrc: "http://img.b2bpic.net/free-photo/view-child-hair-salon_23-2150462476.jpg",
imageAlt: "Client David P.",
},
id: "t-3", name: "David P.", handle: "@DavidP_Fresh", testimonial: "The hot lather shave is pure luxury. It's more than just a shave; it's an experience. Feel like a new man every time!", imageSrc: "http://img.b2bpic.net/free-photo/view-child-hair-salon_23-2150462476.jpg", imageAlt: "Client David P."},
{
id: "t-4",
name: "Ethan K.",
handle: "@EthanK_Cuts",
testimonial: "Always a fresh cut and great conversation. The online booking is super convenient. Disorder Barbershop sets the standard.",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-yellow-scene_23-2148184814.jpg",
imageAlt: "Client Ethan K.",
},
id: "t-4", name: "Ethan K.", handle: "@EthanK_Cuts", testimonial: "Always a fresh cut and great conversation. The online booking is super convenient. Disorder Barbershop sets the standard.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-yellow-scene_23-2148184814.jpg", imageAlt: "Client Ethan K."},
{
id: "t-5",
name: "Robert S.",
handle: "@RobertS_Classic",
testimonial: "Found my new regular spot! The quality of the haircut is consistent, and the staff are always friendly and professional. A true gem.",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2149220556.jpg",
imageAlt: "Client Robert S.",
},
id: "t-5", name: "Robert S.", handle: "@RobertS_Classic", testimonial: "Found my new regular spot! The quality of the haircut is consistent, and the staff are always friendly and professional. A true gem.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2149220556.jpg", imageAlt: "Client Robert S."},
]}
title="What Our Clients Say"
description="Hear directly from our satisfied customers about their Disorder Barbershop experience."
@@ -346,30 +212,15 @@ export default function LandingPage() {
useInvertedBackground={false}
faqs={[
{
id: "faq-1",
title: "How do I book an appointment?",
content: "You can easily book your appointment online through our 'Book Now' section on the website. Select your desired service, date, and time. Alternatively, you can call us directly.",
},
id: "faq-1", title: "How do I book an appointment?", content: "You can easily book your appointment online through our 'Book Now' section on the website. Select your desired service, date, and time. Alternatively, you can call us directly."},
{
id: "faq-2",
title: "Do you accept walk-ins?",
content: "While we primarily operate by appointment to ensure personalized service, we do accept walk-ins if there's availability. We recommend booking in advance to secure your preferred time.",
},
id: "faq-2", title: "Do you accept walk-ins?", content: "While we primarily operate by appointment to ensure personalized service, we do accept walk-ins if there's availability. We recommend booking in advance to secure your preferred time."},
{
id: "faq-3",
title: "What are your operating hours?",
content: "Our operating hours are Monday to Friday, 10 AM - 7 PM, and Saturday, 9 AM - 5 PM. We are closed on Sundays. Please check our booking calendar for specific availability.",
},
id: "faq-3", title: "What are your operating hours?", content: "Our operating hours are Monday to Friday, 10 AM - 7 PM, and Saturday, 9 AM - 5 PM. We are closed on Sundays. Please check our booking calendar for specific availability."},
{
id: "faq-4",
title: "What payment methods do you accept?",
content: "We accept all major credit cards, debit cards, and cash payments. Digital payment options may also be available upon request.",
},
id: "faq-4", title: "What payment methods do you accept?", content: "We accept all major credit cards, debit cards, and cash payments. Digital payment options may also be available upon request."},
{
id: "faq-5",
title: "Can I cancel or reschedule my appointment?",
content: "Yes, you can cancel or reschedule your appointment up to 24 hours in advance through your online booking account or by contacting us directly. Cancellations within 24 hours may incur a fee.",
},
id: "faq-5", title: "Can I cancel or reschedule my appointment?", content: "Yes, you can cancel or reschedule your appointment up to 24 hours in advance through your online booking account or by contacting us directly. Cancellations within 24 hours may incur a fee."},
]}
title="Frequently Asked Questions"
description="Find answers to common questions about our services, booking, and more."
@@ -382,20 +233,15 @@ export default function LandingPage() {
<ContactCTA
useInvertedBackground={true}
background={{
variant: "radial-gradient",
}}
variant: "radial-gradient"}}
tag="Ready for a Fresh Look?"
title="Book Your Next Appointment"
description="Our online calendar makes it easy to find a time that works for you. Select your service, pick a date, and let us handle the rest. We look forward to seeing you!"
buttons={[
{
text: "Go to Booking Calendar",
href: "https://example.com/barber-booking",
},
text: "Go to Booking Calendar", href: "https://example.com/barber-booking"},
{
text: "Find Us on Map",
href: "https://maps.app.goo.gl/sqSYQHrD8rSumyvE9?g_st=ic",
},
text: "Find Us on Map", href: "https://maps.app.goo.gl/sqSYQHrD8rSumyvE9?g_st=ic"},
]}
/>
</div>
@@ -407,58 +253,37 @@ export default function LandingPage() {
logoText="Disorder Barbershop"
columns={[
{
title: "Navigation",
items: [
title: "Navigation", items: [
{
label: "Home",
href: "#home",
},
label: "Home", href: "#home"},
{
label: "Services",
href: "#services",
},
label: "Services", href: "#services"},
{
label: "About Us",
href: "#about",
},
label: "About Us", href: "#about"},
{
label: "Pricing",
href: "#pricing",
},
label: "Pricing", href: "#pricing"},
{
label: "Admin Dashboard", href: "/admin-dashboard"},
],
},
{
title: "Support",
items: [
title: "Support", items: [
{
label: "FAQ",
href: "#faq",
},
label: "FAQ", href: "#faq"},
{
label: "Book Online",
href: "https://example.com/barber-booking",
},
label: "Book Online", href: "https://example.com/barber-booking"},
{
label: "Contact Us",
href: "#book-now",
},
label: "Contact Us", href: "#book-now"},
],
},
{
title: "Location",
items: [
title: "Location", items: [
{
label: "View on Map",
href: "https://maps.app.goo.gl/sqSYQHrD8rSumyvE9?g_st=ic",
},
label: "View on Map", href: "https://maps.app.goo.gl/sqSYQHrD8rSumyvE9?g_st=ic"},
{
label: "123 Grooming Lane, Cityville",
href: "#",
},
label: "123 Grooming Lane, Cityville", href: "#"},
{
label: "Mon-Sat: 9AM - 7PM",
href: "#",
},
label: "Mon-Sat: 9AM - 7PM", href: "#"},
],
},
]}
@@ -468,4 +293,4 @@ export default function LandingPage() {
</ReactLenis>
</ThemeProvider>
);
}
}