spree_storefront 5.0.0.rc1

data/app/views/themes/default/spree/page_sections/_product_details.html.erb

@@ -0,0 +1,102 @@
+<turbo-frame id="main-product-<%= product.id %>" target="_top">
+  <% current_variant = @selected_variant || @variant_from_options || product.first_or_default_variant(current_currency) %>
+  <div class="main-product-container" style="<%= section_styles(section) %>">
+    <div
+      class="page-container lg:mb-16"
+      <%= 'data-controller=product-form' %>
+      data-product-form-required-options-value='<%= product.option_type_ids.map(&:to_s).to_json %>'
+      data-product-form-selected-variant-disabled-value='<%= !@selected_variant&.in_stock? %>'
+      data-product-form-variant-from-options-disabled-value='<%= !@variant_from_options&.in_stock? %>'
+      data-product-form-frame-name-value="main-product-<%= product.id %>"
+      data-product-form-url-value="<%= spree.product_url(product) %>">
+      <template data-product-form-target="spinnerTemplate">
+        <%= render "spree/shared/icons/spinner" %>
+      </template>
+      <%= render 'spree/products/breadcrumbs', product: product, taxons: product_breadcrumb_taxons(product) %>
+      <div id="product-details-page" class="grid grid-cols-1 lg:grid-cols-12 gap-x-14">
+        <div class="lg:hidden">
+          <% if product.brand %>
+            <%= link_to spree.nested_taxons_path(product.brand), title: product.brand_name do %>
+              <h3 class="text-sm lg:mt-0 inline-block mb-1">
+                <%= product.brand_name %>
+              </h3>
+            <% end %>
+          <% end %>
+          <h1 class="text-2xl uppercase tracking-tight mb-4 font-medium">
+            <%= product.name %>
+          </h1>
+          <%= link_to spree.product_path(product), class: "text-2xl uppercase tracking-tight font-medium hidden" do %>
+            <%= product.name %>
+          <% end %>
+          <%=
+            render 'spree/products/price',
+              product: product,
+              use_variant: true,
+              selected_variant: @selected_variant,
+              price_class: "my-4 lg:text-lg lg:font-medium",
+              price_container_class: "w-full"
+          %>
+        </div>
+
+        <div class="lg:col-span-7 relative">
+          <% images = product_media_gallery_images(product, selected_variant: @selected_variant, variant_from_options: @variant_from_options) %>
+
+          <div class="lg:hidden mb-6">
+            <%= render 'spree/products/media_gallery', images: images, product: product %>
+          </div>
+          <div class="hidden lg:block" data-product-form-target="desktopMediaGallery">
+            <%= render 'spree/products/media_gallery', images: images, desktop: true, product: product %>
+          </div>
+        </div>
+
+        <div class="lg:col-span-5 lg:col-start-8">
+          <div data-controller='sticky-button' data-product-form-target="productDetails">
+            <div class="hidden lg:block">
+              <% if product.brand %>
+                <%= link_to spree.nested_taxons_path(product.brand), title: product.brand_name do %>
+                  <h3 class="text-sm mt-3 lg:mt-0 inline-block uppercase">
+                    <%= product.brand_name %>
+                  </h3>
+                <% end %>
+              <% end %>
+              <h1 class="text-2xl uppercase tracking-tight mb-4 mt-2 font-medium">
+                <%= product.name %>
+              </h1>
+
+              <%=
+                render 'spree/products/price',
+                  product: product,
+                  use_variant: true,
+                  selected_variant: @selected_variant,
+                  price_class: "my-4 lg:text-lg lg:font-medium"
+              %>
+            </div>
+            <%= render 'spree/products/tags', product: product %>
+            <% show_waitlist_modal = spree.respond_to?(:waitlists_path) && current_variant.present? %>
+            <div
+              <% if show_waitlist_modal %>
+              data-controller="modal"
+              <% end %>
+              data-modal-allow-background-close="true"
+              class="h-full w-full waitlist-modal"
+              data-modal-backdrop-color-value="rgba(0,0,0,0.32)">
+              <%= form_with(url: spree.line_items_path, method: :post, data: { controller: "turbo-stream-form", product_form_target: "form" }) do |f| %>
+                <%= render 'spree/products/variant_picker', product: product, selected_variant: @selected_variant %>
+                <%= render 'spree/products/quantity_selector', product: product, selected_variant: @selected_variant  %>
+                <div class="flex w-full my-5">
+                  <%= render 'spree/products/add_to_cart_button', product: product, selected_variant: @selected_variant, sticky_button_classes: "w-full" %>
+                  <%= render 'spree/products/add_to_wishlist', variant: current_variant, css_classes: 'btn-secondary ml-5 h-12 !py-0 !px-3 border-default', icon_size: 24 %>
+                </div>
+              <% end %>
+              <%= render 'spree/products/add_to_waitlist', variant: current_variant if show_waitlist_modal %>
+            </div>
+
+            <%= render 'spree/products/details', product: product %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <%= render 'spree/products/json_ld', product: product, selected_variant: @selected_variant %>
+</turbo-frame>

