Merge version_2_1781534837353 into main #2

Merged
bender merged 1 commits from version_2_1781534837353 into main 2026-06-15 14:49:04 +00:00
10 changed files with 337 additions and 236 deletions

View File

@@ -5,15 +5,15 @@
:root {
/* @colorThemes/lightTheme/grayNavyBlue */
--background: #e3deea;
--card: #ffffff;
--foreground: #27231f;
--primary-cta: #27231f;
--primary-cta-text: #e3deea;
--background: #ffffff;
--card: #f5f5f5;
--foreground: #000000;
--primary-cta: #000000;
--primary-cta-text: #ffffff;
--secondary-cta: #ffffff;
--secondary-cta-text: #27231f;
--accent: #c68a62;
--background-accent: #c68a62;
--secondary-cta-text: #000000;
--accent: #000000;
--background-accent: #000000;
/* @layout/border-radius/rounded */
--radius: 1rem;

View File

@@ -1,240 +1,36 @@
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
import ContactCta from '@/components/sections/contact/ContactCta';
import FaqTabbedAccordion from '@/components/sections/faq/FaqTabbedAccordion';
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
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 AboutSection from './HomePage/sections/About';
import FeaturesSection from './HomePage/sections/Features';
import ServicesSection from './HomePage/sections/Services';
import MetricsSection from './HomePage/sections/Metrics';
import TestimonialsSection from './HomePage/sections/Testimonials';
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">
<HeroBillboardBrand
brand="Opulence Nails and Aesthetics"
description="Experience premium beauty services in the heart of Westdene. From precision nail art to rejuvenating body treatments, we define luxury."
primaryButton={{
text: "Book Appointment",
href: "#contact",
}}
secondaryButton={{
text: "Explore Services",
href: "#services",
}}
imageSrc="http://img.b2bpic.net/free-photo/blurry-room-with-wooden-floor_1203-1050.jpg"
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutTestimonial
tag="Our Philosophy"
quote="At Opulence, beauty is an art form. We combine meticulous technique with a serene environment to provide a truly restorative experience."
author="The Opulence Team"
role="Salon Founders"
imageSrc="http://img.b2bpic.net/free-photo/client-lies-salon-cosmetology-table-with-white-mask-her-face_343596-4297.jpg"
/>
</SectionErrorBoundary>
</div>
<AboutSection />
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesRevealCards
tag="Our Specialties"
title="Curated Beauty Experiences"
description="We specialize in tailored treatments to enhance your natural beauty with precision and care."
items={[
{
title: "Nail Artistry",
description: "From acrylics to intricate gel designs, our technicians bring creativity to your fingertips.",
imageSrc: "http://img.b2bpic.net/free-photo/brushes-nail-polishes_23-2147778932.jpg",
},
{
title: "Lash & Brow",
description: "Define your expression with expert shaping and long-lasting extensions.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-using-eyelash-curler_23-2148752480.jpg",
},
{
title: "Body Wellness",
description: "Rejuvenate your spirit with professional massage and specialized skin treatments.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-bathing-brush-with-essential-oils-candles-spa-concept_127675-2567.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<FeaturesSection />
<div id="services" data-section="services">
<SectionErrorBoundary name="services">
<FeaturesImageBento
tag="Services"
title="Our Full Treatment Menu"
description="Explore our comprehensive range of beauty solutions tailored to your individual needs."
items={[
{
title: "Acrylic Nails",
description: "Durable and beautiful finishes.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-manicure-pink-t-shirt-with-black-gloves-black-mask-doing-manicure-blue_140725-24226.jpg",
},
{
title: "Gel Manicures",
description: "High-shine, long-lasting color.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-female-hands-finger-nail-treatment-making-process-professional-nail-file-drill-action-beauty-hand-care-concept_343596-2342.jpg",
},
{
title: "Brow Shaping",
description: "Precision styling for your face.",
imageSrc: "http://img.b2bpic.net/free-photo/beautician-doing-eyebrow-treatment-her-client_23-2148910494.jpg",
},
{
title: "Box Braids",
description: "Expert braiding techniques.",
imageSrc: "http://img.b2bpic.net/free-photo/stylist-woman-taking-care-her-client-afro-hair_23-2149259361.jpg",
},
{
title: "Pedicure Services",
description: "Deeply relaxing foot care.",
imageSrc: "http://img.b2bpic.net/free-photo/view-realistic-feet-touching-clear-flowing-water_23-2151210278.jpg",
},
{
title: "Professional Waxing",
description: "Effective hair removal.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-leg-hair-removed_107420-74067.jpg",
},
{
title: "Hair Styling",
description: "Complete hair transformation.",
imageSrc: "http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462519.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<ServicesSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsSimpleCards
tag="Our Impact"
title="Beauty by the Numbers"
description="Trusted by our community to deliver consistent, high-quality results."
metrics={[
{
value: "85+",
description: "Five-Star Reviews",
},
{
value: "4.9",
description: "Average Rating",
},
{
value: "15+",
description: "Services Provided",
},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialQuoteCards
tag="Client Stories"
title="What Our Clients Say"
description="Hear from our community about their experiences at our salon."
testimonials={[
{
name: "Sarah M.",
role: "Regular Client",
quote: "The absolute best place in Bloemfontein for nails. Highly recommend!",
imageSrc: "http://img.b2bpic.net/free-photo/mutual-creative-work-young-beautiful-couple-casual-clothes-aprons-people-creating-bowl-pottery-wheel-clay-studio_1157-40131.jpg",
},
{
name: "Linda K.",
role: "Bride-to-be",
quote: "Opulence made my wedding day perfect with the best set of nails ever.",
imageSrc: "http://img.b2bpic.net/free-photo/pretty-caucasian-young-girl-with-dark-hair-casual-clothes-looks-camera-sitting-backyard-mood-lifestyle-concept_197531-32586.jpg",
},
{
name: "Thandi N.",
role: "Client",
quote: "Fantastic service, so professional and friendly staff.",
imageSrc: "http://img.b2bpic.net/free-photo/beauty-woman-talking-by-mobile-phone-home_329181-4277.jpg",
},
{
name: "Brenda R.",
role: "Regular Client",
quote: "I always leave feeling so pampered and refreshed.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229815.jpg",
},
{
name: "Chloe T.",
role: "Client",
quote: "Stunning results every single time I visit.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiling-bride-young-woman-with-wedding-hairstyle-silk-robe-drinking-looking-bridesmaids-gray-style-robes-standing-spacious-room-near-window_8353-12010.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<TestimonialsSection />
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqTabbedAccordion
tag="Help"
title="Frequently Asked Questions"
description="Everything you need to know about your appointment."
categories={[
{
name: "Appointments",
items: [
{
question: "How do I book?",
answer: "You can call us directly or use our online booking platform via the link below.",
},
{
question: "Can I cancel?",
answer: "Please provide 24 hours notice for all cancellations.",
},
],
},
{
name: "Services",
items: [
{
question: "Do you offer afro hair treatments?",
answer: "Yes, we specialize in a wide variety of hair services including afro care and braiding.",
},
{
question: "Is parking available?",
answer: "Yes, secure parking is available near the salon.",
},
],
},
]}
/>
</SectionErrorBoundary>
</div>
<FaqSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Get in Touch"
text="Ready for your opulence experience? Book your visit today."
primaryButton={{
text: "Call Now: 051 004 0344",
href: "tel:0510040344",
}}
secondaryButton={{
text: "Visit Us",
href: "https://maps.google.com",
}}
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

View File

@@ -0,0 +1,22 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "about" section.
import React from 'react';
import AboutTestimonial from '@/components/sections/about/AboutTestimonial';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function AboutSection(): React.JSX.Element {
return (
<div id="about" data-section="about">
<SectionErrorBoundary name="about">
<AboutTestimonial
tag="Our Philosophy"
quote="At Opulence, beauty is an art form. We combine meticulous technique with a serene environment to provide a truly restorative experience."
author="The Opulence Team"
role="Salon Founders"
imageSrc="http://img.b2bpic.net/free-photo/client-lies-salon-cosmetology-table-with-white-mask-her-face_343596-4297.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,27 @@
// 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="Get in Touch"
text="Ready for your opulence experience? Book your visit today."
primaryButton={{
text: "Call Now: 051 004 0344",
href: "tel:0510040344",
}}
secondaryButton={{
text: "Visit Us",
href: "https://maps.google.com",
}}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,48 @@
// 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="Help"
title="Frequently Asked Questions"
description="Everything you need to know about your appointment."
categories={[
{
name: "Appointments",
items: [
{
question: "How do I book?",
answer: "You can call us directly or use our online booking platform via the link below.",
},
{
question: "Can I cancel?",
answer: "Please provide 24 hours notice for all cancellations.",
},
],
},
{
name: "Services",
items: [
{
question: "Do you offer afro hair treatments?",
answer: "Yes, we specialize in a wide variety of hair services including afro care and braiding.",
},
{
question: "Is parking available?",
answer: "Yes, secure parking is available near the salon.",
},
],
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,37 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "features" section.
import React from 'react';
import FeaturesRevealCards from '@/components/sections/features/FeaturesRevealCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FeaturesSection(): React.JSX.Element {
return (
<div id="features" data-section="features">
<SectionErrorBoundary name="features">
<FeaturesRevealCards
tag="Our Specialties"
title="Curated Beauty Experiences"
description="We specialize in tailored treatments to enhance your natural beauty with precision and care."
items={[
{
title: "Nail Artistry",
description: "From acrylics to intricate gel designs, our technicians bring creativity to your fingertips.",
imageSrc: "http://img.b2bpic.net/free-photo/brushes-nail-polishes_23-2147778932.jpg",
},
{
title: "Lash & Brow",
description: "Define your expression with expert shaping and long-lasting extensions.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-using-eyelash-curler_23-2148752480.jpg",
},
{
title: "Body Wellness",
description: "Rejuvenate your spirit with professional massage and specialized skin treatments.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-bathing-brush-with-essential-oils-candles-spa-concept_127675-2567.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,28 @@
// 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 HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function HeroSection(): React.JSX.Element {
return (
<div id="hero" data-section="hero">
<SectionErrorBoundary name="hero">
<HeroBillboardBrand
brand="Opulence Nails and Aesthetics"
description="Experience premium beauty services in the heart of Westdene. From precision nail art to rejuvenating body treatments, we define luxury."
primaryButton={{
text: "Book Appointment",
href: "#contact",
}}
secondaryButton={{
text: "Explore Services",
href: "#services",
}}
imageSrc="http://img.b2bpic.net/free-photo/blurry-room-with-wooden-floor_1203-1050.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,34 @@
// 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 MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function MetricsSection(): React.JSX.Element {
return (
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsSimpleCards
tag="Our Impact"
title="Beauty by the Numbers"
description="Trusted by our community to deliver consistent, high-quality results."
metrics={[
{
value: "85+",
description: "Five-Star Reviews",
},
{
value: "4.9",
description: "Average Rating",
},
{
value: "15+",
description: "Services Provided",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,57 @@
// 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 FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ServicesSection(): React.JSX.Element {
return (
<div id="services" data-section="services">
<SectionErrorBoundary name="services">
<FeaturesImageBento
tag="Services"
title="Our Full Treatment Menu"
description="Explore our comprehensive range of beauty solutions tailored to your individual needs."
items={[
{
title: "Acrylic Nails",
description: "Durable and beautiful finishes.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-female-manicure-pink-t-shirt-with-black-gloves-black-mask-doing-manicure-blue_140725-24226.jpg",
},
{
title: "Gel Manicures",
description: "High-shine, long-lasting color.",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-female-hands-finger-nail-treatment-making-process-professional-nail-file-drill-action-beauty-hand-care-concept_343596-2342.jpg",
},
{
title: "Brow Shaping",
description: "Precision styling for your face.",
imageSrc: "http://img.b2bpic.net/free-photo/beautician-doing-eyebrow-treatment-her-client_23-2148910494.jpg",
},
{
title: "Box Braids",
description: "Expert braiding techniques.",
imageSrc: "http://img.b2bpic.net/free-photo/stylist-woman-taking-care-her-client-afro-hair_23-2149259361.jpg",
},
{
title: "Pedicure Services",
description: "Deeply relaxing foot care.",
imageSrc: "http://img.b2bpic.net/free-photo/view-realistic-feet-touching-clear-flowing-water_23-2151210278.jpg",
},
{
title: "Professional Waxing",
description: "Effective hair removal.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-leg-hair-removed_107420-74067.jpg",
},
{
title: "Hair Styling",
description: "Complete hair transformation.",
imageSrc: "http://img.b2bpic.net/free-photo/child-getting-haircut-salon_23-2150462519.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,52 @@
// 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 TestimonialQuoteCards from '@/components/sections/testimonial/TestimonialQuoteCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TestimonialsSection(): React.JSX.Element {
return (
<div id="testimonials" data-section="testimonials">
<SectionErrorBoundary name="testimonials">
<TestimonialQuoteCards
tag="Client Stories"
title="What Our Clients Say"
description="Hear from our community about their experiences at our salon."
testimonials={[
{
name: "Sarah M.",
role: "Regular Client",
quote: "The absolute best place in Bloemfontein for nails. Highly recommend!",
imageSrc: "http://img.b2bpic.net/free-photo/mutual-creative-work-young-beautiful-couple-casual-clothes-aprons-people-creating-bowl-pottery-wheel-clay-studio_1157-40131.jpg",
},
{
name: "Linda K.",
role: "Bride-to-be",
quote: "Opulence made my wedding day perfect with the best set of nails ever.",
imageSrc: "http://img.b2bpic.net/free-photo/pretty-caucasian-young-girl-with-dark-hair-casual-clothes-looks-camera-sitting-backyard-mood-lifestyle-concept_197531-32586.jpg",
},
{
name: "Thandi N.",
role: "Client",
quote: "Fantastic service, so professional and friendly staff.",
imageSrc: "http://img.b2bpic.net/free-photo/beauty-woman-talking-by-mobile-phone-home_329181-4277.jpg",
},
{
name: "Brenda R.",
role: "Regular Client",
quote: "I always leave feeling so pampered and refreshed.",
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149229815.jpg",
},
{
name: "Chloe T.",
role: "Client",
quote: "Stunning results every single time I visit.",
imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiling-bride-young-woman-with-wedding-hairstyle-silk-robe-drinking-looking-bridesmaids-gray-style-robes-standing-spacious-room-near-window_8353-12010.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}