diff --git a/app/views/main/index.html.erb b/app/views/main/index.html.erb
index 965b8a16..888967f4 100644
--- a/app/views/main/index.html.erb
+++ b/app/views/main/index.html.erb
@@ -1,13 +1,13 @@
-<section class="text-green-900" style="height: 78vh;">
-  <div class="h-full bg-right-bottom bg-cover flex shadow-lg" style="background-image: url(<%= image_path 'https://images.unsplash.com/photo-1518562180175-34a163b1a9a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80' %>);">
-    <div class="container mx-auto p-4 flex items-center z-10">
+<section class="min-h-[60vh] md:min-h-[78vh]">
+  <div class="h-full flex shadow-lg bg-cover bg-center border-b bg-notebook-blue border-notebook-blue bg-no-repeat py-32" style="background-image: url(<%= image_path 'landing/notebook-hero-1.png' %>);">
+    <div class="container mx-auto p-4 flex items-center py-16 md:pb-24 z-10">
       <div class="text-center w-full">
-        <div class="text-black py-4 px-5 my-5">
-          <div class="mb-3 text-4xl md:text-6xl" style="text-shadow: white 0px 0px 10px;">
-            The <span class="text-notebook-blue">smart</span> notebook<br class="hidden sm:block" />
-            for <span class="text-notebook-blue">smart</span> worldbuilders
+        <div class="text-white py-4 px-5 my-5">
+          <div class="mb-3 text-4xl md:text-6xl" style="text-shadow: black 0px 0px 10px;">
+            The <span class="text-blue-100" style="text-shadow: indigo 0px 0px 10px;">smart</span> notebook<br class="hidden sm:block" />
+            for <span class="text-blue-100" style="text-shadow: indigo 0px 0px 10px;">smart</span> worldbuilders
           </div>
-          <div class="leading-normal text-2xl" style="text-shadow: white 0px 0px 10px;">
+          <div class="leading-normal text-2xl" style="text-shadow: black 0px 0px 10px;">
             <%= t('marketing.landing_page.promo_subheader') %>
           </div>
         </div>
@@ -24,72 +24,76 @@
   </div>
 </section>
 
-<section class="text-gray-600 body-font">
-  <div class="container px-5 py-20 mb-8 mx-auto">
-    <div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
-      <div class="p-4 md:w-1/2 flex">
-        <div class="flex flex-row items-center mb-2">
-          <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-blue-100 text-notebook-blue flex-shrink-0">
-            <i class="material-icons text-3xl mb-1">create</i>
+<section class="bg-gray-50 py-16">
+  <div class="container mx-auto px-5">
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+      <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
+        <div class="flex items-start">
+          <div class="w-16 h-16 inline-flex items-center justify-center rounded-full bg-blue-100 text-notebook-blue flex-shrink-0">
+            <i class="material-icons text-4xl">create</i>
           </div>
-          <div class="ml-4 text-2xl font-bold">
-            <%= t('marketing.landing_page.cta.writers.header') %>
+          <div class="ml-6 flex-grow">
+            <h3 class="text-2xl font-bold text-gray-900 mb-3">
+              <%= t('marketing.landing_page.cta.writers.header') %>
+            </h3>
+            <p class="leading-relaxed text-gray-600 mb-4">
+              <%= t('marketing.landing_page.cta.writers.body') %>
+            </p>
+            <%= link_to writers_landing_path, class: 'inline-flex items-center text-notebook-blue hover:text-blue-600 font-medium transition-colors duration-200' do %>
+              <%= t('marketing.landing_page.cta.writers.button') %>
+              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
+                <path d="M5 12h14M12 5l7 7-7 7"></path>
+              </svg>
+            <% end %>
           </div>
         </div>
-        <div class="flex-grow pl-1">
-          <p class="leading-relaxed text-base">
-            <%= t('marketing.landing_page.cta.writers.body') %>
-          </p>
-          <%= link_to writers_landing_path, class: 'mt-3 text-notebook-blue inline-flex items-center' do %>
-            <%= t('marketing.landing_page.cta.writers.button') %>
-            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
-              <path d="M5 12h14M12 5l7 7-7 7"></path>
-            </svg>
-          <% end %>
-        </div>
       </div>
 
-      <div class="p-4 md:w-1/2 flex">
-        <div class="flex flex-row items-center mb-2">
-          <div class="w-12 h-12 inline-flex items-center justify-center rounded-full bg-blue-100 text-notebook-blue flex-shrink-0">
-            <i class="material-icons text-3xl mb-1">gavel</i>
+      <div class="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow duration-300 border border-gray-100">
+        <div class="flex items-start">
+          <div class="w-16 h-16 inline-flex items-center justify-center rounded-full bg-blue-100 text-notebook-blue flex-shrink-0">
+            <i class="material-icons text-4xl">gavel</i>
           </div>