data/app/views/themes/default/spree/page_sections/_product_grid.html.erb

@@ -0,0 +1,52 @@
+<%= turbo_frame_tag :products_list do %>
+  <div class='page-container'>
+    <div class='flex justify-between'>
+      <div
+        data-controller='slideover'
+        data-slideover-invisible-class='-translate-x-full,opacity-0'
+        data-slideover-visible-class='translate-x-0,opacity-100'
+        data-slideover-active-target='#slideover-filters'
+      >
+        <%= button_tag(
+          type: 'button',
+          class: 'uppercase flex gap-2 text-sm items-center font-semibold py-3',
+          data: {
+            action: 'click->slideover#toggle click@window->slideover#hide'
+          }
+        ) do %>
+          <%= render 'spree/shared/icons/filter' %>
+          <%= Spree.t(:filter) %>
+          <% if products_selected_filters_count > 0 %>
+            <span class="font-normal opacity-50">(<%= products_selected_filters_count %>)</span>
+          <% end %>
+        <% end %>
+        <!-- begin sidebar/slideover -->
+        <div
+          data-slideover-target='overlay'
+          class='fixed inset-0 flex flex-row z-50 transition-opacity hidden'
+        >
+          <div class='fixed inset-0'>
+            <div data-action='click->slideover#toggle' class='absolute inset-0 bg-background opacity-75'></div>
+          </div>
+          <%= render 'spree/products/filters' %>
+        </div>
+        <!-- end sidebar/slideover -->
+      </div>
+
+      <%= render 'spree/products/sort' %>
+    </div>
+  </div>
+
+  <% if products %>
+    <div style='<%= section_styles(section) %>'>
+      <div class='page-container'>
+        <div class='grid gap-y-8 gap-x-4 grid-cols-2 lg:grid-cols-4 lg:gap-x-6 lg:gap-y-10 mb-7' id='products'>
+          <%= render 'spree/shared/products', products: products %>
+        </div>
+      </div>
+      <%= render 'spree/products/show_more_button' %>
+    </div>
+
+    <%= render 'spree/products/json_ld_list', products: products unless turbo_frame_request? %>
+  <% end %>
+<% end %>

data/app/views/themes/default/spree/page_sections/_related_products.html.erb

@@ -0,0 +1,15 @@
+<% loaded ||= false %>
+<% products ||= [] %>
+
+<% if section && loaded && products.present? %>
+  <div style="<%= section_styles(section) %>" class="animate-fadeIn">
+    <div class="page-container">
+      <%= render partial: 'spree/products/swiper', locals: {
+        section: section,
+        products: products,
+        heading: section.preferred_heading,
+        arrows_on_top: true
+      } %>
+    </div>
+  </div>
+<% end %>

data/app/views/themes/default/spree/page_sections/_rich_text.html.erb

