forum register/login: rebrand as Broadcast Beat membership
Page heading 'Create a Forum Account' read like a single-purpose signup buried under the forum, which it no longer is. Refreshed to 'Join Broadcast Beat' with a left-column benefits rail (forum, newsletter preferences, saved articles, reply notifications) so the user understands the same account covers everything we'll add over time. Sign-in page gets the matching 'Sign in to Broadcast Beat' header with the same dark gradient + branded copy. PR-firm distinction is signposted explicitly below the rail: contributors who want to publish press releases need a separate application — they shouldn't accidentally sign up as a regular member and expect to post news. Submission-receive auth gate already enforces this; the message just makes the path visible. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ryan Salazar
@@ -50,17 +50,18 @@ function ForumLoginInner() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main className="min-h-screen bg-[#111111]">
|
||||
<div className="max-w-md mx-auto px-4 py-12">
|
||||
<main className="min-h-screen bg-gradient-to-b from-[#0d0d0d] via-[#111111] to-[#0d0d0d]">
|
||||
<div className="max-w-md mx-auto px-4 py-16">
|
||||
<div className="text-center mb-6">
|
||||
<h1 className="text-2xl font-heading font-bold text-white">Sign in to the Forum</h1>
|
||||
<p className="text-[#888] font-body text-sm mt-1">
|
||||
Use your Broadcast Beat account to post, reply, and vote.
|
||||
<div className="text-[10px] uppercase tracking-widest text-[#3b82f6] font-mono mb-2">Welcome back</div>
|
||||
<h1 className="text-3xl font-heading font-bold text-white">Sign in to Broadcast Beat</h1>
|
||||
<p className="text-[#888] font-body text-sm mt-2">
|
||||
Your account covers the forum, newsletter preferences, and saved articles.
|
||||
</p>
|
||||
</div>
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4"
|
||||
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4 shadow-2xl"
|
||||
>
|
||||
{error && (
|
||||
<div className="bg-[#2a0a0a] border border-[#cc0000] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
|
||||
|
||||
@@ -72,18 +72,56 @@ function ForumRegisterInner() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main className="min-h-screen bg-[#111111]">
|
||||
<div className="max-w-md mx-auto px-4 py-12">
|
||||
<div className="text-center mb-6">
|
||||
<h1 className="text-2xl font-heading font-bold text-white">Create a Forum Account</h1>
|
||||
<main className="min-h-screen bg-gradient-to-b from-[#0d0d0d] via-[#111111] to-[#0d0d0d]">
|
||||
<div className="max-w-5xl mx-auto px-4 py-12 grid grid-cols-1 lg:grid-cols-[1fr_440px] gap-10 items-start">
|
||||
{/* Left rail — what membership gets you */}
|
||||
<aside className="hidden lg:block">
|
||||
<div className="text-[10px] uppercase tracking-widest text-[#3b82f6] font-mono mb-3">Membership</div>
|
||||
<h1 className="font-heading text-white text-4xl xl:text-5xl font-bold leading-tight mb-4">
|
||||
Join Broadcast Beat
|
||||
</h1>
|
||||
<p className="text-[#cbd5e1] text-base leading-relaxed mb-6 max-w-md">
|
||||
One free account for the broadcast engineering community — covering NAB, IBC, and the people behind every signal chain.
|
||||
</p>
|
||||
<ul className="space-y-3 text-sm text-[#d1d5db] max-w-md">
|
||||
{[
|
||||
["💬", "Join the broadcast engineering forum", "Threads, replies, and a verified industry community"],
|
||||
["📧", "Manage your newsletter preferences", "Pick which categories — Commercial TV, Radio, Industry News, SMPTE — you want delivered"],
|
||||
["🔖", "Save articles to read later", "Bookmark coverage, build your own reading list"],
|
||||
["🔔", "Get notified of replies and follow-ups", "Email you when someone responds to a thread you're in"],
|
||||
].map(([icon, title, desc]) => (
|
||||
<li key={String(title)} className="flex gap-3 items-start">
|
||||
<span className="text-xl leading-none flex-shrink-0">{icon}</span>
|
||||
<div>
|
||||
<div className="font-semibold text-white">{title}</div>
|
||||
<div className="text-xs text-[#9ca3af] mt-0.5">{desc}</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-6 text-[11px] text-[#666] leading-relaxed max-w-md border-t border-[#252525] pt-4">
|
||||
<strong className="text-[#888]">PR firms & contributors:</strong> a separate contributor application is required to submit press releases.
|
||||
{" "}
|
||||
<Link href="/about/advertise" className="text-[#3b82f6] hover:underline">Contact us</Link> if you represent a manufacturer or agency.
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Mobile-only hero (collapsed copy) */}
|
||||
<div className="lg:hidden text-center mb-2">
|
||||
<h1 className="font-heading text-white text-2xl font-bold">Join Broadcast Beat</h1>
|
||||
<p className="text-[#888] font-body text-sm mt-1">
|
||||
Post threads, reply, vote, and follow the conversation.
|
||||
One account for the forum, newsletter preferences, and saved articles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4"
|
||||
className="bg-[#1a1a1a] border border-[#252525] rounded-lg p-6 space-y-4 shadow-2xl"
|
||||
>
|
||||
<div className="hidden lg:block mb-2">
|
||||
<div className="text-[10px] uppercase tracking-widest text-[#3b82f6] font-mono mb-1">Create your account</div>
|
||||
<div className="text-[#888] text-xs">Takes 30 seconds. Free, no card needed.</div>
|
||||
</div>
|
||||
{error && (
|
||||
<div className="bg-[#2a0a0a] border border-[#cc0000] text-[#ff8a8a] font-body text-sm px-3 py-2 rounded">
|
||||
{error}
|
||||
@@ -150,15 +188,22 @@ function ForumRegisterInner() {
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-2.5 rounded-lg transition-colors"
|
||||
className="w-full bg-[#3b82f6] hover:bg-[#2563eb] disabled:opacity-50 text-white font-body font-semibold text-sm px-5 py-3 rounded-lg transition-colors"
|
||||
>
|
||||
{loading ? 'Creating account…' : 'Create Account'}
|
||||
{loading ? 'Creating account…' : 'Create Free Account'}
|
||||
</button>
|
||||
<div className="text-center text-xs font-body text-[#888] pt-2">
|
||||
<p className="text-[10px] text-[#666] leading-relaxed text-center px-2">
|
||||
By creating an account you agree to our{' '}
|
||||
<Link href="/terms" className="text-[#888] hover:text-[#3b82f6] underline">terms</Link>
|
||||
{' '}and{' '}
|
||||
<Link href="/privacy" className="text-[#888] hover:text-[#3b82f6] underline">privacy policy</Link>.
|
||||
We’ll never sell your email.
|
||||
</p>
|
||||
<div className="text-center text-xs font-body text-[#888] pt-2 border-t border-[#252525]">
|
||||
Already have an account?{' '}
|
||||
<Link
|
||||
href={`/forum/login?next=${encodeURIComponent(next)}`}
|
||||
className="text-[#3b82f6] hover:underline"
|
||||
className="text-[#3b82f6] hover:underline font-semibold"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user