feat: polish figma mobile home and nav

src/components/FigmaBanner.tsx

@@ -172,8 +172,39 @@ export function FigmaBanner() {
     }
   };
 
+  const pagination = hasMultiple ? (
+    <div
+      className="flex items-center justify-center gap-1.5 md:gap-2"
+      role="tablist"
+      aria-label="Banner pagination"
+    >
+      {slides.map((slide, index) => {
+        const active = index === activeIndex;
+        return (
+          <button
+            key={slide.id}
+            type="button"
+            role="tab"
+            aria-selected={active}
+            aria-label={`Go to slide ${index + 1}`}
+            onClick={() => {
+              pauseAutoplay();
+              setActiveIndex(index);
+              goTo(index, "smooth");
+            }}
+            className={`h-1.5 rounded-full transition-all ${
+              active
+                ? "w-6 bg-ark-gold"
+                : "w-1.5 bg-[#7C7C7C] hover:bg-white/50"
+            }`}
+          />
+        );
+      })}
+    </div>
+  ) : null;
+
   return (
-    <div>
+    <div className="relative">
       <div
         ref={scrollerRef}
         onPointerDown={handlePointerDown}
@@ -194,12 +225,12 @@ export function FigmaBanner() {
             aria-roledescription="slide"
             aria-label={`${index + 1} / ${slides.length}`}
           >
-            <picture className="block w-full overflow-hidden rounded-xl bg-black">
+            <picture className="block w-full overflow-hidden bg-black md:rounded-xl">
               <source media="(max-width: 767px)" srcSet={slide.mobile} />
               <img
                 src={slide.desktop}
                 alt={slide.alt}
-                className="pointer-events-none h-[200px] w-full object-cover md:h-auto"
+                className="pointer-events-none h-[219px] w-full object-cover md:h-auto"
                 width={1280}
                 height={290}
                 loading={index === 0 ? "eager" : "lazy"}
@@ -212,34 +243,12 @@ export function FigmaBanner() {
       </div>
 
       {hasMultiple ? (
-        <div
-          className="mt-3 flex items-center justify-center gap-2"
-          role="tablist"
-          aria-label="Banner pagination"
-        >
-          {slides.map((slide, index) => {
-            const active = index === activeIndex;
-            return (
-              <button
-                key={slide.id}
-                type="button"
-                role="tab"
-                aria-selected={active}
-                aria-label={`Go to slide ${index + 1}`}
-                onClick={() => {
-                  pauseAutoplay();
-                  setActiveIndex(index);
-                  goTo(index, "smooth");
-                }}
-                className={`h-1.5 rounded-full transition-all ${
-                  active
-                    ? "w-6 bg-ark-gold"
-                    : "w-1.5 bg-white/30 hover:bg-white/50"
-                }`}
-              />
-            );
-          })}
-        </div>
+        <>
+          <div className="pointer-events-none absolute inset-x-0 bottom-0 flex h-[30px] items-center justify-center bg-gradient-to-b from-[#14131900] to-[#141319] md:hidden">
+            <div className="pointer-events-auto">{pagination}</div>
+          </div>
+          <div className="mt-3 hidden md:block">{pagination}</div>
+        </>
       ) : null}
     </div>
   );