From 9d2464ad8e9ee4ed855b76f29055fcf00d422295 Mon Sep 17 00:00:00 2001
From: drusepth <drusepth@gmail.com>
Date: Sat, 8 Jan 2022 11:45:35 -0800
Subject: [PATCH] polish up pricing table

---
 app/views/main/index.html.erb | 437 +++++++++++++++++-----------------
 1 file changed, 224 insertions(+), 213 deletions(-)

diff --git a/app/views/main/index.html.erb b/app/views/main/index.html.erb
index 5e207d24..9a80b5e9 100644
--- a/app/views/main/index.html.erb
+++ b/app/views/main/index.html.erb
@@ -501,7 +501,7 @@
     </div>
     <div class="flex flex-wrap -m-4">
       <div class="p-4 xl:w-1/4 md:w-1/2 w-full">
-        <div class="h-full p-6 rounded-lg border-2 border-gray-300 bg-white flex flex-col relative overflow-hidden">
+        <div class="h-3/4 mt-16 p-6 rounded-lg border-2 border-gray-300 bg-white flex flex-col relative overflow-hidden">
           <h2 class="text-sm tracking-widest title-font mb-1 font-medium">STARTER</h2>
           <h1 class="text-5xl text-gray-900 pb-4 mb-4 border-b border-gray-200 leading-none">Free forever</h1>
           <p class="flex items-center text-gray-600 mb-2">
@@ -557,228 +557,239 @@
         </div>
       </div>
 
-      <div class="p-4 xl:w-1/4 md:w-1/2 w-full">
-        <div class="h-full p-6 rounded-lg border-2 border-gray-300 bg-white flex flex-col relative overflow-hidden">
-          <h2 class="text-sm tracking-widest title-font mb-1 font-medium">PREMIUM</h2>
-          <h1 class="text-5xl text-gray-900 leading-none flex items-center pb-4 mb-4 border-b border-gray-200">
-            <span>$9</span>
-            <span class="text-lg ml-1 font-normal text-gray-500">per month</span>
-          </h1>
-          <p class="flex items-center text-gray-600 mb-2">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Create <span class="font-bold">&nbsp;unlimited&nbsp;</span> universes
-          </p>
+      <div class="p-4 xl:w-3/4 md:w-full w-full border-2 border-gray-200 flex flex-col flex-wrap rounded-lg">
+        <div class="flex flex-row">
+          <div class="p-4 xl:w-1/3 md:w-1/2 w-full mx-auto">
+            <div class="h-full p-6 rounded-lg border-2 border-gray-300 bg-white flex flex-col relative overflow-hidden">
+              <h2 class="text-sm tracking-widest title-font mb-1 font-medium">PREMIUM</h2>
+              <h1 class="text-5xl text-gray-900 leading-none flex items-center pb-4 mb-4 border-b border-gray-200">
+                <span>$9</span>
+                <span class="text-lg ml-1 font-normal text-gray-500">per month</span>
+              </h1>
+              <p class="flex items-center text-gray-600 mb-2">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Create <span class="font-bold">&nbsp;unlimited&nbsp;</span> universes
+              </p>
 
