Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| b93eba033b | |||
| abe63d7d7b | |||
| 7094ba5fe2 | |||
| 596d04cf91 |
233
src/app/page.tsx
233
src/app/page.tsx
@@ -3,9 +3,9 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
|
||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
||||
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
@@ -32,25 +32,15 @@ export default function LandingPage() {
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
name: "Home", id: "hero"},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
name: "About", id: "about"},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "pricing",
|
||||
},
|
||||
name: "Pricing", id: "pricing"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="Melon Mirror"
|
||||
/>
|
||||
@@ -59,15 +49,12 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
variant: "plain"}}
|
||||
logoText="Melon Mirror"
|
||||
description="Premium salon experience crafted for everyone. Discover luxury grooming, expert care, and transformative beauty moments in one elegant space."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Glow",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book Your Glow", href: "#contact"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg?_wi=1"
|
||||
imageAlt="Salon Interior"
|
||||
@@ -82,17 +69,11 @@ export default function LandingPage() {
|
||||
description="At Melon Mirror, we believe beauty is a transformative moment. Our sanctuary is designed to help you find your glow through personalized care and premium techniques."
|
||||
metrics={[
|
||||
{
|
||||
value: "10+",
|
||||
title: "Years Experience",
|
||||
},
|
||||
value: "10+", title: "Years Experience"},
|
||||
{
|
||||
value: "5k+",
|
||||
title: "Happy Clients",
|
||||
},
|
||||
value: "5k+", title: "Happy Clients"},
|
||||
{
|
||||
value: "100%",
|
||||
title: "Satisfaction",
|
||||
},
|
||||
value: "100%", title: "Satisfaction"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/side-view-cute-couple-wearing-linen-clothing_23-2150695691.jpg?_wi=1"
|
||||
mediaAnimation="blur-reveal"
|
||||
@@ -106,29 +87,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Hair Styling",
|
||||
description: "Precision cuts and color services tailored to your unique beauty.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg",
|
||||
imageAlt: "Barber doing haircut bearded aged client in hair salon",
|
||||
},
|
||||
title: "Hair Styling", description: "Precision cuts and color services tailored to your unique beauty.", imageSrc: "http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg", imageAlt: "Barber doing haircut bearded aged client in hair salon"},
|
||||
{
|
||||
title: "Facial & Skincare",
|
||||
description: "Customized treatments for a radiant and refreshed complexion.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg?_wi=2",
|
||||
imageAlt: "Barber doing haircut bearded aged client in hair salon",
|
||||
},
|
||||
title: "Facial & Skincare", description: "Customized treatments for a radiant and refreshed complexion.", imageSrc: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg?_wi=2", imageAlt: "Barber doing haircut bearded aged client in hair salon"},
|
||||
{
|
||||
title: "Bridal Makeup",
|
||||
description: "Expert makeup artistry for your most memorable moments.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-cute-couple-wearing-linen-clothing_23-2150695691.jpg?_wi=2",
|
||||
imageAlt: "Barber doing haircut bearded aged client in hair salon",
|
||||
},
|
||||
title: "Bridal Makeup", description: "Expert makeup artistry for your most memorable moments.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-cute-couple-wearing-linen-clothing_23-2150695691.jpg?_wi=2", imageAlt: "Barber doing haircut bearded aged client in hair salon"},
|
||||
{
|
||||
title: "Spa & Relaxation",
|
||||
description: "Unwind with our therapeutic spa services designed for well-being.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg?_wi=1",
|
||||
imageAlt: "Barber doing haircut bearded aged client in hair salon",
|
||||
},
|
||||
title: "Spa & Relaxation", description: "Unwind with our therapeutic spa services designed for well-being.", imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg?_wi=1", imageAlt: "Barber doing haircut bearded aged client in hair salon"},
|
||||
]}
|
||||
title="Our Expert Services"
|
||||
description="From transformative hair styles to rejuvenating spa treatments, experience beauty tailored to you."
|
||||
@@ -142,55 +107,28 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
plans={[
|
||||
{
|
||||
id: "basic",
|
||||
badge: "Essential",
|
||||
price: "$80",
|
||||
subtitle: "Core beauty care",
|
||||
buttons: [
|
||||
id: "basic", badge: "Essential", price: "$80", subtitle: "Essential refresh for daily radiance", buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Consultation",
|
||||
"Hair Cut",
|
||||
"Style",
|
||||
],
|
||||
"Consultation", "Hair Cut", "Style"],
|
||||
},
|
||||
{
|
||||
id: "pro",
|
||||
badge: "Signature",
|
||||
price: "$150",
|
||||
subtitle: "Transformative experience",
|
||||
buttons: [
|
||||
id: "pro", badge: "Signature", price: "$150", subtitle: "Pro-level revitalizing transformation", buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Full Color",
|
||||
"Facial Treatment",
|
||||
"Style",
|
||||
],
|
||||
"Full Color", "Facial Treatment", "Style"],
|
||||
},
|
||||
{
|
||||
id: "ultimate",
|
||||
badge: "Luxury",
|
||||
price: "$250",
|
||||
subtitle: "The ultimate indulgence",
|
||||
buttons: [
|
||||
id: "ultimate", badge: "Luxury", price: "$250", subtitle: "The ultimate head-to-toe glow", buttons: [
|
||||
{
|
||||
text: "Book",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Book", href: "#contact"},
|
||||
],
|
||||
features: [
|
||||
"Premium Spa Service",
|
||||
"Bridal Makeup",
|
||||
"Deep Condition",
|
||||
],
|
||||
"Premium Spa Service", "Bridal Makeup", "Deep Condition"],
|
||||
},
|
||||
]}
|
||||
title="Elevated Care Packages"
|
||||
@@ -206,33 +144,13 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah D.",
|
||||
role: "Creative Director",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-painter-using-watercolor-paint-mixing-colors-artistic-creation_482257-124848.jpg",
|
||||
imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation",
|
||||
},
|
||||
id: "t1", name: "Sarah D.", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/female-painter-using-watercolor-paint-mixing-colors-artistic-creation_482257-124848.jpg", imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation"},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Michael L.",
|
||||
role: "Senior Stylist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg?_wi=3",
|
||||
imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation",
|
||||
},
|
||||
id: "t2", name: "Michael L.", role: "Senior Stylist", imageSrc: "http://img.b2bpic.net/free-photo/winter-season-lodging-entrance_482257-103218.jpg?_wi=3", imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation"},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Emma W.",
|
||||
role: "Spa Specialist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-cute-couple-wearing-linen-clothing_23-2150695691.jpg?_wi=3",
|
||||
imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation",
|
||||
},
|
||||
id: "t3", name: "Emma W.", role: "Spa Specialist", imageSrc: "http://img.b2bpic.net/free-photo/side-view-cute-couple-wearing-linen-clothing_23-2150695691.jpg?_wi=3", imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation"},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Jordan P.",
|
||||
role: "Makeup Artist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg?_wi=2",
|
||||
imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation",
|
||||
},
|
||||
id: "t4", name: "Jordan P.", role: "Makeup Artist", imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg?_wi=2", imageAlt: "Female painter using watercolor paint and mixing colors for artistic creation"},
|
||||
]}
|
||||
title="Meet Our Experts"
|
||||
description="Our professionals are dedicated to your beauty journey."
|
||||
@@ -246,40 +164,15 @@ export default function LandingPage() {
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Johnson",
|
||||
handle: "@sarahj",
|
||||
testimonial: "The best salon experience ever. I felt so pampered!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg?_wi=3",
|
||||
},
|
||||
id: "1", name: "Sarah Johnson", handle: "@sarahj", testimonial: "The best salon experience ever. I felt so pampered!", imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg?_wi=3"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Chen",
|
||||
handle: "@mchen",
|
||||
testimonial: "Incredible skill and very friendly service. Highly recommend.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-adult-woman-leaning-wall_1262-1759.jpg",
|
||||
},
|
||||
id: "2", name: "Michael Chen", handle: "@mchen", testimonial: "Incredible skill and very friendly service. Highly recommend.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-adult-woman-leaning-wall_1262-1759.jpg"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Rodriguez",
|
||||
handle: "@emilyr",
|
||||
testimonial: "My bridal makeup was flawless. So thankful for Melon Mirror.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-dress_624325-1363.jpg",
|
||||
},
|
||||
id: "3", name: "Emily Rodriguez", handle: "@emilyr", testimonial: "My bridal makeup was flawless. So thankful for Melon Mirror.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-bride-dress_624325-1363.jpg"},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Kim",
|
||||
handle: "@dkim",
|
||||
testimonial: "Consistently professional and always feel like a million bucks.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hair-dresser-posing-with-scissors_23-2148108780.jpg",
|
||||
},
|
||||
id: "4", name: "David Kim", handle: "@dkim", testimonial: "Consistently professional and always feel like a million bucks.", imageSrc: "http://img.b2bpic.net/free-photo/hair-dresser-posing-with-scissors_23-2148108780.jpg"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Laura P.",
|
||||
handle: "@laurap",
|
||||
testimonial: "The spa treatments are a game changer. Pure relaxation.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-getting-married_23-2150753670.jpg",
|
||||
},
|
||||
id: "5", name: "Laura P.", handle: "@laurap", testimonial: "The spa treatments are a game changer. Pure relaxation.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-getting-married_23-2150753670.jpg"},
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="Hear from our beloved clients."
|
||||
@@ -287,25 +180,16 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do I book?",
|
||||
content: "You can book directly through our website via the Contact form or give us a call.",
|
||||
},
|
||||
id: "f1", title: "How do I book?", content: "You can book directly through our website via the Contact form or give us a call."},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Do you offer consultations?",
|
||||
content: "Yes, we offer complimentary consultations for all major services.",
|
||||
},
|
||||
id: "f2", title: "Do you offer consultations?", content: "Yes, we offer complimentary consultations for all major services."},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Are your products cruelty-free?",
|
||||
content: "We prioritize high-quality, sustainable, and ethical products for all our treatments.",
|
||||
},
|
||||
id: "f3", title: "Are your products cruelty-free?", content: "We prioritize high-quality, sustainable, and ethical products for all our treatments."},
|
||||
]}
|
||||
title="Common Questions"
|
||||
description="We're here to help you get the most out of your visit."
|
||||
@@ -320,37 +204,38 @@ export default function LandingPage() {
|
||||
description="Ready to get pampered? Send us a message to secure your appointment today."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||||
},
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Your appointment request...",
|
||||
}}
|
||||
name: "message", placeholder: "Your appointment request..."}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/luxury-retro-wall-lamp-cafe_1150-10890.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
<FooterBaseCard
|
||||
logoText="Melon Mirror"
|
||||
leftLink={{
|
||||
text: "Privacy Policy",
|
||||
href: "#",
|
||||
}}
|
||||
rightLink={{
|
||||
text: "Terms & Conditions",
|
||||
href: "#",
|
||||
}}
|
||||
columns={[
|
||||
{
|
||||
title: "Navigate", items: [
|
||||
{ label: "Home", href: "#hero" },
|
||||
{ label: "About", href: "#about" },
|
||||
{ label: "Services", href: "#services" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms & Conditions", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
className="animate-in slide-in-from-bottom-20 duration-1000"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user