mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
Fix landing page layout issues and improve styling
- Fix premium features cards to span full container width - Change premium features icons from stacked to inline layout - Add smooth scrolling link to premium content types section - Polish writers/roleplayers cards with better spacing and shadows - Improve hero section with responsive min-height and better text contrast - Clean up benefits grid with consistent card heights - Remove nested section tags that were breaking layouts - Add hover effects and transitions for better interactivity 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andrew Brown
parent
b2de008b75
commit
1fb076be67
@ -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 — 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 — 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 — 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 — 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>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user