git.iko.soy/urbit.org
on master help sign in
pages/trial, index: apply @gordoncc review (#1794)
46fd14cMatilde Park
pages/index.js+2−1
compare with master
unifiedsplit
@@ -45,8 +45,9 @@ export default function Home({
45 // Hero Statement
45 // Hero Statement
46 }
46 }
47 <Section className="pb-36">
47 <Section className="pb-36">
48− <div>
48+ <div className="space-y-8">
49 <h1>A clean-slate OS and network for the 21st&nbsp;century.</h1>
49 <h1>A clean-slate OS and network for the 21st&nbsp;century.</h1>
50+ <Link href="/trial" passHref><a className="bg-green-400 text-white button-lg max-w-fit">Explore the Network</a></Link>
50 </div>
51 </div>
51 </Section>
52 </Section>
52 {
53 {
pages/trial-over.js+8−8
@@ -1,4 +1,5 @@
1import Head from "next/head";
1import Head from "next/head";
2+import Link from "next/link";
2import Meta from "../components/Meta";
3import Meta from "../components/Meta";
3import {
4import {
4 Container,
5 Container,
@@ -22,14 +23,13 @@ export default function TrialOver(props) {
22 {Meta(post)}
23 {Meta(post)}
23 </Head>
24 </Head>
24 <IntraNav ourSite="https://urbit.org" search={props.search} />
25 <IntraNav ourSite="https://urbit.org" search={props.search} />
25− <SingleColumn>
26+ <div className="h-full w-full grow flex items-center justify-center flex-col px-8 md:px-0">
26− <Header />
27+ <div className="w-fit">
27− <Section className="pt-8">
28+ <h2>Your one week comet trial has concluded.</h2>
28− <h1>Trial Over</h1>
29+ <p className="my-12 max-w-prose">To keep using Urbit, we recommend getting a planet and setting up Urbit yourself or using a hosting provider.
29− <p className="mt-12">Your trial has ended.</p>
30+ <Link href="/getting-started"><a className="button-lg bg-green-400 text-white max-w-fit my-12">Get Started</a></Link></p>
30− </Section>
31+ </div>
31− </SingleColumn>
32+ </div>
32− <Footer />
33 </Container>
33 </Container>
34 );
34 );
35}
35}
pages/trial.js+54−37
@@ -1,5 +1,6 @@
1import { useState, useEffect } from 'react';
1import { useState, useEffect } from 'react';
2import Head from "next/head";
2import Head from "next/head";
3+import Link from 'next/link';
3import Meta from "../components/Meta";
4import Meta from "../components/Meta";
4import {
5import {
5 Container,
6 Container,
@@ -9,8 +10,9 @@ import {
9} from "@urbit/foundation-design-system";
10} from "@urbit/foundation-design-system";
10import Header from "../components/Header";
11import Header from "../components/Header";
11import Footer from "../components/Footer";
12import Footer from "../components/Footer";
13+import cn from 'classnames';
12
14
13−const postReq = (path, params, method='post') => {
15+const postReq = (path, params, method = 'post') => {
14 const form = document.createElement('form');
16 const form = document.createElement('form');
15 form.method = method;
17 form.method = method;
16 form.action = path;
18 form.action = path;
@@ -34,7 +36,8 @@ const postReq = (path, params, method='post') => {
34
36
35export default function Trial(props) {
37export default function Trial(props) {
36 const post = {
38 const post = {
37− title: "Trial",
39+ title: "Explore the Network",
40+ description: "Get one week of a complimentary hosted comet: a temporary Urbit ID."
38 };
41 };
39
42
40 const [count, setCount] = useState(0)
43 const [count, setCount] = useState(0)
@@ -42,7 +45,7 @@ export default function Trial(props) {
42 useEffect(() => {
45 useEffect(() => {
43 fetch('https://api.shore.arvo.network/count', {
46 fetch('https://api.shore.arvo.network/count', {
44 method: 'GET',
47 method: 'GET',
45− headers: {'Content-Type': 'application/json'}
48+ headers: { 'Content-Type': 'application/json' }
46 })
49 })
47 .then(res => res.json())
50 .then(res => res.json())
48 .then(data => {
51 .then(data => {
@@ -52,50 +55,64 @@ export default function Trial(props) {
52
55
53 const available = count > 0;
56 const available = count > 0;
54
57
55− const buttonBg = available ? '' : 'pink';
56−
57 return (
58 return (
58 <Container>
59 <Container>
59 <Head>
60 <Head>
60− <title>Trial • urbit.org</title>
61+ <title>{post.title} • urbit.org</title>
61 {Meta(post)}
62 {Meta(post)}
62 </Head>
63 </Head>
63 <IntraNav ourSite="https://urbit.org" search={props.search} />
64 <IntraNav ourSite="https://urbit.org" search={props.search} />
64 <SingleColumn>
65 <SingleColumn>
65 <Header />
66 <Header />
66− <Section className="pt-8">
67+ <Section className="space-y-12">
67− <h1>Trial</h1>
68+ <h1>{post.title}</h1>
68− <p className="mt-12">There are currently {count} trial comets left.</p>
69+ {/* Flex between image and blurb, collapse to col on mobile */}
69− </Section>
70+ <div className="flex flex-col items-center space-y-4 md:space-y-0 md:flex-row md:space-x-4">
71+ <img className="max-w-lg h-auto w-full" src="https://media.urbit.org/site/getting-started/explore.png" />
72+ {/* Blurb is flexed to space button and copy */}
73+ <div className="flex-col flex space-y-4">
74+ <p>No downloads, no signup.</p>
75+ <p>Get <span className="font-bold">one week</span> of a complimentary hosted comet: a temporary Urbit ID.</p>
76+ {/* Button is flexed to space potential "try again later" copy */}
70− <div className="layout px-4 md:px-8">
77+ <div className="space-x-4 flex items-center">
71− <a className="p-8 button-lg bg-green-400 text-white"
78+ <a className={cn("p-8 button-lg text-white max-w-fit", {
72− style={{"backgroundColor": buttonBg}}
79+ "bg-green-400": available,
80+ "bg-wall-300 cursor-not-allowed": !available,
81+ })}
73− onClick={(e) => {
82+ onClick={(e) => {
74− e.stopPropagation();
83+ e.stopPropagation();
75
84
76− if (!available) {
85+ if (!available) {
77− return
86+ return
78− }
87+ }
79
88
80− fetch('https://api.shore.arvo.network/enter', {
89+ fetch('https://api.shore.arvo.network/enter', {
81− method: 'GET',
90+ method: 'GET',
82− headers: {'Content-Type': 'application/json'}
91+ headers: { 'Content-Type': 'application/json' }
83− })
92+ })
84− .then(res =>{
93+ .then(res => {
85− if (!res.ok) {
94+ if (!res.ok) {
86− throw 'Error response from shore api.';
95+ throw 'Error response from shore api.';
87− }
96+ }
88− return res.json();
97+ return res.json();
89− })
98+ })
90− .then(data => {
99+ .then(data => {
91− postReq(data.url + '/~/login', {password: data.code, redirect: '/'});
100+ postReq(data.url + '/~/login', { password: data.code, redirect: '/' });
92− })
101+ })
93− .catch(e => setCount(0));
102+ .catch(e => setCount(0));
94− }}
103+ }}
95− >
104+ >
96− {available ? 'Try now' : 'No trial comets available, try again later'}
105+ {available ? 'Launch Comet' : 'No Comets Available'}
97− </a>
106+ </a>
98− </div>
107+ {!available && <p>Try back later!</p>}
108+ </div>
109+ </div>
110+ </div>
111+ <div className="max-w-prose flex flex-col space-y-4">
112+ <p>Comets are great for checking things out, but some groups may require a planet – a permanent Urbit ID.</p>
113+ <p>Learn more about <Link href="/getting-started/get-planet"><a>getting a planet</a></Link>.</p>
114+ </div>
115+ </Section>
99 </SingleColumn>
116 </SingleColumn>
100 <Footer />
117 <Footer />
101 </Container>
118 </Container>