@@ -0,0 +1,18 @@
+<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+  <div style="<%= section_styles(section) %>">
+    <div class="page-container rich-text">
+      <% section.blocks.each do |block| %>
+        <% case block.type %>
+        <% when 'Spree::PageBlocks::Heading' %>
+          <h2 class="w-full <%= block.preferred_size == 'small' ? 'text-xl' : (block.preferred_size == 'medium' ? 'text-xl' : 'text-4xl') %> rich-text--heading" <%= block_attributes(block) %>>
+            <%= block.text %>
+          </h2>
+        <% when 'Spree::PageBlocks::Text' %>
+          <div class="w-full rich-text--text" <%= block_attributes(block) %>>
+            <%= block.text %>
+          </div>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/themes/default/spree/page_sections/_taxon_banner.html.erb

@@ -0,0 +1,37 @@
+<% cache_unless page_builder_enabled?, [*spree_base_cache_scope.call(section), taxon].compact do %>
+  <div
+    style="<%= section_styles(section) %>"
+    id="taxon-banner-<%= taxon.id %>"
+    <%= 'data-turbo-permanent' unless page_builder_enabled? %>>
+    <div class="page-container">
+      <div class="lg:gap-6 lg:grid lg:grid-cols-12">
+        <% if taxon.image.present? %>
+          <div class="flex lg:col-span-7 lg:col-start-6 lg:order-1 lg:items-center lg:justify-end">
+            <% aspect_ratio_style = "aspect-ratio: #{as_aspect_ratio(taxon.image)};" %>
+            <%= image_tag main_app.cdn_image_url(taxon.image.variant(spree_image_variant_options(resize_to_limit: [720, 720]))), alt: taxon.name, class: 'w-full lg:max-h-[280px] h-full lg:w-auto mb-6', style: aspect_ratio_style, loading: :lazy %>
+          </div>
+        <% end %>
+        <div class="lg:col-span-5 flex flex-col justify-center items-start gap-1">
+          <div class="text-xs lg:text-sm tracking-widest" style="<%= section_heading_styles(section) %>"><%= taxon.taxonomy.name.singularize %></div>
+          <h1 class="self-stretch text-2xl lg:text-3xl font-medium" style="<%= section_heading_styles(section) %>"><%= taxon.name %></h1>
+          <% description_text = taxon.description.to_plain_text %>
+          <div
+            data-controller="read-more"
+            class="flex flex-col gap-4"
+            data-read-more-more-text-value="<%= Spree.t(:read_more) %>"
+            data-read-more-less-text-value="<%= Spree.t(:read_less) %>">
+            <div class="prose self-stretch text-lg font-normal <%= 'product-description-truncated' if description_text.length > 250 %>" data-read-more-target="content">
+              <%= taxon.description %>
+            </div>
+            <% if description_text.length > 250 %>
+              <%= button_tag Spree.t(:read_more),
+                            type: 'button',
+                            class: "font-bold underline",
+                            data: { action: "read-more#toggle" } %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/themes/default/spree/page_sections/_taxon_grid.html.erb

