Merge version_22_1783296171435 into main

Merge version_22_1783296171435 into main

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/sections/About.tsx

@@ -1,19 +1,42 @@
-// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
-// file as the canonical source for the "about" section.
+/* 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";
 
-import React from 'react';
-import AboutText from '@/components/sections/about/AboutText';
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+interface AboutTextProps {
+  title: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  textAnimation: "slide-up" | "fade-blur" | "fade";
+}
 
-export default function AboutSection(): React.JSX.Element {
+const AboutInline = () => {
   return (
-    <div id="about" data-section="about">
-        <SectionErrorBoundary name="about">
-              <AboutText
-          title="Crafted for Excellence"
-          textAnimation="slide-up"
+    <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"
         />
-        </SectionErrorBoundary>
+
+        {(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/Pricing.tsx

@@ -15,10 +15,10 @@ export default function PricingSection(): React.JSX.Element {
           description="Simple pricing for high-quality service."
           plans={[
             {
-              tag: "Classic",
-              price: "$30",
+              tag: "Taper or Fade ",
+              price: "$35",
               period: "/cut",
-              description: "Complete hair grooming service.",
+              description: "Complete fade and taper service.",
               primaryButton: {
                 text: "Book",
                 href: "#contact",
@@ -31,10 +31,10 @@ export default function PricingSection(): React.JSX.Element {
               ],
             },
             {
-              tag: "Signature",
-              price: "$50",
-              period: "/package",
-              description: "Haircut and beard work.",
+              tag: "Scissor Cut",
+              price: "$45",
+              period: "/cut",
+              description: "Precise scissor haircut tailored to your request",
               primaryButton: {
                 text: "Book",
                 href: "#contact",
@@ -42,8 +42,8 @@ export default function PricingSection(): React.JSX.Element {
               featuresTitle: "Includes:",
               features: [
                 "Precision Cut",
-                "Beard Sculpt",
-                "Hot Towel Finish",
+                "360 cleanup ",
+                "Textured finished look ",
               ],
             },
           ]}

src/pages/HomePage/sections/Services.tsx

@@ -17,8 +17,8 @@ export default function ServicesSection(): React.JSX.Element {
             {
               tag: "Hair",
               title: "Taper or Fades ",
-              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",
+              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",
@@ -28,7 +28,7 @@ export default function ServicesSection(): React.JSX.Element {
               tag: "Hair",
               title: "Scissor Cut ",
               description: "A classic, tailored haircut using only scissors for a natural, textured finish.",
-              imageSrc: "http://img.b2bpic.net/free-photo/half-naked-caucasian-bearded-man-shaving-with-serious-face-expression_181624-46966.jpg",
+              imageSrc: "https://storage.googleapis.com/webild/users/user_3G6TFtt4stRw9fdcBXVheLGahPu/uploaded-1783292592456-v3ijfpmq.jpg",
               primaryButton: {
                 text: "Book",
                 href: "#contact",
@@ -38,7 +38,7 @@ export default function ServicesSection(): React.JSX.Element {
               tag: "Design",
               title: "Custom Design ",
               description: "Express yourself with unique hair art and custom patterns tailored to your personal style.",
-              imageSrc: "http://img.b2bpic.net/free-photo/front-view-barbershop-concept_23-2148506253.jpg",
+              imageSrc: "https://storage.googleapis.com/webild/users/user_3G6TFtt4stRw9fdcBXVheLGahPu/uploaded-1783292592456-20vc5gak.jpg",
               primaryButton: {
                 text: "Book",
                 href: "#contact",