Merge version_2_1782493686126 into main #1

Merged
bender merged 1 commits from version_2_1782493686126 into main 2026-06-26 17:12:14 +00:00
10 changed files with 331 additions and 229 deletions

View File

@@ -5,14 +5,14 @@
:root {
/* @colorThemes/lightTheme/grayNavyBlue */
--background: #f5f4ef;
--card: #dad6cd;
--foreground: #2a2928;
--primary-cta: #2a2928;
--primary-cta-text: #f5f4ef;
--secondary-cta: #ecebea;
--secondary-cta-text: #2a2928;
--accent: #ffffff;
--background: #121212;
--card: #1e1e1e;
--foreground: #f5f4ef;
--primary-cta: #c6b180;
--primary-cta-text: #121212;
--secondary-cta: #2a2928;
--secondary-cta-text: #f5f4ef;
--accent: #2a2928;
--background-accent: #c6b180;
/* @layout/border-radius/rounded */

View File

@@ -1,233 +1,36 @@
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
import ContactCta from '@/components/sections/contact/ContactCta';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
import TeamGlassCards from '@/components/sections/team/TeamGlassCards';
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
import { Award, Scissors, Sparkles, Star, Sun, Users } 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 StepsSection from './HomePage/sections/Steps';
import TeamSection from './HomePage/sections/Team';
import ReviewsSection from './HomePage/sections/Reviews';
import FaqSection from './HomePage/sections/Faq';
import MetricsSection from './HomePage/sections/Metrics';
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="KING OF FADES"
description="Where precision meets style. We offer premium grooming services designed to help you look and feel your absolute best."
primaryButton={{
text: "Book an Appointment",
href: "#contact",
}}
secondaryButton={{
text: "Our Services",
href: "#services",
}}
imageSrc="http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg"
/>
</SectionErrorBoundary>
</div>
<>
<HeroSection />
<div id="services" data-section="services">
<SectionErrorBoundary name="services">
<AboutFeaturesSplit
tag="Our Expertise"
title="Precision Grooming Redefined"
description="At King of Fades, we don't just cut hair; we curate your look with meticulous detail."
items={[
{
icon: Scissors,
title: "Precision Fades",
description: "The cleanest transitions for the sharpest look.",
},
{
icon: Sparkles,
title: "Hot Towel Shave",
description: "Classic luxury for your skin and senses.",
},
{
icon: Sun,
title: "Beard Styling",
description: "Full shape-up and grooming for refined masculinity.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/dryin-process-small-dog-sits-table-dog-drying-by-professional_1157-48815.jpg"
/>
</SectionErrorBoundary>
</div>
<ServicesSection />
<div id="steps" data-section="steps">
<SectionErrorBoundary name="steps">
<FeaturesDetailedSteps
tag="Process"
title="Your Journey to Greatness"
description="A simple experience that guarantees premium results."
steps={[
{
tag: "01",
title: "Easy Booking",
subtitle: "Select your style",
description: "Book a time that works for you.",
imageSrc: "http://img.b2bpic.net/free-photo/traditional-french-food-world-tourism-day_23-2149114058.jpg",
},
{
tag: "02",
title: "Consultation",
subtitle: "Define your look",
description: "Discuss your hair goals with a pro.",
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",
},
{
tag: "03",
title: "Precision Cut",
subtitle: "Experience luxury",
description: "Walk out feeling revitalized.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-holding-hair-dryer_23-2149220573.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<StepsSection />
<div id="team" data-section="team">
<SectionErrorBoundary name="team">
<TeamGlassCards
tag="The Artists"
title="Meet the Crew"
description="Our barbers are masters of the craft, dedicated to your satisfaction."
members={[
{
name: "Marcus J.",
role: "Master Barber",
imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg",
},
{
name: "Leo P.",
role: "Fade Expert",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-blond-bearded-male-dressed-suit-grey-background_613910-11862.jpg",
},
{
name: "Sam R.",
role: "Beard Specialist",
imageSrc: "http://img.b2bpic.net/free-photo/man-looking-away-barber-shop_23-2148353460.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<TeamSection />
<div id="reviews" data-section="reviews">
<SectionErrorBoundary name="reviews">
<TestimonialColumnMarqueeCards
tag="Social Proof"
title="Words from the Kings"
description="Join thousands of satisfied clients who choose us daily."
testimonials={[
{
name: "Alex R.",
role: "Loyal Client",
quote: "Best fades in town, hands down.",
imageSrc: "http://img.b2bpic.net/free-photo/excited-young-beautiful-female-barber-uniform-holding-barber-tools-doing-haircut-boy-isolated-pink-wall_141793-105762.jpg",
},
{
name: "James B.",
role: "Regular",
quote: "Professional, clean, and always on point.",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-lying-beanbag-chair-with-magazine_1262-1246.jpg",
},
{
name: "Mike D.",
role: "Business Owner",
quote: "King of Fades understands quality.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-looking-mirror_23-2149253016.jpg",
},
{
name: "Dan S.",
role: "Local",
quote: "Exceptional customer service every time.",
imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-horns-from-fingers-head_23-2147989969.jpg",
},
{
name: "Brian K.",
role: "Regular",
quote: "Highly recommended for any style.",
imageSrc: "http://img.b2bpic.net/free-photo/modern-young-caucasian-brunette-woman-white-shirt-looks-camera-holds-smartphone-sitting-table-with-coffee_197531-33244.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
<ReviewsSection />
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqSplitMedia
tag="Support"
title="Common Questions"
description="Get clarity on your next grooming experience."
items={[
{
question: "Do I need an appointment?",
answer: "Appointments are highly encouraged for our premium slots.",
},
{
question: "How long do cuts take?",
answer: "Usually between 30 to 45 minutes.",
},
{
question: "Are walk-ins welcome?",
answer: "We welcome walk-ins based on availability.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/close-up-barber-finishing-haircut_23-2148298296.jpg"
/>
</SectionErrorBoundary>
</div>
<FaqSection />
<div id="metrics" data-section="metrics">
<SectionErrorBoundary name="metrics">
<MetricsIconCards
tag="By Numbers"
title="Why We Are The Best"
description="Excellence verified by our community."
metrics={[
{
icon: Users,
title: "Happy Clients",
value: "10k+",
},
{
icon: Award,
title: "Years Experience",
value: "15+",
},
{
icon: Star,
title: "Average Rating",
value: "4.9",
},
]}
/>
</SectionErrorBoundary>
</div>
<MetricsSection />
<div id="contact" data-section="contact">
<SectionErrorBoundary name="contact">
<ContactCta
tag="Ready to Look Great?"
text="Book your chair with the best in the business today."
primaryButton={{
text: "Schedule Now",
href: "#booking",
}}
secondaryButton={{
text: "Call Us",
href: "tel:5551234567",
}}
/>
</SectionErrorBoundary>
</div>
<ContactSection />
</>
);
}

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="Ready to Look Great?"
text="Book your chair with the best in the business today."
primaryButton={{
text: "Schedule Now",
href: "#booking",
}}
secondaryButton={{
text: "Call Us",
href: "tel:5551234567",
}}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,35 @@
// 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 FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function FaqSection(): React.JSX.Element {
return (
<div id="faq" data-section="faq">
<SectionErrorBoundary name="faq">
<FaqSplitMedia
tag="Support"
title="Common Questions"
description="Get clarity on your next grooming experience."
items={[
{
question: "Do I need an appointment?",
answer: "Appointments are highly encouraged for our premium slots.",
},
{
question: "How long do cuts take?",
answer: "Usually between 30 to 45 minutes.",
},
{
question: "Are walk-ins welcome?",
answer: "We welcome walk-ins based on availability.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/close-up-barber-finishing-haircut_23-2148298296.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="KING OF FADES"
description="Where precision meets style. We offer premium grooming services designed to help you look and feel your absolute best."
primaryButton={{
text: "Book an Appointment",
href: "#contact",
}}
secondaryButton={{
text: "Our Services",
href: "#services",
}}
imageSrc="http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,38 @@
// 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 { Award, Scissors, Sparkles, Star, Sun, Users } from "lucide-react";
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 Numbers"
title="Why We Are The Best"
description="Excellence verified by our community."
metrics={[
{
icon: Users,
title: "Happy Clients",
value: "10k+",
},
{
icon: Award,
title: "Years Experience",
value: "15+",
},
{
icon: Star,
title: "Average Rating",
value: "4.9",
},
]}
/>
</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 "reviews" section.
import React from 'react';
import TestimonialColumnMarqueeCards from '@/components/sections/testimonial/TestimonialColumnMarqueeCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function ReviewsSection(): React.JSX.Element {
return (
<div id="reviews" data-section="reviews">
<SectionErrorBoundary name="reviews">
<TestimonialColumnMarqueeCards
tag="Social Proof"
title="Words from the Kings"
description="Join thousands of satisfied clients who choose us daily."
testimonials={[
{
name: "Alex R.",
role: "Loyal Client",
quote: "Best fades in town, hands down.",
imageSrc: "http://img.b2bpic.net/free-photo/excited-young-beautiful-female-barber-uniform-holding-barber-tools-doing-haircut-boy-isolated-pink-wall_141793-105762.jpg",
},
{
name: "James B.",
role: "Regular",
quote: "Professional, clean, and always on point.",
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-lying-beanbag-chair-with-magazine_1262-1246.jpg",
},
{
name: "Mike D.",
role: "Business Owner",
quote: "King of Fades understands quality.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-looking-mirror_23-2149253016.jpg",
},
{
name: "Dan S.",
role: "Local",
quote: "Exceptional customer service every time.",
imageSrc: "http://img.b2bpic.net/free-photo/young-man-with-horns-from-fingers-head_23-2147989969.jpg",
},
{
name: "Brian K.",
role: "Regular",
quote: "Highly recommended for any style.",
imageSrc: "http://img.b2bpic.net/free-photo/modern-young-caucasian-brunette-woman-white-shirt-looks-camera-holds-smartphone-sitting-table-with-coffee_197531-33244.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,39 @@
// 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 { Award, Scissors, Sparkles, Star, Sun, Users } from "lucide-react";
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="Precision Grooming Redefined"
description="At King of Fades, we don't just cut hair; we curate your look with meticulous detail."
items={[
{
icon: Scissors,
title: "Precision Fades",
description: "The cleanest transitions for the sharpest look.",
},
{
icon: Sparkles,
title: "Hot Towel Shave",
description: "Classic luxury for your skin and senses.",
},
{
icon: Sun,
title: "Beard Styling",
description: "Full shape-up and grooming for refined masculinity.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/dryin-process-small-dog-sits-table-dog-drying-by-professional_1157-48815.jpg"
/>
</SectionErrorBoundary>
</div>
);
}

View File

@@ -0,0 +1,43 @@
// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
// file as the canonical source for the "steps" section.
import React from 'react';
import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function StepsSection(): React.JSX.Element {
return (
<div id="steps" data-section="steps">
<SectionErrorBoundary name="steps">
<FeaturesDetailedSteps
tag="Process"
title="Your Journey to Greatness"
description="A simple experience that guarantees premium results."
steps={[
{
tag: "01",
title: "Easy Booking",
subtitle: "Select your style",
description: "Book a time that works for you.",
imageSrc: "http://img.b2bpic.net/free-photo/traditional-french-food-world-tourism-day_23-2149114058.jpg",
},
{
tag: "02",
title: "Consultation",
subtitle: "Define your look",
description: "Discuss your hair goals with a pro.",
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",
},
{
tag: "03",
title: "Precision Cut",
subtitle: "Experience luxury",
description: "Walk out feeling revitalized.",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hairdresser-holding-hair-dryer_23-2149220573.jpg",
},
]}
/>
</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 "team" section.
import React from 'react';
import TeamGlassCards from '@/components/sections/team/TeamGlassCards';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
export default function TeamSection(): React.JSX.Element {
return (
<div id="team" data-section="team">
<SectionErrorBoundary name="team">
<TeamGlassCards
tag="The Artists"
title="Meet the Crew"
description="Our barbers are masters of the craft, dedicated to your satisfaction."
members={[
{
name: "Marcus J.",
role: "Master Barber",
imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg",
},
{
name: "Leo P.",
role: "Fade Expert",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-blond-bearded-male-dressed-suit-grey-background_613910-11862.jpg",
},
{
name: "Sam R.",
role: "Beard Specialist",
imageSrc: "http://img.b2bpic.net/free-photo/man-looking-away-barber-shop_23-2148353460.jpg",
},
]}
/>
</SectionErrorBoundary>
</div>
);
}