m9sh 0.2.1 → 0.2.2

data/app/views/blocks/examples/settings-03.html.erb

@@ -0,0 +1,340 @@
+<% content_for :title, "Settings 03 - Blocks" %>
+
+<!-- Page Header -->
+<div class="space-y-2 mb-8">
+  <h1 class="text-3xl font-bold tracking-tight">Settings 03</h1>
+  <p class="text-muted-foreground">
+    Notifications and integrations settings with connected accounts, email preferences, and API access. Perfect for managing external services and notifications.
+  </p>
+</div>
+
+<!-- Settings Preview -->
+<% settings_html = capture do %>
+  <div class="w-full">
+    <div class="max-w-3xl mx-auto space-y-8">
+        <%# CODE_START %>
+        <!-- Page Header -->
+        <div class="space-y-1">
+          <h2 class="text-2xl font-semibold tracking-tight">Notifications & Integrations</h2>
+          <p class="text-sm text-muted-foreground">
+            Manage your notifications and connected services.
+          </p>
+        </div>
+
+        <%= render M9sh::SeparatorComponent.new(class: "my-6") %>
+
+        <!-- Tabs for different sections -->
+        <%= render M9sh::TabsComponent.new(default_value: "notifications") do |tabs| %>
+          <!-- Tab List -->
+          <% tabs.with_tabs_list do |list| %>
+            <%= render list.tabs_trigger(value: "notifications") { "Notifications" } %>
+            <%= render list.tabs_trigger(value: "integrations") { "Integrations" } %>
+            <%= render list.tabs_trigger(value: "api") { "API Access" } %>
+          <% end %>
+
+          <!-- Notifications Tab -->
+          <% tabs.with_tabs_content(value: "notifications") do %>
+            <div class="space-y-6 mt-6">
+              <!-- Email Notifications -->
+              <%= render M9sh::CardComponent.new do |card| %>
+                <% card.with_header do |header| %>
+                  <% header.with_title { "Email Notifications" } %>
+                  <% header.with_description { "Choose what updates you receive via email." } %>
+                <% end %>
+                <% card.with_body do %>
+                  <div class="space-y-4">
+                    <% [
+                      { id: "email-comments", label: "Comments", description: "Receive notifications when someone comments on your posts.", checked: true },
+                      { id: "email-mentions", label: "Mentions", description: "Get notified when someone mentions you.", checked: true },
+                      { id: "email-followers", label: "New Followers", description: "Receive emails about new followers." },
+                      { id: "email-digest", label: "Weekly Digest", description: "Get a weekly summary of activity.", checked: true }
+                    ].each do |notification| %>
+                      <div class="flex items-center justify-between space-x-2 py-2">
+                        <div class="space-y-0.5 flex-1">
+                          <%= render M9sh::LabelComponent.new(for: notification[:id], class: "font-medium cursor-pointer") { notification[:label] } %>
+                          <p class="text-sm text-muted-foreground"><%= notification[:description] %></p>
+                        </div>
+                        <%= render M9sh::SwitchComponent.new(id: notification[:id], checked: notification[:checked] || false) %>
+                      </div>
+                      <%= render M9sh::SeparatorComponent.new unless notification[:id] == "email-digest" %>
+                    <% end %>
+                  </div>
+                <% end %>
+              <% end %>
+
+              <!-- Push Notifications -->
+              <%= render M9sh::CardComponent.new do |card| %>
+                <% card.with_header do |header| %>
+                  <% header.with_title { "Push Notifications" } %>
+                  <% header.with_description { "Manage browser and mobile push notifications." } %>
+                <% end %>
+                <% card.with_body do %>
+                  <div class="space-y-4">
+                    <% [
+                      { id: "push-messages", label: "Messages", description: "Get notified about new messages.", checked: true },
+                      { id: "push-updates", label: "Product Updates", description: "Notifications about new features and updates." },
+                      { id: "push-reminders", label: "Reminders", description: "Receive reminders about tasks and events.", checked: true }
+                    ].each do |notification| %>
+                      <div class="flex items-center justify-between space-x-2 py-2">
+                        <div class="space-y-0.5 flex-1">
+                          <%= render M9sh::LabelComponent.new(for: notification[:id], class: "font-medium cursor-pointer") { notification[:label] } %>
+                          <p class="text-sm text-muted-foreground"><%= notification[:description] %></p>
+                        </div>
+                        <%= render M9sh::SwitchComponent.new(id: notification[:id], checked: notification[:checked] || false) %>
+                      </div>
+                      <%= render M9sh::SeparatorComponent.new unless notification[:id] == "push-reminders" %>
+                    <% end %>
+                  </div>
+                <% end %>
+                <% card.with_footer do %>
+                  <%= render M9sh::ButtonComponent.new do %>
+                    Save Preferences
+                  <% end %>
+                <% end %>
+              <% end %>
+            </div>
+          <% end %>
+
+          <!-- Integrations Tab -->
+          <% tabs.with_tabs_content(value: "integrations") do %>
+            <div class="space-y-6 mt-6">
+              <!-- Connected Accounts -->
+              <%= render M9sh::CardComponent.new do |card| %>
+                <% card.with_header do |header| %>
+                  <% header.with_title { "Connected Accounts" } %>
+                  <% header.with_description { "Manage your connected services and integrations." } %>
+                <% end %>
+                <% card.with_body do %>
+                  <div class="space-y-4">
+                    <% [
+                      { name: "GitHub", status: "Connected", description: "Connected as @johndoe", connected: true },
+                      { name: "Google", status: "Connected", description: "john.doe@gmail.com", connected: true },
+                      { name: "Slack", status: "Not Connected", description: "Connect your Slack workspace", connected: false },
+                      { name: "Discord", status: "Not Connected", description: "Connect your Discord account", connected: false }
+                    ].each do |service| %>
+                      <div class="flex items-center justify-between space-x-4 py-3">
+                        <div class="flex items-center gap-3 flex-1">
+                          <div class="h-10 w-10 rounded-full bg-muted flex items-center justify-center">
+                            <span class="text-sm font-medium"><%= service[:name][0] %></span>
+                          </div>
+                          <div class="space-y-1">
+                            <div class="flex items-center gap-2">
+                              <p class="font-medium"><%= service[:name] %></p>
+                              <%= render M9sh::BadgeComponent.new(variant: service[:connected] ? :default : :secondary) do %>
+                                <%= service[:status] %>
+                              <% end %>
+                            </div>
+                            <p class="text-sm text-muted-foreground"><%= service[:description] %></p>
+                          </div>
+                        </div>
+                        <% if service[:connected] %>
+                          <%= render M9sh::ButtonComponent.new(variant: :outline, size: :sm) do %>
+                            Disconnect
+                          <% end %>
+                        <% else %>
+                          <%= render M9sh::ButtonComponent.new(size: :sm) do %>
+                            Connect
+                          <% end %>
+                        <% end %>
+                      </div>
+                      <%= render M9sh::SeparatorComponent.new unless service[:name] == "Discord" %>
+                    <% end %>
+                  </div>
+                <% end %>
+              <% end %>
+
+              <!-- Webhooks -->
+              <%= render M9sh::CardComponent.new do |card| %>
+                <% card.with_header do |header| %>
+                  <% header.with_title { "Webhooks" } %>
+                  <% header.with_description { "Configure webhooks for external integrations." } %>
+                <% end %>
+                <% card.with_body do %>
+                  <div class="space-y-4">
+                    <div class="space-y-2">
+                      <%= render M9sh::LabelComponent.new(for: "webhook-url") { "Webhook URL" } %>
+                      <%= render M9sh::InputComponent.new(
+                        id: "webhook-url",
+                        placeholder: "https://example.com/webhook",
+                        value: "https://api.example.com/webhook"
+                      ) %>
+                      <p class="text-xs text-muted-foreground">Events will be sent to this URL.</p>
+                    </div>
+                    <div class="flex items-center space-x-3">
+                      <%= render M9sh::CheckboxComponent.new(id: "webhook-active", checked: true) %>
+                      <%= render M9sh::LabelComponent.new(for: "webhook-active", class: "font-medium cursor-pointer") { "Webhook Enabled" } %>
+                    </div>
+                  </div>
+                <% end %>
+                <% card.with_footer do %>
+                  <div class="flex gap-2">
+                    <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                      Test Webhook
+                    <% end %>
+                    <%= render M9sh::ButtonComponent.new do %>
+                      Save Configuration
+                    <% end %>
+                  </div>
+                <% end %>
+              <% end %>
+            </div>
+          <% end %>
+
+          <!-- API Access Tab -->
+          <% tabs.with_tabs_content(value: "api") do %>
+            <div class="space-y-6 mt-6">
+              <!-- API Keys -->
+              <%= render M9sh::CardComponent.new do |card| %>
+                <% card.with_header do |header| %>
+                  <% header.with_title { "API Keys" } %>
+                  <% header.with_description { "Manage your API keys for programmatic access." } %>
+                <% end %>
+                <% card.with_body do %>
+                  <div class="space-y-4">
+                    <%= render M9sh::AlertComponent.new(variant: :default) do %>
+                      <div class="space-y-1">
+                        <p class="font-medium">Keep your API keys secure</p>
+                        <p class="text-sm">Never share your API keys in publicly accessible areas such as GitHub, client-side code, and so forth.</p>
+                      </div>
+                    <% end %>
+
+                    <div class="space-y-2">
+                      <%= render M9sh::LabelComponent.new(for: "api-key") { "Production API Key" } %>
+                      <div class="flex gap-2">
+                        <%= render M9sh::InputComponent.new(
+                          id: "api-key",
+                          type: :password,
+                          value: "sk_live_1234567890abcdef",
+                          readonly: true
+                        ) %>
+                        <%= render M9sh::ButtonComponent.new(variant: :outline, size: :sm) do %>
+                          Copy
+                        <% end %>
+                      </div>
+                    </div>
+
+                    <div class="space-y-2">
+                      <%= render M9sh::LabelComponent.new(for: "test-api-key") { "Test API Key" } %>
+                      <div class="flex gap-2">
+                        <%= render M9sh::InputComponent.new(
+                          id: "test-api-key",
+                          type: :password,
+                          value: "sk_test_0987654321fedcba",
+                          readonly: true
+                        ) %>
+                        <%= render M9sh::ButtonComponent.new(variant: :outline, size: :sm) do %>
+                          Copy
+                        <% end %>
+                      </div>
+                    </div>
+                  </div>
+                <% end %>
+                <% card.with_footer do %>
+                  <div class="flex justify-between items-center">
+                    <%= render M9sh::ButtonComponent.new(variant: :destructive, size: :sm) do %>
+                      Regenerate Keys
+                    <% end %>
+                    <p class="text-xs text-muted-foreground">Last regenerated 2 days ago</p>
+                  </div>
+                <% end %>
+              <% end %>
+
+              <!-- API Usage -->
+              <%= render M9sh::CardComponent.new do |card| %>
+                <% card.with_header do |header| %>
+                  <% header.with_title { "API Usage" } %>
+                  <% header.with_description { "Monitor your API usage and rate limits." } %>
+                <% end %>
+                <% card.with_body do %>
+                  <div class="space-y-4">
+                    <div class="space-y-2">
+                      <div class="flex items-center justify-between text-sm">
+                        <span class="text-muted-foreground">Requests this month</span>
+                        <span class="font-medium">8,547 / 10,000</span>
+                      </div>
+                      <%= render M9sh::ProgressComponent.new(value: 85.47) %>
+                    </div>
+                    <div class="space-y-2">
+                      <div class="flex items-center justify-between text-sm">
+                        <span class="text-muted-foreground">Rate limit</span>
+                        <span class="font-medium">100 requests/min</span>
+                      </div>
+                    </div>
+                  </div>
+                <% end %>
+                <% card.with_footer do %>
+                  <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                    View Documentation
+                  <% end %>
+                <% end %>
+              <% end %>
+            </div>
+          <% end %>
+        <% end %>
+        <%# CODE_END %>
+      </div>
+  </div>
+<% end %>
+
+<%= render Docs::ComponentPreviewComponent.new(
+  title: "Notifications & Integrations",
+  preview_content: settings_html,
+  code: extract_block_code("<%# CODE_START %>", "<%# CODE_END %>"),
+  ai_command: extract_block_code("<%# CODE_START %>", "<%# CODE_END %>")
+) %>
+
+<!-- Usage Section -->
+<div class="mt-12 space-y-4">
+  <h2 class="text-2xl font-semibold tracking-tight">Usage</h2>
+  <p class="text-muted-foreground leading-relaxed">
+    A comprehensive settings page for notifications and integrations. Features tabbed navigation for organizing email/push notifications, connected accounts, webhooks, and API access management.
+  </p>
+
+  <%= render M9sh::CardComponent.new(class: "mt-6") do |card| %>
+    <% card.with_header do |header| %>
+      <% header.with_title do %>
+        Required Components
+      <% end %>
+      <% header.with_description do %>
+        Make sure these components are installed in your project
+      <% end %>
+    <% end %>
+    <% card.with_body do %>
+      <div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          TabsComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          CardComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          InputComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          LabelComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          ButtonComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          SwitchComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          CheckboxComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          BadgeComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          AlertComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          ProgressComponent
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          SeparatorComponent
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+</div>

