Merge version_2 into main #2
453
src/app/page.tsx
453
src/app/page.tsx
@@ -2,15 +2,15 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import { Scissors, Sparkles, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
@@ -28,346 +28,117 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="World Of Hair"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="World Of Hair"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="World Of Hair | Men's Salon"
|
||||
description="Where precision meets style. Your transformation starts in the chair."
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg?_wi=1",
|
||||
imageAlt: "Modern barbershop interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-having-drink-barbershop_23-2147736963.jpg?_wi=1",
|
||||
imageAlt: "Barber tools at work",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-hairdresser-shaving-hair-bearded-man_23-2147778748.jpg?_wi=1",
|
||||
imageAlt: "Clean modern haircut",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdressing-chair-vintage-barber-shop_23-2148298304.jpg",
|
||||
imageAlt: "Hairdressing chair in vintage barber shop",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg",
|
||||
imageAlt: "barber shop retro vintage style",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="World Of Hair | Men's Salon"
|
||||
description="Where precision meets style. Your transformation starts in the chair."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg?_wi=1"
|
||||
imageAlt="Modern barbershop interior"
|
||||
showBlur={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Crafting Your Best Look"
|
||||
description="We specialize in traditional grooming and contemporary styles. Our team is dedicated to providing an unparalleled salon experience for the modern gentleman."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Precision Cuts",
|
||||
description: "Tailored haircuts matching your facial structure.",
|
||||
},
|
||||
{
|
||||
title: "Traditional Shaves",
|
||||
description: "Classic hot towel shaves for a smooth experience.",
|
||||
},
|
||||
{
|
||||
title: "Expert Styling",
|
||||
description: "Premium grooming products for lasting finish.",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-barber-shaking-hands-with-male-client_23-2147839816.jpg?_wi=1"
|
||||
imageAlt="Professional barber haircutting"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
title="Crafting Your Best Look"
|
||||
description="We specialize in traditional grooming and contemporary styles. Our team is dedicated to providing an unparalleled salon experience for the modern gentleman."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-barber-shaking-hands-with-male-client_23-2147839816.jpg?_wi=1"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBorderGlow
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Scissors,
|
||||
title: "Executive Cut",
|
||||
description: "Precision haircut with wash and style.",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Beard Sculpting",
|
||||
description: "Detailed beard shaping and razor lining.",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Hot Towel Shave",
|
||||
description: "Relaxing facial massage and hot towel treatment.",
|
||||
},
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="Elevating the standard of male grooming."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardThree
|
||||
title="Our Signature Services"
|
||||
description="Elevating the standard of male grooming."
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Executive Cut", description: "Precision haircut with wash and style.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg?_wi=1" },
|
||||
{ title: "Beard Sculpting", description: "Detailed beard shaping and razor lining.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-having-drink-barbershop_23-2147736963.jpg?_wi=1" },
|
||||
{ title: "Hot Towel Shave", description: "Relaxing facial massage and hot towel treatment.", imageSrc: "http://img.b2bpic.net/free-photo/crop-hairdresser-shaving-hair-bearded-man_23-2147778748.jpg?_wi=1" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Matte Wax",
|
||||
price: "$25",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-looking-client-mirror_23-2148242870.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Beard Oil",
|
||||
price: "$30",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Pomade",
|
||||
price: "$28",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hipster-male-with-stylish-haircut-sits-chair-hairdresser-s-salon_613910-13412.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Aftershave",
|
||||
price: "$35",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-his-hair-washed_23-2149220589.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Shaving Brush",
|
||||
price: "$45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vintage-border-salon-tools-wooden-table-jobs-career-concept_53876-128908.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Shampoo",
|
||||
price: "$22",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hair-salon-chair-with-towel-armchair_23-2148242777.jpg",
|
||||
},
|
||||
]}
|
||||
title="Premium Grooming Line"
|
||||
description="Maintain your look with our professional product selection."
|
||||
/>
|
||||
</div>
|
||||
<div id="product" data-section="product">
|
||||
<ProductCardFour
|
||||
title="Premium Grooming Line"
|
||||
description="Maintain your look with our professional product selection."
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Matte Wax", price: "$25", variant: "Hair", imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-looking-client-mirror_23-2148242870.jpg?_wi=1" },
|
||||
{ id: "p2", name: "Beard Oil", price: "$30", variant: "Beard", imageSrc: "http://img.b2bpic.net/free-photo/full-body-portrait-stylish-male-who-himself-shaving-while-sitting-barber-chair-hairdressing-salon_613910-18655.jpg" },
|
||||
{ id: "p3", name: "Pomade", price: "$28", variant: "Hair", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-hipster-male-with-stylish-haircut-sits-chair-hairdresser-s-salon_613910-13412.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "s1",
|
||||
name: "Basic Cut",
|
||||
price: "$35",
|
||||
features: [
|
||||
"Quick trim",
|
||||
"Wash",
|
||||
"Styling",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
name: "Style Package",
|
||||
price: "$60",
|
||||
features: [
|
||||
"Haircut",
|
||||
"Beard trim",
|
||||
"Hot towel",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
name: "Total Grooming",
|
||||
price: "$85",
|
||||
features: [
|
||||
"Full treatment",
|
||||
"Skin therapy",
|
||||
"Styling",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Transparent Pricing"
|
||||
description="Simple rates for premium quality grooming."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardNine
|
||||
title="Transparent Pricing"
|
||||
description="Simple rates for premium quality grooming."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "s1", title: "Basic Cut", price: "$35", period: "/session", features: ["Quick trim", "Wash", "Styling"], button: { text: "Book Now", href: "#contact" } },
|
||||
{ id: "s2", title: "Style Package", price: "$60", period: "/session", features: ["Haircut", "Beard trim", "Hot towel"], button: { text: "Book Now", href: "#contact" } },
|
||||
{ id: "s3", title: "Total Grooming", price: "$85", period: "/session", features: ["Full treatment", "Skin therapy", "Styling"], button: { text: "Book Now", href: "#contact" } },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "John Doe",
|
||||
date: "2024-05",
|
||||
title: "Loyal client",
|
||||
quote: "The best fade in the city. Truly world class.",
|
||||
tag: "Regular",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-confident-attractive-fashionable-young-businessman-with-trimmed-beard-trendy-hairstyle-posing-modern-cozy-interior-dressed-formal-stylish-suit_343059-1778.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg?_wi=2",
|
||||
imageAlt: "smiling man portrait groomed beard",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael S.",
|
||||
date: "2024-04",
|
||||
title: "Regular guest",
|
||||
quote: "Always professional, clean, and top-tier service.",
|
||||
tag: "VIP",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-male-with-tattooed-arms-dressed-shirt-posing-grey-background_613910-15701.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-man-having-drink-barbershop_23-2147736963.jpg?_wi=2",
|
||||
imageAlt: "smiling man portrait groomed beard",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Alex P.",
|
||||
date: "2024-05",
|
||||
title: "Happy client",
|
||||
quote: "I leave here feeling like a brand new man.",
|
||||
tag: "Style",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-sensitive-man-posing-studio_23-2149518241.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-hairdresser-shaving-hair-bearded-man_23-2147778748.jpg?_wi=2",
|
||||
imageAlt: "smiling man portrait groomed beard",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David W.",
|
||||
date: "2024-03",
|
||||
title: "New regular",
|
||||
quote: "Perfect service, great atmosphere, skilled hands.",
|
||||
tag: "New",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/man-waiting-new-haircut_23-2148353450.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-barber-shaking-hands-with-male-client_23-2147839816.jpg?_wi=2",
|
||||
imageAlt: "smiling man portrait groomed beard",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Sam R.",
|
||||
date: "2024-05",
|
||||
title: "Customer",
|
||||
quote: "Best barbershop experience I have had so far.",
|
||||
tag: "Expert",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-blond-bearded-male-dressed-black-leather-jacket_613910-11915.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-looking-client-mirror_23-2148242870.jpg?_wi=2",
|
||||
imageAlt: "smiling man portrait groomed beard",
|
||||
},
|
||||
]}
|
||||
title="Client Experiences"
|
||||
description="Read what our gentlemen say about our service."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
title="Client Experiences"
|
||||
description="Read what our gentlemen say about our service."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "John Doe", handle: "@john.doe", testimonial: "The best fade in the city. Truly world class.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-confident-attractive-fashionable-young-businessman-with-trimmed-beard-trendy-hairstyle-posing-modern-cozy-interior-dressed-formal-stylish-suit_343059-1778.jpg" },
|
||||
{ id: "2", name: "Michael S.", handle: "@mike.s", testimonial: "Always professional, clean, and top-tier service.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-male-with-tattooed-arms-dressed-shirt-posing-grey-background_613910-15701.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Appointments"
|
||||
title="Book Your Spot"
|
||||
description="Sign up for updates or contact us directly."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
title="Book Your Spot"
|
||||
description="Sign up for updates or contact us directly."
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg?_wi=1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{
|
||||
label: "Appointments",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="World Of Hair"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
logoText="World Of Hair"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg?_wi=1"
|
||||
columns={[
|
||||
{ title: "Links", items: [{ label: "Services", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
|
||||
{ title: "Account", items: [{ label: "Appointments", href: "#contact" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user