add block previews, picker thumbnails and newsletter settings

Block cards now show a one-line content summary below the name. Block picker items include SVG wireframe thumbnails. Newsletter block marked as decorative with configurable title/description and form submission prevented on the shop side. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-28 20:34:52 +00:00
parent 0a7982dfe8
commit 8f989d892d
6 changed files with 636 additions and 12 deletions
--- a/lib/berrypod_web/components/block_editor_components.ex
+++ b/lib/berrypod_web/components/block_editor_components.ex
@@ -15,6 +15,7 @@ defmodule BerrypodWeb.BlockEditorComponents do
  import BerrypodWeb.CoreComponents, only: [icon: 1]

  alias Berrypod.Pages.{BlockEditor, BlockTypes}
+  alias BerrypodWeb.BlockThumbnails

  # ── Block card ─────────────────────────────────────────────────

@@ -28,12 +29,14 @@ defmodule BerrypodWeb.BlockEditorComponents do
    block_type = BlockTypes.get(assigns.block["type"])
    has_settings = BlockEditor.has_settings?(assigns.block)
    expanded = MapSet.member?(assigns.expanded, assigns.block["id"])
+    preview = block_preview(assigns.block, block_type)

    assigns =
      assigns
      |> assign(:block_type, block_type)
      |> assign(:has_settings, has_settings)
      |> assign(:is_expanded, expanded)
+      |> assign(:preview, preview)

    ~H"""
    <div
@@ -49,9 +52,12 @@ defmodule BerrypodWeb.BlockEditorComponents do
          <.icon name={(@block_type && @block_type.icon) || "hero-puzzle-piece"} class="size-5" />
        </span>

-        <span class="block-card-name">
-          {(@block_type && @block_type.name) || @block["type"]}
-        </span>
+        <div class="block-card-info">
+          <span class="block-card-name">
+            {(@block_type && @block_type.name) || @block["type"]}
+          </span>
+          <span :if={@preview} class="block-card-preview">{@preview}</span>
+        </div>

        <span class="block-card-controls">
          <button
@@ -111,6 +117,7 @@ defmodule BerrypodWeb.BlockEditorComponents do
        :if={@is_expanded}
        block={@block}
        schema={@block_type.settings_schema}
+        hint={@block_type[:hint]}
        event_prefix={@event_prefix}
      />
    </div>
@@ -121,6 +128,7 @@ defmodule BerrypodWeb.BlockEditorComponents do

  attr :block, :map, required: true
  attr :schema, :list, required: true
+  attr :hint, :string, default: nil
  attr :event_prefix, :string, default: ""

  def block_settings_form(assigns) do
@@ -129,6 +137,9 @@ defmodule BerrypodWeb.BlockEditorComponents do

    ~H"""
    <div class="block-card-settings" id={"block-settings-#{@block["id"]}"}>
+      <p :if={@hint} class="block-settings-hint">
+        <.icon name="hero-information-circle-mini" class="size-4" /> {@hint}
+      </p>
      <form phx-change={"#{@event_prefix}update_block_settings"}>
        <input type="hidden" name="block_id" value={@block["id"]} />

@@ -454,6 +465,7 @@ defmodule BerrypodWeb.BlockEditorComponents do
            phx-value-type={type}
            class="block-picker-item"
          >
+            <BlockThumbnails.block_thumbnail type={type} />
            <.icon name={def.icon} class="size-5" />
            <span class="block-picker-item-name">{def.name}</span>
            <span :if={def[:description]} class="block-picker-item-desc">
