@@ -2,6 +2,7 @@ import Head from 'next/head'
22import Link from 'next/link'
33import { useState } from 'react';
44import Container from '../components/Container'
5+import SingleColumn from '../components/SingleColumn'
56import Header from '../components/Header'
67import Footer from '../components/Footer'
78import { getAllPosts } from '../lib/lib'
@@ -27,134 +28,136 @@ export default function Home({ posts, events }) {
2728
2829 return (
2930 <Container>
30− <Header />
31−
32− <section className="layout-narrow pt-48">
33− <h1>A general-purpose, peer-to-peer, personal computing system.</h1>
34− </section>
35−
36− <section className="layout-wide pt-48">
37− <div className="bg-yellow w-11/12 hero-card-height rounded-3xl flex">
38− <div className="pt-20 pl-12 w-7/12">
39− <div className="pb-7">
40− <h2 className="text-gray p-0 m-0">Introducing</h2><h2 className="p-0 m-0">Port</h2>
31+ <SingleColumn>
32+ <Header />
33+
34+ <section className="layout-narrow pt-48">
35+ <h1>A general-purpose, peer-to-peer, personal computing system.</h1>
36+ </section>
37+
38+ <section className="layout-wide pt-48">
39+ <div className="bg-yellow w-11/12 hero-card-height rounded-3xl flex">
40+ <div className="pt-20 pl-12 w-7/12">
41+ <div className="pb-7">
42+ <h2 className="text-gray p-0 m-0">Introducing</h2><h2 className="p-0 m-0">Port</h2>
43+ </div>
44+ <h3 className="pb-5">The Urbit client, now in beta.</h3>
45+ <p className="pb-5">Port lets you... Sed iste iusto deserunt id dolores dignissimos est expedita. Earum ut et nemo et voluptatem sunt ea. Delectus sed unde fugit reiciendis. Voluptatum animi laborum fugit dolores. Dolore qui asperiores eum iusto debitis sit. Et vel dolores voluptas.</p>
46+ <button className="button-lg type-ui mb-5">Download For Mac</button>
47+ <a className="">View on GitHub</a>
4148 </div>
42− <h3 className="pb-5">The Urbit client, now in beta.</h3>
43− <p className="pb-5">Port lets you... Sed iste iusto deserunt id dolores dignissimos est expedita. Earum ut et nemo et voluptatem sunt ea. Delectus sed unde fugit reiciendis. Voluptatum animi laborum fugit dolores. Dolore qui asperiores eum iusto debitis sit. Et vel dolores voluptas.</p>
44− <button className="button-lg type-ui mb-5">Download For Mac</button>
45− <a className="">View on GitHub</a>
46− </div>
47− <div className="bg-black w-full rounded-xl hero-image-height hero-image mt-8" />
48− </div>
49− </section>
50−
51− <section className="layout-narrow pt-48">
52− <div className='measure'>
53− <h2 className="pb-12">Develop on Urbit</h2>
54− <h3 className="pb-12">
55− Urbit is a personal OS designed from scratch to run peer-to-peer applications.
56− </h3>
57− <p className="pb-12">
58− The entire OS is a <a>single pure function</a> that provides application developers with strong guarantees: automated persistence and memory management, repeatable builds, and support for hot code reloading.
59− </p>
60− <button className="button-lg type-ui">Contribute</button>
61− </div>
62− </section>
63−
64− <section className="layout-narrow pt-48">
65− <div className='flex items-center measure pb-12'>
66− <h2 className="m-0 p-0 mr-4">Urbit Grants</h2>
67− <button className="flex bg-green type-ui px-4 items-center justify-center h-12 rounded-full">32 Open</button>
68− </div>
69− <h3 className="pb-12 measure">
70− Contribute to Urbit and get rewarded with address space.
71− </h3>
72− <div className="flex w-full items-center bg-lightGreen px-8 py-10 rounded-xl">
73− <div className="flex items-center flex-col p-4 w-full">
74− <h2>200+</h2>
75− <h3 className="text-gray text-center pt-4">Urbit stars awarded</h3>
49+ <div className="bg-black w-full rounded-xl hero-image-height hero-image mt-8" />
7650 </div>
77− <div className="h-32 w-4 bg-green" />
78− <div className="flex items-center flex-col p-4 w-full">
79− <h2>1M+</h2>
80− <h3 className="text-gray text-center pt-4">USD Rewarded</h3>
81− </div>
82− <div className="h-32 w-4 bg-green" />
83− <div className="flex items-center flex-col p-4 w-full">
84− <h2>90+</h2>
85− <h3 className="text-gray text-center pt-4">Grants completed</h3>
51+ </section>
52+
53+ <section className="layout-narrow pt-48">
54+ <div className='measure'>
55+ <h2 className="pb-12">Develop on Urbit</h2>
56+ <h3 className="pb-12">
57+ Urbit is a personal OS designed from scratch to run peer-to-peer applications.
58+ </h3>
59+ <p className="pb-12">
60+ The entire OS is a <a>single pure function</a> that provides application developers with strong guarantees: automated persistence and memory management, repeatable builds, and support for hot code reloading.
61+ </p>
62+ <button className="button-lg type-ui">Contribute</button>
8663 </div>
87− </div>
88− <div className='measure py-12'>
89− <p className="pb-12">We regularly give away address space to reward community contributions, including education, promotion, and development.</p>
90− <button className="button-lg">View Grants</button>
91− </div>
92− </section>
93−
94− <section className="layout-narrow pt-48">
95− <div className='flex items-center measure pb-12'>
96− <button
97− onClick={() => setTab(0)}
98− className={`tab-button-lg mr-6 ${tab === 0 ? 'text-black' : 'text-gray'}`}>
99− Blog
100− </button>
101− <button
102− onClick={() => setTab(1)}
103− className={`tab-button-lg ${tab === 1 ? 'text-black' : 'text-gray'}`}>
104− Events
105− </button>
106− </div>
64+ </section>
10765
108− <TabCarousel index={tab}>
109− <div className="blog-grid">
110− {
111− posts.slice(0, 4).map((post, i) => {
112− return (
113− <div className={`border-black cursor-pointer blog-grid-${i}`} key={post.slug}>
114− <Link href={'/blog/' + post.slug} key={`post-${post.slug}`}>
115− <div>
116− <BackgroundImage src={post.extra.image || ''} />
117− <p className='text-black mt-2'>{post.title}</p>
118− <caption className='text-black mt-2'>{post.extra.author}</caption>
119− <caption className='text-gray'>{post.date}</caption>
120− </div>
121− </Link>
122− </div>
123− )
124− })
125− }
126− <div>
127− <Link href="/blog"><button className="button-lg type-ui">Read More</button></Link>
66+ <section className="layout-narrow pt-48">
67+ <div className='flex items-center measure pb-12'>
68+ <h2 className="m-0 p-0 mr-4">Urbit Grants</h2>
69+ <button className="flex bg-green type-ui px-4 items-center justify-center h-12 rounded-full">32 Open</button>
70+ </div>
71+ <h3 className="pb-12 measure">
72+ Contribute to Urbit and get rewarded with address space.
73+ </h3>
74+ <div className="flex w-full items-center bg-lightGreen px-8 py-10 rounded-xl">
75+ <div className="flex items-center flex-col p-4 w-full">
76+ <h2>200+</h2>
77+ <h3 className="text-gray text-center pt-4">Urbit stars awarded</h3>
78+ </div>
79+ <div className="h-32 w-4 bg-green" />
80+ <div className="flex items-center flex-col p-4 w-full">
81+ <h2>1M+</h2>
82+ <h3 className="text-gray text-center pt-4">USD Rewarded</h3>
83+ </div>
84+ <div className="h-32 w-4 bg-green" />
85+ <div className="flex items-center flex-col p-4 w-full">
86+ <h2>90+</h2>
87+ <h3 className="text-gray text-center pt-4">Grants completed</h3>
12888 </div>
12989 </div>
130− <div className="blog-grid">
131− {
132− events.slice(0, 4).map((event, i) => {
133− return (
134− <div className={`border-black cursor-pointer blog-grid-${i}`} key={event.slug}>
135− <Link href={'/events/' + event.slug} key={`post-${event.slug}`}>
136− <div>
137− <BackgroundImage src={event.extra.image || ''} />
138− <p className='text-black mt-2'>{event.title || ''}</p>
139− <caption className='text-gray'>{event.date}</caption>
140− </div>
141− </Link>
142− </div>
143− )
144− })
145− }
90+ <div className='measure py-12'>
91+ <p className="pb-12">We regularly give away address space to reward community contributions, including education, promotion, and development.</p>
92+ <button className="button-lg">View Grants</button>
14693 </div>
147− </TabCarousel>
94+ </section>
14895
96+ <section className="layout-narrow pt-48">
97+ <div className='flex items-center measure pb-12'>
98+ <button
99+ onClick={() => setTab(0)}
100+ className={`tab-button-lg mr-6 ${tab === 0 ? 'text-black' : 'text-gray'}`}>
101+ Blog
102+ </button>
103+ <button
104+ onClick={() => setTab(1)}
105+ className={`tab-button-lg ${tab === 1 ? 'text-black' : 'text-gray'}`}>
106+ Events
107+ </button>
108+ </div>
109+
110+ <TabCarousel index={tab}>
111+ <div className="blog-grid">
112+ {
113+ posts.slice(0, 4).map((post, i) => {
114+ return (
115+ <div className={`border-black cursor-pointer blog-grid-${i}`} key={post.slug}>
116+ <Link href={'/blog/' + post.slug} key={`post-${post.slug}`}>
117+ <div>
118+ <BackgroundImage src={post.extra.image || ''} />
119+ <p className='text-black mt-2'>{post.title}</p>
120+ <caption className='text-black mt-2'>{post.extra.author}</caption>
121+ <caption className='text-gray'>{post.date}</caption>
122+ </div>
123+ </Link>
124+ </div>
125+ )
126+ })
127+ }
128+ <div>
129+ <Link href="/blog"><button className="button-lg type-ui">Read More</button></Link>
130+ </div>
131+ </div>
132+ <div className="blog-grid">
133+ {
134+ events.slice(0, 4).map((event, i) => {
135+ return (
136+ <div className={`border-black cursor-pointer blog-grid-${i}`} key={event.slug}>
137+ <Link href={'/events/' + event.slug} key={`post-${event.slug}`}>
138+ <div>
139+ <BackgroundImage src={event.extra.image || ''} />
140+ <p className='text-black mt-2'>{event.title || ''}</p>
141+ <caption className='text-gray'>{event.date}</caption>
142+ </div>
143+ </Link>
144+ </div>
145+ )
146+ })
147+ }
148+ </div>
149+ </TabCarousel>
150+
151+
152+ </section>
149153
150− </section>
151−
152− <section className="layout-narrow pt-48">
153− <div className='measure pb-12'>
154− <h2 className="m-0 p-0 mr-4 pb-12">Inside the OS</h2>
155− <p>We send monthly emails on system improvements, upcoming events, and community spotlights.</p>
156− </div>
157− </section>
154+ <section className="layout-narrow pt-48">
155+ <div className='measure pb-12'>
156+ <h2 className="m-0 p-0 mr-4 pb-12">Inside the OS</h2>
157+ <p>We send monthly emails on system improvements, upcoming events, and community spotlights.</p>
158+ </div>
159+ </section>
160+ </SingleColumn>
158161
159162 <Footer />
160163