Create reusable newsletter signup component

app/controllers/signups_controller.rb

@@ -0,0 +1,7 @@
+class SignupsController < ApplicationController
+  def new
+  end
+
+  def create
+  end
+end

app/helpers/signups_helper.rb

@@ -0,0 +1,7 @@
+module SignupsHelper
+  def render_signup_form
+    turbo_frame_tag "signup_form" do
+      render "signups/form"
+    end
+  end
+end

app/views/layouts/application.html.erb

@@ -42,7 +42,9 @@
       <%= yield %>
     </main>
     <footer>
-
+      <div class="max-w-96">
+        <%= render_signup_form %>
+      </div>
     </footer>
   </body>
 </html>

app/views/pages/index.html.erb

@@ -1,5 +1,5 @@
 <div class="text-center">
-  <div class="max-w-xl pt-8 mx-auto text-3xl">
+  <div class="max-w-xl pt-8 mx-auto text-3xl mb-4">
     Maybe <%= image_tag("icon-maybe-color.svg", alt: "Maybe Logo", class: "inline") %> is a <em class="relative"><span class="border-b-2 border-dotted border-neutral-400">fully</span><sup>*</sup> <span class="absolute w-64 text-xs text-left left-16 -top-7 -rotate-3 text-neutral-400"><sup>*</sup>your finances are secure</span></em> open-source
     <div class="inline-flex border rounded-md shadow-[0_1px_8px_0_rgba(0,0,0,0.04)] border-neutral-200">
       <%= link_to "https://github.com/maybe-finance/maybe", class: "px-2 py-1.5 border-r shadow-[inset_0_-2px_5px_0_rgba(0,0,0,0.07)] bg-neutral-100 rounded-l-md border-neutral-200 flex items-center justify-center" do %>
@@ -9,4 +9,7 @@
     </div>
     OS for your personal finances <%= image_tag("icon-chart.svg", alt: "Chart", class: "inline") %> built by a small team <%= image_tag("icon-team.png", alt: "Maybe Team", class: "inline h-9") %> alongside an incredible community <%= image_tag("icon-discord.svg", alt: "Discord", class: "inline") %>
   </div>
+  <div class="max-w-96 mx-auto">
+    <%= render_signup_form %>
+  </div>
 </div>

app/views/signups/_form.html.erb

@@ -0,0 +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">
+    <%= 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>
+<% end %>

app/views/signups/create.html.erb

@@ -0,0 +1,3 @@
+<turbo-frame id="signup_form">
+  <p>Success! You're on the waitlist.</p>
+</turbo-frame>

app/views/signups/new.html.erb

@@ -0,0 +1,3 @@
+<turbo-frame id="signup_form">
+  <%= render "form" %>
+</turbo-frame>

config/routes.rb

@@ -1,5 +1,6 @@
 Rails.application.routes.draw do
   # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
+  resources :signups, only: [ :new, :create ]
 
   # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500.
   # Can be used by load balancers and uptime monitors to verify that the app is live.

config/tailwind.config.js

@@ -8,6 +8,29 @@ module.exports = {
     './app/views/**/*.{erb,haml,html,slim}'
   ],
   theme: {
+    boxShadow: {
+      none: "0 0 #0000",
+      inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+      xs: "0px 1px 2px 0px rgba(11, 11, 11, 0.05)",
+      sm: "0px 1px 2px 0px rgba(11, 11, 11, 0.06), 0px 1px 3px 0px rgba(11, 11, 11, 0.10)",
+      md: "0px 2px 4px -2px rgba(11, 11, 11, 0.06), 0px 4px 8px -2px rgba(11, 11, 11, 0.10)",
+      lg: "0px 4px 6px -2px rgba(11, 11, 11, 0.03), 0px 12px 16px -4px rgba(11, 11, 11, 0.08)",
+      xl: "0px 8px 8px -4px rgba(11, 11, 11, 0.03), 0px 20px 24px -4px rgba(11, 11, 11, 0.08)",
+      "2xl": "0px 24px 48px -12px rgba(11, 11, 11, 0.12)",
+      "3xl": "0px 32px 64px -12px rgba(11, 11, 11, 0.14)",
+    },
+    borderRadius: {
+      none: "0",
+      full: "9999px",
+      xs: "2px",
+      sm: "4px",
+      md: "8px",
+      DEFAULT: "8px",
+      lg: "10px",
+      xl: "12px",
+      "2xl": "16px",
+      "3xl": "24px",
+    },
     extend: {
       fontFamily: {
         sans: ['Inter var', ...defaultTheme.fontFamily.sans],

test/controllers/signups_controller_test.rb

@@ -0,0 +1,7 @@
+require "test_helper"
+
+class SignupsControllerTest < ActionDispatch::IntegrationTest
+  # test "the truth" do
+  #   assert true
+  # end
+end