@@ -564,4 +576,69 @@ defmodule BerrypodWeb.BlockEditorComponents do
    </div>
    """
  end
+
+  # ── Block preview ──────────────────────────────────────────────
+
+  # Extracts a short one-line preview from block settings for display in the card
+  defp block_preview(_block, nil), do: nil
+
+  defp block_preview(block, block_type) do
+    settings = block["settings"] || %{}
+    schema = block_type.settings_schema
+
+    # Try text/textarea fields first, then selects, then repeaters
+    find_text_preview(settings, schema) ||
+      find_select_preview(settings, schema) ||
+      find_repeater_preview(settings, schema)
+  end
+
+  defp find_text_preview(settings, schema) do
+    schema
+    |> Enum.filter(&(&1.type in [:text, :textarea]))
+    |> Enum.find_value(fn field ->
+      case settings[field.key] do
+        val when is_binary(val) and val != "" ->
+          truncate(val, 60)
+
+        _ ->
+          nil
+      end
+    end)
+  end
+
+  defp find_select_preview(settings, schema) do
+    schema
+    |> Enum.filter(&(&1.type == :select))
+    |> Enum.find_value(fn field ->
+      case settings[field.key] do
+        val when is_binary(val) and val != "" -> "#{field.label}: #{val}"
+        _ -> nil
+      end
+    end)
+  end
+
+  defp find_repeater_preview(settings, schema) do
+    schema
+    |> Enum.filter(&(&1.type == :repeater))
+    |> Enum.find_value(fn field ->
+      case settings[field.key] do
+        items when is_list(items) and items != [] ->
+          count = length(items)
+          "#{count} #{if count == 1, do: "item", else: "items"}"
+
+        _ ->
+          nil
+      end
+    end)
+  end
+
+  defp truncate(str, max) do
+    str = String.replace(str, ~r/\s+/, " ") |> String.trim()
+
+    if String.length(str) > max do
+      String.slice(str, 0, max) <> "..."
+    else
+      str
+    end
+  end
 end
--- a/lib/berrypod_web/components/block_thumbnails.ex
+++ b/lib/berrypod_web/components/block_thumbnails.ex
@@ -0,0 +1,478 @@
+defmodule BerrypodWeb.BlockThumbnails do
+  @moduledoc """
+  Tiny SVG wireframe thumbnails for each block type.
+
+  Used in the block picker to give a visual hint of what each block looks like.
+  Each thumbnail is an 80x48 SVG with simple geometric shapes.
+  """
+
+  use Phoenix.Component
+
+  attr :type, :string, required: true
+
+  def block_thumbnail(assigns) do
+    ~H"""
+    <svg
+      viewBox="0 0 80 48"
+      class="block-picker-thumb"
+      role="img"
+      aria-hidden="true"
+    >
+      <.thumb_shapes type={@type} />
+    </svg>
+    """
+  end
+
+  # ── Hero banner ──────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "hero"} = assigns) do
+    ~H"""
+    <rect x="0" y="0" width="80" height="48" rx="2" fill="currentColor" opacity="0.08" />
+    <rect x="20" y="10" width="40" height="4" rx="1" fill="currentColor" opacity="0.35" />
+    <rect x="24" y="18" width="32" height="3" rx="1" fill="currentColor" opacity="0.2" />
+    <rect x="28" y="30" width="24" height="7" rx="2" fill="currentColor" opacity="0.25" />
+    """
+  end
+
+  # ── Featured products ────────────────────────────────────────────
+  defp thumb_shapes(%{type: "featured_products"} = assigns) do
+    ~H"""
+    <rect x="2" y="2" width="17" height="20" rx="2" fill="currentColor" opacity="0.12" />
+    <rect x="22" y="2" width="17" height="20" rx="2" fill="currentColor" opacity="0.12" />
+    <rect x="42" y="2" width="17" height="20" rx="2" fill="currentColor" opacity="0.12" />
+    <rect x="62" y="2" width="17" height="20" rx="2" fill="currentColor" opacity="0.12" />
+    <rect x="4" y="25" width="13" height="2" rx="1" fill="currentColor" opacity="0.25" />
+    <rect x="24" y="25" width="13" height="2" rx="1" fill="currentColor" opacity="0.25" />
+    <rect x="44" y="25" width="13" height="2" rx="1" fill="currentColor" opacity="0.25" />
+    <rect x="64" y="25" width="13" height="2" rx="1" fill="currentColor" opacity="0.25" />
+    <rect x="4" y="30" width="8" height="2" rx="1" fill="currentColor" opacity="0.15" />
+    <rect x="24" y="30" width="8" height="2" rx="1" fill="currentColor" opacity="0.15" />
+    <rect x="44" y="30" width="8" height="2" rx="1" fill="currentColor" opacity="0.15" />
+    <rect x="64" y="30" width="8" height="2" rx="1" fill="currentColor" opacity="0.15" />
+    """
+  end
+
+  # ── Image + text ─────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "image_text"} = assigns) do
+    ~H"""
+    <rect x="2" y="4" width="34" height="40" rx="2" fill="currentColor" opacity="0.12" />
+    <rect x="42" y="8" width="32" height="4" rx="1" fill="currentColor" opacity="0.3" />
+    <rect x="42" y="16" width="28" height="3" rx="1" fill="currentColor" opacity="0.15" />
+    <rect x="42" y="22" width="30" height="3" rx="1" fill="currentColor" opacity="0.15" />
+    <rect x="42" y="28" width="20" height="3" rx="1" fill="currentColor" opacity="0.15" />
+    <rect x="42" y="36" width="16" height="5" rx="2" fill="currentColor" opacity="0.2" />
+    """
+  end
+
+  # ── Category navigation ──────────────────────────────────────────
+  defp thumb_shapes(%{type: "category_nav"} = assigns) do
+    ~H"""
+    <rect x="4" y="18" width="16" height="12" rx="6" fill="currentColor" opacity="0.15" />
+    <rect x="23" y="18" width="18" height="12" rx="6" fill="currentColor" opacity="0.15" />
+    <rect x="44" y="18" width="14" height="12" rx="6" fill="currentColor" opacity="0.15" />
+    <rect x="61" y="18" width="16" height="12" rx="6" fill="currentColor" opacity="0.15" />
+    """
+  end
+
+  # ── Newsletter signup ────────────────────────────────────────────
+  defp thumb_shapes(%{type: "newsletter_card"} = assigns) do
+    ~H"""
+    <rect
+      x="4"
+      y="4"
+      width="72"
+      height="40"
+      rx="3"
+      fill="currentColor"
+      opacity="0.06"
+      stroke="currentColor"
+      stroke-opacity="0.12"
+      stroke-width="1"
+    />
+    <rect x="20" y="10" width="40" height="4" rx="1" fill="currentColor" opacity="0.3" />
+    <rect x="24" y="18" width="32" height="3" rx="1" fill="currentColor" opacity="0.15" />
+    <rect
+      x="14"
+      y="28"
+      width="36"
+      height="8"
+      rx="2"
+      fill="currentColor"
+      opacity="0.1"
+      stroke="currentColor"
+      stroke-opacity="0.15"
+      stroke-width="0.5"
+    />
+    <rect x="52" y="28" width="16" height="8" rx="2" fill="currentColor" opacity="0.2" />
+    """
+  end
+
+  # ── Social links ─────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "social_links_card"} = assigns) do
+    ~H"""
+    <rect
+      x="4"
+      y="4"
+      width="72"
+      height="40"
+      rx="3"
+      fill="currentColor"
+      opacity="0.06"
+      stroke="currentColor"
+      stroke-opacity="0.12"
+      stroke-width="1"
+    />
+    <rect x="20" y="10" width="40" height="4" rx="1" fill="currentColor" opacity="0.25" />
+    <circle cx="24" cy="30" r="5" fill="currentColor" opacity="0.15" />
+    <circle cx="36" cy="30" r="5" fill="currentColor" opacity="0.15" />
+    <circle cx="48" cy="30" r="5" fill="currentColor" opacity="0.15" />
+    <circle cx="60" cy="30" r="5" fill="currentColor" opacity="0.15" />
+    """
+  end
+
+  # ── Info card ────────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "info_card"} = assigns) do
+    ~H"""
+    <rect
+      x="4"
+      y="4"
+      width="72"
+      height="40"
+      rx="3"
+      fill="currentColor"
+      opacity="0.06"
+      stroke="currentColor"
+      stroke-opacity="0.12"
+      stroke-width="1"
+    />
+    <rect x="10" y="10" width="20" height="3" rx="1" fill="currentColor" opacity="0.25" />
+    <rect x="10" y="18" width="14" height="2" rx="1" fill="currentColor" opacity="0.2" />
+    <rect x="40" y="18" width="28" height="2" rx="1" fill="currentColor" opacity="0.12" />
+    <rect x="10" y="24" width="14" height="2" rx="1" fill="currentColor" opacity="0.2" />
+    <rect x="40" y="24" width="22" height="2" rx="1" fill="currentColor" opacity="0.12" />
+    <rect x="10" y="30" width="14" height="2" rx="1" fill="currentColor" opacity="0.2" />
+    <rect x="40" y="30" width="26" height="2" rx="1" fill="currentColor" opacity="0.12" />
+    """
+  end
+
+  # ── Trust badges ─────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "trust_badges"} = assigns) do
+    ~H"""
+    <circle cx="16" cy="18" r="7" fill="currentColor" opacity="0.1" />
+    <circle cx="40" cy="18" r="7" fill="currentColor" opacity="0.1" />
+    <circle cx="64" cy="18" r="7" fill="currentColor" opacity="0.1" />
+    <rect x="8" y="30" width="16" height="2" rx="1" fill="currentColor" opacity="0.15" />
+    <rect x="32" y="30" width="16" height="2" rx="1" fill="currentColor" opacity="0.15" />
+    <rect x="56" y="30" width="16" height="2" rx="1" fill="currentColor" opacity="0.15" />
+    """
+  end
+
+  # ── Customer reviews ─────────────────────────────────────────────
+  defp thumb_shapes(%{type: "reviews_section"} = assigns) do
+    ~H"""
+    <rect
+      x="2"
+      y="2"
+      width="24"
+      height="44"
+      rx="2"
+      fill="currentColor"
+      opacity="0.06"
+      stroke="currentColor"
+      stroke-opacity="0.1"
+      stroke-width="0.5"
+    />
+    <rect
+      x="28"
+      y="2"
+      width="24"
+      height="44"
+      rx="2"
+      fill="currentColor"
+      opacity="0.06"
+      stroke="currentColor"
+      stroke-opacity="0.1"
+      stroke-width="0.5"
+    />
+    <rect
+      x="54"
+      y="2"
+      width="24"
+      height="44"
+      rx="2"
+      fill="currentColor"
+      opacity="0.06"
+      stroke="currentColor"
+      stroke-opacity="0.1"
+      stroke-width="0.5"
+    />
+    <rect x="6" y="8" width="16" height="2" rx="1" fill="currentColor" opacity="0.25" />
+    <rect x="32" y="8" width="16" height="2" rx="1" fill="currentColor" opacity="0.25" />
+    <rect x="58" y="8" width="16" height="2" rx="1" fill="currentColor" opacity="0.25" />
+    <rect x="6" y="14" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
+    <rect x="32" y="14" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
+    <rect x="58" y="14" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
+    """
+  end
+
+  # ── Spacer ───────────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "spacer"} = assigns) do
+    ~H"""
+    <line
+      x1="40"
+      y1="8"
+      x2="40"
+      y2="16"
+      stroke="currentColor"
+      stroke-opacity="0.2"
+      stroke-width="1"
+      stroke-dasharray="2 2"
+    />
+    <rect
+      x="30"
+      y="18"
+      width="20"
+      height="12"
+      rx="1"
+      fill="currentColor"
+      opacity="0.06"
+      stroke="currentColor"
+      stroke-opacity="0.15"
+      stroke-width="0.5"
+      stroke-dasharray="2 2"
+    />
+    <line
+      x1="40"
+      y1="32"
+      x2="40"
+      y2="40"
+      stroke="currentColor"
+      stroke-opacity="0.2"
+      stroke-width="1"
+      stroke-dasharray="2 2"
+    />
+    """
+  end
+
+  # ── Divider ──────────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "divider"} = assigns) do
+    ~H"""
+    <line
+      x1="8"
+      y1="24"
+      x2="72"
+      y2="24"
+      stroke="currentColor"
+      stroke-opacity="0.25"
+      stroke-width="1.5"
+    />
+    """
+  end
+
+  # ── Button ───────────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "button"} = assigns) do
+    ~H"""
+    <rect x="22" y="16" width="36" height="16" rx="4" fill="currentColor" opacity="0.2" />
+    <rect x="28" y="22" width="24" height="4" rx="1" fill="currentColor" opacity="0.3" />
+    """
+  end
+
+  # ── Video embed ──────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "video_embed"} = assigns) do
+    ~H"""
+    <rect x="4" y="4" width="72" height="40" rx="2" fill="currentColor" opacity="0.08" />
+    <polygon points="34,18 34,32 48,25" fill="currentColor" opacity="0.25" />
+    """
+  end
+
+  # ── Product hero ─────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "product_hero"} = assigns) do
+    ~H"""
+    <rect x="2" y="4" width="38" height="40" rx="2" fill="currentColor" opacity="0.1" />
+    <rect x="46" y="6" width="28" height="4" rx="1" fill="currentColor" opacity="0.3" />
+    <rect x="46" y="14" width="16" height="3" rx="1" fill="currentColor" opacity="0.2" />
+    <rect x="46" y="24" width="28" height="8" rx="2" fill="currentColor" opacity="0.2" />
+    """
+  end
+
+  # ── Breadcrumb ───────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "breadcrumb"} = assigns) do
+    ~H"""
+    <rect x="6" y="20" width="14" height="3" rx="1" fill="currentColor" opacity="0.2" />
+    <rect x="24" y="21" width="4" height="1.5" rx="0.5" fill="currentColor" opacity="0.15" />
+    <rect x="32" y="20" width="18" height="3" rx="1" fill="currentColor" opacity="0.2" />
+    <rect x="54" y="21" width="4" height="1.5" rx="0.5" fill="currentColor" opacity="0.15" />
+    <rect x="62" y="20" width="12" height="3" rx="1" fill="currentColor" opacity="0.3" />
+    """
+  end
+
+  # ── Product grid ─────────────────────────────────────────────────
+  defp thumb_shapes(%{type: t} = assigns) when t in ~w(product_grid related_products) do
+    ~H"""
+    <rect x="2" y="2" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
+    <rect x="28" y="2" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
+    <rect x="54" y="2" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
+    <rect x="2" y="26" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
+    <rect x="28" y="26" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
+    <rect x="54" y="26" width="24" height="20" rx="2" fill="currentColor" opacity="0.1" />
+    """
+  end
+
+  # ── Collection header ────────────────────────────────────────────
+  defp thumb_shapes(%{type: "collection_header"} = assigns) do
+    ~H"""
+    <rect x="16" y="14" width="48" height="6" rx="1" fill="currentColor" opacity="0.3" />
+    <rect x="28" y="26" width="24" height="3" rx="1" fill="currentColor" opacity="0.15" />
+    """
+  end
+
+  # ── Filter bar ───────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "filter_bar"} = assigns) do
+    ~H"""
+    <rect x="4" y="18" width="14" height="12" rx="6" fill="currentColor" opacity="0.2" />
+    <rect x="21" y="18" width="16" height="12" rx="6" fill="currentColor" opacity="0.1" />
+    <rect x="40" y="18" width="12" height="12" rx="6" fill="currentColor" opacity="0.1" />
+    <rect
+      x="58"
+      y="18"
+      width="18"
+      height="12"
+      rx="2"
+      fill="currentColor"
+      opacity="0.08"
+      stroke="currentColor"
+      stroke-opacity="0.15"
+      stroke-width="0.5"
+    />
+    """
+  end
+
+  # ── Cart items ───────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "cart_items"} = assigns) do
+    ~H"""
+    <rect x="4" y="4" width="12" height="12" rx="2" fill="currentColor" opacity="0.12" />
+    <rect x="20" y="6" width="30" height="3" rx="1" fill="currentColor" opacity="0.2" />
+    <rect x="20" y="12" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
+    <line
+      x1="4"
+      y1="20"
+      x2="76"
+      y2="20"
+      stroke="currentColor"
+      stroke-opacity="0.1"
+      stroke-width="0.5"
+    />
+    <rect x="4" y="24" width="12" height="12" rx="2" fill="currentColor" opacity="0.12" />
+    <rect x="20" y="26" width="24" height="3" rx="1" fill="currentColor" opacity="0.2" />
+    <rect x="20" y="32" width="16" height="2" rx="1" fill="currentColor" opacity="0.12" />
+    """
+  end
+
+  # ── Order summary ────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "order_summary"} = assigns) do
+    ~H"""
+    <rect
+      x="4"
+      y="4"
+      width="72"
+      height="40"
+      rx="3"
+      fill="currentColor"
+      opacity="0.06"
+      stroke="currentColor"
+      stroke-opacity="0.1"
+      stroke-width="0.5"
+    />
+    <rect x="10" y="12" width="20" height="2" rx="1" fill="currentColor" opacity="0.15" />
+    <rect x="50" y="12" width="20" height="2" rx="1" fill="currentColor" opacity="0.15" />
+    <rect x="10" y="18" width="20" height="2" rx="1" fill="currentColor" opacity="0.15" />
+    <rect x="50" y="18" width="16" height="2" rx="1" fill="currentColor" opacity="0.15" />
+    <line
+      x1="10"
+      y1="24"
+      x2="70"
+      y2="24"
+      stroke="currentColor"
+      stroke-opacity="0.1"
+      stroke-width="0.5"
+    />
+    <rect x="10" y="28" width="14" height="3" rx="1" fill="currentColor" opacity="0.25" />
+    <rect x="50" y="28" width="20" height="3" rx="1" fill="currentColor" opacity="0.25" />
+    <rect x="20" y="36" width="40" height="6" rx="2" fill="currentColor" opacity="0.2" />
+    """
+  end
+
+  # ── Contact form ─────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "contact_form"} = assigns) do
+    ~H"""
+    <rect
+      x="8"
+      y="4"
+      width="64"
+      height="8"
+      rx="2"
+      fill="currentColor"
+      opacity="0.08"
+      stroke="currentColor"
+      stroke-opacity="0.1"
+      stroke-width="0.5"
+    />
+    <rect
+      x="8"
+      y="16"
+      width="64"
+      height="8"
+      rx="2"
+      fill="currentColor"
+      opacity="0.08"
+      stroke="currentColor"
+      stroke-opacity="0.1"
+      stroke-width="0.5"
+    />
+    <rect
+      x="8"
+      y="28"
+      width="64"
+      height="12"
+      rx="2"
+      fill="currentColor"
+      opacity="0.08"
+      stroke="currentColor"
+      stroke-opacity="0.1"
+      stroke-width="0.5"
+    />
+    <rect x="8" y="43" width="20" height="5" rx="2" fill="currentColor" opacity="0.2" />
+    """
+  end
+
+  # ── Content body ─────────────────────────────────────────────────
+  defp thumb_shapes(%{type: "content_body"} = assigns) do
+    ~H"""
+    <rect x="4" y="6" width="50" height="4" rx="1" fill="currentColor" opacity="0.25" />
+    <rect x="4" y="14" width="72" height="2" rx="1" fill="currentColor" opacity="0.12" />
+    <rect x="4" y="20" width="68" height="2" rx="1" fill="currentColor" opacity="0.12" />
+    <rect x="4" y="26" width="72" height="2" rx="1" fill="currentColor" opacity="0.12" />
+    <rect x="4" y="32" width="60" height="2" rx="1" fill="currentColor" opacity="0.12" />
+    <rect x="4" y="38" width="66" height="2" rx="1" fill="currentColor" opacity="0.12" />
+    """
+  end
+
+  # ── Fallback for any unmatched type ──────────────────────────────
+  defp thumb_shapes(assigns) do
+    ~H"""
+    <rect
+      x="4"
+      y="4"
+      width="72"
+      height="40"
+      rx="3"
+      fill="currentColor"
+      opacity="0.06"
+      stroke="currentColor"
+      stroke-opacity="0.1"
+      stroke-width="0.5"
+    />
+    <rect x="20" y="16" width="40" height="4" rx="1" fill="currentColor" opacity="0.2" />
+    <rect x="26" y="24" width="28" height="3" rx="1" fill="currentColor" opacity="0.12" />
+    """
+  end
+end
--- a/lib/berrypod_web/components/shop_components/content.ex
+++ b/lib/berrypod_web/components/shop_components/content.ex
@@ -314,7 +314,7 @@ defmodule BerrypodWeb.ShopComponents.Content do
      <p class="card-text card-text--spaced">
        {@description}
      </p>
-      <form class="card-inline-form">
+      <form class="card-inline-form" onsubmit="return false">
        <.shop_input type="email" placeholder="your@email.com" class="email-input" />
        <.shop_button type="submit">{@button_text}</.shop_button>
      </form>
@@ -329,7 +329,7 @@ defmodule BerrypodWeb.ShopComponents.Content do
      <p class="card-text card-text--spaced">
        {@description}
      </p>
-      <form class="card-inline-form">
+      <form class="card-inline-form" onsubmit="return false">
        <.shop_input type="email" placeholder="your@email.com" class="email-input" />
        <.shop_button type="submit">{@button_text}</.shop_button>
      </form>