Merge version_1 into main #1
421
src/app/page.tsx
421
src/app/page.tsx
@@ -18,308 +18,145 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="text-stagger"
|
||||
defaultTextAnimation="background-highlight"
|
||||
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">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Glow Beauty Salon"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Glow Beauty Salon"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
title="Glow Beauty Salon"
|
||||
description="Your beauty, our duty. Experience world-class beauty services in a calming and luxurious environment."
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fuzzy-room-with-armchairs_1203-958.jpg",
|
||||
imageAlt: "Salon Interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-asmr-microphone-with-make-up-brushes_23-2149319261.jpg",
|
||||
imageAlt: "Professional Makeup",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/wellness-concept-with-woman-massage-salon_23-2147816971.jpg",
|
||||
imageAlt: "Skincare Treatment",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cozy-spa-composition-with-aroma-diffuser-candle-flowers_169016-26840.jpg",
|
||||
imageAlt: "Hair Styling",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serene-minimalist-spa-interior-meditation-space_23-2151935120.jpg",
|
||||
imageAlt: "Beauty Tools",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-female-friends-indulging-skin-care_23-2148655787.jpg",
|
||||
imageAlt: "Salon Staff",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Glow Beauty Salon"
|
||||
description="Your beauty, our duty. Experience world-class beauty services in a calming and luxurious environment."
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/fuzzy-room-with-armchairs_1203-958.jpg", imageAlt: "Salon Interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-asmr-microphone-with-make-up-brushes_23-2149319261.jpg", imageAlt: "Professional Makeup" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/wellness-concept-with-woman-massage-salon_23-2147816971.jpg", imageAlt: "Skincare Treatment" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/cozy-spa-composition-with-aroma-diffuser-candle-flowers_169016-26840.jpg", imageAlt: "Hair Styling" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/serene-minimalist-spa-interior-meditation-space_23-2151935120.jpg", imageAlt: "Beauty Tools" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-female-friends-indulging-skin-care_23-2148655787.jpg", imageAlt: "Salon Staff" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Facial",
|
||||
price: "Rs 2000",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-beauty-salon-interior_23-2148910541.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Haircut",
|
||||
price: "Rs 1000",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/comparison-different-types-brush-strokes_23-2150105277.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Makeup",
|
||||
price: "Rs 5000",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teen-girl-with-healthy-oily-skin_633478-70.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Manicure",
|
||||
price: "Rs 1500",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/spa-treatment-dark-wall_176420-11893.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Pedicure",
|
||||
price: "Rs 1800",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/makeup-brush-compact-blusher_23-2148208961.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Waxing",
|
||||
price: "Rs 800",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/empty-startup-coworking-space-with-office-workspaces-computers-professional-business-space-company-department-spacious-agency-building-interior-modern-executive-environment_482257-67835.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Explore our wide range of professional beauty services."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "p1", name: "Facial", price: "Rs 2000", imageSrc: "http://img.b2bpic.net/free-photo/modern-beauty-salon-interior_23-2148910541.jpg" },
|
||||
{ id: "p2", name: "Haircut", price: "Rs 1000", imageSrc: "http://img.b2bpic.net/free-photo/comparison-different-types-brush-strokes_23-2150105277.jpg" },
|
||||
{ id: "p3", name: "Makeup", price: "Rs 5000", imageSrc: "http://img.b2bpic.net/free-photo/teen-girl-with-healthy-oily-skin_633478-70.jpg" },
|
||||
{ id: "p4", name: "Manicure", price: "Rs 1500", imageSrc: "http://img.b2bpic.net/free-photo/spa-treatment-dark-wall_176420-11893.jpg" },
|
||||
{ id: "p5", name: "Pedicure", price: "Rs 1800", imageSrc: "http://img.b2bpic.net/free-photo/makeup-brush-compact-blusher_23-2148208961.jpg" },
|
||||
{ id: "p6", name: "Waxing", price: "Rs 800", imageSrc: "http://img.b2bpic.net/free-photo/empty-startup-coworking-space-with-office-workspaces-computers-professional-business-space-company-department-spacious-agency-building-interior-modern-executive-environment_482257-67835.jpg" },
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Explore our wide range of professional beauty services."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
members={[
|
||||
{
|
||||
id: "m1",
|
||||
name: "Sarah",
|
||||
role: "Head Stylist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-female-holding-few-makeup-brushes-table_23-2148113077.jpg",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
name: "Anna",
|
||||
role: "Senior Makeup Artist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-orange-dough-fingers_1208-321.jpg",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
name: "Emma",
|
||||
role: "Skincare Expert",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67053.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our Experts"
|
||||
description="Meet our professional team dedicated to your beauty."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
members={[
|
||||
{ id: "m1", name: "Sarah", role: "Head Stylist", imageSrc: "http://img.b2bpic.net/free-photo/young-female-holding-few-makeup-brushes-table_23-2148113077.jpg" },
|
||||
{ id: "m2", name: "Anna", role: "Senior Makeup Artist", imageSrc: "http://img.b2bpic.net/free-photo/woman-with-orange-dough-fingers_1208-321.jpg" },
|
||||
{ id: "m3", name: "Emma", role: "Skincare Expert", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67053.jpg" },
|
||||
]}
|
||||
title="Our Experts"
|
||||
description="Meet our professional team dedicated to your beauty."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah",
|
||||
role: "Loyal Client",
|
||||
testimonial: "Excellent service and very relaxing!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-beauty-salon-looking-into-mirror_1303-16737.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "John",
|
||||
role: "First-time Client",
|
||||
testimonial: "Loved the haircut! Highly recommended.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-getting-haircut_23-2149220548.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Emily",
|
||||
role: "Regular",
|
||||
testimonial: "Best facial I've ever had.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-relaxing-spa-salon_176420-14869.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Mark",
|
||||
role: "Client",
|
||||
testimonial: "Great experience, very professional staff.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girls-relaxing_1098-14662.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Lucy",
|
||||
role: "Loyal Client",
|
||||
testimonial: "Amazing makeup services for my event.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230959.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Reviews"
|
||||
description="Hear what our clients have to say about us."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah", role: "Loyal Client", testimonial: "Excellent service and very relaxing!", imageSrc: "http://img.b2bpic.net/free-photo/woman-beauty-salon-looking-into-mirror_1303-16737.jpg" },
|
||||
{ id: "t2", name: "John", role: "First-time Client", testimonial: "Loved the haircut! Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-getting-haircut_23-2149220548.jpg" },
|
||||
{ id: "t3", name: "Emily", role: "Regular", testimonial: "Best facial I've ever had.", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-relaxing-spa-salon_176420-14869.jpg" },
|
||||
{ id: "t4", name: "Mark", role: "Client", testimonial: "Great experience, very professional staff.", imageSrc: "http://img.b2bpic.net/free-photo/girls-relaxing_1098-14662.jpg" },
|
||||
{ id: "t5", name: "Lucy", role: "Loyal Client", testimonial: "Amazing makeup services for my event.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230959.jpg" },
|
||||
]}
|
||||
title="Client Reviews"
|
||||
description="Hear what our clients have to say about us."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Yes, booking in advance is recommended.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Are walk-ins accepted?",
|
||||
content: "We try our best to accommodate walk-ins, but appointments are prioritized.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "What payment methods do you accept?",
|
||||
content: "We accept cash and bank transfers.",
|
||||
},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Have questions? We've got answers."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Do I need an appointment?", content: "Yes, booking in advance is recommended." },
|
||||
{ id: "q2", title: "Are walk-ins accepted?", content: "We try our best to accommodate walk-ins, but appointments are prioritized." },
|
||||
{ id: "q3", title: "What payment methods do you accept?", content: "We accept cash and bank transfers." },
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="Have questions? We've got answers."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "10+",
|
||||
title: "Years Experience",
|
||||
items: [
|
||||
"Serving beauty",
|
||||
"Expert staff",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "5k+",
|
||||
title: "Happy Clients",
|
||||
items: [
|
||||
"Satisfied",
|
||||
"Repeatedly visited",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
title: "Satisfaction",
|
||||
items: [
|
||||
"Guaranteed quality",
|
||||
"Best results",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Salon Stats"
|
||||
description="Our commitment to quality service."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "10+", title: "Years Experience", items: ["Serving beauty", "Expert staff"] },
|
||||
{ id: "m2", value: "5k+", title: "Happy Clients", items: ["Satisfied", "Repeatedly visited"] },
|
||||
{ id: "m3", value: "100%", title: "Satisfaction", items: ["Guaranteed quality", "Best results"] },
|
||||
]}
|
||||
title="Salon Stats"
|
||||
description="Our commitment to quality service."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Ready to glow?"
|
||||
title="Book Your Appointment"
|
||||
description="Connect with us on WhatsApp for bookings and queries: 0300-1234567"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "https://wa.me/923001234567",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Ready to glow?"
|
||||
title="Book Your Appointment"
|
||||
description="Connect with us on WhatsApp for bookings and queries: 0300-1234567"
|
||||
buttons={[{ text: "Book Now", href: "https://wa.me/923001234567" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Glow Beauty Salon"
|
||||
columns={[
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Glow Beauty Salon"
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Services", href: "#services" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user