data/app/views/blocks/index.html.erb

@@ -0,0 +1,65 @@
+<% content_for :title, "Blocks - m9sh/ui" %>
+
+<div class="space-y-12">
+  <!-- Hero Section -->
+  <div class="space-y-6 py-8">
+    <div class="space-y-4">
+      <h1 class="scroll-m-20 text-5xl font-bold tracking-tight lg:text-6xl">
+        Building Blocks for the Web
+      </h1>
+      <p class="text-xl text-muted-foreground max-w-[700px]">
+        Beautifully designed blocks built with m9sh/ui components. Copy and paste into your apps.
+      </p>
+    </div>
+  </div>
+
+  <!-- Blocks by Category -->
+  <% BlocksController::BLOCK_CATEGORIES.each do |category, blocks| %>
+    <div id="<%= category.downcase %>" class="space-y-6">
+      <div>
+        <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+          <%= category %>
+        </h2>
+        <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      </div>
+
+      <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+        <% blocks.each do |block| %>
+          <%= link_to block_path(block), class: "group" do %>
+            <%= render M9sh::CardComponent.new(class: "h-full transition-all hover:border-primary") do |card| %>
+              <% card.with_header do %>
+                <div class="space-y-1">
+                  <h3 class="font-semibold group-hover:text-primary transition-colors">
+                    <%= block.titleize %>
+                  </h3>
+                  <p class="text-sm text-muted-foreground">
+                    <%= BlocksController::BLOCK_DESCRIPTIONS[block] %>
+                  </p>
+                </div>
+              <% end %>
+              <% card.with_body do %>
+                <div class="aspect-video bg-muted rounded-md flex items-center justify-center">
+                  <%= render M9sh::SkeletonComponent.new(class: "w-full h-full") %>
+                </div>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+
+  <!-- Info Section -->
+  <div id="about" class="pt-8 space-y-4">
+    <%= render M9sh::SeparatorComponent.new %>
+    <div class="space-y-2">
+      <h3 class="font-semibold">About Blocks</h3>
+      <p class="text-sm text-muted-foreground leading-7">
+        Blocks are fully functional examples built using m9sh/ui components. They demonstrate how to compose multiple components together to create common UI patterns and layouts.
+      </p>
+      <p class="text-sm text-muted-foreground leading-7">
+        Each block is a complete, working example that you can copy and customize for your application.
+      </p>
+    </div>
+  </div>
+</div>

