From 57b0e058e77f1d98056fced4a737832565d61bd8 Mon Sep 17 00:00:00 2001
From: Josh Pigford <josh@joshpigford.com>
Date: Mon, 29 Apr 2024 13:44:54 -0500
Subject: [PATCH] Footer styling

---
 app/assets/images/icon-logo.svg        | 32 ++++++++++++++
 app/views/layouts/application.html.erb | 60 ++++++++++++++++++++++++--
 app/views/pages/index.html.erb         |  2 +-
 app/views/signups/_form.html.erb       |  4 +-
 app/views/signups/create.html.erb      |  2 +-
 5 files changed, 93 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/images/icon-logo.svg

diff --git a/app/assets/images/icon-logo.svg b/app/assets/images/icon-logo.svg
new file mode 100644
index 00000000..e0b0f89f
--- /dev/null
+++ b/app/assets/images/icon-logo.svg
@@ -0,0 +1,32 @@
+<svg width="41" height="28" viewBox="0 0 41 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_di_33_11914)">
+<path d="M8.42229 20.4637H3.22841C1.99769 20.4637 1 21.5143 1 22.8102C1 24.1061 1.99769 25.1567 3.22841 25.1567H8.42229C9.653 25.1567 10.6507 24.1061 10.6507 22.8102C10.6507 21.5143 9.653 20.4637 8.42229 20.4637Z" fill="#949494"/>
+<path d="M31.6524 25.1555H36.8463C38.077 25.1555 39.0747 24.105 39.0747 22.8091C39.0747 21.5132 38.077 20.4626 36.8463 20.4626H31.6524C30.4217 20.4626 29.424 21.5132 29.424 22.8091C29.424 24.105 30.4217 25.1555 31.6524 25.1555Z" fill="#949494"/>
+<path d="M22.1383 20.4478H17.9103C16.6796 20.4478 15.6819 21.4983 15.6819 22.7942C15.6819 24.0902 16.6796 25.1407 17.9103 25.1407H22.1383C23.369 25.1407 24.3667 24.0902 24.3667 22.7942C24.3667 21.4983 23.369 20.4478 22.1383 20.4478Z" fill="#949494"/>
+<path d="M29.6343 18.4033H34.6358C35.8666 18.4033 36.8643 17.3528 36.8643 16.0568C36.8643 14.7609 35.8666 13.7104 34.6358 13.7104H29.6343C28.4036 13.7104 27.4059 14.7609 27.4059 16.0568C27.4059 17.3528 28.4036 18.4033 29.6343 18.4033Z" fill="#949494"/>
+<path d="M10.3561 13.7099H5.35463C4.12391 13.7099 3.12622 14.7605 3.12622 16.0564C3.12622 17.3523 4.12391 18.4029 5.35463 18.4029H10.3561C11.5869 18.4029 12.5845 17.3523 12.5845 16.0564C12.5845 14.7605 11.5869 13.7099 10.3561 13.7099Z" fill="#949494"/>
+<path d="M23.7442 13.695H16.3017C15.0709 13.695 14.0732 14.7456 14.0732 16.0415C14.0732 17.3374 15.0709 18.388 16.3017 18.388H23.7442C24.9749 18.388 25.9726 17.3374 25.9726 16.0415C25.9726 14.7456 24.9749 13.695 23.7442 13.695Z" fill="#949494"/>
+<path d="M17.0643 6.75378H7.56752C6.3368 6.75378 5.33911 7.80434 5.33911 9.10026C5.33911 10.3962 6.3368 11.4467 7.56752 11.4467H17.0643C18.295 11.4467 19.2927 10.3962 19.2927 9.10026C19.2927 7.80434 18.295 6.75378 17.0643 6.75378Z" fill="#949494"/>
+<path d="M23.528 11.4456L32.4183 11.4456C33.649 11.4456 34.6467 10.3951 34.6467 9.09914C34.6467 7.80322 33.649 6.75267 32.4183 6.75267L23.528 6.75267C22.2973 6.75267 21.2996 7.80322 21.2996 9.09914C21.2996 10.3951 22.2973 11.4456 23.528 11.4456Z" fill="#949494"/>
+<path d="M30.2804 0H25.2677C24.037 0 23.0393 1.05055 23.0393 2.34647C23.0393 3.6424 24.037 4.69295 25.2677 4.69295H30.2804C31.5111 4.69295 32.5088 3.6424 32.5088 2.34647C32.5088 1.05055 31.5111 0 30.2804 0Z" fill="#949494"/>
+<path d="M14.711 0H9.69838C8.46766 0 7.46997 1.05055 7.46997 2.34647C7.46997 3.6424 8.46766 4.69295 9.69838 4.69295H14.711C15.9417 4.69295 16.9394 3.6424 16.9394 2.34647C16.9394 1.05055 15.9417 0 14.711 0Z" fill="#949494"/>
+</g>
+<defs>
+<filter id="filter0_di_33_11914" x="0" y="0" width="40.0747" height="27.1567" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="0.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.8 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_33_11914"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_33_11914" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_33_11914"/>
+</filter>
+</defs>
+</svg>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 5c614b04..b88d12ac 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -41,10 +41,64 @@
     <main class="max-w-5xl mx-auto my-10">
       <%= yield %>
     </main>
