Merge version_2 into main
Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
297
src/app/page.tsx
297
src/app/page.tsx
@@ -5,263 +5,114 @@ import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
||||
import { Scissors, Star, Calendar } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="noise"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="radial-glow"
|
||||
borderRadius="pill"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Pablo's Barbershop"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplit
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
title="Mastery in Every Cut"
|
||||
description="Pablo's Barbershop delivers a premium grooming experience, blending classic tradition with modern precision. Redefine your style with our expert artisans."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-getting-his-beard-shaved-with-razor_107420-94772.jpg"
|
||||
imageAlt="Professional barber in luxury setting"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-young-man-getting-haircut_23-2149220536.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/brutal-bearded-male-violet-jacket-isolated-with-contrast-illumination-grey-background_613910-1950.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/back-view-customer-checking-his-beard_23-2148298299.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/pleased-slavic-middle-aged-male-barber-uniform-holding-barber-tools-isolated-purple-wall_141793-91610.jpg",
|
||||
alt: "Customer",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 10,000+ satisfied gentlemen"
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Classic Cuts",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Hot Towel Shaves",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Beard Sculpting",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Grooming",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modern Precision",
|
||||
},
|
||||
]}
|
||||
<HeroBillboardScroll
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Sophisticated Grooming for the Modern Gentleman"
|
||||
description="Experience the pinnacle of barbering arts at Pablo's. Where heritage techniques meet contemporary refinement."
|
||||
buttons={[{ text: "Reserve Your Seat", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/barber-holding-razor-client_23-2148506354.jpg"
|
||||
imageAlt="Master barber at work"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
title="A Legacy of Grooming"
|
||||
description="At Pablo's, we believe a haircut is more than just a trim—it's a ritual. Our legacy of precision, style, and dedicated care has made us the cornerstone of premium men's grooming."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Artisanal Precision",
|
||||
description: "Hand-crafted techniques perfected through years of dedicated service.",
|
||||
},
|
||||
{
|
||||
title: "Premium Environment",
|
||||
description: "Relax in a sophisticated setting designed for your ultimate comfort.",
|
||||
},
|
||||
{
|
||||
title: "Curated Grooming",
|
||||
description: "Products selected specifically for the modern man's routine.",
|
||||
},
|
||||
]}
|
||||
<TestimonialAboutCard
|
||||
tag="Our Philosophy"
|
||||
title="Artisanship Reimagined"
|
||||
description="At Pablo's Barbershop, we hold ourselves to a standard beyond the ordinary. Our master artisans are dedicated to crafting your identity through precise grooming and ritualistic attention to detail."
|
||||
subdescription="Every service is a curated experience, designed to elevate your confidence and presence."
|
||||
icon={Scissors}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/barber-corrects-guy-s-beard_140725-7665.jpg"
|
||||
imageAlt="Barber craftsmanship"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="The art of the cut"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
title="Signature Grooming"
|
||||
description="Our premium menu is designed for those who appreciate the finer things in life."
|
||||
features={[
|
||||
{
|
||||
title: "Traditional Shave",
|
||||
description: "The ultimate hot-towel experience for a clean, refreshed finish.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-doing-his-job_23-2149220583.jpg",
|
||||
imageAlt: "Hot towel shave",
|
||||
title: "The Master Cut", description: "Custom tailoring your hair to your face shape and personal style.", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg"
|
||||
},
|
||||
{
|
||||
title: "Precision Cut",
|
||||
description: "Bespoke styling designed to complement your unique facial features.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-cutting-hair-bearded-hipster-male-saloon_613910-5711.jpg",
|
||||
imageAlt: "Precision haircut",
|
||||
title: "Royal Shave", description: "Full hot-towel treatment and precision straight-razor finish.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-doing-his-job_23-2149220583.jpg"
|
||||
},
|
||||
{
|
||||
title: "Beard Sculpting",
|
||||
description: "Expert trimming and shaping to keep your beard perfectly defined.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-combing-moustache-client_23-2147778841.jpg",
|
||||
imageAlt: "Beard sculpting",
|
||||
},
|
||||
title: "Sculpted Beard", description: "Refined beard shaping and moisturizing treatment for a healthy look.", imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-combing-moustache-client_23-2147778841.jpg"
|
||||
}
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="Discover a suite of premium grooming options tailored to your distinct style."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSixteen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Arthur J.",
|
||||
role: "Entrepreneur",
|
||||
company: "TechInnovate",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-getting-haircut_23-2149220536.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Benjamin S.",
|
||||
role: "Architect",
|
||||
company: "DesignCo",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brutal-bearded-male-violet-jacket-isolated-with-contrast-illumination-grey-background_613910-1950.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Charles D.",
|
||||
role: "Chef",
|
||||
company: "Culinary",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/back-view-customer-checking-his-beard_23-2148298299.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David W.",
|
||||
role: "Lawyer",
|
||||
company: "GlobalLegal",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186462.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Edward M.",
|
||||
role: "Creative",
|
||||
company: "Studio",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-slavic-middle-aged-male-barber-uniform-holding-barber-tools-isolated-purple-wall_141793-91610.jpg",
|
||||
},
|
||||
]}
|
||||
animationType="depth-3d"
|
||||
title="Voices of Distinction"
|
||||
description="Trusted by our clientele for unrivaled quality and sophistication."
|
||||
kpiItems={[
|
||||
{
|
||||
value: "10k+",
|
||||
label: "Grooms",
|
||||
},
|
||||
{
|
||||
value: "500+",
|
||||
label: "5-Star Reviews",
|
||||
},
|
||||
{
|
||||
value: "15",
|
||||
label: "Expert Barbers",
|
||||
},
|
||||
{ value: "5k+", label: "Premium Grooms" },
|
||||
{ value: "100%", label: "Satisfaction Rate" },
|
||||
{ value: "20+", label: "Years of Mastery" }
|
||||
]}
|
||||
title="Trusted by Gentlemen"
|
||||
description="Read what our distinguished clients say about their grooming journey at Pablo's."
|
||||
testimonials={[
|
||||
{ id: "1", name: "Julian V.", role: "Executive", company: "Vanguard", rating: 5 },
|
||||
{ id: "2", name: "Marcus R.", role: "Art Director", company: "CreativeCo", rating: 5 },
|
||||
{ id: "3", name: "Samuel L.", role: "Consultant", company: "Strategy", rating: 5 }
|
||||
]}
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Secure Your Chair"
|
||||
description="Experience premium grooming. Fill the form to request an appointment or reach out with any inquiries."
|
||||
title="Book Your Experience"
|
||||
description="Pablo's operates by appointment to ensure every client receives our undivided attention."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email",
|
||||
required: true,
|
||||
},
|
||||
{ name: "name", type: "text", placeholder: "Full Name" },
|
||||
{ name: "email", type: "email", placeholder: "Email Address" }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Preferred service and time...",
|
||||
rows: 4,
|
||||
}}
|
||||
textarea={{ name: "request", placeholder: "How can we assist you?" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506341.jpg"
|
||||
imageAlt="Barbershop interior"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -269,40 +120,12 @@ export default function LandingPage() {
|
||||
<FooterBaseCard
|
||||
logoText="Pablo's Barbershop"
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Information", items: [{ label: "About Us", href: "#about" }, { label: "Services", href: "#services" }] },
|
||||
{ title: "Support", items: [{ label: "Appointments", href: "#contact" }, { label: "Privacy Policy", href: "#" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f4ef;
|
||||
--card: #dad6cd;
|
||||
--foreground: #2a2928;
|
||||
--primary-cta: #2a2928;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffffe6;
|
||||
--primary-cta: #ffdf7d;
|
||||
--primary-cta-text: #f5f4ef;
|
||||
--secondary-cta: #ecebea;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #2a2928;
|
||||
--accent: #ffffff;
|
||||
--background-accent: #c6b180;
|
||||
--accent: #b8860b;
|
||||
--background-accent: #8b6914;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user