Add SEO comparison landing pages and footer compare links.

Introduces dynamic marketing comparison routes, competitor data, and Compare sections on the homepage and marketing footer.
2026-09-11 17:46:06 +00:00 · 2026-06-14 16:36:26 +02:00
parent d301f3d808
commit 51257e004f
14 changed files with 2248 additions and 25 deletions
@@ -0,0 +1,77 @@
+import Link from 'next/link';
+import { MoveRight, Video } from 'lucide-react';
+import { seoConfig } from '@/lib/seo';
+
+const controlButtonClass =
+  'group relative isolate inline-flex h-8 items-center justify-center overflow-hidden border border-border bg-background px-2.5 text-[11px] font-medium text-foreground transition-colors duration-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring sm:h-9 sm:px-4 sm:text-xs';
+
+interface MarketingHeaderProps {
+  isLoggedIn: boolean;
+}
+
+export function MarketingHeader({ isLoggedIn }: MarketingHeaderProps) {
+  const hostedCtaHref = isLoggedIn ? '/dashboard' : '/register';
+
+  return (
+    <header className="border-b border-border bg-background/90 backdrop-blur-md">
+      <div className="mx-auto flex h-14 w-full max-w-[1200px] items-center justify-between px-4 sm:h-16 sm:px-6 lg:px-10">
+        <Link
+          href="/"
+          className="group relative isolate inline-flex items-center gap-2 overflow-hidden border border-border bg-background px-3 py-2"
+        >
+          <span className="pointer-events-none absolute inset-0 -translate-x-[101%] bg-primary/10 transition-transform duration-300 group-hover:translate-x-0" />
+          <Video className="relative z-10 h-4 w-4 text-primary" />
+          <span className="relative z-10 text-xs font-semibold tracking-[0.12em]">OPENFRAME</span>
+        </Link>
+
+        <nav className="hidden items-center gap-6 text-[11px] font-medium uppercase tracking-[0.14em] md:flex">
+          <Link
+            className="text-muted-foreground transition-colors hover:text-foreground"
+            href="/#features"
+          >
+            Features
+          </Link>
+          <Link
+            className="text-muted-foreground transition-colors hover:text-foreground"
+            href="/#pricing"
+          >
+            Pricing
+          </Link>
+          <a
+            className="text-muted-foreground transition-colors hover:text-foreground"
+            href={seoConfig.githubUrl}
+            target="_blank"
+            rel="noreferrer"
+          >
+            GitHub
+          </a>
+        </nav>
+
+        <div className="flex items-center gap-2">
+          {isLoggedIn ? (
+            <Link href="/dashboard" className={controlButtonClass}>
+              <span className="pointer-events-none absolute inset-0 -translate-x-[101%] bg-primary/10 transition-transform duration-300 group-hover:translate-x-0" />
+              <span className="relative z-10 inline-flex items-center gap-2">
+                Dashboard
+                <MoveRight className="h-3.5 w-3.5" />
+              </span>
+            </Link>
+          ) : (
+            <>
+              <Link
+                href="/login"
+                className="mr-4 hidden text-xs font-medium text-muted-foreground hover:text-foreground sm:block"
+              >
+                Log in
+              </Link>
+              <Link href={hostedCtaHref} className={controlButtonClass}>
+                <span className="pointer-events-none absolute inset-0 -translate-x-[101%] bg-primary/10 transition-transform duration-300 group-hover:translate-x-0" />
+                <span className="relative z-10">Start free trial</span>
+              </Link>
+            </>
+          )}
+        </div>
+      </div>
+    </header>
+  );
+}