Migrate the home components to align with Phlex conversions (#169)

Author: karinevieira

app/components/home_view/banner.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Components
+  module HomeView
+    class Banner < Components::Base
+      include DeferredRender
+
+      def view_template(&block)
+        div(class: "relative overflow-hidden") do
+          render Shared::GridPattern.new(spacing: :md)
+          render HomeView::Shapes.new(size: :xl, color: :pink, class: "hidden sm:block absolute right-0 top-1/2 transform -translate-y-1/2 sm:translate-x-2/3 md:translate-x-1/2")
+          div(class: "relative container mx-auto max-w-3xl py-24 lg:py-32 px-4 sm:text-center flex flex-col sm:items-center gap-y-6") do
+            Heading(level: 1) do
+              plain "A UI component library, crafted precisely for Ruby devs"
+              span(class: "text-foreground opacity-30") { " who want to stay organised and build modern apps, fast." }
+            end
+            if @cta
+              div(class: "grid grid-cols-1 sm:grid-cols-2 gap-4", &@cta)
+            end
+          end
+        end
+      end
+
+      def cta(&block)
+        @cta = block
+      end
+    end
+  end
+end

app/components/home_view/card.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+module Components
+  module HomeView
+    class Card < Components::Base
+      include DeferredRender
+
+      def initialize(attributes = {})
+        @attributes = attributes
+        @title = attributes.delete(:title)
+        @subtitle = attributes.delete(:subtitle) || nil
+        @color = attributes.delete(:color) || :card
+
+        @color_classes = {
+          card: "bg-background border",
+          primary: "bg-primary text-white",
+          secondary: "bg-accent text-accent-foreground",
+          # Add sky, violet, amber, lime, pink
+          sky: "bg-sky-100 text-sky-950",
+          violet: "bg-violet-100 text-violet-950",
+          amber: "bg-amber-100 text-amber-950",
+          lime: "bg-lime-100 text-lime-950",
+          pink: "bg-pink-100 text-pink-950"
+        }
+      end
+
+      def view_template(&block)
+        div(**@attributes, class: ["relative flex flex-col p-6 md:p-10 rounded-2xl space-y-8 overflow-hidden", @attributes[:class], @color_classes[@color.to_sym]]) do
+          if @icon
+            div(&@icon)
+          end
+          if @title || @subtitle
+            div(class: "space-y-2") do
+              h3(class: "font-semibold leading-none tracking-tight") { @title } if @title
+              p { @subtitle } if @subtitle
+            end
+          end
+
+          @content&.call
+        end
+      end
+
+      def icon(&block)
+        @icon = block
+      end
+
+      def content(&block)
+        @content = block
+      end
+    end
+  end
+end

app/components/home_view/shapes.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Components
+  module HomeView
+    class Shapes < Components::Base
+      def initialize(size: :md, **attributes)
+        @attributes = attributes
+        @circle_sizes = {
+          xs: "w-8 h-8",
+          sm: "w-12 h-12",
+          md: "w-16 h-16",
+          lg: "w-24 h-24",
+          xl: "w-32 h-32"
+        }
+
+        @square_sizes = {
+          xs: "w-16 h-16 rounde-md",
+          sm: "w-24 h-24 rounded-md",
+          md: "w-32 h-32 rounded-lg",
+          lg: "w-48 h-48 rounded-lg",
+          xl: "w-64 h-64 rounded-xl"
+        }
+
+        @size = size
+        @colors = %w[sky violet pink amber lime]
+        @color = @attributes.delete(:color) || @colors.sample
+      end
+
+      def view_template
+        # Create one square and one circle of different colors
+        # The square will be on a rotation of 15deg
+        # the circle will be a solid color
+        # The shapes will be slightly overlapping
+        div(**@attributes) do
+          div(class: "relative") do
+            circle
+            square
+          end
+        end
+      end
+
+      def square
+        color_classes = {
+          sky: "bg-sky-500/10 backdrop-blur-3xl ring-1 ring-sky-600/20 saturate-150",
+          violet: "bg-violet-500/10 backdrop-blur-3xl ring-1 ring-violet-600/20 saturate-150",
+          pink: "bg-pink-500/10 backdrop-blur-3xl ring-1 ring-pink-600/20 saturate-150",
+          amber: "bg-amber-500/10 backdrop-blur-3xl ring-1 ring-amber-600/20 saturate-150",
+          lime: "bg-lime-500/10 backdrop-blur-3xl ring-1 ring-lime-600/20 saturate-150"
+        }
+
+        sample_color = color_classes[@color.to_sym]
+
+        div(class: "#{@square_sizes[@size]} #{sample_color} -rotate-12")
+      end
+
+      def circle
+        color_classes = {
+          sky: "bg-sky-400",
+          violet: "bg-violet-400",
+          pink: "bg-pink-400",
+          amber: "bg-amber-400",
+          lime: "bg-lime-400"
+        }
+
+        sample_color = color_classes[@color.to_sym]
+
+        div(class: "#{@circle_sizes[@size]} #{sample_color} rounded-full absolute top-0 left-0 transform -translate-x-1/2 -translate-y-1/2")
+      end
+    end
+  end
+end

app/components/home_view/steps.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Components
+  module HomeView
+    class Steps < Components::Base
+      def initialize(attributes = {})
+        @attributes = attributes
+        @steps = attributes.delete(:steps) || []
+      end
+
+      def view_template(&block)
+        div(**@attributes) do
+          @steps.each_with_index do |step, index|
+            render_step(step, index: index, last: index == @steps.length - 1)
+          end
+        end
+      end
+
+      def render_step(step, index:, last: false)
+        div(class: "relative flex space-x-8") do
+          div(class: "flex-shrink-0 h-full") do
+            div(class: "flex-0 flex items-center justify-center h-6 w-6 rounded-full border bg-background") do
+              p(class: "font-medium") { index + 1 }
+            end
+            # vertical line unless last
+            hr(class: "absolute left-3 top-6 -ml-px h-full w-px bg-border") unless last
+          end
+          div(class: "flex-grow space-y-2 pb-10 pt-1") do
+            h3(class: "font-semibold leading-none tracking-tight") { step[:title] } if step[:title]
+            p { step[:description] } if step[:description]
+          end
+        end
+      end
+    end
+  end
+end