extras - stevendevs/joinjonb-rails-app GitHub Wiki

<% flash.each do |type, message| %>
  <% alert_type = case type
       when "notice" then "success"
       when "alert" then "error"
       when "warning" then "warning"
       when "info" then "info"
       else "info"
     end %>
  <%= render "shared/alert", type: alert_type, message: message %>
<% end %>


<!-- Success Alert -->
<div class="flex items-center p-4 mb-4 bg-green-100 border-l-4 border-green-500 rounded-standard dark:bg-green-900/30 dark:border-green-500">
  <svg class="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
  </svg>
  <div>
    <span class="font-medium text-green-700 dark:text-green-400">Success!</span>
    <p class="text-sm text-green-600 dark:text-green-300">Your account has been created successfully.</p>
  </div>
  <button class="ml-auto text-green-500 hover:text-green-700">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</div>

<!-- Error Alert -->
<div class="flex items-center p-4 mb-4 bg-red-100 border-l-4 border-red-500 rounded-standard dark:bg-red-900/30 dark:border-red-500 animate-move-down">
  <svg class="w-5 h-5 text-red-500 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
  </svg>
  <div>
    <span class="font-medium text-red-700 dark:text-red-400">Error!</span>
    <p class="text-sm text-red-600 dark:text-red-300">There was a problem with your submission.</p>
  </div>
  <button class="ml-auto text-red-500 hover:text-red-700">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</div>

<!-- Warning Alert (using amarillo-mostaza) -->
<div class="flex items-center p-4 mb-4 bg-amarillo-mostaza/20 border-l-4 border-amarillo-mostaza rounded-standard dark:bg-amarillo-mostaza/10 dark:border-amarillo-mostaza">
  <svg class="w-5 h-5 text-amber-600 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
  </svg>
  <div>
    <span class="font-medium text-amber-700 dark:text-amber-400">Warning!</span>
    <p class="text-sm text-amber-600 dark:text-amber-300">Your password will expire in 3 days.</p>
  </div>
  <button class="ml-auto text-amber-500 hover:text-amber-700">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</div>

<!-- Info Alert (using blue-sky) -->
<div class="flex items-center p-4 mb-4 bg-blue-sky-DEFAULT/10 border-l-4 border-blue-sky-DEFAULT rounded-standard dark:bg-blue-sky-DEFAULT/20 dark:border-blue-sky-light">
  <svg class="w-5 h-5 text-blue-sky-DEFAULT mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zm-1 9a1 1 0 01-1-1v-4a1 1 0 112 0v4a1 1 0 01-1 1z" clip-rule="evenodd"></path>
  </svg>
  <div>
    <span class="font-medium text-blue-sky-DEFAULT dark:text-blue-sky-light">Information!</span>
    <p class="text-sm text-blue-600 dark:text-blue-300">Your profile has been updated.</p>
  </div>
  <button class="ml-auto text-blue-sky-DEFAULT hover:text-blue-700">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</div>

<!-- Custom Pink Alert (using onlypink) -->
<div class="flex items-center p-4 mb-4 bg-onlypink/20 border-l-4 border-onlypink rounded-complete dark:bg-onlypink/10 dark:border-onlypink-dark shadow-md">
  <svg class="w-5 h-5 text-pink-600 mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
  </svg>
  <div>
    <span class="font-medium text-pink-700 dark:text-pink-400">Thank you!</span>
    <p class="text-sm text-pink-600 dark:text-pink-300">Your feedback has been received.</p>
  </div>
  <button class="ml-auto text-pink-500 hover:text-pink-700">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</div>

<!-- Floating Alert with Animation -->
<div class="fixed bottom-4 right-4 flex items-center p-4 bg-white dark:bg-primary-dark border-l-4 border-blue-sky-DEFAULT rounded-standard shadow-lg animate-move-down">
  <svg class="w-5 h-5 text-blue-sky-DEFAULT mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z"></path>
  </svg>
  <div>
    <span class="font-medium text-gray-800 dark:text-white">Notification</span>
    <p class="text-sm text-gray-600 dark:text-gray-300">You have a new message.</p>
  </div>
  <button class="ml-auto text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
    </svg>
  </button>