@@ -0,0 +1,103 @@
+<% cache_unless page_builder_enabled?, [*spree_base_cache_scope.call(section), @taxons].compact do %>
+  <div style='<%= section_styles(section) %>'>
+    <h1 class='text-xl lg:text-2xl font-medium pb-8 page-container' style='<%= section_heading_styles(section) %>'>
+      <%= section.heading %>
+    </h1>
+
+    <div class='border-y border-default py-3'>
+      <ul class='page-container overflow-auto flex gap-2 items-center justify-between text-sm'>
+        <li>
+          <%= link_to '#', class: 'block !leading-4 py-2 transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent uppercase', data: { controller: 'scroll-to', 'scroll-to-offset-value': '100', 'scroll-to-behavior-value': 'smooth' } do %>
+            <%= Spree.t(:all) %>
+          <% end %>
+        </li>
+        <% @taxons_grouped_by_letter.each do |letter, taxons| %>
+          <li>
+            <% if taxons.present? %>
+              <%= link_to "##{letter}", class: 'block w-8 !leading-4 py-2 text-center transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent', data: { controller: 'scroll-to', 'scroll-to-offset-value': '100', 'scroll-to-behavior-value': 'smooth' } do %>
+                <%= letter %>
+              <% end %>
+            <% else %>
+              <span class='block w-8 !leading-4 py-2 text-center transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent text-neutral cursor-default'>
+                <%= letter %>
+              </span>
+            <% end %>
+          </li>
+        <% end %>
+        <li>
+          <% if @taxons_grouped_by_numbers.any? %>
+            <%= link_to '#0-9', class: 'block w-8 !leading-4 py-2 text-center transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent uppercase', data: { controller: 'scroll-to', 'scroll-to-offset-value': '100', 'scroll-to-behavior-value': 'smooth' } do %>
+              0-9
+            <% end %>
+          <% else %>
+            <span class='block w-8 !leading-4 py-2 text-center transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent uppercase text-neutral cursor-default'>
+              0-9
+            </span>
+          <% end %>
+        </li>
+        <li>
+          <% if @taxons_grouped_by_other.any? %>
+            <%= link_to '##', class: 'block !leading-4 py-2 text-center transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent uppercase', data: { controller: 'scroll-to', 'scroll-to-offset-value': '100', 'scroll-to-behavior-value': 'smooth' } do %>
+              <%= Spree.t(:other) %>
+            <% end %>
+          <% else %>
+            <span class='block !leading-4 py-2 text-center transition-all duration-300 border-b-[1.5px] border-transparent hover:border-accent uppercase text-neutral cursor-default'>
+              <%= Spree.t(:other) %>
+            </span>
+          <% end %>
+        </li>
+      </ul>
+    </div>
+
+    <div class='page-container mt-10 mb-10 lg:mb-16'>
+      <div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>
+        <% @taxons_grouped_by_letter.each do |letter, taxons| %>
+          <div id='<%= letter %>' class='grid gap-6 grid-cols-3 lg:grid-cols-2 border-b border-default py-6 lg:pr-6'>
+            <p class='font-medium text-2xl<%= ' pointer-events-none opacity-30' unless taxons.present? %>'>
+              <%= letter %>
+            </p>
+            <% if taxons.present? %>
+              <ul class='col-span-2 lg:col-span-1'>
+                <% taxons.each do |taxon| %>
+                  <li>
+                    <%= link_to taxon.name, spree.nested_taxons_path(taxon), class: 'block py-1 border-b-[1.5px] border-transparent hover:border-accent transition-all duration-300' %>
+                  </li>
+                <% end %>
+              </ul>
+            <% end %>
+          </div>
+        <% end %>
+
+        <div id='0-9' class='grid gap-6 grid-cols-3 lg:grid-cols-2 border-b border-default py-6'>
+          <p class='font-medium text-2xl uppercase<%= ' pointer-events-none opacity-30' unless @taxons_grouped_by_numbers.any? %>'>
+            0-9
+          </p>
+          <ul class='col-span-2 lg:col-span-1'>
+            <% @taxons_grouped_by_numbers.each do |_, taxons| %>
+              <% taxons.each do |taxon| %>
+                <li>
+                  <%= link_to taxon.name, spree.nested_taxons_path(taxon), class: 'block py-1 border-b-[1.5px] border-transparent hover:border-accent transition-all duration-300' %>
+                </li>
+              <% end %>
+            <% end %>
+          </ul>
+        </div>
+
+        <div id='#' class='grid gap-6 grid-cols-3 lg:grid-cols-2 border-b border-default py-6'>
+          <p class='font-medium text-2xl uppercase<%= ' pointer-events-none opacity-30' unless @taxons_grouped_by_other.any? %>'>
+            <%= Spree.t(:other) %>
+          </p>
+          <ul class='col-span-2 lg:col-span-1'>
+            <% @taxons_grouped_by_other.each do |_, taxons| %>
+              <% taxons.each do |taxon| %>
+                <li>
+                  <%= link_to taxon.name, spree.nested_taxons_path(taxon), class: 'block py-1 border-b-[1.5px] border-transparent hover:border-accent transition-all duration-300' %>
+                </li>
+              <% end %>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/themes/default/spree/page_sections/_video.html.erb

