Merge version_2 into main #2
303
src/app/page.tsx
303
src/app/page.tsx
@@ -10,7 +10,7 @@ import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTe
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
||||
import TeamCardTen from '@/components/sections/team/TeamCardTen';
|
||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||||
import { Eye, Layout, Scissors, Sparkles, User, Waves } from "lucide-react";
|
||||
|
||||
@@ -33,130 +33,58 @@ export default function LandingPage() {
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About", id: "#about"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
name: "Services", id: "#services"},
|
||||
{
|
||||
name: "Team",
|
||||
id: "#team",
|
||||
},
|
||||
name: "Team", id: "#team"},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "#reviews",
|
||||
},
|
||||
name: "Reviews", id: "#reviews"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
brandName="Mello Barbershop"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
text: "Book Now", href: "#contact"}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardTestimonial
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
title="Where the Cut is the Crown"
|
||||
description="Premium grooming for the modern gentleman. Experience excellence at Mello Barbershop."
|
||||
testimonials={[
|
||||
{
|
||||
name: "James L.",
|
||||
handle: "@james",
|
||||
testimonial: "Best fade I've ever had, hands down. Professional and sharp.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-laughing-young-relaxed-man-sitting-outdoors-vintage-circular-stairs_158595-3655.jpg",
|
||||
name: "James L.", handle: "@james", testimonial: "Best fade I've ever had, hands down. Professional and sharp.", rating: 5,
|
||||
},
|
||||
{
|
||||
name: "Marcus D.",
|
||||
handle: "@md",
|
||||
testimonial: "Mello is an institution. Always get the exact look I want.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-indian-beard-man-black-leather-jacket-india-model-posed-sitting-streets-city_627829-2698.jpg",
|
||||
name: "Marcus D.", handle: "@md", testimonial: "Mello is an institution. Always get the exact look I want.", rating: 5,
|
||||
},
|
||||
{
|
||||
name: "Alex R.",
|
||||
handle: "@ar",
|
||||
testimonial: "Unmatched service and attention to detail. Highly recommend.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-studio-portrait-redhead-bearded-male-grey-background_613910-10005.jpg",
|
||||
name: "Alex R.", handle: "@ar", testimonial: "Unmatched service and attention to detail. Highly recommend.", rating: 5,
|
||||
},
|
||||
{
|
||||
name: "Sam T.",
|
||||
handle: "@st",
|
||||
testimonial: "Classy environment and master barbers. 10/10.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-sitting-chair_23-2149220526.jpg",
|
||||
name: "Sam T.", handle: "@st", testimonial: "Classy environment and master barbers. 10/10.", rating: 5,
|
||||
},
|
||||
{
|
||||
name: "Kevin B.",
|
||||
handle: "@kb",
|
||||
testimonial: "Top-notch professionalism every single time I visit.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-male-with-tattooed-arms-dressed-shirt-posing-grey-background_613910-15701.jpg",
|
||||
name: "Kevin B.", handle: "@kb", testimonial: "Top-notch professionalism every single time I visit.", rating: 5,
|
||||
},
|
||||
]}
|
||||
tag="10+ Years of Excellence"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/attractive-school-boy-is-getting-trendy-haircut-from-mature-hairdresser-fashionable-hairdressing-salon_613910-21413.jpg"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hairstylist-cutting-customer-hair-helped-by-scissors_23-2148256966.jpg",
|
||||
alt: "Barber cutting hair",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/brunette-female-hairdresser-washing-hair-bearded-men-client-saloon_613910-14581.jpg",
|
||||
alt: "Hair treatment",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/side-view-woman-getting-ready-giving-haircut-her-client_23-2148353413.jpg",
|
||||
alt: "Barber at work",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/high-angle-barber-shaving-costumer-s-beard_23-2148242863.jpg",
|
||||
alt: "Shaving service",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/back-view-hairstylist-cutting-costumer-s-hair_23-2148242837.jpg",
|
||||
alt: "Back view haircut",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
]}
|
||||
mediaAnimation="none"
|
||||
avatarText="Trusted by 5,000+ gentlemen"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Precision Fades",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Hot Towel Shaves",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Classic Cuts",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Beard Sculpting",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Luxury Grooming",
|
||||
},
|
||||
{ type: "text", text: "Precision Fades" },
|
||||
{ type: "text", text: "Hot Towel Shaves" },
|
||||
{ type: "text", text: "Classic Cuts" },
|
||||
{ type: "text", text: "Beard Sculpting" },
|
||||
{ type: "text", text: "Luxury Grooming" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -168,11 +96,8 @@ export default function LandingPage() {
|
||||
description="At Mello Barbershop, we don't just cut hair; we sculpt confidence. Founded over a decade ago, our shop has grown into an institution for those who value tradition combined with modern style."
|
||||
buttons={[
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#",
|
||||
},
|
||||
text: "Learn More", href: "#"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -182,36 +107,12 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Scissors,
|
||||
title: "Classic Cut",
|
||||
description: "Timeless style tailored to your face shape.",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Signature Fade",
|
||||
description: "The crispest, cleanest blend in the city.",
|
||||
},
|
||||
{
|
||||
icon: Layout,
|
||||
title: "Precision Line-Up",
|
||||
description: "Sharp edges to define your look.",
|
||||
},
|
||||
{
|
||||
icon: Waves,
|
||||
title: "Natural Styles",
|
||||
description: "Effortless, natural texture for any occasion.",
|
||||
},
|
||||
{
|
||||
icon: User,
|
||||
title: "Kids Cut",
|
||||
description: "Quality service for the next generation.",
|
||||
},
|
||||
{
|
||||
icon: Eye,
|
||||
title: "Eyebrow Maintenance",
|
||||
description: "Clean, groomed finish for a polished look.",
|
||||
},
|
||||
{ icon: Scissors, title: "Classic Cut", description: "Timeless style tailored to your face shape." },
|
||||
{ icon: Sparkles, title: "Signature Fade", description: "The crispest, cleanest blend in the city." },
|
||||
{ icon: Layout, title: "Precision Line-Up", description: "Sharp edges to define your look." },
|
||||
{ icon: Waves, title: "Natural Styles", description: "Effortless, natural texture for any occasion." },
|
||||
{ icon: User, title: "Kids Cut", description: "Quality service for the next generation." },
|
||||
{ icon: Eye, title: "Eyebrow Maintenance", description: "Clean, groomed finish for a polished look." },
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="From precision fades to classic hot towel shaves, we offer curated services designed for the modern man."
|
||||
@@ -219,39 +120,18 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
<TeamCardTen
|
||||
title="Meet The Masters"
|
||||
tag="The Team"
|
||||
membersAnimation="slide-up"
|
||||
memberVariant="card"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "mello",
|
||||
name: "Mello",
|
||||
role: "Master Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-male-with-tattoos-arms-dressed-red-christmas-pants-using-tablet-pc-room-with-loft-interior_613910-14658.jpg",
|
||||
},
|
||||
{
|
||||
id: "daniel",
|
||||
name: "Daniel",
|
||||
role: "Lead Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-sitting-jetty-posing_150588-4.jpg",
|
||||
},
|
||||
{
|
||||
id: "javon",
|
||||
name: "Javon",
|
||||
role: "Expert Stylist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-man-sitting-wooden-plank-outdoors_23-2148203989.jpg",
|
||||
},
|
||||
{
|
||||
id: "kd",
|
||||
name: "KD",
|
||||
role: "Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-businessman-wearing-glasses_158595-5356.jpg",
|
||||
},
|
||||
{ id: "m1", name: "Mello", role: "Master Barber" },
|
||||
{ id: "m2", name: "Daniel", role: "Lead Barber" },
|
||||
{ id: "m3", name: "Javon", role: "Expert Stylist" },
|
||||
{ id: "m4", name: "KD", role: "Barber" },
|
||||
]}
|
||||
title="Meet The Masters"
|
||||
description="Our team of seasoned professionals ensures you leave looking your absolute best."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -259,31 +139,11 @@ export default function LandingPage() {
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "James L.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-modelmodern-man-dressed-white-shirt-trousers-fashion-male-posing-street-background-europe-city-sunset-sunglasses_158538-22386.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Marcus D.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-guy-checkered-shirt-with-blue-bow-tie-posing-near-gre-concrete-wall-with-wooden-wheel_613910-10608.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Alex R.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-man-yellow-scene_23-2148184674.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sam T.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-bearded-male-dressed-blue-shirt-white-jacket-bow-tie-grey-background_613910-177.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Kevin B.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-successful-businessman-posing-dark-wall_176420-54.jpg",
|
||||
},
|
||||
{ id: "1", name: "James L." },
|
||||
{ id: "2", name: "Marcus D." },
|
||||
{ id: "3", name: "Alex R." },
|
||||
{ id: "4", name: "Sam T." },
|
||||
{ id: "5", name: "Kevin B." },
|
||||
]}
|
||||
cardTitle="What Clients Say"
|
||||
cardTag="Verified Reviews"
|
||||
@@ -297,27 +157,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "10+",
|
||||
title: "Years Established",
|
||||
description: "A local institution.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6351.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "5k+",
|
||||
title: "Happy Clients",
|
||||
description: "Serving our city daily.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-barber-shaving-hair-client_23-2147778750.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Satisfaction Rate",
|
||||
description: "Guaranteed quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-shaving-his-beard_23-2148696664.jpg",
|
||||
},
|
||||
{ id: "m1", value: "10+", title: "Years Established", description: "A local institution.", imageSrc: "" },
|
||||
{ id: "m2", value: "5k+", title: "Happy Clients", description: "Serving our city daily.", imageSrc: "" },
|
||||
{ id: "m3", value: "100%", title: "Satisfaction Rate", description: "Guaranteed quality.", imageSrc: "" },
|
||||
]}
|
||||
title="By The Numbers"
|
||||
description="Experience that speaks for itself."
|
||||
@@ -329,36 +171,21 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Appointments are highly recommended for optimal service.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What are your hours?",
|
||||
content: "We are open daily from 9am to 7pm, except Sundays.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Where are you located?",
|
||||
content: "Find us conveniently in the city center.",
|
||||
},
|
||||
{ id: "f1", title: "Do I need an appointment?", content: "Appointments are highly recommended for optimal service." },
|
||||
{ id: "f2", title: "What are your hours?", content: "We are open daily from 9am to 7pm, except Sundays." },
|
||||
{ id: "f3", title: "Where are you located?", content: "Find us conveniently in the city center." },
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
title="Frequently Asked"
|
||||
description="Everything you need to know before visiting us."
|
||||
faqsAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg?_wi=2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Visit Us"
|
||||
title="Book Your Seat"
|
||||
description="Ready for your next cut? Reach out or visit us today."
|
||||
@@ -368,38 +195,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Team",
|
||||
href: "#team",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Reviews",
|
||||
href: "#reviews",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ items: [{ label: "About", href: "#about" }, { label: "Services", href: "#services" }, { label: "Team", href: "#team" }] },
|
||||
{ items: [{ label: "Reviews", href: "#reviews" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
|
||||
]}
|
||||
logoText="Mello Barbershop"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user