m9sh 0.2.1 → 0.2.2

data/app/views/shared/_app_navbar.html.erb

@@ -0,0 +1,240 @@
+<%= render M9sh::NavbarComponent.new(sticky: local_assigns[:sticky] || false, transparent: true, container: false, class_name: "navbar-blur") do |navbar| %>
+  <% # Left toggle button for sidebar %>
+  <% if local_assigns[:show_left_toggle] %>
+    <% navbar.with_left_action do %>
+      <button class="md:hidden flex-shrink-0 p-2 hover:bg-accent transition-colors rounded-lg"
+              data-backdrop-target="leftToggle"
+              data-action="click->backdrop#toggleLeft"
+              aria-label="Toggle left sidebar">
+        <%= render M9sh::IconComponent.new(name: "chevron-right", size: "20", class_name: "transition-transform duration-300") %>
+      </button>
+    <% end %>
+  <% end %>
+
+  <% navbar.with_brand do %>
+    <a href="/" class="flex items-center space-x-2 group">
+      <span class="font-bold text-xl text-foreground">m9sh/ui</span>
+    </a>
+  <% end %>
+
+  <% navbar.with_navigation do %>
+    <nav class="flex items-center gap-1">
+      <a href="/docs" class="px-3 py-2 text-sm font-medium text-foreground rounded-lg hover:bg-accent transition-colors">
+        Components
+      </a>
+      <a href="/blocks" class="px-3 py-2 text-sm font-medium text-foreground rounded-lg hover:bg-accent transition-colors">
+        Blocks
+      </a>
+    </nav>
+  <% end %>
+
+  <% navbar.with_actions do %>
+    <%= render M9sh::ButtonComponent.new(variant: :ghost, size: :icon) do %>
+      <%= render M9sh::IconComponent.new(name: "search", size: "20") %>
+    <% end %>
+  <% end %>
+
+  <% navbar.with_actions do %>
+    <a href="https://github.com" target="_blank" rel="noreferrer">
+      <%= render M9sh::ButtonComponent.new(variant: :ghost, size: :icon) do %>
+        <%= render M9sh::IconComponent.new(name: "github", size: "20") %>
+      <% end %>
+    </a>
+  <% end %>
+
+  <% navbar.with_actions do %>
+    <div class="relative flex items-center border border-border rounded-lg overflow-hidden">
+      <button data-action="click->color-theme#previous"
+              class="p-2 hover:bg-accent transition-colors text-foreground"
+              title="Previous color theme">
+        <%= render M9sh::IconComponent.new(name: "chevron-left", size: "16") %>
+      </button>
+      <div class="h-5 w-px bg-border"></div>
+      <button data-action="click->color-theme#toggleDropdown"
+              class="px-3 py-2 hover:bg-accent transition-colors text-foreground min-w-[80px] text-sm font-medium"
+              title="Select color theme">
+        <span data-color-theme-target="currentTheme">Neutral</span>
+      </button>
+      <div class="h-5 w-px bg-border"></div>
+      <button data-action="click->color-theme#next"
+              class="p-2 hover:bg-accent transition-colors text-foreground"
+              title="Next color theme">
+        <%= render M9sh::IconComponent.new(name: "chevron-right", size: "16") %>
+      </button>
+
+      <!-- Dropdown Menu -->
+      <div data-color-theme-target="dropdown"
+           class="hidden absolute top-full right-0 mt-2 w-40 bg-popover border border-border rounded-lg shadow-lg overflow-hidden z-50">
+        <div class="py-1">
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="neutral"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Neutral</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-zinc-400"></div>
+            </div>
+          </button>
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="indigo"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Indigo</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-indigo-500"></div>
+            </div>
+          </button>
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="party"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Party</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500"></div>
+            </div>
+          </button>
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="sunset"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Sunset</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-gradient-to-r from-orange-500 to-red-500"></div>
+            </div>
+          </button>
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="ocean"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Ocean</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500"></div>
+            </div>
+          </button>
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="forest"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Forest</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-gradient-to-r from-green-600 to-emerald-500"></div>
+            </div>
+          </button>
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="cyberpunk"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Cyberpunk</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-gradient-to-r from-purple-500 to-cyan-500"></div>
+            </div>
+          </button>
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="thunder"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Thunder</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-gradient-to-r from-yellow-400 to-black"></div>
+            </div>
+          </button>
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="rose"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Rose</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-gradient-to-r from-pink-400 to-rose-600"></div>
+            </div>
+          </button>
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="miami"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Miami</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-gradient-to-r from-pink-500 to-cyan-400"></div>
+            </div>
+          </button>
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="lavender"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Lavender</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-gradient-to-r from-purple-400 to-violet-500"></div>
+            </div>
+          </button>
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="mint"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Mint</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-gradient-to-r from-emerald-400 to-yellow-400"></div>
+            </div>
+          </button>
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="coral"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Coral</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-gradient-to-r from-orange-400 to-cyan-400"></div>
+            </div>
+          </button>
+          <button data-action="click->color-theme#selectTheme"
+                  data-theme="arctic"
+                  class="w-full px-4 py-2 text-sm text-left hover:bg-accent transition-colors flex items-center justify-between">
+            <span>Arctic</span>
+            <div class="flex gap-1">
+              <div class="w-3 h-3 rounded-full bg-gradient-to-r from-blue-400 via-purple-400 to-indigo-500"></div>
+            </div>
+          </button>
+        </div>
+      </div>
+    </div>
+  <% end %>
+
+  <% navbar.with_actions do %>
+    <%= render M9sh::ButtonComponent.new(variant: :ghost, size: :icon, data: { action: "click->theme#openCustomizer" }, onclick: "document.getElementById('color-customizer-trigger').click()") do %>
+      <%= render M9sh::IconComponent.new(name: "paintbrush", size: "20") %>
+    <% end %>
+  <% end %>
+
+  <% navbar.with_actions do %>
+    <%= render M9sh::ButtonComponent.new(variant: :ghost, size: :icon, data: { action: "click->theme#toggle" }) do %>
+      <span class="relative inline-flex items-center justify-center w-5 h-5">
+        <%= render M9sh::IconComponent.new(name: "sun", size: "20", class_name: "absolute inset-0 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0") %>
+        <%= render M9sh::IconComponent.new(name: "moon", size: "20", class_name: "absolute inset-0 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100") %>
+      </span>
+    <% end %>
+  <% end %>
+
+  <% # Right toggle button for sidebar %>
+  <% if local_assigns[:show_right_toggle] %>
+    <% navbar.with_right_action do %>
+      <button class="md:hidden flex-shrink-0 p-2 hover:bg-accent transition-colors rounded-lg"
+              data-backdrop-target="rightToggle"
+              data-action="click->backdrop#toggleRight"
+              aria-label="Toggle right sidebar">
+        <%= render M9sh::IconComponent.new(name: "chevron-left", size: "20", class_name: "transition-transform duration-300") %>
+      </button>
+    <% end %>
+  <% end %>
+
+  <% navbar.with_mobile_menu do %>
+    <%= render M9sh::DropdownMenuItemComponent.new(href: "/docs") do %>
+      <%= render M9sh::IconComponent.new(name: "home", size: "16", class_name: "mr-2") %>
+      Components
+    <% end %>
+    <%= render M9sh::DropdownMenuItemComponent.new(href: "/blocks") do %>
+      <%= render M9sh::IconComponent.new(name: "layout", size: "16", class_name: "mr-2") %>
+      Blocks
+    <% end %>
+    <%= render M9sh::DropdownMenuSeparatorComponent.new %>
+    <button data-action="click->theme#toggle"
+       class="w-full relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+      <%= render M9sh::IconComponent.new(name: "sun", size: "16", class_name: "mr-2") %>
+      Toggle Theme
+    </button>
+    <button onclick="document.getElementById('color-customizer-trigger').click()"
+       class="w-full relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+      <%= render M9sh::IconComponent.new(name: "paintbrush", size: "16", class_name: "mr-2") %>
+      Customize Colors
+    </button>
+    <%= render M9sh::DropdownMenuSeparatorComponent.new %>
+    <a href="https://github.com" target="_blank" rel="noreferrer"
+       class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+      <%= render M9sh::IconComponent.new(name: "github", size: "16", class_name: "mr-2") %>
+      GitHub
+    </a>
+  <% end %>
+<% end %>

