Add Commercial Tape ticker

Implemented a new CommercialTape component that displays a scrolling, marquee-style USP ticker with 5 items (supporting English and Arabic), paused on hover. Integrated into the homepage above the navigation with hybrid palette. Updated CSS for marquee animation and RTL support, and wired the component into the Index page.

X-Lovable-Edit-ID: edt-590b2072-dc1b-4578-ae41-8f90dfe6035f

Author: lovable-dev[bot]

src/components/CommercialTape.tsx

@@ -0,0 +1,42 @@
+import { useLanguage } from "@/contexts/LanguageContext";
+
+const advantages = [
+  { en: "Pharmacist-Vetted: 5,000+ Premium SKUs", ar: "بإشراف صيدلاني: أكثر من 5,000 منتج طبي فاخر" },
+  { en: "The Asper Experience: Same-Day Amman Delivery", ar: "تجربة أسبر: توصيل في نفس اليوم داخل عمّان" },
+  { en: "Gold Standard: 100% Guaranteed Authenticity & JFDA Certified", ar: "المعيار الذهبي: أصالة مضمونة 100% ومعتمد من الغذاء والدواء" },
+  { en: "Cruelty-Free, Ethical & Dermatologist Tested", ar: "خالٍ من القسوة، أخلاقي ومختبر من أطباء جلدية" },
+  { en: "Experience the 3-Click AI Regimen Analysis", ar: "جرّبي تحليل الروتين بالذكاء الاصطناعي بـ3 نقرات" },
+];
+
+const CommercialTape = () => {
+  const { locale } = useLanguage();
+
+  // Duplicate items for seamless loop
+  const items = [...advantages, ...advantages];
+
+  return (
+    <div
+      className="commercial-tape relative w-full overflow-hidden bg-accent h-10 flex items-center z-[60]"
+      role="marquee"
+      aria-label={locale === "ar" ? "مزايا أسبر بيوتي شوب" : "Asper Beauty Shop advantages"}
+    >
+      <div className="commercial-tape-track flex items-center whitespace-nowrap">
+        {items.map((item, i) => (
+          <span key={i} className="inline-flex items-center">
+            <span className="font-body text-sm font-medium text-accent-foreground px-4 select-none">
+              {locale === "ar" ? item.ar : item.en}
+            </span>
+            <span
+              className="text-accent-foreground/50 text-xs select-none"
+              aria-hidden="true"
+            >
+              ✦
+            </span>
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CommercialTape;

src/index.css

@@ -305,6 +305,25 @@
   transform: rotate(360deg);
 }
 
+/* ─── Commercial Tape Marquee ─── */
+.commercial-tape:hover .commercial-tape-track {
+  animation-play-state: paused;
+}
+.commercial-tape-track {
+  animation: marquee-scroll 35s linear infinite;
+}
+[dir="rtl"] .commercial-tape-track {
+  animation: marquee-scroll-rtl 35s linear infinite;
+}
+@keyframes marquee-scroll {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(-50%); }
+}
+@keyframes marquee-scroll-rtl {
+  0% { transform: translateX(0); }
+  100% { transform: translateX(50%); }
+}
+
 /* ─── Mobile Bottom Nav Spacing ─── */
 @media (max-width: 768px) {
   .mobile-bottom-pad {

src/pages/Index.tsx

@@ -20,6 +20,7 @@ const PromoBanner = lazy(() => import("@/components/home/PromoBanner"));
 const SocialGallery = lazy(() => import("@/components/home/SocialGallery"));
 const Newsletter = lazy(() => import("@/components/home/Newsletter"));
 import ScrollProgress from "@/components/ScrollProgress";
+import CommercialTape from "@/components/CommercialTape";
 import AuthButton from "@/components/AuthButton";
 import MobileBottomNav from "@/components/MobileBottomNav";
 import MegaMenu from "@/components/MegaMenu";
@@ -49,6 +50,9 @@ const Index = () => {
 
   return (
     <div className="min-h-screen bg-background mobile-bottom-pad" dir={dir}>
+      {/* Commercial Tape — USP ticker */}
+      <CommercialTape />
+
       {/* Gold scroll progress bar */}
       <ScrollProgress />