-          <p class="flex items-center text-gray-600 mb-2">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Upload <span class="font-bold">&nbsp;10GB&nbsp;</span> of images 
-          </p>
-          <p class="flex items-center text-gray-600 mb-6">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Create <span class="font-bold">&nbsp;all <%= Rails.application.config.content_types[:all].count %>&nbsp;</span> worldbuilding pages
-            <div class="mb-2 -mt-3">
-              <% (Rails.application.config.content_types[:all]).each do |content_class| %>
-                <% next if content_class.name == "Universe" %>
-                <i class="material-icons <%= content_class.text_color %> tooltipped" style="font-size: 240%" data-position="bottom" data-delay="0" data-tooltip="Create unlimited <%= content_class.name.pluralize %>">
-                  <%= content_class.icon %>
-                </i>
+              <p class="flex items-center text-gray-600 mb-2">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Upload <span class="font-bold">&nbsp;10GB&nbsp;</span> of images 
+              </p>
+              <p class="flex items-center text-gray-600 mb-6">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Create <span class="font-bold">&nbsp;all <%= Rails.application.config.content_types[:all].count %>&nbsp;</span> worldbuilding pages
+                <div class="mb-2 -mt-3">
+                  <% (Rails.application.config.content_types[:all]).each do |content_class| %>
+                    <% next if content_class.name == "Universe" %>
+                    <i class="material-icons <%= content_class.text_color %> tooltipped" style="font-size: 240%" data-position="bottom" data-delay="0" data-tooltip="Create unlimited <%= content_class.name.pluralize %>">
+                      <%= content_class.icon %>
+                    </i>
+                  <% end %>
+                </div>
+              </p>
+              <p class="flex items-center text-gray-600 mb-2">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Write and analyze documents
+              </p>
+              <p class="flex items-center text-gray-600 mb-2">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Create timelines
+              </p>
+              <p class="flex items-center text-gray-600 mb-8">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Create collections
+              </p>
+              <%= link_to new_user_registration_path, class: 'mt-auto' do %>
+                <button class="flex items-center mt-auto text-white bg-gray-400 border-0 py-2 px-4 w-full focus:outline-none hover:bg-gray-500 rounded">
+                  Sign up
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
+                    <path d="M5 12h14M12 5l7 7-7 7"></path>
+                  </svg>
+                </button>
               <% end %>
             </div>
-          </p>
-          <p class="flex items-center text-gray-600 mb-2">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Write and analyze documents
-          </p>
-          <p class="flex items-center text-gray-600 mb-2">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Create timelines
-          </p>
-          <p class="flex items-center text-gray-600 mb-8">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Create collections
-          </p>
-          <%= link_to new_user_registration_path, class: 'mt-auto' do %>
-            <button class="flex items-center mt-auto text-white bg-gray-400 border-0 py-2 px-4 w-full focus:outline-none hover:bg-gray-500 rounded">
-              Sign up
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
-                <path d="M5 12h14M12 5l7 7-7 7"></path>
-              </svg>
-            </button>
-          <% end %>
-        </div>
-      </div>
-      <div class="p-4 xl:w-1/4 md:w-1/2 w-full">
-        <div class="h-full p-6 rounded-lg border-2 border-indigo-500 flex flex-col bg-white relative overflow-hidden">
-          <span class="bg-indigo-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">MOST POPULAR</span>
-          <h2 class="text-sm tracking-widest title-font mb-1 font-medium">PREMIUM</h2>
-          <h1 class="text-5xl text-gray-900 leading-none flex items-center pb-4 mb-4 border-b border-gray-200">
-            <span>$24</span>
-            <span class="text-lg ml-1 font-normal text-gray-500">per 3 months</span>
-          </h1>
-          <p class="flex items-center text-gray-600 mb-2">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Create <span class="font-bold">&nbsp;unlimited&nbsp;</span> universes
-          </p>
+          </div>
+          <div class="p-4 xl:w-1/3 md:w-1/2 w-full mx-auto">
+            <div class="h-full p-6 rounded-lg border-2 border-indigo-500 flex flex-col bg-white relative overflow-hidden">
+              <span class="bg-indigo-500 text-white px-3 py-1 tracking-widest text-xs absolute right-0 top-0 rounded-bl">MOST POPULAR</span>
+              <h2 class="text-sm tracking-widest title-font mb-1 font-medium">PREMIUM</h2>
+              <h1 class="text-5xl text-gray-900 leading-none flex items-center pb-4 mb-4 border-b border-gray-200">
+                <span>$24</span>
+                <span class="text-lg ml-1 font-normal text-gray-500">per 3 months</span>
+              </h1>
+              <p class="flex items-center text-gray-600 mb-2">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Create <span class="font-bold">&nbsp;unlimited&nbsp;</span> universes
+              </p>
 