</div>



Potafolio


 <body class="min-h-screen p-6">
    <div class="grid grid-cols-1 lg:grid-cols-[400px_1fr] gap-8">
      <!-- Left Sidebar -->
      <div class="space-y-8">
        <!-- Profile Header -->
        <div class="flex items-center gap-4">
          <img src="/placeholder.svg" alt="Profile" width="60" height="60" class="rounded-full" />
          <div>
            <h1 class="text-2xl font-mono">TONY B.</h1>
            <p class="text-gray-400">PRODUCT DESIGNER</p>
          </div>
        </div>

        <!-- Bio -->
        <div class="space-y-6">
          <p class="text-gray-300 text-lg leading-relaxed">
            I specialize in crafting visually striking and user-friendly digital experiences. With a passion for blending
            aesthetics and functionality, I bring ideas to life, creating innovative solutions in the dynamic world of web
            design.
          </p>
          <button class="border border-white text-white rounded-full px-4 py-2 hover:bg-white hover:text-black transition">More about Me</button>
        </div>

        <!-- Social Links -->
        <div class="space-y-4">
          <div class="flex gap-4">
            <a href="#" class="p-2 hover:bg-gray-800 rounded-full">
              <img src="/twitter-icon.svg" alt="Twitter" class="w-5 h-5" />
            </a>
            <a href="#" class="p-2 hover:bg-gray-800 rounded-full">
              <img src="/linkedin-icon.svg" alt="LinkedIn" class="w-5 h-5" />
            </a>
            <a href="#" class="p-2 hover:bg-gray-800 rounded-full">
              <img src="/youtube-icon.svg" alt="YouTube" class="w-5 h-5" />
            </a>
          </div>
          <div class="text-gray-400 text-sm">
            <p>© by UIhub in Framer</p>
            <div class="flex gap-4">
              <a href="#" class="hover:text-white">Licensing</a>
              <a href="#" class="hover:text-white">404</a>
            </div>
          </div>
        </div>
      </div>

      <!-- Right Content -->
      <div class="space-y-8">
        <!-- Mobile Menu -->
        <div class="flex justify-end lg:hidden">
          <button class="p-2 hover:bg-gray-800 rounded-full">
            <svg class="w-6 h-6" fill="none" stroke="currentColor"><path d="M4 6h16M4 12h16M4 18h16"/></svg>
          </button>
        </div>

        <!-- Projects -->
        <section>
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-mono">My Projects</h2>
            <button class="hover:underline">→</button>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="relative aspect-square bg-gray-900 rounded-lg overflow-hidden">
              <img src="/placeholder.svg" alt="Project 1" class="object-cover w-full h-full" />
            </div>
            <div class="relative aspect-square bg-gray-900 rounded-lg overflow-hidden">
              <img src="/placeholder.svg" alt="Project 2" class="object-cover w-full h-full" />
            </div>
            <div class="relative aspect-square bg-gray-900 rounded-lg overflow-hidden">
              <img src="/placeholder.svg" alt="Project 3" class="object-cover w-full h-full" />
            </div>
          </div>
        </section>

        <!-- Stack -->
        <section class="bg-blue-600 rounded-xl p-6">
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-2xl font-mono">My Stack</h2>
            <button class="text-white hover:underline">→</button>
          </div>
          <div class="flex gap-4">
            <div class="w-12 h-12 bg-white rounded-xl"></div>
            <div class="w-12 h-12 bg-white rounded-xl"></div>
            <div class="w-12 h-12 bg-white rounded-xl"></div>
            <div class="w-12 h-12 bg-white rounded-xl"></div>
            <div class="w-12 h-12 bg-white rounded-xl"></div>
          </div>
        </section>

        <!-- Contact and Clients -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <!-- Contact -->
          <section class="relative overflow-hidden rounded-xl bg-gradient-to-br from-gray-900 to-gray-800 p-6">
            <h2 class="text-2xl font-mono mb-4">Contact</h2>
            <button class="absolute right-4 top-4 hover:underline">→</button>
          </section>

          <!-- Happy Clients -->
          <section class="bg-gray-900 rounded-xl p-6">
            <div class="flex items-center gap-2 mb-2">
              <!-- Star Icons -->
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921..."/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921..."/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921..."/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921..."/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921..."/></svg>
            </div>
            <h3 class="text-4xl font-bold mb-4">100%</h3>
            <p class="text-gray-400">Happy Clients</p>
            <div class="flex -space-x-2 mt-4">
              <img src="/placeholder.svg" alt="Client 1" class="w-10 h-10 rounded-full border-2 border-gray-900" />
              <img src="/placeholder.svg" alt="Client 2" class="w-10 h-10 rounded-full border-2 border-gray-900" />
              <img src="/placeholder.svg" alt="Client 3" class="w-10 h-10 rounded-full border-2 border-gray-900" />
            </div>
          </section>
        </div>
      </div>
    </div>
  </body>

