Merge version_1 into main #1
501
src/app/page.tsx
501
src/app/page.tsx
@@ -29,364 +29,167 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Barbers",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Twins' House"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Barbers", id: "team" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Twins' House"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Twins' House Barbershop"
|
||||
description="Where tradition meets modern precision. Experience the art of grooming in a space designed for gentlemen."
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-portrait-smiling-handsome-man-with-his-dog-drinks-coffee-petfriendly-cafe-city-touches-golden-retriever_1258-314266.jpg",
|
||||
imageAlt: "Barbershop interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-4293.jpg",
|
||||
imageAlt: "Haircut detail",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg",
|
||||
imageAlt: "Barbershop interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-combing-moustache-client_23-2147778838.jpg",
|
||||
imageAlt: "Haircut detail",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/poodle-posing-makeup-studio_23-2151987172.jpg",
|
||||
imageAlt: "Barbershop interior",
|
||||
},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-with-beard-hairdresser-with-client-man-with-shave_1157-43560.jpg",
|
||||
imageAlt: "Haircut detail",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-21725.jpg",
|
||||
imageAlt: "Haircut detail",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wallpaper-pattern-wooden-background-job-career-concept_53876-143260.jpg",
|
||||
imageAlt: "Barbershop interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-his-hair-cut_23-2148256900.jpg",
|
||||
imageAlt: "Haircut detail",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brush-element-shaving-tool-close-up-berber-shop_1303-20672.jpg",
|
||||
imageAlt: "Barbershop interior",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-bearded-man-washing-head-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6316.jpg",
|
||||
alt: "Client profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table_627829-6236.jpg",
|
||||
alt: "Client profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149141753.jpg",
|
||||
alt: "Client profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-image-professional-stainless-coffee-pot_613910-8830.jpg",
|
||||
alt: "Client profile",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/from-hands-shaving-neck_23-2147778916.jpg",
|
||||
alt: "Client profile",
|
||||
},
|
||||
]}
|
||||
avatarText="Join our community of over 500+ satisfied gentlemen."
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Twins' House Barbershop"
|
||||
description="Where tradition meets modern precision. Experience the art of grooming in a space designed for gentlemen."
|
||||
leftCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/vertical-portrait-smiling-handsome-man-with-his-dog-drinks-coffee-petfriendly-cafe-city-touches-golden-retriever_1258-314266.jpg", imageAlt: "Barbershop interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-4293.jpg", imageAlt: "Haircut detail" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg", imageAlt: "Barbershop interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-combing-moustache-client_23-2147778838.jpg", imageAlt: "Haircut detail" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/poodle-posing-makeup-studio_23-2151987172.jpg", imageAlt: "Barbershop interior" },
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-with-beard-hairdresser-with-client-man-with-shave_1157-43560.jpg", imageAlt: "Haircut detail" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-21725.jpg", imageAlt: "Haircut detail" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wallpaper-pattern-wooden-background-job-career-concept_53876-143260.jpg", imageAlt: "Barbershop interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-his-hair-cut_23-2148256900.jpg", imageAlt: "Haircut detail" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/brush-element-shaving-tool-close-up-berber-shop_1303-20672.jpg", imageAlt: "Barbershop interior" },
|
||||
]}
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="Our Story"
|
||||
title="A Legacy of Grooming"
|
||||
description="Founded by brothers, Twins' House represents more than just a haircut. It's a sanctuary for those who value classic techniques and modern style."
|
||||
subdescription="We take pride in our precision, our atmosphere, and the relationships we build with every client who walks through our door."
|
||||
icon={Scissors}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/barber-shaves-bearded-man-vintage-atmosphere_1153-7902.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="Our Story"
|
||||
title="A Legacy of Grooming"
|
||||
description="Founded by brothers, Twins' House represents more than just a haircut. It's a sanctuary for those who value classic techniques and modern style."
|
||||
subdescription="We take pride in our precision, our atmosphere, and the relationships we build with every client who walks through our door."
|
||||
icon={Scissors}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/barber-shaves-bearded-man-vintage-atmosphere_1153-7902.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Generic chain shop experience",
|
||||
"Hasty, impersonal cuts",
|
||||
"Long, unorganized wait times",
|
||||
"Lack of attention to hair type",
|
||||
"Outdated grooming techniques",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Personalized consultation for every client",
|
||||
"Expert precision and attention to detail",
|
||||
"Relaxing, high-end atmosphere",
|
||||
"Custom-tailored style recommendations",
|
||||
"Premium organic grooming products",
|
||||
],
|
||||
}}
|
||||
title="Why Twins' House?"
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Why Twins' House?"
|
||||
description="We set the standard for traditional grooming with a modern twist, ensuring you leave feeling confident and refined."
|
||||
negativeCard={{
|
||||
items: [
|
||||
"Generic chain shop experience", "Hasty, impersonal cuts", "Long, unorganized wait times", "Lack of attention to hair type", "Outdated grooming techniques"],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Personalized consultation for every client", "Expert precision and attention to detail", "Relaxing, high-end atmosphere", "Custom-tailored style recommendations", "Premium organic grooming products"],
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
members={[
|
||||
{
|
||||
id: "1",
|
||||
name: "John Doe",
|
||||
role: "Master Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-1374.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jane Doe",
|
||||
role: "Senior Stylist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-is-wearing-black-apron-there-are-hand-tools-bag_1150-24064.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mark Smith",
|
||||
role: "Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-young-afro-american-male-barber-wearing-uniform-keeping-hand-chin-isolated-pink-wall-with-copy-space_141793-112904.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Expert Barbers"
|
||||
description="Meet the team dedicated to refining your style."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
members={[
|
||||
{ id: "1", name: "John Doe", role: "Master Barber", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-1374.jpg" },
|
||||
{ id: "2", name: "Jane Doe", role: "Senior Stylist", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-is-wearing-black-apron-there-are-hand-tools-bag_1150-24064.jpg" },
|
||||
{ id: "3", name: "Mark Smith", role: "Barber", imageSrc: "http://img.b2bpic.net/free-photo/thoughtful-young-afro-american-male-barber-wearing-uniform-keeping-hand-chin-isolated-pink-wall-with-copy-space_141793-112904.jpg" },
|
||||
]}
|
||||
title="Our Expert Barbers"
|
||||
description="Meet the team dedicated to refining your style."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="The best haircut I've had in years. The atmosphere is top-notch and the attention to detail is unmatched."
|
||||
rating={5}
|
||||
author="Michael S."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-winking-thumb-up_1187-3210.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-sensitive-man-posing-studio_23-2149518242.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-woman-using-tablet-celebrating-success-outdoor-cafe_1262-18867.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="The best haircut I've had in years. The atmosphere is top-notch and the attention to detail is unmatched."
|
||||
rating={5}
|
||||
author="Michael S."
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-winking-thumb-up_1187-3210.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/high-angle-sensitive-man-posing-studio_23-2149518242.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-woman-using-tablet-celebrating-success-outdoor-cafe_1262-18867.jpg", alt: "Client 5" },
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Classic Cut",
|
||||
price: "$30",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Precision haircut",
|
||||
"Hot towel service",
|
||||
"Straight razor neck shave",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Executive Cut",
|
||||
price: "$50",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Everything in Classic",
|
||||
"Premium scalp massage",
|
||||
"Shampoo & condition",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Beard Trim",
|
||||
price: "$20",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Precision beard sculpting",
|
||||
"Beard oil treatment",
|
||||
"Hot towel finish",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Premium grooming services designed for the modern gentleman."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "1", name: "Classic Cut", price: "$30", buttons: [{ text: "Book", href: "#contact" }],
|
||||
features: ["Precision haircut", "Hot towel service", "Straight razor neck shave"],
|
||||
},
|
||||
{
|
||||
id: "2", name: "Executive Cut", price: "$50", buttons: [{ text: "Book", href: "#contact" }],
|
||||
features: ["Everything in Classic", "Premium scalp massage", "Shampoo & condition"],
|
||||
},
|
||||
{
|
||||
id: "3", name: "Beard Trim", price: "$20", buttons: [{ text: "Book", href: "#contact" }],
|
||||
features: ["Precision beard sculpting", "Beard oil treatment", "Hot towel finish"],
|
||||
},
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Premium grooming services designed for the modern gentleman."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Yes, we highly recommend booking in advance to ensure your preferred time slot.",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "What payment methods are accepted?",
|
||||
content: "We accept cash, major credit cards, and Apple Pay.",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Do you offer walk-ins?",
|
||||
content: "Walk-ins are subject to availability. Booking is always preferred.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
description="Find answers to our most frequently asked questions."
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "1", title: "Do I need an appointment?", content: "Yes, we highly recommend booking in advance to ensure your preferred time slot." },
|
||||
{ id: "2", title: "What payment methods are accepted?", content: "We accept cash, major credit cards, and Apple Pay." },
|
||||
{ id: "3", title: "Do you offer walk-ins?", content: "Walk-ins are subject to availability. Booking is always preferred." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
faqsAnimation="blur-reveal"
|
||||
description="Find answers to our most frequently asked questions."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Visit Us"
|
||||
title="Ready for a fresh look?"
|
||||
description="Book your appointment today and experience the Twins' House difference."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Visit Us"
|
||||
title="Ready for a fresh look?"
|
||||
description="Book your appointment today and experience the Twins' House difference."
|
||||
buttons={[{ text: "Book Appointment", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Twins' House"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Twins' House"
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user