Files
e0bf51ea-783d-4782-8123-059…/src/app/page.tsx
2026-04-20 08:56:02 +00:00

218 lines
10 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { Star } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="hover-bubble"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="largeSmallSizeLargeTitles"
background="none"
cardStyle="glass-depth"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "Home", id: "hero"},
{
name: "Services", id: "services"},
{
name: "Experience", id: "experience"},
{
name: "Contact", id: "contact"},
]}
brandName="Jeff & Company"
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
background={{
variant: "plain"}}
title="Jeff & Company Grooming"
description="Calm, Gentle Grooming Your Pet Will Love. A trusted, 5-star grooming experience designed to keep your pet relaxed, comfortable, and looking their best."
tag="⭐ 5.0 Rated Grooming Service"
buttons={[
{
text: "Book Now", href: "#contact"},
{
text: "Call Now (07598 206450)", href: "tel:07598206450"},
]}
imageSrc="http://img.b2bpic.net/free-photo/adorable-pet-enjoying-spa-day-illustration_23-2151841570.jpg"
imageAlt="Professional pet groomer smiling with a happy groomed dog"
tagIcon={Star}
/>
</div>
<div id="trust" data-section="trust">
<TestimonialCardTwo
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Sarah J.", role: "Puppy Owner", testimonial: "A paw-fect experience for my puppys first groom.", imageSrc: "http://img.b2bpic.net/free-photo/lovely-pet-portrait-isolated_23-2149192309.jpg"},
{
id: "2", name: "Mark D.", role: "Client", testimonial: "So patient, caring, and professional.", imageSrc: "http://img.b2bpic.net/free-photo/sideways-portrait-chinese-crested-puppy-with-copy-space-background_23-2148326286.jpg"},
{
id: "3", name: "Emily P.", role: "Pet Owner", testimonial: "Jeff is wonderful with my anxious dog, highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-yorkshire-dog_23-2151779155.jpg"},
{
id: "4", name: "Laura K.", role: "Regular Client", testimonial: "Excellent service every time, very happy.", imageSrc: "http://img.b2bpic.net/free-photo/lovely-pet-portrait-isolated_23-2149192304.jpg"},
{
id: "5", name: "David W.", role: "Client", testimonial: "Truly the best local grooming experience.", imageSrc: "http://img.b2bpic.net/free-photo/man-playing-with-his-toy-poodle_23-2147840145.jpg"},
]}
title="Trusted by Pet Owners"
description="Trusted by pet owners across Ruislip for safe, stress-free grooming."
/>
</div>
<div id="services" data-section="services">
<FeatureCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
features={[
{
title: "Full Groom", description: "A complete service including wash, cut, blow-dry, and styling.", imageSrc: "http://img.b2bpic.net/free-vector/several-flat-pet-store-elements_23-2147569069.jpg", imageAlt: "pet grooming dog clean"},
{
title: "Puppy Pamper", description: "A gentle introduction to grooming for first-time visits.", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cute-dog-close-up_23-2148949388.jpg", imageAlt: "puppy bath time gentle"},
{
title: "Maintenance Groom", description: "Keep your pet clean and comfortable between full grooms.", imageSrc: "http://img.b2bpic.net/free-photo/yorkshire-terrier-getting-procedure-groomer-salon-young-woman-white-tshirt-combing-little-dog-yorkshire-terrier-puppy-blue-table_1157-51439.jpg", imageAlt: "dog grooming maintenance"},
{
title: "Bath & Brush", description: "A quick refresh to keep coats clean and healthy.", imageSrc: "http://img.b2bpic.net/free-photo/haircuting-process-small-dog-sits-table-dog-with-professional_1157-48819.jpg", imageAlt: "pet grooming dog clean"},
]}
title="Our Services"
description="Comprehensive grooming solutions for every pet's needs."
/>
</div>
<div id="experience" data-section="experience">
<MetricSplitMediaAbout
useInvertedBackground={false}
title="A Calmer Approach"
description="We focus on a calm, patient, one-to-one approach ensuring every pet feels safe and cared for. Our salon provides a quiet environment, ideal for nervous or first-time pets."
metrics={[
{
value: "1-to-1", title: "Appointments"},
{
value: "Calm", title: "Environment"},
{
value: "Expert", title: "Personalized"},
]}
imageSrc="http://img.b2bpic.net/free-photo/empty-wintertime-luxury-ski-resort_482257-102290.jpg"
imageAlt="pet groomer calm atmosphere"
mediaAnimation="slide-up"
metricsAnimation="slide-up"
/>
</div>
<div id="gallery" data-section="gallery">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="one-large-left-three-stacked-right"
useInvertedBackground={false}
products={[
{
id: "1", name: "Before & After", price: "Groomed", imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-bearded-brutal-tattooed-happy-man-holds-pomeranian-spitz-playing-with-lovely-pet_343596-1531.jpg"},
{
id: "2", name: "Styling", price: "Groomed", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-with-cute-dog_23-2148949395.jpg"},
{
id: "3", name: "Puppy Cut", price: "Groomed", imageSrc: "http://img.b2bpic.net/free-photo/close-up-outdoor-portrait-smiling-girl-with-dark-brown-hair-holding-beagle-dog_197531-4837.jpg"},
{
id: "4", name: "Coat Trim", price: "Groomed", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hand-holding-hat-prop-pug-dog-s-head_23-2147841035.jpg"},
{
id: "5", name: "Full Refresh", price: "Groomed", imageSrc: "http://img.b2bpic.net/free-photo/stylish-pin-up-girl-with-little-dog_1157-18893.jpg"},
{
id: "6", name: "Healthy Coat", price: "Groomed", imageSrc: "http://img.b2bpic.net/free-photo/vertical-portrait-adorable-mixed-breed-dog-blue-wall_181624-35866.jpg"},
]}
title="Happy Pets, Beautiful Results"
description="Take a look at some of our recent grooms and see the care and attention we provide."
/>
</div>
<div id="cta" data-section="cta">
<MetricCardEleven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
metrics={[
{
id: "1", value: "5.0", title: "Rating", description: "Highly Rated", imageSrc: "http://img.b2bpic.net/free-photo/lovely-pet-portrait-isolated_23-2149192305.jpg"},
{
id: "2", value: "Mon-Fri", title: "Hours", description: "9am-5pm", imageSrc: "http://img.b2bpic.net/free-photo/rough-collie-looking-side_181624-45167.jpg"},
{
id: "3", value: "Local", title: "Business", description: "Ruislip Based", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-cute-shih-tzu-dog-red-background_181624-25315.jpg"},
]}
title="Give Your Pet the Care They Deserve"
description="Book today and experience a professional grooming service trusted by local owners."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{
variant: "plain"}}
tag="Visit Us"
title="Book Your Appointment"
description="Greystoke Dr, Ruislip HA4 7YN. Open daily until 5pm. Call us to book."
imageSrc="http://img.b2bpic.net/free-photo/lifestyle-portrait-handsome-smiling-man-sitting-pet-friendly-cafe-with-his-beautiful-dog-petting-golden-retriever-waiting-order_1258-314442.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/high-angle-woman-washing-dog_23-2149872954.jpg"
logoText="Jeff & Company Grooming"
columns={[
{
title: "Contact", items: [
{
label: "Greystoke Dr, Ruislip", href: "#"},
{
label: "07598 206450", href: "tel:07598206450"},
],
},
{
title: "Opening Hours", items: [
{
label: "Mon-Fri: 9am-5pm", href: "#"},
{
label: "Sat: 9am-5pm", href: "#"},
],
},
{
title: "Follow", items: [
{
label: "Instagram", href: "#"},
],
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}