data/app/views/docs/_sidebar.html.erb

@@ -0,0 +1,47 @@
+<nav class="px-12 py-8 space-y-8">
+    <!-- Getting Started Section -->
+    <div>
+      <h4 class="mb-2 text-sm font-semibold">Getting Started</h4>
+      <ul class="space-y-1">
+        <li>
+          <a href="<%= docs_path %>"
+             class="inline-flex w-full items-center justify-start whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-9 px-3 <%= @current_page == 'introduction' ? 'bg-sidebar-accent text-sidebar-accent-foreground' : '' %>">
+            Introduction
+          </a>
+        </li>
+        <li>
+          <a href="<%= docs_installation_path %>"
+             class="inline-flex w-full items-center justify-start whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-9 px-3 <%= @current_page == 'installation' ? 'bg-sidebar-accent text-sidebar-accent-foreground' : '' %>">
+            Installation
+          </a>
+        </li>
+        <li>
+          <a href="<%= docs_usage_path %>"
+             class="inline-flex w-full items-center justify-start whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-9 px-3 <%= @current_page == 'usage' ? 'bg-sidebar-accent text-sidebar-accent-foreground' : '' %>">
+            Usage
+          </a>
+        </li>
+        <li>
+          <a href="<%= docs_about_path %>"
+             class="inline-flex w-full items-center justify-start whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-9 px-3 <%= @current_page == 'about' ? 'bg-sidebar-accent text-sidebar-accent-foreground' : '' %>">
+            About
+          </a>
+        </li>
+      </ul>
+    </div>
+
+    <!-- Components Section -->
+    <div>
+      <h4 class="mb-2 text-sm font-semibold">Components</h4>
+      <ul class="space-y-1">
+        <% DocsController::COMPONENTS.each do |component| %>
+          <li>
+            <a href="<%= docs_component_path(component) %>"
+               class="inline-flex w-full items-center justify-start whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-9 px-3 <%= @component == component ? 'bg-sidebar-accent text-sidebar-accent-foreground' : '' %>">
+              <%= component.titleize.gsub('_', ' ') %>
+            </a>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+</nav>

