Merge version_2_1781705396573 into main #5
@@ -5,15 +5,15 @@
|
||||
|
||||
:root {
|
||||
/* @colorThemes/lightTheme/grayNavyBlue */
|
||||
--background: #f6f0e9;
|
||||
--card: #efe7dd;
|
||||
--foreground: #2b180a;
|
||||
--primary-cta: #2b180a;
|
||||
--primary-cta-text: #f6f0e9;
|
||||
--secondary-cta: #efe7dd;
|
||||
--secondary-cta-text: #2b180a;
|
||||
--accent: #94877c;
|
||||
--background-accent: #afa094;
|
||||
--background: #0a0a0a;
|
||||
--card: #171717;
|
||||
--foreground: #f5f5f5;
|
||||
--primary-cta: #f5f5f5;
|
||||
--primary-cta-text: #0a0a0a;
|
||||
--secondary-cta: #262626;
|
||||
--secondary-cta-text: #f5f5f5;
|
||||
--accent: #525252;
|
||||
--background-accent: #262626;
|
||||
|
||||
/* @layout/border-radius/rounded */
|
||||
--radius: 0.5rem;
|
||||
|
||||
@@ -1,241 +1,39 @@
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import FeaturesBento from '@/components/sections/features/FeaturesBento';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import TeamListCards from '@/components/sections/team/TeamListCards';
|
||||
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
|
||||
import { Calendar, CheckCircle, Sparkles } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
// AUTO-GENERATED shell by per-section-migrate.
|
||||
// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
|
||||
// files directly. Non-block content (wrappers, non-inlinable sections) is
|
||||
// preserved inline; extracted section blocks become <XSection/> refs.
|
||||
|
||||
export default function HomePage() {
|
||||
import React from 'react';
|
||||
import HeroSection from './HomePage/sections/Hero';
|
||||
import ServicesSection from './HomePage/sections/Services';
|
||||
import FeaturesBentoSection from './HomePage/sections/FeaturesBento';
|
||||
import TeamSection from './HomePage/sections/Team';
|
||||
import TestimonialsSection from './HomePage/sections/Testimonials';
|
||||
import ServicesGridSection from './HomePage/sections/ServicesGrid';
|
||||
import MetricsSection from './HomePage/sections/Metrics';
|
||||
import FaqSection from './HomePage/sections/Faq';
|
||||
import ContactSection from './HomePage/sections/Contact';
|
||||
|
||||
export default function HomePage(): React.JSX.Element {
|
||||
return (
|
||||
<>
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroOverlayMarquee
|
||||
tag="Your Local Beauty Experts"
|
||||
title="Complete Beauty Services, One Trusted Salon"
|
||||
description="Waxing, extensions, styling, nails, and skincare—all from certified professionals. Book your appointment in seconds."
|
||||
primaryButton={{
|
||||
text: "Book Your Appointment", href: "#contact"}}
|
||||
secondaryButton={{
|
||||
text: "View Services", href: "#services"}}
|
||||
items={[
|
||||
{
|
||||
text: "Certified Experts", icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
text: "Full Service Menu", icon: Sparkles,
|
||||
},
|
||||
{
|
||||
text: "Easy Online Booking", icon: Calendar,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/alpine-hotel-hosting-winter-sports_482257-102253.jpg?_wi=1"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<>
|
||||
<HeroSection />
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Expertise"
|
||||
title="Comprehensive Beauty Care"
|
||||
description="We provide a curated range of high-quality services designed to keep you feeling confident and refreshed."
|
||||
items={[
|
||||
{
|
||||
icon: "Scissors", title: "Hair Styling & Extensions", description: "Expert cuts, colors, and premium extensions."},
|
||||
{
|
||||
icon: "Sparkles", title: "Skincare & Facials", description: "Personalized treatments for radiant skin."},
|
||||
{
|
||||
icon: "Diamond", title: "Nail Care & Art", description: "Premium manicures and artistic nail designs."},
|
||||
{
|
||||
icon: "Sun", title: "Professional Waxing", description: "Gentle, precise hair removal services."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-smiling-owner-hairdresser-salon_329181-1953.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ServicesSection />
|
||||
|
||||
<div id="features-bento" data-section="features-bento">
|
||||
<SectionErrorBoundary name="features-bento">
|
||||
<FeaturesBento
|
||||
tag="Why Choose Us"
|
||||
title="Experience the Unique Difference"
|
||||
description="We prioritize quality, time efficiency, and comfort in everything we do."
|
||||
features={[
|
||||
{
|
||||
title: "Transparent Pricing", description: "Know your investment before you book.", bentoComponent: "info-card-marquee", infoCards: [
|
||||
{
|
||||
icon: "DollarSign", label: "Clear", value: "Pricing"},
|
||||
{
|
||||
icon: "Clock", label: "Fast", value: "Service"},
|
||||
{
|
||||
icon: "Award", label: "Expert", value: "Staff"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Premium Standards", description: "Our certified professionals use top-tier tools.", bentoComponent: "media-stack", mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/alpine-hotel-hosting-winter-sports_482257-102253.jpg?_wi=2"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mixed-race-woman-with-hand-dark-skinned-man-around-neck_8353-12401.jpg"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-setting-hair-client-styling_23-2147769849.jpg"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Customer Satisfaction", description: "Join our community of happy regulars.", bentoComponent: "checklist-timeline", heading: "Our Process", subheading: "Ensuring the perfect experience every time.", checklistItems: [
|
||||
{
|
||||
label: "Consultation", detail: "Understand your goals"},
|
||||
{
|
||||
label: "Treatment", detail: "Professional execution"},
|
||||
{
|
||||
label: "Follow-up", detail: "Quality satisfaction check"},
|
||||
],
|
||||
completedLabel: "Book Now"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FeaturesBentoSection />
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamListCards
|
||||
tag="Meet Our Experts"
|
||||
title="Talented Professional Team"
|
||||
description="Get to know the passionate specialists behind our beauty services."
|
||||
groups={[
|
||||
{
|
||||
title: "Salon Leadership & Styling", members: [
|
||||
{
|
||||
name: "Jane Smith", role: "Head Stylist", detail: "10+ years of creative styling experience.", imageSrc: "http://img.b2bpic.net/free-photo/amazing-laughing-redhead-young-lady-standing-cafe_171337-15271.jpg"},
|
||||
{
|
||||
name: "Robert Chen", role: "Senior Colorist", detail: "Expertise in balayage and highlights.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-relaxed-content-woman-leaning-wall_1262-1749.jpg"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Aesthetics & Care", members: [
|
||||
{
|
||||
name: "Emily Davis", role: "Lead Esthetician", detail: "Specialized in advanced skincare facials.", imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg"},
|
||||
{
|
||||
name: "Sarah Miller", role: "Nail Artist", detail: "Precision nail care and art specialist.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-bride-indoors_23-2149721992.jpg"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TeamSection />
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Client Reviews"
|
||||
title="What Our Clients Say"
|
||||
description="Join our satisfied guests who trust us with their beauty routine."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alice Johnson", role: "Professional", quote: "The best salon experience I've had in years. Professional and fast!", imageSrc: "http://img.b2bpic.net/free-photo/she-looks-relaxed-her-home_329181-1170.jpg"},
|
||||
{
|
||||
name: "Brian Smith", role: "Regular Client", quote: "I come here for all my treatments. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-with-curly-hair_23-2151317377.jpg"},
|
||||
{
|
||||
name: "Chloe Brown", role: "Frequent Visitor", quote: "Absolutely love the color transformation. 5 stars!", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg"},
|
||||
{
|
||||
name: "David Wilson", role: "Happy Client", quote: "The team is so friendly and detail-oriented.", imageSrc: "http://img.b2bpic.net/free-photo/man-presenting-necklace-charming-woman_23-2147736699.jpg"},
|
||||
{
|
||||
name: "Eva Martinez", role: "New Client", quote: "Professional, welcoming, and high-quality services.", imageSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-holding-brush_23-2148784359.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<TestimonialsSection />
|
||||
|
||||
<div id="services-grid" data-section="services-grid">
|
||||
<SectionErrorBoundary name="services-grid">
|
||||
<FeaturesImageBento
|
||||
tag="Service Menu"
|
||||
title="Our Full Service Menu"
|
||||
description="Explore our complete range of specialized beauty treatments."
|
||||
items={[
|
||||
{
|
||||
title: "Waxing", description: "Full body waxing services.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-leg-hair-removed_107420-74068.jpg"},
|
||||
{
|
||||
title: "Extensions", description: "Premium hair extensions.", imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108824.jpg"},
|
||||
{
|
||||
title: "Styling", description: "Modern hair cuts and styles.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-fashion-portrait-beautiful-woman-with-perfect-skin-dreaming-alone-looking-floor-enjoy-her-thoughts-have-natural-make-up-posing-sea-port_291049-1721.jpg"},
|
||||
{
|
||||
title: "Manicures", description: "Beautiful nail designs.", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hands-adorned-with-rings-black-nail-polish_23-2152015297.jpg"},
|
||||
{
|
||||
title: "Facials", description: "Deep cleansing skincare.", imageSrc: "http://img.b2bpic.net/free-photo/woman-cosmetology-studio-procedures_1157-34930.jpg"},
|
||||
{
|
||||
title: "Pedicures", description: "Nail care & foot health.", imageSrc: "http://img.b2bpic.net/free-photo/hair-tool-assortment-sakura-blossoms_23-2148352917.jpg"},
|
||||
{
|
||||
title: "Full Package", description: "The ultimate day of beauty.", imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ServicesGridSection />
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsIconCards
|
||||
tag="By the Numbers"
|
||||
title="Trusted Service Excellence"
|
||||
description="Proven results for your beauty needs."
|
||||
metrics={[
|
||||
{
|
||||
icon: "Star", title: "Rating", value: "4.8+"},
|
||||
{
|
||||
icon: "Users", title: "Happy Clients", value: "1,500+"},
|
||||
{
|
||||
icon: "Award", title: "Years Experience", value: "10+"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<MetricsSection />
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTabbedAccordion
|
||||
tag="Common Questions"
|
||||
title="Frequently Asked Questions"
|
||||
description="Find everything you need to know about our services."
|
||||
categories={[
|
||||
{
|
||||
name: "Booking", items: [
|
||||
{
|
||||
question: "Can I book online?", answer: "Yes, our online system is open 24/7."},
|
||||
{
|
||||
question: "Can I cancel my booking?", answer: "Cancellations made 24 hours prior are fully refundable."},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Services", items: [
|
||||
{
|
||||
question: "Are your stylists certified?", answer: "All team members are fully licensed and certified."},
|
||||
{
|
||||
question: "Do you offer consultations?", answer: "Yes, we offer complimentary consultations before any major service."},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<FaqSection />
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Ready to Start?"
|
||||
text="Book your appointment in seconds and experience professional beauty care."
|
||||
primaryButton={{
|
||||
text: "Book Appointment", href: "#"}}
|
||||
secondaryButton={{
|
||||
text: "Call Us", href: "tel:5551234567"}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
<ContactSection />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
23
src/pages/HomePage/sections/Contact.tsx
Normal file
23
src/pages/HomePage/sections/Contact.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "contact" section.
|
||||
|
||||
import React from 'react';
|
||||
import ContactCta from '@/components/sections/contact/ContactCta';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ContactSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="contact" data-section="contact">
|
||||
<SectionErrorBoundary name="contact">
|
||||
<ContactCta
|
||||
tag="Ready to Start?"
|
||||
text="Book your appointment in seconds and experience professional beauty care."
|
||||
primaryButton={{
|
||||
text: "Book Appointment", href: "#"}}
|
||||
secondaryButton={{
|
||||
text: "Call Us", href: "tel:5551234567"}}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/pages/HomePage/sections/Faq.tsx
Normal file
38
src/pages/HomePage/sections/Faq.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "faq" section.
|
||||
|
||||
import React from 'react';
|
||||
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FaqSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="faq" data-section="faq">
|
||||
<SectionErrorBoundary name="faq">
|
||||
<FaqTabbedAccordion
|
||||
tag="Common Questions"
|
||||
title="Frequently Asked Questions"
|
||||
description="Find everything you need to know about our services."
|
||||
categories={[
|
||||
{
|
||||
name: "Booking", items: [
|
||||
{
|
||||
question: "Can I book online?", answer: "Yes, our online system is open 24/7."},
|
||||
{
|
||||
question: "Can I cancel my booking?", answer: "Cancellations made 24 hours prior are fully refundable."},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Services", items: [
|
||||
{
|
||||
question: "Are your stylists certified?", answer: "All team members are fully licensed and certified."},
|
||||
{
|
||||
question: "Do you offer consultations?", answer: "Yes, we offer complimentary consultations before any major service."},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
52
src/pages/HomePage/sections/FeaturesBento.tsx
Normal file
52
src/pages/HomePage/sections/FeaturesBento.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "features-bento" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesBento from '@/components/sections/features/FeaturesBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function FeaturesBentoSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="features-bento" data-section="features-bento">
|
||||
<SectionErrorBoundary name="features-bento">
|
||||
<FeaturesBento
|
||||
tag="Why Choose Us"
|
||||
title="Experience the Unique Difference"
|
||||
description="We prioritize quality, time efficiency, and comfort in everything we do."
|
||||
features={[
|
||||
{
|
||||
title: "Transparent Pricing", description: "Know your investment before you book.", bentoComponent: "info-card-marquee", infoCards: [
|
||||
{
|
||||
icon: "DollarSign", label: "Clear", value: "Pricing"},
|
||||
{
|
||||
icon: "Clock", label: "Fast", value: "Service"},
|
||||
{
|
||||
icon: "Award", label: "Expert", value: "Staff"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Premium Standards", description: "Our certified professionals use top-tier tools.", bentoComponent: "media-stack", mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/alpine-hotel-hosting-winter-sports_482257-102253.jpg?_wi=2"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mixed-race-woman-with-hand-dark-skinned-man-around-neck_8353-12401.jpg"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-setting-hair-client-styling_23-2147769849.jpg"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Customer Satisfaction", description: "Join our community of happy regulars.", bentoComponent: "checklist-timeline", heading: "Our Process", subheading: "Ensuring the perfect experience every time.", checklistItems: [
|
||||
{
|
||||
label: "Consultation", detail: "Understand your goals"},
|
||||
{
|
||||
label: "Treatment", detail: "Professional execution"},
|
||||
{
|
||||
label: "Follow-up", detail: "Quality satisfaction check"},
|
||||
],
|
||||
completedLabel: "Book Now"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
37
src/pages/HomePage/sections/Hero.tsx
Normal file
37
src/pages/HomePage/sections/Hero.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "hero" section.
|
||||
|
||||
import React from 'react';
|
||||
import HeroOverlayMarquee from '@/components/sections/hero/HeroOverlayMarquee';
|
||||
import { Calendar, CheckCircle, Sparkles } from "lucide-react";
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function HeroSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="hero" data-section="hero">
|
||||
<SectionErrorBoundary name="hero">
|
||||
<HeroOverlayMarquee
|
||||
tag="Your Local Beauty Experts"
|
||||
title="Complete Beauty Services, One Trusted Salon"
|
||||
description="Waxing, extensions, styling, nails, and skincare—all from certified professionals. Book your appointment in seconds."
|
||||
primaryButton={{
|
||||
text: "Book Your Appointment", href: "#contact"}}
|
||||
secondaryButton={{
|
||||
text: "View Services", href: "#services"}}
|
||||
items={[
|
||||
{
|
||||
text: "Certified Experts", icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
text: "Full Service Menu", icon: Sparkles,
|
||||
},
|
||||
{
|
||||
text: "Easy Online Booking", icon: Calendar,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/alpine-hotel-hosting-winter-sports_482257-102253.jpg?_wi=1"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
28
src/pages/HomePage/sections/Metrics.tsx
Normal file
28
src/pages/HomePage/sections/Metrics.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "metrics" section.
|
||||
|
||||
import React from 'react';
|
||||
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function MetricsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="metrics" data-section="metrics">
|
||||
<SectionErrorBoundary name="metrics">
|
||||
<MetricsIconCards
|
||||
tag="By the Numbers"
|
||||
title="Trusted Service Excellence"
|
||||
description="Proven results for your beauty needs."
|
||||
metrics={[
|
||||
{
|
||||
icon: "Star", title: "Rating", value: "4.8+"},
|
||||
{
|
||||
icon: "Users", title: "Happy Clients", value: "1,500+"},
|
||||
{
|
||||
icon: "Award", title: "Years Experience", value: "10+"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
31
src/pages/HomePage/sections/Services.tsx
Normal file
31
src/pages/HomePage/sections/Services.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "services" section.
|
||||
|
||||
import React from 'react';
|
||||
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ServicesSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="services" data-section="services">
|
||||
<SectionErrorBoundary name="services">
|
||||
<AboutFeaturesSplit
|
||||
tag="Our Expertise"
|
||||
title="Comprehensive Beauty Care"
|
||||
description="We provide a curated range of high-quality services designed to keep you feeling confident and refreshed."
|
||||
items={[
|
||||
{
|
||||
icon: "Scissors", title: "Hair Styling & Extensions", description: "Expert cuts, colors, and premium extensions."},
|
||||
{
|
||||
icon: "Sparkles", title: "Skincare & Facials", description: "Personalized treatments for radiant skin."},
|
||||
{
|
||||
icon: "Diamond", title: "Nail Care & Art", description: "Premium manicures and artistic nail designs."},
|
||||
{
|
||||
icon: "Sun", title: "Professional Waxing", description: "Gentle, precise hair removal services."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/portrait-smiling-owner-hairdresser-salon_329181-1953.jpg"
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
36
src/pages/HomePage/sections/ServicesGrid.tsx
Normal file
36
src/pages/HomePage/sections/ServicesGrid.tsx
Normal file
@@ -0,0 +1,36 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "services-grid" section.
|
||||
|
||||
import React from 'react';
|
||||
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function ServicesGridSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="services-grid" data-section="services-grid">
|
||||
<SectionErrorBoundary name="services-grid">
|
||||
<FeaturesImageBento
|
||||
tag="Service Menu"
|
||||
title="Our Full Service Menu"
|
||||
description="Explore our complete range of specialized beauty treatments."
|
||||
items={[
|
||||
{
|
||||
title: "Waxing", description: "Full body waxing services.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-leg-hair-removed_107420-74068.jpg"},
|
||||
{
|
||||
title: "Extensions", description: "Premium hair extensions.", imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108824.jpg"},
|
||||
{
|
||||
title: "Styling", description: "Modern hair cuts and styles.", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-fashion-portrait-beautiful-woman-with-perfect-skin-dreaming-alone-looking-floor-enjoy-her-thoughts-have-natural-make-up-posing-sea-port_291049-1721.jpg"},
|
||||
{
|
||||
title: "Manicures", description: "Beautiful nail designs.", imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hands-adorned-with-rings-black-nail-polish_23-2152015297.jpg"},
|
||||
{
|
||||
title: "Facials", description: "Deep cleansing skincare.", imageSrc: "http://img.b2bpic.net/free-photo/woman-cosmetology-studio-procedures_1157-34930.jpg"},
|
||||
{
|
||||
title: "Pedicures", description: "Nail care & foot health.", imageSrc: "http://img.b2bpic.net/free-photo/hair-tool-assortment-sakura-blossoms_23-2148352917.jpg"},
|
||||
{
|
||||
title: "Full Package", description: "The ultimate day of beauty.", imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
38
src/pages/HomePage/sections/Team.tsx
Normal file
38
src/pages/HomePage/sections/Team.tsx
Normal file
@@ -0,0 +1,38 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "team" section.
|
||||
|
||||
import React from 'react';
|
||||
import TeamListCards from '@/components/sections/team/TeamListCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TeamSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="team" data-section="team">
|
||||
<SectionErrorBoundary name="team">
|
||||
<TeamListCards
|
||||
tag="Meet Our Experts"
|
||||
title="Talented Professional Team"
|
||||
description="Get to know the passionate specialists behind our beauty services."
|
||||
groups={[
|
||||
{
|
||||
title: "Salon Leadership & Styling", members: [
|
||||
{
|
||||
name: "Jane Smith", role: "Head Stylist", detail: "10+ years of creative styling experience.", imageSrc: "http://img.b2bpic.net/free-photo/amazing-laughing-redhead-young-lady-standing-cafe_171337-15271.jpg"},
|
||||
{
|
||||
name: "Robert Chen", role: "Senior Colorist", detail: "Expertise in balayage and highlights.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-relaxed-content-woman-leaning-wall_1262-1749.jpg"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Aesthetics & Care", members: [
|
||||
{
|
||||
name: "Emily Davis", role: "Lead Esthetician", detail: "Specialized in advanced skincare facials.", imageSrc: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg"},
|
||||
{
|
||||
name: "Sarah Miller", role: "Nail Artist", detail: "Precision nail care and art specialist.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-bride-indoors_23-2149721992.jpg"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
src/pages/HomePage/sections/Testimonials.tsx
Normal file
32
src/pages/HomePage/sections/Testimonials.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
|
||||
// file as the canonical source for the "testimonials" section.
|
||||
|
||||
import React from 'react';
|
||||
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
|
||||
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
||||
|
||||
export default function TestimonialsSection(): React.JSX.Element {
|
||||
return (
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<SectionErrorBoundary name="testimonials">
|
||||
<TestimonialColumnMarqueeCards
|
||||
tag="Client Reviews"
|
||||
title="What Our Clients Say"
|
||||
description="Join our satisfied guests who trust us with their beauty routine."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alice Johnson", role: "Professional", quote: "The best salon experience I've had in years. Professional and fast!", imageSrc: "http://img.b2bpic.net/free-photo/she-looks-relaxed-her-home_329181-1170.jpg"},
|
||||
{
|
||||
name: "Brian Smith", role: "Regular Client", quote: "I come here for all my treatments. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-with-curly-hair_23-2151317377.jpg"},
|
||||
{
|
||||
name: "Chloe Brown", role: "Frequent Visitor", quote: "Absolutely love the color transformation. 5 stars!", imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg"},
|
||||
{
|
||||
name: "David Wilson", role: "Happy Client", quote: "The team is so friendly and detail-oriented.", imageSrc: "http://img.b2bpic.net/free-photo/man-presenting-necklace-charming-woman_23-2147736699.jpg"},
|
||||
{
|
||||
name: "Eva Martinez", role: "New Client", quote: "Professional, welcoming, and high-quality services.", imageSrc: "http://img.b2bpic.net/free-photo/male-make-up-look-holding-brush_23-2148784359.jpg"},
|
||||
]}
|
||||
/>
|
||||
</SectionErrorBoundary>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user