265 lines
12 KiB
TypeScript
265 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
|
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="blurBottom"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Services", id: "features"},
|
|
{
|
|
name: "Pricing", id: "pricing"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="Elite Salon"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroCentered
|
|
background={{
|
|
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/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/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"},
|
|
]}
|
|
avatarText="Trusted by 500+ happy clients"
|
|
buttons={[
|
|
{
|
|
text: "Book Appointment", href: "#contact"},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "Award-Winning Services"},
|
|
{
|
|
type: "text", text: "Professional Care"},
|
|
{
|
|
type: "text", text: "Relaxing Environment"},
|
|
{
|
|
type: "text", text: "Expert Stylists"},
|
|
{
|
|
type: "text", text: "Premium Products"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
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."]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
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: "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="Our Signature Services"
|
|
description="Comprehensive beauty care tailored to your needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "basic", badge: "Essential", price: "$45", subtitle: "For quick refreshes", buttons: [
|
|
{
|
|
text: "Select", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Basic Haircut", "Wash & Style", "Blow Dry"],
|
|
},
|
|
{
|
|
id: "pro", badge: "Popular", price: "$95", subtitle: "The full experience", buttons: [
|
|
{
|
|
text: "Select", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Advanced Styling", "Scalp Treatment", "Facial Mask", "Nail Polish"],
|
|
},
|
|
{
|
|
id: "premium", badge: "Elite", price: "$150", subtitle: "Luxury transformation", buttons: [
|
|
{
|
|
text: "Select", href: "#contact"},
|
|
],
|
|
features: [
|
|
"Color Treatment", "Deep Conditioning", "Full Spa Package", "Priority Service"],
|
|
},
|
|
]}
|
|
title="Service Packages"
|
|
description="Choose the best plan that fits your style and budget."
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
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: "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: "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."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
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: "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: "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"},
|
|
]}
|
|
title="What Our Clients Say"
|
|
description="Hear from our wonderful community."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
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: "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"
|
|
mediaAnimation="slide-up"
|
|
title="Common Questions"
|
|
description="Here are some quick answers to things you might be curious about."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={true}
|
|
background={{
|
|
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 Appointment", href: "#contact"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/high-angle-woman-reading-tarot-home_23-2150276078.jpg"
|
|
imageAlt="Footer Background"
|
|
logoText="Elite Salon"
|
|
columns={[
|
|
{
|
|
title: "Salon Details", items: [
|
|
{
|
|
label: "123 Beauty Ave, Glam City", href: "#"},
|
|
{
|
|
label: "(555) 123-4567", href: "tel:+5551234567"},
|
|
],
|
|
},
|
|
{
|
|
title: "Quick Links", items: [
|
|
{
|
|
label: "Services", href: "#features"},
|
|
{
|
|
label: "Pricing", href: "#pricing"},
|
|
{
|
|
label: "FAQ", href: "#faq"},
|
|
],
|
|
},
|
|
{
|
|
title: "Social", items: [
|
|
{
|
|
label: "Instagram", href: "#"},
|
|
{
|
|
label: "Facebook", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |