Add landing page

app/controllers/landings_controller.rb

@@ -0,0 +1,5 @@
+class LandingsController < ApplicationController
+  def show
+    render Landings::ShowView.new
+  end
+end

app/views/components/sidebar.rb

@@ -1,14 +1,23 @@
 class Sidebar < ApplicationView
+  include Phlex::Rails::Helpers::ImageTag
   include Phlex::Rails::Helpers::LinkTo
 
   def view_template
     aside class: "w-80 bg-base-100 h-[100dvh]" do
-      Button(:ghost, as: :a, href: root_path, class: "text-lg md:text-2xl mt-2") do
-        "PhlexyUI"
-      end
+      div class: "flex justify-start items-center" do
+        Button(
+          :ghost,
+          as: :a,
+          href: root_path,
+          class: "text-lg md:text-2xl font-bold mt-2"
+        ) do
+          image_tag "phlexy_ui_logo.png", class: "w-12 h-12"
+          plain "PhlexyUI"
+        end
 
-      span do
-        "v#{PhlexyUI::VERSION}"
+        span class: "mt-2" do
+          "v#{PhlexyUI::VERSION}"
+        end
       end
 
       div class: "h-4"

app/views/landings/show_view.rb

@@ -0,0 +1,88 @@
+module Landings
+  class ShowView < ApplicationView
+    def view_template
+      div class: "w-full flex items-center justify-center mb-8" do
+        div class: "flex flex-col items-center justify-center gap-12 max-w-4xl" do
+          h1 class: "text-6xl font-bold" do
+            span do
+              "A "
+            end
+            span class: "text-rose-600" do
+              "Ruby"
+            end
+
+            span do
+              " component library for "
+            end
+
+            span class: "text-teal-500" do
+              "DaisyUI"
+            end
+
+            span do
+              " using "
+            end
+
+            span class: "text-yellow-500" do
+              "Phlex"
+            end
+          end
+
+          h2 class: "text-xl" do
+            <<~TXT
+              PhlexyUI is a component library built with Phlex, a Ruby gem for 
+              building fast object-oriented HTML components. On top of DaisyUI, 
+              the most popular component library for Tailwind CSS.
+            TXT
+          end
+
+          div class: "flex gap-4 self-start" do
+            Button :outline, as: :a, href: examples_path(:button) do
+              "Browse components"
+            end
+
+            Button :primary, as: :a, href: docs_path(:installation) do
+              "Get started"
+            end
+          end
+        end
+      end
+
+      render Examples::DemoComponent.new(
+        component: Component.from_name("Card"),
+        title: "Card",
+        example_method: method(:example)
+      )
+    end
+
+    private
+
+    def example
+      Card :base_100 do |card|
+        figure do
+          img(src:)
+        end
+
+        card.body do
+          card.title do
+            "Shoes!"
+          end
+
+          p do
+            "If a dog chews shoes whose shoes does he choose?"
+          end
+
+          card.actions class: "justify-end" do
+            Button :primary do
+              "Buy Now"
+            end
+          end
+        end
+      end
+    end
+
+    def src
+      "https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
+    end
+  end
+end

config/routes.rb

@@ -10,7 +10,8 @@
   get "manifest" => "rails/pwa#manifest", :as => :pwa_manifest
 
   # Defines the root path route ("/")
-  root "examples#show", component: "card"
+  root "landings#show"
   get "components/:component" => "examples#show", :as => "examples"
   get "docs/:doc_name" => "docs#show", :as => "docs"
+  get "landing" => "landing#show", :as => "landing"
 end