data/app/views/docs/_toc.html.erb

@@ -0,0 +1,19 @@
+<% if @component.present? || @current_page.present? %>
+  <div class="px-12 py-8">
+    <p class="font-semibold text-sm mb-2 px-3">On This Page</p>
+    <nav class="space-y-0.5">
+      <a href="#installation" class="block text-sm px-3 py-1.5 rounded-lg hover:bg-sidebar-accent transition-colors">
+        Installation
+      </a>
+      <a href="#usage" class="block text-sm px-3 py-1.5 rounded-lg hover:bg-sidebar-accent transition-colors">
+        Usage
+      </a>
+      <a href="#examples" class="block text-sm px-3 py-1.5 rounded-lg hover:bg-sidebar-accent transition-colors">
+        Examples
+      </a>
+      <a href="#api-reference" class="block text-sm px-3 py-1.5 rounded-lg hover:bg-sidebar-accent transition-colors">
+        API Reference
+      </a>
+    </nav>
+  </div>
+<% end %>

data/app/views/docs/about.html.erb

@@ -0,0 +1,68 @@
+<% content_for :title, "About - m9sh/ui" %>
+
+<div class="space-y-12 max-w-3xl">
+  <!-- Page Header -->
+  <div class="space-y-4">
+    <h1 class="scroll-m-20 text-4xl font-bold tracking-tight lg:text-5xl">
+      About
+    </h1>
+    <p class="text-lg text-muted-foreground">
+      Learn more about the project and its goals.
+    </p>
+  </div>
+
+  <!-- Content -->
+  <div class="space-y-6">
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        What is this project?
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        m9sh/ui is a collection of re-usable ViewComponents built with Rails and Tailwind CSS. The project is inspired by shadcn/ui and follows the same philosophy of giving developers full control over their component code.
+      </p>
+      <p class="mt-4 text-muted-foreground leading-7">
+        Instead of installing a gem and importing components, you copy the component code directly into your Rails application. This approach gives you complete ownership and the flexibility to customize components to match your needs.
+      </p>
+    </div>
+
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Why ViewComponents?
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        ViewComponent is a framework for building reusable, testable & encapsulated view components in Ruby on Rails. It integrates seamlessly with Rails applications and provides a Ruby-native way to build UI components.
+      </p>
+      <p class="mt-4 text-muted-foreground leading-7">
+        Combined with Stimulus for JavaScript interactions and Tailwind CSS for styling, ViewComponents provide a powerful foundation for building modern Rails applications.
+      </p>
+    </div>
+
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Credits
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        This project is built on the shoulders of giants:
+      </p>
+      <ul class="mt-4 ml-6 list-disc text-muted-foreground leading-7 space-y-2">
+        <li><a href="https://ui.shadcn.com" class="font-medium underline underline-offset-4" target="_blank" rel="noopener">shadcn/ui</a> - The original inspiration and design system</li>
+        <li><a href="https://viewcomponent.org" class="font-medium underline underline-offset-4" target="_blank" rel="noopener">ViewComponent</a> - Framework for building reusable view components</li>
+        <li><a href="https://tailwindcss.com" class="font-medium underline underline-offset-4" target="_blank" rel="noopener">Tailwind CSS</a> - Utility-first CSS framework</li>
+        <li><a href="https://stimulus.hotwired.dev" class="font-medium underline underline-offset-4" target="_blank" rel="noopener">Stimulus</a> - JavaScript framework for HTML</li>
+      </ul>
+    </div>
+
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        License
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        MIT License. Free to use for personal and commercial projects. No attribution required.
+      </p>
+    </div>
+  </div>
+</div>