konnosDashboard
compare-page.tsx99 lines · main
1import Link from 'next/link';
2
3import { BackgroundGrid } from './background-grid';
4import { CompareTable } from './compare-table';
5import { SiteFooter } from './site-footer';
6import { SiteHeader } from './site-header';
7import type { SessionUser } from '../../lib/session';
8
9interface ComparePageProps {
10 user: SessionUser | null;
11 otherName: string;
12 oneline: string;
13 intro: string;
14 rows: { feature: string; briven: string; other: string; note?: string }[];
15 whenOtherWins: string[];
16 whenBrivenWins: string[];
17 migrationGuideHref?: string;
18}
19
20export function ComparePage(props: ComparePageProps) {
21 return (
22 <main className="relative min-h-dvh overflow-hidden bg-[var(--color-bg)] text-[var(--color-text)]">
23 <BackgroundGrid />
24 <SiteHeader user={props.user} />
25
26 <section className="relative z-10 mx-auto w-full max-w-4xl px-6 pb-10 pt-16 sm:pt-20">
27 <p className="font-mono uppercase tracking-[0.12em] text-[var(--color-primary)] text-[var(--text-xs)]">
28 briven vs {props.otherName}
29 </p>
30 <h1 className="mt-4 font-sans font-medium leading-[1.05] tracking-[-0.03em] text-[var(--color-text)] text-[var(--text-display-3)] sm:text-[var(--text-display-2)]">
31 {props.oneline}
32 </h1>
33 <p className="mt-6 max-w-2xl leading-[1.6] text-[var(--color-text-muted)] text-[var(--text-body)]">
34 {props.intro}
35 </p>
36 </section>
37
38 <section className="relative z-10 mx-auto w-full max-w-4xl px-6 pb-12">
39 <CompareTable rows={props.rows} otherName={props.otherName} />
40 </section>
41
42 <section className="relative z-10 mx-auto w-full max-w-4xl px-6 pb-16">
43 <div className="grid grid-cols-1 gap-px overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border-subtle)] bg-[var(--color-border-subtle)] md:grid-cols-2">
44 <div className="flex flex-col gap-3 bg-[var(--color-bg)] p-6">
45 <h3 className="font-mono text-sm text-[var(--color-text-muted)]">
46 when {props.otherName} wins
47 </h3>
48 <ul className="flex flex-col gap-2 leading-[1.6] text-[var(--color-text-muted)] text-[var(--text-small)]">
49 {props.whenOtherWins.map((point, i) => (
50 <li key={i} className="flex gap-2">
51 <span className="text-[var(--color-text-subtle)]">·</span>
52 <span>{point}</span>
53 </li>
54 ))}
55 </ul>
56 </div>
57 <div className="flex flex-col gap-3 bg-[var(--color-bg)] p-6">
58 <h3 className="font-mono text-sm text-[var(--color-primary)]">when briven wins</h3>
59 <ul className="flex flex-col gap-2 leading-[1.6] text-[var(--color-text-muted)] text-[var(--text-small)]">
60 {props.whenBrivenWins.map((point, i) => (
61 <li key={i} className="flex gap-2">
62 <span className="text-[var(--color-primary)]">·</span>
63 <span>{point}</span>
64 </li>
65 ))}
66 </ul>
67 </div>
68 </div>
69 </section>
70
71 <section className="relative z-10 mx-auto w-full max-w-4xl px-6 pb-20">
72 <div className="flex flex-wrap items-center gap-3">
73 <Link
74 href="/signin"
75 className="inline-flex h-12 items-center justify-center rounded-[var(--radius-md)] bg-[var(--color-primary)] px-6 font-sans font-medium text-[var(--color-text-inverse)] transition-colors hover:bg-[var(--color-primary-hover)]"
76 >
77 try briven free
78 </Link>
79 {props.migrationGuideHref ? (
80 <Link
81 href={props.migrationGuideHref}
82 className="inline-flex h-12 items-center justify-center rounded-[var(--radius-md)] border border-[var(--color-border)] px-6 font-sans font-medium text-[var(--color-text)] hover:border-[var(--color-border-strong)]"
83 >
84 migration guide →
85 </Link>
86 ) : null}
87 <Link
88 href="/compare"
89 className="font-mono text-xs text-[var(--color-text-muted)] hover:text-[var(--color-text)]"
90 >
91 ← all comparisons
92 </Link>
93 </div>
94 </section>
95
96 <SiteFooter />
97 </main>
98 );
99}