-    <footer>
-      <div class="max-w-96">
-        <%= render_signup_form %>
+    <footer class="max-w-5xl mx-auto my-8">
+      <div class="flex justify-between gap-x-4">
+        <div class="flex flex-col gap-y-3 max-w-96">
+          <div><%= link_to image_tag("icon-logo.svg", alt: "Maybe Logo", class: "w-12 inline"), root_path %></div>
+          <p class="text-sm text-neutral-500">Join the waitlist to get notified when a hosted version of the app is available.</p>
+          <%= render_signup_form %>
+        </div>
+        <div class="flex text-sm leading-6 gap-x-10 text-neutral-500">
+          <div>
+            <h4 class="mb-4 text-xs font-medium uppercase">General</h4>
+            <ul>
+              <li>
+                <%= link_to "Articles", "#" %>
+              </li>
+              <li>
+                <%= link_to "Glossary", "#" %>
+              </li>
+              <li>
+                <%= link_to "Contribute", "https://github.com/maybe-finance/maybe" %>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h4 class="mb-4 text-xs font-medium uppercase">More</h4>
+            <ul>
+              <li>
+                <%= link_to "Join Community", "https://link.maybe.co/discord" %>
+              </li>
+              <li>
+                <%= link_to "Self-Host", "https://github.com/maybe-finance/maybe" %>
+              </li>
+              <li>
+                <%= link_to "Privacy Policy", "#" %>
+              </li>
+              <li>
+                <%= link_to "Terms of Service", "#" %>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <h4 class="mb-4 text-xs font-medium uppercase">Social</h4>
+            <ul>
+              <li>
+                <%= link_to "Discord", "https://link.maybe.co/discord" %>
+              </li>
+              <li>
+                <%= link_to "Twitter", "https://twitter.com/maybe" %>
+              </li>
+              <li>
+                <%= link_to "LinkedIn", "https://linkedin.com/company/maybe-finance" %>
+              </li>
+            </ul>
+          </div>
+        </div>
       </div>
+      <div class="flex justify-between mt-12 text-sm text-neutral-500">
+        <p class="">© <%= Time.now.year %> Maybe Finance, Inc.</p>
+        <p class="">Made with ❤️ on planet Earth.</p>
     </footer>
   </body>
 </html>
diff --git a/app/views/pages/index.html.erb b/app/views/pages/index.html.erb
index 0c9a5e99..b16ff450 100644
--- a/app/views/pages/index.html.erb
+++ b/app/views/pages/index.html.erb
@@ -13,6 +13,6 @@
     <%= render_signup_form %>
   </div>
   <div class="p-3 mx-auto my-10 bg-black/[0.02] rounded-3xl border border-black/1 shadow-[0px_0px_22.07px_0px_rgba(0,0,0,0.03)]">
-    <%= image_tag "screenshot.png", alt: "Screenshot", class: "w-full border border-black/1 rounded-2xl shadow-[0_7.36px_7.36px_-3.68px_rgba(11,11,11,0.03)] shadow-[0_18.39px_22.07px_-3.68px_rgba(11,11,11,0.08)]" %>
+    <%= image_tag "screenshot.png", alt: "Maybe Screenshot", class: "w-full border border-black/1 rounded-2xl shadow-[0_7.36px_7.36px_-3.68px_rgba(11,11,11,0.03)] shadow-[0_18.39px_22.07px_-3.68px_rgba(11,11,11,0.08)]" %>
   </div>
 </div>
diff --git a/app/views/signups/_form.html.erb b/app/views/signups/_form.html.erb
index 1bbc70bd..8b72fd46 100644
--- a/app/views/signups/_form.html.erb
+++ b/app/views/signups/_form.html.erb
@@ -1,8 +1,8 @@
 <%= form_with( url: signups_path ) do |f| %>
-  <div class="flex flex-row border rounded-xl bg-white p-1 w-full mb-4 shadow-xs">
+  <div class="flex flex-row w-full p-1 mb-4 bg-white border shadow-xs rounded-xl">
     <%= f.email_field :email, placeholder: "Enter your email address", class: "flex-1 border-0 px-2 focus:ring-0 text-sm" %>
     <%= f.submit "Join waitlist", class: "py-2 px-3 font-medium text-white bg-neutral-900 rounded-lg hover:bg-neutral-800 border border-neutral-900 text-sm" %>
   </div>
 
-  <p class="text-xs text-[#737373]">This waitlist is for a hosted version of the app. Don't want to wait? <a href="https://github.com/maybe-finance/maybe" class="text-[#141414] underline">Self-host</a> an early version of Maybe.</p>
+  <p class="text-xs text-[#737373]">Don't want to wait? <a href="https://github.com/maybe-finance/maybe" class="text-[#141414] underline">Self-host</a> an early version of Maybe.</p>
 <% end %>
diff --git a/app/views/signups/create.html.erb b/app/views/signups/create.html.erb
index 9bc3dfb5..5059fe98 100644
--- a/app/views/signups/create.html.erb
+++ b/app/views/signups/create.html.erb
@@ -1,3 +1,3 @@
 <turbo-frame id="signup_form">
-  <p>Success! You're on the waitlist.</p>
+  <p class="text-sm text-emerald-500">Success! You're on the waitlist.</p>
 </turbo-frame>