logo

FullScreenHeroWithTextOverlay

InfoGeneratePackages

The provided code defines a Ruby class named HeroWithOverlayImageComponent, which inherits from ApplicationComponent. This class has a method named template that constructs a hero component with an overlay image using a specific Ruby web framework's DSL (Domain Specific Language) for generating HTML content. The hero component is designed to cover the entire height of the screen with a background image. It includes an overlay with a 60% opacity to darken the image, making the text content more readable. Inside the hero component, there is centered text content that contains a heading with the text "Hello there", a paragraph describing some text, and a 'Get Started' button. This code is likely part of a web application's front-end, designed to create a visually appealing hero section on a web page. The specific syntax (div class="...", h1, p, button) indicates it uses a Ruby DSL for generating HTML content.

# frozen_string_literal: true

class HeroWithOverlayImageComponent < ApplicationComponent
  def template
    div(class: "hero min-h-screen", style: "background-image: url(https://daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.jpg);") do
      div(class: "hero-overlay bg-opacity-60")
      div(class: "hero-content text-center text-neutral-content") do
        div(class: "max-w-md") do
          h1(class: "mb-5 text-5xl font-bold") { "Hello there" }
          p(class: "mb-5") { "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

Children