Files
b0ab3e28-34e8-469e-a52b-7df…/src/pages/HomePage.tsx
2026-06-18 22:52:58 +00:00

172 lines
10 KiB
TypeScript

import AboutTextSplit from '@/components/sections/about/AboutTextSplit';
import ContactCta from '@/components/sections/contact/ContactCta';
import FaqSimple from '@/components/sections/faq/FaqSimple';
import FeaturesBentoGrid from '@/components/sections/features/FeaturesBentoGrid';
import FeaturesRevealCardsBento from '@/components/sections/features/FeaturesRevealCardsBento';
import HeroCenteredLogos from '@/components/sections/hero/HeroCenteredLogos';
import TeamListCards from '@/components/sections/team/TeamListCards';
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HomePage() {
return (
<>
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroCenteredLogos
avatarsSrc={[
"http://img.b2bpic.net/free-photo/teen-sitting-motorbike-looking-mirror_1139-377.jpg", "http://img.b2bpic.net/free-photo/professional-barber-man-apron-looking-front-with-frowning-face-standing-blue-wall_141793-96360.jpg", "http://img.b2bpic.net/free-photo/female-hairdresser-holding-bottle-shampoo_107420-12149.jpg", "http://img.b2bpic.net/free-photo/portrait-stylish-maledressed-suit-grey-background_613910-1592.jpg"]}
avatarText="Trusted by 500+ happy clients"
title="Welcome to Meraki"
description="Where art meets hair. Experience personalized styling in a serene, professional atmosphere."
primaryButton={{
text: "Book an Appointment", href: "#contact"}}
secondaryButton={{
text: "Our Services", href: "#services"}}
names={[
"Elena", "Marco", "Sofia", "Luca"]}
imageSrc="http://img.b2bpic.net/free-photo/close-up-metallic-piano-seat_23-2151113191.jpg"
/>
</SectionErrorBoundary>
</div>
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutTextSplit
title="The Meraki Philosophy"
descriptions={[
"Meraki is a Greek term meaning to do something with soul, creativity, or love. We bring this spirit to every cut, color, and style.", "Founded in the heart of the city, our salon is a haven for those looking to express their unique identity through bespoke hair care. Our team of stylists is dedicated to perfecting the craft."]}
/>
</SectionErrorBoundary>
</div>
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesBentoGrid
tag="Our Expertise"
title="Why Choose Us?"
description="We specialize in bringing out the natural beauty of your hair using high-quality products."
features={[
{
title: "Bespoke Coloring", description: "Custom color blends tailored for your unique complexion and style.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668430.jpg"},
{
title: "Styling Sessions", description: "Elevated cuts and styles designed to grow out gracefully.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-arrangement-with-scissors_23-2149007425.jpg"},
{
title: "Hair Treatments", description: "Restorative treatments using luxury, sustainable, and salon-grade formulas.", imageSrc: "http://img.b2bpic.net/free-photo/white-towel-bottles-shampoo-conditioner-lie-table-with-green-leaf-aloe_8353-7050.jpg"},
{
title: "Bridal Packages", description: "Professional wedding styling to ensure you look your absolute best on your big day.", imageSrc: "http://img.b2bpic.net/free-photo/bride-posing-showing-her-back_1328-3451.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<div id="services" data-section="services">
<SectionErrorBoundary name="services">
<FeaturesRevealCardsBento
tag="Salon Menu"
title="Our Professional Services"
description="Discover our curated list of hair styling and treatment services."
items={[
{
title: "Ladies' Cut", description: "Full consultation and precision haircut.", href: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/make-up-artist-work-her-beauty-visage-studio-salon-woman-applying-by-professional-make-up-master-beauty-club-concept_627829-9054.jpg"},
{
title: "Men's Cut", description: "Modern precision grooming and styling.", href: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/close-up-serious-man-getting-ready-new-look_23-2148256983.jpg"},
{
title: "Balayage Highlights", description: "Natural sun-kissed color techniques.", href: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/back-view-beautiful-hair_23-2148376744.jpg"},
{
title: "Keratin Therapy", description: "Smoothing and protein strengthening.", href: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230933.jpg"},
{
title: "Scalp Treatment", description: "Detoxifying and revitalizing care.", href: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-combing-customer-hair_23-2148256929.jpg"},
{
title: "Glossing", description: "Shine enhancement and color refresh.", href: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-done-hairdresser_23-2150771238.jpg"},
{
title: "Updo Styling", description: "Elegant arrangements for any occasion.", href: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-portrait-woman-white-wedding-dress-sitting-near-blue-swimming-pool-with-flowers_343596-268.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialColumnMarqueeCards
tag="Love from Clients"
title="What People Are Saying"
description="Genuine reviews from our cherished clientele."
testimonials={[
{
name: "Anna S.", role: "Fashion Designer", quote: "The best balayage I've ever had. Truly professional.", imageSrc: "http://img.b2bpic.net/free-photo/caucasian-glad-girl-pink-eyemask-laughing-while-posing-kitchen-indoor-photo-pretty-sisters-joking-morning_197531-21460.jpg"},
{
name: "Marco P.", role: "Business Owner", quote: "I don't go anywhere else. Top notch service.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-smiling_93675-133804.jpg"},
{
name: "Laura G.", role: "Marketing", quote: "Their attention to detail is just unmatched.", imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-playing-with-party-accesories_1187-3499.jpg"},
{
name: "Sofia R.", role: "Architect", quote: "My hair has never been healthier or looked this good.", imageSrc: "http://img.b2bpic.net/free-photo/old-woman-uses-phone-photo-hotel_482257-103236.jpg"},
{
name: "Luca M.", role: "Photographer", quote: "Creative, talented, and extremely professional.", imageSrc: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575478.jpg"},
]}
/>
</SectionErrorBoundary>
</div>
<div id="team" data-section="team">
<SectionErrorBoundary name="team">
<TeamListCards
tag="Meet the Artists"
title="Our Expert Team"
description="Meet the creative professionals dedicated to your style."
groups={[
{
title: "Senior Stylists", members: [
{
name: "Elena", role: "Lead Creative Director", detail: "Specializing in avant-garde and natural cuts.", imageSrc: "http://img.b2bpic.net/free-photo/transgender-wearing-cool-jacket-medium-shot_23-2149105398.jpg"},
{
name: "Marco", role: "Colorist Expert", detail: "Master of balayage and corrective color.", imageSrc: "http://img.b2bpic.net/free-photo/pleased-looking-young-beautiful-female-barber-uniform-showing-timeout-gesture-isolated-pink-wall_141793-106045.jpg"},
],
},
{
title: "Junior Stylists", members: [
{
name: "Sofia", role: "Stylist", detail: "Fresh trends and styling techniques.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cute-small-girl-near-shiny-car-atuo-service-workshop_613910-3495.jpg"},
{
name: "Luca", role: "Junior Stylist", detail: "Specialist in grooming and treatments.", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-female-barber-wearing-uniform-glasses-headband-looking-camera-showing-thumb-up-isolated-red-background_141793-137078.jpg"},
],
},
]}
/>
</SectionErrorBoundary>
</div>
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqSimple
tag="Got Questions?"
title="Frequently Asked Questions"
description="Here is what our clients usually want to know before booking."
items={[
{
question: "How often should I trim my hair?", answer: "Generally, every 6-8 weeks is recommended to keep hair healthy."},
{
question: "Do you use organic products?", answer: "Yes, we prioritize sustainable and organic-based products for all treatments."},
{
question: "How do I book online?", answer: "You can reach out through our contact form or call us directly."},
]}
/>
</SectionErrorBoundary>
</div>
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Visit Us"
text="Ready for a transformation? We are located in the heart of the city. Book your appointment today."
primaryButton={{
text: "Call to Book", href: "tel:000000000"}}
secondaryButton={{
text: "Email Us", href: "mailto:info@meraki.salon"}}
/>
</SectionErrorBoundary>
</div>
</>
);
}