mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
signup cta with devise on landing page
This commit is contained in:
drusepth
parent
f9555256fd
commit
9346366edc
@ -14,6 +14,10 @@ class MainController < ApplicationController
|
||||
|
||||
def index
|
||||
redirect_to(:dashboard) if user_signed_in?
|
||||
|
||||
@resource ||= User.new
|
||||
@resource_name = :user
|
||||
@devise_mapping ||= Devise.mappings[:user]
|
||||
end
|
||||
|
||||
def about_notebook
|
||||
|
||||
@ -2,4 +2,16 @@ module DeviseHelper
|
||||
def devise_error_messages!
|
||||
resource.errors.full_messages.map { |msg| content_tag(:li, msg + '.') }.join.html_safe
|
||||
end
|
||||
|
||||
def resource_name
|
||||
:user
|
||||
end
|
||||
|
||||
def resource
|
||||
@resource ||= User.new
|
||||
end
|
||||
|
||||
def devise_mapping
|
||||
@devise_mapping ||= Devise.mappings[:user]
|
||||
end
|
||||
end
|
||||
@ -135,14 +135,13 @@
|
||||
|
||||
|
||||
<div class="flex flex-wrap -mx-2 my-8">
|
||||
<% 9.times do %>
|
||||
<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">face</i>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 title-font font-medium">
|
||||
<h2 class="text-gray-900 title-font font-medium mb-2">
|
||||
<%= t('marketing.landing_page.benefits.characters.title') %>
|
||||
</h2>
|
||||
<p class="text-gray-500">
|
||||
@ -151,12 +150,171 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
|
||||
<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>
|
||||
</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 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>
|
||||
</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 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>
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<h2 class="text-gray-900 title-font font-medium mb-2">
|
||||
Unlimited document storage
|
||||
</h2>
|
||||
<p class="text-gray-500">
|
||||
Write quickly with reference sheets at the ready. You can view details about
|
||||
your world without leaving the editor!
|
||||
</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>
|
||||
</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 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>
|
||||
</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>
|
||||
</section>
|
||||
|
||||
<section class="text-gray-600 body-font">
|
||||
<div class="container px-5 py-24 mx-auto flex flex-wrap items-center">
|
||||
<div class="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
|
||||
<h1 class="title-font font-medium text-3xl text-gray-900">
|
||||
It takes a just few seconds to sign up and start materializing the wonderful worlds in your head.
|
||||
</h1>
|
||||
<p class="leading-relaxed mt-4">
|
||||
Once you've signed up, you can immediately start creating universes and filling them with characters,
|
||||
locations, and items. The worlds you create are private, owned by you, and always available on any
|
||||
device, any time you need them.
|
||||
</p>
|
||||
<p class="mt-16">
|
||||
trusted by
|
||||
</p>
|
||||
</div>
|
||||
<div class="lg:w-2/6 md:w-1/2 bg-white border-blue-500 border shadow-lg rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
|
||||
<h2 class="text-gray-900 text-lg font-medium title-font mb-5">Sign up for Notebook.ai</h2>
|
||||
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
|
||||
|
||||
<div class="relative mb-4">
|
||||
<%= f.label 'Your name', class: 'leading-7 text-sm text-gray-600' %>
|
||||
<%= f.text_field :name, class: 'w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out' %>
|
||||
</div>
|
||||
|
||||
<div class="relative mb-4">
|
||||
<%= f.label :email, class: 'leading-7 text-sm text-gray-600' %>
|
||||
<em class="text-sm">(This is the email you will log in with)</em>
|
||||
<%= f.email_field :email, class: 'w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out' %>
|
||||
</div>
|
||||
|
||||
<div class="relative mb-4">
|
||||
<%= f.label :password, class: 'leading-7 text-sm text-gray-600' %>
|
||||
<% if @minimum_password_length %>
|
||||
<em>(<%= @minimum_password_length %> characters minimum)</em>
|
||||
<% end %><br />
|
||||
<%= f.password_field :password, autocomplete: "off", class: 'w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out' %>
|
||||
</div>
|
||||
|
||||
<div class="relative mb-4">
|
||||
<%= f.label :password_confirmation, class: 'leading-7 text-sm text-gray-600' %><br />
|
||||
<%= f.password_field :password_confirmation, autocomplete: "off", class: 'w-full bg-white rounded border border-gray-300 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-200 text-base outline-none text-gray-700 py-1 px-3 leading-8 transition-colors duration-200 ease-in-out' %>
|
||||
</div>
|
||||
|
||||
<div class="relative mb-4">
|
||||
<%= f.label :email_updates do %>
|
||||
<%= f.check_box :email_updates %>
|
||||
<span>
|
||||
We're always working to improve Notebook.ai. Please leave this box checked if you'd like to receive occasional updates about
|
||||
what's new.
|
||||
</span>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<%
|
||||
if params.key?('referral') || session.key?('referral')
|
||||
referral_code = params['referral'] || session['referral']
|
||||
referrer = ReferralCode.where(code: referral_code).first
|
||||
if referrer.present?
|
||||
%>
|
||||
<div class="row">
|
||||
<div class="col s12 m6">
|
||||
<div class="field">
|
||||
<%= f.label :referral_code %><br />
|
||||
<%= f.text_field :referral_code, value: referral_code, readonly: true %>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m6">
|
||||
<%= f.label 'The following user will receive credit for referring you' %><br />
|
||||
<%= f.text_field :referral_user, value: referrer.user.name.split('@').first, disabled: "disabled" %>
|
||||
</div>
|
||||
</div>
|
||||
<%
|
||||
end
|
||||
end
|
||||
%>
|
||||
|
||||
|
||||
<%= f.submit "Sign up", class: 'w-full text-white bg-blue-500 border-0 py-2 px-8 focus:outline-none hover:bg-blue-600 rounded text-lg cursor-pointer' %>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
@ -165,15 +323,6 @@
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col s12 m4">
|
||||
<div class="icon-block center">
|
||||
<div class="h2-size orange-text"><i class="material-icons">face</i></div>
|
||||
<h3 class="h6-size"><%= t('marketing.landing_page.benefits.characters.title') %></h3>
|
||||
<p class="light">
|
||||
<%= t('marketing.landing_page.benefits.characters.text') %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m4">
|
||||
<div class="icon-block center">
|
||||
@ -185,47 +334,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m4">
|
||||
<div class="icon-block center">
|
||||
<div class="h2-size orange-text"><i class="material-icons">list</i></div>
|
||||
<h3 class="h6-size"><%= t('marketing.landing_page.benefits.organization.title') %></h3>
|
||||
<p class="light">
|
||||
<%= t('marketing.landing_page.benefits.organization.text') %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col s12 m4">
|
||||
<div class="icon-block center">
|
||||
<div class="h2-size orange-text"><i class="material-icons">group</i></div>
|
||||
<h3 class="h6-size"><%= t('marketing.landing_page.benefits.sharing.title') %></h3>
|
||||
<p class="light">
|
||||
<%= t('marketing.landing_page.benefits.sharing.text') %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m4">
|
||||
<div class="icon-block center">
|
||||
<div class="h2-size orange-text"><i class="material-icons">cloud</i></div>
|
||||
<h3 class="h6-size"><%= t('marketing.landing_page.benefits.backups.title') %></h3>
|
||||
<p class="light">
|
||||
<%= t('marketing.landing_page.benefits.backups.text') %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m4">
|
||||
<div class="icon-block center">
|
||||
<div class="h2-size orange-text"><i class="material-icons">security</i></div>
|
||||
<h3 class="h6-size"><%= t('marketing.landing_page.benefits.ads.title') %></h3>
|
||||
<p class="light">
|
||||
<%= t('marketing.landing_page.benefits.ads.text') %>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user