Update src/app/shop/page.tsx
This commit is contained in:
@@ -1,120 +1,273 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
||||
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
|
||||
import { useProductCatalog } from "@/hooks/useProductCatalog";
|
||||
import { Scissors, Award, CheckCircle, Sparkles, Heart, Calendar, Crown } from "lucide-react";
|
||||
|
||||
export default function ShopPage() {
|
||||
const {
|
||||
products,
|
||||
isLoading,
|
||||
search,
|
||||
setSearch,
|
||||
filters,
|
||||
} = useProductCatalog({ basePath: "/shop" });
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="none"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="The Edge"
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Book Now", href: "contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="aurora"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="The Edge"
|
||||
navItems={[
|
||||
{"name":"Home","id":"/"},
|
||||
{"name":"About","id":"about"},
|
||||
{"name":"Services","id":"services"},
|
||||
{"name":"Team","id":"team"},
|
||||
{"name":"Pricing","id":"pricing"},
|
||||
{"name":"Contact","id":"contact"},
|
||||
{"name":"Shop","id":"/shop"}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||
<p className="text-foreground">Loading products...</p>
|
||||
</main>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="The Edge"
|
||||
columns={[
|
||||
{"items":[{"label":"About","href":"about"},{"label":"Services","href":"services"},{"label":"Team","href":"team"}]},
|
||||
{"items":[{"label":"Pricing","href":"pricing"},{"label":"Book Now","href":"contact"},{"label":"Contact","href":"contact"}]},
|
||||
{"items":[{"label":"Monday - Friday: 9am - 6pm","href":"#"},{"label":"Saturday: 10am - 4pm","href":"#"},{"label":"Sunday: Closed","href":"#"}]},
|
||||
{"items":[{"label":"Phone: (555) 123-4567","href":"#"},{"label":"Email: info@theedgeshop.com","href":"#"},{"label":"123 Main St, Your City","href":"#"}]}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
title="Premium Grooming for the Modern Man"
|
||||
description="Experience precision haircuts, expert beard grooming, and professional styling at The Edge Barber Shop. Where tradition meets modern excellence."
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
avatars={[
|
||||
{ src: "https://img.b2bpic.net/free-vector/flat-variety-male-avatars_23-2147676209.jpg", alt: "Satisfied customer 1" },
|
||||
{ src: "https://img.b2bpic.net/free-photo/profile-shot-bearded-young-man-look-left_176420-16068.jpg", alt: "Satisfied customer 2" },
|
||||
{ src: "https://img.b2bpic.net/free-photo/closeup-portrait-attractive-male-black-t-shirt-against-gray-wall_181624-45617.jpg", alt: "Satisfied customer 3" }
|
||||
]}
|
||||
avatarText="Trusted by 500+ satisfied customers"
|
||||
buttons={[
|
||||
{ text: "Book Your Appointment", href: "contact" },
|
||||
{ text: "View Services", href: "services" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-bubble"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="large"
|
||||
background="aurora"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="The Edge"
|
||||
navItems={[
|
||||
{"name":"Home","id":"/"},
|
||||
{"name":"About","id":"about"},
|
||||
{"name":"Services","id":"services"},
|
||||
{"name":"Team","id":"team"},
|
||||
{"name":"Pricing","id":"pricing"},
|
||||
{"name":"Contact","id":"contact"},
|
||||
{"name":"Shop","id":"/shop"}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="product-catalog" data-section="product-catalog">
|
||||
<ProductCatalog
|
||||
layout="page"
|
||||
products={products}
|
||||
searchValue={search}
|
||||
onSearchChange={setSearch}
|
||||
searchPlaceholder="Search products..."
|
||||
filters={filters}
|
||||
emptyMessage="No products found"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="The Edge"
|
||||
columns={[
|
||||
{"items":[{"label":"About","href":"about"},{"label":"Services","href":"services"},{"label":"Team","href":"team"}]},
|
||||
{"items":[{"label":"Pricing","href":"pricing"},{"label":"Book Now","href":"contact"},{"label":"Contact","href":"contact"}]},
|
||||
{"items":[{"label":"Monday - Friday: 9am - 6pm","href":"#"},{"label":"Saturday: 10am - 4pm","href":"#"},{"label":"Sunday: Closed","href":"#"}]},
|
||||
{"items":[{"label":"Phone: (555) 123-4567","href":"#"},{"label":"Email: info@theedgeshop.com","href":"#"},{"label":"123 Main St, Your City","href":"#"}]}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
<div id="nav2" data-section="nav2">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="The Edge"
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Book Now", href: "contact"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
title="About The Edge Barber Shop"
|
||||
description="Founded in 2015, The Edge has been the premier destination for quality grooming in the community. We pride ourselves on combining traditional barbering techniques with modern styling expertise. Our team of certified barbers are passionate about providing exceptional service in a welcoming atmosphere."
|
||||
tag="Our Story"
|
||||
tagIcon={Scissors}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://img.b2bpic.net/free-photo/brown-vintage-leather-chairs-stylish-barber-shop_627829-6188.jpg"
|
||||
imageAlt="The Edge Barber Shop interior"
|
||||
imagePosition="right"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "10+ Years Experience", description: "Dedicated to mastering the craft of professional barbering and grooming", icon: Award
|
||||
},
|
||||
{
|
||||
title: "Certified Barbers", description: "All our barbers maintain current certifications and undergo continuous training", icon: CheckCircle
|
||||
},
|
||||
{
|
||||
title: "Premium Products", description: "We use only the finest grooming products and tools for superior results", icon: Sparkles
|
||||
},
|
||||
{
|
||||
title: "Community Focused", description: "Building lasting relationships with our clients and supporting local causes", icon: Heart
|
||||
}
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "Learn More", href: "#" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardNine
|
||||
title="Our Signature Services"
|
||||
description="Crafted to perfection. Every service is tailored to your unique style and needs."
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Classic Haircut", description: "Precision cuts using traditional and modern techniques. Perfect for any hair type and style preference. Clean lines, sharp edges, and professional finishing that lasts.", phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/barber-woman-making-haircut_1163-2017.jpg" },
|
||||
phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/barber-woman-making-haircut_1163-2017.jpg" }
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Expert Beard Grooming", description: "Full beard shaping, trimming, and conditioning. We specialize in beard design that complements your face shape and personal style perfectly.", phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/crop-barber-holding-mousse-client_23-2147778804.jpg" },
|
||||
phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/crop-barber-holding-mousse-client_23-2147778804.jpg" }
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Traditional Straight Shave", description: "Experience the luxury of a classic straight shave with premium creams and aftershave treatments. A timeless grooming ritual.", phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/close-up-image-female-hairdresser-washing-bearded-men-s-hair-before-haircut-saloon_613910-5446.jpg" },
|
||||
phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/close-up-image-female-hairdresser-washing-bearded-men-s-hair-before-haircut-saloon_613910-5446.jpg" }
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
showStepNumbers={true}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
title="Meet Our Master Barbers"
|
||||
description="Experienced professionals dedicated to your grooming satisfaction"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
team={[
|
||||
{
|
||||
id: "1", name: "Marcus Johnson", role: "Head Barber", imageSrc: "https://img.b2bpic.net/free-photo/handsome-businessman-barber-shop_1157-21514.jpg"
|
||||
},
|
||||
{
|
||||
id: "2", name: "David Chen", role: "Senior Stylist", imageSrc: "https://img.b2bpic.net/free-photo/serious-elegant-bearded-male-wearing-classic-waistcoat-slim-bow-tie_613910-1520.jpg"
|
||||
},
|
||||
{
|
||||
id: "3", name: "James Rodriguez", role: "Specialist", imageSrc: "https://img.b2bpic.net/free-photo/portrait-pensive-man-with-receive-moustache-beard-trimming-procedure-barbershop_613910-15033.jpg"
|
||||
},
|
||||
{
|
||||
id: "4", name: "Alex Thompson", role: "Barber", imageSrc: "https://img.b2bpic.net/free-photo/studio-portrait-bearded-photographer-wearing-classic-suit-holding-retro-camera-standing-with-his-arms-crossed_613910-19282.jpg"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
testimonial="The Edge completely transformed my grooming routine. Marcus is an absolute master of his craft. I've been coming here for three years and wouldn't trust anyone else with my hair and beard. The attention to detail and professional service is unmatched."
|
||||
rating={5}
|
||||
author="Michael Patterson, Local Business Owner"
|
||||
useInvertedBackground={true}
|
||||
avatars={[
|
||||
{ src: "https://img.b2bpic.net/free-vector/flat-variety-male-avatars_23-2147676209.jpg", alt: "Customer 1" },
|
||||
{ src: "https://img.b2bpic.net/free-photo/profile-shot-bearded-young-man-look-left_176420-16068.jpg", alt: "Customer 2" },
|
||||
{ src: "https://img.b2bpic.net/free-photo/closeup-portrait-attractive-male-black-t-shirt-against-gray-wall_181624-45617.jpg", alt: "Customer 3" },
|
||||
{ src: "https://img.b2bpic.net/free-photo/close-up-young-caucasian-guy-with-beard-smiling-looking-happy-camera-standing-blue-background_1258-40230.jpg", alt: "Customer 4" },
|
||||
{ src: "https://img.b2bpic.net/free-photo/close-up-view-pleased-young-blonde-handsome-man-looking-isolated-orange-wall_141793-112845.jpg", alt: "Customer 5" },
|
||||
{ src: "https://img.b2bpic.net/free-photo/profile-portrait-attractive-macho-man-with-neat-trimmed-beard-mustache-posing-isolated-blank-wall-frowning-expressing-suspicion-looking-away-having-strict-serious-expression_343059-1642.jpg", alt: "Customer 6" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardTwo
|
||||
title="Simple, Transparent Pricing"
|
||||
description="Quality grooming services at fair prices. No hidden fees, just exceptional value."
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
plans={[
|
||||
{
|
||||
id: "classic", badge: "Classic Cut", price: "$25", subtitle: "Perfect for regular maintenance", badgeIcon: Scissors,
|
||||
buttons: [
|
||||
{ text: "Book Now", href: "contact" },
|
||||
{ text: "Learn More", href: "#" }
|
||||
],
|
||||
features: [
|
||||
"30-minute appointment", "Professional haircut", "Neck shaping included", "Free consultation"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "premium", badge: "Premium Service", price: "$40", subtitle: "Complete grooming experience", badgeIcon: Sparkles,
|
||||
buttons: [
|
||||
{ text: "Book Now", href: "contact" },
|
||||
{ text: "Learn More", href: "#" }
|
||||
],
|
||||
features: [
|
||||
"60-minute appointment", "Expert haircut & styling", "Beard shaping & trimming", "Hot towel treatment", "Premium aftershave"
|
||||
]
|
||||
},
|
||||
{
|
||||
id: "deluxe", badge: "Deluxe Package", price: "$60", subtitle: "Ultimate luxury experience", badgeIcon: Crown,
|
||||
buttons: [
|
||||
{ text: "Book Now", href: "contact" },
|
||||
{ text: "Learn More", href: "#" }
|
||||
],
|
||||
features: [
|
||||
"90-minute appointment", "Custom haircut & style", "Straight shave service", "Full beard treatment", "Scalp massage", "Premium grooming kit"
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Book Your Appointment"
|
||||
title="Get in Touch"
|
||||
description="Ready for a fresh look? Contact us today to schedule your appointment. We're here Monday-Saturday, 9am-6pm."
|
||||
tagIcon={Calendar}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
useInvertedBackground={true}
|
||||
inputPlaceholder="Enter your email"
|
||||
buttonText="Get Started"
|
||||
termsText="By booking, you agree to our appointment policies. We'll confirm your time slot via email."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="The Edge"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "About", href: "about" },
|
||||
{ label: "Services", href: "services" },
|
||||
{ label: "Team", href: "team" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Pricing", href: "pricing" },
|
||||
{ label: "Book Now", href: "contact" },
|
||||
{ label: "Contact", href: "contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Monday - Friday: 9am - 6pm", href: "#" },
|
||||
{ label: "Saturday: 10am - 4pm", href: "#" },
|
||||
{ label: "Sunday: Closed", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Phone: (555) 123-4567", href: "#" },
|
||||
{ label: "Email: info@theedgeshop.com", href: "#" },
|
||||
{ label: "123 Main St, Your City", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user