-          <p class="flex items-center text-gray-600 mb-2">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Upload <span class="font-bold">&nbsp;10GB&nbsp;</span> of images 
-          </p>
-          <p class="flex items-center text-gray-600 mb-6">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Create <span class="font-bold">&nbsp;all <%= Rails.application.config.content_types[:all].count %>&nbsp;</span> worldbuilding pages
-            <div class="mb-2 -mt-3">
-              <% (Rails.application.config.content_types[:all]).each do |content_class| %>
-                <% next if content_class.name == "Universe" %>
-                <i class="material-icons <%= content_class.text_color %> tooltipped" style="font-size: 240%" data-position="bottom" data-delay="0" data-tooltip="Create unlimited <%= content_class.name.pluralize %>">
-                  <%= content_class.icon %>
-                </i>
+              <p class="flex items-center text-gray-600 mb-2">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Upload <span class="font-bold">&nbsp;10GB&nbsp;</span> of images 
+              </p>
+              <p class="flex items-center text-gray-600 mb-6">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Create <span class="font-bold">&nbsp;all <%= Rails.application.config.content_types[:all].count %>&nbsp;</span> worldbuilding pages
+                <div class="mb-2 -mt-3">
+                  <% (Rails.application.config.content_types[:all]).each do |content_class| %>
+                    <% next if content_class.name == "Universe" %>
+                    <i class="material-icons <%= content_class.text_color %> tooltipped" style="font-size: 240%" data-position="bottom" data-delay="0" data-tooltip="Create unlimited <%= content_class.name.pluralize %>">
+                      <%= content_class.icon %>
+                    </i>
+                  <% end %>
+                </div>
+              </p>
+              <p class="flex items-center text-gray-600 mb-2">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Write and analyze documents
+              </p>
+              <p class="flex items-center text-gray-600 mb-2">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Create timelines
+              </p>
+              <p class="flex items-center text-gray-600 mb-8">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Create collections
+              </p>
+              <%= link_to new_user_registration_path, class: 'mt-auto' do %>
+                <button class="flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded">
+                  Sign up
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
+                    <path d="M5 12h14M12 5l7 7-7 7"></path>
+                  </svg>
+                </button>
               <% end %>
             </div>
