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>
This commit is contained in:
140
marketing/components/footer.tsx
Normal file
140
marketing/components/footer.tsx
Normal file
@@ -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'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'n · Victoria, British Columbia, Canada
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Built with ❤️ for vibe coders everywhere
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -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";
|
||||
|
||||
|
||||
Reference in New Issue
Block a user