@@ -1,5 +1,6 @@
11import { useState, useEffect } from 'react';
22import Head from "next/head";
3+import Link from 'next/link';
34import Meta from "../components/Meta";
45import {
56 Container,
@@ -9,8 +10,9 @@ import {
910} from "@urbit/foundation-design-system";
1011import Header from "../components/Header";
1112import Footer from "../components/Footer";
13+import cn from 'classnames';
1214
13−const postReq = (path, params, method='post') => {
15+const postReq = (path, params, method = 'post') => {
1416 const form = document.createElement('form');
1517 form.method = method;
1618 form.action = path;
@@ -34,7 +36,8 @@ const postReq = (path, params, method='post') => {
3436
3537export default function Trial(props) {
3638 const post = {
37− title: "Trial",
39+ title: "Explore the Network",
40+ description: "Get one week of a complimentary hosted comet: a temporary Urbit ID."
3841 };
3942
4043 const [count, setCount] = useState(0)
@@ -42,7 +45,7 @@ export default function Trial(props) {
4245 useEffect(() => {
4346 fetch('https://api.shore.arvo.network/count', {
4447 method: 'GET',
45− headers: {'Content-Type': 'application/json'}
48+ headers: { 'Content-Type': 'application/json' }
4649 })
4750 .then(res => res.json())
4851 .then(data => {
@@ -52,50 +55,64 @@ export default function Trial(props) {
5255
5356 const available = count > 0;
5457
55− const buttonBg = available ? '' : 'pink';
56−
5758 return (
5859 <Container>
5960 <Head>
60− <title>Trial • urbit.org</title>
61+ <title>{post.title} • urbit.org</title>
6162 {Meta(post)}
6263 </Head>
6364 <IntraNav ourSite="https://urbit.org" search={props.search} />
6465 <SingleColumn>
6566 <Header />
66− <Section className="pt-8">
67− <h1>Trial</h1>
68− <p className="mt-12">There are currently {count} trial comets left.</p>
69− </Section>
70− <div className="layout px-4 md:px-8">
71− <a className="p-8 button-lg bg-green-400 text-white"
72− style={{"backgroundColor": buttonBg}}
73− onClick={(e) => {
74− e.stopPropagation();
67+ <Section className="space-y-12">
68+ <h1>{post.title}</h1>
69+ {/* Flex between image and blurb, collapse to col on mobile */}
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 */}
77+ <div className="space-x-4 flex items-center">
78+ <a className={cn("p-8 button-lg text-white max-w-fit", {
79+ "bg-green-400": available,
80+ "bg-wall-300 cursor-not-allowed": !available,
81+ })}
82+ onClick={(e) => {
83+ e.stopPropagation();
7584
76− if (!available) {
77− return
78− }
85+ if (!available) {
86+ return
87+ }
7988
80− fetch('https://api.shore.arvo.network/enter', {
81− method: 'GET',
82− headers: {'Content-Type': 'application/json'}
83− })
84− .then(res =>{
85− if (!res.ok) {
86− throw 'Error response from shore api.';
87− }
88− return res.json();
89− })
90− .then(data => {
91− postReq(data.url + '/~/login', {password: data.code, redirect: '/'});
92− })
93− .catch(e => setCount(0));
94− }}
95− >
96− {available ? 'Try now' : 'No trial comets available, try again later'}
97− </a>
98− </div>
89+ fetch('https://api.shore.arvo.network/enter', {
90+ method: 'GET',
91+ headers: { 'Content-Type': 'application/json' }
92+ })
93+ .then(res => {
94+ if (!res.ok) {
95+ throw 'Error response from shore api.';
96+ }
97+ return res.json();
98+ })
99+ .then(data => {
100+ postReq(data.url + '/~/login', { password: data.code, redirect: '/' });
101+ })
102+ .catch(e => setCount(0));
103+ }}
104+ >
105+ {available ? 'Launch Comet' : 'No Comets Available'}
106+ </a>
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>
99116 </SingleColumn>
100117 <Footer />
101118 </Container>