do only groups

docs/next-js/app/page.tsx

@@ -1,11 +1,13 @@
 import Image from "next/image";
 import LocalNetCDFMeta from "@/components/loading/LocalNetCDFMeta";
-import GithubButton from "@/components/loading/GitHubButton";
+import TopNav from "@/components/loading/TopNav";
+
 export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-8xl flex-col items-center justify-center py-16 px-8 bg-white dark:bg-black">
-        {/* Images side by side with + */}
+    <div className="flex min-h-screen flex-col bg-zinc-50 font-sans dark:bg-black">
+      <TopNav />
+      <main className="flex flex-1 w-full max-w-8xl flex-col items-center justify-center py-24 px-8 bg-white dark:bg-black mx-auto">
+        {/* Images side by side */}
         <div className="flex items-center gap-4 mb-8">
           <Image
             src="./logo.svg"
@@ -19,11 +21,33 @@ export default function Home() {
           </span>
         </div>
         <LocalNetCDFMeta />
-
-        <div className="fixed top-4 right-16 z-50 flex items-center gap-2">
-          <GithubButton />
-        </div>
       </main>
+      <footer className="py-6 text-center text-sm bg-[color:var(--card)] text-[color:var(--muted-foreground)] dark:bg-[color:var(--card)] dark:text-[color:var(--muted-foreground)]">
+  <p>
+    Released under the{" "}
+    <a
+      href="https://github.com/EarthyScience/netcdf4-wasm?tab=MIT-1-ov-file#readme"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-[color:var(--accent-foreground)] hover:text-[#644FF0] transition-colors"
+    >
+      MIT License
+    </a>
+    .
+  </p>
+  <p>
+    Copyright © {new Date().getFullYear()}{" "}
+    <a
+      href="https://lazarusa.github.io/"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="text-[color:var(--accent-foreground)] hover:text-[#644FF0] transition-colors"
+    >
+      Lazaro Alonso
+    </a>
+  </p>
+</footer>
+
     </div>
   );
 }

docs/next-js/components/loading/BrowzarrCTA.tsx

@@ -1,36 +1,42 @@
-import React from 'react';
-import Link from 'next/link';
-import { Button } from '@/components/ui/button';
+import React from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 interface BrowzarrCTAProps {
   message?: string;
   buttonText?: string;
-  className?: string;
 }
 
-export default function BrowzarrCTA({ 
+export default function BrowzarrCTA({
   message = "Reading is just the beginning. Explore your data!",
   buttonText = "Try browzarr.io",
-  className = ""
 }: BrowzarrCTAProps) {
   return (
-    <div className={`flex flex-col items-center gap-3 p-4 ${className}`}>
-      <p className="text-center text-sm text-gray-600 dark:text-gray-400">
-        {message}
-      </p>
-      <Link 
-        aria-label="browzarr.io" 
-        href="https://browzarr.io/"
-        target="_blank"
-        rel="noopener noreferrer"
-      > 
-        <Button 
-          size="sm" 
-          className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg hover:shadow-xl transition-shadow cursor-pointer"
-        >
-          {buttonText}
-        </Button>
-      </Link>
-    </div>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Link
+              aria-label="browzarr.io"
+              href="https://browzarr.io/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button
+                size="sm"
+                className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg hover:shadow-xl transition-shadow hover:scale-95 transition-transform duration-100 ease-out cursor-pointer"
+              >
+                {buttonText}
+              </Button>
+            </Link>
+          </TooltipTrigger>
+
+          <TooltipContent className="max-w-xs" align="end">
+            {message}
+          </TooltipContent>
+        </Tooltip>
   );
 }

docs/next-js/components/loading/GitHubButton.tsx

@@ -10,8 +10,17 @@ export default function GithubButton() {
     <Tooltip delayDuration={500}>
       <TooltipTrigger asChild>
         <Link href="https://github.com/EarthyScience/netcdf4-wasm" aria-label="github" target="_blank" rel="noopener noreferrer">
-          <Button variant="ghost" size="icon" className="cursor-pointer hover:scale-95 transition-transform duration-100 ease-out">
-            <FaGithub className="size-6"/> Give us a Star
+          <Button
+            variant="ghost"
+            className="
+              hover:scale-95 transition-transform duration-100 ease-out
+              hover:bg-transparent active:bg-transparent
+              focus:bg-transparent focus-visible:ring-0
+              cursor-pointer
+            "
+          >
+            <FaGithub className="size-6" />
+            Give us a Star
           </Button>
         </Link>
       </TooltipTrigger>