DataDave-Dev · DataDave-Dev · Jun 16, 2026 · Jun 16, 2026
diff --git a/src/app/[lang]/page.tsx b/src/app/[lang]/page.tsx
@@ -41,6 +41,8 @@ export default async function Home({
         tagline={t.tagline}
         license={t.license}
         contribute={t.contribute}
+        product={t.footerProduct}
+        resources={t.footerResources}
         footerNote={t.footerNote}
       />
     </>

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -9,19 +9,47 @@ type Props = {
   tagline: string;
   license: string;
   contribute: string;
+  product: string;
+  resources: string;
   footerNote: string;
 };
 
-function ExternalLink({ href, children }: { href: string; children: string }) {
+function ColHeading({ children }: { children: string }) {
   return (
-    <a
-      href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="w-fit text-muted hover:text-fg transition-colors"
-    >
+    <h3 className="text-[11px] font-semibold uppercase tracking-[0.16em] text-muted/60">
       {children}
-    </a>
+    </h3>
+  );
+}
+
+function FooterLink({
+  href,
+  external,
+  children,
+}: {
+  href: string;
+  external?: boolean;
+  children: string;
+}) {
+  const className =
+    "group/link w-fit inline-flex items-center gap-1.5 text-sm text-muted hover:text-fg transition-colors";
+  const inner = (
+    <>
+      <span className="h-px w-0 bg-current transition-all duration-300 group-hover/link:w-3" />
+      {children}
+    </>
+  );
+  if (external) {
+    return (
+      <a href={href} target="_blank" rel="noopener noreferrer" className={className}>
+        {inner}
+      </a>
+    );
+  }
+  return (
+    <Link href={href} className={className}>
+      {inner}
+    </Link>
   );
 }
 
@@ -30,54 +58,79 @@ export default function Footer({
   tagline,
   license,
   contribute,
+  product,
+  resources,
   footerNote,
 }: Props) {
   return (
-    <footer className="relative bg-black border-t border-white/[0.08]">
-      <div className="max-w-[1200px] mx-auto px-6 py-14 flex flex-col gap-10 md:flex-row md:items-start md:justify-between">
-        <div className="max-w-sm">
+    <footer className="relative isolate overflow-hidden bg-black">
+      {/* Metallic hairline accent at the top edge */}
+      <div className="metallic-fill h-px w-full opacity-50" aria-hidden="true" />
+
+      {/* Atmospheric glow */}
+      <div
+        aria-hidden="true"
+        className="pointer-events-none absolute -top-32 left-1/2 -z-10 h-80 w-[70%] -translate-x-1/2 rounded-full bg-[radial-gradient(closest-side,rgba(198,206,219,0.12),transparent)] blur-3xl"
+      />
+
+      <div className="mx-auto grid max-w-[1200px] grid-cols-2 gap-x-8 gap-y-12 px-6 pb-44 pt-20 md:grid-cols-[1.7fr_1fr_1fr]">
+        {/* Brand */}
+        <div className="col-span-2 max-w-sm md:col-span-1">
           <Link
             href={`/${lang}`}
-            className="flex w-fit items-center gap-2 text-xl font-bold tracking-[0.02em]"
+            className="flex w-fit items-center gap-2.5 text-2xl font-bold tracking-[0.02em]"
           >
-            <Logo className="h-6 w-6 text-fg" />
+            <Logo className="h-7 w-7 text-fg" />
             <span className="metallic">Weftmap</span>
           </Link>
-          <p className="mt-3 text-sm leading-relaxed text-muted">{tagline}</p>
-          <p className="mt-4 text-[13px] text-muted/70">{footerNote}</p>
-        </div>
-
-        <nav className="flex flex-col gap-3 text-sm">
+          <p className="mt-5 text-sm leading-relaxed text-muted">{tagline}</p>
           <a
             href={REPO}
             target="_blank"
             rel="noopener noreferrer"
-            className="w-fit flex items-center gap-2 text-muted hover:text-fg transition-colors"
+            aria-label="GitHub repository"
+            className="mt-7 inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/[0.12] text-muted transition-all hover:-translate-y-0.5 hover:border-white/30 hover:bg-white/[0.06] hover:text-fg"
           >
-            <svg
-              width="16"
-              height="16"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              aria-hidden="true"
-            >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
               <path d="M12 .5C5.37.5 0 5.78 0 12.29c0 5.2 3.44 9.6 8.21 11.16.6.11.82-.25.82-.57 0-.28-.01-1.02-.02-2-3.34.71-4.04-1.58-4.04-1.58-.55-1.37-1.33-1.74-1.33-1.74-1.09-.73.08-.71.08-.71 1.2.08 1.84 1.21 1.84 1.21 1.07 1.8 2.81 1.28 3.5.98.11-.76.42-1.28.76-1.58-2.67-.3-5.47-1.31-5.47-5.83 0-1.29.47-2.34 1.24-3.17-.13-.3-.54-1.52.11-3.18 0 0 1.01-.32 3.3 1.21a11.6 11.6 0 0 1 6 0c2.29-1.53 3.3-1.21 3.3-1.21.65 1.66.24 2.88.12 3.18.77.83 1.23 1.88 1.23 3.17 0 4.53-2.81 5.53-5.49 5.82.43.37.81 1.1.81 2.22 0 1.6-.01 2.9-.01 3.29 0 .32.21.69.83.57A12.01 12.01 0 0 0 24 12.29C24 5.78 18.63.5 12 .5z" />
             </svg>
-            GitHub
           </a>
-          <ExternalLink href={`${REPO}/blob/main/LICENSE`}>
+        </div>
+
+        {/* Product */}
+        <div className="flex flex-col gap-4">
+          <ColHeading>{product}</ColHeading>
+          <FooterLink href={`/${lang}/app`}>App</FooterLink>
+          <FooterLink href={`/${lang}/docs`}>Docs</FooterLink>
+        </div>
+
+        {/* Resources */}
+        <div className="flex flex-col gap-4">
+          <ColHeading>{resources}</ColHeading>
+          <FooterLink href={REPO} external>
+            GitHub
+          </FooterLink>
+          <FooterLink href={`${REPO}/blob/main/LICENSE`} external>
             {license}
-          </ExternalLink>
-          <ExternalLink href={`${REPO}/blob/main/CONTRIBUTING.md`}>
+          </FooterLink>
+          <FooterLink href={`${REPO}/blob/main/CONTRIBUTING.md`} external>
             {contribute}
-          </ExternalLink>
-        </nav>
+          </FooterLink>
+        </div>
       </div>
 
-      <div className="border-t border-white/[0.06]">
-        <div className="max-w-[1200px] mx-auto px-6 py-6 flex items-center justify-between text-xs text-muted">
-          <span>© 2026 DataDave-Dev</span>
-          <span className="font-mono">MIT</span>
+      {/* Oversized brand wordmark fading into the background */}
+      <span
+        aria-hidden="true"
+        className="pointer-events-none absolute inset-x-0 -bottom-[0.18em] -z-10 select-none whitespace-nowrap bg-gradient-to-t from-white/0 via-white/[0.04] to-white/[0.10] bg-clip-text text-center text-[20vw] font-bold leading-none tracking-tighter text-transparent"
+      >
+        Weftmap
+      </span>
+
+      <div className="relative border-t border-white/[0.06] bg-black/40 backdrop-blur-sm">
+        <div className="mx-auto flex max-w-[1200px] flex-col items-center justify-between gap-2 px-6 py-6 text-xs text-muted sm:flex-row">
+          <span>© 2026 DataDave-Dev · {footerNote}</span>
+          <span className="font-mono tracking-wider">MIT</span>
         </div>
       </div>
     </footer>

diff --git a/src/i18n/dictionaries/en.json b/src/i18n/dictionaries/en.json
@@ -51,6 +51,8 @@
   ],
   "license": "License",
   "contribute": "Contribute",
+  "footerProduct": "Product",
+  "footerResources": "Resources",
   "footerNote": "Open source, built to be extended.",
   "appTitle": "Try it now",
   "languageLabel": "Language",

diff --git a/src/i18n/dictionaries/es.json b/src/i18n/dictionaries/es.json
@@ -51,6 +51,8 @@
   ],
   "license": "Licencia",
   "contribute": "Contribuir",
+  "footerProduct": "Producto",
+  "footerResources": "Recursos",
   "footerNote": "Open source, hecho para extenderse.",
   "appTitle": "Pruébalo ahora",
   "languageLabel": "Lenguaje",