Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
283
src/app/page.tsx
283
src/app/page.tsx
@@ -30,91 +30,40 @@ export default function LandingPage() {
|
|||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarLayoutFloatingInline
|
<NavbarLayoutFloatingInline
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{ name: "Home", id: "#hero" },
|
||||||
name: "Home",
|
{ name: "Services", id: "#services" },
|
||||||
id: "#hero",
|
{ name: "Pricing", id: "#pricing" },
|
||||||
},
|
{ name: "Team", id: "#team" },
|
||||||
{
|
{ name: "Contact", id: "#contact" },
|
||||||
name: "Services",
|
|
||||||
id: "#services",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Pricing",
|
|
||||||
id: "#pricing",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Team",
|
|
||||||
id: "#team",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Contact",
|
|
||||||
id: "#contact",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
brandName="Ammar's Barbershop"
|
brandName="Ammar's Barbershop"
|
||||||
|
button={{ text: "Book Now", href: "#contact" }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroSplit
|
<HeroSplit
|
||||||
background={{
|
background={{ variant: "gradient-bars" }}
|
||||||
variant: "gradient-bars",
|
|
||||||
}}
|
|
||||||
title="Precision Cuts. Classic Style."
|
title="Precision Cuts. Classic Style."
|
||||||
description="Experience superior grooming at Ammar's Barbershop. From modern fades to classic hot towel shaves, we redefine excellence."
|
description="Experience superior grooming at Ammar's Barbershop. From modern fades to classic hot towel shaves, we redefine excellence."
|
||||||
buttons={[
|
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||||
{
|
imageSrc="http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg"
|
||||||
text: "Book Appointment",
|
|
||||||
href: "#contact",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg?_wi=1"
|
|
||||||
imageAlt="Ammar's Barbershop Interior"
|
imageAlt="Ammar's Barbershop Interior"
|
||||||
mediaAnimation="slide-up"
|
mediaAnimation="slide-up"
|
||||||
avatars={[
|
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/full-shot-barber-hair-salon_23-2148242782.jpg",
|
{ 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" },
|
||||||
alt: "Full shot of barber at hair salon",
|
{ 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/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"
|
avatarText="Trusted by 500+ happy clients"
|
||||||
marqueeItems={[
|
marqueeItems={[
|
||||||
{
|
{ type: "text", text: "Expert Grooming" },
|
||||||
type: "text",
|
{ type: "text", text: "Modern Fades" },
|
||||||
text: "Expert Grooming",
|
{ type: "text", text: "Classic Shaves" },
|
||||||
},
|
{ type: "text", text: "Premium Products" },
|
||||||
{
|
{ type: "text", text: "Tailored Styling" }
|
||||||
type: "text",
|
|
||||||
text: "Modern Fades",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
text: "Classic Shaves",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
text: "Premium Products",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: "text",
|
|
||||||
text: "Tailored Styling",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -124,20 +73,8 @@ export default function LandingPage() {
|
|||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
negativeCard={{
|
negativeCard={{ items: ["No Rushed Service", "No Generic Styles", "No Compromise on Hygiene"] }}
|
||||||
items: [
|
positiveCard={{ items: ["Modern Fades", "Classic Scissor Cuts", "Hot Towel Shave"] }}
|
||||||
"No Rushed Service",
|
|
||||||
"No Generic Styles",
|
|
||||||
"No Compromise on Hygiene",
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
positiveCard={{
|
|
||||||
items: [
|
|
||||||
"Modern Fades",
|
|
||||||
"Classic Scissor Cuts",
|
|
||||||
"Hot Towel Shave",
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
title="Our Expert Services"
|
title="Our Expert Services"
|
||||||
description="We specialize in tailored grooming that brings out the best in every client."
|
description="We specialize in tailored grooming that brings out the best in every client."
|
||||||
/>
|
/>
|
||||||
@@ -149,40 +86,8 @@ export default function LandingPage() {
|
|||||||
textboxLayout="split"
|
textboxLayout="split"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
plans={[
|
plans={[
|
||||||
{
|
{ id: "basic", badge: "Popular", price: "$30", subtitle: "Classic Haircut", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Consultation", "Precision Cut", "Style Finish"] },
|
||||||
id: "basic",
|
{ id: "pro", badge: "Recommended", price: "$45", subtitle: "The Full Experience", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Classic Haircut", "Hot Towel Shave", "Beard Sculpt"] }
|
||||||
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"
|
title="Transparent Pricing"
|
||||||
description="Premium services at honest rates."
|
description="Premium services at honest rates."
|
||||||
@@ -195,24 +100,9 @@ export default function LandingPage() {
|
|||||||
textboxLayout="inline-image"
|
textboxLayout="inline-image"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
team={[
|
team={[
|
||||||
{
|
{ id: "1", name: "Ammar", role: "Master Barber", imageSrc: "http://img.b2bpic.net/free-photo/latino-hair-salon-owner-preparing-clients_23-2150286080.jpg" },
|
||||||
id: "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" },
|
||||||
name: "Ammar",
|
{ 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" }
|
||||||
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",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="Meet Your Barbers"
|
title="Meet Your Barbers"
|
||||||
description="The masters of the craft dedicated to your style."
|
description="The masters of the craft dedicated to your style."
|
||||||
@@ -224,61 +114,11 @@ export default function LandingPage() {
|
|||||||
textboxLayout="split"
|
textboxLayout="split"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
testimonials={[
|
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" },
|
||||||
id: "1",
|
{ 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" },
|
||||||
name: "Alex R.",
|
{ 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" },
|
||||||
date: "Oct 2023",
|
{ 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" },
|
||||||
title: "Great Experience",
|
{ 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" }
|
||||||
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",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="Client Stories"
|
title="Client Stories"
|
||||||
description="Don't take our word for it, hear what our community says."
|
description="Don't take our word for it, hear what our community says."
|
||||||
@@ -289,21 +129,9 @@ export default function LandingPage() {
|
|||||||
<FaqSplitText
|
<FaqSplitText
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
faqs={[
|
faqs={[
|
||||||
{
|
{ id: "f1", title: "Do I need an appointment?", content: "Yes, we recommend booking online to guarantee your preferred time." },
|
||||||
id: "f1",
|
{ id: "f2", title: "Do you accept walk-ins?", content: "We try to accommodate walk-ins, but scheduling is preferred." },
|
||||||
title: "Do I need an appointment?",
|
{ id: "f3", title: "Where are you located?", content: "We are conveniently located in the downtown district." }
|
||||||
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"
|
sideTitle="Frequently Asked"
|
||||||
sideDescription="Everything you need to know about our services."
|
sideDescription="Everything you need to know about our services."
|
||||||
@@ -314,18 +142,11 @@ export default function LandingPage() {
|
|||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactCTA
|
<ContactCTA
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
background={{
|
background={{ variant: "plain" }}
|
||||||
variant: "plain",
|
|
||||||
}}
|
|
||||||
tag="Get in touch"
|
tag="Get in touch"
|
||||||
title="Ready to Look Your Best?"
|
title="Ready to Look Your Best?"
|
||||||
description="Secure your spot at Ammar's Barbershop today."
|
description="Secure your spot at Ammar's Barbershop today."
|
||||||
buttons={[
|
buttons={[{ text: "Book Appointment", href: "#" }]}
|
||||||
{
|
|
||||||
text: "Book Appointment",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -333,36 +154,8 @@ export default function LandingPage() {
|
|||||||
<FooterBaseReveal
|
<FooterBaseReveal
|
||||||
logoText="Ammar's Barbershop"
|
logoText="Ammar's Barbershop"
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{ title: "Menu", items: [{ label: "Home", href: "#hero" }, { label: "Services", href: "#services" }, { label: "Pricing", href: "#pricing" }] },
|
||||||
title: "Menu",
|
{ title: "Contact", items: [{ label: "Book Now", href: "#contact" }, { label: "FAQs", href: "#faq" }] }
|
||||||
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."
|
copyrightText="© 2024 Ammar's Barbershop."
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user