259 lines
14 KiB
TypeScript
259 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { Scissors, Flame, Sparkles, Zap, Shield, Crown, Users, Award, Star, MapPin, Instagram, Linkedin, Globe, Mail } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Blackstone Barbers"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Premium Barbering in Central London"
|
|
description="Experience precision grooming from London's finest barbers. Specialising in classic cuts, beard grooming, and traditional hot shaves."
|
|
tag="Est. 2015"
|
|
background={{ variant: "plain" }}
|
|
imageSrc="https://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg"
|
|
imageAlt="Professional barber cutting hair"
|
|
buttons={[
|
|
{ text: "Book Appointment", href: "contact" },
|
|
{ text: "View Services", href: "services" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureHoverPattern
|
|
title="Our Premium Services"
|
|
description="Crafted grooming experiences designed for the discerning gentleman"
|
|
tag="Services"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="invertDefault"
|
|
features={[
|
|
{
|
|
icon: Scissors,
|
|
title: "Classic Haircuts", description: "Precision cuts executed with expertise. From timeless styles to modern interpretations of classic designs."
|
|
},
|
|
{
|
|
icon: Flame,
|
|
title: "Hot Shave", description: "Traditional straight razor shave with premium lather and finishing moisturiser. A luxurious ritual."
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
title: "Beard Grooming", description: "Expert beard shaping, trimming, and conditioning. We specialise in bold, well-defined beards."
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Hair Treatments", description: "Professional-grade treatments to restore vitality and shine. Scalp massage included with every service."
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Skin Care", description: "Facial treatments and skincare advice tailored to your needs. Premium products for optimal results."
|
|
},
|
|
{
|
|
icon: Crown,
|
|
title: "Executive Services", description: "Complete grooming packages. Haircut, shave, beard work, and premium skincare in one appointment."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="Blackstone Barbers: London's Premier Grooming Destination since 2015"
|
|
useInvertedBackground="noInvert"
|
|
metrics={[
|
|
{ icon: Users, label: "Satisfied Clients", value: "5,000+" },
|
|
{ icon: Award, label: "Years of Excellence", value: "9" },
|
|
{ icon: Star, label: "Google Rating", value: "4.9" },
|
|
{ icon: MapPin, label: "London Locations", value: "2" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTwo
|
|
title="Meet Our Master Barbers"
|
|
description="Experienced professionals dedicated to the art of barbering"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="invertDefault"
|
|
members={[
|
|
{
|
|
id: "1", name: "Marcus Sterling", role: "Senior Barber", description: "18 years of barbering experience. Specialises in classic cuts and traditional hot shaves. Award-winning stylist.", imageSrc: "https://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg", imageAlt: "Marcus Sterling, Senior Barber", socialLinks: [
|
|
{ icon: Instagram, url: "https://instagram.com" },
|
|
{ icon: Linkedin, url: "https://linkedin.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "2", name: "James Mitchell", role: "Master Craftsman", description: "12 years specialising in beard artistry and contemporary styling. Certified in premium grooming techniques.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-1374.jpg", imageAlt: "James Mitchell, Master Craftsman", socialLinks: [
|
|
{ icon: Instagram, url: "https://instagram.com" },
|
|
{ icon: Globe, url: "https://example.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "3", name: "David Thompson", role: "Style Director", description: "Trendsetter in modern barbering. Expert in fade work and contemporary designs. Passionate about client care.", imageSrc: "https://img.b2bpic.net/free-photo/man-hair-salon-looking-sideways_23-2148242781.jpg", imageAlt: "David Thompson, Style Director", socialLinks: [
|
|
{ icon: Instagram, url: "https://instagram.com" },
|
|
{ icon: Mail, url: "mailto:david@blackstonebarbers.com" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Our Clients Say"
|
|
description="Real feedback from our valued customers across London"
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Alex Porter", role: "Marketing Director", company: "Tech Startup London", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1563.jpg", imageAlt: "Alex Porter testimonial"
|
|
},
|
|
{
|
|
id: "2", name: "Robert Chen", role: "Investment Banker", company: "City Finance", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/young-handsome-man-grey-shirt-looking-aside-smiling-confident-with-arms-crossed-chest_141793-55366.jpg", imageAlt: "Robert Chen testimonial"
|
|
},
|
|
{
|
|
id: "3", name: "Christopher Hayes", role: "Architect", company: "Design Studio", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg", imageAlt: "Christopher Hayes testimonial"
|
|
},
|
|
{
|
|
id: "4", name: "Michael Barnes", role: "Creative Director", company: "Advertising Agency", rating: 5,
|
|
imageSrc: "https://img.b2bpic.net/free-photo/happy-young-businessman-walking-near-business-center_171337-19784.jpg", imageAlt: "Michael Barnes testimonial"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Everything you need to know about our services and booking process"
|
|
textPosition="left"
|
|
useInvertedBackground="invertDefault"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How do I book an appointment?", content: "You can book online through our website, call us directly at 020 XXXX XXXX, or visit one of our locations in person. Online booking is available 24/7 and you'll receive instant confirmation."
|
|
},
|
|
{
|
|
id: "2", title: "What is your cancellation policy?", content: "Appointments can be cancelled or rescheduled up to 24 hours in advance without charge. Cancellations within 24 hours may incur a 50% booking fee."
|
|
},
|
|
{
|
|
id: "3", title: "Do you offer walk-in appointments?", content: "Yes, we welcome walk-ins subject to availability. However, we recommend booking in advance to ensure minimal waiting time, especially during peak hours (Tuesday-Friday evenings)."
|
|
},
|
|
{
|
|
id: "4", title: "What products do you use?", content: "We use premium, professional-grade products including Kérastase, Pall Mall Barber Club, and Truefitt & Hill. All products are tested for quality and suited to various hair types."
|
|
},
|
|
{
|
|
id: "5", title: "Are your barbers qualified?", content: "All our barbers are fully qualified and certified. Many have over 10 years of experience and regularly attend training workshops to stay current with latest techniques."
|
|
},
|
|
{
|
|
id: "6", title: "Do you offer loyalty programs?", content: "Yes! Join our Blackstone Club and earn points on every visit. Accumulate points for discounts, free services, and exclusive member-only events."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Get in Touch"
|
|
description="Ready to book your grooming appointment? Reach out to us and we'll get you scheduled with one of our master barbers."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Full Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Email Address", required: true },
|
|
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
|
|
{ name: "service", type: "text", placeholder: "Service of Interest", required: false }
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your preferred appointment time and any special requests...", rows: 5,
|
|
required: true
|
|
}}
|
|
useInvertedBackground="noInvert"
|
|
imageSrc="https://img.b2bpic.net/free-photo/young-bearded-man-washing-head-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6316.jpg"
|
|
imageAlt="Blackstone Barbers interior"
|
|
mediaPosition="right"
|
|
buttonText="Book Appointment"
|
|
onSubmit={() => console.log('Form submitted')}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Navigate", items: [
|
|
{ label: "Home", href: "#" },
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "Team", href: "#team" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Haircuts", href: "#services" },
|
|
{ label: "Hot Shaves", href: "#services" },
|
|
{ label: "Beard Grooming", href: "#services" },
|
|
{ label: "Skincare", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
title: "Locations", items: [
|
|
{ label: "Soho, London", href: "#" },
|
|
{ label: "Shoreditch, London", href: "#" },
|
|
{ label: "Booking Info", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms & Conditions", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 Blackstone Barbers. All rights reserved."
|
|
bottomRightText="Premium Barbering Since 2015"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |