@@ -11,12 +11,71 @@
1111 {% include "partials/navigation-search.html" %}
1212</nav>
1313<!-- content -->
14− <article class="mt4 mb6 full c4-12-lg">
14+ <h1 class="mb4 full mt4 f2 fw3 c4-10-lg">Introduction</h1>
15+ <section class="full-bleed full grid12">
16+ <section id="introduction" class="c4-10-md c4-10-lg full lh-copy">
17+ <figure class="mt0">
18+ <img src="../assets/intro/ship.svg" alt="A drawing of an Urbit ship." />
19+ </figure>
20+
21+ <p class="mb0 lh-copy">This is a drawing of an Urbit.</p>
22+ <p class="mt0 lh-copy">It’s a new kind of computer.</p>
23+ <p class="mt6 lh-copy">This image is representative of three key (yet familiar) aspects to this new kind of computer:</p>
24+ <ul class="list">
25+ <li class="mt4 ml0">The <img src="../assets/intro/apps.svg" /> apps you use every day,</li>
26+ <li class="mt4 ml0">the <img src="../assets/intro/arvo.svg" /> OS that makes sure everything runs smoothly,</li>
27+ <li class="mt4 ml0">and your <img src="../assets/intro/id.svg" /> identity at the center of it all.</li>
28+ </ul>
29+ </section>
30+
31+ <section id="what-is-urbit" class="c4-10-md c4-10-lg full mt6">
32+ <p>So, what <em>is</em> an Urbit?</p>
33+
34+ <figure class="mt6 tc lh-copy">
35+ <img src="../assets/intro/social-software.svg" />
36+ <figcaption class="measure home tl mt5">
37+ <h3 class="fw6 tc mb4"><span class="fl">1.</span>It's an unremarkable computer from scratch</h3>
38+ Your Urbit is a purpose-built tool for your own social software, not MEGACORP social networking.
39+ On Urbit, you run (or build) your own software to connect and communicate with your friends and family.
40+ </figcaption>
41+ </figure>
42+
43+ <figure class="tc mt6 lh-copy">
44+ <img src="../assets/intro/rock.svg" />
45+ <figcaption class="measure home tl mt5">
46+ <h3 class="fw6 tc mb4"><span class="fl">2.</span>It's designed for permanence and durability</h3>
47+ Your Urbit is a permanent and completely private archive.
48+ Your Urbit can store all your data safely, privately, forever.
49+ </figcaption>
50+ </figure>
51+
52+ <figure class="tc mt6 lh-copy">
53+ <img src="../assets/intro/yours-forever.svg" />
54+ <figcaption class="measure home tl mt5">
55+ <h3 class="fw6 tc mb4"><span class="fl">3.</span>It's cryptographically yours</h3>
56+ You own your Urbit like you own Bitcoin.
57+ Each Urbit is a piece of a new global network that’s owned and controlled by its users.</figcaption>
58+ </figure>
59+ </section>
60+
61+ <section id="megacorp" class="c4-10-md c4-10-lg full">
62+ <p class="lh-copy">Today, technology controls us. Every MEGACORP has the same incentive:
63+ To keep us hooked on their platform.</p>
64+ <p class="lh-copy">We built Urbit so people can control their technology, shape their digital lives and freely build
65+ their digital communities.</p>
66+ <p class="lh-copy">We want to replace the internet with a foundation for computing that we can all rely on far into the future.</p>
67+ <p class="lh-copy">Urbit is a large, ambitious project. But at the core it’s durable, simple and yours.</p>
68+ </section>
69+ </section>
70+ <article class="mt4 mb6 full c4-10-lg">
71+ <p class="mb4">Want to continue down this rabbit hole? If you’re new to Urbit
72+ and want to learn more, start from the beginning. If you’re technical, start
73+ with the technical overview.</p>
1574 <ul class="posts">
1675 {% set posts = get_section(path="understanding-urbit/_index.md") %}
1776 {% for page in posts.pages %}
18− <li class="mb4">
19− <h2 class="f4 fw4 mt0 mb0"><a class="bb-0" href="{{ page.permalink }}">{{ page.title }}</a></h2>
77+ <li class="mb4 ml0">
78+ <h2 class="f4 ml0 fw4 mt0 mb0"><a class="bb-0" href="{{ page.permalink }}">{{ page.title }}</a></h2>
2079 <p class="mt0">{{ page.description }}</p>
2180 </li>
2281 {% endfor %}