irelia 0.0.1 → 0.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fca4b000ecd80c6029d5fcb6490a6032e9d9a454bc2a55569c208d803da2cf24
-  data.tar.gz: 36706bbd38af5a8f5735448eabdba2d38a1f791b65c46e9388d0c7e8ba968cc3
+  metadata.gz: faa3b8e64532f3d512880ee2c611566d88e27606125ea7068bc491f40573fa91
+  data.tar.gz: 5208c6e42837909a6858bff761b7f1add4ace0110f3010e190a57fabada5b6c7
 SHA512:
-  metadata.gz: 31f718e64ba4b0f760c4a29bc2f38a73b7169052b8a728ddde5c152e73ecffc91572360b20b3d93e72524fa40d0f8f0bf26298e8e1193d823a7d90440775d5bb
-  data.tar.gz: 1f694a67c08bc294f734d5b5e13988a21d44c09a3913c6dd68f7ac009b5b85d20a9730276df89f1b0af3ecd14303d591696975cc95cba074d5a186dcbb417127
+  metadata.gz: e9e3f2cf4e9e68599369078e72ce71d7f515dc3ba660d81dadffac22b74c59a9ca0e47e42aead93e8ad24e134e3d6fe7a39926e6082a6f9a5a7a694fca7fae5d
+  data.tar.gz: ff3d6cb4b9770cd64469073ad6b9d62578fdfb36c20d9ee60f0ba346f00254c8f1222d87417ffed9faf8812a82ff48dd5d4f62ad72ad7fe1c167bb626fa98c59

data/Rakefile

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require "bundler/setup"
 
 APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)

data/app/assets/config/irelia_manifest.js

@@ -0,0 +1,2 @@
+//= link_tree ../../javascript .js
+//= link_tree ../../assets/images .svg

data/app/frontend/components/application_view_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class ApplicationViewComponent < ViewComponentContrib::Base
+  extend Dry::Initializer
+end

data/app/frontend/components/application_view_component_preview.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class ApplicationViewComponentPreview < ViewComponentContrib::Preview::Base
+  self.abstract_class = true
+end

data/app/frontend/components/navbar/button/component.html.erb

@@ -0,0 +1,8 @@
+<%= button_to target, class: "inline-flex items-center gap-x-1 py-3 px-4 text-sm leading-3 justify-center rounded transition bg-white hover:bg-neutral-50 dark:bg-dark-900 dark:hover:bg-dark-800 dark:text-neutral-200 whitespace-nowrap cursor-pointer #{custom_class}", method: method do %>
+  <% if icon.present? %>
+    <i class="<%= icon %> w-3 h-3"></i>
+  <% end %>
+  <% if text.present? %>
+    <span class="ml-1"><%= text %></span>
+  <% end %>
+<% end %>

data/app/frontend/components/navbar/button/component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Navbar
+  module Button
+    class Component < ApplicationViewComponent
+      option :target # required
+      option :method, default: proc { :get }
+      option :icon, optional: true # FontAwesome icon class
+      option :text, optional: true
+      option :custom_class, optional: true
+    end
+  end
+end

data/app/frontend/components/navbar/button/preview.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Navbar
+  module Button
+    class Preview < ApplicationViewComponentPreview
+      # You can specify the container class for the default template
+      # self.container_class = "w-1/2 border border-gray-300"
+
+      def default; end
+    end
+  end
+end

data/app/frontend/components/navbar/container/component.html.erb

@@ -0,0 +1,5 @@
+<section class="flex sticky left-0 right-0 top-0 z-50 h-[60px] relative bg-white dark:bg-dark-900 gap-x-8 z-40 items-center border-b dark:border-b-dark-700">
+  <div class="container max-w-[1200px] mx-auto px-8 flex items-center h-[60px] gap-x-8">
+    <%= content %>
+  </div>
+</section>

data/app/frontend/components/navbar/container/component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Navbar
+  module Container
+    class Component < ApplicationViewComponent
+    end
+  end
+end

data/app/frontend/components/navbar/container/preview.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Navbar
+  module Container
+    class Preview < ApplicationViewComponentPreview
+      # You can specify the container class for the default template
+      # self.container_class = "w-1/2 border border-gray-300"
+
+      def default; end
+    end
+  end
+end

data/app/frontend/components/navbar/dark_mode_switcher/component.html.erb

