453 lines
14 KiB
TypeScript
453 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
|
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLarge"
|
|
background="aurora"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Services",
|
|
id: "#services",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "#about",
|
|
},
|
|
{
|
|
name: "Team",
|
|
id: "#team",
|
|
},
|
|
{
|
|
name: "Pricing",
|
|
id: "#pricing",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
brandName="4kfadez"
|
|
button={{
|
|
text: "Book Now",
|
|
href: "#contact",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="Refining the Modern Gentleman"
|
|
description="Premium grooming meets contemporary lifestyle. Experience precision fades, beard sculpting, and the classic hot towel ritual in a sanctuary designed for the modern man."
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg?_wi=1",
|
|
imageAlt: "Barber precision fade",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg?_wi=2",
|
|
imageAlt: "Barber precision fade",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg?_wi=3",
|
|
imageAlt: "Barber precision fade",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg?_wi=4",
|
|
imageAlt: "Barber precision fade",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg?_wi=5",
|
|
imageAlt: "Barber precision fade",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg?_wi=6",
|
|
imageAlt: "Barber precision fade",
|
|
},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg?_wi=7",
|
|
imageAlt: "Vintage chair",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg?_wi=8",
|
|
imageAlt: "Vintage chair",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg?_wi=9",
|
|
imageAlt: "Vintage chair",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg?_wi=10",
|
|
imageAlt: "Vintage chair",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg?_wi=11",
|
|
imageAlt: "Vintage chair",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg?_wi=12",
|
|
imageAlt: "Vintage chair",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Book Appointment",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/redhead-non-binary-person-smiling_23-2148760583.jpg",
|
|
alt: "Barber 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/barber-man-apron-holding-brushes-beard-trimmer-smiling-standing-orange-wall_141793-61360.jpg",
|
|
alt: "Barber 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-arms-dressed-white-shirt-grey-background_613910-1412.jpg",
|
|
alt: "Barber 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/low-angle-barbershop-concept_23-2148506214.jpg",
|
|
alt: "Client 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/hairdresser-styling-mustache-client-salon_23-2148181984.jpg",
|
|
alt: "Client 2",
|
|
},
|
|
]}
|
|
avatarText="Trusted by 500+ gentlemen"
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "PRECISION FADES",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "HOT TOWEL SHAVES",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "BEARD ARTISTRY",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "PREMIUM GROOMING",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "MODERN STYLE",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={true}
|
|
heading={[
|
|
{
|
|
type: "text",
|
|
content: "More than just a haircut.",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg",
|
|
alt: "Shop atmosphere",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="inline-image"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Precision Fades",
|
|
description: "Crisp, clean, and perfectly blended fades tailored to your head shape and hair texture.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-corrects-guy-s-beard_140725-7665.jpg?_wi=1",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-corrects-guy-s-beard_140725-7665.jpg?_wi=2",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-applying-cream-clients-beard_107420-94778.jpg?_wi=13",
|
|
imageAlt: "barbershop interior dark atmosphere",
|
|
},
|
|
{
|
|
title: "Beard Sculpting",
|
|
description: "Refined beard grooming, trimming, and hot towel applications to maintain your distinct look.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-corrects-guy-s-beard_140725-7665.jpg?_wi=3",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-corrects-guy-s-beard_140725-7665.jpg?_wi=4",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-interior_1163-2009.jpg",
|
|
imageAlt: "modern luxury barbershop interior design",
|
|
},
|
|
{
|
|
title: "Hot Towel Shave",
|
|
description: "The ultimate barber experience. Relaxing, soothing, and impossibly smooth results.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-corrects-guy-s-beard_140725-7665.jpg?_wi=5",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-corrects-guy-s-beard_140725-7665.jpg?_wi=6",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-corrects-guy-s-beard_140725-7665.jpg?_wi=7",
|
|
imageAlt: "precision hair fade cutting",
|
|
},
|
|
]}
|
|
showStepNumbers={true}
|
|
title="Mastery in Grooming"
|
|
description="Our services blend heritage techniques with modern styling to ensure you leave looking and feeling your best."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "p1",
|
|
price: "450 kr",
|
|
name: "The Fade",
|
|
features: [
|
|
"Precision cut",
|
|
"Hot towel neck finish",
|
|
"Styling",
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Book",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "p2",
|
|
price: "350 kr",
|
|
name: "Beard Grooming",
|
|
features: [
|
|
"Trimming",
|
|
"Hot towel",
|
|
"Beard oil treatment",
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Book",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "p3",
|
|
price: "600 kr",
|
|
name: "Signature Combo",
|
|
features: [
|
|
"Precision cut",
|
|
"Beard sculpting",
|
|
"Hot towel treatment",
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Book",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
title="Grooming Investment"
|
|
description="Transparent pricing for high-end grooming services."
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="asymmetric-60-wide-40-narrow"
|
|
useInvertedBackground={false}
|
|
members={[
|
|
{
|
|
id: "1",
|
|
name: "Marcus",
|
|
role: "Master Barber",
|
|
description: "10+ years experience in precision fading.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/redhead-non-binary-person-smiling_23-2148760583.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Elias",
|
|
role: "Senior Stylist",
|
|
description: "Specialist in beard craft and wet shaves.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-man-apron-holding-brushes-beard-trimmer-smiling-standing-orange-wall_141793-61360.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Julian",
|
|
role: "Junior Stylist",
|
|
description: "Modern techniques and sharp finishes.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-arms-dressed-white-shirt-grey-background_613910-1412.jpg",
|
|
},
|
|
]}
|
|
title="Meet Your Masters"
|
|
description="Expert barbers dedicated to the craft."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "John Doe",
|
|
handle: "@johndoe",
|
|
testimonial: "Best fade I have ever had.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-barbershop-concept_23-2148506214.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Sam Smith",
|
|
handle: "@samsmith",
|
|
testimonial: "Incredibly professional staff.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-styling-mustache-client-salon_23-2148181984.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Mike Ross",
|
|
handle: "@mikeross",
|
|
testimonial: "Great community vibe.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-holding-mousse-client_23-2147778804.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Alex King",
|
|
handle: "@alexking",
|
|
testimonial: "4kfadez is the standard.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-male-waits-hairdresser-sitting-barber-chair_613910-18391.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Chris Paul",
|
|
handle: "@chrispaul",
|
|
testimonial: "Clean shop, great cuts.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-showing-strong-emotions-mental-health-awareness_23-2151759613.jpg",
|
|
},
|
|
]}
|
|
showRating={true}
|
|
title="What Clients Say"
|
|
description="The 4kfadez experience."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Book Your Seat"
|
|
description="Secure your spot at 4kfadez today."
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Your Name",
|
|
required: true,
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Email",
|
|
required: true,
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/hairdressing-chair-vintage-barber-shop_23-2148298304.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Menu",
|
|
items: [
|
|
{
|
|
label: "Services",
|
|
href: "#services",
|
|
},
|
|
{
|
|
label: "Pricing",
|
|
href: "#pricing",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Connect",
|
|
items: [
|
|
{
|
|
label: "Instagram",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Facebook",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
logoText="4kfadez"
|
|
copyrightText="© 2025 4kfadez Barbershop"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|