LandingPageWithNavbarComponent

InfoGenerateCreated ByPackages

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