Full-Screen Center-Aligned Hero Component

Info Generate Packages

This code defines a Ruby class named `CenteredHeroComponent` which inherits from `ApplicationComponent`. The class is responsible for generating a template for a web page component designed to display a centered hero section. The hero section is structured using div elements and styled with CSS classes to achieve a full-screen background, center-aligned text, and a fixed maximum width for the content. The content within this hero section includes a large (5xl) bold headline text saying 'Hello there', a paragraph of placeholder text, and a primary styled button labeled 'Get Started'. This component is intended to create an attractive landing or introductory section for a website, drawing users’ attention to the main message or action.

# frozen_string_literal: true

class CenteredHeroComponent < ApplicationComponent
  def template
    div(class: "hero min-h-screen bg-base-200") do
      div(class: "hero-content text-center") do
        div(class: "max-w-md") do
          h1(class: "text-5xl font-bold") { "Hello there" }
          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." }
          button(class: "btn btn-primary") { "Get Started" }
        end
      end
    end
  end
end

Try a prompt