@@ -0,0 +1,27 @@
+<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+  <% separated_vertically = section.preferred_separated == 'vertically' %>
+
+  <div style="<%= section_styles(section) %>">
+    <div class="page-container">
+      <div class="<%= 'lg:grid lg:grid-cols-12 lg:gap-6' if separated_vertically %>">
+        <div class="<%= 'lg:col-span-6' if separated_vertically %>">
+          <% section.blocks.includes(:rich_text_text).each do |block| %>
+            <h2 class="text-center <%= 'lg:text-left' if separated_vertically %> <%= block.preferred_size == 'small' ? 'text-lg' : (block.preferred_size == 'medium' ? 'text-xl' : 'text-2xl lg:text-3xl') %> font-medium" <%= block_attributes(block) %>>
+              <%= block.text %>
+            </h2>
+          <% end %>
+        </div>
+
+        <% if section.video_embed.present? %>
+          <div class="<%= 'lg:col-span-5' if separated_vertically %>">
+            <div class="mx-auto <%= 'lg:mr-0' if separated_vertically %> rounded overflow-hidden">
+              <div class="video-embed-container">
+                <%= section.video_embed.raw_html.html_safe %>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/themes/default/spree/page_sections/nav/_desktop.html.erb

@@ -0,0 +1,49 @@
+<% if section.blocks.any? %>
+  <% section.blocks.includes(:links).each do |block| %>
+    <% presenter = Spree::MegaNavPresenter.new(block) %>
+    <% main_link = presenter.main_link %>
+    <% next unless main_link.present? %>
+    <div class="header--nav-item group" <%= block_attributes(block, allowed_styles: ['padding-top', 'padding-bottom']) %>>
+      <%= active_link_to spree_storefront_resource_url(main_link.linkable || main_link), data: { title: main_link.label.downcase.strip }, class: "shrink-0 menu-item header--nav-link px-4 py-1", class_active: "menu-item--active", target: main_link.open_in_new_tab.presence && "_blank", rel: main_link.open_in_new_tab.presence && "noopener noreferrer" do %>
+        <span class="group-hover:border-b-[1.5px] group-hover:border-b-accent"><%= main_link.label %></span>
+      <% end %>
+      <% if presenter.columns.any? %>
+        <div class="w-full bg-transparent invisible absolute translate-y-[10%] group-hover:translate-y-0 left-0 group-hover:opacity-100 opacity-0 group-hover:visible transition-none border-default border-b duration-150 ease-in block pointer-events-none group-hover:pointer-events-auto z-10 header--mega-nav-container" style="--bottom-padding: <%= section.preferred_bottom_padding %>px; --top-without-bottom-padding: calc(100% - var(--bottom-padding)); padding-top: calc(var(--bottom-padding) + var(--section--border-bottom-width)); top: var(--top-without-bottom-padding);">
+          <div class="bg-section-background">
+            <div class="page-container py-6 grid grid-cols-4 gap-5">
+              <% presenter.columns.each do |column| %>
+                <div class="flex flex-col">
+                  <h6 class="uppercase text-sm tracking-widest px-2 font-semibold mb-5"><%= column.title %></h6>
+                  <% column.links.each do |link| %>
+                    <div class="p-2">
+                      <%= page_builder_link_to link, data: { title: link.label.downcase.strip }, class: "shrink-0 menu-item !normal-case header--nav-link", target: link.open_in_new_tab.presence && "_blank", rel: link.open_in_new_tab.presence && "noopener noreferrer" do %>
+                        <span><%= link.label %></span>
+                      <% end %>
+                    </div>
+                  <% end %>
+                  <%= link_to Spree.t(:view_all), spree_storefront_resource_url(column.view_all_linkable), class: "py-3 px-2 uppercase text-sm inline-block tracking-widest font-semibold" %>
+                </div>
+              <% end %>
+              <% if block.try(:featured_taxon) %>
+                <% cache spree_base_cache_scope.call(block.featured_taxon) do %>
+                  <% if block.featured_taxon.image.attached? && block.featured_taxon.image.variable? %>
+                    <%= link_to spree_storefront_resource_url(block.featured_taxon), class: "flex flex-col col-start-4" do %>
+                      <%= image_tag main_app.cdn_image_url(block.featured_taxon.image.variant(spree_image_variant_options(resize_to_fill: [700, 700]))), class: 'w-full h-auto aspect-1', loading: :lazy, alt: block.featured_taxon.name %>
+                      <span class="py-3 px-2 bg-accent block uppercase text-sm tracking-widest font-semibold header--mega-nav-featured-taxon-title"><%= Spree.t(:explore_taxon, taxon_name: block.featured_taxon.name) %></span>
+                    <% end %>
+                  <% end %>
+                <% end %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+<% else %>
+  <% section.links.each do |link| %>
+    <%= active_link_to spree_storefront_resource_url(link.linkable || link), data: { title: link.label.downcase.strip }, class: "shrink-0 menu-item header--nav-link px-4 py-1 focus:mx-0 focus:px-4", class_active: "menu-item--active", target: link.open_in_new_tab.presence && "_blank", rel: link.open_in_new_tab.presence && "noopener noreferrer", **link_attributes(link, as_html: false) do %>
+      <span><%= link.label %></span>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/themes/default/spree/page_sections/nav/_mobile.html.erb

