Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
404
src/app/page.tsx
404
src/app/page.tsx
@@ -29,298 +29,136 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Enrique's Barber"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Enrique's Barber"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Enrique's Barber Unisex"
|
||||
description="Where tradition meets modern grooming excellence. Experience professional styling in a warm, refined atmosphere."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-hotel-reception-entryway-with-glamorous-decorations_482257-87376.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Enrique's Barber Unisex"
|
||||
description="Where tradition meets modern grooming excellence. Experience professional styling in a warm, refined atmosphere."
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/empty-hotel-reception-entryway-with-glamorous-decorations_482257-87376.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Mastering the Art of Style",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-man-hairdresser-shop_23-2149220595.jpg",
|
||||
alt: "Barber workspace",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{ type: "text", content: "Mastering the Art of Style" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/close-up-man-hairdresser-shop_23-2149220595.jpg", alt: "Barber workspace" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Precision Cutting",
|
||||
description: "Classic and modern styles tailored to your features.",
|
||||
tag: "Popular",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-combing-moustache-client_23-2147778838.jpg",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Hot Towel Shave",
|
||||
description: "The ultimate relaxation experience for your skin.",
|
||||
tag: "Signature",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/poodle-posing-makeup-studio_23-2151987172.jpg",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Scalp Treatments",
|
||||
description: "Invigorating treatments for healthy, strong hair growth.",
|
||||
tag: "Wellness",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mustache-guy-barbershop_140725-7723.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="Comprehensive grooming solutions for every individual."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardMedia
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ id: "f1", title: "Precision Cutting", description: "Classic and modern styles tailored to your features.", tag: "Popular", imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-combing-moustache-client_23-2147778838.jpg" },
|
||||
{ id: "f2", title: "Hot Towel Shave", description: "The ultimate relaxation experience for your skin.", tag: "Signature", imageSrc: "http://img.b2bpic.net/free-photo/poodle-posing-makeup-studio_23-2151987172.jpg" },
|
||||
{ id: "f3", title: "Scalp Treatments", description: "Invigorating treatments for healthy, strong hair growth.", tag: "Wellness", imageSrc: "http://img.b2bpic.net/free-photo/mustache-guy-barbershop_140725-7723.jpg" },
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="Comprehensive grooming solutions for every individual."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
title: "Classic Cut",
|
||||
price: "$35",
|
||||
period: "session",
|
||||
features: [
|
||||
"Consultation",
|
||||
"Haircut",
|
||||
"Styling",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/life-style_1122-1803.jpg",
|
||||
imageAlt: "life style",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
title: "Deluxe Shave",
|
||||
price: "$45",
|
||||
period: "session",
|
||||
features: [
|
||||
"Hot Towel",
|
||||
"Straight Razor",
|
||||
"Aftershave",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-hotel-reception-entryway-with-glamorous-decorations_482257-87376.jpg?_wi=2",
|
||||
imageAlt: "life style",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
title: "Full Package",
|
||||
price: "$70",
|
||||
period: "session",
|
||||
features: [
|
||||
"Haircut",
|
||||
"Shave",
|
||||
"Scalp Massage",
|
||||
],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-hairdresser-shop_23-2149220595.jpg",
|
||||
imageAlt: "life style",
|
||||
},
|
||||
]}
|
||||
title="Grooming Rates"
|
||||
description="Transparent pricing for premium quality service."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "p1", title: "Classic Cut", price: "$35", period: "session", features: ["Consultation", "Haircut", "Styling"], button: { text: "Book Now" }, imageSrc: "http://img.b2bpic.net/free-photo/life-style_1122-1803.jpg", imageAlt: "life style" },
|
||||
{ id: "p2", title: "Deluxe Shave", price: "$45", period: "session", features: ["Hot Towel", "Straight Razor", "Aftershave"], button: { text: "Book Now" }, imageSrc: "http://img.b2bpic.net/free-photo/empty-hotel-reception-entryway-with-glamorous-decorations_482257-87376.jpg", imageAlt: "life style" },
|
||||
{ id: "p3", title: "Full Package", price: "$70", period: "session", features: ["Haircut", "Shave", "Scalp Massage"], button: { text: "Book Now" }, imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-hairdresser-shop_23-2149220595.jpg", imageAlt: "life style" },
|
||||
]}
|
||||
title="Grooming Rates"
|
||||
description="Transparent pricing for premium quality service."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "12+",
|
||||
title: "Years Experience",
|
||||
description: "Master barber excellence",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "5k+",
|
||||
title: "Happy Clients",
|
||||
description: "Trusted by the community",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Satisfaction Rate",
|
||||
description: "Commitment to perfection",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
]}
|
||||
title="Proven Quality"
|
||||
description="Years of dedication to the craft of barbering."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{ id: "m1", value: "12+", title: "Years Experience", description: "Master barber excellence", icon: Award },
|
||||
{ id: "m2", value: "5k+", title: "Happy Clients", description: "Trusted by the community", icon: Users },
|
||||
{ id: "m3", value: "100%", title: "Satisfaction Rate", description: "Commitment to perfection", icon: CheckCircle },
|
||||
]}
|
||||
title="Proven Quality"
|
||||
description="Years of dedication to the craft of barbering."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Enrique's is easily the best barbershop in town. The attention to detail and relaxing environment are unmatched. Highly recommended!"
|
||||
rating={5}
|
||||
author="Marcus Thompson"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-hairdresser-washing-man-s-hair_23-2150665396.jpg",
|
||||
alt: "Client 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-with-thumb-up_1368-6368.jpg",
|
||||
alt: "Client 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-woman-showing-double-thumbs-up-blouse-cardigan-looking-merry-front-view_176474-109580.jpg",
|
||||
alt: "Client 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-successful-businessman-posing-dark-wall_176420-52.jpg",
|
||||
alt: "Client 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg",
|
||||
alt: "Client 5",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Enrique's is easily the best barbershop in town. The attention to detail and relaxing environment are unmatched. Highly recommended!"
|
||||
rating={5}
|
||||
author="Marcus Thompson"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-hairdresser-washing-man-s-hair_23-2150665396.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/man-with-thumb-up_1368-6368.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-woman-showing-double-thumbs-up-blouse-cardigan-looking-merry-front-view_176474-109580.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-successful-businessman-posing-dark-wall_176420-52.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg", alt: "Client 5" },
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="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 in advance to guarantee your preferred time.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Is parking available?",
|
||||
content: "Yes, complimentary parking is available for all our clients.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Can I request a specific barber?",
|
||||
content: "Absolutely, please specify your preferred barber when booking.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our services."
|
||||
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 in advance to guarantee your preferred time." },
|
||||
{ id: "q2", title: "Is parking available?", content: "Yes, complimentary parking is available for all our clients." },
|
||||
{ id: "q3", title: "Can I request a specific barber?", content: "Absolutely, please specify your preferred barber when booking." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about our services."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
text="Ready for your next fresh look? Visit us today or book your appointment online."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
text="Ready for your next fresh look? Visit us today or book your appointment online."
|
||||
buttons={[{ text: "Book Now", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Haircuts",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Shaving",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Enrique's Barber"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Services", items: [{ label: "Haircuts", href: "#" }, { label: "Shaving", href: "#" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] },
|
||||
]}
|
||||
logoText="Enrique's Barber"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user