bender/bf5eb309-bfa9-49de-8f66-2ae920545a18
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: bender:version_1
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1
...
pull from: bender:version_2
Branches Tags
bender:main bender:version_3 bender:version_2 bender:version_1

3 Commits
version_1 ... version_2

Author SHA1 Message Date
bender
94a89b9a9a Update src/app/page.tsx 2026-04-21 14:43:12 +00:00
bender
420d6a044a Update src/app/page.tsx 2026-04-21 14:42:43 +00:00
bender
12db189d4e Merge version_1 into main 
Merge version_1 into main
 2026-04-21 14:41:19 +00:00
1 changed files with 117 additions and 342 deletions
Expand all files Collapse all files

459
src/app/page.tsx
View File

@@ -2,16 +2,15 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter'; import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow'; import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'; import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery'; import HeroOverlay from '@/components/sections/hero/HeroOverlay';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree'; import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ProductCardThree from '@/components/sections/product/ProductCardThree'; import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SplitAbout from '@/components/sections/about/SplitAbout'; import MediaAbout from '@/components/sections/about/MediaAbout';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive'; import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Scissors, Sparkles, Zap } from "lucide-react";
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -28,346 +27,122 @@ export default function LandingPage() {
headingFontWeight="bold" headingFontWeight="bold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleApple <NavbarLayoutFloatingInline
navItems={[ navItems={[
{ { name: "Home", id: "hero" },
name: "Home", { name: "About", id: "about" },
id: "hero", { name: "Services", id: "features" },
}, { name: "Pricing", id: "pricing" },
{ { name: "Contact", id: "contact" },
name: "About", ]}
id: "about", brandName="World Of Hair"
}, button={{ text: "Book Now", href: "#contact" }}
{ />
name: "Services", </div>
id: "features",
},
{
name: "Pricing",
id: "pricing",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="World Of Hair"
/>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardGallery <HeroOverlay
background={{ title="World Of Hair | Men's Salon"
variant: "gradient-bars", 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"
title="World Of Hair | Men's Salon" imageAlt="Modern barbershop interior"
description="Where precision meets style. Your transformation starts in the chair." showBlur={true}
mediaItems={[ />
{ </div>
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="about" data-section="about"> <div id="about" data-section="about">
<SplitAbout <MediaAbout
textboxLayout="default" title="Crafting Your Best Look"
useInvertedBackground={false} description="We specialize in traditional grooming and contemporary styles. Our team is dedicated to providing an unparalleled salon experience for the modern gentleman."
title="Crafting Your Best Look" imageSrc="http://img.b2bpic.net/free-photo/close-up-barber-shaking-hands-with-male-client_23-2147839816.jpg?_wi=1"
description="We specialize in traditional grooming and contemporary styles. Our team is dedicated to providing an unparalleled salon experience for the modern gentleman." useInvertedBackground={false}
bulletPoints={[ />
{ </div>
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="features" data-section="features"> <div id="features" data-section="features">
<FeatureBorderGlow <FeatureCardThree
animationType="slide-up" title="Our Signature Services"
textboxLayout="default" description="Elevating the standard of male grooming."
useInvertedBackground={false} animationType="slide-up"
features={[ gridVariant="three-columns-all-equal-width"
{ useInvertedBackground={false}
icon: Scissors, textboxLayout="default"
title: "Executive Cut", features={[
description: "Precision haircut with wash and style.", { 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" },
icon: Sparkles, ]}
title: "Beard Sculpting", />
description: "Detailed beard shaping and razor lining.", </div>
},
{
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="product" data-section="product"> <div id="product" data-section="product">
<ProductCardThree <ProductCardFour
animationType="slide-up" title="Premium Grooming Line"
textboxLayout="default" description="Maintain your look with our professional product selection."
gridVariant="three-columns-all-equal-width" gridVariant="three-columns-all-equal-width"
useInvertedBackground={false} animationType="slide-up"
products={[ useInvertedBackground={false}
{ textboxLayout="default"
id: "p1", products={[
name: "Matte Wax", { 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" },
price: "$25", { 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" },
imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-looking-client-mirror_23-2148242870.jpg?_wi=1", { 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" },
}, ]}
{ />
id: "p2", </div>
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="pricing" data-section="pricing"> <div id="pricing" data-section="pricing">
<PricingCardThree <PricingCardNine
animationType="slide-up" title="Transparent Pricing"
textboxLayout="default" description="Simple rates for premium quality grooming."
useInvertedBackground={false} animationType="slide-up"
plans={[ textboxLayout="default"
{ useInvertedBackground={false}
id: "s1", plans={[
name: "Basic Cut", { id: "s1", title: "Basic Cut", price: "$35", period: "/session", features: ["Quick trim", "Wash", "Styling"], button: { text: "Book Now", href: "#contact" } },
price: "$35", { id: "s2", title: "Style Package", price: "$60", period: "/session", features: ["Haircut", "Beard trim", "Hot towel"], button: { text: "Book Now", href: "#contact" } },
features: [ { id: "s3", title: "Total Grooming", price: "$85", period: "/session", features: ["Full treatment", "Skin therapy", "Styling"], button: { text: "Book Now", href: "#contact" } },
"Quick trim", ]}
"Wash", />
"Styling", </div>
],
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="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardFive <TestimonialCardSix
textboxLayout="default" title="Client Experiences"
useInvertedBackground={false} description="Read what our gentlemen say about our service."
testimonials={[ animationType="slide-up"
{ textboxLayout="default"
id: "1", useInvertedBackground={false}
name: "John Doe", testimonials={[
date: "2024-05", { 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" },
title: "Loyal client", { 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" },
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", </div>
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="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCenter <ContactSplit
useInvertedBackground={false} tag="Contact"
background={{ title="Book Your Spot"
variant: "plain", description="Sign up for updates or contact us directly."
}} useInvertedBackground={false}
tag="Appointments" imageSrc="http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg?_wi=1"
title="Book Your Spot" background={{ variant: "plain" }}
description="Sign up for updates or contact us directly." />
/> </div>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterLogoEmphasis <FooterMedia
columns={[ logoText="World Of Hair"
{ imageSrc="http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506337.jpg?_wi=1"
items: [ columns={[
{ { title: "Links", items: [{ label: "Services", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
label: "Services", { title: "Account", items: [{ label: "Appointments", href: "#contact" }] }
href: "#features", ]}
}, />
{ </div>
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>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );
} }