-          <div class="ml-4 text-2xl font-bold">
-            <%= t('marketing.landing_page.cta.roleplayers.header') %>
+          <div class="ml-6 flex-grow">
+            <h3 class="text-2xl font-bold text-gray-900 mb-3">
+              <%= t('marketing.landing_page.cta.roleplayers.header') %>
+            </h3>
+            <p class="leading-relaxed text-gray-600 mb-4">
+              <%= t('marketing.landing_page.cta.roleplayers.body') %>
+            </p>
+            <%= link_to roleplayers_landing_path, class: 'inline-flex items-center text-notebook-blue hover:text-blue-600 font-medium transition-colors duration-200' do %>
+              <%= t('marketing.landing_page.cta.roleplayers.button') %>
+              <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
+                <path d="M5 12h14M12 5l7 7-7 7"></path>
+              </svg>
+            <% end %>
           </div>
         </div>
-        <div class="flex-grow pl-1">
-          <p class="leading-relaxed text-base">
-            <%= t('marketing.landing_page.cta.roleplayers.body') %>
-          </p>
-          <%= link_to roleplayers_landing_path, class: 'mt-3 text-notebook-blue inline-flex items-center' do %>
-            <%= t('marketing.landing_page.cta.roleplayers.button') %>
-            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
-              <path d="M5 12h14M12 5l7 7-7 7"></path>
-            </svg>
-          <% end %>
-        </div>
       </div>
     </div>
   </div>
 </section>
 
-<section class="text-green-900 min-h-screen">
-  <div class="h-full bg-right-bottom bg-cover flex shadow-lg p-8 py-32" style="background-image: url(<%= image_path 'https://images.unsplash.com/photo-1520299607509-dcd935f9a839?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1631&q=80' %>);">
-    
-    <section class="text-gray-600 body-font">
-      <div class="flex flex-wrap w-full mb-20 bg-white px-6 py-12 rounded-lg">
-        <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
-          <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
-            Create rich, fictional worlds with your<br class="hidden sm:block" />
-            smart notebook &mdash; for free
-          </h1>
+<section class="min-h-screen relative overflow-hidden border-t border-notebook-blue">
+  <div class="absolute inset-0 bg-right-bottom bg-cover shadow-lg" style="background-image: url(<%= image_path 'https://images.unsplash.com/photo-1520299607509-dcd935f9a839?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1631&q=80' %>);"></div>
+  
+  <div class="relative py-32">
+    <div class="container mx-auto px-5">
+      <div class="w-full mb-20 bg-white px-8 py-12 rounded-lg shadow-xl">
+        <div class="flex flex-wrap">
+          <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
+            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
+              Create rich, fictional worlds with your<br class="hidden xl:block" />
+              smart notebook &mdash; for free
+            </h1>
+          </div>
+          <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">
+            With a free account, you'll have access to the core building blocks of fictional worlds, personalized writing prompts set
+            in your universe, unlimited document storage, access to a thriving <%= link_to 'community', thredded_path %> of other worldbuilders, and more.
+          </p>
         </div>
-        <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">
-          With a free account, you'll have access to the core building blocks of fictional worlds, personalized writing prompts set 
-          in your universe, unlimited document storage, access to a thriving <%= link_to 'community', thredded_path %> of other worldbuilders, and more.
-        </p>
       </div>
+
       <div class="flex flex-wrap -m-4">
         <div class="xl:w-1/4 md:w-1/2 p-4">
           <%= render partial: 'cards/intros/content_type_intro', locals: { content_type: Universe } %>
@@ -104,146 +108,143 @@
           <%= render partial: 'cards/intros/content_type_intro', locals: { content_type: Item } %>
         </div>
       </div>
-    </section>
-
-
-    <div class="flex flex-wrap -mx-2 my-8">
-      <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 w-12 h-12">
-            <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">face</i>
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-16">
+        <div>
+          <div class="h-full bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
+            <div class="text-center w-12 h-12 flex-shrink-0">
+              <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">face</i>
+            </div>
+            <div class="flex-grow">
+              <h2 class="text-gray-900 title-font font-medium mb-2">
+                <%= t('marketing.landing_page.benefits.characters.title') %>
+              </h2>
+              <p class="text-gray-500">
+                <%= t('marketing.landing_page.benefits.characters.text') %>
+              </p>
+            </div>
           </div>
