HeroSectionWithOverlayComponent
This code defines a Ruby class called `HeroWithOverlayImageComponent`, which is a subclass of `ApplicationComponent`. The primary purpose of this class is to render a hero section, typically used in web interfaces to capture user attention with compelling imagery and text content.
Key functionalities include:
1. Rendering a hero section (`div` element) with a specified background image set via a URL.
2. Adding an overlay (`div` element) with a semi-transparent background to achieve a visual overlay effect on the background image.
3. Adding a content area (`div` element) centered within the hero section with specific text content and a button.
4. Inside this content area, displaying a heading (`h1` element) with the text "Hey there", a paragraph (`p` element) with additional descriptive text, and a button (`button` element) labeled "Get Started".
Noteworthy details:
- The hero section occupies a minimum of the full screen height (`min-h-screen` class).
- Text and other content within the hero section are centered and styled using Tailwind CSS utility classes (e.g., `text-5xl`, `font-bold`, `btn-primary`).
- The overlay has a background opacity of 60% (`bg-opacity-60`).
In summary, this component is designed to create a visually appealing hero section with an overlay effect, containing a headline, descriptive text, and a call-to-action button.
# 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") { "Hey 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