landing page design tweaks

Author: drusepth

app/views/main/index.html.erb

@@ -153,119 +153,119 @@
       <div class="p-2 lg:w-1/3 md:w-full">
         <div class="bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
           <div class="text-center">
-            <i class="material-icons w-12 h-12 mr-4 text-5xl">list</i>
+            <i class="material-icons w-12 h-12 mr-4 text-5xl">bubble_chart</i>
           </div>
           <div class="flex-grow">
             <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.organization.title') %>
+              <%= t('marketing.landing_page.benefits.creativity.title') %>
             </h2>
             <p class="text-gray-500">
-              <%= t('marketing.landing_page.benefits.organization.text') %>
+              <%= t('marketing.landing_page.benefits.creativity.text') %>
             </p>
           </div>
         </div>
       </div>
       <div class="p-2 lg:w-1/3 md:w-full">
         <div class="bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
           <div class="text-center">
-            <i class="material-icons w-12 h-12 mr-4 text-5xl">cloud</i>
+            <i class="material-icons w-12 h-12 mr-4 text-5xl"><%= Document.icon %></i>
           </div>
           <div class="flex-grow">
             <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.backups.title') %>
+              <%= t('marketing.landing_page.benefits.speed.title') %>
             </h2>
             <p class="text-gray-500">
-              <%= t('marketing.landing_page.benefits.backups.text') %>
+              <%= t('marketing.landing_page.benefits.speed.text') %>
             </p>
           </div>
         </div>
       </div>
       <div class="p-2 lg:w-1/3 md:w-full">
         <div class="bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
           <div class="text-center">
-            <i class="material-icons w-12 h-12 mr-4 text-5xl"><%= Document.icon %></i>
+            <i class="material-icons w-12 h-12 mr-4 text-5xl">list</i>
           </div>
           <div class="flex-grow">
             <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.speed.title') %>
+              <%= t('marketing.landing_page.benefits.organization.title') %>
             </h2>
             <p class="text-gray-500">
-              <%= t('marketing.landing_page.benefits.speed.text') %>
+              <%= t('marketing.landing_page.benefits.organization.text') %>
             </p>
           </div>
         </div>
       </div>
       <div class="p-2 lg:w-1/3 md:w-full">
         <div class="bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
           <div class="text-center">
-            <i class="material-icons w-12 h-12 mr-4 text-5xl">group</i>
+            <i class="material-icons w-12 h-12 mr-4 text-5xl">search</i>
           </div>
           <div class="flex-grow">
             <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.sharing.title') %>
+              <%= t('marketing.landing_page.benefits.search.title') %>
             </h2>
             <p class="text-gray-500">
-              <%= t('marketing.landing_page.benefits.sharing.text') %>
+              <%= t('marketing.landing_page.benefits.search.text') %>
             </p>
           </div>
         </div>
       </div>
       <div class="p-2 lg:w-1/3 md:w-full">
         <div class="bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
           <div class="text-center">
-            <i class="material-icons w-12 h-12 mr-4 text-5xl">security</i>
+            <i class="material-icons w-12 h-12 mr-4 text-5xl">settings_ethernet</i>
           </div>
           <div class="flex-grow">
             <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.ads.title') %>
+              <%= t('marketing.landing_page.benefits.growth.title') %>
             </h2>
             <p class="text-gray-500">
-              <%= t('marketing.landing_page.benefits.ads.text') %>
+              <%= t('marketing.landing_page.benefits.growth.text') %>
             </p>
           </div>
         </div>
       </div>
       <div class="p-2 lg:w-1/3 md:w-full">
         <div class="bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
           <div class="text-center">
-            <i class="material-icons w-12 h-12 mr-4 text-5xl">search</i>
+            <i class="material-icons w-12 h-12 mr-4 text-5xl">group</i>
           </div>
           <div class="flex-grow">
             <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.search.title') %>
+              <%= t('marketing.landing_page.benefits.sharing.title') %>
             </h2>
             <p class="text-gray-500">
-              <%= t('marketing.landing_page.benefits.search.text') %>
+              <%= t('marketing.landing_page.benefits.sharing.text') %>
             </p>
           </div>
         </div>
       </div>
       <div class="p-2 lg:w-1/3 md:w-full">
         <div class="bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
           <div class="text-center">
-            <i class="material-icons w-12 h-12 mr-4 text-5xl">bubble_chart</i>
+            <i class="material-icons w-12 h-12 mr-4 text-5xl">cloud</i>
           </div>
           <div class="flex-grow">
             <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.creativity.title') %>
+              <%= t('marketing.landing_page.benefits.backups.title') %>
             </h2>
             <p class="text-gray-500">
-              <%= t('marketing.landing_page.benefits.creativity.text') %>
+              <%= t('marketing.landing_page.benefits.backups.text') %>
             </p>
           </div>
         </div>
       </div>
       <div class="p-2 lg:w-1/3 md:w-full">
         <div class="bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
           <div class="text-center">
-            <i class="material-icons w-12 h-12 mr-4 text-5xl">settings_ethernet</i>
+            <i class="material-icons w-12 h-12 mr-4 text-5xl">security</i>
           </div>
           <div class="flex-grow">
             <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.growth.title') %>
+              <%= t('marketing.landing_page.benefits.ads.title') %>
             </h2>
             <p class="text-gray-500">
-              <%= t('marketing.landing_page.benefits.growth.text') %>
+              <%= t('marketing.landing_page.benefits.ads.text') %>
             </p>
           </div>
         </div>
@@ -343,9 +343,9 @@
 
         <div class="relative mb-4">
           <%= f.label :email_updates do %>
-            <%= f.check_box :email_updates %>
+            <%= f.check_box :email_updates, checked: 'false' %>
             <span>
-              We're always working to improve Notebook.ai. Please leave this box checked if you'd like to receive occasional updates about
+              We're always working to improve Notebook.ai. Please check this box if you'd like to receive occasional updates about
               what's new.
             </span>
           <% end %>
@@ -550,7 +550,7 @@
               </svg>
             </span>
             Create <span class="font-bold">&nbsp;3 core&nbsp;</span> worldbuilding pages
-            <div>
+            <div class="mb-2 -mt-3">
               <% (Rails.application.config.content_types[:free]).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 %>">
@@ -559,6 +559,15 @@
               <% end %>
             </div>
           </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>
+            Write <span class="font-bold">&nbsp;unlimited&nbsp;</span> documents
+          </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
@@ -616,23 +625,23 @@
                 <path d="M20 6L9 17l-5-5"></path>
               </svg>
             </span>
-            Create timelines
+            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 collections
+            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>
-            Analyze documents
+            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">
@@ -691,23 +700,23 @@
                 <path d="M20 6L9 17l-5-5"></path>
               </svg>
             </span>
-            Create timelines
+            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 collections
+            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>
-            Analyze documents
+            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">
@@ -764,23 +773,23 @@
                 <path d="M20 6L9 17l-5-5"></path>
               </svg>
             </span>
-            Create timelines
+            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 collections
+            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>
-            Analyze documents
+            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">