Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 90b7a06b1e | |||
| b89cb80f7e |
288
src/app/page.tsx
288
src/app/page.tsx
@@ -33,37 +33,21 @@ 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: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
name: "Testimonials", id: "testimonials"},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
name: "Pricing", id: "pricing"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "faq",
|
||||
},
|
||||
name: "FAQ", id: "faq"},
|
||||
{
|
||||
name: "Book Now",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Book Now", id: "contact"},
|
||||
]}
|
||||
brandName="Lypsʹkyy Barbershop"
|
||||
bottomLeftText="Expert Barbers. Exceptional Service."
|
||||
@@ -74,8 +58,7 @@ export default function LandingPage() {
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
variant: "rotated-rays-animated"}}
|
||||
title="Sharpen Your Style"
|
||||
description="Experience the finest cuts, shaves, and grooming services at Lypsʹkyy Barbershop. Where tradition meets modern precision."
|
||||
tag="Luxury Grooming"
|
||||
@@ -83,46 +66,24 @@ export default function LandingPage() {
|
||||
tagAnimation="slide-up"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
{
|
||||
text: "Our Services",
|
||||
href: "#services",
|
||||
},
|
||||
text: "Our Services", href: "#services"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg",
|
||||
imageAlt: "Barber cutting a client's hair",
|
||||
},
|
||||
id: "1", imageSrc: "https://source.unsplash.com/random/800x600?barber,cutting,hair", imageAlt: "Barber cutting a client's hair"},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-barbershop-concept_23-2148506256.jpg",
|
||||
imageAlt: "Barber performing a hot towel shave",
|
||||
},
|
||||
id: "2", imageSrc: "https://source.unsplash.com/random/800x600?barber,shaving,beard", imageAlt: "Barber performing a hot towel shave"},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7378.jpg",
|
||||
imageAlt: "Barber styling a client's hair",
|
||||
},
|
||||
id: "3", imageSrc: "https://source.unsplash.com/random/800x600?barbershop,interior,vintage", imageAlt: "Barber styling a client's hair"},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-details-hairdresser-salon_23-2149205861.jpg",
|
||||
imageAlt: "Stylish barbershop interior",
|
||||
},
|
||||
id: "4", imageSrc: "https://source.unsplash.com/random/800x600?man,haircut,client", imageAlt: "Stylish barbershop interior"},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-man-getting-haircut_23-2148224298.jpg",
|
||||
imageAlt: "Barber using clippers for a fade",
|
||||
},
|
||||
id: "5", imageSrc: "https://source.unsplash.com/random/800x600?barber,styling,hair", imageAlt: "Barber using clippers for a fade"},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6322.jpg",
|
||||
imageAlt: "Barbershop grooming products display",
|
||||
},
|
||||
id: "6", imageSrc: "https://source.unsplash.com/random/800x600?barbershop,tools,razor", imageAlt: "Barbershop grooming products display"},
|
||||
]}
|
||||
autoPlay={true}
|
||||
autoPlayInterval={4000}
|
||||
@@ -135,7 +96,7 @@ export default function LandingPage() {
|
||||
title="Where Craft Meets Comfort"
|
||||
description="At Lypsʹkyy Barbershop, we blend timeless grooming traditions with contemporary techniques. Our passionate barbers are dedicated to providing a personalized experience, ensuring you leave looking and feeling your best. Step into our relaxed atmosphere and discover the difference of true craftsmanship."
|
||||
tag="Our Story"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/clueless-young-male-barber-wearing-white-shirt-barber-apron-holding-comb-hair-clip-air-looking-hair-clip-isolated-blue-background_141793-134179.jpg"
|
||||
imageSrc="https://source.unsplash.com/random/1200x800?barbershop,inside,chair"
|
||||
imageAlt="Interior of Lypsʹkyy Barbershop with a barber working"
|
||||
/>
|
||||
</div>
|
||||
@@ -148,23 +109,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Haircut",
|
||||
description: "Our signature cut, tailored to your head shape and style preferences. Includes consultation, wash, cut, and finish.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506217.jpg",
|
||||
imageAlt: "Man getting a precision haircut",
|
||||
},
|
||||
title: "Precision Haircut", description: "Our signature cut, tailored to your head shape and style preferences. Includes consultation, wash, cut, and finish.", imageSrc: "https://source.unsplash.com/random/600x400?precision,haircut", imageAlt: "Man getting a precision haircut"},
|
||||
{
|
||||
title: "Classic Hot Shave",
|
||||
description: "Indulge in the luxurious hot towel shave experience, complete with essential oils, a straight razor, and soothing aftershave.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-barbershop-concept_23-2148506264.jpg",
|
||||
imageAlt: "Barber performing a classic hot towel shave",
|
||||
},
|
||||
title: "Classic Hot Shave", description: "Indulge in the luxurious hot towel shave experience, complete with essential oils, a straight razor, and soothing aftershave.", imageSrc: "https://source.unsplash.com/random/600x400?hot,towel,shave", imageAlt: "Barber performing a classic hot towel shave"},
|
||||
{
|
||||
title: "Beard Trim & Styling",
|
||||
description: "From a simple tidy-up to a complete beard transformation, we'll sculpt your beard to perfection, enhancing your facial features.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg",
|
||||
imageAlt: "Man getting his beard trimmed and styled",
|
||||
},
|
||||
title: "Beard Trim & Styling", description: "From a simple tidy-up to a complete beard transformation, we'll sculpt your beard to perfection, enhancing your facial features.", imageSrc: "https://source.unsplash.com/random/600x400?beard,trim,style", imageAlt: "Man getting his beard trimmed and styled"},
|
||||
]}
|
||||
title="Signature Services"
|
||||
description="Discover our range of expert grooming services designed to refine your look and rejuvenate your spirit."
|
||||
@@ -180,29 +129,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
members={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Oleksandr Lypsʹkyy",
|
||||
role: "Founder & Lead Barber",
|
||||
description: "With over 15 years of experience, Oleksandr is a true artist with clippers and a razor. His passion for classic styles and modern trends shines through every cut.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94801.jpg",
|
||||
imageAlt: "Portrait of Oleksandr Lypsʹkyy",
|
||||
},
|
||||
id: "1", name: "Oleksandr Lypsʹkyy", role: "Founder & Lead Barber", description: "With over 15 years of experience, Oleksandr is a true artist with clippers and a razor. His passion for classic styles and modern trends shines through every cut.", imageSrc: "https://source.unsplash.com/random/400x400?male,barber,portrait,confident", imageAlt: "Portrait of Oleksandr Lypsʹkyy"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Kateryna Ivanova",
|
||||
role: "Senior Stylist",
|
||||
description: "Kateryna brings a fresh perspective to traditional grooming. Specializing in intricate fades and beard artistry, she ensures every client leaves feeling confident.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/tired-with-closed-eyes-young-beautiful-female-barber-uniform-holding-winner-cup-with-hair-clippers-isolated-blue-background_141793-119364.jpg",
|
||||
imageAlt: "Portrait of Kateryna Ivanova",
|
||||
},
|
||||
id: "2", name: "Kateryna Ivanova", role: "Senior Stylist", description: "Kateryna brings a fresh perspective to traditional grooming. Specializing in intricate fades and beard artistry, she ensures every client leaves feeling confident.", imageSrc: "https://source.unsplash.com/random/400x400?female,stylist,portrait,professional", imageAlt: "Portrait of Kateryna Ivanova"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Dmytro Volkov",
|
||||
role: "Grooming Specialist",
|
||||
description: "Dmytro is our meticulous grooming expert, known for his attention to detail in shaves and facials. He’s dedicated to providing a relaxing and rejuvenating experience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-clenching-fist-happy-excited-shouting_141793-37149.jpg",
|
||||
imageAlt: "Portrait of Dmytro Volkov",
|
||||
},
|
||||
id: "3", name: "Dmytro Volkov", role: "Grooming Specialist", description: "Dmytro is our meticulous grooming expert, known for his attention to detail in shaves and facials. He’s dedicated to providing a relaxing and rejuvenating experience.", imageSrc: "https://source.unsplash.com/random/400x400?grooming,specialist,portrait,focused", imageAlt: "Portrait of Dmytro Volkov"},
|
||||
]}
|
||||
title="Meet Our Master Barbers"
|
||||
description="Our team of highly skilled and passionate barbers are here to provide you with an exceptional grooming experience."
|
||||
@@ -215,43 +146,21 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Mark R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-hairstilyst-giving-haircut_23-2148506285.jpg",
|
||||
imageAlt: "Client Mark R. smiling",
|
||||
},
|
||||
id: "1", name: "Mark R.", imageSrc: "https://source.unsplash.com/random/200x200?client,man,happy", imageAlt: "Client Mark R. smiling"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Alex B.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-senior-businessman-pointing-with-finger_1262-3108.jpg",
|
||||
imageAlt: "Client Alex B. with a groomed beard",
|
||||
},
|
||||
id: "2", name: "Alex B.", imageSrc: "https://source.unsplash.com/random/200x200?customer,male,satisfied", imageAlt: "Client Alex B. with a groomed beard"},
|
||||
{
|
||||
id: "3",
|
||||
name: "John S.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fashion-stylish-model-dressed-elegant-light-pink-suit-posing-near-white-wall_158538-13439.jpg",
|
||||
imageAlt: "Client John S. smiling confidently",
|
||||
},
|
||||
id: "3", name: "John S.", imageSrc: "https://source.unsplash.com/random/200x200?guy,fresh,look", imageAlt: "Client John S. smiling confidently"},
|
||||
{
|
||||
id: "4",
|
||||
name: "David L.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-crosswalk_1098-14105.jpg",
|
||||
imageAlt: "Client David L. with a neat haircut",
|
||||
},
|
||||
id: "4", name: "David L.", imageSrc: "https://source.unsplash.com/random/200x200?gentleman,groomed", imageAlt: "Client David L. with a neat haircut"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Ivan K.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-hispanic-man-wearing-barber-apron-holding-razor-scissors-afraid-shocked-with-surprise-amazed-expression-fear-excited-face_839833-10378.jpg",
|
||||
imageAlt: "Client Ivan K. with a fresh modern haircut",
|
||||
},
|
||||
id: "5", name: "Ivan K.", imageSrc: "https://source.unsplash.com/random/200x200?man,smiling,barbershop", imageAlt: "Client Ivan K. with a fresh modern haircut"},
|
||||
]}
|
||||
cardTitle="What Our Clients Say"
|
||||
cardTag="Rave Reviews"
|
||||
buttons={[
|
||||
{
|
||||
text: "See All Reviews",
|
||||
href: "#",
|
||||
},
|
||||
text: "See All Reviews", href: "#"},
|
||||
]}
|
||||
cardAnimation="slide-up"
|
||||
/>
|
||||
@@ -264,61 +173,31 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic-cut",
|
||||
badge: "Classic",
|
||||
badgeIcon: Scissors,
|
||||
price: "$40",
|
||||
subtitle: "Precision Haircut",
|
||||
buttons: [
|
||||
id: "basic-cut", badge: "Classic", badgeIcon: Scissors,
|
||||
price: "$40", subtitle: "Precision Haircut", buttons: [
|
||||
{
|
||||
text: "Book Haircut",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Haircut", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Consultation",
|
||||
"Wash & Cut",
|
||||
"Basic Styling",
|
||||
"Hot Towel Finish",
|
||||
],
|
||||
"Consultation", "Wash & Cut", "Basic Styling", "Hot Towel Finish"],
|
||||
},
|
||||
{
|
||||
id: "deluxe-shave",
|
||||
badge: "Premium",
|
||||
badgeIcon: Cog,
|
||||
price: "$55",
|
||||
subtitle: "Classic Hot Shave",
|
||||
buttons: [
|
||||
id: "deluxe-shave", badge: "Premium", badgeIcon: Cog,
|
||||
price: "$55", subtitle: "Classic Hot Shave", buttons: [
|
||||
{
|
||||
text: "Book Shave",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Shave", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Pre-Shave Prep",
|
||||
"Hot Lather & Straight Razor",
|
||||
"Soothing Aftershave",
|
||||
"Face Massage",
|
||||
],
|
||||
"Pre-Shave Prep", "Hot Lather & Straight Razor", "Soothing Aftershave", "Face Massage"],
|
||||
},
|
||||
{
|
||||
id: "full-package",
|
||||
badge: "Signature",
|
||||
badgeIcon: Crown,
|
||||
price: "$90",
|
||||
subtitle: "Haircut & Hot Shave",
|
||||
buttons: [
|
||||
id: "full-package", badge: "Signature", badgeIcon: Crown,
|
||||
price: "$90", subtitle: "Haircut & Hot Shave", buttons: [
|
||||
{
|
||||
text: "Book Package",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Package", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Precision Haircut",
|
||||
"Hot Lather & Straight Razor Shave",
|
||||
"Beard Trim (if applicable)",
|
||||
"Face Massage & Styling",
|
||||
],
|
||||
"Precision Haircut", "Hot Lather & Straight Razor Shave", "Beard Trim (if applicable)", "Face Massage & Styling"],
|
||||
},
|
||||
]}
|
||||
title="Our Pricing"
|
||||
@@ -333,20 +212,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "While walk-ins are welcome, we highly recommend booking an appointment to ensure you get your preferred barber and avoid waiting times. You can book online or call us directly.",
|
||||
},
|
||||
id: "q1", title: "Do I need an appointment?", content: "While walk-ins are welcome, we highly recommend booking an appointment to ensure you get your preferred barber and avoid waiting times. You can book online or call us directly."},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What products do you use?",
|
||||
content: "We use a curated selection of high-quality grooming products from trusted brands, chosen for their effectiveness and natural ingredients to protect your hair and skin.",
|
||||
},
|
||||
id: "q2", title: "What products do you use?", content: "We use a curated selection of high-quality grooming products from trusted brands, chosen for their effectiveness and natural ingredients to protect your hair and skin."},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Do you offer gift cards?",
|
||||
content: "Yes, gift cards are available for purchase in-store or online. They make the perfect gift for any gentleman looking to refine their style.",
|
||||
},
|
||||
id: "q3", title: "Do you offer gift cards?", content: "Yes, gift cards are available for purchase in-store or online. They make the perfect gift for any gentleman looking to refine their style."},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions? We've got answers. Check out our most common inquiries below."
|
||||
@@ -359,20 +229,15 @@ export default function LandingPage() {
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
tag="Ready for a Fresh Look?"
|
||||
title="Book Your Appointment Today"
|
||||
description="Don't wait to look your best. Schedule your visit to Lypsʹkyy Barbershop and let our experts craft your perfect style."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:+1234567890",
|
||||
},
|
||||
text: "Call Now", href: "tel:+1234567890"},
|
||||
{
|
||||
text: "Book Online",
|
||||
href: "#",
|
||||
},
|
||||
text: "Book Online", href: "#"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
@@ -385,66 +250,39 @@ export default function LandingPage() {
|
||||
logoText="Lypsʹkyy Barbershop"
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
title: "Services", items: [
|
||||
{
|
||||
label: "Haircuts",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Haircuts", href: "#services"},
|
||||
{
|
||||
label: "Shaves",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Shaves", href: "#services"},
|
||||
{
|
||||
label: "Beard Trims",
|
||||
href: "#services",
|
||||
},
|
||||
label: "Beard Trims", href: "#services"},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
label: "Pricing", href: "#pricing"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About Us", href: "#about"},
|
||||
{
|
||||
label: "Our Team",
|
||||
href: "#team",
|
||||
},
|
||||
label: "Our Team", href: "#team"},
|
||||
{
|
||||
label: "Testimonials",
|
||||
href: "#testimonials",
|
||||
},
|
||||
label: "Testimonials", href: "#testimonials"},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
label: "FAQ", href: "#faq"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
title: "Connect", items: [
|
||||
{
|
||||
label: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Book Now", href: "#contact"},
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Contact Us", href: "#contact"},
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com/lypskyybarbershop",
|
||||
},
|
||||
label: "Instagram", href: "https://instagram.com/lypskyybarbershop"},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "https://facebook.com/lypskyybarbershop",
|
||||
},
|
||||
label: "Facebook", href: "https://facebook.com/lypskyybarbershop"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
Reference in New Issue
Block a user