diff --git a/packages/console/app/src/routes/black.tsx b/packages/console/app/src/routes/black.tsx index 5a5b139dd5..a51761c99e 100644 --- a/packages/console/app/src/routes/black.tsx +++ b/packages/console/app/src/routes/black.tsx @@ -21,6 +21,7 @@ export default function BlackLayout(props: RouteSectionProps) {
+ opencode Including Claude, GPT, Gemini and more

- - - - - + - - - + + - - + + diff --git a/packages/console/app/src/routes/black/index.tsx b/packages/console/app/src/routes/black/index.tsx index 2b452c8129..320db6e516 100644 --- a/packages/console/app/src/routes/black/index.tsx +++ b/packages/console/app/src/routes/black/index.tsx @@ -1,79 +1,148 @@ import { A, useSearchParams } from "@solidjs/router" import { Title } from "@solidjs/meta" -import { createMemo, createSignal, For, Match, Show, Switch } from "solid-js" +import { createMemo, createSignal, For, onMount, Show } from "solid-js" import { PlanIcon, plans } from "./common" 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 [mounted, setMounted] = createSignal(false) + + onMount(() => { + requestAnimationFrame(() => setMounted(true)) + }) + + const transition = (action: () => void) => { + if (mounted() && "startViewTransition" in document) { + ;(document as any).startViewTransition(action) + return + } + + action() + } + + const select = (planId: string) => { + if (selected() === planId) { + return + } + + transition(() => setSelected(planId)) + } + + const cancel = () => { + transition(() => setSelected(null)) + } return ( <> opencode
- - -
- - {(plan) => ( - - )} - -
-

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

- - - {(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 -

-
- )} - - + + +
+
    +
  • 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 +

) diff --git a/packages/console/app/src/routes/black/subcribe.css b/packages/console/app/src/routes/black/subcribe.css new file mode 100644 index 0000000000..e69de29bb2