HeroWithTextAndReverseOrderImageComponent
This Ruby code defines a class named `HeroWithFigureReverseOrderComponent` which inherits from `ApplicationComponent`. The class includes a method named `template` designed to generate HTML content using a DSL (Domain-Specific Language) for rendering a webpage layout. The `template` method constructs a webpage section with a hero image and text content arranged in a specified format. Specifically, the layout features a hero banner with a background, containing an image and a content block that includes a heading, a paragraph, and a button. The content is arranged so that on larger screens, the image appears on the right side of the text content (due to `lg:flex-row-reverse`), but stacks vertically on smaller screens. The `hero-content` class is used to define this layout, with additional styling applied to the image, heading, button, and other elements for visual appeal.
# frozen_string_literal: true
class HeroWithFigureReverseOrderComponent < ApplicationComponent
def template
div(class: "hero min-h-screen bg-base-200") do
div(class: "hero-content flex-col lg:flex-row-reverse") do
img(src: "https://daisyui.com/images/stock/photo-1635805737707-575885ab0820.jpg", class: "max-w-sm rounded-lg shadow-2xl")
div do
h1(class: "text-5xl font-bold") { "Box Office News!" }
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