bender/1065c30f-4c40-43bf-9c7c-abc11f206b92
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main

Browse Source 
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
bender
2026-05-17 15:40:18 +00:00
parent 3342753f9f 605a51775e
commit a24e5ae34a
1 changed files with 154 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

526
src/app/page.tsx
View File

@@ -28,387 +28,169 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Services",
id: "features",
},
{
name: "Team",
id: "team",
},
{
name: "Pricing",
id: "pricing",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Agadir Barbershop"
button={{
text: "Book Now",
href: "#contact",
}}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Services", id: "features" },
{ name: "Team", id: "team" },
{ name: "Pricing", id: "pricing" },
{ name: "Contact", id: "contact" },
]}
brandName="Agadir Barbershop"
button={{ text: "Book Now", href: "#contact" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{
variant: "radial-gradient",
}}
title="Luxury Grooming in the Heart of Agadir"
description="Experience professional grooming services tailored to your unique style. Relax in an atmosphere defined by tradition and modern precision."
buttons={[
{
text: "Book Your Spot",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/barber-shaves-bearded-man-vintage-atmosphere_1153-7904.jpg?_wi=1"
imageAlt="Luxurious barbershop interior in Agadir"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/pleased-slavic-middle-aged-male-barber-uniform-holding-barber-tools-isolated-purple-wall_141793-91610.jpg",
alt: "Barber team member",
},
{
src: "http://img.b2bpic.net/free-photo/young-pleased-blonde-male-barber-uniform-points-himself-holding-scissors-isolated-olive-green-space-with-copy-space_141793-60265.jpg",
alt: "Barber team member",
},
{
src: "http://img.b2bpic.net/free-photo/barber-man-apron-holding-scissors-comb-making-stop-gesture-with-hands-standing-orange-background_141793-67572.jpg",
alt: "Barber team member",
},
{
src: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-shaving-brush-showing-ok-sign-smiling-cheerfully_141793-37232.jpg",
alt: "Barber team member",
},
{
src: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-offering-hand-making-greeting-gesture_141793-37144.jpg",
alt: "Barber team member",
},
]}
avatarText="Join 10,000+ satisfied clients"
marqueeItems={[
{
type: "text",
text: "Premium Cuts",
},
{
type: "text",
text: "Hot Towel Shaves",
},
{
type: "text",
text: "Modern Styling",
},
{
type: "text",
text: "Expert Barbers",
},
{
type: "text",
text: "Luxury Grooming",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplit
background={{ variant: "radial-gradient" }}
title="Luxury Grooming in the Heart of Agadir"
description="Experience professional grooming services tailored to your unique style. Relax in an atmosphere defined by tradition and modern precision."
buttons={[{ text: "Book Your Spot", href: "#contact" }]}
imageSrc="http://img.b2bpic.net/free-photo/barber-shaves-bearded-man-vintage-atmosphere_1153-7904.jpg"
imageAlt="Luxurious barbershop interior in Agadir"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/pleased-slavic-middle-aged-male-barber-uniform-holding-barber-tools-isolated-purple-wall_141793-91610.jpg", alt: "Barber team member" },
{ src: "http://img.b2bpic.net/free-photo/young-pleased-blonde-male-barber-uniform-points-himself-holding-scissors-isolated-olive-green-space-with-copy-space_141793-60265.jpg", alt: "Barber team member" },
{ src: "http://img.b2bpic.net/free-photo/barber-man-apron-holding-scissors-comb-making-stop-gesture-with-hands-standing-orange-background_141793-67572.jpg", alt: "Barber team member" },
{ src: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-shaving-brush-showing-ok-sign-smiling-cheerfully_141793-37232.jpg", alt: "Barber team member" },
{ src: "http://img.b2bpic.net/free-photo/professional-barber-man-apron-holding-trimmer-offering-hand-making-greeting-gesture_141793-37144.jpg", alt: "Barber team member" },
]}
avatarText="Join 10,000+ satisfied clients"
marqueeItems={[
{ type: "text", text: "Premium Cuts" },
{ type: "text", text: "Hot Towel Shaves" },
{ type: "text", text: "Modern Styling" },
{ type: "text", text: "Expert Barbers" },
{ type: "text", text: "Luxury Grooming" },
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardMedia
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{
id: "s1",
title: "Precision Haircut",
description: "Customized cuts that suit your hair type and lifestyle.",
tag: "Popular",
imageSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-using-flat-iron_23-2148784353.jpg",
},
{
id: "s2",
title: "Traditional Shave",
description: "Classic hot towel ritual for a smooth, irritation-free finish.",
tag: "Classic",
imageSrc: "http://img.b2bpic.net/free-photo/barber-drying-old-customers-face-after-shaving_23-2148181958.jpg",
},
{
id: "s3",
title: "Beard Grooming",
description: "Detailed beard shaping, conditioning, and maintenance.",
tag: "Detail",
imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-hair-barbershop_1157-15500.jpg",
},
]}
title="Our Signature Services"
description="Comprehensive grooming solutions for the modern gentleman."
/>
</div>
<div id="features" data-section="features">
<FeatureCardMedia
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
features={[
{ id: "s1", title: "Precision Haircut", description: "Customized cuts that suit your hair type and lifestyle.", tag: "Popular", imageSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-using-flat-iron_23-2148784353.jpg" },
{ id: "s2", title: "Traditional Shave", description: "Classic hot towel ritual for a smooth, irritation-free finish.", tag: "Classic", imageSrc: "http://img.b2bpic.net/free-photo/barber-drying-old-customers-face-after-shaving_23-2148181958.jpg" },
{ id: "s3", title: "Beard Grooming", description: "Detailed beard shaping, conditioning, and maintenance.", tag: "Detail", imageSrc: "http://img.b2bpic.net/free-photo/man-cuts-hair-barbershop_1157-15500.jpg" },
]}
title="Our Signature Services"
description="Comprehensive grooming solutions for the modern gentleman."
/>
</div>
<div id="team" data-section="team">
<TeamCardEleven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
groups={[
{
id: "team-g1",
groupTitle: "Master Barbers",
members: [
{
id: "m1",
title: "Youssef",
subtitle: "Lead Barber",
detail: "Over 10 years of experience in classic cuts.",
imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286016.jpg",
},
{
id: "m2",
title: "Mehdi",
subtitle: "Senior Barber",
detail: "Specialist in beard styling and precision fades.",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-male-barber-uniform-holding-hair-clippers-showing-peace-gesture-isolated-pink-wall_141793-103187.jpg",
},
{
id: "m3",
title: "Adam",
subtitle: "Creative Stylist",
detail: "Expert in modern textures and hair coloring.",
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/barber-shaves-bearded-man-vintage-atmosphere_1153-7904.jpg?_wi=2",
imageAlt: "professional barber smiling portrait",
},
]}
title="Meet Our Expert Barbers"
description="Passion and experience at your service."
/>
</div>
<div id="team" data-section="team">
<TeamCardEleven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
groups={[
{
id: "team-g1", groupTitle: "Master Barbers", members: [
{ id: "m1", title: "Youssef", subtitle: "Lead Barber", detail: "Over 10 years of experience in classic cuts.", imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286016.jpg" },
{ id: "m2", title: "Mehdi", subtitle: "Senior Barber", detail: "Specialist in beard styling and precision fades.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-male-barber-uniform-holding-hair-clippers-showing-peace-gesture-isolated-pink-wall_141793-103187.jpg" },
{ id: "m3", title: "Adam", subtitle: "Creative Stylist", detail: "Expert in modern textures and hair coloring.", imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg" },
]
},
]}
title="Meet Our Expert Barbers"
description="Passion and experience at your service."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardOne
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
plans={[
{
id: "p1",
badge: "Essential",
price: "150 DH",
subtitle: "Regular Haircut",
features: [
"Consultation",
"Haircut",
"Style",
],
},
{
id: "p2",
badge: "Classic",
price: "250 DH",
subtitle: "Cut & Shave",
features: [
"Classic Haircut",
"Hot Towel Shave",
"Facial Massage",
],
},
{
id: "p3",
badge: "Premium",
price: "400 DH",
subtitle: "Full Grooming",
features: [
"Haircut & Beard Trim",
"Facial Treatment",
"Unlimited Styling",
],
},
]}
title="Transparent Pricing"
description="Professional services at exceptional value."
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardOne
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
plans={[
{ id: "p1", badge: "Essential", price: "150 DH", subtitle: "Regular Haircut", features: ["Consultation", "Haircut", "Style"] },
{ id: "p2", badge: "Classic", price: "250 DH", subtitle: "Cut & Shave", features: ["Classic Haircut", "Hot Towel Shave", "Facial Massage"] },
{ id: "p3", badge: "Premium", price: "400 DH", subtitle: "Full Grooming", features: ["Haircut & Beard Trim", "Facial Treatment", "Unlimited Styling"] },
]}
title="Transparent Pricing"
description="Professional services at exceptional value."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
useInvertedBackground={false}
testimonial="The best experience in Agadir. Professional, clean, and incredible attention to detail. Highly recommend Youssef!"
rating={5}
author="Karim J."
avatars={[
{
src: "http://img.b2bpic.net/free-photo/smiley-woman-doing-thumbs-up_23-2148628939.jpg",
alt: "Client 1",
},
{
src: "http://img.b2bpic.net/free-photo/young-blonde-woman-wearing-casual-blue-shirt-success-sign-doing-positive-gesture-with-hand-thumbs-up-smiling-happy-cheerful-expression-winner-gesture_839833-2022.jpg",
alt: "Client 2",
},
{
src: "http://img.b2bpic.net/free-photo/handsome-man-making-ok-sign_1368-6336.jpg",
alt: "Client 3",
},
{
src: "http://img.b2bpic.net/free-photo/smiling-asian-woman-showing-both-thumbs-up_1262-16496.jpg",
alt: "Client 4",
},
{
src: "http://img.b2bpic.net/free-photo/man-winking-thumb-up_1187-3210.jpg",
alt: "Client 5",
},
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
useInvertedBackground={false}
testimonial="The best experience in Agadir. Professional, clean, and incredible attention to detail. Highly recommend Youssef!"
rating={5}
author="Karim J."
avatars={[
{ src: "http://img.b2bpic.net/free-photo/smiley-woman-doing-thumbs-up_23-2148628939.jpg", alt: "Client 1" },
{ src: "http://img.b2bpic.net/free-photo/young-blonde-woman-wearing-casual-blue-shirt-success-sign-doing-positive-gesture-with-hand-thumbs-up-smiling-happy-cheerful-expression-winner-gesture_839833-2022.jpg", alt: "Client 2" },
{ src: "http://img.b2bpic.net/free-photo/handsome-man-making-ok-sign_1368-6336.jpg", alt: "Client 3" },
{ src: "http://img.b2bpic.net/free-photo/smiling-asian-woman-showing-both-thumbs-up_1262-16496.jpg", alt: "Client 4" },
{ src: "http://img.b2bpic.net/free-photo/man-winking-thumb-up_1187-3210.jpg", alt: "Client 5" },
]}
ratingAnimation="slide-up"
avatarsAnimation="slide-up"
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{
id: "me1",
value: "10k+",
title: "Satisfied Clients",
items: [
"Consistent 5-star service",
"Local favorite in Agadir",
],
},
{
id: "me2",
value: "15",
title: "Years Experience",
items: [
"Mastery of tradition",
"Technique refined",
],
},
{
id: "me3",
value: "200+",
title: "Monthly Regulars",
items: [
"Loyalty built on trust",
"Regular grooming maintenance",
],
},
]}
title="By The Numbers"
description="Excellence reflected in our journey."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
metrics={[
{ id: "me1", value: "10k+", title: "Satisfied Clients", items: ["Consistent 5-star service", "Local favorite in Agadir"] },
{ id: "me2", value: "15", title: "Years Experience", items: ["Mastery of tradition", "Technique refined"] },
{ id: "me3", value: "200+", title: "Monthly Regulars", items: ["Loyalty built on trust", "Regular grooming maintenance"] },
]}
title="By The Numbers"
description="Excellence reflected in our journey."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "q1",
title: "Do I need an appointment?",
content: "Booking is recommended, especially for weekends, but we accommodate walk-ins when possible.",
},
{
id: "q2",
title: "How long does a cut take?",
content: "A standard session usually lasts about 45 minutes to one hour.",
},
{
id: "q3",
title: "What payment methods do you accept?",
content: "We accept cash and local bank transfers for your convenience.",
},
]}
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"
title="Frequently Asked"
description="Answers to your grooming questions."
faqsAnimation="slide-up"
mediaAnimation="slide-up"
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitMedia
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "q1", title: "Do I need an appointment?", content: "Booking is recommended, especially for weekends, but we accommodate walk-ins when possible." },
{ id: "q2", title: "How long does a cut take?", content: "A standard session usually lasts about 45 minutes to one hour." },
{ id: "q3", title: "What payment methods do you accept?", content: "We accept cash and local bank transfers for your convenience." },
]}
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"
title="Frequently Asked"
description="Answers to your grooming questions."
faqsAnimation="slide-up"
mediaAnimation="slide-up"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Book Your Visit"
description="Schedule your next premium grooming session with us."
inputs={[
{
name: "name",
type: "text",
placeholder: "Your Full Name",
required: true,
},
{
name: "email",
type: "email",
placeholder: "Email Address",
required: true,
},
{
name: "phone",
type: "tel",
placeholder: "Phone Number",
required: true,
},
]}
textarea={{
name: "message",
placeholder: "Preferred service or time",
rows: 4,
}}
imageSrc="http://img.b2bpic.net/free-photo/portrait-bearded-young-man-sitting-cafe-using-mobile-phone_23-2148176693.jpg"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Book Your Visit"
description="Schedule your next premium grooming session with us."
inputs={[
{ name: "name", type: "text", placeholder: "Your Full Name", required: true },
{ name: "email", type: "email", placeholder: "Email Address", required: true },
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
]}
textarea={{ name: "message", placeholder: "Preferred service or time", rows: 4 }}
imageSrc="http://img.b2bpic.net/free-photo/portrait-bearded-young-man-sitting-cafe-using-mobile-phone_23-2148176693.jpg"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{
items: [
{
label: "Home",
href: "/",
},
{
label: "Services",
href: "#features",
},
{
label: "Pricing",
href: "#pricing",
},
],
},
{
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
logoText="Agadir Barbershop"
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
columns={[
{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
{ items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
]}
logoText="Agadir Barbershop"
/>
</div>
</ReactLenis>
</ThemeProvider>
);