Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5258d22232 | |||
| 060b8185de | |||
| 0bf2f306e4 | |||
| 7ecc8cba59 |
318
src/app/page.tsx
318
src/app/page.tsx
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user