302 lines
15 KiB
TypeScript
302 lines
15 KiB
TypeScript
"use client"
|
|
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import TeamCardTen from '@/components/sections/team/TeamCardTen';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
|
import { Award, Droplet, Palette, Scissors, Shield, Sofa, Sparkles, Star, TrendingUp, Users, Wand2, Wind, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="A MAN'S WORLD"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Barbers", id: "barbers" },
|
|
{ name: "Gallery", id: "gallery" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Book Now", href: "#booking" }}
|
|
buttonClassName="shadow-lg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
title="Premium Barber in Prague 1"
|
|
description="Classic cuts, modern style, and a relaxed atmosphere. Experience expert grooming from Prague's most trusted barbers."
|
|
tag="⭐ 4.8 / 5 Stars"
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-washing-hair-barber-shop_23-2148298320.jpg?_wi=1"
|
|
imageAlt="Premium barber shop interior"
|
|
mediaAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
name: "Alisa Hester", handle: "Visiting Customer", testimonial: "Professional, clean, and incredibly friendly barbers. Best haircut I've had in Prague!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg?_wi=1", imageAlt: "Alisa Hester"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Call Now", href: "tel:+420777977979" },
|
|
{ text: "Book Appointment", href: "#booking" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<TestimonialCardOne
|
|
title="What Our Customers Say"
|
|
description="Real feedback from our valued clients in Prague"
|
|
tag="Customer Reviews"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Martin Svoboda", role: "Local Professional", company: "Prague 1 Resident", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg?_wi=2", imageAlt: "Martin Svoboda"
|
|
},
|
|
{
|
|
id: "2", name: "Jakub Novotny", role: "Business Owner", company: "Tech Startup", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pov-entrepreneurs-online-meeting_482257-79771.jpg", imageAlt: "Jakub Novotny"
|
|
},
|
|
{
|
|
id: "3", name: "Petr Kučera", role: "Consultant", company: "Management Firm", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-office-2_1262-1488.jpg", imageAlt: "Petr Kučera"
|
|
},
|
|
{
|
|
id: "4", name: "Tomas Cerny", role: "Regular Client", company: "Prague Tourist", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-psd/pets-care-template_23-2151959639.jpg", imageAlt: "Tomas Cerny"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureBento
|
|
title="Our Services"
|
|
description="Professional grooming services tailored to your style and preferences"
|
|
tag="Premium Services"
|
|
features={[
|
|
{
|
|
title: "Men's Haircut", description: "Classic and modern cuts tailored to your style. Expert technique and attention to detail.", bentoComponent: "icon-info-cards", items: [
|
|
{ icon: Scissors, label: "Fade Cuts", value: "From 350 CZK" },
|
|
{ icon: Sparkles, label: "Style Cuts", value: "From 400 CZK" }
|
|
]
|
|
},
|
|
{
|
|
title: "Beard Trim", description: "Professional beard grooming with precision shaping and conditioning treatments.", bentoComponent: "icon-info-cards", items: [
|
|
{ icon: Droplet, label: "Beard Trim", value: "From 200 CZK" },
|
|
{ icon: Wind, label: "Styling", value: "From 150 CZK" }
|
|
]
|
|
},
|
|
{
|
|
title: "Classic Razor Shave", description: "Traditional hot lather shave for the ultimate grooming experience.", bentoComponent: "icon-info-cards", items: [
|
|
{ icon: Zap, label: "Straight Razor", value: "From 300 CZK" },
|
|
{ icon: Shield, label: "Premium", value: "From 500 CZK" }
|
|
]
|
|
},
|
|
{
|
|
title: "Styling & Grooming", description: "Expert styling with premium products to complete your look.", bentoComponent: "icon-info-cards", items: [
|
|
{ icon: Wand2, label: "Hair Styling", value: "From 250 CZK" },
|
|
{ icon: Palette, label: "Color", value: "From 400 CZK" }
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="barbers" data-section="barbers">
|
|
<TeamCardTen
|
|
title="Meet Our Expert Barbers"
|
|
tag="Skilled Professionals"
|
|
tagAnimation="slide-up"
|
|
membersAnimation="slide-up"
|
|
members={[
|
|
{
|
|
id: "1", name: "Boris", imageSrc: "http://img.b2bpic.net/free-photo/man-hair-salon-facing-camera_23-2148242763.jpg", imageAlt: "Boris - Master Barber"
|
|
},
|
|
{
|
|
id: "2", name: "Billy", imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-giving-haircut-client_23-2148506193.jpg", imageAlt: "Billy - Barber"
|
|
},
|
|
{
|
|
id: "3", name: "George", imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-uses-hair-dryer-men-s-haircut-barbershop_613910-5061.jpg", imageAlt: "George - Barber"
|
|
}
|
|
]}
|
|
memberVariant="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<FeatureBento
|
|
title="Our Atmosphere"
|
|
description="Experience a premium grooming environment in the heart of Prague 1"
|
|
tag="Gallery"
|
|
features={[
|
|
{
|
|
title: "Interior Design", description: "Modern, clean, and professional space designed for relaxation and style.", bentoComponent: "media-stack", items: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18629.jpg", imageAlt: "Shop Interior" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table_627829-6196.jpg", imageAlt: "Professional Tools" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-charismatic-sensual-male-black-sweater-creative-personality_613910-11134.jpg", imageAlt: "Quality Results" }
|
|
]
|
|
},
|
|
{
|
|
title: "Premium Experience", description: "Comfortable seating, quality products, and expert service in every visit.", bentoComponent: "icon-info-cards", items: [
|
|
{ icon: Sofa, label: "Comfortable", value: "Premium Seating" },
|
|
{ icon: Sparkles, label: "Quality", value: "Top Products" },
|
|
{ icon: Award, label: "Expert", value: "Certified" }
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-choose" data-section="why-choose">
|
|
<TextSplitAbout
|
|
title="Why Choose A Man's World"
|
|
description={[
|
|
"We are Prague's trusted barber shop with years of experience delivering exceptional men's grooming services.", "Our team of certified barbers combines traditional techniques with modern styles, using only premium products.", "Located in the heart of Prague 1, we provide a relaxed, professional atmosphere where you can trust your appearance to expert hands.", "With a 4.8-star rating from 83 satisfied customers, we pride ourselves on quality, cleanliness, and customer satisfaction."
|
|
]}
|
|
buttons={[
|
|
{ text: "Book Your Appointment", href: "#booking" },
|
|
{ text: "Call Us", href: "tel:+420777977979" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
showBorder={true}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="By The Numbers"
|
|
description="Trusted by hundreds of customers in Prague"
|
|
tag="Our Track Record"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "83", title: "Reviews", description: "Satisfied customers rating us 4.8/5 stars", icon: Star
|
|
},
|
|
{
|
|
id: "2", value: "3", title: "Expert Barbers", description: "Highly skilled professionals with years of experience", icon: Users
|
|
},
|
|
{
|
|
id: "3", value: "10", title: "Years", description: "Serving Prague's professional men since 2014", icon: Award
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="strong-cta" data-section="strong-cta">
|
|
<ContactSplit
|
|
tag="Ready for Your Perfect Haircut?"
|
|
title="Need a Fresh Cut Today?"
|
|
description="Book your appointment or give us a call. Our barbers are ready to give you the haircut you deserve."
|
|
background={{ variant: "sparkles-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-washing-hair-barber-shop_23-2148298320.jpg?_wi=2"
|
|
imageAlt="Call-to-Action"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Get Notified"
|
|
termsText="We'll send you booking reminders and special offers."
|
|
/>
|
|
</div>
|
|
|
|
<div id="booking" data-section="booking">
|
|
<FaqBase
|
|
title="Book Your Appointment"
|
|
description="Quick and easy booking form. Fill in your details and we'll confirm your appointment."
|
|
tag="Reservation"
|
|
faqs={[
|
|
{
|
|
id: "booking-form", title: "How to Book Your Appointment", content: "<p><strong>Call us:</strong> +420 777 977 979</p><p><strong>Via email:</strong> Contact us with your preferred date and time</p><p><strong>Walk-in:</strong> Always welcome! Located at Křemencova 1919, Prague 1</p><p><strong>Opening hours:</strong> Opens at 08:00</p><p><strong>Services available:</strong> Men's Haircut, Beard Trim, Classic Razor Shave, Styling & Grooming</p>"
|
|
}
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
animationType="smooth"
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="A MAN'S WORLD BARBER"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Men's Haircut", href: "#services" },
|
|
{ label: "Beard Trim", href: "#services" },
|
|
{ label: "Classic Shave", href: "#services" },
|
|
{ label: "Styling", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
title: "About", items: [
|
|
{ label: "Our Barbers", href: "#barbers" },
|
|
{ label: "Gallery", href: "#gallery" },
|
|
{ label: "Why Us", href: "#why-choose" },
|
|
{ label: "Reviews", href: "#social-proof" }
|
|
]
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{ label: "Phone: +420 777 977 979", href: "tel:+420777977979" },
|
|
{ label: "Křemencova 1919, Prague 1", href: "https://maps.google.com/?q=Křemencova+1919+Prague" },
|
|
{ label: "Opens at 08:00", href: "#" },
|
|
{ label: "Book Appointment", href: "#booking" }
|
|
]
|
|
},
|
|
{
|
|
title: "Follow", items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Google Reviews", href: "https://google.com/maps" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 A MAN'S WORLD BARBER | Prague 1 | Premium Men's Grooming"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|