354 lines
11 KiB
TypeScript
354 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="noise"
|
|
cardStyle="gradient-bordered"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Services",
|
|
id: "services",
|
|
},
|
|
{
|
|
name: "Shop",
|
|
id: "shop",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "FAQ",
|
|
id: "faq",
|
|
},
|
|
]}
|
|
brandName="Iron & Oil"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
background={{
|
|
variant: "radial-gradient",
|
|
}}
|
|
title="Where Craft Meets Sanctuary."
|
|
description="Iron & Oil is more than a barbershop; it's a third space built on century-old techniques and modern ergonomics. Enjoy a precision cut, refined service, and a complimentary pour of small-batch bourbon."
|
|
buttons={[
|
|
{
|
|
text: "Book Appointment",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table-with-electric-machines_627829-6252.jpg?_wi=1"
|
|
imageAlt="Luxurious barbershop interior"
|
|
mediaAnimation="blur-reveal"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/attractive-blond-male-dressed-suit-dark-grey-background_613910-14130.jpg",
|
|
alt: "Client 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/handsome-sports-man-resting-after-workout_158595-1404.jpg",
|
|
alt: "Client 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-unshaven-employee_1098-4075.jpg",
|
|
alt: "Client 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-young-businessman-holding-disposable-coffee-cup-hand-looking-camera_23-2148176166.jpg",
|
|
alt: "Client 4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-fashionable-bearded-male-with-stylish-haircut-drinks-glass-juice-sitting-cafe-outdoors_613910-6657.jpg",
|
|
alt: "Client 5",
|
|
},
|
|
]}
|
|
avatarText="Trusted by 1000+ local professionals"
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Precision Fades",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Straight Razor Shaves",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Hot Towel Rituals",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Expert Styling",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Small-batch Bourbon",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={true}
|
|
heading={[
|
|
{
|
|
type: "text",
|
|
content: "The Art of the Cut",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/barbecue-utensil-set-wooden-table_23-2148206901.jpg",
|
|
alt: "Barber workbench",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<PricingCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "p1",
|
|
tag: "Essential",
|
|
price: "$65",
|
|
period: "45 min",
|
|
description: "Precision haircut, tapered edges, hot towel neck shave, and style.",
|
|
button: {
|
|
text: "Book Now",
|
|
href: "#contact",
|
|
},
|
|
featuresTitle: "Includes",
|
|
features: [
|
|
"Precision Cut",
|
|
"Tapered Edges",
|
|
"Hot Towel Shave",
|
|
],
|
|
},
|
|
{
|
|
id: "p2",
|
|
tag: "Grooming",
|
|
price: "$45",
|
|
period: "30 min",
|
|
description: "Deep conditioning, free-hand shaping, and straight-razor line work.",
|
|
button: {
|
|
text: "Book Now",
|
|
href: "#contact",
|
|
},
|
|
featuresTitle: "Includes",
|
|
features: [
|
|
"Conditioning",
|
|
"Free-hand Shaping",
|
|
"Straight Razor Line-work",
|
|
],
|
|
},
|
|
{
|
|
id: "p3",
|
|
tag: "Ritual",
|
|
price: "$110",
|
|
period: "75 min",
|
|
description: "The ultimate package. Haircut, beard trim, charcoal face mask, and scalp massage.",
|
|
button: {
|
|
text: "Book Now",
|
|
href: "#contact",
|
|
},
|
|
featuresTitle: "Includes",
|
|
features: [
|
|
"Full Haircut",
|
|
"Beard Trim",
|
|
"Charcoal Mask",
|
|
"Scalp Massage",
|
|
],
|
|
},
|
|
]}
|
|
title="Services"
|
|
description="Precision service for the modern man. Appointments only."
|
|
/>
|
|
</div>
|
|
|
|
<div id="shop" data-section="shop">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "prod1",
|
|
name: "Foundry No. 1 Pomade",
|
|
price: "$28",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669117.jpg?_wi=1",
|
|
},
|
|
{
|
|
id: "prod2",
|
|
name: "Cast Iron Beard Balm",
|
|
price: "$24",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-holding-glass_23-2150226107.jpg?_wi=1",
|
|
},
|
|
{
|
|
id: "prod3",
|
|
name: "Raw Grain Exfoliant",
|
|
price: "$32",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/wooden-bowl-crispy-black-chips-stone_114579-87794.jpg?_wi=1",
|
|
},
|
|
{
|
|
id: "prod4",
|
|
name: "Burnt Cedar Tonic",
|
|
price: "$26",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/product-branding-packaging_23-2150965824.jpg",
|
|
},
|
|
{
|
|
id: "prod5",
|
|
name: "Leather Travel Case",
|
|
price: "$85",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/serious-bearded-man-sitting-grass-outdoors-getting-tablet-computer-from-his-backpack_171337-12740.jpg",
|
|
},
|
|
{
|
|
id: "prod6",
|
|
name: "Foundry Apron",
|
|
price: "$65",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/father-s-day-composition-with-blank-slate-decorative-cinnamon-sticks_23-2147631266.jpg",
|
|
},
|
|
]}
|
|
title="Shop Our Apothecary"
|
|
description="The same products we trust in the chair."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Julian M.",
|
|
date: "2024",
|
|
title: "Venture Capitalist",
|
|
quote: "Iron & Oil is a sanctuary. Silent service, sharp fades.",
|
|
tag: "Client",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/attractive-blond-male-dressed-suit-dark-grey-background_613910-14130.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wooden-background-table-with-electric-machines_627829-6252.jpg?_wi=2",
|
|
imageAlt: "barbershop interior dark industrial",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Kobe W.",
|
|
date: "2024",
|
|
title: "Athlete",
|
|
quote: "The lining is unmatched. Treat the straight razor like surgery.",
|
|
tag: "Client",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/handsome-sports-man-resting-after-workout_158595-1404.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/barbecue-utensil-set-wooden-table_23-2148206901.jpg",
|
|
imageAlt: "barber tools rustic workbench",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Liam G.",
|
|
date: "2024",
|
|
title: "Software Engineer",
|
|
quote: "Seamless booking, literal work of art, amazing pomade.",
|
|
tag: "Client",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-unshaven-employee_1098-4075.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/ecofriendly-beauty-product_23-2150669117.jpg?_wi=2",
|
|
imageAlt: "pomade jar product photo",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Marcus R.",
|
|
date: "2024",
|
|
title: "Architect",
|
|
quote: "Attention to detail is on another level.",
|
|
tag: "Client",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-young-businessman-holding-disposable-coffee-cup-hand-looking-camera_23-2148176166.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-holding-glass_23-2150226107.jpg?_wi=2",
|
|
imageAlt: "beard balm jar minimalist",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "David L.",
|
|
date: "2024",
|
|
title: "Founder",
|
|
quote: "Best experience I've had in the city.",
|
|
tag: "Client",
|
|
avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-fashionable-bearded-male-with-stylish-haircut-drinks-glass-juice-sitting-cafe-outdoors_613910-6657.jpg",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/wooden-bowl-crispy-black-chips-stone_114579-87794.jpg?_wi=2",
|
|
imageAlt: "face scrub skincare men",
|
|
},
|
|
]}
|
|
title="Refined Reviews"
|
|
description="What our clients say about the sanctuary."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "f1",
|
|
title: "Do you take walk-ins?",
|
|
content: "No. To maintain the atmosphere, we are strictly appointment-only.",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Is there parking?",
|
|
content: "Yes, private parking is available behind the Foundry building.",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "What is your cancellation policy?",
|
|
content: "We require 24-hour notice, as our chairs are in high demand.",
|
|
},
|
|
]}
|
|
title="Shop Information"
|
|
description="Common questions about your visit."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Iron & Oil"
|
|
copyrightText="© 2025 Iron & Oil Barbershop."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|