docs: add started plan to pico+ page

We received feedback that it is confusing what is free and what is paid
so adding a section to the pricing page will better educated users.

posts/plus.md

@@ -4,18 +4,3 @@ description: Become a pico+ member
 slug: plus
 template: plus.page.tmpl
 ---
-
-- [tuns](/tuns)
-  - per-site [analytics](/analytics)
-- [pages](/pgs)
-  - per-site [analytics](/analytics)
-- [prose](/prose)
-  - no inherent storage limits
-  - blog [analytics](/analytics)
-- [irc bouncer](/bouncer)
-- 10GB total storage
-
-<hr class="my-4" />
-
-Before signing up to `pico+`, please read our [privacy policy](/privacy),
-[terms of service](/ops), and our [refund policy](/ops#refund-policy).

static/main.css

@@ -105,6 +105,20 @@
   justify-content: center;
 }
 
+.plus {
+  height: 100%;
+  width: 200px;
+}
+
+.logo-basic {
+  line-height: 1;
+  display: inline-block;
+  border: 3px solid var(--grey-light);
+  padding: 8px 10px 10px 10px;
+  border-radius: 10px;
+  margin: 0;
+}
+
 @media only screen and (max-width: 800px) {
   body {
     padding: 0 0.75rem;

tmpl/plus.page.tmpl

@@ -11,10 +11,46 @@
 {{define "body"}}
 {{template "nav" .}}
 
-<main>
-  <div class="flex justify-center">
-    <div class="container-xs">
-      <div class="border px-4 py-4 mt-4">
+<main  class="flex justify-center">
+  <div>
+    <div class="group-h flex-collapse">
+      <div class="border px-4 py-4 mt-4 container-xs" style="height: 720px;">
+        <div class="group items-center">
+          <h1 class="text-2xl logo-basic">starter</h1>
+          <div class="text-center">
+            <div class="text-2xl">$0</div>
+            <div class="text-sm">&nbsp;</div>
+            <pre class="my"><span class="visited">ssh</span> pico.sh</pre>
+            <div class="text-sm">
+              Log into our SSH App to learn more and get started.
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <ul>
+            <li>
+              <a href="/pages">pages</a>
+              <ul><li>25MB storage limit</li></ul>
+            </li>
+            <li>
+              <a href="https://pipe.pico.sh">pipe</a>
+            </li>
+            <li>
+              <a href="/prose">prose</a>
+              <ul><li>500MB image limit</li></ul>
+            </li>
+            <li>
+              <a href="/feeds">rss-to-email</a>
+            </li>
+            <li>
+              <a href="/pastes">pastes</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="border px-4 py-4 mt-4 container-xs" style="height: 720px;">
         <div class="group items-center">
           <h1 class="logo-header text-2xl">pico+</h1>
           <div class="text-center">
@@ -27,17 +63,40 @@
           </div>
         </div>
 
-        <hr class="my-4" />
+        <div>
+          <ul>
+            <li>
+              <a href="/tuns">tuns</a>
+              <ul><li>per-site <a href="/analytics">analytics</a></li></ul>
+            </li>
+            <li>
+              <a href="/pgs">pages</a>
+              <ul><li>per-site <a href="/analytics">analytics</a></li></ul>
+            </li>
+            <li>
+              <a href="/prose">prose</a>
+              <ul>
+                <li>no inherent storage limits</li>
+                <li>blog <a href="/analytics">analytics</a></li>
+              </ul>
+            </li>
+            <li>
+              <a href="/bouncer">irc bouncer</a>
+            </li>
+            <li>10GB storage across all services</li>
+          </ul>
 
-        <article class="md plus">
-          {{.Data.Html}}
-        </article>
-      </div>
+          <hr class="my-4" />
 
-      {{template "pager" .}}
-      <hr class="my-4" />
-      {{template "footer" .}}
+          Before signing up to <code>pico+</code>, please read our <a href="/privacy">privacy policy</a>,
+          <a href="/ops">terms of service</a>, and our <a href="/ops#refund-policy">refund policy</a>.
+        </div>
+      </div>
     </div>
+
+    {{template "pager" .}}
+    <hr class="my-4" />
+    {{template "footer" .}}
   </div>
 </main>
 {{end}}