VIBN Frontend for Coolify deployment

app/(marketing)/layout.tsx

@@ -0,0 +1,120 @@
+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>
+  );
+}
+