@@ -0,0 +1,201 @@
1+import Head from "next/head";
2+import Link from "next/link";
3+import React from "react";
4+import {
5+ Container,
6+ Section,
7+ SingleColumn,
8+ IntraNav,
9+ TwoUp,
10+} from "@urbit/foundation-design-system";
11+import Meta from "../components/Meta";
12+import Header from "../components/Header";
13+import Footer from "../components/Footer";
14+
15+// Probably should make a core component, just pulling from operators.urbit.org for this one
16+function GuideCard({ title, description, href, className }) {
17+ return (
18+ <div
19+ className={
20+ "bg-wall-100 rounded-xl cursor-pointer aspect-w-none aspect-h-none md:aspect-w-5 md:aspect-h-4 h-full " +
21+ className
22+ }
23+ >
24+ <div className="p-8 measure flex justify-between flex-col">
25+ <div className="flex flex-col space-y-2">
26+ <h4 className="mb-2">{title}</h4>
27+ {description}
28+ </div>
29+ <Link href={href}>
30+ <a
31+ passHref
32+ className="bg-green-400 text-white rounded-lg flex justify-center p-3 w-20 mt-4 min-w-fit"
33+ >
34+ Get Started
35+ </a>
36+ </Link>
37+ </div>
38+ </div>
39+ );
40+}
41+
42+export default function DiscordLanding({ search }) {
43+ const post = {
44+ title: "Urbit is Decentralized Discord",
45+ description:
46+ "There's no need to rely on centralized services to run a decentralized web3 project.",
47+ image:
48+ "https://storage.googleapis.com/media.urbit.org/site/landing/discord-opengraph.png",
49+ };
50+ return (
51+ <Container>
52+ <Head>
53+ <title>Urbit is Decentralized Discord (and a lot more)</title>
54+ {Meta(post)}
55+ </Head>
56+ <IntraNav ourSite="https://urbit.org" search={search} />
57+ <SingleColumn>
58+ <Header />
59+ <Section className="pb-24">
60+ <div className="flex flex-col items-center justify-center space-y-4">
61+ <h3 className="uppercase tracking-widest">Urbit is</h3>
62+ <h1 className="text-center">Decentralized Discord</h1>
63+ <Link href="/ecosystem">
64+ <a className="text-wall-400 pb-12">(and a lot more)</a>
65+ </Link>
66+ </div>
67+ <video autoPlay loop playsInline>
68+ <source
69+ src="https://storage.googleapis.com/media.urbit.org/site/groupsdemo.webm"
70+ type="video/webm"
71+ />
72+ <source
73+ src="https://storage.googleapis.com/media.urbit.org/site/groupsdemo-2.mp4"
74+ type="video/mp4"
75+ />
76+ </video>
77+
78+ <div className="md:p-16">
79+ <p className="type-ui text-center">
80+ Urbit’s Groups app allows teams, communities, and friends to get
81+ together and communicate using their own private servers.
82+ </p>
83+ <p className="type-ui pt-8 text-center">
84+ Unlike Discord, only you can delete your Urbit and identity.
85+ </p>
86+ </div>
87+ </Section>
88+
89+ <Section className="justify-center flex-col flex items-center space-y-8">
90+ <h2 className="text-center">
91+ Host your own group in under 60 minutes
92+ </h2>
93+ <p className="text-center">
94+ Get immediate{" "}
95+ <Link href="/applications/~lander-dister-dozzod-dozzod/groups">
96+ decentralized messaging, blogging, chatting, and collections.
97+ </Link>
98+ </p>
99+ <TwoUp>
100+ <GuideCard
101+ title="Host a Group"
102+ description={
103+ <>
104+ <p>Groups need a host that's always online.</p>
105+ <p>
106+ With Urbit, that just means getting an Urbit ID and then a
107+ quick installation on a VPS or local computer.
108+ </p>
109+ </>
110+ }
111+ href="https://operators.urbit.org/manual/running/hosting"
112+ />
113+ <GuideCard
114+ title="Join a Group"
115+ description={
116+ <p>
117+ The easiest way to jump on the network is to download our
118+ desktop application and boot up a comet - a Temporary ID.
119+ </p>
120+ }
121+ href="https://urbit.org/getting-started/desktop"
122+ />
123+ </TwoUp>
124+
125+ <Link href="/applications/~lander-dister-dozzod-dozzod/groups">
126+ <a className="pt-16 flex space-x-2 text-green-400 font-semibold">
127+ <svg
128+ width="24"
129+ height="24"
130+ viewBox="0 0 24 24"
131+ fill="none"
132+ xmlns="http://www.w3.org/2000/svg"
133+ >
134+ <rect width="24" height="24" rx="5" fill="#DC5F3F" />
135+ </svg>
136+ <span>Learn more about Urbit Groups</span>
137+ </a>
138+ </Link>
139+ <Link href="/overview">
140+ <a className="flex space-x-2 text-green-400 font-semibold">
141+ <svg
142+ width="31"
143+ height="31"
144+ viewBox="0 0 31 31"
145+ fill="none"
146+ xmlns="http://www.w3.org/2000/svg"
147+ >
148+ <g filter="url(#filter0_d_216_1182)">
149+ <circle cx="15.5" cy="13.5" r="11.5" fill="white" />
150+ </g>
151+ <path
152+ d="M9.00544 15.6293C8.97041 14.6356 9.10469 13.7944 9.40828 13.1057C9.71188 12.4169 10.1527 11.8938 10.7307 11.5363C11.3145 11.1788 12.0005 11 12.7887 11C13.3375 11 13.8629 11.1025 14.365 11.3076C14.8671 11.5126 15.4364 11.8675 16.0728 12.3722C16.4114 12.6404 16.6975 12.8454 16.931 12.9874C17.1645 13.1241 17.4331 13.1924 17.7367 13.1924C18.1512 13.1924 18.4928 13.0478 18.7613 12.7587C19.0299 12.4642 19.1554 11.9989 19.1379 11.3628H21.9928C22.0337 12.3617 21.8994 13.2056 21.59 13.8943C21.2806 14.5831 20.8339 15.1062 20.2501 15.4637C19.6663 15.8212 18.9861 16 18.2096 16C17.6316 16 17.0886 15.8922 16.5807 15.6767C16.0786 15.4558 15.521 15.1036 14.908 14.6199C14.546 14.3307 14.257 14.123 14.041 13.9968C13.825 13.8654 13.5681 13.7997 13.2704 13.7997C12.8558 13.7997 12.5143 13.9416 12.2457 14.2256C11.9772 14.5042 11.8516 14.9721 11.8691 15.6293H9.00544Z"
153+ fill="#24221E"
154+ />
155+ <defs>
156+ <filter
157+ id="filter0_d_216_1182"
158+ x="0"
159+ y="0"
160+ width="31"
161+ height="31"
162+ filterUnits="userSpaceOnUse"
163+ color-interpolation-filters="sRGB"
164+ >
165+ <feFlood flood-opacity="0" result="BackgroundImageFix" />
166+ <feColorMatrix
167+ in="SourceAlpha"
168+ type="matrix"
169+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
170+ result="hardAlpha"
171+ />
172+ <feOffset dy="2" />
173+ <feGaussianBlur stdDeviation="2" />
174+ <feComposite in2="hardAlpha" operator="out" />
175+ <feColorMatrix
176+ type="matrix"
177+ values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
178+ />
179+ <feBlend
180+ mode="normal"
181+ in2="BackgroundImageFix"
182+ result="effect1_dropShadow_216_1182"
183+ />
184+ <feBlend
185+ mode="normal"
186+ in="SourceGraphic"
187+ in2="effect1_dropShadow_216_1182"
188+ result="shape"
189+ />
190+ </filter>
191+ </defs>
192+ </svg>
193+ <span>Learn more about Urbit</span>
194+ </a>
195+ </Link>
196+ </Section>
197+ </SingleColumn>
198+ <Footer />
199+ </Container>
200+ );
201+}