Files
vibn-frontend/app/(marketing)/layout.tsx

121 lines
3.9 KiB
TypeScript

import { Button } from "@/components/ui/button";
import Link from "next/link";
import type { Metadata } from "next";
import { homepage } from "@/marketing/content/homepage";
export const metadata: Metadata = {
title: homepage.meta.title,
description: homepage.meta.description,
openGraph: {
title: homepage.meta.title,
description: homepage.meta.description,
url: "https://www.vibnai.com",
siteName: "VIBN",
type: "website",
},
twitter: {
card: "summary_large_image",
title: homepage.meta.title,
description: homepage.meta.description,
},
};
export default function MarketingLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="flex min-h-screen flex-col">
{/* Navigation */}
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
<div className="container flex h-16 items-center">
<div className="flex gap-6 md:gap-10">
<Link href="/" className="flex items-center space-x-2">
<img
src="/vibn-black-circle-logo.png"
alt="Vib'n"
className="h-8 w-8"
/>
<span className="text-xl font-bold">Vib&apos;n</span>
</Link>
</div>
<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
<nav className="flex items-center space-x-6">
<Link
href="/#features"
className="text-sm font-medium transition-colors hover:text-primary"
>
Features
</Link>
<Link
href="/#how-it-works"
className="text-sm font-medium transition-colors hover:text-primary"
>
How It Works
</Link>
<Link
href="/#pricing"
className="text-sm font-medium transition-colors hover:text-primary"
>
Pricing
</Link>
<Link
href="https://github.com/MawkOne/viben"
target="_blank"
rel="noopener noreferrer"
className="text-sm font-medium transition-colors hover:text-primary"
>
GitHub
</Link>
</nav>
<div className="flex items-center space-x-4">
<Link href="/auth">
<Button variant="ghost" size="sm">
Sign In
</Button>
</Link>
<Link href="/auth">
<Button size="sm">Get Started</Button>
</Link>
</div>
</div>
</div>
</header>
{/* Main Content */}
<main className="flex-1 w-full">{children}</main>
{/* Footer */}
<footer className="border-t py-6 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">
Built by{" "}
<a
href="https://github.com/MawkOne"
target="_blank"
rel="noreferrer"
className="font-medium underline underline-offset-4"
>
Mark Henderson
</a>
. The source code is available on{" "}
<a
href="https://github.com/MawkOne/viben"
target="_blank"
rel="noreferrer"
className="font-medium underline underline-offset-4"
>
GitHub
</a>
.
</p>
</div>
</div>
</footer>
</div>
);
}