Navbar







<nav data-controller="mobile-menu"  class="fixed top-0 w-full bg-joinjob-yellow flex flex-col sm:flex-row justify-between items-stretch h-auto sm:h-14 px-3 py-2 sm:py-0  z-10 shadow-lg ">
  <!-- Logo + Toggle -->
  <div class="flex justify-between items-center w-full sm:w-auto border-b sm:border-b-0 sm:border-r border-white/40 pb-2 sm:pb-0 sm:pr-3 mb-2 sm:mb-0">
    <%= link_to root_path, class: "text-xl sm:text-2xl font-black text-white/80 hover:text-white transition-colors" do %>
      <h1>JoinJob</h1>
    <% end %>

    <button data-mobile-menu-target="toggle" data-action="click->mobile-menu#toggleMenu" class="sm:hidden text-white/80 hover:text-white ">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>
  </div>

  <!-- Menu principal -->
  <div data-mobile-menu-target="menu" id="mobile-menu"
       class="hidden sm:flex flex-col sm:flex-row items-stretch space-y-3 sm:space-y-0 sm:space-x-4 w-full sm:w-auto">
    
    <!-- Search -->
    <% if current_user && current_user.has_role?(:admin) %>
      <div class="w-full sm:w-auto sm:flex sm:items-center">
        <%= search_form_for @ransack_courses, as: :courses_search, url: courses_path, class: "flex" do |f| %>
          <div class="flex w-full sm:w-auto">
            <%= f.search_field :title_cont, 
                placeholder: 'Find a course', 
                autocomplete: :off,
                class: "flex-1 sm:w-64 px-3 py-2 text-sm border border-white/30 rounded-l-lg bg-white/10 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-transparent" %>
            <%= f.submit 'Search', 
                class: "px-4 py-2 text-sm font-medium text-yellow-600 bg-white rounded-r-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white/50 transition-colors cursor-pointer" %>
          </div>
        <% end %>
      </div>
    <% end %>

    <!-- Dropdown -->
    <div class="sm:flex sm:items-center ">
      <% items = [
        ["JOINJOB", root_path],
        ["COURSES", courses_path],
        ["OPTIONS", edit_user_registration_path],
        ["USERS", users_path],
        ["MAP", explore_path],
        ["ACTIVITY", pages_activity_path]
      ].compact %>

      <%= select_tag :navigation,
          options_for_select(items, request.path),
          onchange: "Turbo.visit(this.value)",
          data: { turbo_frame: :main },
          class: "bg-yellow-500 text-white font-medium text-sm focus:outline-none focus:ring-2 focus:ring-white/50 rounded-full px-2 py-1 cursor-pointer shadow-md  sm:w-full  md:w-full " %>
    </div>

    <!-- User Actions -->
    <div class="sm:flex sm:items-center">
      <% if user_signed_in? %>
        <%= link_to 'Sign out',
            destroy_user_session_path,
            data: { turbo_method: :delete },
            class: "text-white bg-red-600 hover:bg-red-700 rounded-full font-medium text-sm px-4 sm:px-5 py-2 sm:py-2.5 text-center transition-colors shadow-md hover:shadow-lg" %>
      <% else %>
        <%= link_to 'Sign in',
            new_user_session_path,
            class: "text-yellow-600 bg-white hover:bg-gray-100 rounded-full font-medium text-sm px-4 sm:px-5 py-2 sm:py-2.5 text-center transition-colors shadow-md hover:shadow-lg" %>
      <% end %>
    </div>
  </div>
