Skip to content

Commit b0c1a73

Browse files
author
Lewis Youl
committed
feat: add feature section to unauthenticated root
1 parent f641ca4 commit b0c1a73

File tree

2 files changed

+120
-19
lines changed

2 files changed

+120
-19
lines changed

‎app/views/shared/icons/_share.html.erb‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<svg class="<%= classes %>" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
2+
<path d="M15 8a3 3 0 10-2.977-2.63l-4.94 2.47a3 3 0 100 4.319l4.94 2.47a3 3 0 10.895-1.789l-4.94-2.47a3.027 3.027 0 000-.74l4.94-2.47C13.456 7.68 14.19 8 15 8z"></path>
3+
</svg>

‎app/views/unauthenticated/home/index.html.erb‎

Lines changed: 117 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,8 @@
3636
</div>
3737
<div class="md:absolute md:flex md:items-center md:justify-end md:inset-y-0 md:right-0">
3838
<span class="inline-flex rounded-md shadow">
39-
<%= button_to 'Log In', new_user_session_path, class: 'button--cta-tertiary mr-2', method: :get %>
40-
<%= button_to 'Sign Up', new_user_registration_path, class: 'button--cta-primary', method: :get %>
39+
<%= button_to 'LOG IN', new_user_session_path, class: 'button--cta-tertiary mr-2', method: :get %>
40+
<%= button_to 'SIGN UP', new_user_registration_path, class: 'button--cta-primary', method: :get %>
4141
</span>
4242
</div>
4343
</nav>
@@ -78,25 +78,123 @@
7878
</div>
7979
</div>
8080
<div class="bg-cyan">
81-
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8">
82-
<h2 class="text-center text-gray-400 text-sm font-semibold uppercase tracking-wide"></h2>
83-
<div class="mt-8 grid grid-cols-2 gap-8 md:grid-cols-6 lg:grid-cols-5">
84-
<div class="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
85-
<img class="h-12" src="">
86-
</div>
87-
<div class="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
88-
<img class="h-12" src="">
89-
</div>
90-
<div class="col-span-1 flex justify-center md:col-span-2 lg:col-span-1">
91-
<img class="h-12" src="">
92-
</div>
93-
<div class="col-span-1 flex justify-center md:col-span-3 lg:col-span-1">
94-
<img class="h-12" src="">
95-
</div>
96-
<div class="col-span-2 flex justify-center md:col-span-3 lg:col-span-1">
97-
<img class="h-12" src="">
81+
<div class="max-w-7xl mx-auto py-4 px-4 sm:py-16 sm:px-6 lg:px-8">
82+
83+
</div>
84+
</div>
85+
86+
<!-- This example requires Tailwind CSS v2.0+ -->
87+
<div class="relative bg-white py-16 sm:py-24 lg:py-32">
88+
<div class="mx-auto max-w-md px-4 text-center sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl">
89+
<h2 class="text-base font-semibold tracking-wider text-cyan uppercase">All your code in one place</h2>
90+
<p class="mt-2 text-3xl font-medium text-gray-900 tracking-tight sm:text-4xl">
91+
Everything you need to keep track of your code
92+
</p>
93+
<p class="mt-5 max-w-prose mx-auto text-xl text-gray-500">
94+
Ever been in a situation where you can't find a code snippet you really need? We help you keep track of your code so this never happens again.
95+
</p>
96+
<div class="mt-12">
97+
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
98+
<div class="pt-6">
99+
<div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
100+
<div class="-mt-6">
101+
<div>
102+
<span class="inline-flex items-center justify-center p-3 bg-cyan rounded-md shadow-lg">
103+
<%= render partial: 'shared/icons/lock_closed', locals: { height: 6, width: 6, color: 'text-white' } %>
104+
</span>
105+
</div>
106+
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Private Snippets</h3>
107+
<p class="mt-5 text-base text-gray-500">
108+
Mark snippets that you don't want to share in your feed as private and it will only ever be visible to you.
109+
</p>
110+
</div>
111+
</div>
112+
</div>
113+
114+
<div class="pt-6">
115+
<div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
116+
<div class="-mt-6">
117+
<div>
118+
<span class="inline-flex items-center justify-center p-3 bg-cyan rounded-md shadow-lg">
119+
<!-- Heroicon name: outline/cloud-upload -->
120+
<svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
121+
</span>
122+
</div>
123+
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">100+ Languages</h3>
124+
<p class="mt-5 text-base text-gray-500">
125+
Real time syntax highlighting support for over 100 of your favourite languages, with more on the way.
126+
</p>
127+
</div>
128+
</div>
129+
</div>
130+
131+
<div class="pt-6">
132+
<div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
133+
<div class="-mt-6">
134+
<div>
135+
<span class="inline-flex items-center justify-center p-3 bg-cyan rounded-md shadow-lg">
136+
<%= render partial: 'shared/icons/folder', locals: { height: 6, width: 6, color: 'text-white' } %>
137+
</span>
138+
</div>
139+
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Folders</h3>
140+
<p class="mt-5 text-base text-gray-500">
141+
Organise your snippets, as well as those others have created into your own folder collections for easy reference later.
142+
</p>
143+
</div>
144+
</div>
145+
</div>
146+
147+
<div class="pt-6">
148+
<div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
149+
<div class="-mt-6">
150+
<div>
151+
<span class="inline-flex items-center justify-center p-3 bg-cyan rounded-md shadow-lg">
152+
<%= render partial: 'shared/icons/share', locals: { classes: 'w-6 h-6 text-white' } %>
153+
</span>
154+
</div>
155+
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Share Your Code</h3>
156+
<p class="mt-5 text-base text-gray-500">
157+
Download your code or share it as a beautiful, customisable image directly to twitter at the click of a button.
158+
</p>
159+
</div>
160+
</div>
161+
</div>
162+
163+
<div class="pt-6">
164+
<div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
165+
<div class="-mt-6">
166+
<div>
167+
<span class="inline-flex items-center justify-center p-3 bg-cyan rounded-md shadow-lg">
168+
<%= render partial: 'shared/icons/search', locals: { height: 6, width: 6, color: 'text-white' } %>
169+
</span>
170+
</div>
171+
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Powerful Search</h3>
172+
<p class="mt-5 text-base text-gray-500">
173+
Easily find snippets you've created by searching all of your snippets and folders using our powerful filters.
174+
</p>
175+
</div>
176+
</div>
177+
</div>
178+
179+
<div class="pt-6">
180+
<div class="flow-root bg-gray-50 rounded-lg px-6 pb-8">
181+
<div class="-mt-6">
182+
<div>
183+
<span class="inline-flex items-center justify-center p-3 bg-cyan rounded-md shadow-lg">
184+
<%= render partial: 'shared/icons/connect', locals: { height: 6, width: 6, color: 'text-white' } %>
185+
</span>
186+
</div>
187+
<h3 class="mt-8 text-lg font-medium text-gray-900 tracking-tight">Connect</h3>
188+
<p class="mt-5 text-base text-gray-500">
189+
Follow other people in your community to build up a network of developers that share, collaborate and learn together.
190+
</p>
191+
</div>
192+
</div>
193+
</div>
98194
</div>
99195
</div>
100196
</div>
101197
</div>
198+
199+
102200
</div>

0 commit comments

Comments
 (0)