Skip to content

Commit d3bcde4

Browse files
YousefEDYousefED
committed
add ai page
1 parent eead5f1 commit d3bcde4

File tree

5 files changed

+205
-1
lines changed

5 files changed

+205
-1
lines changed

‎packages/editor/src/app/App.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { observer } from "mobx-react-lite";
22
import { BrowserRouter, Route, Routes } from "react-router-dom";
33
import { getStoreService } from "../store/local/stores";
4+
import { AILanding } from "./main/components/startscreen/AILanding";
45
import { StartScreen } from "./main/components/startscreen/StartScreen";
56
import Main from "./main/Main";
67
import { ValidatedServerConfig } from "./matrix-auth/auth/util/AutoDiscoveryUtils";
@@ -27,6 +28,7 @@ export const App = observer((props: { config: ValidatedServerConfig }) => {
2728
path="@:userParam/:documentParam"
2829
element={<DocumentRoute />}></Route>
2930
<Route index element={<StartScreen></StartScreen>}></Route>
31+
<Route path="/ai" element={<AILanding />} />
3032
<Route path="*" element={<DynamicRoute />} />
3133
</Route>
3234
<Route

‎packages/editor/src/app/main/Main.module.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,18 @@
3232
background: none !important;
3333
}
3434

35+
.main.ai header div {
36+
display:none;
37+
}
38+
39+
.main.ai nav div {
40+
display:none;
41+
}
42+
43+
.main.ai nav span {
44+
display:none;
45+
}
46+
3547
.main {
3648
display: flex;
3749
min-height: 100%;

‎packages/editor/src/app/main/Main.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,13 @@ const Main = observer((props: {}) => {
1919
<DndProvider backend={HTML5Backend}>
2020
<div
2121
className={
22-
styles.main + " " + (location.pathname === "/" ? styles.homepage : "")
22+
styles.main +
23+
" " +
24+
(location.pathname === "/" || location.pathname === "/ai"
25+
? styles.homepage
26+
: "") +
27+
" " +
28+
(location.pathname === "/ai" ? styles.ai : "")
2329
}>
2430
<Navigation />
2531
<Outlet />

‎packages/editor/src/app/main/components/startscreen/AILanding.tsx

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
import { observer } from "mobx-react-lite";
2+
import { useNavigate } from "react-router-dom";
3+
import { getStoreService } from "../../../../store/local/stores";
4+
import buttonStyles from "../../../../styles/buttons.module.css";
5+
import { OpenNewPageDialog, toNewGuestNotebook } from "../../../routes/routes";
6+
import globe from "./assets/globe.svg";
7+
import intro from "./assets/intro.gif";
8+
import lightning from "./assets/lightning.svg";
9+
import npm from "./assets/npm.svg";
10+
import styles from "./StartScreen.module.css";
11+
12+
export const AILanding = observer(() => {
13+
const { sessionStore } = getStoreService();
14+
const navigate = useNavigate();
15+
function onNewNotebookClick(e: any) {
16+
e.preventDefault();
17+
if (sessionStore.isLoggedIn) {
18+
OpenNewPageDialog(navigate);
19+
} else {
20+
navigate(toNewGuestNotebook());
21+
}
22+
}
23+
24+
return (
25+
<>
26+
<div className={styles.page + " centered"}>
27+
<section className={styles.introduction}>
28+
{/* <div className={styles.github}>
29+
<GitHubButton
30+
href="https://github.com/YousefED/typecell-next"
31+
data-color-scheme="no-preference: dark; light: light; dark: dark;"
32+
data-show-count="true"
33+
aria-label="Star YousefED/typecell-next on GitHub">
34+
Star
35+
</GitHubButton>
36+
</div> */}
37+
<div className="container">
38+
<div>
39+
<h1>Live pair programming. With AI.</h1>
40+
<p>
41+
Instruct GPT to write your programs. Instant feedback. One-click
42+
deploy when ready.
43+
</p>
44+
</div>
45+
<div className={styles.buttons}>
46+
<form
47+
id="sib-form"
48+
method="POST"
49+
action="https://5a8bdf3f.sibforms.com/serve/MUIEANqwOcT6fR0aEnzonLvS2Mgvhe0M9gIoSdT_biqHwGfW9f4nZ_xRAwZZDb3UR_EnuklgC3ILQjR93zMR-TDcJD67Jj-Nq_i7GhvSZKUK2lrBIPZzDTDkEQVSxlnU8tNkUeIcdRy4lDbHh6Lyd5OC17C46ei6265lqv-hqCfOgXDqgbJh1Jq5IawldXwT7_OUeX2E2K3w0HG6">
50+
<input
51+
type="email"
52+
name="EMAIL"
53+
required
54+
placeholder="Email address"></input>
55+
<button
56+
type="submit"
57+
className={`${buttonStyles.button} ${buttonStyles.primary}`}>
58+
Get early access
59+
</button>
60+
</form>
61+
</div>
62+
<div className={styles.code_block}>
63+
<img src={intro} alt="TypeCell Demo" />
64+
</div>
65+
</div>
66+
</section>
67+
68+
<section className={styles.perksSection}>
69+
<div className={styles.perks}>
70+
<div className={styles.perk}>
71+
<div className={styles.icon}>
72+
<img src={lightning} alt="Lightning icon" />
73+
</div>
74+
<h3>Reactive Runtime</h3>
75+
<span>
76+
The Reactive Runtime evaluates as-you-type, directly in your
77+
browser.
78+
</span>
79+
</div>
80+
81+
<div className={styles.perk}>
82+
<div className={styles.icon}>
83+
<img src={npm} alt="NPM logo" />
84+
</div>
85+
<h3>Full ecosystem</h3>
86+
<span>Built-in support for TypeScript, React, NPM and more.</span>
87+
</div>
88+
89+
<div className={styles.perk}>
90+
<div className={styles.icon}>
91+
<img src={globe} alt="Globe icon" />
92+
</div>
93+
<h3>Collaborate</h3>
94+
<span>Share your notebooks and collaborate in real-time.</span>
95+
</div>
96+
</div>
97+
</section>
98+
99+
<section className={styles.notebooks}>
100+
<div className="container">
101+
<div className="row">
102+
<h2>Join our community</h2>
103+
{/* <p className={styles.text}>
104+
Join our community to be part of the ride.
105+
</p> */}
106+
<div className={styles.buttons + " " + styles.social}>
107+
<a
108+
href="https://discord.gg/TcJ9TRC3SV"
109+
target="_blank"
110+
rel="noreferrer">
111+
<img
112+
alt="Discord"
113+
src="https://img.shields.io/badge/Join us on discord%20-%237289DA.svg?&style=for-the-badge&logo=discord&logoColor=white"
114+
/>
115+
</a>
116+
<a
117+
href="https://matrix.to/#/#typecell-space:matrix.org"
118+
target="_blank"
119+
rel="noreferrer">
120+
<img
121+
alt="Matrix"
122+
src="https://img.shields.io/badge/Chat on matrix%20-%23000.svg?&style=for-the-badge&logo=matrix&logoColor=white"
123+
/>
124+
</a>
125+
</div>
126+
</div>
127+
</div>
128+
</section>
129+
130+
{/* <div className={styles.section_separator}></div>
131+
<section className={styles.build}>
132+
<div className="container">
133+
<h2>Start building yourself</h2>
134+
<p>
135+
We are excited to see what you will do with TypeCell.<br></br>
136+
We'd love to get your feedback and ideas, so{" "}
137+
<a
138+
target="_blank"
139+
href="https://discord.gg/TcJ9TRC3SV"
140+
rel="noreferrer">
141+
<span>join us on Discord</span>
142+
</a>
143+
.
144+
</p>
145+
146+
<div className={styles.buttons}>
147+
<Link to={toTutorial()} className={`${buttonStyles.button}`}>
148+
Try interactive tutorial
149+
</Link>
150+
<a
151+
className={`${buttonStyles.button} ${buttonStyles.secondary}`}
152+
onClick={onNewNotebookClick}
153+
href="/">
154+
Create new notebook
155+
</a>
156+
</div>
157+
</div>
158+
</section> */}
159+
</div>
160+
{/* <footer className={styles.footer}>
161+
<div className="container">
162+
<div className={styles.bottom}>
163+
<span>{new Date().getFullYear()} TypeCell live programming</span>
164+
</div>
165+
</div>
166+
</footer> */}
167+
</>
168+
);
169+
});

‎packages/editor/src/app/main/components/startscreen/StartScreen.module.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,15 @@
186186
justify-content: center;
187187
}
188188

189+
form {
190+
margin: 0;
191+
display: contents;
192+
}
193+
194+
button {
195+
cursor: pointer;
196+
}
197+
189198
.build p {
190199
margin-bottom: 2em;
191200
}
@@ -196,6 +205,12 @@
196205
justify-content: center;
197206
}
198207

208+
.buttons input {
209+
border-radius: 10px;
210+
font-size: 20px;
211+
border: 1px solid #ccc;
212+
padding: 1em 1em;
213+
}
199214
.build .link {
200215
text-decoration: underline;
201216
font-weight: 600;

0 commit comments

Comments
 (0)