@@ -0,0 +1,4 @@
+<button data-controller="dark-mode-switcher" data-action="click->dark-mode-switcher#toggle" class="inline-flex items-center gap-x-1 py-3 px-4 text-sm leading-3 justify-center rounded transition bg-white hover:bg-neutral-50 dark:bg-dark-900 dark:hover:bg-dark-800 dark:text-neutral-200 whitespace-nowrap cursor-pointer">
+  <i class="fa fa-lightbulb hidden dark:inline"></i>
+  <i class="fa fa-moon inline dark:hidden"></i>
+</button>

data/app/frontend/components/navbar/dark_mode_switcher/component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Navbar
+  module DarkModeSwitcher
+    class Component < ApplicationViewComponent
+    end
+  end
+end

data/app/frontend/components/navbar/dark_mode_switcher/preview.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Navbar
+  module DarkModeSwitcher
+    class Preview < ApplicationViewComponentPreview
+      # You can specify the container class for the default template
+      # self.container_class = "w-1/2 border border-gray-300"
+
+      def default; end
+    end
+  end
+end

data/app/frontend/components/navbar/menu_items/component.html.erb

@@ -0,0 +1,3 @@
+<nav class="flex items-center gap-x-8">
+  <%= content %>
+</nav>

data/app/frontend/components/navbar/menu_items/component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Navbar
+  module MenuItems
+    class Component < ApplicationViewComponent
+    end
+  end
+end

data/app/frontend/components/navbar/menu_items/preview.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Navbar
+  module MenuItems
+    class Preview < ApplicationViewComponentPreview
+      # You can specify the container class for the default template
+      # self.container_class = "w-1/2 border border-gray-300"
+
+      def default; end
+    end
+  end
+end

data/app/frontend/components/navbar/navlink/component.html.erb

@@ -0,0 +1,8 @@
+<%= link_to target, class: "flex items-center px-2 text-sm h-[60px] border-y-2 border-transparent #{active ? "font-bold text-primary-700" : "hover:text-black dark:hover:text-white" } #{custom_class}" do %>
+  <% if icon.present? %>
+    <i class="<%= icon %> w-4 h-4 <%= "mr-3" if text %>"></i>
+  <% end %>
+  <% if text.present? %>
+    <span><%= text %></span>
+  <% end %>
+<% end %>

data/app/frontend/components/navbar/navlink/component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Navbar
+  module Navlink
+    class Component < ApplicationViewComponent
+      option :target # required
+      option :active, optional: true, default: false
+      option :text, optional: true
+      option :custom_class, optional: true
+      option :icon, optional: true
+    end
+  end
+end

data/app/frontend/components/navbar/navlink/preview.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Navbar
+  module Navlink
+    class Preview < ApplicationViewComponentPreview
+      # You can specify the container class for the default template
+      # self.container_class = "w-1/2 border border-gray-300"
+
+      def default; end
+    end
+  end
+end

data/app/frontend/components/navbar/right_section/component.html.erb

@@ -0,0 +1,3 @@
+<div class="ml-auto flex items-center gap-x-4">
+  <%= content %>
+</div>

data/app/frontend/components/navbar/right_section/component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Navbar
+  module RightSection
+    class Component < ApplicationViewComponent
+    end
+  end
+end

data/app/frontend/components/navbar/right_section/preview.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Navbar
+  module RightSection
+    class Preview < ApplicationViewComponentPreview
+      # You can specify the container class for the default template
+      # self.container_class = "w-1/2 border border-gray-300"
+
+      def default; end
+    end
+  end
+end

data/app/frontend/components/navbar/select_account/component.html.erb

