Merge version_22_1783296171435 into main

Merge version_22_1783296171435 into main

src/components/Layout.tsx

@@ -23,14 +23,6 @@ export default function Layout() {
     "name": "Book Now",
     "href": "#contact"
   },
-  {
-    "name": "Hero",
-    "href": "#hero"
-  },
-  {
-    "name": "Testimonials",
-    "href": "#testimonials"
-  },
   {
     "name": "Faq",
     "href": "#faq"

src/components/ui/NavbarInline.tsx

@@ -2,6 +2,7 @@ import Button from "@/components/ui/Button";
 
 interface NavbarInlineProps {
   logo: string;
+  logoImageSrc?: string;
   navItems: { name: string; href: string }[];
   ctaButton: { text: string; href: string };
 }
@@ -15,11 +16,14 @@ const handleNavClick = (e: React.MouseEvent<HTMLAnchorElement>, href: string, on
   onClose?.();
 };
 
-const NavbarInline = ({ logo, navItems, ctaButton }: NavbarInlineProps) => {
+const NavbarInline = ({ logo, logoImageSrc, navItems, ctaButton }: NavbarInlineProps) => {
   return (
     <nav data-section="navbar" className="fixed z-1000 top-5 left-1/2 -translate-x-1/2 w-content-width">
       <div className="flex items-center justify-between p-2 xl:p-3 2xl:p-4 rounded backdrop-blur-sm card">
-        <a href="/" className="pl-2 text-xl font-medium text-foreground">{logo}</a>
+        <a href="/" className="pl-2 text-2xl md:text-3xl font-bold text-foreground flex items-center gap-3">
+          {logoImageSrc && <img src={logoImageSrc} alt={logo} className="h-16 md:h-20 w-auto object-contain drop-shadow-lg" />}
+          <span className={logoImageSrc ? "sr-only md:not-sr-only" : ""}>{logo}</span>
+        </a>
 
         <div className="hidden md:flex absolute left-1/2 -translate-x-1/2 items-center gap-6">
           {navItems.map((item) => (

src/index.css

@@ -1,19 +1,19 @@
-@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
 @import "tailwindcss";
 @import "./styles/masks.css";
 @import "./styles/animations.css";
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f5faff;
+  --background: #f5f4f0;
   --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --foreground: #1a1a1a;
+  --primary-cta: #2c2c2c;
+  --primary-cta-text: #f5f4f0;
+  --secondary-cta: #f5f4f0;
+  --secondary-cta-text: #1a1a1a;
+  --accent: #8a8a8a;
+  --background-accent: #e8e6e1;
 
   /* @layout/border-radius/rounded */
   --radius: 1rem;
@@ -36,7 +36,7 @@
   --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
   --text-xs: clamp(0.54rem, 0.72vw, 0.72rem);
   --text-sm: clamp(0.615rem, 0.82vw, 0.82rem);
-  --text-base: clamp(0.69rem, 0.92vw, 0.92rem);
+  --text-base: clamp(0.8rem, 1.1vw, 1.1rem);
   --text-lg: clamp(0.75rem, 1vw, 1rem);
   --text-xl: clamp(0.825rem, 1.1vw, 1.1rem);
   --text-2xl: clamp(0.975rem, 1.3vw, 1.3rem);
@@ -88,7 +88,7 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: 'Public Sans', sans-serif;
+  --font-sans: 'Montserrat', sans-serif;
   --font-tight: "Inter Tight", sans-serif;
   --font-mono: monospace;
 
@@ -137,7 +137,7 @@ body {
   margin: 0;
   background-color: var(--background);
   color: var(--foreground);
-  font-family: 'Public Sans', sans-serif;
+  font-family: 'Montserrat', sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -150,7 +150,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Public Sans', sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 /* Default card/button styles. Template theme.css imports come after this file

src/pages/HomePage.tsx

@@ -1,241 +1,32 @@
-import AboutText from '@/components/sections/about/AboutText';
-import ContactCta from '@/components/sections/contact/ContactCta';
-import FaqSimple from '@/components/sections/faq/FaqSimple';
-import FeaturesTaggedCards from '@/components/sections/features/FeaturesTaggedCards';
-import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
-import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
-import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in the sibling sections/ folder (one file per section).
+// Edit those section files directly. Non-block content (wrappers,
+// non-inlinable sections) is preserved inline; extracted section blocks
+// become component refs.
 
-export default function HomePage() {
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import ServicesSection from './HomePage/sections/Services';
+import PricingSection from './HomePage/sections/Pricing';
+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">
-          <HeroBillboardCarousel
-      tag="Professional Grooming"
-      title="Irving the Barber"
-      description="Experience premium cuts, precise shaves, and grooming excellence in the heart of the city."
-      primaryButton={{
-        text: "Book Appointment",
-        href: "#contact",
-      }}
-      secondaryButton={{
-        text: "View Pricing",
-        href: "#pricing",
-      }}
-      items={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506341.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/composition-shaving-objects-with-copyspace_23-2148121975.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-rake-near-collar_23-2147799914.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/back-view-man-getting-new-haircut_23-2148242801.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/dryin-process-small-dog-sits-table-dog-drying-by-professional_1157-48815.jpg",
-        },
-      ]}
-      textAnimation="slide-up"
-    />
-    </SectionErrorBoundary>
-  </div>
+<>
+  <HeroSection />
 
-  <div id="about" data-section="about">
-    <SectionErrorBoundary name="about">
-          <AboutText
-      title="Crafted for Excellence"
-      textAnimation="slide-up"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <AboutSection />
 
-  <div id="services" data-section="services">
-    <SectionErrorBoundary name="services">
-          <FeaturesTaggedCards
-      tag="Our Services"
-      title="Mastering the Craft"
-      description="We offer a range of specialized grooming services designed to help you look your absolute best."
-      items={[
-        {
-          tag: "Hair",
-          title: "Precision Haircut",
-          description: "Customized haircuts tailored to your style and face shape.",
-          imageSrc: "http://img.b2bpic.net/free-photo/detail-hair-dresser-with-tools_23-2148108848.jpg",
-          primaryButton: {
-            text: "Book",
-            href: "#contact",
-          },
-        },
-        {
-          tag: "Beard",
-          title: "Beard Sculpting",
-          description: "Precise trimming and grooming to keep your beard perfectly defined.",
-          imageSrc: "http://img.b2bpic.net/free-photo/half-naked-caucasian-bearded-man-shaving-with-serious-face-expression_181624-46966.jpg",
-          primaryButton: {
-            text: "Book",
-            href: "#contact",
-          },
-        },
-        {
-          tag: "Shave",
-          title: "Hot Towel Shave",
-          description: "A relaxing, premium shaving experience with premium products.",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506253.jpg",
-          primaryButton: {
-            text: "Book",
-            href: "#contact",
-          },
-        },
-      ]}
-      textAnimation="slide-up"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ServicesSection />
 
-  <div id="pricing" data-section="pricing">
-    <SectionErrorBoundary name="pricing">
-          <PricingSplitCards
-      tag="Pricing"
-      title="Transparent Rates"
-      description="Simple pricing for high-quality service."
-      plans={[
-        {
-          tag: "Classic",
-          price: "$30",
-          period: "/cut",
-          description: "Complete hair grooming service.",
-          primaryButton: {
-            text: "Book",
-            href: "#contact",
-          },
-          featuresTitle: "Includes:",
-          features: [
-            "Consultation",
-            "Precision Cut",
-            "Style",
-          ],
-        },
-        {
-          tag: "Signature",
-          price: "$50",
-          period: "/package",
-          description: "Haircut and beard work.",
-          primaryButton: {
-            text: "Book",
-            href: "#contact",
-          },
-          featuresTitle: "Includes:",
-          features: [
-            "Precision Cut",
-            "Beard Sculpt",
-            "Hot Towel Finish",
-          ],
-        },
-      ]}
-      textAnimation="slide-up"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <PricingSection />
 
-  <div id="testimonials" data-section="testimonials">
-    <SectionErrorBoundary name="testimonials">
-          <TestimonialRatingCards
-      tag="Reviews"
-      title="What Our Clients Say"
-      description="Trusted by hundreds of regulars for consistent style."
-      testimonials={[
-        {
-          name: "Alex R.",
-          role: "Client",
-          quote: "The best haircut in town, always consistent.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/professional-barber-working-with-client-hairdressing-salon-styling-beard-with-trimmer_613910-5073.jpg",
-        },
-        {
-          name: "Mark D.",
-          role: "Client",
-          quote: "Highly professional and detailed work.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-fleece-shirt-drinks-coffee-hairdresser-s-salon_613910-5661.jpg",
-        },
-        {
-          name: "Chris P.",
-          role: "Client",
-          quote: "Irving never misses. The attention to detail is unmatched.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/person-choosing-clothes-wear_23-2149223951.jpg",
-        },
-        {
-          name: "James V.",
-          role: "Client",
-          quote: "I leave the shop looking sharp every single time.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-looking-side-young-blonde-guy-wearing-yellow-t-shirt-holding-hands-head-isolated-green_141793-85744.jpg",
-        },
-        {
-          name: "Brian L.",
-          role: "Client",
-          quote: "A fantastic experience and great conversation.",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/brunette-female-hairdresser-washing-hair-bearded-men-client-saloon_613910-14570.jpg",
-        },
-      ]}
-      textAnimation="slide-up"
-    />
-    </SectionErrorBoundary>
-  </div>
 
-  <div id="faq" data-section="faq">
-    <SectionErrorBoundary name="faq">
-          <FaqSimple
-      tag="FAQ"
-      title="Frequently Asked Questions"
-      description="Everything you need to know about our services."
-      items={[
-        {
-          question: "How do I book an appointment?",
-          answer: "Click the book button to access our online calendar.",
-        },
-        {
-          question: "Do you take walk-ins?",
-          answer: "Appointments are highly recommended for the best experience.",
-        },
-        {
-          question: "Can I pay with card?",
-          answer: "Yes, we accept all major cards and digital payments.",
-        },
-      ]}
-      textAnimation="slide-up"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <FaqSection />
 
-  <div id="contact" data-section="contact">
-    <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Book Now"
-      text="Ready for your next fresh look? Schedule your session today."
-      primaryButton={{
-        text: "Make Appointment",
-        href: "https://calendly.com",
-      }}
-      secondaryButton={{
-        text: "Contact Us",
-        href: "mailto:hello@irvingthebarber.com",
-      }}
-      textAnimation="slide-up"
-    />
-    </SectionErrorBoundary>
-  </div>
+  <ContactSection />
     </>
   );
 }

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+
+interface AboutTextProps {
+  title: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  textAnimation: "slide-up" | "fade-blur" | "fade";
+}
+
+const AboutInline = () => {
+  return (
+    <section aria-label="About section" className="py-20">
+      <div className="w-content-width mx-auto flex flex-col gap-2 items-center">
+        <TextAnimation
+          text={"Crafted for Excellence"}
+          variant={"slide-up"}
+          gradientText={false}
+          tag="h2"
+          className="text-8xl md:text-9xl leading-[1.15] font-semibold text-center text-balance"
+        />
+
+        {(undefined || undefined) && (
+          <div className="flex flex-wrap gap-3 justify-center mt-2 md:mt-3">
+            {undefined && <Button text={undefined.text} href={undefined.href} variant="primary" />}
+            {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+export default function AboutSection() {
+  return (
+    <div data-webild-section="about" data-section="about" id="about">
+      <AboutInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,28 @@
+// 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="Book Now"
+          text="Ready for your next fresh look? Schedule your session today."
+          primaryButton={{
+            text: "Make Appointment",
+            href: "https://calendly.com",
+          }}
+          secondaryButton={{
+            text: "Contact Us",
+            href: "mailto:hello@irvingthebarber.com",
+          }}
+          textAnimation="slide-up"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Faq.tsx

@@ -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 FaqSimple from '@/components/sections/faq/FaqSimple';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function FaqSection(): React.JSX.Element {
+  return (
+    <div id="faq" data-section="faq">
+        <SectionErrorBoundary name="faq">
+              <FaqSimple
+          tag="FAQ"
+          title="Frequently Asked Questions"
+          description="Everything you need to know about our services."
+          items={[
+            {
+              question: "How do I book an appointment?",
+              answer: "Click the book button to access our online calendar.",
+            },
+            {
+              question: "Do you take walk-ins?",
+              answer: "Appointments are highly recommended for the best experience.",
+            },
+            {
+              question: "Can I pay with card?",
+              answer: "Yes, we accept all major cards and digital payments.",
+            },
+          ]}
+          textAnimation="slide-up"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,23 @@
+// Created by add_section_from_catalog (HeroBillboardCarousel).
+
+import React from 'react';
+import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="hero" data-section="hero" id="hero" className="relative">
+      <div className="absolute top-32 left-1/2 -translate-x-1/2 z-10 pointer-events-none">
+        <h1 className="text-5xl md:text-7xl font-bold text-foreground drop-shadow-2xl text-center whitespace-nowrap">Irving the Barber</h1>
+      </div>
+      <HeroBillboardCarousel
+        description="Experience premium cuts, precise shaves, and grooming excellence in the heart of the city."
+        primaryButton={{"href":"#contact","text":"Book Appointment"}}
+        items={[{"imageSrc":"https://storage.googleapis.com/webild/users/user_3G6TFtt4stRw9fdcBXVheLGahPu/uploaded-1783292592452-vqof029v.jpg"},{"imageSrc":"https://storage.googleapis.com/webild/users/user_3G6TFtt4stRw9fdcBXVheLGahPu/uploaded-1783292592452-9mamsyjp.jpg"},{"imageSrc":"https://storage.googleapis.com/webild/users/user_3G6TFtt4stRw9fdcBXVheLGahPu/uploaded-1783292592456-v3ijfpmq.jpg"},{"imageSrc":"https://storage.googleapis.com/webild/users/user_3G6TFtt4stRw9fdcBXVheLGahPu/uploaded-1783292592455-zv83jotx.jpg"},{"imageSrc":"https://storage.googleapis.com/webild/users/user_3G6TFtt4stRw9fdcBXVheLGahPu/uploaded-1783292592453-g7yw670e.jpg"},{"imageSrc":"https://storage.googleapis.com/webild/users/user_3G6TFtt4stRw9fdcBXVheLGahPu/uploaded-1783292592454-6iybnon5.jpg"}]}
+        secondaryButton={{"href":"#pricing","text":"View Pricing"}}
+        tag=" "
+        textAnimation="slide-up"
+        title=" "
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/Pricing.tsx

@@ -0,0 +1,55 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "pricing" section.
+
+import React from 'react';
+import PricingSplitCards from '@/components/sections/pricing/PricingSplitCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function PricingSection(): React.JSX.Element {
+  return (
+    <div id="pricing" data-section="pricing">
+        <SectionErrorBoundary name="pricing">
+              <PricingSplitCards
+          tag="Pricing"
+          title="Transparent Rates"
+          description="Simple pricing for high-quality service."
+          plans={[
+            {
+              tag: "Taper or Fade ",
+              price: "$35",
+              period: "/cut",
+              description: "Complete fade and taper service.",
+              primaryButton: {
+                text: "Book",
+                href: "#contact",
+              },
+              featuresTitle: "Includes:",
+              features: [
+                "Consultation",
+                "Precision Cut",
+                "Style",
+              ],
+            },
+            {
+              tag: "Scissor Cut",
+              price: "$45",
+              period: "/cut",
+              description: "Precise scissor haircut tailored to your request",
+              primaryButton: {
+                text: "Book",
+                href: "#contact",
+              },
+              featuresTitle: "Includes:",
+              features: [
+                "Precision Cut",
+                "360 cleanup ",
+                "Textured finished look ",
+              ],
+            },
+          ]}
+          textAnimation="slide-up"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}

src/pages/HomePage/sections/Services.tsx

@@ -0,0 +1,53 @@
+// 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 FeaturesTaggedCards from '@/components/sections/features/FeaturesTaggedCards';
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+export default function ServicesSection(): React.JSX.Element {
+  return (
+    <div id="services" data-section="services">
+        <SectionErrorBoundary name="services">
+              <FeaturesTaggedCards
+          tag="Our Services"
+          title="Mastering the Craft"
+          description="We offer a range of specialized grooming services designed to help you look your absolute best."
+          items={[
+            {
+              tag: "Hair",
+              title: "Taper or Fades ",
+              description: "Customized fades and tapers tailored to your style and face shape.",
+              imageSrc: "https://storage.googleapis.com/webild/users/user_3G6TFtt4stRw9fdcBXVheLGahPu/uploaded-1783292592453-g7yw670e.jpg",
+              primaryButton: {
+                text: "Book",
+                href: "#contact",
+              },
+            },
+            {
+              tag: "Hair",
+              title: "Scissor Cut ",
+              description: "A classic, tailored haircut using only scissors for a natural, textured finish.",
+              imageSrc: "https://storage.googleapis.com/webild/users/user_3G6TFtt4stRw9fdcBXVheLGahPu/uploaded-1783292592456-v3ijfpmq.jpg",
+              primaryButton: {
+                text: "Book",
+                href: "#contact",
+              },
+            },
+            {
+              tag: "Design",
+              title: "Custom Design ",
+              description: "Express yourself with unique hair art and custom patterns tailored to your personal style.",
+              imageSrc: "https://storage.googleapis.com/webild/users/user_3G6TFtt4stRw9fdcBXVheLGahPu/uploaded-1783292592456-20vc5gak.jpg",
+              primaryButton: {
+                text: "Book",
+                href: "#contact",
+              },
+            },
+          ]}
+          textAnimation="slide-up"
+        />
+        </SectionErrorBoundary>
+      </div>
+  );
+}