-          <div class="flex-grow w-1/2">
-            <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.characters.title') %>
-            </h2>
-            <p class="text-gray-500">
-              <%= t('marketing.landing_page.benefits.characters.text') %>
-            </p>
+        </div>
+        <div>
+          <div class="h-full bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
+            <div class="text-center w-12 h-12 flex-shrink-0">
+              <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">bubble_chart</i>
+            </div>
+            <div class="flex-grow">
+              <h2 class="text-gray-900 title-font font-medium mb-2">
+                <%= t('marketing.landing_page.benefits.creativity.title') %>
+              </h2>
+              <p class="text-gray-500">
+                <%= t('marketing.landing_page.benefits.creativity.text') %>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="h-full bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
+            <div class="text-center w-12 h-12 flex-shrink-0">
+              <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%"><%= Document.icon %></i>
+            </div>
+            <div class="flex-grow">
+              <h2 class="text-gray-900 title-font font-medium mb-2">
+                <%= t('marketing.landing_page.benefits.speed.title') %>
+              </h2>
+              <p class="text-gray-500">
+                <%= t('marketing.landing_page.benefits.speed.text') %>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="h-full bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
+            <div class="text-center w-12 h-12 flex-shrink-0">
+              <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">list</i>
+            </div>
+            <div class="flex-grow">
+              <h2 class="text-gray-900 title-font font-medium mb-2">
+                <%= t('marketing.landing_page.benefits.organization.title') %>
+              </h2>
+              <p class="text-gray-500">
+                <%= t('marketing.landing_page.benefits.organization.text') %>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="h-full bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
+            <div class="text-center w-12 h-12 flex-shrink-0">
+              <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">search</i>
+            </div>
+            <div class="flex-grow">
+              <h2 class="text-gray-900 title-font font-medium mb-2">
+                <%= t('marketing.landing_page.benefits.search.title') %>
+              </h2>
+              <p class="text-gray-500">
+                <%= t('marketing.landing_page.benefits.search.text') %>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="h-full bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
+            <div class="text-center w-12 h-12 flex-shrink-0">
+              <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">settings_ethernet</i>
+            </div>
+            <div class="flex-grow">
+              <h2 class="text-gray-900 title-font font-medium mb-2">
+                <%= t('marketing.landing_page.benefits.growth.title') %>
+              </h2>
+              <p class="text-gray-500">
+                <%= t('marketing.landing_page.benefits.growth.text') %>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="h-full bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
+            <div class="text-center w-12 h-12 flex-shrink-0">
+              <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">group</i>
+            </div>
+            <div class="flex-grow">
+              <h2 class="text-gray-900 title-font font-medium mb-2">
+                <%= t('marketing.landing_page.benefits.sharing.title') %>
+              </h2>
+              <p class="text-gray-500">
+                <%= t('marketing.landing_page.benefits.sharing.text') %>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="h-full bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
+            <div class="text-center w-12 h-12 flex-shrink-0">
+              <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">cloud</i>
+            </div>
+            <div class="flex-grow">
+              <h2 class="text-gray-900 title-font font-medium mb-2">
+                <%= t('marketing.landing_page.benefits.backups.title') %>
+              </h2>
+              <p class="text-gray-500">
+                <%= t('marketing.landing_page.benefits.backups.text') %>
+              </p>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="h-full bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg">
+            <div class="text-center w-12 h-12 flex-shrink-0">
+              <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">security</i>
+            </div>
+            <div class="flex-grow">
+              <h2 class="text-gray-900 title-font font-medium mb-2">
+                <%= t('marketing.landing_page.benefits.ads.title') %>
+              </h2>
+              <p class="text-gray-500">
+                <%= t('marketing.landing_page.benefits.ads.text') %>
+              </p>
+            </div>
           </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 w-12 h-12">
