konnosDashboard
page.tsx169 lines · main
1import type { Metadata } from 'next';
2import Link from 'next/link';
3
4import { BackgroundGrid } from '../../components/marketing/background-grid';
5import { ContactForm } from '../../components/marketing/contact-form';
6import { SiteFooter } from '../../components/marketing/site-footer';
7import { SiteHeader } from '../../components/marketing/site-header';
8import { TrackPageView } from '../../components/marketing/track-page-view';
9import { detectCountry } from '../../lib/geo-country';
10import { getSessionUser } from '../../lib/session';
11
12export const metadata: Metadata = {
13 title: 'contact briven — get in touch',
14 description:
15 'questions about briven, support, sales, security or privacy? send us a message and we’ll get back to you within one business day. no signup needed.',
16};
17
18interface HelpLink {
19 href: string;
20 title: string;
21 body: string;
22}
23
24// Non-email self-serve routes. Some folks get unblocked faster here than
25// by waiting on a reply — keep this in sync with the footer + docs.
26const HELP_LINKS: readonly HelpLink[] = [
27 {
28 href: 'https://docs.briven.tech/support',
29 title: 'docs & support',
30 body: 'guides, troubleshooting and the support handbook — the fastest path for most questions.',
31 },
32 {
33 href: 'https://github.com/flndrn-dev/briven',
34 title: 'source & issues',
35 body: 'briven is open. read the code, file a bug, or follow along with what we’re building.',
36 },
37 {
38 href: '/status',
39 title: 'system status',
40 body: 'checking whether something’s down? the live status page shows current uptime and incidents.',
41 },
42];
43
44// Legend for the topic select — explains where each routing choice goes,
45// without ever exposing an email address.
46const SUPPORT_TOPICS: readonly { label: string; body: string }[] = [
47 { label: 'general', body: 'anything that doesn’t fit a box below.' },
48 { label: 'support', body: 'something broken or not working as expected.' },
49 { label: 'sales', body: 'plans, pricing, limits and getting started.' },
50 { label: 'self-host', body: 'running briven on your own server — we’ll get the process started.' },
51 { label: 'security', body: 'vulnerabilities and responsible disclosure.' },
52 { label: 'privacy', body: 'your data, access requests and deletion.' },
53 { label: 'legal', body: 'terms, contracts and compliance questions.' },
54];
55
56export default async function ContactPage({
57 searchParams,
58}: {
59 searchParams: Promise<{ topic?: string }>;
60}) {
61 const [user, params, country] = await Promise.all([
62 getSessionUser().catch(() => null),
63 searchParams,
64 detectCountry().catch(() => null),
65 ]);
66 return (
67 <main className="relative min-h-dvh overflow-hidden bg-[var(--color-bg)] text-[var(--color-text)]">
68 <TrackPageView
69 apiOrigin={process.env.NEXT_PUBLIC_BRIVEN_API_ORIGIN ?? ''}
70 source="contact"
71 />
72 <BackgroundGrid />
73 <SiteHeader user={user} />
74
75 <section className="relative z-10 mx-auto w-full max-w-6xl px-6 pb-24 pt-16 sm:pt-24">
76 <div className="grid grid-cols-1 gap-10 lg:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)] lg:gap-12">
77 {/* LEFT — heading + subtitle + form */}
78 <div>
79 <p className="font-mono uppercase tracking-[0.12em] text-[var(--color-primary)] text-[var(--text-xs)]">
80 contact
81 </p>
82 <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)]">
83 get in touch.
84 </h1>
85 <p className="mt-6 max-w-xl leading-[1.6] text-[var(--color-text-muted)] text-[var(--text-body)]">
86 questions about briven — support, sales, security or privacy? leave a message
87 below and we&apos;ll get back to you within one business day. we reply privately
88 to the address you give us. no signup required, no marketing emails.
89 </p>
90
91 <div className="mt-8">
92 <ContactForm
93 apiOrigin={process.env.NEXT_PUBLIC_BRIVEN_API_ORIGIN ?? ''}
94 initialTopic={params.topic}
95 initialCountry={country}
96 />
97 </div>
98 </div>
99
100 {/* RIGHT — Briven-styled sidebar cards */}
101 <aside className="flex flex-col gap-4">
102 <div className="rounded-[var(--radius-lg)] border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-5">
103 <p className="font-mono uppercase tracking-[0.12em] text-[var(--color-text-subtle)] text-[var(--text-xs)]">
104 contact
105 </p>
106 <p className="mt-3 font-sans font-medium tracking-[-0.02em] text-[var(--color-text)] text-[var(--text-h4)]">
107 the form reaches us directly
108 </p>
109 <p className="mt-2 leading-[1.6] text-[var(--color-text-muted)] text-[var(--text-small)]">
110 there&apos;s no inbox to dig up — send the form and it lands straight with the
111 briven team. we reply privately to the address you give us, usually within one
112 business day. nothing you send is posted publicly.
113 </p>
114 </div>
115
116 <div className="rounded-[var(--radius-lg)] border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-5">
117 <p className="font-mono uppercase tracking-[0.12em] text-[var(--color-text-subtle)] text-[var(--text-xs)]">
118 support topics
119 </p>
120 <ul className="mt-3 flex flex-col gap-2.5">
121 {SUPPORT_TOPICS.map((t) => (
122 <li key={t.label} className="leading-[1.5]">
123 <span className="font-mono text-xs text-[var(--color-primary)]">
124 {t.label}
125 </span>{' '}
126 <span className="text-[var(--color-text-muted)] text-[var(--text-small)]">
127 — {t.body}
128 </span>
129 </li>
130 ))}
131 </ul>
132 </div>
133
134 <div className="rounded-[var(--radius-lg)] border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-5">
135 <p className="font-mono uppercase tracking-[0.12em] text-[var(--color-text-subtle)] text-[var(--text-xs)]">
136 quick links
137 </p>
138 <p className="mt-2 leading-[1.6] text-[var(--color-text-muted)] text-[var(--text-small)]">
139 for a lot of questions you can get unblocked right now, without waiting on a reply.
140 </p>
141 <ul className="mt-4 flex flex-col gap-3">
142 {HELP_LINKS.map((l) => (
143 <li key={l.href}>
144 <Link
145 href={l.href}
146 className="group flex flex-col gap-1 rounded-[var(--radius-md)] border border-[var(--color-border-subtle)] bg-[var(--color-bg)] p-3 transition hover:border-[var(--color-border-strong)]"
147 >
148 <span className="font-sans font-medium tracking-[-0.02em] text-[var(--color-text)] text-[var(--text-small)]">
149 {l.title}
150 </span>
151 <span className="leading-[1.5] text-[var(--color-text-muted)] text-xs">
152 {l.body}
153 </span>
154 <span className="mt-1 font-mono text-xs text-[var(--color-text-link)] group-hover:underline">
155 open →
156 </span>
157 </Link>
158 </li>
159 ))}
160 </ul>
161 </div>
162 </aside>
163 </div>
164 </section>
165
166 <SiteFooter />
167 </main>
168 );
169}