Merge version_1 into main #2
353
src/app/page.tsx
353
src/app/page.tsx
@@ -30,22 +30,13 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "#team",
|
||||
},
|
||||
{
|
||||
name: "Gallery",
|
||||
id: "#gallery",
|
||||
},
|
||||
{
|
||||
name: "Book Now",
|
||||
id: "#booking",
|
||||
},
|
||||
{ name: "Hero", id: "hero" },
|
||||
{ name: "Social Proof", id: "social-proof" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Elite Cuts"
|
||||
/>
|
||||
@@ -54,103 +45,36 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Elite Cuts Barber — Premium Cuts in London"
|
||||
description="Sharp fades. Clean styles. Book your spot in seconds at our premium studio."
|
||||
testimonials={[
|
||||
{
|
||||
name: "James L.",
|
||||
handle: "@james",
|
||||
testimonial: "Best fade I've ever had. Truly top-tier service.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-fashionable-modern-male-grey-t-shirt_613910-532.jpg",
|
||||
},
|
||||
{
|
||||
name: "Mark D.",
|
||||
handle: "@mark",
|
||||
testimonial: "Fast, clean, professional. Exactly what I look for.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-posing-tropical-location-background-palm-trees-greenery_1321-1421.jpg",
|
||||
},
|
||||
{
|
||||
name: "Sarah P.",
|
||||
handle: "@sarah",
|
||||
testimonial: "Elite Cuts always gets it right. Consistent excellence.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-handsome-man-smiling-with-copy-space_23-2148696668.jpg",
|
||||
},
|
||||
{
|
||||
name: "Paul M.",
|
||||
handle: "@paul",
|
||||
testimonial: "The atmosphere is great and the cuts are sharp.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506210.jpg",
|
||||
},
|
||||
{
|
||||
name: "Chris B.",
|
||||
handle: "@chris",
|
||||
testimonial: "My go-to spot for a fresh look every single time.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/half-profile-close-up-image-self-determined-focused-young-caucasian-unshaven-businessman-formal-clothes-posing-against-white-studio-wall-background-with-copyspace-your-text-content_343059-950.jpg",
|
||||
},
|
||||
{ name: "James L.", handle: "@james", testimonial: "Best fade I've ever had. Truly top-tier service.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-fashionable-modern-male-grey-t-shirt_613910-532.jpg" },
|
||||
{ name: "Mark D.", handle: "@mark", testimonial: "Fast, clean, professional. Exactly what I look for.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-posing-tropical-location-background-palm-trees-greenery_1321-1421.jpg" },
|
||||
{ name: "Sarah P.", handle: "@sarah", testimonial: "Elite Cuts always gets it right. Consistent excellence.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/side-view-handsome-man-smiling-with-copy-space_23-2148696668.jpg" },
|
||||
{ name: "Paul M.", handle: "@paul", testimonial: "The atmosphere is great and the cuts are sharp.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barbershop-concept_23-2148506210.jpg" },
|
||||
{ name: "Chris B.", handle: "@chris", testimonial: "My go-to spot for a fresh look every single time.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/half-profile-close-up-image-self-determined-focused-young-caucasian-unshaven-businessman-formal-clothes-posing-against-white-studio-wall-background-with-copyspace-your-text-content_343059-950.jpg" }
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#booking",
|
||||
},
|
||||
{
|
||||
text: "Call Now",
|
||||
href: "tel:+442012345678",
|
||||
},
|
||||
{ text: "Book Appointment", href: "#booking" },
|
||||
{ text: "Call Now", href: "tel:+442012345678" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/long-bearded-young-man-with-eye-closed-against-black-wall_23-2148176495.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/long-bearded-young-man-with-eye-closed-against-black-wall_23-2148176495.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/worldface-italian-guy-white-background_53876-148047.jpg",
|
||||
alt: "man skin fade haircut",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/side-view-man-wearing-big-hair-clip_23-2149872365.jpg",
|
||||
alt: "man skin fade haircut",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/grayscale-shot-young-male-isolated-grey_181624-24327.jpg",
|
||||
alt: "man skin fade haircut",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/side-view-customer-waiting-haircut_23-2148256975.jpg",
|
||||
alt: "man skin fade haircut",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hearing-issues-concept-with-man-front-view_23-2150170120.jpg",
|
||||
alt: "man skin fade haircut",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/worldface-italian-guy-white-background_53876-148047.jpg", alt: "man skin fade haircut" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/side-view-man-wearing-big-hair-clip_23-2149872365.jpg", alt: "man skin fade haircut" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/grayscale-shot-young-male-isolated-grey_181624-24327.jpg", alt: "man skin fade haircut" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/side-view-customer-waiting-haircut_23-2148256975.jpg", alt: "man skin fade haircut" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/hearing-issues-concept-with-man-front-view_23-2150170120.jpg", alt: "man skin fade haircut" }
|
||||
]}
|
||||
avatarText="Join 500+ satisfied clients"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Precision Cuts",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Sharp Fades",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Beard Sculpting",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Hot Towel Shave",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modern Grooming",
|
||||
},
|
||||
{ type: "text", text: "Precision Cuts" },
|
||||
{ type: "text", text: "Sharp Fades" },
|
||||
{ type: "text", text: "Beard Sculpting" },
|
||||
{ type: "text", text: "Hot Towel Shave" },
|
||||
{ type: "text", text: "Modern Grooming" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -159,15 +83,7 @@ export default function LandingPage() {
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Elite Cuts London",
|
||||
"Premium Style",
|
||||
"Modern Grooming",
|
||||
"Top Fades",
|
||||
"Master Barbers",
|
||||
"The Barber Lab",
|
||||
"Sharp Styles",
|
||||
]}
|
||||
names={["Elite Cuts London", "Premium Style", "Modern Grooming", "Top Fades", "Master Barbers", "The Barber Lab", "Sharp Styles"]}
|
||||
title="Trusted by the City"
|
||||
description="The choice for elite grooming."
|
||||
/>
|
||||
@@ -179,70 +95,10 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Haircut",
|
||||
price: "€25",
|
||||
features: [
|
||||
"Precision cut",
|
||||
"Style consultation",
|
||||
"Wash",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#booking",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Skin Fade",
|
||||
price: "€30",
|
||||
features: [
|
||||
"Expert fade",
|
||||
"Detailed finish",
|
||||
"Clean line",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#booking",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Beard Trim",
|
||||
price: "€15",
|
||||
features: [
|
||||
"Beard sculpting",
|
||||
"Hot towel",
|
||||
"Oil treatment",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#booking",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Full Service",
|
||||
price: "€40",
|
||||
features: [
|
||||
"Haircut",
|
||||
"Skin fade",
|
||||
"Beard trim",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#booking",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ id: "p1", name: "Haircut", price: "€25", features: ["Precision cut", "Style consultation", "Wash"], buttons: [{ text: "Book Now", href: "#booking" }] },
|
||||
{ id: "p2", name: "Skin Fade", price: "€30", features: ["Expert fade", "Detailed finish", "Clean line"], buttons: [{ text: "Book Now", href: "#booking" }] },
|
||||
{ id: "p3", name: "Beard Trim", price: "€15", features: ["Beard sculpting", "Hot towel", "Oil treatment"], buttons: [{ text: "Book Now", href: "#booking" }] },
|
||||
{ id: "p4", name: "Full Service", price: "€40", features: ["Haircut", "Skin fade", "Beard trim"], buttons: [{ text: "Book Now", href: "#booking" }] }
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Premium grooming tailored to your style."
|
||||
@@ -256,34 +112,12 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
groups={[
|
||||
{
|
||||
id: "g1",
|
||||
groupTitle: "Elite Team",
|
||||
members: [
|
||||
{
|
||||
id: "t1",
|
||||
title: "Alex",
|
||||
subtitle: "Lead Barber",
|
||||
detail: "10+ years experience in urban fades.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-gardener-woman-with-short-hair-apron-hat-holding-hedge-clippers-with-serious-face_141793-102431.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Sam",
|
||||
subtitle: "Senior Stylist",
|
||||
detail: "Specialist in modern scissor cuts.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-care-girl-salon_23-2147769838.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Jordan",
|
||||
subtitle: "Barber & Groomer",
|
||||
detail: "Master of beard grooming and design.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/surprised-woman-with-messy-bun-holding-brushes_114579-31213.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/long-bearded-young-man-with-eye-closed-against-black-wall_23-2148176495.jpg?_wi=2",
|
||||
imageAlt: "professional barber portrait",
|
||||
},
|
||||
id: "g1", groupTitle: "Elite Team", members: [
|
||||
{ id: "t1", title: "Alex", subtitle: "Lead Barber", detail: "10+ years experience in urban fades.", imageSrc: "http://img.b2bpic.net/free-photo/young-gardener-woman-with-short-hair-apron-hat-holding-hedge-clippers-with-serious-face_141793-102431.jpg" },
|
||||
{ id: "t2", title: "Sam", subtitle: "Senior Stylist", detail: "Specialist in modern scissor cuts.", imageSrc: "http://img.b2bpic.net/free-photo/woman-taking-care-girl-salon_23-2147769838.jpg" },
|
||||
{ id: "t3", title: "Jordan", subtitle: "Barber & Groomer", detail: "Master of beard grooming and design.", imageSrc: "http://img.b2bpic.net/free-photo/surprised-woman-with-messy-bun-holding-brushes_114579-31213.jpg" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Our Expert Barbers"
|
||||
description="Meet the team dedicated to your fresh look."
|
||||
@@ -297,42 +131,12 @@ export default function LandingPage() {
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "img1",
|
||||
name: "Skin Fade",
|
||||
price: "Fresh",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-modelman-dressed-jacket-jeans-fashion-male-posing-near-blue-wall-studio_158538-23689.jpg",
|
||||
},
|
||||
{
|
||||
id: "img2",
|
||||
name: "Beard Detail",
|
||||
price: "Precise",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-man-lies-with-open-eyes-while-barber-cuts-his-beard_1304-2776.jpg",
|
||||
},
|
||||
{
|
||||
id: "img3",
|
||||
name: "Modern Cut",
|
||||
price: "Sharp",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/child-getting-their-hair-blown-salon_23-2150462467.jpg",
|
||||
},
|
||||
{
|
||||
id: "img4",
|
||||
name: "Tools Setup",
|
||||
price: "Premium",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barbershop-supplies-table_23-2147736981.jpg",
|
||||
},
|
||||
{
|
||||
id: "img5",
|
||||
name: "Salon View",
|
||||
price: "Modern",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-male-with-tattoo-his-arms-before-hair-wash-hairdressers-salon_613910-14535.jpg",
|
||||
},
|
||||
{
|
||||
id: "img6",
|
||||
name: "Styling",
|
||||
price: "Clean",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-24961.jpg",
|
||||
},
|
||||
{ id: "img1", name: "Skin Fade", price: "Fresh", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-modelman-dressed-jacket-jeans-fashion-male-posing-near-blue-wall-studio_158538-23689.jpg" },
|
||||
{ id: "img2", name: "Beard Detail", price: "Precise", imageSrc: "http://img.b2bpic.net/free-photo/brunette-man-lies-with-open-eyes-while-barber-cuts-his-beard_1304-2776.jpg" },
|
||||
{ id: "img3", name: "Modern Cut", price: "Sharp", imageSrc: "http://img.b2bpic.net/free-photo/child-getting-their-hair-blown-salon_23-2150462467.jpg" },
|
||||
{ id: "img4", name: "Tools Setup", price: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/barbershop-supplies-table_23-2147736981.jpg" },
|
||||
{ id: "img5", name: "Salon View", price: "Modern", imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-male-with-tattoo-his-arms-before-hair-wash-hairdressers-salon_613910-14535.jpg" },
|
||||
{ id: "img6", name: "Styling", price: "Clean", imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-sitting-barbershop_1157-24961.jpg" }
|
||||
]}
|
||||
title="Recent Work"
|
||||
description="Explore our portfolio of sharp fades and clean styles."
|
||||
@@ -343,21 +147,9 @@ export default function LandingPage() {
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do I book an appointment?",
|
||||
content: "You can book directly through our online booking system embedded below.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept cash, card, and digital wallets.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Can I request a specific barber?",
|
||||
content: "Yes, select your preferred barber during the booking process.",
|
||||
},
|
||||
{ id: "f1", title: "How do I book an appointment?", content: "You can book directly through our online booking system embedded below." },
|
||||
{ id: "f2", title: "What payment methods do you accept?", content: "We accept cash, card, and digital wallets." },
|
||||
{ id: "f3", title: "Can I request a specific barber?", content: "Yes, select your preferred barber during the booking process." }
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
@@ -367,63 +159,20 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Visit Us"
|
||||
title="Elite Cuts Barber"
|
||||
description="123 Main Street, London. Call us: +44 20 1234 5678. Hours: Mon-Sun 10:00 - 19:00."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#booking",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Book Now", href: "#booking" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterSimple
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services",
|
||||
items: [
|
||||
{
|
||||
label: "Haircuts",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Beard",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "123 Main St",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Email us",
|
||||
href: "mailto:hello@elitecuts.com",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Company", items: [{ label: "About", href: "#" }, { label: "Careers", href: "#" }] },
|
||||
{ title: "Services", items: [{ label: "Haircuts", href: "#services" }, { label: "Beard", href: "#services" }] },
|
||||
{ title: "Contact", items: [{ label: "123 Main St", href: "#" }, { label: "Email us", href: "mailto:hello@elitecuts.com" }] }
|
||||
]}
|
||||
bottomLeftText="© 2024 Elite Cuts Barber"
|
||||
bottomRightText="All rights reserved."
|
||||
|
||||
Reference in New Issue
Block a user