-            <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">bubble_chart</i>
-          </div>
-          <div class="flex-grow w-1/2">
-            <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.creativity.title') %>
-            </h2>
-            <p class="text-gray-500">
-              <%= 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 w-12 h-12">
-            <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%"><%= Document.icon %></i>
-          </div>
-          <div class="flex-grow w-1/2">
-            <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.speed.title') %>
-            </h2>
-            <p class="text-gray-500">
-              <%= 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 w-12 h-12">
-            <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">list</i>
-          </div>
-          <div class="flex-grow w-1/2">
-            <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.organization.title') %>
-            </h2>
-            <p class="text-gray-500">
-              <%= 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 w-12 h-12">
-            <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">search</i>
-          </div>
-          <div class="flex-grow w-1/2">
-            <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.search.title') %>
-            </h2>
-            <p class="text-gray-500">
-              <%= 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 w-12 h-12">
-            <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">settings_ethernet</i>
-          </div>
-          <div class="flex-grow w-1/2">
-            <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.growth.title') %>
-            </h2>
-            <p class="text-gray-500">
-              <%= 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 w-12 h-12">
-            <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">group</i>
-          </div>
-          <div class="flex-grow w-1/2">
-            <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.sharing.title') %>
-            </h2>
-            <p class="text-gray-500">
-              <%= 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 w-12 h-12">
-            <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">cloud</i>
-          </div>
-          <div class="flex-grow w-1/2">
-            <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.backups.title') %>
-            </h2>
-            <p class="text-gray-500">
-              <%= 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 w-12 h-12">
-            <i class="material-icons mr-4 text-5xl text-notebook-blue" style="font-size: 240%">security</i>
-          </div>
-          <div class="flex-grow w-1/2">
-            <h2 class="text-gray-900 title-font font-medium mb-2">
-              <%= t('marketing.landing_page.benefits.ads.title') %>
-            </h2>
-            <p class="text-gray-500">
-              <%= t('marketing.landing_page.benefits.ads.text') %>
-            </p>
-          </div>
-        </div>
-      </div>
-
     </div>
   </div>
 </section>
@@ -354,106 +355,101 @@
 </section>
 
 <section class="text-green-900 min-h-screen">
-  <div class="min-h-screen bg-right-bottom bg-cover flex shadow-lg p-8 py-32" style="background-image: url(<%= image_path 'https://images.unsplash.com/photo-1594312915251-48db9280c8f1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80' %>);">
-
-    <section class="text-gray-600 body-font">
-      <div class="flex flex-wrap w-full mb-20 bg-white px-6 py-12 rounded-lg">
-        <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
-          <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
-            Take your world to the
-            <span class="text-notebook-blue">next level</span>
-            <br class="hidden sm:block" />
-            with powerful Premium features
-          </h1>
+  <div class="min-h-screen bg-right-bottom bg-cover shadow-lg py-32" style="background-image: url(<%= image_path 'https://images.unsplash.com/photo-1594312915251-48db9280c8f1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80' %>);">
+    <div class="container mx-auto px-5">
+      <div class="w-full mb-20 bg-white px-6 py-12 rounded-lg">
+        <div class="flex flex-wrap">
+          <div class="lg:w-1/2 w-full mb-6 lg:mb-0">
+            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-2 text-gray-900">
+              Take your world to the
+              <span class="text-notebook-blue">next level</span>
+              <br class="hidden sm:block" />
+              with powerful Premium features
+            </h1>
+          </div>
+          <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">
+            More advanced features are available with a Premium subscription.
+            Upgrade or downgrade your account any time to be ready when inspiration strikes.
+          </p>
         </div>
-        <p class="lg:w-1/2 w-full leading-relaxed text-gray-500">
-          More advanced features are available with a Premium subscription.
-          Upgrade or downgrade your account any time to be ready when inspiration strikes.
-        </p>
       </div>
-    </section>
 
-    <section class="text-gray-600 body-font w-full">
-      <div class="px-5 py-24 mx-auto">
-        <div class="flex flex-wrap -m-4">
-          <div class="p-2 lg:w-1/4 md:w-full">
-            <div class="bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg py-6">
-              <div class="text-center mr-4 mt-2">
-                <i class="material-icons text-5xl text-yellow-500" style="font-size: 240%">public</i>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div>
+          <div class="bg-white h-full flex flex-row p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300">
+              <div class="w-16 h-16 inline-flex items-center justify-center rounded-full bg-yellow-100 text-yellow-600 flex-shrink-0 mr-6">
+                <i class="material-icons text-4xl">public</i>
               </div>
-              <div class="flex-grow w-1/2">
-                <h2 class="text-gray-900 title-font font-medium my-2 text-2xl">
+              <div class="flex-grow">
+                <h2 class="text-gray-900 font-bold mb-3 text-xl">
                   <%= t('marketing.landing_page.benefits.locations.title') %>
                 </h2>
                 <p class="text-gray-500 my-2">
                   <%= t('marketing.landing_page.benefits.locations.text') %>
                 </p>
-                <p class="text-gray-500 my-2 text-notebook-blue">
-                  See the full list below.
-                </p>
+                <a href="#premium-content-types" class="text-notebook-blue font-medium hover:text-blue-600 transition-colors inline-block" onclick="event.preventDefault(); document.getElementById('premium-content-types').scrollIntoView({ behavior: 'smooth' });">
+                  See the full list below ↓
+                </a>
               </div>
             </div>