</nav>

import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label"

export function LoginForm({ className, ...props }: React.ComponentProps<"div">) { return ( <div className={cn("flex flex-col gap-6", className)} {...props}>

Welcome back

Login to your Acme Inc account

Email
Login
Or continue with
Login with Apple Login with Google Login with Meta
Don't have an account?{" "} Sign up
Image
By clicking continue, you agree to our Terms of Service and Privacy Policy.
) }
<%= link_to root_path, class: "text-xl sm:text-2xl font-black text-white/80 hover:text-white transition-colors" do %>

JoinJob

<% end %>

<% if current_user && current_user.has_role?(:admin) %>

<%= search_form_for @ransack_courses, as: :courses_search, url: courses_path, class: "flex" do |f| %>
<%= f.search_field :title_cont, placeholder: 'Find a course', autocomplete: :off, class: "flex-1 sm:w-64 px-3 py-2 text-sm border border-white/30 rounded-l-lg bg-white/10 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-transparent" %> <%= f.submit 'Search', class: "px-4 py-2 text-sm font-medium text-yellow-600 bg-white rounded-r-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white/50 transition-colors cursor-pointer" %>
<% end %>
<% end %>
<% items = [ ["JOINJOB", root_path], ["COURSES", courses_path], ["OPTIONS", edit_user_registration_path], ["USERS", users_path], ["MAP", explore_path], ["ACTIVITY", pages_activity_path], ["LESSONS", lessons_path] ].compact %>

<%= select_tag :navigation, options_for_select(items, request.path), onchange: "Turbo.visit(this.value)", data: { turbo_frame: :main }, class: "bg-yellow-500 min-w-40 sm:w-20 text-white font-medium text-sm focus:outline-none focus:ring-2 focus:ring-white/50 rounded-full px-2 py-1 cursor-pointer shadow-md sm:w-full md:w-full " %>

<% if user_signed_in? %> <%= link_to 'Sign out', destroy_user_session_path, data: { turbo_method: :delete }, class: "text-white bg-red-600 hover:bg-red-700 rounded-full font-medium text-sm px-4 sm:px-5 py-2 sm:py-2.5 text-center transition-colors shadow-md hover:shadow-lg" %> <% else %> <%= link_to 'Sign in', new_user_session_path, class: "text-yellow-600 bg-white hover:bg-gray-100 rounded-full font-medium text-sm px-4 sm:px-5 py-2 sm:py-2.5 text-center transition-colors shadow-md hover:shadow-lg" %> <% end %>









<%= link_to root_path, class: "text-xl sm:text-2xl font-black text-white/80 hover:text-white transition-colors" do %>

JoinJob

<% end %>

<% if current_user && current_user.has_role?(:admin) %>

<%= search_form_for @ransack_courses, as: :courses_search, url: courses_path, class: "flex" do |f| %>
<%= f.search_field :title_cont, placeholder: 'Find a course', autocomplete: :off, class: "flex-1 sm:w-64 px-3 py-2 text-sm border border-white/30 rounded-l-lg bg-white/10 text-white placeholder-white/70 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-transparent" %> <%= f.submit 'Search', class: "px-4 py-2 text-sm font-medium text-yellow-600 bg-white rounded-r-lg hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-white/50 transition-colors cursor-pointer" %>
<% end %>
<% end %>
<% items = [ ["JOINJOB", root_path], ["COURSES", courses_path], ["OPTIONS", edit_user_registration_path], ["USERS", users_path], ["MAP", explore_path], ["ACTIVITY", pages_activity_path], ["LESSONS", lessons_path] ].compact %>

<%= select_tag :navigation, options_for_select(items, request.path), onchange: "Turbo.visit(this.value)", data: { turbo_frame: :main }, class: "bg-yellow-500 min-w-40 sm:w-20 text-white font-medium text-sm focus:outline-none focus:ring-2 focus:ring-white/50 rounded-full px-2 py-1 cursor-pointer shadow-md sm:w-full md:w-full " %>

