4 Commits

Author SHA1 Message Date
5258d22232 Update theme colors 2026-04-08 02:40:01 +00:00
060b8185de Update src/app/page.tsx 2026-04-08 02:38:59 +00:00
0bf2f306e4 Update src/app/page.tsx 2026-04-08 02:38:33 +00:00
7ecc8cba59 Update src/app/page.tsx 2026-04-08 02:37:59 +00:00
2 changed files with 96 additions and 228 deletions

View File

@@ -2,13 +2,13 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react"; import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA'; import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight'; import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterCard from '@/components/sections/footer/FooterCard'; import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel'; import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import PricingCardOne from '@/components/sections/pricing/PricingCardOne'; import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo'; import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
export default function LandingPage() { export default function LandingPage() {
return ( return (
@@ -19,236 +19,104 @@ export default function LandingPage() {
contentWidth="compact" contentWidth="compact"
sizing="largeSmallSizeMediumTitles" sizing="largeSmallSizeMediumTitles"
background="blurBottom" background="blurBottom"
cardStyle="glass-depth" cardStyle="glass-elevated"
primaryButtonStyle="radial-glow" primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid" secondaryButtonStyle="solid"
headingFontWeight="normal" headingFontWeight="semibold"
> >
<ReactLenis root> <ReactLenis root>
<div id="nav" data-section="nav"> <div id="nav" data-section="nav">
<NavbarStyleApple <NavbarStyleApple
navItems={[ navItems={[
{ { name: "Home", id: "hero" },
name: "Home", { name: "Features", id: "features" },
id: "hero", { name: "Pricing", id: "pricing" },
}, { name: "Reviews", id: "testimonials" },
{ { name: "Contact", id: "contact" },
name: "Services", ]}
id: "features", brandName="Wicked Clipper"
}, />
{ </div>
name: "Pricing",
id: "pricing",
},
{
name: "Reviews",
id: "testimonials",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="Wicked Clipper"
/>
</div>
<div id="hero" data-section="hero"> <div id="hero" data-section="hero">
<HeroBillboardRotatedCarousel <HeroBillboardRotatedCarousel
background={{ background={{ variant: "rotated-rays-static" }}
variant: "rotated-rays-static", title="Precision Grooming Redefined"
}} description="Experience top-tier grooming services tailored to your style. Expert care, classic techniques, and modern precision."
title="Precision Grooming Redefined" buttons={[{ text: "Book Appointment", href: "#contact" }]}
description="Experience top-tier grooming services tailored to your style. Expert care, classic techniques, and modern precision." carouselItems={[
buttons={[ { id: "1", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg?_wi=1", imageAlt: "Barbershop interior" },
{ { id: "2", imageSrc: "http://img.b2bpic.net/free-photo/close-up-asmr-recording_23-2149313884.jpg", imageAlt: "Barber tools" },
text: "Book Appointment", { id: "3", imageSrc: "http://img.b2bpic.net/free-photo/content-client-hairdresser-salon_23-2147769866.jpg", imageAlt: "Satisfied client" },
href: "#contact", { id: "4", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167448.jpg?_wi=1", imageAlt: "Barbershop interior" },
}, { id: "5", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-getting-haircut_23-2148506230.jpg?_wi=1", imageAlt: "Precision styling" },
]} { id: "6", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-zero-waste-concept_23-2148591668.jpg", imageAlt: "Grooming kit" },
carouselItems={[ ]}
{ />
id: "1", </div>
imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg",
imageAlt: "Barbershop interior",
},
{
id: "2",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-asmr-recording_23-2149313884.jpg",
imageAlt: "Barber tools",
},
{
id: "3",
imageSrc: "http://img.b2bpic.net/free-photo/content-client-hairdresser-salon_23-2147769866.jpg",
imageAlt: "Satisfied client",
},
{
id: "4",
imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167448.jpg",
imageAlt: "Barbershop interior",
},
{
id: "5",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-getting-haircut_23-2148506230.jpg",
imageAlt: "Precision styling",
},
{
id: "6",
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-zero-waste-concept_23-2148591668.jpg",
imageAlt: "Grooming kit",
},
]}
/>
</div>
<div id="features" data-section="features"> <div id="features" data-section="features">
<FeatureCardTwentyEight <FeatureCardThree
animationType="slide-up" title="Why Choose Wicked Clipper"
textboxLayout="split" description="Our services blend tradition with cutting-edge styling."
useInvertedBackground={false} gridVariant="bento-grid"
features={[ animationType="blur-reveal"
{ textboxLayout="split"
id: "f1", useInvertedBackground={false}
title: "Expert Styling", features={[
subtitle: "Trained professionals", { title: "Expert Styling", description: "Trained professionals delivering excellence.", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-tools-arrangement_23-2149167448.jpg?_wi=2" },
category: "Service", { title: "Modern Tools", description: "Precision equipment for refined results.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-getting-haircut_23-2148506230.jpg?_wi=2" },
value: "Elite", { title: "Classic Vibe", description: "Traditional atmosphere meeting contemporary needs.", imageSrc: "http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg?_wi=2" },
}, ]}
{ />
id: "f2", </div>
title: "Modern Tools",
subtitle: "Precision equipment",
category: "Tech",
value: "Top",
},
{
id: "f3",
title: "Classic Vibe",
subtitle: "Traditional atmosphere",
category: "Experience",
value: "Best",
},
]}
title="Why Choose Wicked Clipper"
description="Our services blend tradition with cutting-edge styling."
/>
</div>
<div id="pricing" data-section="pricing"> <div id="pricing" data-section="pricing">
<PricingCardOne <PricingCardEight
animationType="slide-up" title="Grooming Packages"
textboxLayout="split" description="Simple pricing for superior results."
useInvertedBackground={true} animationType="blur-reveal"
plans={[ textboxLayout="split"
{ useInvertedBackground={false}
id: "p1", plans={[
badge: "Basic", { id: "p1", badge: "Basic", price: "$30", subtitle: "Standard Cut & Trim", buttons: [{ text: "Select" }], features: ["Haircut", "Neck trim"] },
price: "$30", { id: "p2", badge: "Premium", price: "$50", subtitle: "Full Grooming Experience", buttons: [{ text: "Select" }], features: ["Haircut", "Beard trim", "Hot towel"] },
subtitle: "Standard Cut & Trim", { id: "p3", badge: "Elite", price: "$80", subtitle: "The Ultimate Refinement", buttons: [{ text: "Select" }], features: ["Full service", "Scalp treatment", "Facial massage"] },
features: [ ]}
"Haircut", />
"Neck trim", </div>
],
},
{
id: "p2",
badge: "Premium",
price: "$50",
subtitle: "Full Grooming Experience",
features: [
"Haircut",
"Beard trim",
"Hot towel",
],
},
{
id: "p3",
badge: "Elite",
price: "$80",
subtitle: "The Ultimate Refinement",
features: [
"Full service",
"Scalp treatment",
"Facial massage",
],
},
]}
title="Grooming Packages"
description="Simple pricing for superior results."
/>
</div>
<div id="testimonials" data-section="testimonials"> <div id="testimonials" data-section="testimonials">
<TestimonialCardTwo <TestimonialCardFifteen
animationType="slide-up" testimonial="The best haircut I've had in years. Professional and clean."
textboxLayout="split" rating={5}
useInvertedBackground={false} author="John Doe"
testimonials={[ ratingAnimation="blur-reveal"
{ avatarsAnimation="blur-reveal"
id: "t1", useInvertedBackground={false}
name: "John Doe", avatars={[{ src: "http://img.b2bpic.net/free-photo/cuddling-pet_1098-14675.jpg", alt: "John Doe" }]}
role: "Architect", />
testimonial: "The best haircut I've had in years. Professional and clean.", </div>
imageSrc: "http://img.b2bpic.net/free-photo/cuddling-pet_1098-14675.jpg",
},
{
id: "t2",
name: "Jane Smith",
role: "Designer",
testimonial: "I love the vibe here. Always on point with trends.",
imageSrc: "http://img.b2bpic.net/free-photo/barber-giving-high-five-client_23-2147737095.jpg",
},
{
id: "t3",
name: "Bob Miller",
role: "Tech Lead",
testimonial: "Consistent, clean, and fast. Wicked Clipper is my go-to.",
imageSrc: "http://img.b2bpic.net/free-photo/african-american-young-man-wearing-jacket-checkered-shirt-looking-camera-studio_613910-21142.jpg",
},
{
id: "t4",
name: "Sam Wilson",
role: "Chef",
testimonial: "Great service, relaxed atmosphere. Always leave happy.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-doctor-checking-dog_23-2149271818.jpg",
},
{
id: "t5",
name: "Mike Ross",
role: "Lawyer",
testimonial: "Top quality precision. Highly recommend for any business look.",
imageSrc: "http://img.b2bpic.net/free-photo/man-hair-salon-looking-sideways_23-2148242781.jpg",
},
]}
title="Trusted by Locals"
description="See why our clients choose Wicked Clipper."
/>
</div>
<div id="contact" data-section="contact"> <div id="contact" data-section="contact">
<ContactCTA <ContactSplit
useInvertedBackground={true} tag="Booking"
background={{ title="Ready for your next cut?"
variant: "sparkles-gradient", description="Get in touch or book online today."
}} background={{ variant: "sparkles-gradient" }}
tag="Booking" useInvertedBackground={false}
title="Ready for your next cut?" imageSrc="http://img.b2bpic.net/free-photo/barber-giving-high-five-client_23-2147737095.jpg"
description="Get in touch or book online today." />
buttons={[ </div>
{
text: "Book Appointment",
href: "#",
},
]}
/>
</div>
<div id="footer" data-section="footer"> <div id="footer" data-section="footer">
<FooterCard <FooterMedia
logoText="Wicked Clipper" logoText="Wicked Clipper"
copyrightText="© 2025 Wicked Clipper. All rights reserved." columns={[{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Privacy", href: "#" }] }]}
/> copyrightText="© 2025 Wicked Clipper. All rights reserved."
</div> imageSrc="http://img.b2bpic.net/free-photo/barber-shop-retro-vintage-style_1150-17931.jpg?_wi=3"
/>
</div>
</ReactLenis> </ReactLenis>
</ThemeProvider> </ThemeProvider>
); );

View File

@@ -12,11 +12,11 @@
--background: #ffffff; --background: #ffffff;
--card: #f9f9f9; --card: #f9f9f9;
--foreground: #000612e6; --foreground: #000f06e6;
--primary-cta: #15479c; --primary-cta: #0a7039;
--primary-cta-text: #ffffff; --primary-cta-text: #ffffff;
--secondary-cta: #f9f9f9; --secondary-cta: #f9f9f9;
--secondary-cta-text: #000612e6; --secondary-cta-text: #000f06e6;
--accent: #e2e2e2; --accent: #e2e2e2;
--background-accent: #c4c4c4; --background-accent: #c4c4c4;