Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| bc46558904 | |||
| a2f95867b2 | |||
| 0d14a47144 |
261
src/app/page.tsx
261
src/app/page.tsx
@@ -32,21 +32,13 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
name: "Services", id: "features"},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
name: "Pricing", id: "pricing"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="Elite Salon"
|
||||
/>
|
||||
@@ -55,60 +47,37 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Experience Professional Beauty & Care"
|
||||
description="Indulge in a premium salon experience designed for your unique style. Our experts bring out the best in you with every visit."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/brunette-female-hairdresser-washing-hair-bearded-men-client-saloon_613910-14570.jpg",
|
||||
alt: "Stylist 1",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/brunette-female-hairdresser-washing-hair-bearded-men-client-saloon_613910-14570.jpg", alt: "Stylist 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/pretty-smiling-beauty-blogger-dreamily-looking-camera-holding-make-up-brushes-hand-while-recording-new-video-vlog_574295-1364.jpg",
|
||||
alt: "Stylist 2",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/pretty-smiling-beauty-blogger-dreamily-looking-camera-holding-make-up-brushes-hand-while-recording-new-video-vlog_574295-1364.jpg", alt: "Stylist 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hair-dresser-posing-with-scissors_23-2148108780.jpg",
|
||||
alt: "Stylist 3",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/hair-dresser-posing-with-scissors_23-2148108780.jpg", alt: "Stylist 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/hairdresser-getting-ready-client_23-2149319756.jpg",
|
||||
alt: "Stylist 4",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/hairdresser-getting-ready-client_23-2149319756.jpg", alt: "Stylist 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/woman-posing-hairdressing-salon_23-2147737029.jpg",
|
||||
alt: "Stylist 5",
|
||||
},
|
||||
src: "http://img.b2bpic.net/free-photo/woman-posing-hairdressing-salon_23-2147737029.jpg", alt: "Stylist 5"},
|
||||
]}
|
||||
avatarText="Trusted by 500+ happy clients"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Appointment", href: "#contact"},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Award-Winning Services",
|
||||
},
|
||||
type: "text", text: "Award-Winning Services"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Professional Care",
|
||||
},
|
||||
type: "text", text: "Professional Care"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Relaxing Environment",
|
||||
},
|
||||
type: "text", text: "Relaxing Environment"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Expert Stylists",
|
||||
},
|
||||
type: "text", text: "Expert Stylists"},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Products",
|
||||
},
|
||||
type: "text", text: "Premium Products"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -118,10 +87,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
title="Crafting Your Perfect Look"
|
||||
description={[
|
||||
"We believe that every client deserves personalized attention and top-tier services.",
|
||||
"Our stylists are trained to deliver modern, elegant results while ensuring a relaxing environment.",
|
||||
"Since our establishment, we've focused on quality, comfort, and professional artistry.",
|
||||
]}
|
||||
"We believe that every client deserves personalized attention and top-tier services.", "Our stylists are trained to deliver modern, elegant results while ensuring a relaxing environment.", "Since our establishment, we've focused on quality, comfort, and professional artistry."]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -132,23 +98,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Expert Hair Styling",
|
||||
description: "Precision haircuts, coloring, and styling for every occasion.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/person-using-dry-shampoo_52683-132214.jpg",
|
||||
imageAlt: "Hair styling",
|
||||
},
|
||||
title: "Expert Hair Styling", description: "Precision haircuts, coloring, and styling for every occasion.", imageSrc: "http://img.b2bpic.net/free-photo/person-using-dry-shampoo_52683-132214.jpg", imageAlt: "Hair styling"},
|
||||
{
|
||||
title: "Skin & Spa Treatments",
|
||||
description: "Rejuvenating facials and skin care routines to keep you glowing.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmetologist-applying-mask-face-client-beauty-salon_1303-16758.jpg",
|
||||
imageAlt: "Spa care",
|
||||
},
|
||||
title: "Skin & Spa Treatments", description: "Rejuvenating facials and skin care routines to keep you glowing.", imageSrc: "http://img.b2bpic.net/free-photo/cosmetologist-applying-mask-face-client-beauty-salon_1303-16758.jpg", imageAlt: "Spa care"},
|
||||
{
|
||||
title: "Nail & Beauty Care",
|
||||
description: "Professional manicures and premium beauty services.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/nail-care-manicure-process_23-2149130356.jpg",
|
||||
imageAlt: "Nail care",
|
||||
},
|
||||
title: "Nail & Beauty Care", description: "Professional manicures and premium beauty services.", imageSrc: "http://img.b2bpic.net/free-photo/nail-care-manicure-process_23-2149130356.jpg", imageAlt: "Nail care"},
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="Comprehensive beauty care tailored to your needs."
|
||||
@@ -162,57 +116,28 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Essential",
|
||||
price: "$45",
|
||||
subtitle: "For quick refreshes",
|
||||
buttons: [
|
||||
id: "basic", badge: "Essential", price: "$45", subtitle: "For quick refreshes", buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Select", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Basic Haircut",
|
||||
"Wash & Style",
|
||||
"Blow Dry",
|
||||
],
|
||||
"Basic Haircut", "Wash & Style", "Blow Dry"],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Popular",
|
||||
price: "$95",
|
||||
subtitle: "The full experience",
|
||||
buttons: [
|
||||
id: "pro", badge: "Popular", price: "$95", subtitle: "The full experience", buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Select", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Advanced Styling",
|
||||
"Scalp Treatment",
|
||||
"Facial Mask",
|
||||
"Nail Polish",
|
||||
],
|
||||
"Advanced Styling", "Scalp Treatment", "Facial Mask", "Nail Polish"],
|
||||
},
|
||||
{
|
||||
id: "premium",
|
||||
badge: "Elite",
|
||||
price: "$150",
|
||||
subtitle: "Luxury transformation",
|
||||
buttons: [
|
||||
id: "premium", badge: "Elite", price: "$150", subtitle: "Luxury transformation", buttons: [
|
||||
{
|
||||
text: "Select",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Select", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Color Treatment",
|
||||
"Deep Conditioning",
|
||||
"Full Spa Package",
|
||||
"Priority Service",
|
||||
],
|
||||
"Color Treatment", "Deep Conditioning", "Full Spa Package", "Priority Service"],
|
||||
},
|
||||
]}
|
||||
title="Service Packages"
|
||||
@@ -228,33 +153,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Miller",
|
||||
role: "Senior Stylist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/regretted-young-beautiful-female-barber-uniform-speaks-phone-isolated-green-background_141793-118626.jpg",
|
||||
imageAlt: "Sarah",
|
||||
},
|
||||
id: "1", name: "Sarah Miller", role: "Senior Stylist", imageSrc: "http://img.b2bpic.net/free-photo/regretted-young-beautiful-female-barber-uniform-speaks-phone-isolated-green-background_141793-118626.jpg", imageAlt: "Sarah"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Elena Ross",
|
||||
role: "Makeup Artist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/team-female-dentists-treating-patients-teeth-visit-dentist-dentistry_169016-67241.jpg",
|
||||
imageAlt: "Elena",
|
||||
},
|
||||
id: "2", name: "Elena Ross", role: "Makeup Artist", imageSrc: "http://img.b2bpic.net/free-photo/team-female-dentists-treating-patients-teeth-visit-dentist-dentistry_169016-67241.jpg", imageAlt: "Elena"},
|
||||
{
|
||||
id: "3",
|
||||
name: "John Doe",
|
||||
role: "Lead Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg",
|
||||
imageAlt: "John",
|
||||
},
|
||||
id: "3", name: "John Doe", role: "Lead Barber", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-female-dentist-dentistry-concept-dental-treatment_169016-67039.jpg", imageAlt: "John"},
|
||||
{
|
||||
id: "4",
|
||||
name: "Alice Wong",
|
||||
role: "Salon Manager",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-female-barber-wearing-uniform-glasses-headband-holding-comb-hair-trimmer-air-looking-down-pretend-doing-haircut-client-isolated-red-background_141793-137002.jpg",
|
||||
imageAlt: "Alice",
|
||||
},
|
||||
id: "4", name: "Alice Wong", role: "Salon Manager", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-female-barber-wearing-uniform-glasses-headband-holding-comb-hair-trimmer-air-looking-down-pretend-doing-haircut-client-isolated-red-background_141793-137002.jpg", imageAlt: "Alice"},
|
||||
]}
|
||||
title="Meet Our Stylists"
|
||||
description="Our professional team is dedicated to your complete satisfaction."
|
||||
@@ -268,40 +173,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Jessica L.",
|
||||
handle: "@jessica",
|
||||
testimonial: "Amazing experience! The staff is so professional.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-smiling-ginger-woman-has-glad-expression-as-passes-exams-summer-session-successfully-poses-against-white-concrete-wall_273609-3602.jpg",
|
||||
},
|
||||
id: "1", name: "Jessica L.", handle: "@jessica", testimonial: "Amazing experience! The staff is so professional.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-smiling-ginger-woman-has-glad-expression-as-passes-exams-summer-session-successfully-poses-against-white-concrete-wall_273609-3602.jpg"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Mark S.",
|
||||
handle: "@marks",
|
||||
testimonial: "Best hair cut I've had in years. Highly recommend.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-beautiful-girl-wearing-dental-braces-wrapped-hair-towel-holding-camera-isolated-pink-background_141793-118885.jpg",
|
||||
},
|
||||
id: "2", name: "Mark S.", handle: "@marks", testimonial: "Best hair cut I've had in years. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-beautiful-girl-wearing-dental-braces-wrapped-hair-towel-holding-camera-isolated-pink-background_141793-118885.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Anna P.",
|
||||
handle: "@annap",
|
||||
testimonial: "The spa treatments are so relaxing. I left feeling new.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-getting-ready-their-clients_23-2149205931.jpg",
|
||||
},
|
||||
id: "3", name: "Anna P.", handle: "@annap", testimonial: "The spa treatments are so relaxing. I left feeling new.", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-getting-ready-their-clients_23-2149205931.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "David K.",
|
||||
handle: "@davidk",
|
||||
testimonial: "Professional services, quick booking, and great results.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/yong-pretty-woman-portrait_624325-53.jpg",
|
||||
},
|
||||
id: "4", name: "David K.", handle: "@davidk", testimonial: "Professional services, quick booking, and great results.", imageSrc: "http://img.b2bpic.net/free-photo/yong-pretty-woman-portrait_624325-53.jpg"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Sophie M.",
|
||||
handle: "@sophiem",
|
||||
testimonial: "A truly luxurious salon experience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371901.jpg",
|
||||
},
|
||||
id: "5", name: "Sophie M.", handle: "@sophiem", testimonial: "A truly luxurious salon experience.", imageSrc: "http://img.b2bpic.net/free-photo/designer-working-3d-model_23-2149371901.jpg"},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Hear from our wonderful community."
|
||||
@@ -314,20 +194,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Do I need to book in advance?",
|
||||
content: "Yes, we recommend booking 24 hours in advance.",
|
||||
},
|
||||
id: "1", title: "Do I need to book in advance?", content: "Yes, we recommend booking 24 hours in advance."},
|
||||
{
|
||||
id: "2",
|
||||
title: "Are walk-ins welcome?",
|
||||
content: "We do accept walk-ins based on our current availability.",
|
||||
},
|
||||
id: "2", title: "Are walk-ins welcome?", content: "We do accept walk-ins based on our current availability."},
|
||||
{
|
||||
id: "3",
|
||||
title: "What payment methods are accepted?",
|
||||
content: "We accept cash, card, and digital payment methods.",
|
||||
},
|
||||
id: "3", title: "What payment methods are accepted?", content: "We accept cash, card, and digital payment methods."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/young-woman-relaxing-spa-salon_176420-7544.jpg"
|
||||
imageAlt="FAQ Background"
|
||||
@@ -342,16 +213,13 @@ export default function LandingPage() {
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
tag="Visit Us"
|
||||
title="Ready to Look Your Best?"
|
||||
description="Schedule your next salon visit and treat yourself to the care you deserve."
|
||||
variant: "radial-gradient"}}
|
||||
tag="Contact Us"
|
||||
title="Book Your Session"
|
||||
description="We are located at 123 Salon St, Beauty City. Our hours are Mon-Sat: 9am - 8pm. Contact us at (555) 123-4567 for inquiries."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Appointment", href: "#contact"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -363,42 +231,29 @@ export default function LandingPage() {
|
||||
logoText="Elite Salon"
|
||||
columns={[
|
||||
{
|
||||
title: "Explore",
|
||||
items: [
|
||||
title: "Salon Details", items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#features",
|
||||
},
|
||||
label: "123 Beauty Ave, Glam City", href: "#"},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "#pricing",
|
||||
},
|
||||
label: "(555) 123-4567", href: "tel:+5551234567"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support",
|
||||
items: [
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Contact Us",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Services", href: "#features"},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "#faq",
|
||||
},
|
||||
label: "Pricing", href: "#pricing"},
|
||||
{
|
||||
label: "FAQ", href: "#faq"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
title: "Social", items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
label: "Instagram", href: "#"},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
},
|
||||
label: "Facebook", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -407,4 +262,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #f5f4ef;
|
||||
--card: #dad6cd;
|
||||
--foreground: #2a2928;
|
||||
--primary-cta: #2a2928;
|
||||
--background: #f6f0e9;
|
||||
--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