holiday sale

src/components/Header.js

@@ -3,7 +3,8 @@ import Link from 'next/link';
 import { useRef, useState, useEffect } from 'react';
 import GithubStats from './GithubStats';
 import { useIsomorphicLayoutEffect } from '@/hooks/useIsomorphicLayoutEffect';
-import TogglesRibbon from './TogglesRibbon';
+import NewYearRibbon from './NewYearRibbon';
+// import TogglesRibbon from './TogglesRibbon';
 
 function updateColorTheme() {
   if (
@@ -74,7 +75,7 @@ export default function Header() {
 
   return (
     <>
-      <TogglesRibbon />
+      <NewYearRibbon />
       <header className="sticky top-0 z-50 h-16 bg-surface-2 py-6">
         <div className="mx-auto flex h-full items-center justify-between px-4 sm:px-6">
           {/* Left */}

src/components/NewYearRibbon.js

@@ -0,0 +1,33 @@
+export default function NewYearRibbon() {
+  return (
+    <div className="flex min-h-[64px] items-center  justify-center bg-surface px-4 py-2 text-sm font-semibold  sm:px-6 lg:px-8 xl:px-10">
+      <div className="text-center">
+        🎄🎅 Holiday Sale: Up to 50% OFF on{' '}
+        <a
+          className="underline hover:no-underline "
+          href="https://uiinitiative.com"
+          target="_blank"
+        >
+          UI Initiative
+        </a>
+        ,{' '}
+        <a
+          className="underline hover:no-underline"
+          href="https://studio.swiperjs.com"
+          target="_blank"
+        >
+          Swiper Studio
+        </a>{' '}
+        and{' '}
+        <a
+          className="underline hover:no-underline"
+          href="https://t0ggles.com"
+          target="_blank"
+        >
+          t0ggles
+        </a>{' '}
+        🎅🎄
+      </div>
+    </div>
+  );
+}