Files
e0bf51ea-783d-4782-8123-059…/src/app/page.tsx
2026-04-23 09:18:06 +00:00

120 lines
4.8 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import AboutMetric from '@/components/sections/about/AboutMetric';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import ContactText from '@/components/sections/contact/ContactText';
import { Star, MapPin, Phone } 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: "About", id: "experience" },
{ name: "Services", id: "services" },
{ 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", 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="experience" data-section="experience">
<AboutMetric
title="About Our Gentle Approach"
metrics={[
{ icon: Star, label: "Rating", value: "5.0 Star" },
{ icon: MapPin, label: "Location", value: "Ruislip" },
{ icon: Phone, label: "Support", value: "07598 206450" },
]}
metricsAnimation="slide-up"
useInvertedBackground={false}
/>
</div>
<div id="services" data-section="services">
<FeatureCardSeven
animationType="slide-up"
textboxLayout="split"
useInvertedBackground={false}
title="Our Services"
description="Comprehensive, stress-free grooming packages tailored to your pet's temperament."
features={[
{ title: "Full Groom", description: "Complete wash, cut, and style.", imageSrc: "http://img.b2bpic.net/free-vector/several-flat-pet-store-elements_23-2147569069.jpg" },
{ title: "Puppy Pamper", description: "Gentle introduction for new pets.", imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-cute-dog-close-up_23-2148949388.jpg" },
{ title: "Maintenance", description: "Keep them clean between 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" },
]}
/>
</div>
<div id="trust" data-section="trust">
<TestimonialCardSix
animationType="slide-up"
title="What Pet Owners Say"
textboxLayout="split"
useInvertedBackground={false}
testimonials={[
{ id: "1", name: "Sarah J.", handle: "@puppyowner", testimonial: "The best grooming experience in Ruislip!" },
{ id: "2", name: "Mark D.", handle: "@client", testimonial: "So patient with my nervous dog." },
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to pamper your pet? Book your appointment today and see the difference a calm, loving touch makes."
background={{ variant: "plain" }}
buttons={[{ text: "Call 07598 206450", href: "tel:07598206450" }]}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseReveal
logoText="Jeff & Company"
columns={[
{ title: "Location", items: [{ label: "Ruislip, Greater London", href: "#" }] },
{ title: "Contact", items: [{ label: "07598 206450", href: "tel:07598206450" }] },
{ title: "Hours", items: [{ label: "Mon-Fri: 9-5", href: "#" }] },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}