265 lines
16 KiB
TypeScript
265 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSizeMediumTitles"
|
|
background="grid"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "home"},
|
|
{
|
|
name: "Services", id: "services"},
|
|
{
|
|
name: "Gallery", id: "gallery"},
|
|
{
|
|
name: "About", id: "about"},
|
|
{
|
|
name: "Team", id: "team"},
|
|
{
|
|
name: "Testimonials", id: "testimonials"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="Salon Shelimar"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroCarouselLogo
|
|
logoText="Salon Shelimar"
|
|
description="Where heritage craftsmanship meets modern artistry. A sanctuary for those who understand that great hair is sculptural precision."
|
|
buttons={[
|
|
{
|
|
text: "BOOK BY PHONE", href: "#contact"},
|
|
{
|
|
text: "EXPLORE SERVICES", href: "#services"},
|
|
]}
|
|
slides={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-hair-dryer-with-rollers_329181-1939.jpg", imageAlt: "Stylist working on a client's hair in a modern salon"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-beautiful-woman-with-magnificent-blonde-hair_8353-6159.jpg", imageAlt: "Hand-painted balayage highlights being applied to hair"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-making-hairstyle-blonde-woman-beauty-salon_176420-4459.jpg", imageAlt: "Elegant updo hairstyle for a special occasion"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/sitting-hair-dresser-posing_23-2148108747.jpg", imageAlt: "Luxurious interior of Salon Shelimar with styling stations"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/child-getting-their-hair-washed-salon_23-2150462452.jpg", imageAlt: "Deep conditioning treatment being applied to client's hair"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-hipster-bearded-male-sitting-armchair-barber-shop-while-hairdresser-shaves-his-beard-with-dangerous-razor_613910-18491.jpg", imageAlt: "Male client receiving a stylish haircut from a professional"},
|
|
]}
|
|
autoplayDelay={3000}
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
useInvertedBackground={true}
|
|
title="A Heritage of Precision"
|
|
description="Nestled in the heart of Côte Saint-Luc, Salon Shelimar has been a cornerstone of beauty and craftsmanship in the community. Every visit is a personalized experience — a conversation between stylist and canvas. Our master stylists bring decades of combined expertise, blending time-honored techniques with contemporary artistry. We believe that exceptional hair is not just worn — it is sculpted, considered, and brought to life with intention."
|
|
metrics={[
|
|
{
|
|
value: "20+", title: "Years of Expertise"},
|
|
{
|
|
value: "5", title: "Master Stylists"},
|
|
{
|
|
value: "Thousands", title: "Happy Clients"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665403.jpg?_wi=1"
|
|
imageAlt="An experienced hair stylist meticulously working on a client's hair"
|
|
mediaAnimation="slide-up"
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "The Signature Sculpt", description: "Precision cut and styling tailored to your face shape and lifestyle, ensuring a look that truly reflects you.", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-beautiful-female-barber-uniform-holding-barber-tools-putting-barette-hair-isolated-pink-wall_141793-105672.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/close-up-man-combing-customer-hair_23-2148256891.jpg", buttonText: "Discover More"},
|
|
{
|
|
title: "Chromatic Infusion", description: "Full color service with custom-blended shades for multidimensional depth and lasting vibrancy.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-girl-with-colorful-hair-white-t-shirt-covering-her-eye-with-paint-brush-dreamily-looking-camera-pottery-studio_574295-955.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-getting-her-hair-done_23-2148108776.jpg", buttonText: "Discover More"},
|
|
{
|
|
title: "The Balayage Artistry", description: "Hand-painted highlights for a sun-kissed, natural gradient effect that grows out beautifully.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60927.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/elevated-view-smiling-woman-covered-with-holi-color-powder_23-2148129255.jpg", buttonText: "Discover More"},
|
|
{
|
|
title: "The Silk Revival", description: "Deep conditioning treatment restoring elasticity, shine, and softness to revitalize your hair.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-hairdresser-washing-woman-s-hair_23-2150668438.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/top-view-bath-products-concept_23-2148459879.jpg", buttonText: "Discover More"},
|
|
{
|
|
title: "The Ceremony Style", description: "Special occasion styling with a personalized consultation to perfect your look for any event.", imageSrc: "http://img.b2bpic.net/free-photo/cute-tender-slim-girl-with-blond-curly-hair-standing_197531-168.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-using-hair-spray_23-2148784348.jpg", buttonText: "Discover More"},
|
|
]}
|
|
title="The Curated List"
|
|
description="Our Services"
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "gallery-1", name: "The Signature Sculpt", price: "N/A", variant: "Hair", imageSrc: "http://img.b2bpic.net/free-photo/glamour-female-model-with-short-brown-hair-black-dress-posing-near-light-wall_613910-7032.jpg", imageAlt: "A modern short haircut with precise lines"},
|
|
{
|
|
id: "gallery-2", name: "The Atelier", price: "N/A", variant: "Interior", imageSrc: "http://img.b2bpic.net/free-photo/world-theatre-day-celebration_23-2151185639.jpg", imageAlt: "Interior view of Salon Shelimar"},
|
|
{
|
|
id: "gallery-3", name: "The Chignon", price: "N/A", variant: "Hair", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-bride-home-standing-near-window-with-bridesmaid_1157-13875.jpg", imageAlt: "An elegant chignon updo"},
|
|
{
|
|
id: "gallery-4", name: "Chromatic Infusion", price: "N/A", variant: "Hair", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-with-blue-hair_23-2149872337.jpg", imageAlt: "Vibrant red hair color with rich tones"},
|
|
{
|
|
id: "gallery-5", name: "The Curl Form", price: "N/A", variant: "Hair", imageSrc: "http://img.b2bpic.net/free-photo/positive-carefreee-woman-keeps-eyes-closed-raises-arms-smiles-gently-dressed-elegant-formal-jacket-recalls-something-pleasant-mind-isolated-blue-background-happy-emotions-concept_273609-60208.jpg", imageAlt: "Beautifully styled natural curly hair"},
|
|
{
|
|
id: "gallery-6", name: "The Asymmetric Bob", price: "N/A", variant: "Hair", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-fashion-model-with-bob-hair-red-lips-confidently-looking-camera-smiling-white-background_574295-4534.jpg", imageAlt: "An edgy asymmetric bob haircut"},
|
|
]}
|
|
title="The Gallery of Form"
|
|
description="Our Artistry"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
members={[
|
|
{
|
|
id: "team-1", name: "Sophia Rodriguez", role: "Lead Stylist & Colorist", imageSrc: "http://img.b2bpic.net/free-photo/excited-young-woman-with-long-hair-showing-scissors_176420-18225.jpg", imageAlt: "Portrait of Sophia Rodriguez, Lead Stylist"},
|
|
{
|
|
id: "team-2", name: "Mark Chen", role: "Precision Cutting Expert", imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-giving-haircut-customer_23-2148506232.jpg", imageAlt: "Portrait of Mark Chen, Precision Cutting Expert"},
|
|
{
|
|
id: "team-3", name: "Isabella Rossi", role: "Balayage Specialist", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg", imageAlt: "Portrait of Isabella Rossi, Balayage Specialist"},
|
|
]}
|
|
title="Meet Our Master Stylists"
|
|
description="Decades of combined expertise, blending time-honored techniques with contemporary artistry."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Elisa V.", handle: "@elisa_beauty", testimonial: "Salon Shelimar is simply the best! Sophia transformed my hair with the perfect cut and color. I always leave feeling amazing and confident.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/deaf-woman-communicating-through-sign-language_23-2148590375.jpg", imageAlt: "Portrait of Elisa V."},
|
|
{
|
|
id: "t2", name: "David M.", handle: "@david_groom", testimonial: "Mark's precision cuts are unmatched. Every time I get a haircut, it's exactly what I wanted. Highly recommend for men's styling!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-man-hair-salon_23-2150665449.jpg", imageAlt: "Portrait of David M."},
|
|
{
|
|
id: "t3", name: "Sarah J.", handle: "@sarah_styles", testimonial: "Isabella's balayage artistry is incredible. My hair has never looked so natural and sun-kissed. The color lasts beautifully.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-glamour-model-smiling-posing-camera-feeling-happy-positive-studio-carefree-joyful-woman-with-pink-hair-wig-elegant-makeup-doing-sensual-attractive-moves_482257-51058.jpg", imageAlt: "Portrait of Sarah J."},
|
|
{
|
|
id: "t4", name: "Christine L.", handle: "@christine_chic", testimonial: "A truly personalized experience. The team at Salon Shelimar listens and delivers. My deep conditioning treatment was a game-changer.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-bride-before-event_23-2149860780.jpg", imageAlt: "Portrait of Christine L."},
|
|
{
|
|
id: "t5", name: "Jessica R.", handle: "@jessica_glows", testimonial: "From the moment I walk in, I feel pampered. The atmosphere is serene, and the results are always stunning. My favorite salon!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/chest-up-shot-girl-tossing-her-head-with-eyes-closed-sun_1098-19309.jpg", imageAlt: "Portrait of Jessica R."},
|
|
]}
|
|
showRating={true}
|
|
title="What Clients Say"
|
|
description="Our clients' words reflect the dedication and passion we pour into every service."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Book Your Haircut"
|
|
description="Schedule your personalized haircut, color, or treatment. Fill out the form below, and we'll confirm your appointment shortly. For immediate assistance, feel free to call us directly at (514) 484-6902."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "phone", type: "tel", placeholder: "Your Phone Number", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email (optional)", required: false,
|
|
},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your desired style, color, or any special requests.", rows: 4,
|
|
}}
|
|
buttonText="Confirm Booking"
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-man-getting-haircut_23-2150665403.jpg?_wi=2"
|
|
imageAlt="Client receiving a haircut at Salon Shelimar"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Salon Shelimar"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{
|
|
label: "Haircuts", href: "#services"},
|
|
{
|
|
label: "Coloring", href: "#services"},
|
|
{
|
|
label: "Treatments", href: "#services"},
|
|
{
|
|
label: "Styling", href: "#services"},
|
|
],
|
|
},
|
|
{
|
|
title: "About Us", items: [
|
|
{
|
|
label: "Our Story", href: "#about"},
|
|
{
|
|
label: "Our Team", href: "#team"},
|
|
{
|
|
label: "Gallery", href: "#gallery"},
|
|
],
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{
|
|
label: "Book Now", href: "#contact"},
|
|
{
|
|
label: "Call Us", href: "tel:+15144846902"},
|
|
{
|
|
label: "Get Directions", href: "https://www.google.com/maps/dir/?api=1&destination=5769+Av.+Caldwell,+Côte+Saint-Luc,+QC+H4W+1W1"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2026 Salon Shelimar · Côte Saint-Luc, Quebec"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|