baldur 0.1.1

data/app/views/baldur/marketing/_hero_section.html.erb

@@ -0,0 +1,259 @@
+<%
+  raise ArgumentError, "Unsupported marketing hero variant" unless variant.to_sym == :solar_system
+  hero_style_nonce = content_security_policy_nonce if respond_to?(:content_security_policy_nonce)
+%>
+<style nonce="<%= hero_style_nonce %>">
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-callout,
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-source,
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-callout,
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-source {
+    position: absolute;
+    transform: translate(-50%, -50%);
+  }
+
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-callout,
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-callout {
+    white-space: nowrap;
+    border-radius: 9999px;
+    background-color: var(--surface-tonal-2);
+    color: var(--color-on-surface);
+    font-weight: 500;
+    letter-spacing: 0.02em;
+  }
+
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-callout {
+    border: 1px solid var(--color-outline);
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+    box-shadow: var(--elev-1);
+  }
+
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-callout {
+    border: 1px solid color-mix(in srgb, var(--color-outline) 50%, transparent);
+    padding: 0.5rem 0.75rem;
+    font-size: 10px;
+    text-align: center;
+  }
+
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-callout--1 { left: 22%; top: 28%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-callout--2 { left: 50%; top: 0%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-callout--3 { left: 80%; top: 32%; }
+
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-source--1 { left: 18%; top: 12%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-source--2 { left: 2%; top: 36%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-source--3 { left: 30%; top: 40%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-source--4 { left: 41%; top: 16%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-source--5 { left: 82%; top: 12%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-source--6 { left: 99%; top: 40%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-source--7 { left: 72%; top: 42%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__desktop-source--8 { left: 70%; top: 20%; }
+
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-callout--1 { left: 18%; top: 31%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-callout--2 { left: 50%; top: 9%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-callout--3 { left: 81%; top: 26%; }
+
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-source--1 { left: 18%; top: 18%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-source--2 { left: 10%; top: 43%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-source--3 { left: 27%; top: 52%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-source--4 { left: 40%; top: 20%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-source--5 { left: 82%; top: 18%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-source--6 { left: 90%; top: 43%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-source--7 { left: 73%; top: 52%; }
+  .marketing-hero[data-variant="solar_system"] .marketing-hero__mobile-source--8 { left: 60%; top: 25%; }
+</style>
+<section id="<%= id %>" class="<%= ["marketing-hero bg-surface px-12 sm:px-12", local_assigns[:classes]].compact.join(" ") %>" data-variant="<%= variant %>">
+  <div class="mx-auto max-w-6xl pt-24 text-center">
+    <h2 class="mx-auto max-w-4xl text-4xl text-on-surface md:text-6xl"><%= headline %></h2>
+    <p class="mx-auto mt-6 max-w-3xl text-lg text-soft"><%= body %></p>
+    <div class="mt-8 flex flex-col items-center gap-4">
+      <div class="flex flex-wrap items-center justify-center gap-4">
+        <%= ui_button(**primary_action) %>
+        <%= ui_button(**secondary_action) if secondary_action.present? %>
+      </div>
+      <% if supporting_action.present? %>
+        <%= link_to supporting_action.fetch(:href),
+                    class: "mt-1 inline-flex items-center gap-2 text-sm font-semibold text-primary hover:text-primary",
+                    data: supporting_action[:data] do %>
+          <%= ui_icon(supporting_action[:icon].presence || "play", class_name: "h-4 w-4") %>
+          <span><%= supporting_action.fetch(:label) %></span>
+        <% end %>
+      <% end %>
+    </div>
+
+    <div class="relative mt-8 hidden h-[26rem] overflow-hidden md:block">
+      <div class="absolute bottom-[-22rem] left-1/2 h-[44rem] w-[44rem] -translate-x-1/2">
+        <div class="pointer-events-none absolute inset-0" aria-hidden="true">
+          <div class="absolute inset-[12rem] rounded-full border border-outline"></div>
+          <div class="absolute inset-[6rem] rounded-full border border-outline"></div>
+          <div class="absolute inset-0 rounded-full border border-outline"></div>
+        </div>
+
+        <% if (callout = Array(callouts)[0]) %>
+          <div class="marketing-hero__desktop-callout marketing-hero__desktop-callout--1">
+            <%= callout[:label] %>
+          </div>
+        <% end %>
+        <% if (callout = Array(callouts)[1]) %>
+          <div class="marketing-hero__desktop-callout marketing-hero__desktop-callout--2">
+            <%= callout[:label] %>
+          </div>
+        <% end %>
+        <% if (callout = Array(callouts)[2]) %>
+          <div class="marketing-hero__desktop-callout marketing-hero__desktop-callout--3">
+            <%= callout[:label] %>
+          </div>
+        <% end %>
+
+        <% if (source = Array(orbit_sources)[0]) %>
+          <div class="marketing-hero__desktop-source marketing-hero__desktop-source--1">
+            <div class="flex h-[4.5rem] w-[4.5rem] items-center justify-center rounded-[22px] border border-outline-variant bg-surface-high p-4 shadow-[var(--elev-1)]">
+              <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-9 w-auto object-contain" %>
+            </div>
+          </div>
+        <% end %>
+        <% if (source = Array(orbit_sources)[1]) %>
+          <div class="marketing-hero__desktop-source marketing-hero__desktop-source--2">
+            <div class="flex h-[4.5rem] w-[4.5rem] items-center justify-center rounded-[22px] border border-outline-variant bg-surface-high p-4 shadow-[var(--elev-1)]">
+              <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-9 w-auto object-contain" %>
+            </div>
+          </div>
+        <% end %>
+        <% if (source = Array(orbit_sources)[2]) %>
+          <div class="marketing-hero__desktop-source marketing-hero__desktop-source--3">
+            <div class="flex h-[4.5rem] w-[4.5rem] items-center justify-center rounded-[22px] border border-outline-variant bg-surface-high p-4 shadow-[var(--elev-1)]">
+              <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-9 w-auto object-contain" %>
+            </div>
+          </div>
+        <% end %>
+        <% if (source = Array(orbit_sources)[3]) %>
+          <div class="marketing-hero__desktop-source marketing-hero__desktop-source--4">
+            <div class="flex h-[4.5rem] w-[4.5rem] items-center justify-center rounded-[22px] border border-outline-variant bg-surface-high p-4 shadow-[var(--elev-1)]">
+              <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-9 w-auto object-contain" %>
+            </div>
+          </div>
+        <% end %>
+        <% if (source = Array(orbit_sources)[4]) %>
+          <div class="marketing-hero__desktop-source marketing-hero__desktop-source--5">
+            <div class="flex h-[4.5rem] w-[4.5rem] items-center justify-center rounded-[22px] border border-outline-variant bg-surface-high p-4 shadow-[var(--elev-1)]">
+              <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-9 w-auto object-contain" %>
+            </div>
+          </div>
+        <% end %>
+        <% if (source = Array(orbit_sources)[5]) %>
+          <div class="marketing-hero__desktop-source marketing-hero__desktop-source--6">
+            <div class="flex h-[4.5rem] w-[4.5rem] items-center justify-center rounded-[22px] border border-outline-variant bg-surface-high p-4 shadow-[var(--elev-1)]">
+              <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-9 w-auto object-contain" %>
+            </div>
+          </div>
+        <% end %>
+        <% if (source = Array(orbit_sources)[6]) %>
+          <div class="marketing-hero__desktop-source marketing-hero__desktop-source--7">
+            <div class="flex h-[4.5rem] w-[4.5rem] items-center justify-center rounded-[22px] border border-outline-variant bg-surface-high p-4 shadow-[var(--elev-1)]">
+              <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-9 w-auto object-contain" %>
+            </div>
+          </div>
+        <% end %>
+        <% if (source = Array(orbit_sources)[7]) %>
+          <div class="marketing-hero__desktop-source marketing-hero__desktop-source--8">
+            <div class="flex h-[4.5rem] w-[4.5rem] items-center justify-center rounded-[22px] border border-outline-variant bg-surface-high p-4 shadow-[var(--elev-1)]">
+              <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-9 w-auto object-contain" %>
+            </div>
+          </div>
+        <% end %>
+
+        <div class="absolute left-1/2 top-[48%] flex h-36 w-36 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-outline bg-surface shadow-[var(--elev-2)]">
+          <%= image_tag centerpiece_image.fetch(:src), alt: centerpiece_image.fetch(:alt), class: "relative -top-10 h-32 w-32 rounded-[2rem] object-cover" %>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-6 md:hidden">
+      <div class="relative mx-auto h-[24rem] max-w-sm overflow-hidden">
+        <div class="absolute bottom-[-12rem] left-1/2 h-[24rem] w-[24rem] -translate-x-1/2">
+          <div class="pointer-events-none absolute inset-0" aria-hidden="true">
+            <div class="absolute inset-[7.5rem] rounded-full border border-outline-variant/14"></div>
+            <div class="absolute inset-[3.75rem] rounded-full border border-outline-variant/10"></div>
+            <div class="absolute inset-0 rounded-full border border-outline-variant/8"></div>
+          </div>
+
+          <% if (callout = Array(callouts)[0]) %>
+            <div class="marketing-hero__mobile-callout marketing-hero__mobile-callout--1">
+              <%= callout[:label] %>
+            </div>
+          <% end %>
+          <% if (callout = Array(callouts)[1]) %>
+            <div class="marketing-hero__mobile-callout marketing-hero__mobile-callout--2">
+              <%= callout[:label] %>
+            </div>
+          <% end %>
+          <% if (callout = Array(callouts)[2]) %>
+            <div class="marketing-hero__mobile-callout marketing-hero__mobile-callout--3">
+              <%= callout[:label] %>
+            </div>
+          <% end %>
+
+          <% if (source = Array(orbit_sources)[0]) %>
+            <div class="marketing-hero__mobile-source marketing-hero__mobile-source--1">
+              <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-outline-variant/60 bg-surface-high p-3 shadow-[var(--elev-1)]">
+                <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-8 w-auto object-contain" %>
+              </div>
+            </div>
+          <% end %>
+          <% if (source = Array(orbit_sources)[1]) %>
+            <div class="marketing-hero__mobile-source marketing-hero__mobile-source--2">
+              <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-outline-variant/60 bg-surface-high p-3 shadow-[var(--elev-1)]">
+                <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-8 w-auto object-contain" %>
+              </div>
+            </div>
+          <% end %>
+          <% if (source = Array(orbit_sources)[2]) %>
+            <div class="marketing-hero__mobile-source marketing-hero__mobile-source--3">
+              <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-outline-variant/60 bg-surface-high p-3 shadow-[var(--elev-1)]">
+                <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-8 w-auto object-contain" %>
+              </div>
+            </div>
+          <% end %>
+          <% if (source = Array(orbit_sources)[3]) %>
+            <div class="marketing-hero__mobile-source marketing-hero__mobile-source--4">
+              <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-outline-variant/60 bg-surface-high p-3 shadow-[var(--elev-1)]">
+                <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-8 w-auto object-contain" %>
+              </div>
+            </div>
+          <% end %>
+          <% if (source = Array(orbit_sources)[4]) %>
+            <div class="marketing-hero__mobile-source marketing-hero__mobile-source--5">
+              <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-outline-variant/60 bg-surface-high p-3 shadow-[var(--elev-1)]">
+                <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-8 w-auto object-contain" %>
+              </div>
+            </div>
+          <% end %>
+          <% if (source = Array(orbit_sources)[5]) %>
+            <div class="marketing-hero__mobile-source marketing-hero__mobile-source--6">
+              <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-outline-variant/60 bg-surface-high p-3 shadow-[var(--elev-1)]">
+                <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-8 w-auto object-contain" %>
+              </div>
+            </div>
+          <% end %>
+          <% if (source = Array(orbit_sources)[6]) %>
+            <div class="marketing-hero__mobile-source marketing-hero__mobile-source--7">
+              <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-outline-variant/60 bg-surface-high p-3 shadow-[var(--elev-1)]">
+                <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-8 w-auto object-contain" %>
+              </div>
+            </div>
+          <% end %>
+          <% if (source = Array(orbit_sources)[7]) %>
+            <div class="marketing-hero__mobile-source marketing-hero__mobile-source--8">
+              <div class="flex h-14 w-14 items-center justify-center rounded-2xl border border-outline-variant/60 bg-surface-high p-3 shadow-[var(--elev-1)]">
+                <%= image_tag source.fetch(:asset_path), alt: "#{source.fetch(:name)} logo", class: "max-h-8 w-auto object-contain" %>
+              </div>
+            </div>
+          <% end %>
+
+          <div class="absolute left-1/2 top-[45%] flex h-28 w-28 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-primary/14 bg-surface shadow-[var(--elev-2)]">
+            <%= image_tag centerpiece_image.fetch(:src), alt: centerpiece_image.fetch(:alt), class: "relative -top-1.5 h-[4.5rem] w-[4.5rem] rounded-[1.75rem] object-cover" %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

data/app/views/baldur/marketing/_pricing_tables.html.erb

@@ -0,0 +1,99 @@
+<%
+  resolved_billing_options = Array(billing_options)
+  initial_billing = resolved_billing_options.find { |option| option[:selected] }&.dig(:value) || resolved_billing_options.first&.dig(:value) || "monthly"
+  resolved_billing_options = resolved_billing_options.map do |option|
+    option_data = option.fetch(:data, {}).symbolize_keys
+
+    option.merge(
+      selected: option[:value] == initial_billing,
+      data: option_data.except(:action).merge(
+        action: ui_marketing_action_string("marketing-pricing#select", option_data[:action]),
+        marketing_pricing_target: "billingOption"
+      )
+    )
+  end
+%>
+<section class="<%= ["marketing-pricing-tables bg-surface px-6 py-20 sm:px-12", local_assigns[:classes]].compact.join(" ") %>" data-controller="marketing-pricing" data-marketing-pricing-billing-value="<%= initial_billing %>">
+  <div class="mx-auto max-w-6xl">
+    <div class="mx-auto max-w-3xl text-center">
+      <p class="text-sm font-semibold uppercase tracking-wide text-muted"><%= eyebrow %></p>
+      <h1 class="mt-4 text-4xl md:text-6xl"><%= headline %></h1>
+      <p class="mt-6 text-lg text-soft"><%= subheadline %></p>
+      <div class="mt-8 flex justify-center">
+        <%= ui_segmented_buttons(aria_label: "Billing period", items: resolved_billing_options) %>
+      </div>
+    </div>
+
+    <div class="mt-12 grid gap-6 lg:grid-cols-3">
+      <% Array(plans).each do |plan| %>
+        <% monthly = plan.dig(:prices, :monthly) %>
+        <% yearly = plan.dig(:prices, :yearly) %>
+        <% card_classes = [
+          "flex h-full flex-col rounded-[2rem] border p-6",
+          plan[:highlight_badge].present? ? "border-primary bg-primary/6 shadow-[var(--elev-2)]" : "border-outline bg-surface-high"
+        ].join(" ") %>
+        <article
+          class="<%= card_classes %>"
+          data-marketing-pricing-target="planCard"
+          data-plan-key="<%= plan[:key] %>"
+          data-monthly-primary="<%= monthly[:primary] %>"
+          data-monthly-secondary="<%= monthly[:secondary] %>"
+          data-yearly-primary="<%= yearly[:primary] %>"
+          data-yearly-secondary="<%= yearly[:secondary] %>"
+        >
+          <div>
+            <% if plan[:highlight_badge].present? %>
+              <p class="mb-3 inline-flex rounded-full bg-primary px-3 py-1 text-xs font-semibold text-on-primary"><%= plan[:highlight_badge] %></p>
+            <% end %>
+            <h2 class="text-2xl font-semibold"><%= plan[:name] %></h2>
+            <p class="mt-4 text-4xl font-semibold text-on-surface" data-role="price-primary"><%= monthly[:primary] %></p>
+            <p class="mt-2 text-sm text-soft" data-role="price-secondary"><%= monthly[:secondary] %></p>
+            <p class="mt-4 text-sm text-soft"><%= plan[:subtitle] %></p>
+          </div>
+
+          <ul class="mt-6 space-y-3 text-sm text-on-surface">
+            <% Array(plan[:card_bullets]).each do |bullet| %>
+              <li class="flex items-start gap-3">
+                <span class="mt-0.5 text-primary"><%= ui_icon("check", class_name: "h-4 w-4") %></span>
+                <span><%= bullet %></span>
+              </li>
+            <% end %>
+          </ul>
+
+          <div class="mt-8 rounded-[1.5rem] bg-surface p-4 text-sm text-soft">
+            <p class="font-semibold text-on-surface">Additional usage credits</p>
+            <p class="mt-2"><%= plan.dig(:capabilities, :extra_credits) %></p>
+          </div>
+
+          <div class="mt-8 pt-4">
+            <%= ui_button(**plan.fetch(:cta)) %>
+          </div>
+        </article>
+      <% end %>
+    </div>
+
+    <div class="mt-12 rounded-[2rem] border border-outline bg-surface-high p-6 lg:p-8">
+      <div class="max-w-3xl">
+        <h2 class="text-3xl font-semibold"><%= shared_capabilities[:title] %></h2>
+        <p class="mt-3 text-sm text-soft"><%= shared_capabilities[:subtitle] %></p>
+      </div>
+      <ul class="mt-8 space-y-4 text-sm text-soft">
+        <% Array(shared_capabilities[:items]).each do |item| %>
+          <li class="flex items-start gap-3">
+            <span class="mt-0.5 text-primary"><%= ui_icon("check", class_name: "h-4 w-4") %></span>
+            <p class="text-base">
+              <span class="font-semibold text-on-surface"><%= item[:title] %></span>
+              <%= item[:body] %>
+            </p>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+
+    <% if fair_use_link.present? %>
+      <div class="mt-6 text-center text-sm">
+        <%= link_to fair_use_link.fetch(:label), fair_use_link.fetch(:href), class: fair_use_link[:class].presence || "font-semibold text-primary hover:text-primary" %>
+      </div>
+    <% end %>
+  </div>
+</section>

data/app/views/baldur/marketing/_testimonials_section.html.erb

@@ -0,0 +1,80 @@
+<%
+  raise ArgumentError, "Unsupported testimonials variant" unless variant.to_sym == :bento
+
+  cards = Array(items).first(4)
+%>
+<section id="<%= id %>" class="<%= ["marketing-testimonials-section bg-surface px-12 py-16 sm:px-12", local_assigns[:classes]].compact.join(" ") %>" data-variant="<%= variant %>">
+  <div class="mx-auto max-w-6xl">
+    <h2><%= title %></h2>
+    <div class="mt-8 grid gap-6 md:grid-cols-2">
+      <% if cards.first.present? %>
+        <article class="flex h-full flex-col rounded-3xl border border-outline bg-surface-high p-7 text-left">
+          <div class="flex items-start justify-between gap-4">
+            <div>
+              <p class="text-4xl font-semibold text-on-surface"><%= cards[0][:heading] %></p>
+              <p class="mt-1 text-2xl font-medium text-muted"><%= cards[0][:subheading] %></p>
+            </div>
+            <%= ui_icon("quote", class_name: "h-8 w-8 text-primary") %>
+          </div>
+          <p class="mt-8 text-lg text-soft"><%= cards[0][:quote] %></p>
+          <div class="mt-auto pt-6 text-xs text-muted">
+            <p class="font-semibold text-on-surface"><%= cards[0][:name] %></p>
+            <p><%= cards[0][:company] %></p>
+          </div>
+        </article>
+      <% end %>
+      <div class="grid gap-6">
+        <% if cards[1].present? %>
+          <article class="flex h-full flex-col rounded-3xl border border-outline-variant bg-primary/10 p-6 text-left">
+            <div class="flex items-start justify-between gap-4">
+              <div>
+                <p class="text-3xl font-semibold text-on-surface"><%= cards[1][:heading] %></p>
+                <p class="mt-1 text-xl font-medium text-muted"><%= cards[1][:subheading] %></p>
+              </div>
+              <%= ui_icon("quote", class_name: "h-6 w-6 text-primary") %>
+            </div>
+            <p class="mt-4 text-base text-soft"><%= cards[1][:quote] %></p>
+            <div class="mt-auto pt-5 text-xs text-muted">
+              <p class="font-semibold text-on-surface"><%= cards[1][:name] %></p>
+              <p><%= cards[1][:company] %></p>
+            </div>
+          </article>
+        <% end %>
+        <div class="grid gap-6 sm:grid-cols-2">
+          <% if cards[2].present? %>
+            <article class="flex h-full flex-col rounded-3xl border border-outline-variant bg-surface-lowest p-6 text-left">
+              <div class="flex items-start justify-between gap-4">
+                <div>
+                  <p class="text-2xl font-semibold text-on-surface"><%= cards[2][:heading] %></p>
+                  <p class="mt-1 text-lg font-medium text-muted"><%= cards[2][:subheading] %></p>
+                </div>
+                <%= ui_icon("quote", class_name: "h-6 w-6 text-primary") %>
+              </div>
+              <p class="mt-4 text-base text-soft"><%= cards[2][:quote] %></p>
+              <div class="mt-auto pt-5 text-xs text-muted">
+                <p class="font-semibold text-on-surface"><%= cards[2][:name] %></p>
+                <p><%= cards[2][:company] %></p>
+              </div>
+            </article>
+          <% end %>
+          <% if cards[3].present? %>
+            <article class="flex h-full flex-col rounded-3xl border border-outline bg-surface-high p-6 text-left">
+              <div class="flex items-start justify-between gap-4">
+                <div>
+                  <p class="text-2xl font-semibold text-on-surface"><%= cards[3][:heading] %></p>
+                  <p class="mt-1 text-lg font-medium text-muted"><%= cards[3][:subheading] %></p>
+                </div>
+                <%= ui_icon("quote", class_name: "h-6 w-6 text-primary") %>
+              </div>
+              <p class="mt-4 text-base text-soft"><%= cards[3][:quote] %></p>
+              <div class="mt-auto pt-5 text-xs text-muted">
+                <p class="font-semibold text-on-surface"><%= cards[3][:name] %></p>
+                <p><%= cards[3][:company] %></p>
+              </div>
+            </article>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

data/app/views/baldur/marketing/_top_nav.html.erb

@@ -0,0 +1,28 @@
+<%
+  resolved_brand = local_assigns.fetch(:brand).symbolize_keys
+  resolved_brand[:logo_class] = resolved_brand[:logo_class].presence || "h-8 w-8 rounded-lg"
+  resolved_brand[:wordmark_class] = resolved_brand[:wordmark_class].presence || "text-2xl font-bold text-primary"
+  brand_markup = content_tag(:span, class: ["brand-lockup", resolved_brand[:wrapper_class], "text-primary"].compact.join(" ")) do
+    safe_join(
+      [
+        image_tag(resolved_brand[:logo_src], alt: resolved_brand[:logo_alt], class: ["brand-lockup__logo", resolved_brand[:logo_class]].join(" ")),
+        content_tag(:span, resolved_brand[:wordmark], class: ["brand-lockup__wordmark", resolved_brand[:wordmark_class]].join(" "))
+      ]
+    )
+  end
+  brand_markup = link_to(brand_markup, resolved_brand[:href], class: "inline-flex") if resolved_brand[:href].present?
+%>
+<header class="<%= ["marketing-top-nav relative z-50 border-b border-outline-variant bg-surface-high backdrop-blur", local_assigns[:classes]].compact.join(" ") %>">
+  <div class="mx-auto flex h-16 max-w-6xl items-center px-12">
+    <%= brand_markup %>
+    <nav class="ml-auto flex items-center gap-3 text-sm text-soft">
+      <% Array(links).each do |link| %>
+        <%= link_to link.fetch(:label), link.fetch(:href), class: link[:class] %>
+      <% end %>
+      <% if theme_toggle.present? %>
+        <%= ui_marketing_render_content(theme_toggle) %>
+      <% end %>
+      <%= ui_button(**primary_action) %>
+    </nav>
+  </div>
+</header>

data/app/views/baldur/optional/_auth_page.html.erb

@@ -0,0 +1,21 @@
+<%
+  resolved_brand_path = local_assigns[:brand_path].presence || "#"
+  auth_shell_classes = ["auth-page", "min-h-screen bg-surface-low px-6 py-12", local_assigns[:shell_class]].compact.join(" ")
+  auth_card_class = local_assigns[:card_class]
+%>
+
+<div class="<%= auth_shell_classes %>">
+  <div class="mx-auto max-w-md">
+    <div class="mb-6 flex justify-center">
+      <%= link_to resolved_brand_path, class: "inline-flex items-center justify-center no-underline" do %>
+        <%= render "shared/brand_lockup",
+                   logo_class: "h-10 w-10 rounded-xl",
+                   wordmark_class: "text-xl font-semibold text-base-content" %>
+      <% end %>
+    </div>
+
+    <%= ui_card(title: title, description: description, classes: auth_card_class || "shadow-sm") do %>
+      <%= body %>
+    <% end %>
+  </div>
+</div>

data/app/views/baldur/optional/_google_sign_in_button.html.erb

@@ -0,0 +1,19 @@
+<%
+  href = local_assigns[:href] || Baldur.config.default_google_sign_in_path
+  label = local_assigns[:label] || "Sign in with Google"
+  block = local_assigns[:block].present?
+  method = local_assigns[:method]
+  data = local_assigns[:data]
+  size = local_assigns[:size] || :md
+  variant = local_assigns[:variant] || :outlined
+%>
+<%= ui_button(
+      label: label,
+      href: href,
+      method: method,
+      data: data,
+      variant: variant,
+      size: size,
+      block: block,
+      icon: raw('<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" class="h-5 w-5"><path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/><path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/><path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/><path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/><path fill="none" d="M0 0h48v48H0z"/></svg>')
+    ) %>

data/app/views/baldur/optional/_panel_right.html.erb

@@ -0,0 +1 @@
+<%= render "baldur/optional/panel_secondary", **local_assigns %>

data/app/views/baldur/optional/_panel_secondary.html.erb

@@ -0,0 +1,34 @@
+<%
+  shell_data = (local_assigns[:shell_data] || {}).deep_dup
+  panel_data = (local_assigns[:panel_data] || {}).deep_dup
+  trigger_data = (local_assigns[:trigger_data] || {}).deep_dup
+  shell_data[:controller] = [shell_data[:controller], "panel-secondary"].compact.join(" ")
+  trigger_data[:action] = [trigger_data[:action], "panel-secondary#toggle"].compact.join(" ")
+  trigger_data[:panel_secondary_target] = "trigger"
+  panel_data[:panel_secondary_target] = "panel"
+%>
+<%= content_tag :div, class: ["panel-secondary-shell", shell_class].compact.join(" "), data: shell_data do %>
+  <%= button_tag type: "button",
+                 class: ["button button--filled button--lg panel-secondary__trigger", trigger_class].compact.join(" "),
+                 data: trigger_data,
+                 aria: { controls: id, expanded: false } do %>
+    <%= ui_icon(trigger_icon, class_name: "h-5 w-5") %>
+    <span><%= trigger_label %></span>
+  <% end %>
+
+  <%= content_tag :aside,
+                  id: id,
+                  class: ["panel-secondary", panel_class].compact.join(" "),
+                  data: panel_data,
+                  aria: { hidden: true } do %>
+    <header class="panel-secondary__header">
+      <h3 class="text-lg font-semibold text-on-surface"><%= title %></h3>
+      <button type="button" class="icon-button" data-action="panel-secondary#close" aria-label="Close panel">
+        <%= ui_icon("x", class_name: "h-5 w-5") %>
+      </button>
+    </header>
+    <div class="panel-secondary__body">
+      <%= body %>
+    </div>
+  <% end %>
+<% end %>

data/baldur.gemspec

@@ -0,0 +1,30 @@
+require_relative "lib/baldur/version"
+
+Gem::Specification.new do |spec|
+  spec.name        = "baldur"
+  spec.version     = Baldur::VERSION
+  spec.authors     = [ "Varun Murkar" ]
+  spec.email       = [ "hello@varunmurkar.com" ]
+  spec.summary     = "Reusable Rails UI engine for same-stack application interfaces"
+  spec.description = "Baldur packages reusable Rails view helpers, components, styles, and Stimulus controllers."
+  spec.homepage    = "https://github.com/varunmurkar/baldur"
+  spec.license     = "MIT"
+
+  spec.files = Dir.chdir(__dir__) do
+    Dir[
+      "{app,config,lib,script,test}/**/*",
+      "README.md",
+      "TODO.md",
+      "LICENSE",
+      "baldur.gemspec",
+      "Gemfile"
+    ].select { |path| File.file?(path) }
+  end
+
+  spec.required_ruby_version = ">= 3.3.0"
+
+  spec.add_dependency "importmap-rails"
+  spec.add_dependency "lucide-rails"
+  spec.add_dependency "rails", ">= 8.1.0"
+  spec.add_dependency "tailwindcss-rails"
+end

data/config/importmap.rb

@@ -0,0 +1,2 @@
+pin_all_from File.expand_path("../app/assets/javascripts/baldur/controllers", __dir__), under: "baldur/controllers"
+pin_all_from File.expand_path("../app/assets/javascripts/baldur/lib", __dir__), under: "baldur/lib"

data/lib/baldur/configuration.rb

@@ -0,0 +1,24 @@
+module Baldur
+  class Configuration
+    attr_accessor :warning_dependency_resolver,
+                  :dependency_dataset_name_resolver,
+                  :unavailable_fallback_message,
+                  :marketing_brand,
+                  :default_google_sign_in_path,
+                  :theme_storage_key
+
+    def initialize
+      @warning_dependency_resolver = ->(_warning_keys) { [] }
+      @dependency_dataset_name_resolver = ->(dataset_key) { dataset_key.to_s.humanize }
+      @unavailable_fallback_message = "Missing metric or raw data required to compute this value."
+      @marketing_brand = {
+        name: "Brand",
+        wordmark: "Brand",
+        logo_src: "/icon.png",
+        logo_alt: "Brand logo"
+      }
+      @default_google_sign_in_path = nil
+      @theme_storage_key = "baldur.theme"
+    end
+  end
+end

data/lib/baldur/engine.rb

@@ -0,0 +1,10 @@
+module Baldur
+  class Engine < ::Rails::Engine
+    isolate_namespace Baldur
+
+    initializer "baldur.importmap", before: "importmap" do |app|
+      app.config.importmap.paths << Engine.root.join("config/importmap.rb")
+      app.config.importmap.cache_sweepers << Engine.root.join("app/assets/javascripts")
+    end
+  end
+end

data/lib/baldur/version.rb

@@ -0,0 +1,3 @@
+module Baldur
+  VERSION = "0.1.1".freeze
+end

data/lib/baldur.rb

@@ -0,0 +1,17 @@
+require "rails"
+
+require_relative "baldur/version"
+require_relative "baldur/configuration"
+require_relative "baldur/engine"
+
+module Baldur
+  class << self
+    def config
+      @config ||= Configuration.new
+    end
+
+    def configure
+      yield(config)
+    end
+  end
+end