-          </div>
+        </div>
 
-          <div class="p-2 lg:w-1/4 md:w-full">
-            <div class="bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg py-6">
-              <div class="text-center mr-4 mt-2">
-                <i class="material-icons text-5xl text-yellow-500" style="font-size: 240%"><%= Timeline.icon %></i>
+        <div>
+          <div class="bg-white h-full flex flex-row p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300">
+              <div class="w-16 h-16 inline-flex items-center justify-center rounded-full bg-yellow-100 text-yellow-600 flex-shrink-0 mr-6">
+                <i class="material-icons text-4xl"><%= Timeline.icon %></i>
               </div>
-              <div class="flex-grow w-1/2">
-                <h2 class="text-gray-900 title-font font-medium my-2 text-2xl">
+              <div class="flex-grow">
+                <h2 class="text-gray-900 font-bold mb-3 text-xl">
                   Build timelines
                 </h2>
-                <p class="text-gray-500 my-2">
+                <p class="text-gray-500">
                   Link events together with the characters, locations, and anything else that's relevant &mdash; then see your world's stories
                   at a glance.
                 </p>
               </div>
             </div>
-          </div>
+        </div>
 
-          <div class="p-2 lg:w-1/4 md:w-full">
-            <div class="bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg py-6">
-              <div class="text-center mr-4 mt-2">
-                <i class="material-icons text-5xl text-yellow-500" style="font-size: 240%"><%= Document.icon %></i>
+        <div>
+          <div class="bg-white h-full flex flex-row p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300">
+              <div class="w-16 h-16 inline-flex items-center justify-center rounded-full bg-yellow-100 text-yellow-600 flex-shrink-0 mr-6">
+                <i class="material-icons text-4xl"><%= Document.icon %></i>
               </div>
-              <div class="flex-grow w-1/2">
-                <h2 class="text-gray-900 title-font font-medium my-2 text-2xl">
+              <div class="flex-grow">
+                <h2 class="text-gray-900 font-bold mb-3 text-xl">
                   Document analysis
                 </h2>
-                <p class="text-gray-500 my-2">
-                  Our state-of-the-art artificial intelligence can analyze your documents for feedback on style, structure,
+                <p class="text-gray-500">
+                  Our artificial intelligence can analyze your documents for feedback on style, structure,
                   readability, flow, and more.
                 </p>
               </div>
             </div>
-          </div>
+        </div>
 
-          <div class="p-2 lg:w-1/4 md:w-full">
-            <div class="bg-white flex flex-nowrap flex-row border-gray-200 border p-4 rounded-lg py-6">
-              <div class="text-center mr-4 mt-2">
-                <i class="material-icons text-5xl text-yellow-500" style="font-size: 240%"><%= PageCollection.icon %></i>
+        <div>
+          <div class="bg-white h-full flex flex-row p-8 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300">
+              <div class="w-16 h-16 inline-flex items-center justify-center rounded-full bg-yellow-100 text-yellow-600 flex-shrink-0 mr-6">
+                <i class="material-icons text-4xl"><%= PageCollection.icon %></i>
               </div>
-              <div class="flex-grow w-1/2">
-                <h2 class="text-gray-900 title-font font-medium my-2 text-2xl">
+              <div class="flex-grow">
+                <h2 class="text-gray-900 font-bold mb-3 text-xl">
                   Start collections
                 </h2>
-                <p class="text-gray-500 my-2">
+                <p class="text-gray-500">
                   Collections are a new way to organize your worldbuilding &mdash; or open them up for content submissions from
                   other users!
                 </p>
               </div>
             </div>
-          </div>
-
         </div>
       </div>
-    </section>
-
+    </div>
   </div>
 </section>
 
-<section class="text-gray-600 body-font">
+<section class="text-gray-600 body-font" id="premium-content-types">
   <div class="container px-5 pb-24 pt-8 mx-auto">
     <div class="flex flex-wrap -m-4">
 
@@ -470,11 +466,11 @@
         </div>
       <% end %>
 
-      <div class="lg:w-1/4 md:w-1/2 p-4 w-full">
+      <div class="lg:w-1/2 md:w-full p-4 w-full">
         <div class="block relative h-48 rounded overflow-hidden border border-blue-500 bg-blue-700 text-white p-6">
           <div class="font-bold mb-2">Want even more page types?</div>
-          Of course, we recognize these pages aren't one-size-fits-all for every world. Every template is fully customizable and
-          new pages are added as users request them.
+          Of course, we recognize these pages aren't one-size-fits-all for every world! Every template is fully customizable and
+          new page types are added as soon as they're ready.
         </div>
       </div>