150 lines
6.4 KiB
TypeScript
150 lines
6.4 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "About", id: "about"},
|
|
{
|
|
name: "Services", id: "services"},
|
|
{
|
|
name: "Reviews", id: "testimonials"},
|
|
{
|
|
name: "Location", id: "contact"},
|
|
]}
|
|
brandName="Gary Rom Man"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="GARY ROM MAN"
|
|
description="Premium grooming experience at Sandton Gate. Where classic skill meets modern style."
|
|
buttons={[
|
|
{
|
|
text: "Book Now", href: "#contact"},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/full-shot-man-getting-haircut_23-2149141753.jpg"
|
|
imageAlt="barbershop interior modern dark"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="Our Story"
|
|
description="Gary Rom Man is a new, upscale sanctuary for the modern man. Located at Sandton Gate, we focus on efficient, top-tier grooming services delivered by master barbers. We believe in providing an experience that leaves you looking sharp and feeling refined."
|
|
imageSrc="http://img.b2bpic.net/free-photo/dog-lifestyle-care-with-owner_23-2149150804.jpg"
|
|
imageAlt="barbershop chair leather vintage"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyNine
|
|
animationType="blur-reveal"
|
|
gridVariant="bento-grid"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
title="Services & Pricing"
|
|
description="Precision cuts, expert shaves, and grooming excellence."
|
|
features={[
|
|
{
|
|
title: "Precision Cut", description: "Customized haircuts tailored to your style.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX7VVyzMcQvVU7wbKnG4fPzBZx/uploaded-1776520373207-6vi2zym0.png", titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX7VVyzMcQvVU7wbKnG4fPzBZx/uploaded-1776520373207-6vi2zym0.png", buttonText: "Book Now"
|
|
},
|
|
{
|
|
title: "Signature Shave", description: "Classic hot towel shave for a smooth finish.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX7VVyzMcQvVU7wbKnG4fPzBZx/uploaded-1776520373207-6vi2zym0.png", titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX7VVyzMcQvVU7wbKnG4fPzBZx/uploaded-1776520373207-6vi2zym0.png", buttonText: "Book Now"
|
|
},
|
|
{
|
|
title: "Beard Grooming", description: "Precision beard shaping and conditioning.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX7VVyzMcQvVU7wbKnG4fPzBZx/uploaded-1776520373207-6vi2zym0.png", titleImageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CX7VVyzMcQvVU7wbKnG4fPzBZx/uploaded-1776520373207-6vi2zym0.png", buttonText: "Book Now"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Ruhan S.", role: "Client", testimonial: "Great service and great shave from Tino.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-haircut-salon_23-2149220568.jpg"},
|
|
{
|
|
id: "2", name: "Joe Z.", role: "Client", testimonial: "Well located, very nice services with efficiency. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/man-getting-haircut-barbershop_23-2148506184.jpg"},
|
|
{
|
|
id: "3", name: "Henco K.", role: "Client", testimonial: "What an experience!!!! Top class service!", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665444.jpg"},
|
|
]}
|
|
title="Client Reviews"
|
|
description="See why we are the top-rated choice in Sandton."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Visit Us"
|
|
title="Sandton Gate, Johannesburg"
|
|
description="Ready for your next cut? Book an appointment now or visit us at our new location."
|
|
buttons={[
|
|
{
|
|
text: "Book Now", href: "#"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/low-angle-man-hair-salon_23-2150665447.jpg"
|
|
logoText="GARY ROM MAN"
|
|
columns={[
|
|
{
|
|
title: "Links", items: [
|
|
{
|
|
label: "About", href: "#about"},
|
|
{
|
|
label: "Services", href: "#services"},
|
|
],
|
|
},
|
|
{
|
|
title: "Social", items: [
|
|
{
|
|
label: "Instagram", href: "#"},
|
|
{
|
|
label: "Facebook", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |