Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 4fb1379de8 | |||
| 5405e0bc30 | |||
| 2aea977758 | |||
| 11dda39653 | |||
| 08553b9967 | |||
| 1e4cf808bb | |||
| 37a0416e5c | |||
| b020bf01ab | |||
| 5ea647f4a7 | |||
| 015e9ce9cd |
255
src/app/page.tsx
255
src/app/page.tsx
@@ -5,11 +5,11 @@ import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
||||
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import { Crown, Scissors, Sparkles } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
@@ -17,165 +17,114 @@ export default function LandingPage() {
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="floatingGradient"
|
||||
cardStyle="inset"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="mediumLargeSizeLargeTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="extrabold"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Lavish Salon DHA"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Lavish Salon DHA"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplit
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Redefining Male Elegance in DHA"
|
||||
description="Experience premium grooming, bespoke haircuts, and skin rejuvenation in our ultra-luxurious salon environment. Lavish Men's Salon sets the standard for modern sophistication."
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205881.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/senior-client-estimating-work-barber-mirror_23-2148181883.jpg", alt: "Client 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg", alt: "Client 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-with-tattooed-arm-wearing-white-shirt_613910-1888.jpg", alt: "Client 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/high-angle-happy-bride-wearing-veil_23-2149722033.jpg", alt: "Client 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/mutual-creative-work-young-beautiful-couple-casual-clothes-aprons-people-creating-bowl-pottery-wheel-clay-studio_1157-40131.jpg", alt: "Client 5" },
|
||||
]}
|
||||
avatarText="Join 500+ satisfied gentlemen"
|
||||
marqueeItems={[
|
||||
{ type: "text", text: "Premium Barbering" },
|
||||
{ type: "text", text: "Skin Care Rituals" },
|
||||
{ type: "text", text: "Luxury Grooming" },
|
||||
{ type: "text", text: "Modern Styling" },
|
||||
{ type: "text", text: "DHA Exclusivity" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardCarousel
|
||||
title="Earthy Elegance for the Modern Gentleman"
|
||||
description="Where timeless tradition meets natural luxury in the heart of DHA. Discover a sanctuary designed for refined grooming and restoration."
|
||||
background={{ variant: "rotated-rays-static-grid" }}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205881.jpg?_wi=1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg?_wi=1" }
|
||||
]}
|
||||
buttons={[{ text: "Explore Services", href: "#features" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TextSplitAbout
|
||||
useInvertedBackground={false}
|
||||
title="Expert Care for the Modern Gentleman"
|
||||
description={[
|
||||
"Lavish Salon is a sanctuary for the modern man, located in the heart of DHA. Our expert stylists merge traditional techniques with contemporary trends to ensure an experience beyond expectation.", "We are committed to quality, hygiene, and the ultimate comfort of our clients."]}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TextAbout
|
||||
title="Rooted in Tradition"
|
||||
tag="Our Philosophy"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Bespoke Haircuts", description: "Precision styling tailored to your face shape and personal preferences.", icon: Scissors,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-getting-beard-trimmed-with-blade_23-2148298344.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/years-one-color-communication-30-35_1296-315.jpg?_wi=1" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Premium Skin Care", description: "Revitalizing facials and treatments that leave your skin refreshed and healthy.", icon: Sparkles,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-lies-beautician-s-table-receives-procedures-light-facial-massage_343596-4218.jpg?_wi=1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-lies-beautician-s-table-receives-procedures-light-facial-massage_343596-4218.jpg?_wi=2" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Hand & Foot Grooming", description: "Complete hand and foot treatments to maintain hygiene and confidence.", icon: Crown,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-getting-manicure-high-angle_23-2149975502.jpg?_wi=1" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-getting-manicure-high-angle_23-2149975502.jpg?_wi=2" },
|
||||
]
|
||||
},
|
||||
]}
|
||||
title="Tailored Services"
|
||||
description="A comprehensive suite of grooming services designed specifically for your unique style."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
title="Tailored Grooming Rituals"
|
||||
description="Precision care designed to align with your natural aesthetic."
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Bespoke Haircuts", description: "Sculpted to reflect your unique character.", icon: Scissors, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205881.jpg?_wi=2" }, { imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg?_wi=2" }] },
|
||||
{ title: "Organic Facials", description: "Restorative treatments using earth-derived ingredients.", icon: Sparkles, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205881.jpg?_wi=3" }, { imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg?_wi=3" }] },
|
||||
{ title: "Man-Scaping", description: "Comprehensive grooming for the complete gentleman.", icon: Crown, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205881.jpg?_wi=4" }, { imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg?_wi=4" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "basic", price: "$35", name: "Essential Grooming", buttons: [{ text: "Book Now", href: "#contact" }],
|
||||
features: ["Haircut", "Beard Trim", "Scalp Massage"],
|
||||
},
|
||||
{
|
||||
id: "pro", price: "$60", name: "Lavish Refresh", buttons: [{ text: "Book Now", href: "#contact" }],
|
||||
features: ["Haircut & Styling", "Deep Cleansing Facial", "Hot Towel Shave"],
|
||||
},
|
||||
{
|
||||
id: "elite", price: "$95", name: "Ultimate Gentleman", buttons: [{ text: "Book Now", href: "#contact" }],
|
||||
features: ["Full Grooming Package", "Premium Facial", "Manicure & Pedicure"],
|
||||
},
|
||||
]}
|
||||
title="Premium Grooming Packages"
|
||||
description="Transparent pricing for our signature grooming services."
|
||||
/>
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
title="Signature Packages"
|
||||
description="Transparent, curated experiences for every lifestyle."
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "essentials", badge: "Essential", price: "$45", subtitle: "The Daily Refinement", features: ["Classic Haircut", "Beard Detail", "Hot Towel Finish"], buttons: [{ text: "Select", href: "#contact" }] },
|
||||
{ id: "lavish", badge: "Popular", price: "$85", subtitle: "Signature Experience", features: ["Bespoke Haircut", "Organic Facial", "Hand Grooming"], buttons: [{ text: "Select", href: "#contact" }] },
|
||||
{ id: "elite", badge: "Premium", price: "$130", subtitle: "The Full Ritual", features: ["Complete Restorative Care", "Advanced Skincare", "Extended Styling"], buttons: [{ text: "Select", href: "#contact" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Ahmed Khan", date: "12 Jan 2024", title: "Regular Client", quote: "The best haircut I have ever had. Professional service and great ambience.", tag: "Haircuts", avatarSrc: "http://img.b2bpic.net/free-photo/senior-client-estimating-work-barber-mirror_23-2148181883.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-lies-beautician-s-table-receives-procedures-light-facial-massage_343596-4218.jpg?_wi=3"},
|
||||
{
|
||||
id: "2", name: "Omar Raza", date: "15 Feb 2024", title: "Business Professional", quote: "Top-tier grooming. Their facial treatments are genuinely relaxing.", tag: "Facial", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg", imageSrc: "http://img.b2bpic.net/free-photo/man-getting-manicure-high-angle_23-2149975502.jpg?_wi=3"},
|
||||
{
|
||||
id: "3", name: "Zaid Ali", date: "05 Mar 2024", title: "Frequent Visitor", quote: "Excellent service and very hygienic. Highly recommended for DHA residents.", tag: "General", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-with-tattooed-arm-wearing-white-shirt_613910-1888.jpg", imageSrc: "http://img.b2bpic.net/free-photo/years-one-color-communication-30-35_1296-315.jpg?_wi=2"},
|
||||
{
|
||||
id: "4", name: "Bilal Ahmed", date: "20 Mar 2024", title: "New Client", quote: "Found my new barber shop! Lavish is truly the best in class.", tag: "Haircuts", avatarSrc: "http://img.b2bpic.net/free-photo/high-angle-happy-bride-wearing-veil_23-2149722033.jpg", imageSrc: "http://img.b2bpic.net/free-photo/senior-client-estimating-work-barber-mirror_23-2148181883.jpg"},
|
||||
{
|
||||
id: "5", name: "Hassan Raza", date: "02 Apr 2024", title: "Business Owner", quote: "Absolutely worth every penny. The attention to detail is unmatched.", tag: "Luxury", avatarSrc: "http://img.b2bpic.net/free-photo/mutual-creative-work-young-beautiful-couple-casual-clothes-aprons-people-creating-bowl-pottery-wheel-clay-studio_1157-40131.jpg", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg"},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Discover why DHA trusts Lavish Men's Salon with their style."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTen
|
||||
title="Voices of Refinement"
|
||||
description="What our guests say about their journey with us."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Exceptional", quote: "A truly grounded experience that feels like home in the middle of DHA.", name: "Ahmed Khan", role: "Entrepreneur" },
|
||||
{ id: "2", title: "Unmatched", quote: "The blend of service and the earthy atmosphere is unlike any other.", name: "Omar Raza", role: "Professional" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Book Your Visit"
|
||||
description="Ready for a transformation? Secure your spot today."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Special requests or preferred service?", rows: 4 }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-business-owners-preparing-their-store_23-2149300881.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
title="Secure Your Sanctuary"
|
||||
description="Reserve your time for an elevated grooming experience."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email", required: true }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205881.jpg?_wi=5"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Lavish Salon DHA"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Lavish Salon DHA"
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f4ef;
|
||||
--card: #dad6cd;
|
||||
--foreground: #2a2928;
|
||||
--primary-cta: #2a2928;
|
||||
--card: #efe7dd;
|
||||
--foreground: #2b180a;
|
||||
--primary-cta: #2b180a;
|
||||
--primary-cta-text: #f5f4ef;
|
||||
--secondary-cta: #ecebea;
|
||||
--secondary-cta: #efe7dd;
|
||||
--secondary-cta-text: #2a2928;
|
||||
--accent: #ffffff;
|
||||
--background-accent: #c6b180;
|
||||
--accent: #94877c;
|
||||
--background-accent: #afa094;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user