data/app/views/shared/_navbar.html.erb

@@ -0,0 +1,69 @@
+<%= render M9sh::NavbarComponent.new(
+  sticky: true,
+  transparent: true,
+  container: false,
+  border: true
+) do |navbar| %>
+  <% navbar.with_brand do %>
+    <a href="/" class="flex items-center space-x-2 group">
+      <span class="font-bold text-xl text-foreground">m9sh/ui</span>
+    </a>
+  <% end %>
+
+  <% navbar.with_navigation do %>
+    <nav class="flex items-center gap-1">
+      <%= link_to "/docs", class: "inline-flex items-center justify-center 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-foreground hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2" do %>
+        Components
+      <% end %>
+      <%= link_to "/blocks", class: "inline-flex items-center justify-center 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-foreground hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2" do %>
+        Blocks
+      <% end %>
+    </nav>
+  <% end %>
+
+  <% navbar.with_actions do %>
+    <a href="https://github.com" target="_blank" rel="noreferrer"
+       class="hidden sm:inline-flex items-center justify-center 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-foreground hover:bg-accent hover:text-accent-foreground h-9 w-9">
+      <%= render M9sh::IconComponent.new(name: "github", size: "18") %>
+      <span class="sr-only">GitHub</span>
+    </a>
+  <% end %>
+
+  <% navbar.with_actions do %>
+    <button id="theme-toggle"
+            class="inline-flex items-center justify-center 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-foreground hover:bg-accent hover:text-accent-foreground h-9 w-9 relative">
+      <%= render M9sh::IconComponent.new(name: "sun", size: "18", class_name: "rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0") %>
+      <%= render M9sh::IconComponent.new(name: "moon", size: "18", class_name: "absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100") %>
+      <span class="sr-only">Toggle theme</span>
+    </button>
+  <% end %>
+
+  <% navbar.with_mobile_menu do %>
+    <%= render M9sh::DropdownMenuItemComponent.new(href: "/docs") do %>
+      Components
+    <% end %>
+    <%= render M9sh::DropdownMenuItemComponent.new(href: "/blocks") do %>
+      Blocks
+    <% end %>
+    <%= render M9sh::DropdownMenuSeparatorComponent.new %>
+    <a href="https://github.com" target="_blank" rel="noreferrer"
+       class="relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
+      <%= render M9sh::IconComponent.new(name: "github", size: "16", class_name: "mr-2") %>
+      GitHub
+    </a>
+  <% end %>
+<% end %>
+
+<script>
+  // Setup dark mode toggle
+  document.addEventListener('DOMContentLoaded', function() {
+    const toggle = document.getElementById('theme-toggle');
+    if (toggle) {
+      toggle.addEventListener('click', function() {
+        const html = document.documentElement;
+        const isDark = html.classList.toggle('dark');
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+      });
+    }
+  });
+</script>