@@ -0,0 +1,136 @@
+<div class="bg-background mt-4 border-default border-t overflow-x-hidden h-full w-screen overflow-y-hidden">
+  <div class="h-full flex transform has-[.currency-and-locale-modal:not(.hidden)]:transform-none relative transition-transform duration-300" data-controller="mobile-nav">
+    <div class="w-screen shrink-0 flex flex-col h-full flex-grow-0">
+      <div class="flex-grow overflow-y-scroll">
+        <% if section.blocks.any? %>
+          <% section.blocks.each do |block| %>
+            <% presenter = Spree::MegaNavPresenter.new(block) %>
+            <% main_link = presenter.main_link %>
+            <% next unless main_link.present? %>
+            <% if presenter.columns.any? %>
+              <button
+                data-action="click->mobile-nav#openSubmenu touch->mobile-nav#openSubmenu"
+                data-title="<%= main_link.label.downcase.strip %>"
+                class='text-base text-left tracking-widest p-4 w-full uppercase border-default border-b flex justify-between items-center header--nav-link'>
+                <%= main_link.label %>
+                <%= render 'spree/shared/icons/chevron_right', size: 12 %>
+                <template>
+                  <button data-action="click->mobile-nav#closeSubmenu touch->mobile-nav#closeSubmenu" class='flex gap-2 items-center text-base font-medium text-left tracking-widest p-4 w-full uppercase border-default border-b header--mega-nav-close-submenu bg-background sticky top-0'>
+                    <%= render 'spree/shared/icons/chevron', size: 12 %>
+                    <%= main_link.label %>
+                  </button>
+                  <div class="p-4 pt-0 w-full gap-2 flex flex-col">
+                    <% if block.try(:featured_taxon) %>
+                      <% cache spree_base_cache_scope.call(block.featured_taxon) do %>
+                        <% if block.featured_taxon.image.attached? && block.featured_taxon.image.variable? %>
+                          <%= link_to spree_storefront_resource_url(block.featured_taxon), class: "flex w-full pt-4" do %>
+                            <%= image_tag main_app.cdn_image_url(block.featured_taxon.image.variant(spree_image_variant_options(resize_to_fill: [280, 280]))), class: 'h-auto aspect-1 w-2/5 max-w-[140px]', loading: :lazy, alt: block.featured_taxon.name %>
+                            <span class="bg-accent w-full flex items-center justify-center header--mega-nav-featured-taxon-title text-sm tracking-widest font-semibold uppercase">
+                              <%= Spree.t(:explore_taxon, taxon_name: block.featured_taxon.name) %>
+                            </span>
+                          <% end %>
+                        <% end %>
+                      <% end %>
+                    <% end %>
+                    <% presenter.columns.each do |column| %>
+                      <div
+                        data-controller='toggle'
+                        data-toggle-class='hidden'
+                        class="w-full flex flex-col gap-2">
+                        <% unless presenter.columns.size == 1 %>
+                          <button
+                            type="button"
+                            class="text-base font-semibold tracking-widest uppercase w-full inline-flex justify-between py-3"
+                            data-action='click->toggle#toggle touch->toggle#toggle'>
+                            <%= column.title %>
+                            <span data-toggle-target='toggleable'>
+                              <%= render 'spree/shared/icons/chevron_down' %>
+                            </span>
+                            <span data-toggle-target='toggleable' class="hidden rotate-180">
+                              <%= render 'spree/shared/icons/chevron_down' %>
+                            </span>
+                          </button>
+                        <% end %>
+                        <div
+                          class="<%= class_names(hidden: presenter.columns.size != 1) %>"
+                          data-toggle-target='toggleable'>
+                          <% column.links.each do |link| %>
+                            <%= page_builder_link_to link, data: { title: link.label.downcase.strip }, class: "block text-base py-3 w-full uppercase header--nav-link", target: link.open_in_new_tab.presence && "_blank", rel: link.open_in_new_tab.presence && "noopener noreferrer" do %>
+                              <span><%= link.label %></span>
+                            <% end %>
+                          <% end %>
+                        </div>
+                      </div>
+                    <% end %>
+                  </div>
+                </template>
+              </button>
+            <% else %>
+              <%= page_builder_link_to main_link, data: { title: main_link.label.downcase.strip }, class: "block text-base tracking-widest p-4 w-full uppercase border-default border-b header--nav-link", target: main_link.open_in_new_tab.presence && "_blank", rel: main_link.open_in_new_tab.presence && "noopener noreferrer" do %>
+                <span><%= main_link.label %></span>
+              <% end %>
+            <% end %>
+          <% end %>
+        <% else %>
+          <% section.links.each do |link| %>
+            <%= page_builder_link_to link, data: { title: link.label.downcase.strip }, class: "block text-base tracking-widest p-4 w-full uppercase border-default border-b header--nav-link", target: link.open_in_new_tab.presence && "_blank", rel: link.open_in_new_tab.presence && "noopener noreferrer" do %>
+              <span><%= link.label %></span>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+      <div class='p-4 bg-accent'>
+        <% if try_spree_current_user %>
+          <%= link_to spree.account_path, class: 'btn-secondary gap-2 flex justify-center items-center w-full' do %>
+            <span><%= Spree.t(:my_account) %></span>
+            <%= render 'spree/shared/icons/account' %>
+          <% end %>
+
+          <% if defined?(spree_logout_path) %>
+            <%= link_to spree_logout_path, method: :delete, data: { turbo_method: :delete }, class: 'btn-secondary gap-2 flex justify-center items-center w-full mt-2' do %>
+              <%= Spree.t(:sign_out) %>
+            <% end %>
+          <% end %>
+        <% else %>
+          <button
+            id='mobile-menu'
+            data-action='click->slideover-account#toggle click@window->slideover-account#hide click->toggle-menu#hide touch->toggle-menu#hide'
+            class='btn-secondary gap-2 flex justify-center items-center w-full'>
+            <span><%= Spree.t(:my_account) %></span>
+            <%= render 'spree/shared/icons/account' %>
+          </button>
+        <% end %>
+
+        <% if should_render_currency_dropdown? || should_render_locale_dropdown? %>
+          <div class="flex mt-4 justify-end">
+            <div
+                data-controller="modal"
+                data-modal-allow-background-close="true"
+                data-modal-
+                class=""
+                data-modal-backdrop-color-value="rgba(0,0,0,0.32)">
+              <%= button_tag class: 'flex gap-2 items-center', data: {action: 'modal#open'} do %>
+                <% if should_render_currency_dropdown? %>
+                  <span>
+                    <%= "#{current_currency} (#{currency_money(current_currency).symbol})" %>
+                  </span>
+                <% end %>
+                <% if should_render_locale_dropdown? %>
+                  <span class="uppercase <%= should_render_currency_dropdown?.presence && "border-l pl-2" %> flex items-center gap-1">
+                    <% country_code = current_locale.to_s.split("-").last %>
+                    <%= svg_country_icon(country_code) %>
+                    <span ><%= country_code %></span>
+                  </span>
+                <% end %>
+              <% end %>
+              <%= turbo_frame_tag :settings_modal, src: spree.settings_path, loading: :eager  %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    </div>
+    <% if section.blocks.any? %>
+      <div class="w-screen shrink-0 relative overflow-y-scroll" data-mobile-nav-target="submenuContainer"></div>
+    <% end %>
+  </div>
+</div>

