Footer styling

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>

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>

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 %>

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>