Update src/app/page.tsx
This commit is contained in:
444
src/app/page.tsx
444
src/app/page.tsx
@@ -28,330 +28,144 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="SG Barber Shop"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="SG Barber Shop"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Precision Cuts. Modern Style."
|
||||
description="Experience the art of professional grooming in an upscale, modern environment. Your perfect look starts here at SG Barber Shop."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-furious-blonde-male-barber-uniform-crosses-hands-holding-hair-combs-hair-clipper-isolated-orange-space-with-copy-space_141793-60419.jpg?_wi=1",
|
||||
imageAlt: "Modern Barbershop",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spray-bottle-hair-tools_23-2148352897.jpg?_wi=1",
|
||||
imageAlt: "Barber Tools",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/haircuting-process-small-dog-sits-table-dog-with-professional_1157-48809.jpg",
|
||||
imageAlt: "Styling Session",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-male-self-care-setting-still-life_23-2150326541.jpg",
|
||||
imageAlt: "Barber Portrait",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186519.jpg",
|
||||
imageAlt: "Salon Interior",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/composition-shaving-objects_23-2148122071.jpg",
|
||||
imageAlt: "Precision Detail",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Precision Cuts. Modern Style."
|
||||
description="Experience the art of professional grooming in an upscale, modern environment. Your perfect look starts here at SG Barber Shop."
|
||||
buttons={[{ text: "Book Now", href: "#contact" }]}
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/young-furious-blonde-male-barber-uniform-crosses-hands-holding-hair-combs-hair-clipper-isolated-orange-space-with-copy-space_141793-60419.jpg", imageAlt: "Modern Barbershop" },
|
||||
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/spray-bottle-hair-tools_23-2148352897.jpg", imageAlt: "Barber Tools" },
|
||||
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/haircuting-process-small-dog-sits-table-dog-with-professional_1157-48809.jpg", imageAlt: "Styling Session" },
|
||||
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/top-view-male-self-care-setting-still-life_23-2150326541.jpg", imageAlt: "Barber Portrait" },
|
||||
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186519.jpg", imageAlt: "Salon Interior" },
|
||||
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/composition-shaving-objects_23-2148122071.jpg", imageAlt: "Precision Detail" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Craft"
|
||||
description={[
|
||||
"SG Barber Shop is built on a foundation of quality, passion, and precision. We combine classic barbering techniques with modern trends to ensure every guest leaves feeling confident.",
|
||||
"With years of experience, our team specializes in custom haircuts, beard grooming, and hot towel shaves designed for the modern individual.",
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Craft"
|
||||
description={[
|
||||
"SG Barber Shop is built on a foundation of quality, passion, and precision. We combine classic barbering techniques with modern trends to ensure every guest leaves feeling confident.", "With years of experience, our team specializes in custom haircuts, beard grooming, and hot towel shaves designed for the modern individual."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={true}
|
||||
title="Our Services"
|
||||
description="We offer a curated selection of premium grooming services tailored to your personal style and needs."
|
||||
accordionItems={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Precision Haircut",
|
||||
content: "Our signature haircut includes a thorough consultation, precision cut, and styling using premium products.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Beard Grooming",
|
||||
content: "Keep your beard sharp with our expert trimming, shaping, and conditioning services.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Hot Towel Shave",
|
||||
content: "Indulge in a classic relaxation experience with our premium hot towel shaves.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/alpine-hotel-hosting-winter-sports_482257-102253.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
useInvertedBackground={true}
|
||||
title="Our Services"
|
||||
description="We offer a curated selection of premium grooming services tailored to your personal style and needs."
|
||||
accordionItems={[
|
||||
{ id: "f1", title: "Precision Haircut", content: "Our signature haircut includes a thorough consultation, precision cut, and styling using premium products." },
|
||||
{ id: "f2", title: "Beard Grooming", content: "Keep your beard sharp with our expert trimming, shaping, and conditioning services." },
|
||||
{ id: "f3", title: "Hot Towel Shave", content: "Indulge in a classic relaxation experience with our premium hot towel shaves." },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/alpine-hotel-hosting-winter-sports_482257-102253.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
title: "Standard Cut",
|
||||
price: "$30",
|
||||
period: "/session",
|
||||
features: [
|
||||
"Consultation",
|
||||
"Haircut",
|
||||
"Style",
|
||||
],
|
||||
button: {
|
||||
text: "Book Appointment",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg",
|
||||
imageAlt: "haircut grooming service barber",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
title: "Beard & Cut",
|
||||
price: "$50",
|
||||
period: "/session",
|
||||
features: [
|
||||
"Haircut",
|
||||
"Beard Trim",
|
||||
"Hot Towel",
|
||||
],
|
||||
button: {
|
||||
text: "Book Appointment",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-furious-blonde-male-barber-uniform-crosses-hands-holding-hair-combs-hair-clipper-isolated-orange-space-with-copy-space_141793-60419.jpg?_wi=2",
|
||||
imageAlt: "haircut grooming service barber",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
title: "Full Grooming",
|
||||
price: "$75",
|
||||
period: "/session",
|
||||
features: [
|
||||
"Haircut",
|
||||
"Beard Styling",
|
||||
"Hot Towel Shave",
|
||||
"Face Massage",
|
||||
],
|
||||
button: {
|
||||
text: "Book Appointment",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spray-bottle-hair-tools_23-2148352897.jpg?_wi=2",
|
||||
imageAlt: "haircut grooming service barber",
|
||||
},
|
||||
]}
|
||||
title="Pricing Plans"
|
||||
description="Simple and transparent pricing for your grooming essentials."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "p1", title: "Standard Cut", price: "$30", period: "/session", features: ["Consultation", "Haircut", "Style"], button: { text: "Book Appointment" }, imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg", imageAlt: "haircut grooming service barber" },
|
||||
{ id: "p2", title: "Beard & Cut", price: "$50", period: "/session", features: ["Haircut", "Beard Trim", "Hot Towel"], button: { text: "Book Appointment" }, imageSrc: "http://img.b2bpic.net/free-photo/young-furious-blonde-male-barber-uniform-crosses-hands-holding-hair-combs-hair-clipper-isolated-orange-space-with-copy-space_141793-60419.jpg", imageAlt: "haircut grooming service barber" },
|
||||
{ id: "p3", title: "Full Grooming", price: "$75", period: "/session", features: ["Haircut", "Beard Styling", "Hot Towel Shave", "Face Massage"], button: { text: "Book Appointment" }, imageSrc: "http://img.b2bpic.net/free-photo/spray-bottle-hair-tools_23-2148352897.jpg", imageAlt: "haircut grooming service barber" },
|
||||
]}
|
||||
title="Pricing Plans"
|
||||
description="Simple and transparent pricing for your grooming essentials."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
groups={[
|
||||
{
|
||||
id: "g1",
|
||||
groupTitle: "Expert Barbers",
|
||||
members: [
|
||||
{
|
||||
id: "m1",
|
||||
title: "Alex",
|
||||
subtitle: "Lead Barber",
|
||||
detail: "Master of classic fades and precise beard styling.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
title: "Ben",
|
||||
subtitle: "Senior Stylist",
|
||||
detail: "Specialist in modern trends and texture cuts.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-hairdresser-salon_52683-111009.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
title: "Chris",
|
||||
subtitle: "Barber Expert",
|
||||
detail: "Known for his incredible attention to detail in hot towel shaves.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-bartender-bar-counter_329181-20308.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-furious-blonde-male-barber-uniform-crosses-hands-holding-hair-combs-hair-clipper-isolated-orange-space-with-copy-space_141793-60419.jpg?_wi=3",
|
||||
imageAlt: "barber portrait young professional",
|
||||
},
|
||||
]}
|
||||
title="Meet The Team"
|
||||
description="Our barbers are masters of their craft, dedicated to bringing your best look to life."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardEleven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
groups={[
|
||||
{
|
||||
id: "g1", groupTitle: "Expert Barbers", members: [
|
||||
{ id: "m1", title: "Alex", subtitle: "Lead Barber", detail: "Master of classic fades and precise beard styling.", imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg" },
|
||||
{ id: "m2", title: "Ben", subtitle: "Senior Stylist", detail: "Specialist in modern trends and texture cuts.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-hairdresser-salon_52683-111009.jpg" },
|
||||
{ id: "m3", title: "Chris", subtitle: "Barber Expert", detail: "Known for his incredible attention to detail in hot towel shaves.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-confident-bartender-bar-counter_329181-20308.jpg" },
|
||||
]
|
||||
},
|
||||
]}
|
||||
title="Meet The Team"
|
||||
description="Our barbers are masters of their craft, dedicated to bringing your best look to life."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Mark R.",
|
||||
handle: "@markr",
|
||||
testimonial: "Best fade I've ever had. Professional atmosphere and great service.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-beautiful-female-barber-uniform-showing-timeout-gesture-isolated-green-wall_141793-106149.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "James L.",
|
||||
handle: "@jamesl",
|
||||
testimonial: "Alex is the best barber in town. Always consistent and very welcoming.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-holding-juice-while-getting-haircut_613910-5727.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Robert D.",
|
||||
handle: "@robertd",
|
||||
testimonial: "Excellent experience with the hot towel shave. Extremely relaxing.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-hair-salon-facing-camera_23-2148242763.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Kevin M.",
|
||||
handle: "@kevinm",
|
||||
testimonial: "Great vibes and top-notch grooming. Highly recommended.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Sam T.",
|
||||
handle: "@samt",
|
||||
testimonial: "Always leave looking sharp. The whole team is very talented.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-posing-shirtless_23-2148696639.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Clients Say"
|
||||
description="Don't just take our word for it—hear what our satisfied clients have to say about their experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Mark R.", handle: "@markr", testimonial: "Best fade I've ever had. Professional atmosphere and great service.", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-beautiful-female-barber-uniform-showing-timeout-gesture-isolated-green-wall_141793-106149.jpg" },
|
||||
{ id: "t2", name: "James L.", handle: "@jamesl", testimonial: "Alex is the best barber in town. Always consistent and very welcoming.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-holding-juice-while-getting-haircut_613910-5727.jpg" },
|
||||
{ id: "t3", name: "Robert D.", handle: "@robertd", testimonial: "Excellent experience with the hot towel shave. Extremely relaxing.", imageSrc: "http://img.b2bpic.net/free-photo/man-hair-salon-facing-camera_23-2148242763.jpg" },
|
||||
{ id: "t4", name: "Kevin M.", handle: "@kevinm", testimonial: "Great vibes and top-notch grooming. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg" },
|
||||
{ id: "t5", name: "Sam T.", handle: "@samt", testimonial: "Always leave looking sharp. The whole team is very talented.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-posing-shirtless_23-2148696639.jpg" },
|
||||
]}
|
||||
title="What Clients Say"
|
||||
description="Don't just take our word for it—hear what our satisfied clients have to say about their experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Yes, we recommend booking an appointment online to ensure your preferred time slot.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "What products do you use?",
|
||||
content: "We use premium, high-quality grooming products that are gentle on your hair and skin.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "How long does a typical service take?",
|
||||
content: "A standard cut typically takes about 30-45 minutes depending on the complexity of the style.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Have questions? We've got answers."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do I need an appointment?", content: "Yes, we recommend booking an appointment online to ensure your preferred time slot." },
|
||||
{ id: "q2", title: "What products do you use?", content: "We use premium, high-quality grooming products that are gentle on your hair and skin." },
|
||||
{ id: "q3", title: "How long does a typical service take?", content: "A standard cut typically takes about 30-45 minutes depending on the complexity of the style." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Have questions? We've got answers."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
text="Ready for your next cut? Book now or visit us today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Ready for your next cut? Book now or visit us today."
|
||||
buttons={[{ text: "Book Now", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="SG BARBER SHOP"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms of Service",
|
||||
href: "#",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="SG BARBER SHOP"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user