feat(ui): redesign Netlify highlight component with improved styling and hover effects

Author: vLuckyyy

components/docs/sidebar/netlify-highlight.tsx

@@ -2,24 +2,36 @@ import { SiNetlify } from "react-icons/si";
 
 export function NetlifyHighlight() {
   return (
-    <div className="px-4 pt-3">
-      <div className="flex items-center gap-3 rounded-xl border border-emerald-100 bg-white px-4 py-3 text-sm shadow-xs dark:border-emerald-900/40 dark:bg-gray-900/70">
-        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 ring-1 ring-emerald-100 dark:bg-emerald-900/40 dark:text-emerald-200 dark:ring-emerald-800/60">
-          <SiNetlify aria-hidden className="h-5 w-5" />
-        </div>
-        <div className="space-y-1">
-          <p className="font-semibold text-gray-900 dark:text-emerald-100">Powered by Netlify</p>
-          <a
-            className="inline-flex items-center gap-1 text-emerald-700 text-xs font-semibold underline decoration-emerald-400 decoration-2 underline-offset-4 hover:text-emerald-800 dark:text-emerald-200 dark:hover:text-emerald-100"
-            href="https://www.netlify.com/"
-            rel="noopener noreferrer"
-            target="_blank"
-          >
-            Explore Netlify
-            <span aria-hidden>↗</span>
-          </a>
+    <a
+      href="https://www.netlify.com/"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="group block px-4 pt-3"
+    >
+      <div className="relative overflow-hidden rounded-xl border border-gray-200 bg-gray-50/50 transition-all duration-300 hover:border-[#05BDBA]/40 hover:shadow-md dark:border-gray-800 dark:bg-gray-900/20 dark:hover:border-[#32E6E2]/40">
+
+        <div className="flex items-center gap-3 px-4 py-3">
+
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#E6FFFA] text-[#05BDBA] transition-transform duration-300 group-hover:scale-105 dark:bg-[#1E2124] dark:text-[#32E6E2]">
+            <SiNetlify className="h-5 w-5" />
+          </div>
+
+          <div className="flex flex-col leading-tight">
+            <span className="text-[10px] font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+              Hosting & Deploy
+            </span>
+
+            <span className="flex items-center gap-1.5 text-sm font-semibold text-gray-900 transition-colors group-hover:text-[#05BDBA] dark:text-gray-100 dark:group-hover:text-[#32E6E2]">
+              Powered by Netlify
+              <span className="transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5">
+                ↗
+              </span>
+            </span>
+          </div>
         </div>
+
+        <div className="absolute inset-x-0 bottom-0 h-[2px] bg-gradient-to-r from-transparent via-[#05BDBA]/60 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:via-[#32E6E2]/60" />
       </div>
-    </div>
+    </a>
   );
 }