180 lines
9.3 KiB
TypeScript
180 lines
9.3 KiB
TypeScript
"use client";
|
|
|
|
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { Calendar, User, Clock, BarChart3, Activity, MessageSquare, Layers, Lock, Sparkles, Zap, Star, Mail } from 'lucide-react';
|
|
|
|
export default function BarberDashboardPage() {
|
|
const navItems = [
|
|
{ name: "Dashboard", id: "/barber-dashboard" },
|
|
{ name: "Features", id: "#features" },
|
|
{ name: "Analytics", id: "#analytics" },
|
|
{ name: "Reviews", id: "#reviews" },
|
|
{ name: "Contact", id: "#contact" }
|
|
];
|
|
|
|
const features = [
|
|
{
|
|
title: "Appointment Management", description: "Seamlessly book, reschedule, and manage client appointments with an intuitive calendar view.", icon: Calendar,
|
|
},
|
|
{
|
|
title: "Client Management", description: "Maintain detailed client profiles, service history, and preferences for a personalized experience.", icon: User,
|
|
},
|
|
{
|
|
title: "Schedule Management", description: "Efficiently organize your daily, weekly, and monthly schedule, block out time, and manage staff availability.", icon: Clock,
|
|
},
|
|
{
|
|
title: "Revenue Tracking", description: "Monitor sales, track payments, and generate financial reports to keep an eye on your barbershop's earnings.", icon: BarChart3,
|
|
},
|
|
{
|
|
title: "Performance Analytics", description: "Gain insights into booking trends, client retention, and service popularity with comprehensive analytics.", icon: Activity,
|
|
},
|
|
{
|
|
title: "Reviews Management", description: "Collect, display, and respond to client reviews to build trust and improve your online reputation.", icon: MessageSquare,
|
|
},
|
|
{
|
|
title: "Portfolio Management", description: "Showcase your best work with an integrated digital portfolio to attract new clients.", icon: Layers,
|
|
},
|
|
{
|
|
title: "Availability Control", description: "Set specific working hours, break times, and days off to manage your availability with ease.", icon: Lock,
|
|
},
|
|
];
|
|
|
|
const metrics = [
|
|
{ id: "1", value: "$25K", title: "Total Revenue", description: "Generated in the last 30 days." },
|
|
{ id: "2", value: "500+", title: "Appointments Booked", description: "This month across all barbers." },
|
|
{ id: "3", value: "90%", title: "Client Retention", description: "Rate for repeat customers." },
|
|
];
|
|
|
|
const testimonials = [
|
|
{
|
|
id: "1", name: "John D. Barber", role: "Owner, The Gents Place", quote: "This dashboard changed everything! Appointments are a breeze, and I finally have a clear view of my revenue.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image5.avif", imageAlt: "John D. Barber", title: "Revolutionary Business Tool"
|
|
},
|
|
{
|
|
id: "2", name: "Maria C. Styles", role: "Master Barber", quote: "Client management is so much easier. I can see their history and preferences instantly, making every cut perfect.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image6.avif", imageAlt: "Maria C. Styles", title: "A Must-Have for Barbers"
|
|
},
|
|
{
|
|
id: "3", name: "David L. Cutts", role: "Freelance Barber", quote: "The availability control and schedule management features are a lifesaver. I can finally balance work and life.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare/image7.avif", imageAlt: "David L. Cutts", title: "Improved Work-Life Balance"
|
|
}
|
|
];
|
|
|
|
const footerColumns = [
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Dashboard", href: "/barber-dashboard" },
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Pricing", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Support", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "FAQ", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Careers", href: "#" },
|
|
],
|
|
},
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="none"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<NavbarStyleFullscreen
|
|
navItems={navItems}
|
|
brandName="BarberFlow"
|
|
bottomLeftText="Transform Your Barbershop"
|
|
bottomRightText="support@barberflow.com"
|
|
/>
|
|
<HeroLogo
|
|
logoText="Barber Dashboard"
|
|
description="Streamline your barbershop operations with all-in-one appointment, client, and schedule management. Focus on your craft, we'll handle the rest."
|
|
buttons={[
|
|
{ text: "Get Started", href: "#contact" },
|
|
{ text: "Learn More", href: "#features" },
|
|
]}
|
|
imageSrc="https://images.unsplash.com/photo-1616394584738-6be71e193913?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
|
imageAlt="Barber dashboard screenshot"
|
|
showDimOverlay={false}
|
|
/>
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSix
|
|
features={features}
|
|
title="All-in-One Barber Management"
|
|
description="Take control of your business with our powerful and intuitive dashboard, designed specifically for barbers."
|
|
tag="Capabilities"
|
|
tagIcon={Sparkles}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="analytics" data-section="analytics">
|
|
<MetricCardEleven
|
|
metrics={metrics}
|
|
title="Key Business Insights"
|
|
description="Track your performance and make informed decisions with real-time analytics tailored for barbershops."
|
|
tag="Performance"
|
|
tagIcon={Zap}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
imageSrc="https://images.unsplash.com/photo-1542744095-291d6f6e4455?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
|
|
imageAlt="Dashboard with charts"
|
|
/>
|
|
</div>
|
|
<div id="reviews" data-section="reviews">
|
|
<TestimonialCardTen
|
|
testimonials={testimonials}
|
|
title="What Barbers Are Saying"
|
|
description="Hear from barbers who transformed their business and client experience with BarberFlow."
|
|
tag="Feedback"
|
|
tagIcon={Star}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Get Started"
|
|
tagIcon={Mail}
|
|
title="Ready to Supercharge Your Barbershop?"
|
|
description="Join hundreds of barbers streamlining their operations. Get started with BarberFlow today!"
|
|
buttons={[
|
|
{ text: "Start Free Trial", href: "#" },
|
|
{ text: "Book a Demo", href: "#" },
|
|
]}
|
|
background={{ variant: "canvas-reveal" }}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
<FooterSimple
|
|
columns={footerColumns}
|
|
bottomLeftText="© 2025 BarberFlow. All rights reserved."
|
|
bottomRightText="Made with care for barbers."
|
|
/>
|
|
</ThemeProvider>
|
|
);
|
|
}
|