Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 5405e0bc30 | |||
| 11dda39653 | |||
| 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 ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||||
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
||||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
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 NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||||
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
import TextAbout from '@/components/sections/about/TextAbout';
|
||||||
import { Crown, Scissors, Sparkles } from "lucide-react";
|
import { Crown, Scissors, Sparkles } from "lucide-react";
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
@@ -17,165 +17,114 @@ export default function LandingPage() {
|
|||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="expand-hover"
|
defaultButtonVariant="expand-hover"
|
||||||
defaultTextAnimation="reveal-blur"
|
defaultTextAnimation="reveal-blur"
|
||||||
borderRadius="rounded"
|
borderRadius="soft"
|
||||||
contentWidth="mediumSmall"
|
contentWidth="medium"
|
||||||
sizing="large"
|
sizing="mediumLargeSizeLargeTitles"
|
||||||
background="floatingGradient"
|
background="noiseDiagonalGradient"
|
||||||
cardStyle="inset"
|
cardStyle="glass-elevated"
|
||||||
primaryButtonStyle="diagonal-gradient"
|
primaryButtonStyle="diagonal-gradient"
|
||||||
secondaryButtonStyle="layered"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="extrabold"
|
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: "home" },
|
{ name: "Home", id: "home" },
|
||||||
{ name: "About", id: "about" },
|
{ name: "About", id: "about" },
|
||||||
{ name: "Services", id: "features" },
|
{ name: "Services", id: "features" },
|
||||||
{ name: "Pricing", id: "pricing" },
|
{ name: "Pricing", id: "pricing" },
|
||||||
{ name: "Testimonials", id: "testimonials" },
|
{ name: "Testimonials", id: "testimonials" },
|
||||||
{ name: "Contact", id: "contact" },
|
{ name: "Contact", id: "contact" },
|
||||||
]}
|
]}
|
||||||
brandName="Lavish Salon DHA"
|
brandName="Lavish Salon DHA"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="home" data-section="home">
|
<div id="home" data-section="home">
|
||||||
<HeroSplit
|
<HeroBillboardCarousel
|
||||||
background={{ variant: "gradient-bars" }}
|
title="Earthy Elegance for the Modern Gentleman"
|
||||||
title="Redefining Male Elegance in DHA"
|
description="Where timeless tradition meets natural luxury in the heart of DHA. Discover a sanctuary designed for refined grooming and restoration."
|
||||||
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."
|
background={{ variant: "rotated-rays-static-grid" }}
|
||||||
buttons={[{ text: "Book Appointment", href: "#contact" }]}
|
mediaItems={[
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205881.jpg"
|
{ imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205881.jpg?_wi=1" },
|
||||||
mediaAnimation="slide-up"
|
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-black-suit_23-2148401442.jpg?_wi=1" }
|
||||||
avatars={[
|
]}
|
||||||
{ src: "http://img.b2bpic.net/free-photo/senior-client-estimating-work-barber-mirror_23-2148181883.jpg", alt: "Client 1" },
|
buttons={[{ text: "Explore Services", href: "#features" }]}
|
||||||
{ 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" },
|
</div>
|
||||||
{ 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="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<TextSplitAbout
|
<TextAbout
|
||||||
useInvertedBackground={false}
|
title="Rooted in Tradition"
|
||||||
title="Expert Care for the Modern Gentleman"
|
tag="Our Philosophy"
|
||||||
description={[
|
useInvertedBackground={false}
|
||||||
"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>
|
|
||||||
|
|
||||||
<div id="features" data-section="features">
|
<div id="features" data-section="features">
|
||||||
<FeatureCardTwentyFive
|
<FeatureCardTwentyFive
|
||||||
animationType="slide-up"
|
title="Tailored Grooming Rituals"
|
||||||
textboxLayout="split"
|
description="Precision care designed to align with your natural aesthetic."
|
||||||
useInvertedBackground={true}
|
animationType="blur-reveal"
|
||||||
features={[
|
textboxLayout="split"
|
||||||
{
|
useInvertedBackground={true}
|
||||||
title: "Bespoke Haircuts", description: "Precision styling tailored to your face shape and personal preferences.", icon: Scissors,
|
features={[
|
||||||
mediaItems: [
|
{ 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" }] },
|
||||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-getting-beard-trimmed-with-blade_23-2148298344.jpg" },
|
{ 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" }] },
|
||||||
{ imageSrc: "http://img.b2bpic.net/free-photo/years-one-color-communication-30-35_1296-315.jpg?_wi=1" },
|
{ 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>
|
||||||
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="pricing" data-section="pricing">
|
<div id="pricing" data-section="pricing">
|
||||||
<PricingCardThree
|
<PricingCardEight
|
||||||
animationType="slide-up"
|
title="Signature Packages"
|
||||||
textboxLayout="split"
|
description="Transparent, curated experiences for every lifestyle."
|
||||||
useInvertedBackground={false}
|
animationType="slide-up"
|
||||||
plans={[
|
textboxLayout="split"
|
||||||
{
|
useInvertedBackground={false}
|
||||||
id: "basic", price: "$35", name: "Essential Grooming", buttons: [{ text: "Book Now", href: "#contact" }],
|
plans={[
|
||||||
features: ["Haircut", "Beard Trim", "Scalp Massage"],
|
{ 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" }] }
|
||||||
id: "pro", price: "$60", name: "Lavish Refresh", buttons: [{ text: "Book Now", href: "#contact" }],
|
]}
|
||||||
features: ["Haircut & Styling", "Deep Cleansing Facial", "Hot Towel Shave"],
|
/>
|
||||||
},
|
</div>
|
||||||
{
|
|
||||||
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="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardFive
|
<TestimonialCardTen
|
||||||
textboxLayout="split"
|
title="Voices of Refinement"
|
||||||
useInvertedBackground={true}
|
description="What our guests say about their journey with us."
|
||||||
testimonials={[
|
textboxLayout="split"
|
||||||
{
|
useInvertedBackground={true}
|
||||||
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"},
|
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", 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: "2", title: "Unmatched", quote: "The blend of service and the earthy atmosphere is unlike any other.", name: "Omar Raza", role: "Professional" }
|
||||||
{
|
]}
|
||||||
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"},
|
/>
|
||||||
{
|
</div>
|
||||||
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="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactSplitForm
|
<ContactSplitForm
|
||||||
useInvertedBackground={false}
|
title="Secure Your Sanctuary"
|
||||||
title="Book Your Visit"
|
description="Reserve your time for an elevated grooming experience."
|
||||||
description="Ready for a transformation? Secure your spot today."
|
inputs={[
|
||||||
inputs={[
|
{ name: "name", type: "text", placeholder: "Name", required: true },
|
||||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
{ name: "email", type: "email", placeholder: "Email", required: true }
|
||||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
]}
|
||||||
]}
|
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205881.jpg?_wi=5"
|
||||||
textarea={{ name: "message", placeholder: "Special requests or preferred service?", rows: 4 }}
|
useInvertedBackground={false}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/young-business-owners-preparing-their-store_23-2149300881.jpg"
|
/>
|
||||||
mediaAnimation="slide-up"
|
</div>
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterLogoReveal
|
<FooterLogoReveal
|
||||||
logoText="Lavish Salon DHA"
|
logoText="Lavish Salon DHA"
|
||||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||||
rightLink={{ text: "Terms of Service", href: "#" }}
|
rightLink={{ text: "Terms of Service", href: "#" }}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -11,14 +11,14 @@
|
|||||||
--background-accent: #ffffff; */
|
--background-accent: #ffffff; */
|
||||||
|
|
||||||
--background: #f5f4ef;
|
--background: #f5f4ef;
|
||||||
--card: #dad6cd;
|
--card: #efe7dd;
|
||||||
--foreground: #2a2928;
|
--foreground: #2b180a;
|
||||||
--primary-cta: #2a2928;
|
--primary-cta: #2b180a;
|
||||||
--primary-cta-text: #f5f4ef;
|
--primary-cta-text: #f5f4ef;
|
||||||
--secondary-cta: #ecebea;
|
--secondary-cta: #efe7dd;
|
||||||
--secondary-cta-text: #2a2928;
|
--secondary-cta-text: #2a2928;
|
||||||
--accent: #ffffff;
|
--accent: #94877c;
|
||||||
--background-accent: #c6b180;
|
--background-accent: #afa094;
|
||||||
|
|
||||||
/* text sizing - set by ThemeProvider */
|
/* text sizing - set by ThemeProvider */
|
||||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||||
|
|||||||
Reference in New Issue
Block a user