173 lines
6.5 KiB
TypeScript
173 lines
6.5 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import { Calendar, Phone } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="large"
|
|
background="aurora"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "home"},
|
|
{
|
|
name: "About", id: "about"},
|
|
{
|
|
name: "Services", id: "services"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="P.Cutz"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroLogo
|
|
logoText="P.Cutz Barber Shop"
|
|
description="Experience the sharpest cuts and finest grooming in the city. Where tradition meets modern style."
|
|
buttons={[
|
|
{
|
|
text: "Book Appointment", href: "#contact"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506206.jpg"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={true}
|
|
heading={[
|
|
{
|
|
type: "text", content: "Mastering the Art of Grooming"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-psd/barbershop-template-design_23-2151586247.jpg", alt: "Barber tools"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "classic", title: "Classic Cut", price: "$35", period: "per session", features: [
|
|
"Haircut & Wash", "Hot Towel", "Neck Shave"],
|
|
button: {
|
|
text: "Book Now", href: "#contact"},
|
|
},
|
|
{
|
|
id: "beard", title: "Beard Sculpting", price: "$25", period: "per session", features: [
|
|
"Beard Trim", "Line Up", "Beard Oil Application"],
|
|
button: {
|
|
text: "Book Now", href: "#contact"},
|
|
},
|
|
{
|
|
id: "full", title: "The Full P.Cutz", price: "$55", period: "per session", features: [
|
|
"Haircut", "Beard Trim", "Straight Razor Shave"],
|
|
button: {
|
|
text: "Book Now", href: "#contact"},
|
|
},
|
|
]}
|
|
title="Our Services"
|
|
description="Premium grooming solutions for the modern man."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "John D.", role: "Client", company: "Local Regular", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205927.jpg"},
|
|
{
|
|
id: "2", name: "Mike S.", role: "Client", company: "Professional", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/people-happiness-emotions-concept-smiling-joyful-young-male-with-attractive-look-dressed-casual-white-t-shirt-looks-gladfully-aside-poses-against-studio-background-with-copy-space_273609-3426.jpg"},
|
|
{
|
|
id: "3", name: "Alex R.", role: "Client", company: "Visitor", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-handsome-smiling-model-sexy-stylish-man-dressed-shirt-jeans-fashion-hipster-male-posing-near-white-wall-studio-isolated_158538-26713.jpg"},
|
|
]}
|
|
title="What Our Clients Say"
|
|
description="Hear why P.Cutz is the top rated shop in the neighborhood."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact-direct" data-section="contact-direct">
|
|
<ContactText
|
|
text="Ready for a fresh look? Book your session with our master barbers today."
|
|
background={{ variant: "downward-rays-static" }}
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Call Now", href: "tel:+15550123456" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "Do I need an appointment?", content: "We accept walk-ins, but appointments are recommended."},
|
|
{
|
|
id: "q2", title: "What payment methods do you accept?", content: "We accept cash and all major credit cards."},
|
|
]}
|
|
ctaTitle="Visit Us Today"
|
|
ctaDescription="Get your fresh cut at P.Cutz. We are located in the heart of the city."
|
|
ctaButton={{
|
|
text: "Get Directions", href: "#"}}
|
|
ctaIcon={Calendar}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "P.Cutz", items: [
|
|
{
|
|
label: "About", href: "#about"},
|
|
{
|
|
label: "Services", href: "#services"},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 P.Cutz Barber Shop"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |