Sync layouts, typography, and watermark studio for self-hosted OSS.

Unlock features without credits/Stripe, point docs to docs.songs2vid.com, and drop leftover billing admin surfaces.

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

components/LandingNavbar.tsx

@@ -3,12 +3,14 @@
 import { useState } from "react";
 import { Logo } from "@/components/Logo";
 import { MobileMenuButton, MobileSidebar, sidebarLinkClass } from "@/components/MobileSidebar";
+import { DOCS_URL, WEBSITE_URL } from "@/lib/plans";
 
 const NAV_LINKS = [
-  { href: "#benefits", label: "Benefits" },
-  { href: "#download", label: "Download" },
-  { href: "#pricing", label: "Pricing" },
-  { href: "#support", label: "Support" },
+  { href: "#benefits", label: "Benefits", kind: "anchor" as const },
+  { href: "#download", label: "Download", kind: "anchor" as const },
+  { href: `${DOCS_URL}/docs/intro`, label: "Docs", kind: "external" as const },
+  { href: WEBSITE_URL, label: "Hosted", kind: "external" as const },
+  { href: "#support", label: "Support", kind: "anchor" as const },
 ] as const;
 
 function NavAnchor({
@@ -37,6 +39,30 @@ function NavAnchor({
   );
 }
 
+function ExternalLink({
+  href,
+  label,
+  onNavigate,
+  className = "text-base font-medium text-gray-300 transition-colors duration-200 hover:text-white",
+}: {
+  href: string;
+  label: string;
+  onNavigate?: () => void;
+  className?: string;
+}) {
+  return (
+    <a
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      onClick={() => onNavigate?.()}
+      className={className}
+    >
+      {label}
+    </a>
+  );
+}
+
 export function LandingNavbar() {
   const [menuOpen, setMenuOpen] = useState(false);
 
@@ -48,9 +74,13 @@ export function LandingNavbar() {
 
           <div className="flex items-center gap-4">
             <nav className="hidden items-center gap-10 sm:flex">
-              {NAV_LINKS.map(({ href, label }) => (
-                <NavAnchor key={href} href={href} label={label} />
-              ))}
+              {NAV_LINKS.map((link) =>
+                link.kind === "external" ? (
+                  <ExternalLink key={link.href} href={link.href} label={link.label} />
+                ) : (
+                  <NavAnchor key={link.href} href={link.href} label={link.label} />
+                ),
+              )}
             </nav>
 
             <MobileMenuButton
@@ -62,15 +92,25 @@ export function LandingNavbar() {
       </header>
 
       <MobileSidebar open={menuOpen} onClose={() => setMenuOpen(false)} title="Menu">
-        {NAV_LINKS.map(({ href, label }) => (
-          <NavAnchor
-            key={href}
-            href={href}
-            label={label}
-            onNavigate={() => setMenuOpen(false)}
-            className={sidebarLinkClass()}
-          />
-        ))}
+        {NAV_LINKS.map((link) =>
+          link.kind === "external" ? (
+            <ExternalLink
+              key={link.href}
+              href={link.href}
+              label={link.label}
+              onNavigate={() => setMenuOpen(false)}
+              className={sidebarLinkClass()}
+            />
+          ) : (
+            <NavAnchor
+              key={link.href}
+              href={link.href}
+              label={link.label}
+              onNavigate={() => setMenuOpen(false)}
+              className={sidebarLinkClass()}
+            />
+          ),
+        )}
       </MobileSidebar>
     </>
   );