Merge version_1 into main #2
247
src/app/page.tsx
247
src/app/page.tsx
@@ -31,22 +31,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Simply Hair Salon"
|
||||
/>
|
||||
@@ -54,42 +42,17 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Simply Unforgettable Hair."
|
||||
description="Experience bespoke styling and unmatched hospitality in an atmosphere of pure luxury."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Transformation",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Book Your Transformation", href: "#contact" }]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-young-woman-posing-studio-photo_1301-6999.jpg?_wi=1",
|
||||
imageAlt: "luxury hair salon glossy hair model",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-wearing-suit-posing-black-white_23-2149411391.jpg",
|
||||
imageAlt: "luxury hair salon glossy hair model",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-charming-girl-dressed-black-shine-dress-smiling-living-room_291650-589.jpg",
|
||||
imageAlt: "luxury hair salon glossy hair model",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-with-short-hair-red-lipstick_158538-8423.jpg",
|
||||
imageAlt: "luxury hair salon glossy hair model",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-black-sweater-standing-posing_114579-58753.jpg",
|
||||
imageAlt: "luxury hair salon glossy hair model",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blondie-pegnant-female-waiting-baby-posing-dark-studio-gray-silk-dress-with-hand-up-looking-camera-elegant-future-mother-expacting-her-baby-expextancy-motherhood-stylish-look_132075-11633.jpg",
|
||||
imageAlt: "luxury hair salon glossy hair model",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-young-woman-posing-studio-photo_1301-6999.jpg", imageAlt: "luxury hair salon glossy hair model" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-wearing-suit-posing-black-white_23-2149411391.jpg", imageAlt: "luxury hair salon glossy hair model" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/happy-charming-girl-dressed-black-shine-dress-smiling-living-room_291650-589.jpg", imageAlt: "luxury hair salon glossy hair model" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-with-short-hair-red-lipstick_158538-8423.jpg", imageAlt: "luxury hair salon glossy hair model" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-black-sweater-standing-posing_114579-58753.jpg", imageAlt: "luxury hair salon glossy hair model" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/blondie-pegnant-female-waiting-baby-posing-dark-studio-gray-silk-dress-with-hand-up-looking-camera-elegant-future-mother-expacting-her-baby-expextancy-motherhood-stylish-look_132075-11633.jpg", imageAlt: "luxury hair salon glossy hair model" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -111,24 +74,9 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Tailoring",
|
||||
description: "Expert cuts for men, women, and children.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-smokes-cigar_1304-5117.jpg",
|
||||
imageAlt: "precision hair cutting professional tools",
|
||||
},
|
||||
{
|
||||
title: "Bespoke Color",
|
||||
description: "Seamless balayage and dimensional tones.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-hair-salon_23-2150668447.jpg",
|
||||
imageAlt: "expert hair coloring technique",
|
||||
},
|
||||
{
|
||||
title: "Luxury Treatments",
|
||||
description: "Restorative therapies for ultimate shine.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230928.jpg",
|
||||
imageAlt: "luxury scalp treatment salon",
|
||||
},
|
||||
{ title: "Precision Tailoring", description: "Expert cuts for men, women, and children.", imageSrc: "http://img.b2bpic.net/free-photo/brunette-woman-smokes-cigar_1304-5117.jpg", imageAlt: "precision hair cutting professional tools" },
|
||||
{ title: "Bespoke Color", description: "Seamless balayage and dimensional tones.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-hair-salon_23-2150668447.jpg", imageAlt: "expert hair coloring technique" },
|
||||
{ title: "Luxury Treatments", description: "Restorative therapies for ultimate shine.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230928.jpg", imageAlt: "luxury scalp treatment salon" }
|
||||
]}
|
||||
title="Our Signature Approach"
|
||||
description="Excellence in every detail."
|
||||
@@ -137,61 +85,13 @@ export default function LandingPage() {
|
||||
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardEight
|
||||
animationType="slide-up"
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "cut",
|
||||
badge: "Signature",
|
||||
price: "$90+",
|
||||
subtitle: "Precision Tailoring",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Consultation",
|
||||
"Precision Cut",
|
||||
"Luxury Finish",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "color",
|
||||
badge: "Bespoke",
|
||||
price: "$180+",
|
||||
subtitle: "Expert Color",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Custom Balayage",
|
||||
"Toning",
|
||||
"Bond Treatment",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "treat",
|
||||
badge: "Treatment",
|
||||
price: "$60+",
|
||||
subtitle: "Hair Therapy",
|
||||
buttons: [
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
features: [
|
||||
"Deep Conditioning",
|
||||
"Scalp Ritual",
|
||||
"Shine Gloss",
|
||||
],
|
||||
},
|
||||
{ id: "cut", badge: "Signature", price: "$90+", subtitle: "Precision Tailoring", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Consultation", "Precision Cut", "Luxury Finish"] },
|
||||
{ id: "color", badge: "Bespoke", price: "$180+", subtitle: "Expert Color", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Custom Balayage", "Toning", "Bond Treatment"] },
|
||||
{ id: "treat", badge: "Treatment", price: "$60+", subtitle: "Hair Therapy", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Deep Conditioning", "Scalp Ritual", "Shine Gloss"] }
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Accessible luxury menu with bespoke execution."
|
||||
@@ -205,26 +105,11 @@ export default function LandingPage() {
|
||||
rating={5}
|
||||
author="Wendy S."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/caucasian-glad-girl-pink-eyemask-laughing-while-posing-kitchen-indoor-photo-pretty-sisters-joking-morning_197531-21460.jpg",
|
||||
alt: "happy client after hair service",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/beautiful-woman-standing-against-wall_107420-94692.jpg",
|
||||
alt: "smiling customer hair salon",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/portrait-sexy-lady-isolated-yellow-background-girl-with-long-brown-hair-smiling-camera_549566-655.jpg",
|
||||
alt: "confident woman beautiful hair",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/teen-age-youth-style-self-expression-concept-portrait-positive-happy-teenage-girl-with-bob-pinkish-hairstyle-facial-piercing-relaxing-indoors_343059-3781.jpg",
|
||||
alt: "pleased hair client",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/side-view-woman-with-car_23-2150274566.jpg",
|
||||
alt: "content salon customer",
|
||||
},
|
||||
{ src: "http://img.b2bpic.net/free-photo/caucasian-glad-girl-pink-eyemask-laughing-while-posing-kitchen-indoor-photo-pretty-sisters-joking-morning_197531-21460.jpg", alt: "happy client after hair service" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/beautiful-woman-standing-against-wall_107420-94692.jpg", alt: "smiling customer hair salon" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/portrait-sexy-lady-isolated-yellow-background-girl-with-long-brown-hair-smiling-camera_549566-655.jpg", alt: "confident woman beautiful hair" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/teen-age-youth-style-self-expression-concept-portrait-positive-happy-teenage-girl-with-bob-pinkish-hairstyle-facial-piercing-relaxing-indoors_343059-3781.jpg", alt: "pleased hair client" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/side-view-woman-with-car_23-2150274566.jpg", alt: "content salon customer" }
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="slide-up"
|
||||
@@ -238,29 +123,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
groups={[
|
||||
{
|
||||
id: "main",
|
||||
groupTitle: "Lead Stylists",
|
||||
members: [
|
||||
{
|
||||
id: "alice",
|
||||
title: "Alice",
|
||||
subtitle: "Master Stylist",
|
||||
detail: "Dedicated to bringing your ultimate hair fantasy to life with infinite patience.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-smiling-woman-is-trying-beautiful-necklace-posh-jewellery-shop_613910-20742.jpg",
|
||||
imageAlt: "professional stylist confident portrait",
|
||||
},
|
||||
{
|
||||
id: "huixin",
|
||||
title: "Huixin",
|
||||
subtitle: "Master Stylist",
|
||||
detail: "Visionary artist famous for unmatched hospitality and precision execution.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-drinking-coffee_23-2148020563.jpg",
|
||||
imageAlt: "female hairstylist professional portrait",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-young-woman-posing-studio-photo_1301-6999.jpg?_wi=2",
|
||||
imageAlt: "professional stylist confident portrait",
|
||||
},
|
||||
id: "main", groupTitle: "Lead Stylists", members: [
|
||||
{ id: "alice", title: "Alice", subtitle: "Master Stylist", detail: "Dedicated to bringing your ultimate hair fantasy to life with infinite patience.", imageSrc: "http://img.b2bpic.net/free-photo/elegant-smiling-woman-is-trying-beautiful-necklace-posh-jewellery-shop_613910-20742.jpg", imageAlt: "professional stylist confident portrait" },
|
||||
{ id: "huixin", title: "Huixin", subtitle: "Master Stylist", detail: "Visionary artist famous for unmatched hospitality and precision execution.", imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-drinking-coffee_23-2148020563.jpg", imageAlt: "female hairstylist professional portrait" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Meet the Artists"
|
||||
description="The visionary stylists behind Simply Hair Salon."
|
||||
@@ -272,21 +139,9 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Do you offer consultations?",
|
||||
content: "Yes, we encourage consultations to ensure we curate your perfect signature look.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Are you kid-friendly?",
|
||||
content: "Absolutely. Our patient hospitality extends to clients of all ages for precision cuts.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "How do I book?",
|
||||
content: "Click the book button above to access our seamless real-time appointment scheduling.",
|
||||
},
|
||||
{ id: "q1", title: "Do you offer consultations?", content: "Yes, we encourage consultations to ensure we curate your perfect signature look." },
|
||||
{ id: "q2", title: "Are you kid-friendly?", content: "Absolutely. Our patient hospitality extends to clients of all ages for precision cuts." },
|
||||
{ id: "q3", title: "How do I book?", content: "Click the book button above to access our seamless real-time appointment scheduling." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/stylish-businesswoman-posing-with-cup-coffee_23-2147670333.jpg"
|
||||
title="Your Salon Questions"
|
||||
@@ -303,31 +158,11 @@ export default function LandingPage() {
|
||||
title="Secure Your Appointment"
|
||||
description="Ready to elevate your look? Book now to reserve your spot."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Full Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "phone",
|
||||
type: "tel",
|
||||
placeholder: "Phone Number",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Email Address",
|
||||
required: true,
|
||||
},
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Email Address", required: true }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Desired services or requests...",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
textarea={{ name: "message", placeholder: "Desired services or requests...", rows: 4, required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-using-mobile-phone-while-getting-her-hair-straightened_107420-12154.jpg"
|
||||
imageAlt="chic hair salon reception counter"
|
||||
/>
|
||||
@@ -336,14 +171,8 @@ export default function LandingPage() {
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Simply Hair Salon"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "© 2024 Simply Hair Salon",
|
||||
href: "#",
|
||||
}}
|
||||
leftLink={{ text: "Privacy Policy", href: "#" }}
|
||||
rightLink={{ text: "© 2024 Simply Hair Salon", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user