<% if user_signed_in? %> <%= link_to 'Sign out', destroy_user_session_path, data: { turbo_method: :delete }, class: "text-white bg-red-600 hover:bg-red-700 rounded-full font-medium text-sm px-4 sm:px-5 py-2 sm:py-2.5 text-center transition-colors shadow-md hover:shadow-lg" %> <% else %> <%= link_to 'Sign in', new_user_session_path, class: "text-yellow-600 bg-white hover:bg-gray-100 rounded-full font-medium text-sm px-4 sm:px-5 py-2 sm:py-2.5 text-center transition-colors shadow-md hover:shadow-lg" %> <% end %>
register 

Register now!

<%= render "shared/frame_tab" %>
  <div class="card-body">
    <%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: "w-full space-y-6" }) do |f| %>

      <!-- Email -->
      <div>
        <label for="user_email" class="block text-sm font-medium text-gray-900">Email</label>
        <%= f.input_field :email,
            required: true,
            autofocus: true,
            class: "mt-2 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600",
            placeholder: "Email",
            autocomplete: "email" %>
      </div>

      <!-- Password -->
      <div>
        <label for="user_password" class="block text-sm font-medium text-gray-900">Password</label>
        <%= f.input_field :password,
            required: true,
            class: "mt-2 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600",
            placeholder: "Password",
            autocomplete: "new-password" %>
        <% if @minimum_password_length %>
          <p class="mt-1 text-xs text-gray-500"><%= @minimum_password_length %> characters minimum</p>
        <% end %>
      </div>

      <!-- Confirm Password -->
      <div>
        <label for="user_password_confirmation" class="block text-sm font-medium text-gray-900">Confirm Password</label>
        <%= f.input_field :password_confirmation,
            required: true,
            class: "mt-2 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600",
            placeholder: "Confirm Password",
            autocomplete: "new-password" %>
      </div>

      <!-- Submit -->
      <div>
        <%= f.button :submit, "Sign up", class: "w-full inline-flex justify-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
      </div>

    <% end %>

    <div class="mt-4 text-center text-sm">
      <p class="text-gray-600">
        Already have an account?
        <%= link_to "Log in", new_session_path(resource_name), class: "text-indigo-600 hover:underline" %>
      </p>
    </div>

  </div>
</div>

session


Login now!

<%= render "shared/frame_tab" %>
  <div class="card-body">
  <%= simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: "w-full space-y-6" }) do |f| %>
    <!-- Email -->
    <div>
      <label for="user_email" class="block text-sm font-medium text-gray-900">Email</label>
      <%= f.input_field :email,
          required: false,
          autofocus: true,
          class: "mt-2 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600",
          placeholder: "Email",
          autocomplete: "email" %>
    </div>
  
    <!-- Password -->
    <div>
      <label for="user_password" class="block text-sm font-medium text-gray-900">Password</label>
      <%= f.input_field :password,
          required: false,
          class: "mt-2 block w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:border-indigo-600 focus:outline-none focus:ring-1 focus:ring-indigo-600",
          placeholder: "Password",
          autocomplete: "current-password" %>
    </div>
  
    <!-- Remember Me -->
    <% if devise_mapping.rememberable? %>
      <div class="flex items-center gap-x-2">
        <%= f.check_box :remember_me, id: "remember_me", class: "h-4 w-4 text-indigo-600 border-gray-300 rounded" %>
        <label for="remember_me" class="text-sm font-medium text-gray-700">Remember me</label>
      </div>
    <% end %>
  
    <!-- Forgot password -->
    <div class="text-right">
      <a href="<%= new_password_path(resource_name) %>" class="text-sm text-indigo-600 hover:underline">Forgot password?</a>
    </div>
  
    <!-- Submit -->
    <div>
      <%= f.button :submit, "Login", class: "w-full inline-flex justify-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" %>
    </div>
  <% end %>
  
  </div>
</div>





⚠️ **GitHub.com Fallback** ⚠️