Merge version_1 into main #2
322
src/app/page.tsx
322
src/app/page.tsx
@@ -6,7 +6,6 @@ import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
||||
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
||||
import { Scissors, Star, Users } from "lucide-react";
|
||||
@@ -14,245 +13,102 @@ import { Scissors, Star, Users } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="HAIRSENCE"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="HAIRSENCE"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Premium Mens Grooming in DHA Lahore"
|
||||
description="Professional barbers, pristine environment, and 4.8-star trusted service. Book your appointment in seconds."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now on WhatsApp",
|
||||
href: "https://wa.me/yournumber",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/panoramic-sauna-view-organic-wooden-columns-resort-style-wellness_169016-68883.jpg",
|
||||
imageAlt: "Barbershop interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cutting-client-s-hair_23-2148940861.jpg?_wi=1",
|
||||
imageAlt: "Barber service",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg?_wi=1",
|
||||
imageAlt: "Barber service",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-fleece-shirt-drinks-coffee-hairdresser-s-salon_613910-14707.jpg?_wi=1",
|
||||
imageAlt: "Barber service",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224421.jpg?_wi=1",
|
||||
imageAlt: "Client portrait",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-office-composition-with-businessman_23-2147900162.jpg?_wi=1",
|
||||
imageAlt: "Client portrait",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Premium Mens Grooming in DHA Lahore"
|
||||
description="Professional barbers, pristine environment, and 4.8-star trusted service. Book your appointment in seconds."
|
||||
buttons={[{ text: "Book Now on WhatsApp", href: "https://wa.me/yournumber" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/panoramic-sauna-view-organic-wooden-columns-resort-style-wellness_169016-68883.jpg", imageAlt: "Barbershop interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/man-cutting-client-s-hair_23-2148940861.jpg", imageAlt: "Barber service" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg", imageAlt: "Barber service" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-fleece-shirt-drinks-coffee-hairdresser-s-salon_613910-14707.jpg", imageAlt: "Barber service" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224421.jpg", imageAlt: "Client portrait" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/modern-office-composition-with-businessman_23-2147900162.jpg", imageAlt: "Client portrait" }
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "Precision Haircut",
|
||||
tags: [
|
||||
"Style",
|
||||
"Grooming",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cutting-client-s-hair_23-2148940861.jpg?_wi=2",
|
||||
imageAlt: "Haircut",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "Royal Beard Trim",
|
||||
tags: [
|
||||
"Beard",
|
||||
"Care",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg?_wi=2",
|
||||
imageAlt: "Beard trim",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "Executive Facial",
|
||||
tags: [
|
||||
"Skin",
|
||||
"Care",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-fleece-shirt-drinks-coffee-hairdresser-s-salon_613910-14707.jpg?_wi=2",
|
||||
imageAlt: "Facial",
|
||||
},
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="Experience grooming tailored to your style with expert precision."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ id: "s1", title: "Precision Haircut", tags: ["Style", "Grooming"], imageSrc: "http://img.b2bpic.net/free-photo/man-cutting-client-s-hair_23-2148940861.jpg", imageAlt: "Haircut" },
|
||||
{ id: "s2", title: "Royal Beard Trim", tags: ["Beard", "Care"], imageSrc: "http://img.b2bpic.net/free-photo/side-view-barber-styling-beard-man_23-2147778888.jpg", imageAlt: "Beard trim" },
|
||||
{ id: "s3", title: "Executive Facial", tags: ["Skin", "Care"], imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-fleece-shirt-drinks-coffee-hairdresser-s-salon_613910-14707.jpg", imageAlt: "Facial" }
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="Experience grooming tailored to your style with expert precision."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Ahmed Raza",
|
||||
handle: "@ahmed",
|
||||
testimonial: "Best service in DHA! Professional, hygienic, and perfectly skilled.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224421.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Omar Khan",
|
||||
handle: "@omar",
|
||||
testimonial: "Consistently great experience. The gold standard for grooming in Lahore.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-office-composition-with-businessman_23-2147900162.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Bilal Sheikh",
|
||||
handle: "@bilal",
|
||||
testimonial: "Fast, clean, and exactly what a busy professional needs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-elegantly-dressed-young-man-with-stylish-beard-hair-holding-hand-chin-looking-camera-studio-photo-against-dark-wall-background_613910-20287.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Ali Hassan",
|
||||
handle: "@ali",
|
||||
testimonial: "Finally found a barber who understands modern style. Highly recommended.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-fashion-male-model-man-dressed-elegant-suit-black-studio-lights-background_158538-9670.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Zaid Malik",
|
||||
handle: "@zaid",
|
||||
testimonial: "The attention to detail here is unmatched in the city.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224421.jpg?_wi=3",
|
||||
},
|
||||
]}
|
||||
title="Trusted by 275+ Gentlemen"
|
||||
description="Join our community of satisfied style-conscious men in DHA Lahore."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Ahmed Raza", handle: "@ahmed", testimonial: "Best service in DHA! Professional, hygienic, and perfectly skilled.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224421.jpg" },
|
||||
{ id: "t2", name: "Omar Khan", handle: "@omar", testimonial: "Consistently great experience. The gold standard for grooming in Lahore.", imageSrc: "http://img.b2bpic.net/free-photo/modern-office-composition-with-businessman_23-2147900162.jpg" },
|
||||
{ id: "t3", name: "Bilal Sheikh", handle: "@bilal", testimonial: "Fast, clean, and exactly what a busy professional needs.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-elegantly-dressed-young-man-with-stylish-beard-hair-holding-hand-chin-looking-camera-studio-photo-against-dark-wall-background_613910-20287.jpg" },
|
||||
{ id: "t4", name: "Ali Hassan", handle: "@ali", testimonial: "Finally found a barber who understands modern style. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-sexy-handsome-fashion-male-model-man-dressed-elegant-suit-black-studio-lights-background_158538-9670.jpg" },
|
||||
{ id: "t5", name: "Zaid Malik", handle: "@zaid", testimonial: "The attention to detail here is unmatched in the city.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224421.jpg" }
|
||||
]}
|
||||
title="Trusted by 275+ Gentlemen"
|
||||
description="Join our community of satisfied style-conscious men in DHA Lahore."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Get in Touch"
|
||||
title="Book Your Slot Today"
|
||||
description="Professional salon experience in DHA Phase 6, Lahore. Open daily 9 AM - 10 PM."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/wide-angle-shot-travel-accommodation-hotel-lounge-with-check-reception-desk-stylish-empty-modern-resort-foyer-interior-with-cozy-furniture-warm-fireplace-ready-welcome-tourists_482257-67830.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Submit Inquiry"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get in Touch"
|
||||
title="Book Your Slot Today"
|
||||
description="Professional salon experience in DHA Phase 6, Lahore. Open daily 9 AM - 10 PM."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/wide-angle-shot-travel-accommodation-hotel-lounge-with-check-reception-desk-stylish-empty-modern-resort-foyer-interior-with-cozy-furniture-warm-fireplace-ready-welcome-tourists_482257-67830.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
buttonText="Submit Inquiry"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metric" data-section="metric">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Proven Excellence"
|
||||
description="Our numbers speak for the quality of service we provide every day in DHA."
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
icon: Users,
|
||||
title: "Happy Clients",
|
||||
value: "275+",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
icon: Scissors,
|
||||
title: "Services Performed",
|
||||
value: "1200+",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
icon: Star,
|
||||
title: "Service Rating",
|
||||
value: "4.8/5",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{
|
||||
title: "About Us",
|
||||
items: [
|
||||
{
|
||||
label: "Our Story",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
items: [
|
||||
{
|
||||
label: "WhatsApp Booking",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Location (DHA Lahore)",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
copyrightText="© 2024 HAIRSENCE. All Rights Reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={[
|
||||
{ title: "About Us", items: [{ label: "Our Story", href: "#" }, { label: "Services", href: "#services" }] },
|
||||
{ title: "Contact", items: [{ label: "WhatsApp Booking", href: "#" }, { label: "Location (DHA Lahore)", href: "#" }] }
|
||||
]}
|
||||
copyrightText="© 2024 HAIRSENCE. All Rights Reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user