From ce36d7ab3899722f028d104d80155dbd873400fe Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Mon, 3 Aug 2026 11:48:40 +0330
Subject: [PATCH] feat(ui): add sliding announcement marquee ticker banner to
 header [TASK-16.1]

---
 frontend/application/app/globals.css          | 19 ++++++++++
 frontend/application/components/Header.tsx    |  8 ++---
 .../application/components/TickerBanner.tsx   | 35 +++++++++++++++++++
 3 files changed, 57 insertions(+), 5 deletions(-)
 create mode 100644 frontend/application/components/TickerBanner.tsx

diff --git a/frontend/application/app/globals.css b/frontend/application/app/globals.css
index 8745af1..1b64507 100644
--- a/frontend/application/app/globals.css
+++ b/frontend/application/app/globals.css
@@ -175,3 +175,22 @@
 .sleek-hscroll::-webkit-scrollbar-thumb:hover {
   background: #003da6;
 }
+
+@keyframes marquee {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(50%);
+  }
+}
+
+.animate-marquee {
+  display: flex;
+  width: max-content;
+  animation: marquee 25s linear infinite;
+}
+
+.animate-marquee:hover {
+  animation-play-state: paused;
+}
diff --git a/frontend/application/components/Header.tsx b/frontend/application/components/Header.tsx
index 2890502..6071fba 100644
--- a/frontend/application/components/Header.tsx
+++ b/frontend/application/components/Header.tsx
@@ -11,6 +11,7 @@ import { toast } from "sonner";
 import HeaderButton from "./HeaderButton";
 import AuthModal from "./AuthModal";
 import PrescriptionUploadModal from "./PrescriptionUploadModal";
+import TickerBanner from "./TickerBanner";
 import { cn } from "../lib/utils";
 import { productService } from "../lib/services/productService";
 
@@ -132,11 +133,8 @@ export default function Header({
       <PrescriptionUploadModal isOpen={isPrescriptionModalOpen} onClose={() => setIsPrescriptionModalOpen(false)} />
 
       <div className="sticky top-0 z-50 w-full shadow-md font-vazir" dir="rtl">
-        {/* Top Free Shipping Notice */}
-        <div className="bg-canina-gold text-canina-dark text-xs font-black py-1.5 text-center tracking-wider flex items-center justify-center gap-2">
-          <span>🚚</span>
-          <span>{getText('shipping_notice', "ارسال رایگان برای سفارش‌های بالای ۱۵۰ هزار تومان — گارانتی اصالت کانینا آلمان")}</span>
-        </div>
+        {/* Sliding Announcement Ticker Banner */}
+        <TickerBanner />
 
         <header className="bg-white border-b border-medical-gray-200">
           {/* TOP ROW: Logo + Search + Primary Actions */}
diff --git a/frontend/application/components/TickerBanner.tsx b/frontend/application/components/TickerBanner.tsx
new file mode 100644
index 0000000..f0e5aea
--- /dev/null
+++ b/frontend/application/components/TickerBanner.tsx
@@ -0,0 +1,35 @@
+"use client";
+import React from "react";
+import { useSettingsStore } from "../lib/store/settingsStore";
+import { Sparkles } from "lucide-react";
+
+export default function TickerBanner() {
+  const getText = useSettingsStore((state) => state.getText);
+  const announcementText = getText(
+    "shipping_notice",
+    "ارسال رایگان برای سفارش‌های بالای ۱۵۰ هزار تومان — گارانتی اصالت کانینا آلمان — مشاوره تخصصی مکمل‌های دارویی سگ و گربه با کادر دامپزشکان مجرب"
+  );
+
+  return (
+    <div className="bg-canina-gold text-canina-dark text-xs font-black py-1.5 overflow-hidden relative shadow-xs border-b border-amber-300/40 select-none">
+      <div className="flex items-center gap-2 whitespace-nowrap animate-marquee">
+        <span className="flex items-center gap-2 px-4">
+          <Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
+          {announcementText}
+        </span>
+        <span className="flex items-center gap-2 px-4">
+          <Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
+          {announcementText}
+        </span>
+        <span className="flex items-center gap-2 px-4">
+          <Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
+          {announcementText}
+        </span>
+        <span className="flex items-center gap-2 px-4">
+          <Sparkles className="w-3.5 h-3.5 text-canina-dark animate-pulse inline" />
+          {announcementText}
+        </span>
+      </div>
+    </div>
+  );
+}