data/app/views/showcase/v2/_components_grid.html.erb

@@ -0,0 +1,38 @@
+<!-- Components Grid Section -->
+<section class="py-16 md:py-24">
+  <div class="container mx-auto px-4 md:px-6">
+    <!-- Section Header -->
+    <div class="mb-12">
+      <h2 class="text-3xl font-bold tracking-tight text-foreground mb-3">
+        Components
+      </h2>
+      <p class="text-muted-foreground max-w-2xl">
+        Beautifully designed components built with ViewComponent and Tailwind CSS. Copy, paste, and customize.
+      </p>
+    </div>
+
+    <!-- Components Grid -->
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      <% @components.each do |component| %>
+        <%= link_to docs_component_path(component), class: "group block p-6 rounded-lg border border-border bg-card hover:border-primary/50 hover:bg-accent/50 transition-all duration-200" do %>
+          <h3 class="font-semibold text-foreground group-hover:text-primary transition-colors mb-2">
+            <%= component.titleize.gsub('_', ' ') %>
+          </h3>
+          <p class="text-sm text-muted-foreground line-clamp-2">
+            <%= @descriptions[component] %>
+          </p>
+        <% end %>
+      <% end %>
+    </div>
+
+    <!-- View All Link -->
+    <div class="mt-8">
+      <%= link_to docs_path, class: "inline-flex items-center text-sm font-medium text-muted-foreground hover:text-foreground transition-colors" do %>
+        View all components
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="ml-1 h-4 w-4">
+          <path d="m9 18 6-6-6-6"/>
+        </svg>
+      <% end %>
+    </div>
+  </div>
+</section>

data/app/views/showcase/v2/_features.html.erb

