From 76d1de45b325a407a30a819bc10198f900d6ac27 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sat, 18 Apr 2026 11:52:29 +0000
Subject: [PATCH] Bob AI: Replace the current hero section with the 'Hero
 Billboard Sc

---
 src/App.tsx                                   |  4 +-
 .../sections/hero/HeroBillboardScroll.tsx     | 78 +++++++++++++++++++
 src/index.css                                 |  4 +
 src/styles/animations.css                     |  9 +++
 4 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 src/components/sections/hero/HeroBillboardScroll.tsx

diff --git a/src/App.tsx b/src/App.tsx
index be8bff4..6ffd665 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,7 @@ import ContactCta from '@/components/sections/contact/ContactCta';
 import FaqSimple from '@/components/sections/faq/FaqSimple';
 import FeaturesComparison from '@/components/sections/features/FeaturesComparison';
 import FooterSimpleMedia from '@/components/sections/footer/FooterSimpleMedia';
-import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MetricsFeatureCards from '@/components/sections/metrics/MetricsFeatureCards';
 import NavbarCentered from '@/components/ui/NavbarCentered';
 import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
@@ -42,7 +42,7 @@ export default function App() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardGallery
+      <HeroBillboardScroll
       tag="Artisanal Bakery"
       title="Fresh Baked Daily, Crafted with Passion."
       description="Discover the finest selection of artisan breads, handcrafted pastries, and exquisite cakes, made daily from local ingredients."
diff --git a/src/components/sections/hero/HeroBillboardScroll.tsx b/src/components/sections/hero/HeroBillboardScroll.tsx
new file mode 100644
index 0000000..7ab5a08
--- /dev/null
+++ b/src/components/sections/hero/HeroBillboardScroll.tsx
@@ -0,0 +1,78 @@
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+interface HeroBillboardScrollProps {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
+  items: { imageSrc: string }[];
+}
+
+const HeroBillboardScroll = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  items,
+}: HeroBillboardScrollProps) => {
+  const scrollItems = [...items, ...items];
+
+  return (
+    <section
+      aria-label="Hero section"
+      className="hero-billboard-scroll flex flex-col justify-center items-center h-fit md:h-svh pt-25 pb-20 md:py-0"
+    >
+      <div className="flex flex-col items-center gap-10 md:gap-15 w-full">
+        <div className="flex flex-col items-center gap-2 w-content-width mx-auto text-center">
+          <span className="px-3 py-1 mb-1 text-sm card rounded">{tag}</span>
+
+          <TextAnimation
+            text={title}
+            variant="slide-up"
+            tag="h1"
+            className="text-6xl font-medium text-balance"
+          />
+
+          <TextAnimation
+            text={description}
+            variant="slide-up"
+            tag="p"
+            className="text-base md:text-lg leading-tight text-balance"
+          />
+
+          <div className="flex flex-wrap justify-center gap-3 mt-2">
+            <Button text={primaryButton.text} href={primaryButton.href} variant="primary" animate />
+            <Button
+              text={secondaryButton.text}
+              href={secondaryButton.href}
+              variant="secondary"
+              animate
+              delay={0.1}
+            />
+          </div>
+        </div>
+
+        <div className="w-full overflow-hidden mask-fade-x">
+          <div className="hero-billboard-scroll-track flex w-max">
+            {scrollItems.map((item, index) => (
+              <div
+                key={index}
+                className="hero-billboard-scroll-item shrink-0 w-[50vw] md:w-[25vw] aspect-4/5 p-2"
+              >
+                <div className="w-full h-full card rounded overflow-hidden">
+                  <ImageOrVideo imageSrc={item.imageSrc} />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default HeroBillboardScroll;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index c9d6791..452093a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -179,3 +179,7 @@ h6 {
     2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
   border: 1px solid var(--color-secondary-cta);
 }
+
+.hero-billboard-scroll .hero-billboard-scroll-track {
+  animation: scroll-x 60s linear infinite;
+}
diff --git a/src/styles/animations.css b/src/styles/animations.css
index c10b577..8a5a8fa 100644
--- a/src/styles/animations.css
+++ b/src/styles/animations.css
@@ -95,6 +95,15 @@
   }
 }
 
+@keyframes scroll-x {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
 @keyframes orbit {
   from {
     transform: rotate(var(--initial-position, 0deg)) translateX(var(--translate-position, 120px))
-- 
2.49.1