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."

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;

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;
+}

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))