Merge version_1 into main #2
283
src/app/page.tsx
283
src/app/page.tsx
@@ -30,91 +30,40 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "#team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "Team", id: "#team" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Ammar's Barbershop"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Precision Cuts. Classic Style."
|
||||
description="Experience superior grooming at Ammar's Barbershop. From modern fades to classic hot towel shaves, we redefine excellence."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg?_wi=1"
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg"
|
||||
imageAlt="Ammar's Barbershop Interior"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/full-shot-barber-hair-salon_23-2148242782.jpg",
|
||||
alt: "Full shot of barber at hair salon",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/male-barber-giving-his-client-nice-haircut_23-2149186489.jpg",
|
||||
alt: "Male barber giving his client a nice haircut",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/customer-standing-front-mirror-barbershop_23-2148181953.jpg",
|
||||
alt: "Customer standing in front of mirror at barbershop",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-man-barber-s-shop-getting-his-beard-trimmed_23-2149186494.jpg",
|
||||
alt: "Young man at the barber's shop getting his beard trimmed",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-surprised-blonde-male-barber-uniform-holds-hair-clipper-raises-fist-up-isolated-olive-green-space-with-copy-space_141793-60279.jpg",
|
||||
alt: "Young surprised blonde male barber",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/full-shot-barber-hair-salon_23-2148242782.jpg", alt: "Full shot of barber at hair salon" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/male-barber-giving-his-client-nice-haircut_23-2149186489.jpg", alt: "Male barber giving his client a nice haircut" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/customer-standing-front-mirror-barbershop_23-2148181953.jpg", alt: "Customer standing in front of mirror at barbershop" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-man-barber-s-shop-getting-his-beard-trimmed_23-2149186494.jpg", alt: "Young man at the barber's shop getting his beard trimmed" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-surprised-blonde-male-barber-uniform-holds-hair-clipper-raises-fist-up-isolated-olive-green-space-with-copy-space_141793-60279.jpg", alt: "Young surprised blonde male barber" }
|
||||
]}
|
||||
avatarText="Trusted by 500+ happy clients"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Expert Grooming",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modern Fades",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Classic Shaves",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Products",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Tailored Styling",
|
||||
},
|
||||
{ type: "text", text: "Expert Grooming" },
|
||||
{ type: "text", text: "Modern Fades" },
|
||||
{ type: "text", text: "Classic Shaves" },
|
||||
{ type: "text", text: "Premium Products" },
|
||||
{ type: "text", text: "Tailored Styling" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -124,20 +73,8 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
negativeCard={{
|
||||
items: [
|
||||
"No Rushed Service",
|
||||
"No Generic Styles",
|
||||
"No Compromise on Hygiene",
|
||||
],
|
||||
}}
|
||||
positiveCard={{
|
||||
items: [
|
||||
"Modern Fades",
|
||||
"Classic Scissor Cuts",
|
||||
"Hot Towel Shave",
|
||||
],
|
||||
}}
|
||||
negativeCard={{ items: ["No Rushed Service", "No Generic Styles", "No Compromise on Hygiene"] }}
|
||||
positiveCard={{ items: ["Modern Fades", "Classic Scissor Cuts", "Hot Towel Shave"] }}
|
||||
title="Our Expert Services"
|
||||
description="We specialize in tailored grooming that brings out the best in every client."
|
||||
/>
|
||||
@@ -149,40 +86,8 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Popular",
|
||||
price: "$30",
|
||||
subtitle: "Classic Haircut",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Consultation",
|
||||
"Precision Cut",
|
||||
"Style Finish",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Recommended",
|
||||
price: "$45",
|
||||
subtitle: "The Full Experience",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Classic Haircut",
|
||||
"Hot Towel Shave",
|
||||
"Beard Sculpt",
|
||||
],
|
||||
},
|
||||
{ id: "basic", badge: "Popular", price: "$30", subtitle: "Classic Haircut", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Consultation", "Precision Cut", "Style Finish"] },
|
||||
{ id: "pro", badge: "Recommended", price: "$45", subtitle: "The Full Experience", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Classic Haircut", "Hot Towel Shave", "Beard Sculpt"] }
|
||||
]}
|
||||
title="Transparent Pricing"
|
||||
description="Premium services at honest rates."
|
||||
@@ -195,24 +100,9 @@ export default function LandingPage() {
|
||||
textboxLayout="inline-image"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Ammar",
|
||||
role: "Master Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286080.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "John",
|
||||
role: "Senior Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-man-apron-with-shaving-foam-his-face-shaving-himself-using-razor-standing-purple-wall_141793-50724.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "David",
|
||||
role: "Barber Stylist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-male-with-tattooed-crossed-arms-grey-background_613910-1610.jpg",
|
||||
},
|
||||
{ id: "1", name: "Ammar", role: "Master Barber", imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286080.jpg" },
|
||||
{ id: "2", name: "John", role: "Senior Barber", imageSrc: "http://img.b2bpic.net/free-photo/barber-man-apron-with-shaving-foam-his-face-shaving-himself-using-razor-standing-purple-wall_141793-50724.jpg" },
|
||||
{ id: "3", name: "David", role: "Barber Stylist", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-male-with-tattooed-crossed-arms-grey-background_613910-1610.jpg" }
|
||||
]}
|
||||
title="Meet Your Barbers"
|
||||
description="The masters of the craft dedicated to your style."
|
||||
@@ -224,61 +114,11 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Alex R.",
|
||||
date: "Oct 2023",
|
||||
title: "Great Experience",
|
||||
quote: "The best haircut in town, bar none.",
|
||||
tag: "Regular",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-man-hair-salon_23-2150665449.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg?_wi=2",
|
||||
imageAlt: "happy client after haircut",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Ben S.",
|
||||
date: "Sept 2023",
|
||||
title: "Highly Recommend",
|
||||
quote: "Clean, professional, and excellent quality.",
|
||||
tag: "First Timer",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/happy-men-bachelor-party_23-2149275459.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-razor-blade_23-2151102219.jpg",
|
||||
imageAlt: "happy client after haircut",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Chris M.",
|
||||
date: "Aug 2023",
|
||||
title: "Mastery",
|
||||
quote: "Ammar truly knows what works for my hair type.",
|
||||
tag: "Regular",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/side-view-man-bathroom_23-2150323118.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/client-getting-beard-shaving-barber-shop_1163-2028.jpg",
|
||||
imageAlt: "happy client after haircut",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Dan K.",
|
||||
date: "Aug 2023",
|
||||
title: "Top Notch",
|
||||
quote: "Always leave looking sharp.",
|
||||
tag: "Regular",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/handsome-man-with-beard-long-hair-wearing-casual-clothes-pointing-thumb-up-side-smiling-happy-with-open-mouth_839833-12966.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-holding-hair-dryer_23-2149220573.jpg",
|
||||
imageAlt: "happy client after haircut",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Eric P.",
|
||||
date: "July 2023",
|
||||
title: "Consistent",
|
||||
quote: "Reliable and precise service every single time.",
|
||||
tag: "Regular",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/man-apron-posing-with-coffee-machine-component_23-2148366661.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286080.jpg?_wi=2",
|
||||
imageAlt: "happy client after haircut",
|
||||
},
|
||||
{ id: "1", name: "Alex R.", date: "Oct 2023", title: "Great Experience", quote: "The best haircut in town, bar none.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-man-hair-salon_23-2150665449.jpg", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg" },
|
||||
{ id: "2", name: "Ben S.", date: "Sept 2023", title: "Highly Recommend", quote: "Clean, professional, and excellent quality.", tag: "First Timer", avatarSrc: "http://img.b2bpic.net/free-photo/happy-men-bachelor-party_23-2149275459.jpg", imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-razor-blade_23-2151102219.jpg" },
|
||||
{ id: "3", name: "Chris M.", date: "Aug 2023", title: "Mastery", quote: "Ammar truly knows what works for my hair type.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/side-view-man-bathroom_23-2150323118.jpg", imageSrc: "http://img.b2bpic.net/free-photo/client-getting-beard-shaving-barber-shop_1163-2028.jpg" },
|
||||
{ id: "4", name: "Dan K.", date: "Aug 2023", title: "Top Notch", quote: "Always leave looking sharp.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/handsome-man-with-beard-long-hair-wearing-casual-clothes-pointing-thumb-up-side-smiling-happy-with-open-mouth_839833-12966.jpg", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-holding-hair-dryer_23-2149220573.jpg" },
|
||||
{ id: "5", name: "Eric P.", date: "July 2023", title: "Consistent", quote: "Reliable and precise service every single time.", tag: "Regular", avatarSrc: "http://img.b2bpic.net/free-photo/man-apron-posing-with-coffee-machine-component_23-2148366661.jpg", imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286080.jpg" }
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="Don't take our word for it, hear what our community says."
|
||||
@@ -289,21 +129,9 @@ export default function LandingPage() {
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Yes, we recommend booking online to guarantee your preferred time.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you accept walk-ins?",
|
||||
content: "We try to accommodate walk-ins, but scheduling is preferred.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Where are you located?",
|
||||
content: "We are conveniently located in the downtown district.",
|
||||
},
|
||||
{ id: "f1", title: "Do I need an appointment?", content: "Yes, we recommend booking online to guarantee your preferred time." },
|
||||
{ id: "f2", title: "Do you accept walk-ins?", content: "We try to accommodate walk-ins, but scheduling is preferred." },
|
||||
{ id: "f3", title: "Where are you located?", content: "We are conveniently located in the downtown district." }
|
||||
]}
|
||||
sideTitle="Frequently Asked"
|
||||
sideDescription="Everything you need to know about our services."
|
||||
@@ -314,18 +142,11 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get in touch"
|
||||
title="Ready to Look Your Best?"
|
||||
description="Secure your spot at Ammar's Barbershop today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Book Appointment", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -333,36 +154,8 @@ export default function LandingPage() {
|
||||
<FooterBaseReveal
|
||||
logoText="Ammar's Barbershop"
|
||||
columns={[
|
||||
{
|
||||
title: "Menu",
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "FAQs",
|
||||
href: "#faq",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Menu", items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#services" }, { label: "Pricing", href: "#pricing" }] },
|
||||
{ title: "Contact", items: [{ label: "Book Now", href: "#contact" }, { label: "FAQs", href: "#faq" }] }
|
||||
]}
|
||||
copyrightText="© 2024 Ammar's Barbershop."
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user