-          </p>
-          <p class="flex items-center text-gray-600 mb-2">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Write and analyze documents
-          </p>
-          <p class="flex items-center text-gray-600 mb-2">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Create timelines
-          </p>
-          <p class="flex items-center text-gray-600 mb-8">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Create collections
-          </p>
-          <%= link_to new_user_registration_path, class: 'mt-auto' do %>
-            <button class="flex items-center mt-auto text-white bg-indigo-500 border-0 py-2 px-4 w-full focus:outline-none hover:bg-indigo-600 rounded">
-              Sign up
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
-                <path d="M5 12h14M12 5l7 7-7 7"></path>
-              </svg>
-            </button>
-          <% end %>
-        </div>
-      </div>
-      <div class="p-4 xl:w-1/4 md:w-1/2 w-full">
-        <div class="h-full p-6 rounded-lg border-2 border-gray-300 bg-white flex flex-col relative overflow-hidden">
-          <h2 class="text-sm tracking-widest title-font mb-1 font-medium">PREMIUM</h2>
-          <h1 class="text-5xl text-gray-900 leading-none flex items-center pb-4 mb-4 border-b border-gray-200">
-            <span>$84</span>
-            <span class="text-lg ml-1 font-normal text-gray-500">per year</span>
-          </h1>
-          <p class="flex items-center text-gray-600 mb-2">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Create <span class="font-bold">&nbsp;unlimited&nbsp;</span> universes
-          </p>
-          <p class="flex items-center text-gray-600 mb-2">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Upload <span class="font-bold">&nbsp;10GB&nbsp;</span> of images 
-          </p>
-          <p class="flex items-center text-gray-600 mb-6">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Create <span class="font-bold">&nbsp;all <%= Rails.application.config.content_types[:all].count %>&nbsp;</span> worldbuilding pages
-            <div class="mb-2 -mt-3">
-              <% (Rails.application.config.content_types[:all]).each do |content_class| %>
-                <% next if content_class.name == "Universe" %>
-                <i class="material-icons <%= content_class.text_color %> tooltipped" style="font-size: 240%" data-position="bottom" data-delay="0" data-tooltip="Create unlimited <%= content_class.name.pluralize %>">
-                  <%= content_class.icon %>
-                </i>
+          </div>
+          <div class="p-4 xl:w-1/3 md:w-1/2 w-full mx-auto">
+            <div class="h-full p-6 rounded-lg border-2 border-gray-300 bg-white flex flex-col relative overflow-hidden">
+              <h2 class="text-sm tracking-widest title-font mb-1 font-medium">PREMIUM</h2>
+              <h1 class="text-5xl text-gray-900 leading-none flex items-center pb-4 mb-4 border-b border-gray-200">
+                <span>$84</span>
+                <span class="text-lg ml-1 font-normal text-gray-500">per year</span>
+              </h1>
+              <p class="flex items-center text-gray-600 mb-2">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Create <span class="font-bold">&nbsp;unlimited&nbsp;</span> universes
+              </p>
+              <p class="flex items-center text-gray-600 mb-2">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Upload <span class="font-bold">&nbsp;10GB&nbsp;</span> of images 
+              </p>
+              <p class="flex items-center text-gray-600 mb-6">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Create <span class="font-bold">&nbsp;all <%= Rails.application.config.content_types[:all].count %>&nbsp;</span> worldbuilding pages
+                <div class="mb-2 -mt-3">
+                  <% (Rails.application.config.content_types[:all]).each do |content_class| %>
+                    <% next if content_class.name == "Universe" %>
+                    <i class="material-icons <%= content_class.text_color %> tooltipped" style="font-size: 240%" data-position="bottom" data-delay="0" data-tooltip="Create unlimited <%= content_class.name.pluralize %>">
+                      <%= content_class.icon %>
+                    </i>
+                  <% end %>
+                </div>
+              </p>
+              <p class="flex items-center text-gray-600 mb-2">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Write and analyze documents
+              </p>
+              <p class="flex items-center text-gray-600 mb-2">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Create timelines
+              </p>
+              <p class="flex items-center text-gray-600 mb-8">
+                <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
+                    <path d="M20 6L9 17l-5-5"></path>
+                  </svg>
+                </span>
+                Create collections
+              </p>
+              <%= link_to new_user_registration_path, class: 'mt-auto' do %>
+                <button class="flex items-center mt-auto text-white bg-gray-400 border-0 py-2 px-4 w-full focus:outline-none hover:bg-gray-500 rounded">
+                  Sign up
+                  <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
+                    <path d="M5 12h14M12 5l7 7-7 7"></path>
+                  </svg>
+                </button>
               <% end %>
             </div>
-          </p>
-          <p class="flex items-center text-gray-600 mb-2">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Write and analyze documents
-          </p>
-          <p class="flex items-center text-gray-600 mb-2">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Create timelines
-          </p>
-          <p class="flex items-center text-gray-600 mb-8">
-            <span class="w-4 h-4 mr-2 inline-flex items-center justify-center bg-gray-400 text-white rounded-full flex-shrink-0">
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" class="w-3 h-3" viewBox="0 0 24 24">
-                <path d="M20 6L9 17l-5-5"></path>
-              </svg>
-            </span>
-            Create collections
-          </p>
-          <%= link_to new_user_registration_path, class: 'mt-auto' do %>
-            <button class="flex items-center mt-auto text-white bg-gray-400 border-0 py-2 px-4 w-full focus:outline-none hover:bg-gray-500 rounded">
-              Sign up
-              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-auto" viewBox="0 0 24 24">
-                <path d="M5 12h14M12 5l7 7-7 7"></path>
-              </svg>
-            </button>
-          <% end %>
+          </div>
         </div>
+        <div class="text-gray-400 text-center text-sm">
+          All Premium plans provide the same benefits, but there are three different billing options.
+          Prepaying and PayPal are also available.
+        </div>
+
       </div>
+
+      
     </div>
   </div>
 </section>