Merge version_1 into main
Merge version_1 into main
This commit was merged in pull request #2.
This commit is contained in:
257
src/app/page.tsx
257
src/app/page.tsx
@@ -32,26 +32,11 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Our Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "testimonial",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Our Team", id: "team" },
|
||||
{ name: "Reviews", id: "testimonial" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Elegance Salon"
|
||||
/>
|
||||
@@ -59,22 +44,14 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
logoText="Elegance Hair Salon"
|
||||
description="Experience professional styling in our modern, serene space. We craft beauty with precision and passion."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "Our Services",
|
||||
href: "#features",
|
||||
},
|
||||
{ text: "Book Appointment", href: "#contact" },
|
||||
{ text: "Our Services", href: "#features" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
@@ -83,21 +60,11 @@ export default function LandingPage() {
|
||||
<InlineImageSplitTextAbout
|
||||
useInvertedBackground={false}
|
||||
heading={[
|
||||
{
|
||||
type: "text",
|
||||
content: "Crafting Your Perfect Look",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/side-view-happy-bride-holding-smartphone_23-2149722007.jpg",
|
||||
alt: "Stylist working",
|
||||
},
|
||||
{ type: "text", content: "Crafting Your Perfect Look" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/side-view-happy-bride-holding-smartphone_23-2149722007.jpg", alt: "Stylist working" },
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "Meet the Team",
|
||||
href: "#team",
|
||||
},
|
||||
{ text: "Meet the Team", href: "#team" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -109,49 +76,25 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Styling",
|
||||
description: "Tailored haircuts that complement your face shape and personal style.",
|
||||
icon: Scissors,
|
||||
title: "Precision Styling", description: "Tailored haircuts that complement your face shape and personal style.", icon: Scissors,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-hairdresser-washing-woman-s-hair_23-2150668438.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-composition-spa-bath-concept_23-2148094191.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg?_wi=2",
|
||||
imageAlt: "hair coloring technique palette",
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-hairdresser-washing-woman-s-hair_23-2150668438.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-composition-spa-bath-concept_23-2148094191.jpg" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Organic Coloring",
|
||||
description: "High-quality, gentle color treatments using natural-based ingredients.",
|
||||
icon: Palette,
|
||||
title: "Organic Coloring", description: "High-quality, gentle color treatments using natural-based ingredients.", icon: Palette,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-getting-her-hair-done_23-2148108776.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-washing-client-hair-sink_23-2147769790.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-happy-bride-holding-smartphone_23-2149722007.jpg",
|
||||
imageAlt: "hair coloring technique palette",
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-getting-her-hair-done_23-2148108776.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-washing-client-hair-sink_23-2147769790.jpg" },
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Revitalizing Spa",
|
||||
description: "Deep conditioning and scalp treatments for long-lasting hair health.",
|
||||
icon: Sparkles,
|
||||
title: "Revitalizing Spa", description: "Deep conditioning and scalp treatments for long-lasting hair health.", icon: Sparkles,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-combing-hair-her-beauty-routine_23-2150166426.jpg",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-scissors-hair-salon_23-2150462460.jpg",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232242.jpg?_wi=1",
|
||||
imageAlt: "hair coloring technique palette",
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-combing-hair-her-beauty-routine_23-2150166426.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/view-scissors-hair-salon_23-2150462460.jpg" },
|
||||
]
|
||||
},
|
||||
]}
|
||||
title="Our Expert Services"
|
||||
@@ -161,53 +104,17 @@ export default function LandingPage() {
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardFour
|
||||
animationType="scale-rotate"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Hydrate Shampoo",
|
||||
price: "$34.00",
|
||||
variant: "250ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232242.jpg?_wi=2",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Silk Conditioner",
|
||||
price: "$38.00",
|
||||
variant: "250ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-done-beauty-salon_23-2149167391.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Argan Hair Oil",
|
||||
price: "$42.00",
|
||||
variant: "50ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-organic-coffee-still-life_23-2151762333.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Volume Spray",
|
||||
price: "$29.00",
|
||||
variant: "150ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/different-foundation-with-dark-background_23-2148978147.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Deep Mask",
|
||||
price: "$45.00",
|
||||
variant: "200ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-washed-hairdresser_23-2150771292.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Finishing Mist",
|
||||
price: "$32.00",
|
||||
variant: "100ml",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mom-helping-her-child-styling-afro-hair_23-2149625751.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Hydrate Shampoo", price: "$34.00", variant: "250ml", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232242.jpg" },
|
||||
{ id: "p2", name: "Silk Conditioner", price: "$38.00", variant: "250ml", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-done-beauty-salon_23-2149167391.jpg" },
|
||||
{ id: "p3", name: "Argan Hair Oil", price: "$42.00", variant: "50ml", imageSrc: "http://img.b2bpic.net/free-photo/delicious-organic-coffee-still-life_23-2151762333.jpg" },
|
||||
{ id: "p4", name: "Volume Spray", price: "$29.00", variant: "150ml", imageSrc: "http://img.b2bpic.net/free-photo/different-foundation-with-dark-background_23-2148978147.jpg" },
|
||||
{ id: "p5", name: "Deep Mask", price: "$45.00", variant: "200ml", imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-washed-hairdresser_23-2150771292.jpg" },
|
||||
{ id: "p6", name: "Finishing Mist", price: "$32.00", variant: "100ml", imageSrc: "http://img.b2bpic.net/free-photo/mom-helping-her-child-styling-afro-hair_23-2149625751.jpg" },
|
||||
]}
|
||||
title="Premium Care Essentials"
|
||||
description="Professional-grade products to maintain your salon results at home."
|
||||
@@ -216,28 +123,13 @@ export default function LandingPage() {
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardFive
|
||||
animationType="depth-3d"
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
team={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Elena Rossi",
|
||||
role: "Creative Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blonde-female-dressed-white-t-shirt-waistcoat-grey-background_613910-9333.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Marcus Chen",
|
||||
role: "Colorist Expert",
|
||||
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",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sarah Miller",
|
||||
role: "Senior Stylist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-young-beautiful-female-barber-uniform-holding-winner-cup-with-hair-clippers-showing-look-gesture-isolated-blue-wall_141793-105678.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Elena Rossi", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blonde-female-dressed-white-t-shirt-waistcoat-grey-background_613910-9333.jpg" },
|
||||
{ id: "t2", name: "Marcus Chen", role: "Colorist Expert", 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" },
|
||||
{ id: "t3", name: "Sarah Miller", role: "Senior Stylist", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-beautiful-female-barber-uniform-holding-winner-cup-with-hair-clippers-showing-look-gesture-isolated-blue-wall_141793-105678.jpg" },
|
||||
]}
|
||||
title="Meet Our Stylists"
|
||||
description="Passionate professionals dedicated to bringing your vision to life."
|
||||
@@ -249,46 +141,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Amazing Color!",
|
||||
quote: "The best colorist in town. My hair feels so healthy and vibrant.",
|
||||
name: "Jessica L.",
|
||||
role: "Regular Client",
|
||||
imageSrc: "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",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Relaxing Oasis",
|
||||
quote: "I love visiting this salon. Always professional and the results are consistently stunning.",
|
||||
name: "Brian K.",
|
||||
role: "Loyal Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575437.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Precision Cut",
|
||||
quote: "Elena perfectly captured the style I wanted. Highly recommended!",
|
||||
name: "Samantha P.",
|
||||
role: "New Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-excited-goodlooking-africanamerican-curlyhaired-woman-trendy-silver-glittering-dress-touc_1258-142766.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Top Notch Quality",
|
||||
quote: "Expensive but worth every penny for the quality of care.",
|
||||
name: "Oliver D.",
|
||||
role: "Loyal Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-holding-juice-while-getting-haircut_613910-5727.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "So Friendly!",
|
||||
quote: "The staff makes you feel incredibly welcome and listened to.",
|
||||
name: "Chloe M.",
|
||||
role: "Happy Guest",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/friendly-young-interracial-girls-good-mood-wear-nightgowns-pajama-party-leisure-lifestyle-beauty-concept_197531-31732.jpg",
|
||||
},
|
||||
{ id: "1", title: "Amazing Color!", quote: "The best colorist in town. My hair feels so healthy and vibrant.", name: "Jessica L.", role: "Regular Client", imageSrc: "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" },
|
||||
{ id: "2", title: "Relaxing Oasis", quote: "I love visiting this salon. Always professional and the results are consistently stunning.", name: "Brian K.", role: "Loyal Client", imageSrc: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575437.jpg" },
|
||||
{ id: "3", title: "Precision Cut", quote: "Elena perfectly captured the style I wanted. Highly recommended!", name: "Samantha P.", role: "New Client", imageSrc: "http://img.b2bpic.net/free-photo/closeup-excited-goodlooking-africanamerican-curlyhaired-woman-trendy-silver-glittering-dress-touc_1258-142766.jpg" },
|
||||
{ id: "4", title: "Top Notch Quality", quote: "Expensive but worth every penny for the quality of care.", name: "Oliver D.", role: "Loyal Client", imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-holding-juice-while-getting-haircut_613910-5727.jpg" },
|
||||
{ id: "5", title: "So Friendly!", quote: "The staff makes you feel incredibly welcome and listened to.", name: "Chloe M.", role: "Happy Guest", imageSrc: "http://img.b2bpic.net/free-photo/friendly-young-interracial-girls-good-mood-wear-nightgowns-pajama-party-leisure-lifestyle-beauty-concept_197531-31732.jpg" },
|
||||
]}
|
||||
title="Client Love"
|
||||
description="Read what our wonderful clients are saying about their experience."
|
||||
@@ -300,21 +157,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do I book?",
|
||||
content: "You can book directly through our website or give us a call.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you offer consultations?",
|
||||
content: "Yes, we offer complimentary 15-minute consultations for all new color clients.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "What is your cancellation policy?",
|
||||
content: "Please provide 24 hours notice for any cancellations.",
|
||||
},
|
||||
{ id: "f1", title: "How do I book?", content: "You can book directly through our website or give us a call." },
|
||||
{ id: "f2", title: "Do you offer consultations?", content: "Yes, we offer complimentary 15-minute consultations for all new color clients." },
|
||||
{ id: "f3", title: "What is your cancellation policy?", content: "Please provide 24 hours notice for any cancellations." },
|
||||
]}
|
||||
title="Salon FAQs"
|
||||
description="Everything you need to know about our booking process."
|
||||
@@ -325,9 +170,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Let's Connect"
|
||||
title="Visit Elegance Salon"
|
||||
description="Ready for a transformation? Reach out to reserve your spot today."
|
||||
@@ -341,16 +184,8 @@ export default function LandingPage() {
|
||||
logoText="Elegance Salon"
|
||||
copyrightText="© 2025 Elegance Salon. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "#",
|
||||
ariaLabel: "Facebook",
|
||||
},
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user