@@ -0,0 +1,36 @@
+<div data-controller="dropdown" class="relative block text-sm min-w-[20px]">
+  <button class="flex w-full items-center text-left gap-x-4 cursor-pointer" data-action="dropdown#toggle click@window->dropdown#hide">
+    <img class="w-9 h-9 rounded" src="https://picsum.photos/50">
+    <div class="flex flex-col pr-4 gap-y-0.5">
+      <strong class="text-primary-600"><%= current_account.name %></strong>
+      <% if current_account.personal_account? %>
+        <span class="flex text-neutral-500 dark:text-neutral-300 items-center gap-x-1 text-xs">
+          <i class="fas fa-user"></i>
+          Personal account
+        </span>
+      <% else %>
+        <span class="flex text-neutral-500 dark:text-neutral-300 items-center gap-x-1 text-xs">
+          <i class="fas fa-users"></i>
+          Team account
+        </span>
+      <% end %>
+    </div>
+    <i class="fa-solid fa-caret-down mr-2 ml-auto"></i>
+  </button>
+  <div
+    class="hidden w-full transition z-50 text-xs bg-white dark:bg-zinc-800 divide-y absolute mt-4 right-0 border dark:border-zinc-700 dark:divide-zinc-700 dark:text-neutral-200 border-t-0 rounded-b whitespace-nowrap"
+    data-dropdown-target="menu"
+    data-transition-enter-from="opacity-0 scale-95"
+    data-transition-enter-to="opacity-100 scale-100"
+    data-transition-leave-from="opacity-100 scale-100"
+    data-transition-leave-to="opacity-0 scale-95">
+
+    <% User.find(current_user.id).accounts.each do |account| %>
+      <%= button_to switch_account_path(account), class: 'flex w-full p-3 px-4 gap-x-4 items-center hover:bg-neutral-100 hover:text-neutral-900 transition', method: :patch do %>
+        <i class="fas w-4 text-center <%= account.personal_account? ? "fa-user" : "fa-users" %>"></i> <%= account.name %>
+      <% end %>
+    <% end %>
+
+    <%= link_to 'Create a new team account' , new_account_path, class: 'flex w-full p-3 px-4 gap-x-4 items-center hover:bg-neutral-100 hover:text-neutral-900 transition', method: :delete %>
+  </div>
+</div>

data/app/frontend/components/navbar/select_account/component.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+class Navbar::SelectAccount::Component < ApplicationViewComponent
+  option :current_user, required: true
+  option :current_account, required: true
+end

data/app/frontend/components/navbar/select_account/preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Navbar::SelectAccount::Preview < ApplicationViewComponentPreview
+  # You can specify the container class for the default template
+  # self.container_class = "w-1/2 border border-gray-300"
+
+  def default
+  end
+end

data/app/frontend/components/navbar/separator/component.html.erb

@@ -0,0 +1 @@
+<div class="w-[1px] h-10 bg-neutral-100 dark:bg-dark-700"></div>

data/app/frontend/components/navbar/separator/component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Navbar
+  module Separator
+    class Component < ApplicationViewComponent; end
+  end
+end

data/app/frontend/components/navbar/separator/preview.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Navbar
+  module Separator
+    class Preview < ApplicationViewComponentPreview
+      # You can specify the container class for the default template
+      # self.container_class = "w-1/2 border border-gray-300"
+
+      def default; end
+    end
+  end
+end

data/app/frontend/components/page/breadcrumbs/component.html.erb

@@ -0,0 +1,16 @@
+<% if breadcrumbs.any? %>
+<nav aria-label="breadcrumb" class="bg-white dark:bg-dark-900 border-b dark:border-b-dark-700 text-sm">
+  <div class="container max-w-[1200px] font-semibold mx-auto p-8 py-4">
+    <ol class="flex gap-x-4 text-neutral-500 dark:text-neutral-400">
+      <% breadcrumbs.each do |crumb| %>
+        <% if crumb.current? %>
+          <li class="font-bold text-black dark:text-white"><%= crumb.name %></li>
+        <% else %>
+          <li><%= link_to crumb.name, crumb.url, (crumb.current? ? {"aria-current" => "page"} : {}) %></li>
+          <li><span class="text-neutral-300 dark:text-neutral-600"><i class="fa-solid fa-caret-right"></i></span></li>
+        <% end %>
+      <% end %>
+    </ol>
+  </div>
+</nav>
+<% end %>

data/app/frontend/components/page/breadcrumbs/component.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+class Page::Breadcrumbs::Component < ApplicationViewComponent
+  # with_collection_parameter :breadcrumbs
+  option :breadcrumbs
+end

data/app/frontend/components/page/breadcrumbs/preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Page::Breadcrumbs::Preview < ApplicationViewComponentPreview
+  # You can specify the container class for the default template
+  # self.container_class = "w-1/2 border border-gray-300"
+
+  def default
+  end
+end

data/app/frontend/components/page/container/component.html.erb

@@ -0,0 +1,3 @@
+<div class="container max-w-[1200px] mx-auto p-8">
+  <%= content %>
+</div>

data/app/frontend/components/page/container/component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class Page::Container::Component < ApplicationViewComponent
+end

data/app/frontend/components/page/container/preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Page::Container::Preview < ApplicationViewComponentPreview
+  # You can specify the container class for the default template
+  # self.container_class = "w-1/2 border border-gray-300"
+
+  def default
+  end
+end

data/app/frontend/components/page/header/component.html.erb

