diff --git a/packages/console/app/src/routes/black/index.css b/packages/console/app/src/routes/black/index.css index eb0ec87d3..418598792 100644 --- a/packages/console/app/src/routes/black/index.css +++ b/packages/console/app/src/routes/black/index.css @@ -131,6 +131,188 @@ text-decoration: none; } + [data-slot="pricing"] { + display: flex; + flex-direction: column; + gap: 16px; + width: 100%; + max-width: 540px; + padding: 0 20px; + + @media (min-width: 768px) { + padding: 0; + } + } + + [data-slot="pricing-card"] { + display: flex; + flex-direction: column; + gap: 12px; + padding: 20px; + border: 1px solid rgba(255, 255, 255, 0.17); + border-radius: 4px; + text-decoration: none; + transition: border-color 0.15s ease; + background: transparent; + cursor: pointer; + text-align: left; + + &:hover { + border-color: rgba(255, 255, 255, 0.35); + } + + [data-slot="icon"] { + color: rgba(255, 255, 255, 0.59); + } + + [data-slot="price"] { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 8px; + } + + [data-slot="amount"] { + color: rgba(255, 255, 255, 0.92); + font-size: 24px; + font-weight: 500; + } + + [data-slot="period"] { + color: rgba(255, 255, 255, 0.59); + font-size: 14px; + } + + [data-slot="multiplier"] { + color: rgba(255, 255, 255, 0.39); + font-size: 14px; + + &::before { + content: "·"; + margin-right: 8px; + } + } + } + + [data-slot="selected-plan"] { + display: flex; + flex-direction: column; + gap: 32px; + width: fit-content; + max-width: calc(100% - 40px); + margin: 0 auto; + } + + [data-slot="selected-card"] { + display: flex; + flex-direction: column; + gap: 16px; + padding: 20px; + border: 1px solid rgba(255, 255, 255, 0.17); + border-radius: 4px; + width: fit-content; + + [data-slot="icon"] { + color: rgba(255, 255, 255, 0.59); + } + + [data-slot="price"] { + display: flex; + flex-wrap: wrap; + align-items: baseline; + gap: 8px; + } + + [data-slot="amount"] { + color: rgba(255, 255, 255, 0.92); + font-size: 24px; + font-weight: 500; + } + + [data-slot="period"] { + color: rgba(255, 255, 255, 0.59); + font-size: 14px; + } + + [data-slot="multiplier"] { + color: rgba(255, 255, 255, 0.39); + font-size: 14px; + + &::before { + content: "·"; + margin-right: 8px; + } + } + + [data-slot="terms"] { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 12px; + text-align: left; + + li { + color: rgba(255, 255, 255, 0.59); + font-size: 13px; + line-height: 1.5; + padding-left: 16px; + position: relative; + white-space: nowrap; + + &::before { + content: "▪"; + position: absolute; + left: 0; + color: rgba(255, 255, 255, 0.39); + } + } + } + + [data-slot="actions"] { + display: flex; + gap: 16px; + margin-top: 8px; + + button, + a { + flex: 1; + display: inline-flex; + height: 48px; + padding: 0 16px; + justify-content: center; + align-items: center; + border-radius: 4px; + font-family: var(--font-mono); + font-size: 16px; + font-weight: 400; + text-decoration: none; + cursor: pointer; + } + + [data-slot="cancel"] { + background: transparent; + border: 1px solid rgba(255, 255, 255, 0.17); + color: rgba(255, 255, 255, 0.92); + + &:hover { + border-color: rgba(255, 255, 255, 0.35); + } + } + + [data-slot="continue"] { + background: rgba(255, 255, 255, 0.17); + border: 1px solid rgba(255, 255, 255, 0.17); + color: rgba(255, 255, 255, 0.59); + + &:hover { + background: rgba(255, 255, 255, 0.25); + } + } + } + } + [data-slot="fine-print"] { color: rgba(255, 255, 255, 0.39); text-align: center; @@ -138,6 +320,12 @@ font-style: normal; font-weight: 400; line-height: 160%; /* 20.8px */ + font-style: italic; + + a { + color: rgba(255, 255, 255, 0.39); + text-decoration: underline; + } } } } diff --git a/packages/console/app/src/routes/black/index.tsx b/packages/console/app/src/routes/black/index.tsx index c83ccd251..f5a375adf 100644 --- a/packages/console/app/src/routes/black/index.tsx +++ b/packages/console/app/src/routes/black/index.tsx @@ -1,11 +1,54 @@ -import { A, createAsync } from "@solidjs/router" +import { A, createAsync, useSearchParams } from "@solidjs/router" import "./index.css" import { Title } from "@solidjs/meta" import { github } from "~/lib/github" -import { createMemo, Match, Switch } from "solid-js" +import { createMemo, createSignal, For, Match, Show, Switch } from "solid-js" import { config } from "~/config" +const plans = [ + { id: "20", amount: 20, multiplier: null }, + { id: "100", amount: 100, multiplier: "6x more usage than Black 20" }, + { id: "200", amount: 200, multiplier: "21x more usage than Black 20" }, +] as const + +function PlanIcon(props: { plan: string }) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ) +} + export default function Black() { + const [params] = useSearchParams() + const [selected, setSelected] = createSignal(params.plan as string | null) + const selectedPlan = createMemo(() => plans.find((p) => p.id === selected())) + const githubData = createAsync(() => github()) const starCount = createMemo(() => githubData()?.stars @@ -16,9 +59,6 @@ export default function Black() { : config.github.starsFormatted.compact, ) - // TODO: Frank, toggle this based on availability - const available = false - return (
opencode @@ -148,17 +188,65 @@ export default function Black() {

Including Claude, GPT, Gemini, and more

- - - Subscribe $200/mo - -

Fair usage limits apply

+ +
+ + {(plan) => ( + + )} + +
+

+ Prices shown don't include applicable tax · Terms of Service +

- -

We’ll be back soon with more availability.

- - Follow @opencode - + + {(plan) => ( +
+
+
+ +
+

+ ${plan().amount}{" "} + per person billed monthly + + {plan().multiplier} + +

+
    +
  • Your subscription will not start immediately
    • +
  • You will be added to the waitlist and activated soon
    • +
  • Your card will be only charged when your subscription is activated
    • +
  • Usage limits apply, heavily automated use may reach limits sooner
    • +
  • Subscriptions for individuals, contact Enterprise for teams
    • +
  • Limits may be adjusted and plans may be discontinued in the future
    • +
  • Cancel your subscription at anytime
    • +
+
+ + + Continue + +
+
+

+ Prices shown don't include applicable tax · Terms of Service +

+
+ )}