Merge version_1 into main #2
299
src/app/page.tsx
299
src/app/page.tsx
@@ -31,86 +31,42 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "features",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Friends Beauty Salon"
|
||||
button={{ text: "Book Appointment", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboard
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
variant: "gradient-bars"}}
|
||||
title="Unwind in Elegance"
|
||||
description="Experience personalized beauty treatments and professional hair care at Friends Beauty Salon, where your comfort and style are our priority."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Appointment", href: "#contact"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg"
|
||||
imageAlt="Luxurious salon interior"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/luxury-bedroom-with-modern-design-elegance-generated-by-ai_188544-26912.jpg",
|
||||
alt: "Client one",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/armchair-couch_1203-772.jpg",
|
||||
alt: "Client two",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/illuminated-couch-armchair_1203-771.jpg",
|
||||
alt: "Client three",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/digital-lavender-interior-design_23-2151561156.jpg",
|
||||
alt: "Client four",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/closeup-smiling-adult-woman-leaning-wall_1262-1759.jpg",
|
||||
alt: "Client five",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/luxury-bedroom-with-modern-design-elegance-generated-by-ai_188544-26912.jpg", alt: "Client one" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/armchair-couch_1203-772.jpg", alt: "Client two" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/illuminated-couch-armchair_1203-771.jpg", alt: "Client three" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/digital-lavender-interior-design_23-2151561156.jpg", alt: "Client four" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/closeup-smiling-adult-woman-leaning-wall_1262-1759.jpg", alt: "Client five" },
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Hair Styling",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Color Services",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Skincare",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Personalized Care",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Modern Techniques",
|
||||
},
|
||||
{ type: "text", text: "Hair Styling" },
|
||||
{ type: "text", text: "Color Services" },
|
||||
{ type: "text", text: "Skincare" },
|
||||
{ type: "text", text: "Personalized Care" },
|
||||
{ type: "text", text: "Modern Techniques" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -120,7 +76,7 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="A Sanctuary of Style"
|
||||
description="Founded by experts with a passion for artistry, Friends Beauty Salon offers a tranquil retreat for your hair and skin. We combine modern techniques with personalized care to ensure every visitor leaves feeling rejuvenated."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/women-getting-haircuts-home_23-2148817185.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/women-getting-haircuts-home_23-2148817185.jpg"
|
||||
imageAlt="Salon beauty artist at work"
|
||||
/>
|
||||
</div>
|
||||
@@ -133,20 +89,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Hair Styling",
|
||||
description: "Expert cuts and styling tailored to your face shape and personal vibe.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-putting-towel-face-client_23-2147736960.jpg?_wi=1",
|
||||
},
|
||||
title: "Precision Hair Styling", description: "Expert cuts and styling tailored to your face shape and personal vibe.", imageSrc: "http://img.b2bpic.net/free-photo/barber-putting-towel-face-client_23-2147736960.jpg"},
|
||||
{
|
||||
title: "Color Specialist",
|
||||
description: "High-end coloring and highlights using premium botanical products.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108856.jpg?_wi=1",
|
||||
},
|
||||
title: "Color Specialist", description: "High-end coloring and highlights using premium botanical products.", imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108856.jpg"},
|
||||
{
|
||||
title: "Skincare Treatments",
|
||||
description: "Revitalizing facials and skin wellness services for a glowing complexion.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-face-covered-with-mask-close-up_1303-16799.jpg?_wi=1",
|
||||
},
|
||||
title: "Skincare Treatments", description: "Revitalizing facials and skin wellness services for a glowing complexion.", imageSrc: "http://img.b2bpic.net/free-photo/female-face-covered-with-mask-close-up_1303-16799.jpg"},
|
||||
]}
|
||||
title="Our Signature Services"
|
||||
description="Explore our curated range of beauty and hair care treatments tailored to your unique style."
|
||||
@@ -161,59 +108,23 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
brand: "LuxeCare",
|
||||
name: "Revitalizing Hair Mask",
|
||||
price: "$45",
|
||||
rating: 5,
|
||||
reviewCount: "120",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/serum-shaving-razor_23-2148889859.jpg",
|
||||
},
|
||||
id: "p1", brand: "LuxeCare", name: "Revitalizing Hair Mask", price: "$45", rating: 5,
|
||||
reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/serum-shaving-razor_23-2148889859.jpg"},
|
||||
{
|
||||
id: "p2",
|
||||
brand: "PureGlow",
|
||||
name: "Hydrating Serum",
|
||||
price: "$55",
|
||||
rating: 5,
|
||||
reviewCount: "85",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottles-bricks-orange-background_185193-162155.jpg",
|
||||
},
|
||||
id: "p2", brand: "PureGlow", name: "Hydrating Serum", price: "$55", rating: 5,
|
||||
reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-bottles-bricks-orange-background_185193-162155.jpg"},
|
||||
{
|
||||
id: "p3",
|
||||
brand: "SilkStrands",
|
||||
name: "Smooth Finish Oil",
|
||||
price: "$30",
|
||||
rating: 4,
|
||||
reviewCount: "200",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hair-oil-bottle-with-blonde-hair-background_23-2151968647.jpg",
|
||||
},
|
||||
id: "p3", brand: "SilkStrands", name: "Smooth Finish Oil", price: "$30", rating: 4,
|
||||
reviewCount: "200", imageSrc: "http://img.b2bpic.net/free-photo/hair-oil-bottle-with-blonde-hair-background_23-2151968647.jpg"},
|
||||
{
|
||||
id: "p4",
|
||||
brand: "Botanique",
|
||||
name: "Scalp Therapy Tonic",
|
||||
price: "$38",
|
||||
rating: 5,
|
||||
reviewCount: "64",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hair-serum-bottle-brown-wavy-hair_23-2152001430.jpg",
|
||||
},
|
||||
id: "p4", brand: "Botanique", name: "Scalp Therapy Tonic", price: "$38", rating: 5,
|
||||
reviewCount: "64", imageSrc: "http://img.b2bpic.net/free-photo/hair-serum-bottle-brown-wavy-hair_23-2152001430.jpg"},
|
||||
{
|
||||
id: "p5",
|
||||
brand: "LuxeCare",
|
||||
name: "Volume Booster Spray",
|
||||
price: "$28",
|
||||
rating: 4,
|
||||
reviewCount: "92",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pink-hair-spray-bottle_23-2152001447.jpg",
|
||||
},
|
||||
id: "p5", brand: "LuxeCare", name: "Volume Booster Spray", price: "$28", rating: 4,
|
||||
reviewCount: "92", imageSrc: "http://img.b2bpic.net/free-photo/pink-hair-spray-bottle_23-2152001447.jpg"},
|
||||
{
|
||||
id: "p6",
|
||||
brand: "PureGlow",
|
||||
name: "Exfoliating Scrub",
|
||||
price: "$42",
|
||||
rating: 5,
|
||||
reviewCount: "45",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-cosmetic-products_23-2148532774.jpg",
|
||||
},
|
||||
id: "p6", brand: "PureGlow", name: "Exfoliating Scrub", price: "$42", rating: 5,
|
||||
reviewCount: "45", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-cosmetic-products_23-2148532774.jpg"},
|
||||
]}
|
||||
title="Premium Beauty Products"
|
||||
description="Bring the salon home with our hand-picked selection of luxury hair and skincare essentials."
|
||||
@@ -227,56 +138,23 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
title: "Essential Care",
|
||||
price: "$80",
|
||||
period: "/ session",
|
||||
features: [
|
||||
"Haircut & Wash",
|
||||
"Blow dry finish",
|
||||
"Scalp consultation",
|
||||
],
|
||||
id: "basic", title: "Essential Care", price: "$80", period: "/ session", features: [
|
||||
"Haircut & Wash", "Blow dry finish", "Scalp consultation"],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-styling-hair-client_23-2147769815.jpg",
|
||||
imageAlt: "Professional hairdresser styling hair of client",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-styling-hair-client_23-2147769815.jpg", imageAlt: "Professional hairdresser styling hair of client"},
|
||||
{
|
||||
id: "pro",
|
||||
title: "Premium Revive",
|
||||
price: "$150",
|
||||
period: "/ session",
|
||||
features: [
|
||||
"Full color treatment",
|
||||
"Haircut & Style",
|
||||
"Deep conditioning treatment",
|
||||
],
|
||||
id: "pro", title: "Premium Revive", price: "$150", period: "/ session", features: [
|
||||
"Full color treatment", "Haircut & Style", "Deep conditioning treatment"],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg?_wi=2",
|
||||
imageAlt: "Professional hairdresser styling hair of client",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg", imageAlt: "Professional hairdresser styling hair of client"},
|
||||
{
|
||||
id: "vip",
|
||||
title: "The Ultimate Look",
|
||||
price: "$250",
|
||||
period: "/ session",
|
||||
features: [
|
||||
"Balayage technique",
|
||||
"Hydrating treatment",
|
||||
"Full makeover package",
|
||||
],
|
||||
id: "vip", title: "The Ultimate Look", price: "$250", period: "/ session", features: [
|
||||
"Balayage technique", "Hydrating treatment", "Full makeover package"],
|
||||
button: {
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/women-getting-haircuts-home_23-2148817185.jpg?_wi=2",
|
||||
imageAlt: "Professional hairdresser styling hair of client",
|
||||
},
|
||||
text: "Book Now", href: "#contact"},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/women-getting-haircuts-home_23-2148817185.jpg", imageAlt: "Professional hairdresser styling hair of client"},
|
||||
]}
|
||||
title="Our Treatments"
|
||||
description="Quality care for every need."
|
||||
@@ -289,60 +167,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Jane D.",
|
||||
date: "Oct 2023",
|
||||
title: "Amazing Results",
|
||||
quote: "I love the personalized attention I received. My hair has never looked this healthy!",
|
||||
tag: "Regular Client",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17096.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg?_wi=3",
|
||||
imageAlt: "client portrait salon happy",
|
||||
},
|
||||
id: "t1", name: "Jane D.", date: "Oct 2023", title: "Amazing Results", quote: "I love the personalized attention I received. My hair has never looked this healthy!", tag: "Regular Client", avatarSrc: "http://img.b2bpic.net/free-photo/girl-sitting-table-holding-mobile-phone-indoors_171337-17096.jpg", imageSrc: "http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg", imageAlt: "client portrait salon happy"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark R.",
|
||||
date: "Sep 2023",
|
||||
title: "Professional Service",
|
||||
quote: "The team here is truly expert. Highly recommend for any occasion.",
|
||||
tag: "New Client",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-woman-holding-disposable-coffee-cup_107420-12338.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/women-getting-haircuts-home_23-2148817185.jpg?_wi=3",
|
||||
imageAlt: "client portrait salon happy",
|
||||
},
|
||||
id: "t2", name: "Mark R.", date: "Sep 2023", title: "Professional Service", quote: "The team here is truly expert. Highly recommend for any occasion.", tag: "New Client", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-woman-holding-disposable-coffee-cup_107420-12338.jpg", imageSrc: "http://img.b2bpic.net/free-photo/women-getting-haircuts-home_23-2148817185.jpg", imageAlt: "client portrait salon happy"},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Emily P.",
|
||||
date: "Aug 2023",
|
||||
title: "Best Salon Ever",
|
||||
quote: "Such a relaxing experience. The atmosphere is just perfect.",
|
||||
tag: "Regular Client",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/lesbian-couple-wearing-white-their-wedding_23-2150835701.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-putting-towel-face-client_23-2147736960.jpg?_wi=2",
|
||||
imageAlt: "client portrait salon happy",
|
||||
},
|
||||
id: "t3", name: "Emily P.", date: "Aug 2023", title: "Best Salon Ever", quote: "Such a relaxing experience. The atmosphere is just perfect.", tag: "Regular Client", avatarSrc: "http://img.b2bpic.net/free-photo/lesbian-couple-wearing-white-their-wedding_23-2150835701.jpg", imageSrc: "http://img.b2bpic.net/free-photo/barber-putting-towel-face-client_23-2147736960.jpg", imageAlt: "client portrait salon happy"},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Sarah K.",
|
||||
date: "Jul 2023",
|
||||
title: "So Happy",
|
||||
quote: "They really understood what I wanted. Thank you Friends Beauty!",
|
||||
tag: "Regular Client",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/woman-checking-her-skin-mirror-after-receiving-cosmetic-treatment_107420-73991.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108856.jpg?_wi=2",
|
||||
imageAlt: "client portrait salon happy",
|
||||
},
|
||||
id: "t4", name: "Sarah K.", date: "Jul 2023", title: "So Happy", quote: "They really understood what I wanted. Thank you Friends Beauty!", tag: "Regular Client", avatarSrc: "http://img.b2bpic.net/free-photo/woman-checking-her-skin-mirror-after-receiving-cosmetic-treatment_107420-73991.jpg", imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108856.jpg", imageAlt: "client portrait salon happy"},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Linda M.",
|
||||
date: "Jun 2023",
|
||||
title: "Excellent Care",
|
||||
quote: "Excellent scalp treatment, left feeling refreshed.",
|
||||
tag: "New Client",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-excited-woman-walking-park_1262-20515.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-face-covered-with-mask-close-up_1303-16799.jpg?_wi=2",
|
||||
imageAlt: "client portrait salon happy",
|
||||
},
|
||||
id: "t5", name: "Linda M.", date: "Jun 2023", title: "Excellent Care", quote: "Excellent scalp treatment, left feeling refreshed.", tag: "New Client", avatarSrc: "http://img.b2bpic.net/free-photo/cheerful-excited-woman-walking-park_1262-20515.jpg", imageSrc: "http://img.b2bpic.net/free-photo/female-face-covered-with-mask-close-up_1303-16799.jpg", imageAlt: "client portrait salon happy"},
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="Hear what our wonderful clients have to say about their experience at Friends Beauty Salon."
|
||||
@@ -355,20 +188,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Yes, we highly recommend booking in advance to secure your preferred time.",
|
||||
},
|
||||
id: "f1", title: "Do I need an appointment?", content: "Yes, we highly recommend booking in advance to secure your preferred time."},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you accept walk-ins?",
|
||||
content: "We occasionally have availability for walk-ins, but appointments are prioritized.",
|
||||
},
|
||||
id: "f2", title: "Do you accept walk-ins?", content: "We occasionally have availability for walk-ins, but appointments are prioritized."},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Do you use organic products?",
|
||||
content: "We are proud to use high-quality organic and sustainable products for all our treatments.",
|
||||
},
|
||||
id: "f3", title: "Do you use organic products?", content: "We are proud to use high-quality organic and sustainable products for all our treatments."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg"
|
||||
title="Questions Answered"
|
||||
@@ -381,14 +205,11 @@ export default function LandingPage() {
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
variant: "rotated-rays-static"}}
|
||||
text="Ready for a refreshing change? We are just a booking away. Contact us to schedule your next salon experience."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Us",
|
||||
href: "mailto:hello@friendsbeauty.com",
|
||||
},
|
||||
text: "Contact Us", href: "mailto:hello@friendsbeauty.com"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -397,13 +218,9 @@ export default function LandingPage() {
|
||||
<FooterLogoReveal
|
||||
logoText="Friends Beauty"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
text: "Privacy Policy", href: "#"}}
|
||||
rightLink={{
|
||||
text: "Instagram",
|
||||
href: "https://instagram.com",
|
||||
}}
|
||||
text: "Instagram", href: "https://instagram.com"}}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user