refactor: extract hero_section to shared ShopComponents module

Create a centered hero section component with:
- Title (h1) and description (p)
- Optional CTA button with preview/live mode support
- Configurable background (:base or :sunken)

Used in: home page (with CTA), about page (without CTA)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lib/simpleshop_theme_web/components/shop_components.ex

@@ -859,4 +859,79 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     |> Enum.reject(&(&1 == ""))
     |> Enum.join(" ")
   end
+
+  @doc """
+  Renders a centered hero section with title, description, and optional CTA.
+
+  ## Attributes
+
+  * `title` - Required. The main heading text.
+  * `description` - Required. The description paragraph text.
+  * `background` - Background style. Either `:base` (default) or `:sunken`.
+  * `cta_text` - Optional. Text for the CTA button.
+  * `cta_page` - Optional. Page to navigate to on click (for preview mode).
+  * `mode` - Either `:live` (default) or `:preview`.
+
+  ## Examples
+
+      <.hero_section
+        title="Original designs, printed on demand"
+        description="From art prints to apparel – unique products created by independent artists."
+        cta_text="Shop the collection"
+        cta_page="collection"
+        mode={:preview}
+      />
+
+      <.hero_section
+        title="About the studio"
+        description="Nature photography, printed with care"
+        background={:sunken}
+      />
+  """
+  attr :title, :string, required: true
+  attr :description, :string, required: true
+  attr :background, :atom, default: :base
+  attr :cta_text, :string, default: nil
+  attr :cta_page, :string, default: nil
+  attr :cta_href, :string, default: nil
+  attr :mode, :atom, default: :live
+
+  def hero_section(assigns) do
+    ~H"""
+    <section
+      class="text-center"
+      style={"padding: var(--space-2xl) var(--space-lg); background-color: var(--t-surface-#{@background});"}
+    >
+      <h1
+        class="text-3xl md:text-4xl mb-4"
+        style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking); color: var(--t-text-primary);"
+      >
+        <%= @title %>
+      </h1>
+      <p class="text-lg max-w-lg mx-auto mb-8" style="color: var(--t-text-secondary); line-height: 1.6;">
+        <%= @description %>
+      </p>
+      <%= if @cta_text do %>
+        <%= if @mode == :preview do %>
+          <button
+            phx-click="change_preview_page"
+            phx-value-page={@cta_page}
+            class="px-6 py-3 font-medium transition-all"
+            style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); cursor: pointer; border: none;"
+          >
+            <%= @cta_text %>
+          </button>
+        <% else %>
+          <a
+            href={@cta_href || "/products"}
+            class="inline-block px-6 py-3 font-medium transition-all"
+            style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); text-decoration: none;"
+          >
+            <%= @cta_text %>
+          </a>
+        <% end %>
+      <% end %>
+    </section>
+    """
+  end
 end