@@ -0,0 +1,12 @@
+<header class="flex mb-8 border-b-2 dark:border-b-dark-700 pb-6">
+  <div class="flex flex-1 flex-col gap-y-1">
+    <h1 class="text-lg font-bold uppercase"><%= title %></h1>
+    <% if subtitle.present? %>
+      <p class="text-neutral-400"><%= subtitle %></p>
+    <% end %>
+  </div>
+
+  <div class="flex items-center justify-center gap-x-3">
+    <%= content %>
+  </div>
+</header>

data/app/frontend/components/page/header/component.rb

@@ -0,0 +1,6 @@
+# frozen_string_literal: true
+
+class Page::Header::Component < ApplicationViewComponent
+  option :title
+  option :subtitle, optional: true
+end

data/app/frontend/components/page/header/preview.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Page::Header::Preview < ApplicationViewComponentPreview
+  # You can specify the container class for the default template
+  # self.container_class = "w-1/2 border border-gray-300"
+
+  def default
+  end
+end

data/app/helpers/navbar_helper.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module NavbarHelper
+  def navbar(&block)
+    render(Navbar::Container::Component.new, &block)
+  end
+
+  def navbar_items(&block)
+    render(Navbar::MenuItems::Component.new, &block)
+  end
+
+  def navbar_right(&block)
+    render(Navbar::RightSection::Component.new, &block)
+  end
+
+  def navigation_item(text, target, options = {})
+    active = options[:active] || request.path == target
+    icon = options[:icon] || nil
+
+    render(Navbar::Navlink::Component.new(target:, text:, active:, icon:))
+  end
+
+  def navbar_button(text, target, options = {})
+    active = options[:active] || request.path == target
+    icon = options[:icon] || nil
+    method = options[:method] || :get
+    custom_class = options[:class] || nil
+
+    render(Navbar::Button::Component.new(target:, text:, icon:, method:, custom_class:))
+  end
+
+  def navbar_separator
+    render(Navbar::Separator::Component.new)
+  end
+end

data/app/helpers/page_helper.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module PageHelper
+  def container(&block)
+    render(Page::Container::Component.new, &block)
+  end
+
+  def page_header(**arguments)
+    render(Page::Header::Component.new(**arguments))
+  end
+
+  def breadcrumbs
+    render(Page::Breadcrumbs::Component.new(breadcrumbs: breadcrumb_trail))
+  end
+end

data/app/javascript/controllers/dark_mode_switcher_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  initialize() {
+    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+      document.documentElement.classList.add('dark')
+    } else {
+      document.documentElement.classList.remove('dark')
+    }
+  }
+
+  toggle() {
+    if (localStorage.theme === 'dark') {
+      localStorage.theme = 'light'
+    } else {
+      localStorage.theme = 'dark'
+    }
+    this.initialize()
+  }
+}

data/app/javascript/controllers/dropdown_controller.js

@@ -0,0 +1,3 @@
+import Dropdown from 'stimulus-dropdown'
+
+export default class extends Dropdown { }

data/app/views/devise/registrations/new.html.erb

@@ -0,0 +1,21 @@
+<% title "Create a new account" %>
+<% content_for :header do %>
+  <h1 class="font-bold font-headings text-neutral-600 dark:text-neutral-100 text-2xl">Create your <strong class="text-primary-600">Irelia</strong> account</h1>
+  <p class="text-neutral-400">Enter your email address and a secure password.</p>
+<% end %>
+
+<main class="flex flex-col gap-4 w-full max-w-2xl">
+  <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
+    <%= f.input :email, placeholder: "Enter a valid email address", required: true, autofocus: true, input_html: { autocomplete: "email" }%>
+    
+    <div class="flex justify-between items-start gap-x-4">
+      <%= f.input :password, placeholder: "Create a secure password", required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length), input_html: { autocomplete: "new-password" } %>
+      <%= f.input :password_confirmation, placeholder: "Confirm your password", required: true, input_html: { autocomplete: "new-password" } %>
+    </div>
+
+    <div class="mt-4 flex justify-between items-center">
+      <%= f.button :submit, "Create your account" %>
+      <p class="dark:text-neutral-200">Already have an account? <%= link_to "Sign in!", new_user_session_path, class: "font-bold transition text-primary-600" %>
+    </div>
+  <% end %>
+</main>

data/app/views/devise/sessions/new.html.erb

