514 lines
18 KiB
TypeScript
514 lines
18 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||
import { Scissors, Sparkles } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="expand-hover"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="rounded"
|
||
contentWidth="mediumSmall"
|
||
sizing="largeSmall"
|
||
background="none"
|
||
cardStyle="outline"
|
||
primaryButtonStyle="gradient"
|
||
secondaryButtonStyle="radial-glow"
|
||
headingFontWeight="normal"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleApple
|
||
navItems={[
|
||
{
|
||
name: "Home",
|
||
id: "#hero",
|
||
},
|
||
{
|
||
name: "Craftsmanship",
|
||
id: "#craftsmanship",
|
||
},
|
||
{
|
||
name: "Services",
|
||
id: "#services",
|
||
},
|
||
{
|
||
name: "Membership",
|
||
id: "#membership",
|
||
},
|
||
{
|
||
name: "Locations",
|
||
id: "#locations",
|
||
},
|
||
{
|
||
name: "Testimonials",
|
||
id: "#testimonials",
|
||
},
|
||
{
|
||
name: "Book Now",
|
||
id: "#contact",
|
||
},
|
||
]}
|
||
brandName="1847 For Men"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitTestimonial
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "plain",
|
||
}}
|
||
imagePosition="right"
|
||
title="1847 For Men: The Art of Grooming"
|
||
description="Experience unparalleled precision and timeless style. A sanctuary for the modern gentleman."
|
||
testimonials={[
|
||
{
|
||
name: "Julian Vance",
|
||
handle: "@julianv",
|
||
testimonial: "1847 has redefined my grooming routine. The attention to detail and ambiance are simply unmatched. A true gentleman's retreat.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/brutal-athletic-male-vogue-model-dressed-white-shirt-grey-background_613910-9888.jpg?_wi=1",
|
||
imageAlt: "Julian Vance portrait",
|
||
},
|
||
{
|
||
name: "Marcus Thorne",
|
||
handle: "@marcust",
|
||
testimonial: "Every visit is a masterclass in sophistication. From the hot towel shave to the precision cut, 1847 is simply the best.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-with-cutlery-restaurant_169016-21627.jpg?_wi=1",
|
||
imageAlt: "Marcus Thorne portrait",
|
||
},
|
||
{
|
||
name: "Elias Sterling",
|
||
handle: "@elias_s",
|
||
testimonial: "The only place I trust for my grooming. The expert barbers and discreet service make it feel like a private club.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/contemplated-young-man-standing-against-wall_23-2148130359.jpg",
|
||
imageAlt: "Elias Sterling portrait",
|
||
},
|
||
{
|
||
name: "Arthur Finch",
|
||
handle: "@arthur_f",
|
||
testimonial: "A sanctuary from the city's hustle. The consistent quality and relaxing environment are exactly what I need.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-model-sexy-stylish-man-dressed-shirt-trousers-fashion-hipster-male-posing-near-grey-wall-studio-isolated_158538-26741.jpg",
|
||
imageAlt: "Arthur Finch portrait",
|
||
},
|
||
{
|
||
name: "Sebastian Shaw",
|
||
handle: "@sebshaw",
|
||
testimonial: "Impeccable service and an atmosphere of refined luxury. 1847 elevates the art of male grooming.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-brutal-bearded-macho-male-dressed-suit-dark-grey-background_613910-1530.jpg",
|
||
imageAlt: "Sebastian Shaw portrait",
|
||
},
|
||
]}
|
||
testimonialRotationInterval={5000}
|
||
buttons={[
|
||
{
|
||
text: "Book an Appointment",
|
||
href: "#contact",
|
||
},
|
||
{
|
||
text: "Explore Services",
|
||
href: "#services",
|
||
},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg?_wi=1"
|
||
imageAlt="Vintage barber chair in a luxurious setting"
|
||
mediaAnimation="reveal-blur"
|
||
fixedMediaHeight={true}
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/handsome-black-male-dressed-suit-from-wool_613910-15983.jpg",
|
||
alt: "Well-groomed man",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-handsome-business-man-suit_613910-2543.jpg",
|
||
alt: "Handsome businessman",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-stylish-man-elegant-black-suit-dark-background_613910-539.jpg",
|
||
alt: "Stylish man in suit",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/studio-portrait-elegant-shaved-head-male-dressed-light-grey-suit_613910-11361.jpg",
|
||
alt: "Elegant shaved head male",
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/thinking-man-dark-suit-studio-shot_613910-10754.jpg",
|
||
alt: "Thinking man",
|
||
},
|
||
]}
|
||
avatarText="Trusted by over 10,000 discerning gentlemen worldwide."
|
||
marqueeItems={[
|
||
{
|
||
type: "text",
|
||
text: "Luxury Grooming",
|
||
},
|
||
{
|
||
type: "text-icon",
|
||
text: "Precision Cuts",
|
||
icon: Scissors,
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Hot Towel Shaves",
|
||
},
|
||
{
|
||
type: "text-icon",
|
||
text: "Refined Style",
|
||
icon: Sparkles,
|
||
},
|
||
{
|
||
type: "text",
|
||
text: "Timeless Elegance",
|
||
},
|
||
]}
|
||
showMarqueeCard={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="craftsmanship" data-section="craftsmanship">
|
||
<FeatureBento
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
title: "The Master's Touch",
|
||
description: "Years of dedicated skill perfected for you, ensuring every detail is flawless.",
|
||
bentoComponent: "media-stack",
|
||
items: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/silver-machine-haircut_140725-8078.jpg",
|
||
imageAlt: "Close-up of barber's hands",
|
||
},
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg?_wi=2",
|
||
imageAlt: "barber hands cutting hair precision close-up",
|
||
},
|
||
{
|
||
title: "Art of Transformation",
|
||
description: "Beyond a service, a ritual that redefines your look and confidence.",
|
||
bentoComponent: "media-stack",
|
||
items: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/hairdressing-chair-vintage-barber-shop_23-2148298304.jpg",
|
||
imageAlt: "Subtle male grooming transformation",
|
||
},
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/brutal-athletic-male-vogue-model-dressed-white-shirt-grey-background_613910-9888.jpg?_wi=2",
|
||
imageAlt: "barber hands cutting hair precision close-up",
|
||
},
|
||
{
|
||
title: "Timeless Elegance",
|
||
description: "Classic techniques meet modern sophistication, for a look that endures.",
|
||
bentoComponent: "media-stack",
|
||
items: [
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313028.jpg",
|
||
imageAlt: "Classic grooming tools",
|
||
},
|
||
],
|
||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-with-cutlery-restaurant_169016-21627.jpg?_wi=2",
|
||
imageAlt: "barber hands cutting hair precision close-up",
|
||
},
|
||
]}
|
||
title="The Legacy of Precision & Craftsmanship"
|
||
description="Our heritage is built on meticulous attention to detail and a passion for masculine refinement. Every cut, every shave, a testament to enduring quality."
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<ProductCardThree
|
||
textboxLayout="default"
|
||
gridVariant="two-columns-alternating-heights"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "service-1",
|
||
name: "The Signature Haircut",
|
||
price: "£60",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205920.jpg",
|
||
imageAlt: "A man getting a luxurious haircut",
|
||
},
|
||
{
|
||
id: "service-2",
|
||
name: "Traditional Hot Towel Shave",
|
||
price: "£50",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/dad-teaching-his-boy-how-shave_23-2149588748.jpg",
|
||
imageAlt: "A classic straight razor shave",
|
||
},
|
||
{
|
||
id: "service-3",
|
||
name: "Rejuvenating Facial",
|
||
price: "£75",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-getting-groomed_23-2150668469.jpg",
|
||
imageAlt: "A man receiving a facial treatment",
|
||
},
|
||
{
|
||
id: "service-4",
|
||
name: "Precision Beard Trim",
|
||
price: "£35",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/woma-washing-man-s-head-barbershop_1157-27169.jpg",
|
||
imageAlt: "A close-up of a precision beard trim",
|
||
},
|
||
{
|
||
id: "service-5",
|
||
name: "Executive Manicure",
|
||
price: "£40",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/dad-teaching-his-son-how-shave_23-2149422630.jpg",
|
||
imageAlt: "A man getting a manicure",
|
||
},
|
||
{
|
||
id: "service-6",
|
||
name: "Luxury Shoe Shine",
|
||
price: "£25",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/broom-dressing-up_23-2147990739.jpg",
|
||
imageAlt: "High-end shoes being polished",
|
||
},
|
||
]}
|
||
title="Curated Services for the Discerning Gentleman"
|
||
description="From the perfect haircut to a rejuvenating facial, each service is an experience in itself."
|
||
/>
|
||
</div>
|
||
|
||
<div id="membership" data-section="membership">
|
||
<PricingCardFive
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
plans={[
|
||
{
|
||
id: "bronze",
|
||
tag: "Essential",
|
||
price: "£150",
|
||
period: "/month",
|
||
description: "For those seeking regular, high-quality grooming.",
|
||
button: {
|
||
text: "Join Bronze",
|
||
},
|
||
featuresTitle: "Includes:",
|
||
features: [
|
||
"2 Signature Haircuts",
|
||
"1 Hot Towel Shave",
|
||
"Priority Booking Access",
|
||
],
|
||
},
|
||
{
|
||
id: "silver",
|
||
tag: "Premium",
|
||
price: "£250",
|
||
period: "/month",
|
||
description: "Elevate your routine with enhanced services and benefits.",
|
||
button: {
|
||
text: "Join Silver",
|
||
},
|
||
featuresTitle: "Includes:",
|
||
features: [
|
||
"3 Signature Haircuts",
|
||
"2 Hot Towel Shaves",
|
||
"1 Rejuvenating Facial",
|
||
"Dedicated Concierge Line",
|
||
],
|
||
},
|
||
{
|
||
id: "gold",
|
||
tag: "Elite",
|
||
price: "£400",
|
||
period: "/month",
|
||
description: "The ultimate bespoke experience for the truly discerning gentleman.",
|
||
button: {
|
||
text: "Join Gold",
|
||
},
|
||
featuresTitle: "Includes:",
|
||
features: [
|
||
"Unlimited Signature Haircuts",
|
||
"Unlimited Hot Towel Shaves",
|
||
"2 Rejuvenating Facials",
|
||
"Personal Style Consultation",
|
||
"Exclusive Member Events",
|
||
],
|
||
},
|
||
]}
|
||
title="Exclusive Memberships. Unrivalled Access."
|
||
description="Unlock a world of bespoke grooming, personalized service, and priority access designed for our most valued clients."
|
||
/>
|
||
</div>
|
||
|
||
<div id="locations" data-section="locations">
|
||
<FeatureBento
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
title: "Our Global Footprint",
|
||
description: "Strategically located in key luxury hubs worldwide to serve you better.",
|
||
bentoComponent: "map",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/using-credit-card_23-2151918493.jpg",
|
||
imageAlt: "sleek premium membership card black gold",
|
||
},
|
||
]}
|
||
title="Discover Your Nearest Sanctuary"
|
||
description="With prime locations designed for your comfort and convenience, 1847 For Men is always within reach. Find us in the most prestigious districts."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardTwo
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "testimonial-6",
|
||
name: "Liam Kensington",
|
||
role: "Financial Analyst",
|
||
testimonial: "The precision of the cut and the serene atmosphere at 1847 are unparalleled. I leave feeling refreshed and impeccably styled every time.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-businessman-suit_23-2147876771.jpg",
|
||
imageAlt: "Liam Kensington portrait",
|
||
},
|
||
{
|
||
id: "testimonial-7",
|
||
name: "Henry St. James",
|
||
role: "Art Collector",
|
||
testimonial: "1847 is more than a barbershop; it's an institution. The level of service and attention to detail rivals any luxury establishment.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-smiling-stylish-businessman-dark-background_613910-15034.jpg",
|
||
imageAlt: "Henry St. James portrait",
|
||
},
|
||
{
|
||
id: "testimonial-8",
|
||
name: "Oliver Maxwell",
|
||
role: "Tech Entrepreneur",
|
||
testimonial: "As someone who values efficiency and excellence, 1847 consistently delivers. My go-to for a sharp look and a moment of calm.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/contemplated-serious-young-man-looking-camera_23-2148130297.jpg",
|
||
imageAlt: "Oliver Maxwell portrait",
|
||
},
|
||
{
|
||
id: "testimonial-9",
|
||
name: "George Fitzwilliam",
|
||
role: "Architect",
|
||
testimonial: "The meticulous approach to grooming here is remarkable. It’s a space where tradition meets modern luxury, perfectly.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-outdoor_624325-664.jpg",
|
||
imageAlt: "George Fitzwilliam portrait",
|
||
},
|
||
{
|
||
id: "testimonial-10",
|
||
name: "Edward P. Sterling",
|
||
role: "Brand Strategist",
|
||
testimonial: "Confidence starts with impeccable presentation, and 1847 understands this implicitly. A truly transformative experience.",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-blond-bearded-male-dressed-elegant-classic-jacket_613910-11186.jpg",
|
||
imageAlt: "Edward P. Sterling portrait",
|
||
},
|
||
]}
|
||
title="Echoes of Excellence: Our Clients Speak"
|
||
description="Hear from gentlemen who embody the 1847 experience—transformations, trust, and enduring satisfaction."
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={false}
|
||
title="Book Your Bespoke Experience"
|
||
description="Begin your journey of refined style and impeccable grooming. Schedule your appointment with 1847 For Men."
|
||
inputs={[
|
||
{
|
||
name: "name",
|
||
type: "text",
|
||
placeholder: "Your Name",
|
||
required: true,
|
||
},
|
||
{
|
||
name: "email",
|
||
type: "email",
|
||
placeholder: "Your Email",
|
||
required: true,
|
||
},
|
||
{
|
||
name: "phone",
|
||
type: "tel",
|
||
placeholder: "Phone Number (Optional)",
|
||
},
|
||
]}
|
||
textarea={{
|
||
name: "message",
|
||
placeholder: "Your Message / Service Request",
|
||
rows: 4,
|
||
}}
|
||
imageSrc="http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6405.jpg"
|
||
imageAlt="Luxurious barbershop interior"
|
||
mediaAnimation="blur-reveal"
|
||
mediaPosition="right"
|
||
buttonText="Confirm Appointment"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterLogoEmphasis
|
||
columns={[
|
||
{
|
||
items: [
|
||
{
|
||
label: "Home",
|
||
href: "#hero",
|
||
},
|
||
{
|
||
label: "Services",
|
||
href: "#services",
|
||
},
|
||
{
|
||
label: "Membership",
|
||
href: "#membership",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
items: [
|
||
{
|
||
label: "Locations",
|
||
href: "#locations",
|
||
},
|
||
{
|
||
label: "Testimonials",
|
||
href: "#testimonials",
|
||
},
|
||
{
|
||
label: "Book Now",
|
||
href: "#contact",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
items: [
|
||
{
|
||
label: "Privacy Policy",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Terms of Service",
|
||
href: "#",
|
||
},
|
||
{
|
||
label: "Accessibility",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
logoText="1847 For Men"
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|