chore: prep

packages/console/app/src/routes/black/index.css

@@ -105,6 +105,32 @@
           transform: scale(0.98);
         }
       }
+      [data-slot="back-soon"] {
+        color: rgba(255, 255, 255, 0.59);
+        text-align: center;
+        font-size: 13px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 160%; /* 20.8px */
+      }
+      [data-slot="follow-us"] {
+        display: inline-flex;
+        height: 40px;
+        padding: 0 12px;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+        border-radius: 4px;
+        border: 1px solid rgba(255, 255, 255, 0.17);
+        color: rgba(255, 255, 255, 0.59);
+        font-family: "JetBrains Mono Nerd Font";
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
+        text-decoration: none;
+      }
+
       [data-slot="fine-print"] {
         color: rgba(255, 255, 255, 0.39);
         text-align: center;

packages/console/app/src/routes/black/index.tsx

@@ -2,7 +2,7 @@ import { A, createAsync } from "@solidjs/router"
 import "./index.css"
 import { Title } from "@solidjs/meta"
 import { github } from "~/lib/github"
-import { createMemo } from "solid-js"
+import { createMemo, Match, Switch } from "solid-js"
 import { config } from "~/config"
 
 export default function Black() {
@@ -15,6 +15,10 @@ export default function Black() {
         }).format(githubData()!.stars!)
       : config.github.starsFormatted.compact,
   )
+
+  // TODO: Frank, toggle this based on availability
+  const available = false
+
   return (
     <div data-page="black">
       <Title>opencode</Title>
@@ -143,10 +147,20 @@ export default function Black() {
             </p>
             <p data-slot="subheading">Including Claude, GPT, Gemini, and more</p>
           </div>
-          <a href="/black/subscribe" data-slot="button">
+          <Switch>
-            Subscribe $200/mo
+            <Match when={available}>
-          </a>
+              <a href="/black/subscribe" data-slot="button">
-          <p data-slot="fine-print">Fair usage limits apply</p>
+                Subscribe $200/mo
+              </a>
+              <p data-slot="fine-print">Fair usage limits apply</p>
+            </Match>
+            <Match when={!available}>
+              <p data-slot="back-soon">We’ll be back soon with more availability.</p>
+              <a data-slot="follow-us" href="https://x.com/opencode" target="_blank">
+                Follow @opencode
+              </a>
+            </Match>
+          </Switch>
         </section>
       </main>
       <footer data-component="footer">