LandingPageWithNavbarComponent
This Ruby code defines two components: `NavbarWithDropdownCenterLogoAndIconComponent` and `LandingPageComponent`, using a presumed custom component framework (likely leveraging Rails and ViewComponents or a similar system). The `NavbarWithDropdownCenterLogoAndIconComponent` creates a responsive navigation bar with a dropdown menu on the left, a centered logo/text, and two icon buttons on the right. The dropdown menu includes links to the Homepage, Portfolio, and About sections. The first icon button is for search functionality, and the second one resembles a notification bell with an indicator badge. The `LandingPageComponent` utilizes this navbar component and creates a landing page layout with a centered hero section. This section contains a welcoming header, a brief description, and a call-to-action button labeled 'Get Started'. The entire layout is designed with responsive and utility classes, likely provided by a CSS framework (most likely DaisyUI or Tailwind CSS). Both components emphasize code reusability and proper structure of the web UI.
# frozen_string_literal: true
class NavbarWithDropdownCenterLogoAndIconComponent < ApplicationComponent
def template
div(class: "navbar bg-base-100") do
div(class: "navbar-start") do
div(class: "dropdown") do
div(tabindex: "0", role: "button", class: "btn btn-ghost btn-circle") do
svg(xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor") do |svg|
svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M4 6h16M4 12h16M4 18h7")
end
end
ul(tabindex: "0", class: "menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52") do
li { a { "Homepage" } }
li { a { "Portfolio" } }
li { a { "About" } }
end
end
end
div(class: "navbar-center") do
a(class: "btn btn-ghost text-xl") { "daisyUI" }
end
div(class: "navbar-end") do
button(class: "btn btn-ghost btn-circle") do
svg(xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor") do |svg|
svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z")
end
end
button(class: "btn btn-ghost btn-circle") do
div(class: "indicator") do
svg(xmlns: "http://www.w3.org/2000/svg", class: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor") do |svg|
svg.path(stroke_linecap: "round", stroke_linejoin: "round", stroke_width: "2", d: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9")
end
span(class: "badge badge-xs badge-primary indicator-item")
end
end
end
end
end
end
class LandingPageComponent < ApplicationComponent
def template
div(class: "min-h-screen bg-base-200 flex flex-col items-center justify-center") do
render NavbarWithDropdownCenterLogoAndIconComponent.new
div(class: "hero") do
div(class: "hero-content text-center") do
div do
h1(class: "text-5xl font-bold") { "Welcome to Our Landing Page" }
p(class: "py-6") { "We are glad to have you here. Explore our website to know more about us." }
button(class: "btn btn-primary") { "Get Started" }
end
end
end
end
end
end