data/app/views/themes/default/spree/policies/show.html.erb

@@ -0,0 +1,11 @@
+<div class="page-container py-12">
+  <h1 class="text-2xl tracking-tight text-center lg:text-left mb-3 uppercase">
+    <%= params[:id].titleize %>
+  </h1>
+  <p class="mb-8 text-center lg:text-left">
+    Last update: <%= @policy&.updated_at&.strftime('%d/%m/%Y') %>
+  </p>
+  <div class="mb-5">
+    <%= @policy&.to_s %>
+  </div>
+</div>

data/app/views/themes/default/spree/posts/_json_ld.html.erb

@@ -0,0 +1,20 @@
+<script type="application/ld+json" data-test-id="post-json-ld">
+  {
+    "@context": "https://schema.org",
+    "@type": "BlogPosting",
+    "headline": "<%= post.title %>",
+    "image": <%= post.image.attached? ? [main_app.cdn_image_url(post.image.variant(spree_image_variant_options(resize_to_limit: [1200, 675])))].to_json.html_safe : [].to_json.html_safe %>,
+    "datePublished": "<%= post.published_at&.iso8601 %>",
+    "dateModified": "<%= post.updated_at&.iso8601 %>",
+    "author": [
+      {
+        "@type": "Person",
+        "name": "<%= post.author_name %>"
+      }
+    ]
+  }
+</script>
+
+<script type="application/ld+json" data-test-id="post-breadcrumbs-json-ld">
+  <%= posts_json_ld_breadcrumbs(post).to_json.html_safe %>
+</script>

data/app/views/themes/default/spree/posts/_pagination.html.erb

@@ -0,0 +1 @@
+<%= paginate @posts, theme: 'storefront', outer_window: 1, inner_window: 2 %>

data/app/views/themes/default/spree/posts/_post.html.erb

@@ -0,0 +1,13 @@
+<div id="<%= dom_id(post) %>">
+  <%= link_to spree.post_path(post), class: 'block hover:opacity-70 transition-opacity' do %>
+    <div class="h-[200px] w-full bg-gray-100">
+      <% if post.image.attached? && post.image.variable? %>
+        <%= image_tag main_app.cdn_image_url(post.image.variant(spree_image_variant_options(resize_to_fit: [nil, 800]))), height: 400, class: 'h-full w-full object-cover object-center', loading: :lazy, alt: post.title %>
+      <% end %>
+    </div>
+
+    <h1 class="uppercase text-lg font-medium mt-4"><%= post.title %></h1>
+    <div class="mt-2 text-sm"><%= local_time(post.published_at, '%B %e, %Y') %></div>
+    <div class="mt-4"><%= post.shortened_description %></div>
+  <% end %>
+</div>