ResponsiveLoginHeroComponent
This code defines a Ruby class named `HeroWithFormComponent` that inherits from `ApplicationComponent`. The class contains a `template` method that generates HTML content for a web page UI component, specifically designed for user login. The HTML content generated uses a series of nested `div` structures to create a visually appealing layout with a hero section. The hero section features a large headline, a paragraph describing the service or promotion, and a card containing a form for email and password input fields. The form includes labels, input fields with placeholders for user email and password, a link for password recovery, and a login button. The code uses CSS classes to style the content and ensure it is responsive. Notably, the layout adapts for large screens with a `flex-row-reverse` class, positioning the text on the left and the form on the right. The input fields are required, indicating form validation is enforced.
# frozen_string_literal: true
class HeroWithFormComponent < ApplicationComponent
def template
div(class: "hero min-h-screen bg-base-200") do
div(class: "hero-content flex-col lg:flex-row-reverse") do
div(class: "text-center lg:text-left") do
h1(class: "text-5xl font-bold") { "Login now!" }
p(class: "py-6") { "Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi." }
end
div(class: "card shrink-0 w-full max-w-sm shadow-2xl bg-base-100") do
form(class: "card-body") do
div(class: "form-control") do
label(class: "label") do
span(class: "label-text") { "Email" }
end
input(type: "email", placeholder: "email", class: "input input-bordered", required: true)
end
div(class: "form-control") do
label(class: "label") do
span(class: "label-text") { "Password" }
end
input(type: "password", placeholder: "password", class: "input input-bordered", required: true)
label(class: "label") do
a(href: "#", class: "label-text-alt link link-hover") { "Forgot password?" }
end
end
div(class: "form-control mt-6") do
button(class: "btn btn-primary") { "Login" }
end
end
end
end
end
end
end