334 lines
10 KiB
TypeScript
334 lines
10 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
|
||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||
import { Scissors } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="directional-hover"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="rounded"
|
||
contentWidth="medium"
|
||
sizing="largeSmall"
|
||
background="aurora"
|
||
cardStyle="outline"
|
||
primaryButtonStyle="flat"
|
||
secondaryButtonStyle="glass"
|
||
headingFontWeight="semibold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleCentered
|
||
navItems={[
|
||
{
|
||
name: "Home",
|
||
id: "hero",
|
||
},
|
||
{
|
||
name: "About",
|
||
id: "about",
|
||
},
|
||
{
|
||
name: "Services",
|
||
id: "services",
|
||
},
|
||
{
|
||
name: "Reviews",
|
||
id: "reviews",
|
||
},
|
||
{
|
||
name: "Contact",
|
||
id: "contact",
|
||
},
|
||
]}
|
||
brandName="Gil’s Barbershop"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroBillboardRotatedCarousel
|
||
background={{
|
||
variant: "rotated-rays-static",
|
||
}}
|
||
title="Precision Cuts. Timeless Style."
|
||
description="Thousand Oaks’ trusted neighborhood barbershop, blending tradition with contemporary grooming."
|
||
buttons={[
|
||
{
|
||
text: "Book Appointment",
|
||
href: "#contact",
|
||
},
|
||
{
|
||
text: "Call Now",
|
||
href: "tel:8186320475",
|
||
},
|
||
]}
|
||
carouselItems={[
|
||
{
|
||
id: "slide-1",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/various-trimmers-dressing-table_107420-94767.jpg",
|
||
imageAlt: "Barber cutting hair",
|
||
},
|
||
{
|
||
id: "slide-2",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-maledressed-suit-grey-background_613910-1592.jpg",
|
||
imageAlt: "Barber fade",
|
||
},
|
||
{
|
||
id: "slide-3",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-shaving-objects_23-2148122042.jpg",
|
||
imageAlt: "Barber tools",
|
||
},
|
||
{
|
||
id: "slide-4",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/hairdressing-chair-vintage-barber-shop_23-2148298304.jpg",
|
||
imageAlt: "Beard trim",
|
||
},
|
||
{
|
||
id: "slide-5",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-shaving-his-beard_23-2148506239.jpg",
|
||
imageAlt: "Close up fade",
|
||
},
|
||
{
|
||
id: "slide-6",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/view-child-hair-salon_23-2150462479.jpg",
|
||
imageAlt: "Barber precision",
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<TestimonialAboutCard
|
||
useInvertedBackground={true}
|
||
tag="Our Story"
|
||
title="Craftsmanship & Community"
|
||
description="At Gil’s Barbershop, we believe a great haircut is more than just grooming—it's a confidence boost. We’ve served the Thousand Oaks community with dedication, ensuring every cut reflects our commitment to precision and style."
|
||
subdescription="Rated 4.6 stars by over 60 locals who trust us to keep them looking sharp."
|
||
icon={Scissors}
|
||
imageSrc="http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7234.jpg"
|
||
mediaAnimation="blur-reveal"
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<ProductCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "s1",
|
||
name: "Haircuts",
|
||
price: "From $30",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-grooming-beard_23-2148298293.jpg",
|
||
},
|
||
{
|
||
id: "s2",
|
||
name: "Skin Fades",
|
||
price: "From $35",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-blond-bearded-male-dressed-black-leather-jacket_613910-11915.jpg",
|
||
},
|
||
{
|
||
id: "s3",
|
||
name: "Beard Trims",
|
||
price: "From $20",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-bearded-customer-looking-up_23-2148256859.jpg",
|
||
},
|
||
{
|
||
id: "s4",
|
||
name: "Line-Ups",
|
||
price: "From $15",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/silver-machine-haircut_140725-8078.jpg",
|
||
},
|
||
{
|
||
id: "s5",
|
||
name: "Classic Cuts",
|
||
price: "From $25",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-crosswalk_1098-14105.jpg",
|
||
},
|
||
{
|
||
id: "s6",
|
||
name: "Full Service",
|
||
price: "From $50",
|
||
imageSrc: "http://img.b2bpic.net/free-photo/haircuting-process-small-dog-sits-table-dog-with-professional_1157-48820.jpg",
|
||
},
|
||
]}
|
||
title="Our Services"
|
||
description="Professional grooming services tailored to you."
|
||
/>
|
||
</div>
|
||
|
||
<div id="reviews" data-section="reviews">
|
||
<TestimonialCardThirteen
|
||
animationType="slide-up"
|
||
textboxLayout="split"
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "t1",
|
||
name: "Alex R.",
|
||
handle: "@local",
|
||
testimonial: "Best fade I’ve had in years. Gil knows his craft.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/man-with-hat-buttoning-his-vest_1153-1515.jpg",
|
||
imageAlt: "Man with hat buttoning his vest",
|
||
},
|
||
{
|
||
id: "t2",
|
||
name: "Sam K.",
|
||
handle: "@local",
|
||
testimonial: "Professional, clean, and always on point.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/various-trimmers-dressing-table_107420-94767.jpg",
|
||
imageAlt: "Man with hat buttoning his vest",
|
||
},
|
||
{
|
||
id: "t3",
|
||
name: "Mike D.",
|
||
handle: "@local",
|
||
testimonial: "Solid shop, great vibes, even better haircuts.",
|
||
rating: 4,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work-washing-head_627829-7234.jpg",
|
||
imageAlt: "Man with hat buttoning his vest",
|
||
},
|
||
{
|
||
id: "t4",
|
||
name: "Chris B.",
|
||
handle: "@local",
|
||
testimonial: "Line-ups are sharp and quick.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-grooming-beard_23-2148298293.jpg",
|
||
imageAlt: "Man with hat buttoning his vest",
|
||
},
|
||
{
|
||
id: "t5",
|
||
name: "Jason W.",
|
||
handle: "@local",
|
||
testimonial: "Highly recommended neighborhood spot.",
|
||
rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-blond-bearded-male-dressed-black-leather-jacket_613910-11915.jpg",
|
||
imageAlt: "Man with hat buttoning his vest",
|
||
},
|
||
]}
|
||
showRating={true}
|
||
title="Client Reviews"
|
||
description="4.6 ★ from 66 reviews in Thousand Oaks."
|
||
/>
|
||
</div>
|
||
|
||
<div id="gallery" data-section="gallery">
|
||
<FeatureCardTwentyOne
|
||
useInvertedBackground={false}
|
||
title="Gallery"
|
||
description="See the results of our precision craftsmanship."
|
||
accordionItems={[
|
||
{
|
||
id: "a1",
|
||
title: "Before & After",
|
||
content: "Check out our latest transformation work.",
|
||
},
|
||
{
|
||
id: "a2",
|
||
title: "Beard Styling",
|
||
content: "Precision trimming and maintenance.",
|
||
},
|
||
{
|
||
id: "a3",
|
||
title: "Modern Fades",
|
||
content: "Clean, sharp skin fades.",
|
||
},
|
||
{
|
||
id: "a4",
|
||
title: "Classic Grooming",
|
||
content: "Traditional techniques for a timeless look.",
|
||
},
|
||
{
|
||
id: "a5",
|
||
title: "Shop Vibes",
|
||
content: "The atmosphere of Thousand Oaks' finest spot.",
|
||
},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/crop-barber-washing-hair-bearded-man_23-2147778782.jpg"
|
||
mediaAnimation="opacity"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactSplitForm
|
||
useInvertedBackground={true}
|
||
title="Visit Us"
|
||
description="2807 E Thousand Oaks Blvd STE 100, Thousand Oaks, CA 91362. Located in N & R Storage. Phone: (818) 632-0475. Open until 4 PM."
|
||
inputs={[
|
||
{
|
||
name: "name",
|
||
type: "text",
|
||
placeholder: "Your Name",
|
||
required: true,
|
||
},
|
||
{
|
||
name: "email",
|
||
type: "email",
|
||
placeholder: "Your Email",
|
||
required: true,
|
||
},
|
||
]}
|
||
textarea={{
|
||
name: "message",
|
||
placeholder: "Booking inquiry...",
|
||
rows: 4,
|
||
required: true,
|
||
}}
|
||
imageSrc="http://img.b2bpic.net/free-photo/close-up-washbasin_107420-94763.jpg"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterSimple
|
||
columns={[
|
||
{
|
||
title: "Links",
|
||
items: [
|
||
{
|
||
label: "Book Now",
|
||
href: "#contact",
|
||
},
|
||
{
|
||
label: "Services",
|
||
href: "#services",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
title: "Contact",
|
||
items: [
|
||
{
|
||
label: "(818) 632-0475",
|
||
href: "tel:8186320475",
|
||
},
|
||
{
|
||
label: "Thousand Oaks, CA",
|
||
href: "#",
|
||
},
|
||
],
|
||
},
|
||
]}
|
||
bottomLeftText="© 2024 Gil’s Barbershop"
|
||
bottomRightText="All rights reserved"
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|