@@ -0,0 +1,59 @@
+<!-- Features Section -->
+<section class="py-16 md:py-24 bg-background">
+  <div class="container mx-auto px-4 md:px-6">
+    <div class="mx-auto max-w-[58rem] text-center mb-12">
+      <h2 class="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+        Why Choose m9sh Components?
+      </h2>
+      <p class="mt-4 text-lg text-muted-foreground">
+        Everything you need to build modern Rails applications with confidence
+      </p>
+    </div>
+
+    <div class="grid gap-8 md:gap-12 lg:grid-cols-3 max-w-6xl mx-auto">
+      <div class="relative space-y-4">
+        <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6 text-primary">
+            <path d="M12 2v20M2 12h20"/>
+          </svg>
+        </div>
+        <div class="space-y-2">
+          <h3 class="text-xl font-semibold text-foreground">Rails Native</h3>
+          <p class="text-muted-foreground leading-relaxed">
+            Built specifically for Rails with ViewComponents, Stimulus, and Turbo. No external dependencies required.
+          </p>
+        </div>
+      </div>
+
+      <div class="relative space-y-4">
+        <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6 text-primary">
+            <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
+            <path d="M4 16c-1.11 0-2-.9-2-2V4c0-1.11.89-2 2-2h10c1.11 0 2 .89 2 2"/>
+          </svg>
+        </div>
+        <div class="space-y-2">
+          <h3 class="text-xl font-semibold text-foreground">Copy & Paste</h3>
+          <p class="text-muted-foreground leading-relaxed">
+            No package dependencies. Copy the code into your project and customize it to match your needs.
+          </p>
+        </div>
+      </div>
+
+      <div class="relative space-y-4">
+        <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-primary/10">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6 text-primary">
+            <circle cx="12" cy="12" r="10"/>
+            <path d="M12 6v6l4 2"/>
+          </svg>
+        </div>
+        <div class="space-y-2">
+          <h3 class="text-xl font-semibold text-foreground">Accessible</h3>
+          <p class="text-muted-foreground leading-relaxed">
+            Built with ARIA attributes and keyboard navigation. Follows WAI-ARIA design patterns for accessibility.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

data/app/views/showcase/v2/_forms.html.erb

