feat: add proper marketing footer with privacy/terms links

- marketing/components/footer.tsx: multi-column footer with product,
  resources, and legal columns — Privacy Policy clearly linked on homepage
  (satisfies Google OAuth consent screen requirement)
- Replaces thin single-line footer in layout.tsx

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(marketing)/layout.tsx

@@ -2,6 +2,7 @@ import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import type { Metadata } from "next";
 import { homepage } from "@/marketing/content/homepage";
+import { Footer } from "@/marketing/components";
 
 export const metadata: Metadata = {
   title: homepage.meta.title,
@@ -86,39 +87,7 @@ export default function MarketingLayout({
       {/* Main Content */}
       <main className="flex-1 w-full">{children}</main>
 
-      {/* Footer */}
+      <Footer />
-      <footer className="border-t py-8 md:py-0">
-        <div className="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
-          <div className="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
-            <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
-              © {new Date().getFullYear()} Vib&apos;n. Built by{" "}
-              <a
-                href="https://github.com/MawkOne"
-                target="_blank"
-                rel="noreferrer"
-                className="font-medium underline underline-offset-4"
-              >
-                Mark Henderson
-              </a>
-              {" "}· Victoria, BC, Canada
-            </p>
-          </div>
-          <nav className="flex items-center gap-6 text-sm text-muted-foreground">
-            <Link href="/privacy" className="hover:text-foreground transition-colors">
-              Privacy Policy
-            </Link>
-            <Link href="/terms" className="hover:text-foreground transition-colors">
-              Terms of Service
-            </Link>
-            <a
-              href="mailto:legal@vibnai.com"
-              className="hover:text-foreground transition-colors"
-            >
-              Contact
-            </a>
-          </nav>
-        </div>
-      </footer>
     </div>
   );
 }

marketing/components/footer.tsx

@@ -0,0 +1,140 @@
+import Link from "next/link";
+import { Github, Mail } from "lucide-react";
+
+const YEAR = new Date().getFullYear();
+
+const links = {
+  product: [
+    { label: "Features",    href: "/#features" },
+    { label: "How It Works", href: "/#how-it-works" },
+    { label: "Pricing",     href: "/#pricing" },
+    { label: "Sign In",     href: "/auth" },
+    { label: "Get Started", href: "/auth" },
+  ],
+  resources: [
+    { label: "GitHub",      href: "https://github.com/MawkOne/viben", external: true },
+    { label: "Documentation", href: "https://github.com/MawkOne/viben", external: true },
+    { label: "Changelog",   href: "https://github.com/MawkOne/viben/releases", external: true },
+  ],
+  legal: [
+    { label: "Privacy Policy",   href: "/privacy" },
+    { label: "Terms of Service", href: "/terms" },
+    { label: "Contact",          href: "mailto:hello@vibnai.com", external: true },
+  ],
+};
+
+export function Footer() {
+  return (
+    <footer className="border-t bg-muted/30">
+      <div className="container mx-auto px-6 py-12 md:py-16">
+
+        {/* Top — logo + columns */}
+        <div className="grid grid-cols-2 gap-8 md:grid-cols-4 lg:grid-cols-4">
+
+          {/* Brand */}
+          <div className="col-span-2 md:col-span-1">
+            <Link href="/" className="flex items-center gap-2 mb-4">
+              <img src="/vibn-black-circle-logo.png" alt="Vib'n" className="h-8 w-8" />
+              <span className="text-lg font-bold">Vib&apos;n</span>
+            </Link>
+            <p className="text-sm text-muted-foreground leading-relaxed max-w-[220px]">
+              AI-powered development platform for vibe coders. From idea to market.
+            </p>
+            <div className="flex items-center gap-3 mt-5">
+              <a
+                href="https://github.com/MawkOne/viben"
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label="GitHub"
+                className="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <Github className="h-5 w-5" />
+              </a>
+              <a
+                href="mailto:hello@vibnai.com"
+                aria-label="Email"
+                className="text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <Mail className="h-5 w-5" />
+              </a>
+            </div>
+          </div>
+
+          {/* Product */}
+          <div>
+            <h3 className="text-sm font-semibold mb-4">Product</h3>
+            <ul className="space-y-3">
+              {links.product.map((l) => (
+                <li key={l.label}>
+                  <Link
+                    href={l.href}
+                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    {l.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Resources */}
+          <div>
+            <h3 className="text-sm font-semibold mb-4">Resources</h3>
+            <ul className="space-y-3">
+              {links.resources.map((l) => (
+                <li key={l.label}>
+                  <a
+                    href={l.href}
+                    target={l.external ? "_blank" : undefined}
+                    rel={l.external ? "noopener noreferrer" : undefined}
+                    className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    {l.label}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Legal */}
+          <div>
+            <h3 className="text-sm font-semibold mb-4">Legal</h3>
+            <ul className="space-y-3">
+              {links.legal.map((l) => (
+                <li key={l.label}>
+                  {l.external ? (
+                    <a
+                      href={l.href}
+                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      {l.label}
+                    </a>
+                  ) : (
+                    <Link
+                      href={l.href}
+                      className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+                    >
+                      {l.label}
+                    </Link>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </div>
+
+        </div>
+
+        {/* Bottom bar */}
+        <div className="mt-12 pt-8 border-t flex flex-col items-center justify-between gap-3 md:flex-row">
+          <p className="text-xs text-muted-foreground">
+            © {YEAR} Vib&apos;n · Victoria, British Columbia, Canada
+          </p>
+          <p className="text-xs text-muted-foreground">
+            Built with ❤️ for vibe coders everywhere
+          </p>
+        </div>
+
+      </div>
+    </footer>
+  );
+}

marketing/components/index.ts

@@ -11,4 +11,5 @@ export { Features } from "./features";
 export { HowItWorks } from "./how-it-works";
 export { Pricing } from "./pricing";
 export { CTA } from "./cta";
+export { Footer } from "./footer";