mirror of
https://github.com/aljazceru/opencode.git
synced 2026-01-01 15:14:20 +01:00
Zen lander (#2907)
Co-authored-by: David Hill <iamdavidhill@gmail.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com> Co-authored-by: Jay V <air@live.ca>
This commit is contained in:
Dax
49
packages/console/app/src/component/email-signup.tsx
Normal file
49
packages/console/app/src/component/email-signup.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { action, useSubmission } from "@solidjs/router"
|
||||
import dock from "../asset/lander/dock.png"
|
||||
import { Resource } from "sst"
|
||||
import { Show } from "solid-js"
|
||||
|
||||
const emailSignup = action(async (formData: FormData) => {
|
||||
"use server"
|
||||
const emailAddress = formData.get("email")!
|
||||
const listId = "8b9bb82c-9d5f-11f0-975f-0df6fd1e4945"
|
||||
const response = await fetch(`https://api.emailoctopus.com/lists/${listId}/contacts`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
Authorization: `Bearer ${Resource.EMAILOCTOPUS_API_KEY.value}`,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
email_address: emailAddress,
|
||||
}),
|
||||
})
|
||||
console.log(response)
|
||||
return true
|
||||
})
|
||||
|
||||
export function EmailSignup() {
|
||||
const submission = useSubmission(emailSignup)
|
||||
return (
|
||||
<section data-component="email">
|
||||
<div data-slot="dock">
|
||||
<img src={dock} alt="" />
|
||||
</div>
|
||||
<div data-slot="section-title">
|
||||
<h3>OpenCode will be available on desktop soon</h3>
|
||||
<p>Join the waitlist for early access.</p>
|
||||
</div>
|
||||
<form data-slot="form" action={emailSignup} method="post">
|
||||
<input type="email" name="email" placeholder="Email address" required />
|
||||
<button type="submit" disabled={submission.pending}>
|
||||
Subscribe
|
||||
</button>
|
||||
</form>
|
||||
<Show when={submission.result}>
|
||||
<div style="color: #03B000; margin-top: 24px;">Almost done, check your inbox and confirm your email address</div>
|
||||
</Show>
|
||||
<Show when={submission.error}>
|
||||
<div style="color: #FF408F; margin-top: 24px;">{submission.error}</div>
|
||||
</Show>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
33
packages/console/app/src/component/faq.tsx
Normal file
33
packages/console/app/src/component/faq.tsx
Normal file
@@ -0,0 +1,33 @@
|
||||
import { Collapsible } from "@kobalte/core/collapsible"
|
||||
import { ParentProps } from "solid-js"
|
||||
|
||||
export function Faq(props: ParentProps & { question: string }) {
|
||||
return (
|
||||
<Collapsible data-slot="faq-item">
|
||||
<Collapsible.Trigger data-slot="faq-question">
|
||||
<svg
|
||||
data-slot="faq-icon-plus"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M12.5 11.5H19V12.5H12.5V19H11.5V12.5H5V11.5H11.5V5H12.5V11.5Z" fill="#6D717D" />
|
||||
</svg>
|
||||
<svg
|
||||
data-slot="faq-icon-minus"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M5 11.5H19V12.5H5Z" fill="#6D717D" />
|
||||
</svg>
|
||||
<div data-slot="faq-question-text">{props.question}</div>
|
||||
</Collapsible.Trigger>
|
||||
<Collapsible.Content data-slot="faq-answer">{props.children}</Collapsible.Content>
|
||||
</Collapsible>
|
||||
)
|
||||
}
|
||||
34
packages/console/app/src/component/footer.tsx
Normal file
34
packages/console/app/src/component/footer.tsx
Normal file
@@ -0,0 +1,34 @@
|
||||
import { A, createAsync } from "@solidjs/router"
|
||||
import { createMemo } from "solid-js"
|
||||
import { github } from "~/lib/github"
|
||||
|
||||
export function Footer() {
|
||||
const githubData = createAsync(() => github())
|
||||
const starCount = createMemo(() =>
|
||||
githubData()?.stars
|
||||
? new Intl.NumberFormat("en-US", {
|
||||
notation: "compact",
|
||||
compactDisplay: "short",
|
||||
}).format(githubData()!.stars!)
|
||||
: "25K",
|
||||
)
|
||||
|
||||
return (
|
||||
<footer data-component="footer">
|
||||
<div data-slot="cell">
|
||||
<A href="https://github.com/sst/opencode" target="_blank">
|
||||
GitHub <span>[{starCount()}]</span>
|
||||
</A>
|
||||
</div>
|
||||
<div data-slot="cell">
|
||||
<A href="/docs">Docs</A>
|
||||
</div>
|
||||
<div data-slot="cell">
|
||||
<A href="https://opencode.ai/discord">Discord</A>
|
||||
</div>
|
||||
<div data-slot="cell">
|
||||
<A href="https://x/opencode">X</A>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
127
packages/console/app/src/component/header.tsx
Normal file
127
packages/console/app/src/component/header.tsx
Normal file
@@ -0,0 +1,127 @@
|
||||
import logoLight from "../asset/logo-ornate-light.svg"
|
||||
import logoDark from "../asset/logo-ornate-dark.svg"
|
||||
import { A, createAsync } from "@solidjs/router"
|
||||
import { createMemo, Match, Show, Switch } from "solid-js"
|
||||
import { createStore } from "solid-js/store"
|
||||
import { github } from "~/lib/github"
|
||||
|
||||
export function Header(props: { zen?: boolean }) {
|
||||
const githubData = createAsync(() => github())
|
||||
const starCount = createMemo(() =>
|
||||
githubData()?.stars
|
||||
? new Intl.NumberFormat("en-US", {
|
||||
notation: "compact",
|
||||
compactDisplay: "short",
|
||||
}).format(githubData()?.stars!)
|
||||
: "25K",
|
||||
)
|
||||
|
||||
const [store, setStore] = createStore({
|
||||
mobileMenuOpen: false,
|
||||
})
|
||||
|
||||
return (
|
||||
<section data-component="top">
|
||||
<A href="/">
|
||||
<img data-slot="logo light" src={logoLight} alt="opencode logo light" />
|
||||
<img data-slot="logo dark" src={logoDark} alt="opencode logo dark" />
|
||||
</A>
|
||||
<nav data-component="nav-desktop">
|
||||
<ul>
|
||||
<li>
|
||||
<A href="https://github.com/sst/opencode" target="_blank">
|
||||
GitHub <span>[{starCount()}]</span>
|
||||
</A>
|
||||
</li>
|
||||
<li>
|
||||
<A href="/docs">Docs</A>
|
||||
</li>
|
||||
<li>
|
||||
<Switch>
|
||||
<Match when={props.zen}>
|
||||
<A href="/auth">Login</A>
|
||||
</Match>
|
||||
<Match when={!props.zen}>
|
||||
<A href="/zen">Zen</A>
|
||||
</Match>
|
||||
</Switch>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<nav data-component="nav-mobile">
|
||||
<button
|
||||
type="button"
|
||||
data-component="nav-mobile-toggle"
|
||||
aria-expanded="false"
|
||||
aria-controls="nav-mobile-menu"
|
||||
class="nav-toggle"
|
||||
onClick={() => setStore("mobileMenuOpen", !store.mobileMenuOpen)}
|
||||
>
|
||||
<span class="sr-only">Open menu</span>
|
||||
<Switch>
|
||||
<Match when={store.mobileMenuOpen}>
|
||||
<svg
|
||||
class="icon icon-close"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.7071 11.9993L18.0104 17.3026L17.3033 18.0097L12 12.7064L6.6967 18.0097L5.98959 17.3026L11.2929 11.9993L5.98959 6.69595L6.6967 5.98885L12 11.2921L17.3033 5.98885L18.0104 6.69595L12.7071 11.9993Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</Match>
|
||||
<Match when={!store.mobileMenuOpen}>
|
||||
<svg
|
||||
class="icon icon-hamburger"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path d="M19 17H5V16H19V17Z" fill="currentColor" />
|
||||
<path d="M19 8H5V7H19V8Z" fill="currentColor" />
|
||||
</svg>
|
||||
</Match>
|
||||
</Switch>
|
||||
</button>
|
||||
|
||||
<Show when={store.mobileMenuOpen}>
|
||||
<div id="nav-mobile-menu" data-component="nav-mobile">
|
||||
<nav data-component="nav-mobile-menu-list">
|
||||
<ul>
|
||||
<li>
|
||||
<A href="/">Home</A>
|
||||
</li>
|
||||
<li>
|
||||
<A href="https://github.com/sst/opencode" target="_blank">
|
||||
GitHub <span>[{starCount()}]</span>
|
||||
</A>
|
||||
</li>
|
||||
<li>
|
||||
<A href="/docs">Docs</A>
|
||||
</li>
|
||||
<li>
|
||||
<Switch>
|
||||
<Match when={props.zen}>
|
||||
<A href="/auth">Login</A>
|
||||
</Match>
|
||||
<Match when={!props.zen}>
|
||||
<A href="/zen">Zen</A>
|
||||
</Match>
|
||||
</Switch>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</Show>
|
||||
</nav>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
@@ -34,38 +34,21 @@ export function IconLogo(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
|
||||
|
||||
export function IconCopy(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
|
||||
return (
|
||||
<svg {...props} viewBox="0 0 512 512">
|
||||
<rect
|
||||
width="336"
|
||||
height="336"
|
||||
x="128"
|
||||
y="128"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="32"
|
||||
rx="57"
|
||||
ry="57"
|
||||
></rect>
|
||||
<svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="32"
|
||||
d="m383.5 128l.5-24a56.16 56.16 0 0 0-56-56H112a64.19 64.19 0 0 0-64 64v216a56.16 56.16 0 0 0 56 56h24"
|
||||
></path>
|
||||
d="M8.75 8.75V2.75H21.25V15.25H15.25M15.25 8.75H2.75V21.25H15.25V8.75Z"
|
||||
stroke="#8E8B8B"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="square"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export function IconCheck(props: JSX.SvgSVGAttributes<SVGSVGElement>) {
|
||||
return (
|
||||
<svg {...props} viewBox="0 0 24 24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M9 16.17L5.53 12.7a.996.996 0 1 0-1.41 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71a.996.996 0 1 0-1.41-1.41z"
|
||||
></path>
|
||||
<svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.75 15.0938L9 20.25L21.25 3.75" stroke="#03B000" stroke-width="2" stroke-linecap="square" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
9
packages/console/app/src/component/legal.tsx
Normal file
9
packages/console/app/src/component/legal.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
export function Legal() {
|
||||
return (
|
||||
<div data-component="legal">
|
||||
<span>
|
||||
©{new Date().getFullYear()} <a href="https://anoma.ly">Anomaly</a>
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user