Bob AI: Replace hero section with modern split layout and female ima

src/pages/HomePage/sections/Hero.tsx

@@ -1,118 +1,19 @@
-/* eslint-disable */
-// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
-import { Star, Users, Sparkles } from 'lucide-react';
-import type { LucideIcon } from "lucide-react";
+// Created by add_section_from_catalog (HeroSplit).
 
-import Button from "@/components/ui/Button";
-import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
-import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
-import AvatarGroup from "@/components/ui/AvatarGroup";
+import React from 'react';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
 
-const primaryButton = {
-  text: "Umów wizytę",
-  href: "#"
-};
-const secondaryButton = {
-  text: "Zadzwoń: 884 307 703",
-  href: "tel:884307703"
-};
-const items = [
-  {
-    text: "4,7★ (124 opinie)",
-    icon: Star
-  },
-  {
-    text: "Indywidualne doradztwo",
-    icon: Users
-  },
-  {
-    text: "Specjalizacja Blond",
-    icon: Sparkles
-  }
-];
-
-type HeroOverlayMarqueeProps = {
-  tag: string;
-  title: string;
-  description: string;
-  primaryButton: { text: string; href: string };
-  secondaryButton: { text: string; href: string };
-  avatarsSrc?: string[];
-  avatarsLabel?: string;
-  items: { text: string; icon: LucideIcon }[];
-} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
-
-const HeroInline = () => {
-  return (
-    <section
-      aria-label="Hero section"
-      className="relative overflow-hidden flex flex-col justify-between mb-20 w-full h-svh"
-    >
-      <HeroBackgroundSlot />
-      <ImageOrVideo
-        imageSrc={"http://img.b2bpic.net/free-photo/view-child-hair-salon_23-2150462476.jpg"}
-        className="absolute inset-0 object-cover w-full h-full rounded-none"
-      />
-
-      <div
-        className="absolute z-10 left-0 top-0 w-[150vw] h-[150vw] -translate-x-1/2 -translate-y-1/2 backdrop-blur mask-[radial-gradient(circle,black_20%,transparent_70%)]"
-        aria-hidden="true"
-      />
-
-      <div className="relative z-10 mx-auto pt-35 w-content-width">
-        <div className="flex flex-col gap-3 w-full md:w-6/10 lg:w-1/2 xl:w-45/100 2xl:w-4/10">
-          <div className="mb-1 px-3 py-1 w-fit text-sm card rounded">
-            <p>{"Poznań, Os. Przyjaźni"}</p>
-          </div>
-
-          <TextAnimation
-            text={"Fryzura w dobrym nastroju"}
-            variant="fade"
-            gradientText={true}
-            tag="h1"
-            className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-balance text-white"
-          />
-
-          <TextAnimation
-            text={"Profesjonalne strzyżenie, koloryzacja blond i indywidualne podejście do Twoich włosów w sercu Poznania. Zaufaj naszemu doświadczeniu."}
-            variant="fade"
-            gradientText={false}
-            tag="p"
-            className="text-lg md:text-xl leading-snug text-balance text-white"
-          />
-
-          <div className="flex flex-wrap gap-3 mt-2 md:mt-3">
-            <Button text={primaryButton.text} href={primaryButton.href} variant="primary" />
-            <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />
-          </div>
-
-          {undefined && undefined.length > 0 && (
-            <div className="mt-3 md:mt-4">
-              <AvatarGroup size="lg" labelClassName="text-primary-cta-text" />
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div className="relative z-10 overflow-hidden mx-auto pb-8 w-content-width mask-fade-x">
-        <div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "30s" }}>
-          {[...items, ...items, ...items, ...items].map((item, index) => (
-            <div key={index} className="flex items-center shrink-0 gap-1 mx-3 pl-2 pr-4 py-2 card rounded">
-              <item.icon className="h-(--text-base) text-foreground" />
-              <span className="whitespace-nowrap text-base font-medium text-foreground">{item.text}</span>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default function HeroSection() {
+export default function HeroSection(): React.JSX.Element {
   return (
     <div data-webild-section="hero" id="hero">
-      <HeroInline />
+      <HeroSplit
+        secondaryButton={{"href":"tel:884307703","text":"Zadzwoń: 884 307 703"}}
+        description="Profesjonalne strzyżenie, koloryzacja blond i indywidualne podejście do Twoich włosów w sercu Poznania. Zaufaj naszemu doświadczeniu."
+        tag="Poznań, Os. Przyjaźni"
+        title="Fryzura w dobrym nastroju"
+        primaryButton={{"text":"Umów wizytę","href":"#"}}
+        imageSrc="https://picsum.photos/seed/1905341894/1200/800"
+      />
     </div>
   );
 }