@@ -0,0 +1,18 @@
+<% title "Sign in to your account" %>
+<% content_for :header do %>
+  <h1 class="font-bold font-headings text-neutral-600 dark:text-neutral-100 text-2xl">Sign in to <strong class="text-primary-600">Irelia</strong></h1>
+  <p class="text-neutral-400 dark:text-neutral-200">Sign in with your email address and password or select any of the other available options below.</p>
+<% end %>
+
+<main class="flex flex-col gap-4 w-full max-w-xl">
+  <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
+    <%= f.input :email, placeholder: "Enter your email", required: true, autofocus: true, input_html: { autocomplete: "email" } %>
+    <%= f.input :password, placeholder: "Enter your password", required: true, input_html: { autocomplete: "current-password" } %>
+    <%= f.input :remember_me, as: :boolean, wrapper: :inline_checkbox if devise_mapping.rememberable? %>
+
+    <div class="flex justify-between items-center">
+      <%= f.button :submit, "Sign in" %>
+      <p class="dark:text-neutral-200">Don't have an account? <%= link_to "Sign up!", new_user_registration_path, class: "font-bold text-primary-600 transition" %></p>
+    </div>
+  <% end %>
+</main>

data/app/views/layouts/application.html.erb

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <%= render "shared/head" %>
+  </head>
+  <body class="antialiased bg-neutral-50 text-neutral-700 dark:bg-dark-800 dark:text-neutral-100">
+    <%= render "shared/navbar" %>
+    <%= breadcrumbs %>
+    <%= yield %>
+  </body>
+</html>

data/app/views/layouts/devise.html.erb

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <%= render "shared/head" %>
+  </head>
+  <body class="h-screen relative flex justify-center items-center antialiased bg-neutral-50 text-neutral-700 dark:bg-dark-800 dark:text-neutral-100">
+    <div class="fixed top-4 right-4">
+      <%= render(Navbar::DarkModeSwitcher::Component.new) %>
+    </div>
+    
+    <% flash.each do |key, value| %>
+      <%= content_tag :div, value, class: "flash #{key} fixed top-0 left-0 right-0 bg-white py-2 px-4 inline-block text-center w-full shadow" %>
+    <% end %>
+
+    <section class="flex flex-col gap-8 items-center justify-center w-full">
+      <header class="flex flex-col items-center gap-y-2 text-center max-w-lg">
+        <%= yield :header %>
+      </header>
+
+      <%= yield %>
+    </section>
+  </body>
+</html>

data/app/views/layouts/mailer.html.erb

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <style>
+      /* Email styles need to be inline */
+    </style>
+  </head>
+
+  <body>
+    <%= yield %>
+  </body>
+</html>

data/app/views/layouts/mailer.text.erb

@@ -0,0 +1 @@
+<%= yield %>

data/app/views/layouts/teamable.html.erb

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <%= render "shared/head" %>
+  </head>
+  <body class="h-screen relative bg-neutral-50 text-neutral-700 dark:bg-dark-800 dark:text-neutral-100">
+    <%= render "shared/navbar" %>
+
+    <% flash.each do |key, value| %>
+      <%= content_tag :div, value, class: "flash #{key} fixed top-0 left-0 right-0 bg-white py-2 px-4 inline-block text-center w-full shadow" %>
+    <% end %>
+
+    <div class="h-screen -top-[60px] relative flex justify-center items-center antialiased">
+      <section class="flex flex-1 flex-col">
+        <div class="flex-1 flex items-center justify-center px-8">
+          <section class="flex flex-col gap-8 items-center justify-center w-full max-w-xl">
+            <header class="flex flex-col items-center">
+              <div class="flex flex-col gap-y-2 text-center">
+                <%= yield :header %>
+              </div>
+            </header>
+
+            <main class="flex flex-col gap-4 w-full">
+              <%= yield %>
+            </main>
+          </section>
+        </div>
+      </section>
+    </div>
+  </body>
+</html>

data/app/views/shared/_head.html.erb

@@ -0,0 +1,26 @@
+<%= display_meta_tags site: Irelia.config.application_name, reverse: true, separator: "—" %>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+
+<script>
+  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+    document.documentElement.classList.add('dark')
+  }
+</script>
+
+<%= csrf_meta_tags %>
+<%= csp_meta_tag %>
+<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
+<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+<%= javascript_importmap_tags %>
+
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="true" />
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&amp;display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" integrity="sha512-fD9DI5bZwQxOi7MhYWnnNPlvXdp/2Pj3XSTRrFs5FQa4mizyGLnJcN6tuvUS6LbmgN1ut+XGSABKvjN0H6Aoow==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+<style>
+  .valid .input-box { border: 1px green solid; }
+  .invalid .input-box { border: 1px red solid; }
+</style>