From 976c979e54138ccda70984422d5b06e175fe349e Mon Sep 17 00:00:00 2001
From: Ryan Salazar <ryaninwilton@gmail.com>
Date: Fri, 29 May 2026 15:39:02 +0000
Subject: [PATCH] forum register/login: rebrand as Broadcast Beat membership
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/app/forum/login/page.tsx    | 13 ++++---
 src/app/forum/register/page.tsx | 65 ++++++++++++++++++++++++++++-----
 2 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/src/app/forum/login/page.tsx b/src/app/forum/login/page.tsx
index 988fe22..f345327 100644
--- a/src/app/forum/login/page.tsx
+++ b/src/app/forum/login/page.tsx
@@ -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">
diff --git a/src/app/forum/register/page.tsx b/src/app/forum/register/page.tsx
index eff687c..210a764 100644
--- a/src/app/forum/register/page.tsx
+++ b/src/app/forum/register/page.tsx
@@ -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 &amp; 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&rsquo;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>