Align preview typography with FFmpeg output, add video/song title split, and ship OSS updates.

Separate YouTube video titles from on-video song/artist fields with Pro gating, serve curated fonts and watermark assets for 1:1 preview parity, and include billing/API/docs/deploy stack for self-hosted release.

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

components/Logo.tsx

@@ -0,0 +1,45 @@
+import Link from "next/link";
+import { BRAND_NAME } from "@/lib/branding";
+
+type Props = {
+  href?: string;
+  size?: "sm" | "md";
+  /** Small Beta mark at top-right of the wordmark (public marketing surfaces). */
+  beta?: boolean;
+};
+
+export function Logo({ href = "/", size = "md", beta = false }: Props) {
+  const textSize = size === "sm" ? "text-xl" : "text-2xl";
+  const betaSize = size === "sm" ? "text-[0.5rem]" : "text-[0.55rem]";
+
+  const content = (
+    <span className={`relative inline-flex items-baseline font-bold tracking-tight ${textSize}`}>
+      <span className="text-white">Songs</span>
+      <span className="text-red-400">2VID</span>
+      {beta ? (
+        <span
+          className={`pointer-events-none absolute left-full top-0 ml-0.5 -translate-y-1/2 ${betaSize} font-bold uppercase tracking-wider text-red-400`}
+          aria-hidden="true"
+        >
+          Beta
+        </span>
+      ) : null}
+    </span>
+  );
+
+  const label = beta ? `${BRAND_NAME} Beta` : BRAND_NAME;
+
+  if (href) {
+    return (
+      <Link href={href} className="inline-flex items-center" aria-label={label}>
+        {content}
+      </Link>
+    );
+  }
+
+  return (
+    <span className="inline-flex items-center" aria-label={label}>
+      {content}
+    </span>
+  );
+}