@@ -0,0 +1,195 @@
+<!-- Forms Section -->
+<section class="py-16 md:py-24 bg-background border-t border-border">
+  <div class="container mx-auto px-4 md:px-6">
+    <div class="mx-auto max-w-[58rem] text-center mb-12">
+      <h2 class="text-3xl font-bold tracking-tight text-foreground sm:text-4xl">
+        Form Components in Action
+      </h2>
+      <p class="mt-4 text-lg text-muted-foreground">
+        Complete form examples showcasing authentication, payment, and settings interfaces
+      </p>
+    </div>
+
+    <div class="grid gap-6 lg:grid-cols-2 max-w-6xl mx-auto">
+      <!-- Create Account Form -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do %>
+          <h3 class="text-lg font-semibold text-foreground">Create an account</h3>
+          <p class="text-sm text-muted-foreground mt-2">
+            Enter your email below to create your account
+          </p>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-4">
+            <div class="grid gap-2">
+              <%= render M9sh::ButtonComponent.new(variant: :outline, class: "w-full") do %>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24" class="mr-2">
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                </svg>
+                Continue with GitHub
+              <% end %>
+              <%= render M9sh::ButtonComponent.new(variant: :outline, class: "w-full") do %>
+                <svg viewBox="0 0 24 24" class="mr-2 h-4 w-4">
+                  <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                  <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                  <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                  <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+                </svg>
+                Continue with Google
+              <% end %>
+            </div>
+            <div class="relative my-4">
+              <div class="absolute inset-0 flex items-center">
+                <%= render M9sh::SeparatorComponent.new %>
+              </div>
+              <div class="relative flex justify-center text-xs uppercase">
+                <span class="bg-background px-2 text-muted-foreground">Or continue with</span>
+              </div>
+            </div>
+            <div class="grid gap-2">
+              <%= render M9sh::InputComponent.new(type: :email, placeholder: "name@example.com") %>
+              <%= render M9sh::InputComponent.new(type: :password, placeholder: "Password") %>
+            </div>
+            <%= render M9sh::ButtonComponent.new(variant: :default, class: "w-full") do %>
+              Create Account
+            <% end %>
+            <p class="text-xs text-center text-muted-foreground">
+              By clicking continue, you agree to our
+              <a href="#" class="underline hover:text-primary"> Terms of Service</a>
+              and
+              <a href="#" class="underline hover:text-primary"> Privacy Policy</a>.
+            </p>
+          </div>
+        <% end %>
+      <% end %>
+
+      <!-- Payment Method Form -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do %>
+          <h3 class="text-lg font-semibold text-foreground">Payment Method</h3>
+          <p class="text-sm text-muted-foreground mt-2">
+            Add a new payment method to your account.
+          </p>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-4">
+            <div class="grid gap-4">
+              <div class="grid gap-2">
+                <%= render M9sh::LabelComponent.new(for: "card-name") do %>Name<% end %>
+                <%= render M9sh::InputComponent.new(id: "card-name", placeholder: "First Last") %>
+              </div>
+              <div class="grid gap-2">
+                <%= render M9sh::LabelComponent.new(for: "card-number") do %>Card number<% end %>
+                <%= render M9sh::InputComponent.new(id: "card-number", placeholder: "1234 5678 9012 3456") %>
+              </div>
+              <div class="grid grid-cols-3 gap-4">
+                <div class="grid gap-2">
+                  <%= render M9sh::LabelComponent.new(for: "month") do %>Month<% end %>
+                  <%= render M9sh::SelectComponent.new(id: "month") do |select| %>
+                    <% (1..12).each do |month| %>
+                      <% select.with_option(value: format("%02d", month)) do %>
+                        <%= format("%02d", month) %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                </div>
+                <div class="grid gap-2">
+                  <%= render M9sh::LabelComponent.new(for: "year") do %>Year<% end %>
+                  <%= render M9sh::SelectComponent.new(id: "year") do |select| %>
+                    <% (2024..2030).each do |year| %>
+                      <% select.with_option(value: year.to_s) do %>
+                        <%= year %>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                </div>
+                <div class="grid gap-2">
+                  <%= render M9sh::LabelComponent.new(for: "cvc") do %>CVC<% end %>
+                  <%= render M9sh::InputComponent.new(id: "cvc", placeholder: "123") %>
+                </div>
+              </div>
+            </div>
+            <%= render M9sh::ButtonComponent.new(variant: :default, class: "w-full") do %>
+              Continue
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+
+      <!-- Notifications Settings -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do %>
+          <h3 class="text-lg font-semibold text-foreground">Notifications</h3>
+          <p class="text-sm text-muted-foreground mt-2">
+            Choose what you want to be notified about.
+          </p>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-4">
+            <%= render M9sh::RadioGroupComponent.new(name: "notifications", default_value: "all") do |group| %>
+              <% group.with_item(
+                value: "all",
+                label: "Everything",
+                description: "Email me when anything important happens",
+                checked: true
+              ) %>
+              <% group.with_item(
+                value: "mentions",
+                label: "Available",
+                description: "Only when someone mentions me"
+              ) %>
+              <% group.with_item(
+                value: "none",
+                label: "Ignoring",
+                description: "Turn off all notifications"
+              ) %>
+            <% end %>
+            <%= render M9sh::ButtonComponent.new(variant: :default, class: "w-full mt-4") do %>
+              Save preferences
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+
+      <!-- Cookie Settings -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do %>
+          <h3 class="text-lg font-semibold text-foreground">Cookie Settings</h3>
+          <p class="text-sm text-muted-foreground mt-2">
+            Manage your cookie settings here.
+          </p>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-4">
+            <div class="space-y-4">
+              <div class="flex items-center justify-between">
+                <div class="space-y-0.5">
+                  <%= render M9sh::LabelComponent.new(for: "necessary") do %>Strictly Necessary<% end %>
+                  <p class="text-sm text-muted-foreground">These cookies are essential for the website to function properly.</p>
+                </div>
+                <%= render M9sh::SwitchComponent.new(id: "necessary", checked: true) %>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="space-y-0.5">
+                  <%= render M9sh::LabelComponent.new(for: "functional") do %>Functional Cookies<% end %>
+                  <p class="text-sm text-muted-foreground">These cookies enable personalized features.</p>
+                </div>
+                <%= render M9sh::SwitchComponent.new(id: "functional") %>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="space-y-0.5">
+                  <%= render M9sh::LabelComponent.new(for: "performance") do %>Performance Cookies<% end %>
+                  <p class="text-sm text-muted-foreground">These cookies help to improve website performance.</p>
+                </div>
+                <%= render M9sh::SwitchComponent.new(id: "performance") %>
+              </div>
+            </div>
+            <%= render M9sh::ButtonComponent.new(variant: :default, class: "w-full") do %>
+              Save preferences
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</section>