spree_storefront 5.0.0.rc1

data/app/views/themes/default/spree/checkout/complete.html.erb

@@ -0,0 +1,84 @@
+<div id="<%= dom_id(@order) %>" class="text-muted">
+  <p class="text-sm mb-1 mt-3">
+    <%= Spree.t(:order) %> <strong><%= @order.number %></strong>
+  </p>
+  <h4 class="mb-4 text-green-600 font-semibold text-lg font-body">
+    <%= Spree.t('storefront.checkout.thanks_for_your_order', name: @order.bill_address_firstname) %>
+  </h4>
+
+  <div class="border p-3 rounded-md">
+    <h5 class="mb-3 font-semibold pb-3 border-b font-body">
+      <%= Spree.t("storefront.checkout.order_success") %>
+    </h5>
+    <p class="mb-0">
+      <%= Spree.t('storefront.checkout.order_success_message') %>
+    </p>
+  </div>
+
+  <% if @order.payments.valid.any? %>
+    <div class="border p-3 mt-4 rounded-md">
+      <h5 class="mb-3 font-bold pb-3 border-b font-body"><%= Spree.t(:payment) %></h5>
+      <div class="flex mb-3 text-sm gap-4 items-top">
+        <%= render partial: 'spree/shared/payment', collection: @order.payments.valid %>
+      </div>
+      <div class="mt-3 border-t pt-3">
+        <span class="text-sm"><%= Spree.t(:status) %></span>
+        <% if @order.payment_state.present? %>
+          <span class="badge-<%= @order.payment_state %>"><%= Spree.t("payment_states.#{@order.payment_state}").titleize %></span>
+        <% else %>
+          <span class="badge-pending"><%= Spree.t(:pending) %></span>
+        <% end %>
+      </div>
+
+      <% unless @order.payment_state.present? %>
+        <p class="mb-0 mt-3 text-sm"><%= Spree.t('storefront.checkout.payment_processing_message') %></p>
+      <% end %>
+    </div>
+  <% end %>
+
+  <div class="border p-3 rounded-md mt-4">
+      <h5 class="mb-3 font-bold pb-3 border-b font-body"><%= Spree.t(:contact_information) %></h5>
+      <p class="mb-4"><%= @order.email %></p>
+
+      <div class="flex w-full">
+        <% if @order.ship_address.present? %>
+          <div class="w-1/2">
+            <h6 class="mb-3 font-bold pb-2 border-b font-body"><%= Spree.t(:shipping_address) %></h6>
+            <p class="mb-1 word-break"><%= @order.ship_address.to_s.html_safe %></p>
+            <p class="mb-0"><%= @order.ship_address.phone %></p>
+          </div>
+        <% end %>
+        <% if @order.bill_address.present? %>
+          <div class="w-1/2">
+            <h6 class="mb-3 font-bold pb-2 border-b font-body"><%= Spree.t(:billing_address) %></h6>
+            <p class="mb-1 word-break"><%= @order.bill_address.to_s.html_safe %></p>
+            <p class="mb-0"><%= @order.bill_address.phone %></p>
+          </div>
+        <% end %>
+    </div>
+  </div>
+
+  <% if @order.digital_links.any? %>
+    <div class="border p-3 rounded-md mt-4">
+      <h5 class="mb-3 font-bold pb-3 border-b font-body"><%= Spree.t(:attachments) %></h5>
+
+      <ul class="flex flex-col gap-2">
+        <% @order.digital_line_items.each do |line_item| %>
+          <li class="flex flex-col gap-1">
+            <span class="font-bold"><%= line_item.product.name %></span>
+            <ul class="flex flex-col gap-1">
+              <% line_item.digital_links.each do |digital_link| %>
+                <li>
+                  <%= link_to "#{Spree.t(:download)} #{digital_link.filename}",
+                  spree.digital_link_path(digital_link.token) %>
+                </li>
+              <% end %>
+            </ul>
+          </li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+</div>
+
+<%= render_storefront_partials(:checkout_complete_partials) if order_just_completed? %>

data/app/views/themes/default/spree/contacts/new.html.erb

@@ -0,0 +1,23 @@
+<div class="page-container">
+  <div class="card-dialog mx-auto lg:w-1/3 pt-5">
+    <h3 class="mb-5 font-semibold"><%= Spree.t(:contact_us) %></h3>
+    <%= form_for @contact, data: { controller: 'recaptcha-form', recaptcha_form_action_value: 'contacts/create' } do |f| %>
+      <div class="mb-5">
+        <p>
+          <%= f.text_field  :name, required: true, class: "text-input w-full", placeholder: Spree.t(:name) %>
+        </p>
+      </div>
+      <div class="mb-5">
+        <p>
+          <%= f.email_field :email, required: true, class: "text-input w-full", placeholder: Spree.t(:email) %>
+        </p>
+      </div>
+      <div class="mb-5">
+        <p>
+          <%= f.text_area :message, rows: 8, cols: 40, required: true, class: "text-input w-full", placeholder: Spree.t(:send_us_a_message), style: 'min-height: 8rem' %>
+        </p>
+      </div>
+      <%= f.submit Spree.t(:send_message), class: 'btn btn-primary' %>
+    <% end %>
+  </div>
+</div>

data/app/views/themes/default/spree/orders/_cart.html.erb

@@ -0,0 +1,14 @@
+<div data-controller="cart" class="h-full">
+  <div class="h-full flex flex-col" id="cart-container" data-cart-target="container">
+    <%== color_options_style_for_line_items(@line_items) %>
+    <ul class="w-full" id="line-items">
+      <%= render collection: @line_items, partial: 'spree/orders/line_item', cached: spree_base_cache_scope %>
+    </ul>
+    <%= render 'spree/orders/summary', order: @order %>
+  </div>
+  <div class="hidden absolute w-full flex justify-center" style="top: 40%;left: 0" data-cart-target="spinner">
+    <span class="group-aria-[busy]:inline-flex gap-2 items-center">
+      <span class="w-10 h-10 border-dotted border-[3px] inline-block rounded-full animate-[spin_2s_linear_infinite] border-current"></span>
+    </span>
+  </div>
+</div>

data/app/views/themes/default/spree/orders/_empty.html.erb

@@ -0,0 +1,11 @@
+<div class="flex flex-col justify-between h-full">
+  <div class="h-full flex flex-col items-center place-content-center py-10">
+    <%= render 'spree/shared/icons/cart_48' %>
+    <p class="mb-8 mt-4 uppercase text-sm">
+      <%= Spree.t('cart_page.empty_info').html_safe %>
+    </p>
+    <div class="mx-10">
+      <%= link_to Spree.t(:continue_shopping), spree.products_path, class: 'btn-primary !no-underline', data: { 'turbo-frame': '_top' } %>
+    </div>
+  </div>
+</div>

data/app/views/themes/default/spree/orders/_line_item.html.erb

@@ -0,0 +1,47 @@
+<%= turbo_frame_tag dom_id(line_item), data: { controller: 'reveal' } do %>
+  <li class="cart-line-item flex items-top py-6 px-4 w-full" data-reveal-target="item">
+    <div class="line-item-overlay"></div>
+      <div class="cart-product-image flex-shrink-0" id="<%= dom_id(line_item) %>-image" data-turbo-permanent>
+        <% image = line_item.variant.default_image %>
+        <% if image.present? && image.attached? && image.variable? %>
+          <%= link_to spree_storefront_resource_url(line_item.product), data: { 'turbo-frame': '_top' } do %>
+            <%= image_tag main_app.cdn_image_url(image.variant(spree_image_variant_options(resize_to_fit: [256, 256]))), width: 128, height: 128, class: 'object-cover', loading: :lazy %>
+          <% end %>
+        <% end %>
+      </div>
+      <div class="ml-3 w-full">
+        <div class="flex justify-between">
+          <%= link_to line_item.name, spree_storefront_resource_url(line_item.product), class: 'font-semibold text-text', data: { 'turbo-frame': '_top' } %>
+
+          <%= form_for line_item, url: spree.line_item_url(line_item, order_token: line_item.order.token), method: :delete, data: { controller: 'turbo-stream-form' } do |item_form| %>
+            <%= button_tag type: :submit, class: 'remove-line-item-button h-100', data: { action: "click->reveal#hide click->cart#disableCart" } do %>
+              <%= render 'spree/shared/icons/cross', size: 16 %>
+            <% end %>
+          <% end %>
+        </div>
+        <div class="mb-2 text-sm">
+          <% if line_item.variant.on_sale?(current_currency) %>
+            <span class="">
+              <del><%= line_item.variant.display_compare_at_price %></del>
+            </span>
+            <span class="text-danger">
+              <%= line_item.display_price %>
+            </span>
+          <% else %>
+            <span><%= line_item.display_price %></span>
+          <% end %>
+        </div>
+        <div class="flex flex-wrap gap-2">
+          <%= render 'spree/shared/line_item_options', line_item: line_item %>
+        </div>
+      <div class="flex flex-row-reverse w-full mt-3">
+        <%= render 'spree/orders/line_item_quantity', line_item: line_item %>
+      </div>
+      <% if !line_item.variant.backorderable? && line_item.variant.total_on_hand < 5 %>
+        <div class="text-sm -mt-5 text-center text-danger" style="width: 117px">
+          <%= Spree.t(:only_left, count: line_item.variant.total_on_hand) %>
+        </div>
+      <% end %>
+    </div>
+  </li>
+<% end %>

data/app/views/themes/default/spree/orders/_line_item_quantity.html.erb

@@ -0,0 +1,11 @@
+<div class="flex items-center">
+  <%= form_for line_item, url: spree.line_item_url(line_item, order_token: line_item.order.token), data: { controller: 'turbo-stream-form' } do |item_form| %>
+    <div class="quantity-picker" data-controller="quantity-picker">
+      <!-- this is a dummy button to work with turbo frame forms when hitting ENTER -->
+      <%= button_tag render('spree/shared/icons/minus'), type: 'submit', class: 'hidden' %>
+      <%= quantity_modifier_button_tag render('spree/shared/icons/minus'), type: 'submit', action: 'decrease', class: 'quantity-decrease-button' %>
+      <%= item_form.number_field(:quantity, quantity_field_options(max: line_item.maximum_quantity)) %>
+      <%= quantity_modifier_button_tag render('spree/shared/icons/plus'), type: 'submit', action: 'increase', class: 'quantity-increase-button' %>
+    </div>
+  <% end %>
+</div>

data/app/views/themes/default/spree/orders/_summary.html.erb

@@ -0,0 +1,41 @@
+<%= turbo_frame_tag :cart_summary do %>
+  <% if order.line_items.any? %>
+    <div class="cart-summary-container p-4">
+      <p class="text-center lg:text-right text-sm mb-3">
+        <%= Spree.t('storefront.cart.shipping_and_taxes_calculated_at_checkout') %>
+      </p>
+
+      <div class="shopping-cart-total-text text-center lg:text-right uppercase font-medium">
+        <%= Spree.t(:total) %>
+        <span class="shopping-cart-total-amount">
+          <%= order.display_item_total %>
+        </span>
+      </div>
+
+      <% unless order.cart_promo_total.zero? %>
+        <div class="shopping-cart-total-text mt-3 text-center lg:text-right uppercase font-medium">
+          <%= Spree.t(:promotion) %>
+          <span class="shopping-cart-total-amount">
+            <%= order.display_cart_promo_total %>
+          </span>
+        </div>
+      <% end %>
+      <div class="flex <%= !turbo_frame_request? && !turbo_stream_request? ? 'flex-row' : 'flex-col' %> gap-4 mt-4 w-full justify-end items-end">
+        <% if quick_checkout_enabled?(@order) %>
+          <div class="min-h-[46px] w-full has-[turbo-frame]:block group no-separator">
+            <% if !turbo_frame_request? && !turbo_stream_request? %>
+              <%= render partial: 'spree/checkout/quick_checkout', locals: { height: 46, theme: 'black', button_width: 320, container_class: "w-full flex justify-end" } %>
+            <% else %>
+              <%= render partial: 'spree/checkout/quick_checkout', locals: { height: 46, theme: 'white', max_columns: 2, max_rows: 2 } %>
+            <% end %>
+          </div>
+        <% end %>
+        <div class="flex flex-col gap-4 <%= 'w-full' if turbo_frame_request? || turbo_stream_request? %>">
+          <%= link_to Spree.t(:checkout), spree.checkout_path(order.token),
+          class: 'btn-primary block w-full lg:w-80 text-center !no-underline !mt-0',
+          data: { 'turbo': 'false', 'cart-target': 'checkoutButton' } %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/themes/default/spree/orders/edit.html.erb

@@ -0,0 +1,18 @@
+<% if !turbo_frame_request? && !turbo_stream_request? %>
+  <div class="page-container">
+    <%= render 'spree/shared/title' %>
+<% end %>
+
+  <%= render 'spree/shared/error_messages', target: @order %>
+
+  <%= turbo_frame_tag :cart_contents, class: 'cart-contents' do %>
+    <% if !@line_items || @line_items.empty? %>
+      <%= render 'spree/orders/empty' %>
+    <% else %>
+      <%= render 'spree/orders/cart' %>
+    <% end %>
+  <% end %>
+
+<% if !turbo_frame_request? && !turbo_stream_request? %>
+  </div>
+<% end %>

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

@@ -0,0 +1,6 @@
+<div class="page-container">
+  <h1 class="text-2xl uppercase font-medium tracking-tight py-5 text-center lg:text-left mt-5">
+    <%= accurate_title %>
+  </h1>
+  <%= render 'spree/shared/order_details', order: @order, shipments: @shipments %>
+</div>

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

@@ -0,0 +1,10 @@
+<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+  <% if section.present? && section.text.body.to_plain_text.present? %>
+    <div
+      class='w-full justify-center items-center flex announcement-bar'
+      style='<%= section_styles(section) %>'
+    >
+      <div class='text-sm tracking-widest'><%= section.text.body %></div>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,5 @@
+<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+  <div style="<%= section_styles(section) %>">
+    <%= raw(section.preferred_custom_code) %>
+  </div>
+<% end %>

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

@@ -0,0 +1,136 @@
+<% view_full_details_rendered = false %>
+<%= turbo_frame_tag "section-#{section.id}" do %>
+  <% options_param_name = "featured-product-#{section.id}-options" %>
+  <% presenter = Spree::FeaturedProductPresenter.new(section, params: params[options_param_name], currency: current_currency) %>
+  <% images = presenter.product.present? ? product_media_gallery_images(presenter.product, selected_variant: presenter.selected_variant, variant_from_options: presenter.variant_from_options, options_param_name: options_param_name) : [] %>
+  <% current_variant = presenter.selected_variant || presenter.variant_from_options || presenter.product&.first_or_default_variant(current_currency) %>
+  <% @selected_variant = presenter.selected_variant %>
+  <% @variant_from_options = presenter.variant_from_options %>
+  <div style="<%= section_styles(section) %>">
+    <div
+      class="page-container py-5"
+      data-controller="product-form"
+      data-product-form-no-cache-value="true"
+      data-product-form-url-value="<%= spree.page_section_url(section.id, host: current_store.url) %>"
+      data-product-form-frame-name-value="section-<%= section.id %>"
+      data-product-form-options-param-name-value="<%= options_param_name %>"
+      data-product-form-required-options-value='<%= presenter.product&.option_type_ids&.map(&:to_s)&.to_json %>'
+      data-product-form-variant-from-options-disabled-value='<%= !presenter.variant_from_options&.in_stock? %>'
+      >
+      <% if presenter.product %>
+        <div class="lg:hidden -ml-4 -mr-4">
+          <%= render 'spree/products/media_gallery', images: images, product: presenter.product %>
+        </div>
+      <% end %>
+      <div id="product-details-page" class="grid-cols-1 lg:grid-cols-12 gap-x-14 <%= presenter.product ? 'grid' : 'flex justify-center w-full' %>">
+        <% if presenter.product  %>
+          <div class="lg:col-span-7 relative">
+            <!-- media gallery for desktop -->
+            <div class="hidden lg:block">
+              <%= render 'spree/products/media_gallery', images: images, product: presenter.product, desktop: true %>
+            </div>
+          </div>
+        <% end %>
+        <div class="lg:col-span-5 lg:col-start-8">
+          <% 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: 'sticky-button', 'product-form-target': 'form' } do %>
+              <% if presenter.product %>
+                <div class='pt-[4.25rem] lg:pt-0'></div>
+                <% section.blocks.each do |block| %>
+                  <div <%= block_attributes(block) %>>
+                    <% case block.type %>
+                    <% when 'Spree::PageBlocks::Products::Brand' %>
+                      <% if presenter.product&.brand&.page_builder_url %>
+                        <%= link_to spree_storefront_resource_url(presenter.product&.brand), title: strip_tags(presenter.product&.brand&.name).strip, data: { turbo_frame: '_top' } do %>
+                          <h3 class="text-sm uppercase font-semibold">
+                            <%= presenter.product&.brand&.name %>
+                          </h3>
+                        <% end %>
+                      <% else %>
+                        <h3 class="text-sm uppercase font-semibold">
+                          <%= presenter.product&.brand&.name %>
+                        </h3>
+                      <% end %>
+                    <% when 'Spree::PageBlocks::Products::Title' %>
+                      <h2 class="tracking-tight <%= block.preferred_size == 'small' ? 'text-base lg:text-xl' : block.preferred_size == 'medium' ? 'text-xl lg:text-2xl' : 'text-2xl lg:text-2xl' %> uppercase font-medium">
+                        <%= presenter.product ? presenter.product.name : 'Example product' %>
+                      </h2>
+                    <% when 'Spree::PageBlocks::Products::Price' %>
+                      <%=
+                      render 'spree/products/price',
+                        product: presenter.product,
+                        use_variant: true,
+                        selected_variant: presenter.selected_variant,
+                        price_class: "lg:text-lg lg:font-medium"
+                    %>
+                    <% when 'Spree::PageBlocks::Products::QuantitySelector' %>
+                      <%= render 'spree/products/quantity_selector', product: presenter.product, selected_variant: presenter.selected_variant  %>
+                    <% when 'Spree::PageBlocks::Products::BuyButtons' %>
+                      <div class="flex w-full my-5">
+                        <%= render 'spree/products/add_to_cart_button', product: presenter.product, selected_variant: presenter.selected_variant, sticky_button_classes: "w-full", without_fixed_button: true, options_param_name: options_param_name %>
+                        <%= 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>
+                    <% when 'Spree::PageBlocks::Products::Share' %>
+                      <div class="flex justify-between">
+                        <details>
+                          <summary class="inline-flex space-x-2 group cursor-pointer">
+                            <%= heroicon 'arrow-up-tray'%>
+                            <div class="group-hover:underline">
+                              <%= block.text %>
+                            </div>
+                          </summary>
+                          <% if presenter.product %>
+                            <div class="absolute flex" data-controller="copy-input">
+                              <div class="has-float-label flex flex-col max-w-[200px]">
+                                <%= text_field_tag "product-#{presenter.product.id}-share-link", spree.product_url(presenter.product, host: current_store.url), class: 'text-ellipsis text-input border-r-0 !rounded-r-none !rounded-l-md', readonly: true, type: 'text', onclick: 'this.select()', data: { copy_input_target: 'input' } %>
+                                <%= label_tag "product-#{presenter.product.id}-share-link", Spree.t(:link) %>
+                              </div>
+                              <button
+                            class="bg-input-bg block border-t-2 border-r-2 border-b-2 rounded-r-md pr-3"
+                            data-copy-input-target="copyButton"
+                            type="button">
+                                <%= heroicon 'clipboard', variant: :outline %>
+                                <span class="sr-only"><%= Spree.t(:copy_link) %></span>
+                              </button>
+                            </div>
+                          <% end %>
+                        </details>
+                        <% if block == section.blocks.last %>
+                          <% view_full_details_rendered = true %>
+                          <%= link_to spree_storefront_resource_url(presenter.product) || '#', class: class_names('hover:underline flex space-x-2 group',   {'cursor-not-allowed' => presenter.product.nil?}), data: { turbo: 'false' }, aria: { disabled: presenter.product.nil? } do %>
+                            <span>
+                              <%= Spree.t(:view_full_details) %>
+                            </span>
+                            <%= heroicon 'arrow-long-right' %>
+                          <% end %>
+                        <% end %>
+                      </div>
+                    <% when 'Spree::PageBlocks::Products::VariantPicker' %>
+                      <%= render 'spree/products/variant_picker', product: presenter.product, selected_variant: presenter.selected_variant, options_param_name: options_param_name %>
+                    <% end %>
+                  </div>
+                <% end %>
+              <% end %>
+              <% unless view_full_details_rendered %>
+                <%= link_to spree_storefront_resource_url(presenter.product) || '#', class: class_names('hover:underline flex space-x-2 group',   {'cursor-not-allowed' => presenter.product.nil?}), data: { turbo: 'false' }, aria: { disabled: presenter.product.nil? } do %>
+                  <span>
+                    <%= Spree.t(:view_full_details) %>
+                  </span>
+                  <%= heroicon 'arrow-long-right' %>
+                <% end %>
+              <% end %>
+            <% end %>
+            <%= render('spree/products/add_to_waitlist', variant: current_variant) if show_waitlist_modal %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,116 @@
+<div style='<%= section_styles(section) %>' class='animate-fadeIn'>
+  <div class='page-container'>
+    <% heading_size = case section.preferred_heading_size
+                      when 'small' then 'text-base font-medium'
+                      when 'medium' then 'text-lg lg:text-xl font-medium'
+                      when 'large' then 'text-xl lg:text-2xl font-medium'
+                      end %>
+    <% if section.taxon&.image&.attached? && section.preferred_show_taxon_image %>
+      <% desktop_slides_amount = 2.5 %>
+      <% section_with_image = true %>
+      <% arrows_on_top = false %>
+    <% else %>
+      <% desktop_slides_amount = 4 %>
+      <% section_with_image = false %>
+      <% arrows_on_top = true %>
+    <% end %>
+    <% if section.preferred_heading.present? %>
+      <div class='mb-8 flex justify-between items-end'>
+        <div class="md:basis-2/5">
+          <h3
+            class='<%= heading_size %> featured-taxon--title font-medium text-<%= section.preferred_heading_alignment %>'
+            data-title="<%= section.preferred_heading.downcase %>"
+            style='<%= section_heading_styles(section) %>'>
+            <% if section.taxon.present? %>
+              <%= link_to section.preferred_heading, spree_storefront_resource_url(section.taxon), data: { turbo_frame: "_top" } %>
+            <% else %>
+              <%= section.preferred_heading %>
+            <% end %>
+          </h3>
+
+          <% if section.description_to_use.present? %>
+            <div class='pt-4 text-<%= section.preferred_description_alignment %>'>
+              <%= section.description_to_use %>
+            </div>
+          <% end %>
+        </div>
+        <% if section.taxon.present? %>
+          <%= link_to spree_storefront_resource_url(section.taxon), class: class_names(section.preferred_button_style == "primary" ? "btn-primary" : "btn-secondary", " text-center hidden md:inline-block"), data: { turbo_frame: '_top' } do %>
+            <%= section.preferred_button_text %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+    <% if loaded && section.taxon.present? %>
+      <% if section.products(current_currency).any? %>
+        <div class='grid grid-cols-1 lg:grid-cols-12 gap-4 lg:gap-6'>
+          <% if section_with_image %>
+            <div class='lg:col-span-5'>
+              <%= link_to spree.nested_taxons_path(section.taxon), data: { turbo_frame: "_top" } do %>
+                <%= image_tag main_app.cdn_image_url(section.taxon.image.variant(spree_image_variant_options(resize_to_fill: [1000, 1000]))), height: 500, width: 500, class: 'h-full w-full object-cover object-center', loading: :lazy %>
+              <% end %>
+            </div>
+          <% end %>
+          <div class='<%= section_with_image ? "lg:col-span-7" : "lg:col-span-12" %>'>
+            <%= render 'spree/products/swiper', products: section.products(current_currency).first(section.preferred_max_products_to_show), desktop_slides: desktop_slides_amount, pagination: 'bottom', arrows_on_top: arrows_on_top, section: section %>
+          </div>
+        </div>
+      <% end %>
+    <% else %>
+      <div class='grid grid-cols-1 md:grid-cols-12 gap-4 md:gap-6'>
+        <% if section_with_image %>
+          <div class='md:col-span-5 w-full aspect-1 md:h-[536px] bg-accent'></div>
+        <% end %>
+        <div class='<%= section_with_image ? "md:col-span-7" : "md:col-span-12" %> flex justify-between flex-col overflow-hidden'>
+          <% if section_with_image %>
+            <div class='grid gap-4 md:gap-6 grid-cols-8 md:grid-cols-5'>
+              <div class='col-span-6 md:col-span-2'>
+                <div class='aspect-1 bg-accent w-full'></div>
+                <div class='h-6 mt-2 w-32 bg-accent rounded'></div>
+                <div class='h-8 mt-2 w-16 bg-accent rounded'></div>
+              </div>
+              <div class='col-span-2 flex flex-col h-full overflow-hidden'>
+                <div class='h-full md:aspect-1 bg-accent w-full'></div>
+                <div class='h-6 mt-2 w-32 bg-accent rounded shrink-0'></div>
+                <div class='h-8 mt-2 w-16 bg-accent rounded shrink-0'></div>
+              </div>
+              <div class='hidden md:block'>
+                <div class='aspect-[1/2] bg-accent w-full'></div>
+                <div class='h-6 mt-2 w-32 bg-accent rounded'></div>
+                <div class='h-8 mt-2 w-16 bg-accent rounded'></div>
+              </div>
+            </div>
+            <div class='md:flex <%= section.preferred_show_more_button ? "justify-between" : "justify-end" %> items-end'>
+              <div class='bg-accent h-12 rounded-full w-full md:w-56 mt-8 md:order-1 hidden md:block'></div>
+              <div class='<%= section.preferred_show_more_button ? "" : "hidden" %> bg-accent h-12 rounded-button w-full md:w-72 mt-6'></div>
+            </div>
+          <% else %>
+            <div class='grid gap-4 md:gap-6 grid-cols-8 relative'>
+              <div class='col-span-6 md:col-span-2'>
+                <div class='aspect-1 bg-accent w-full'></div>
+                <div class='h-6 mt-2 w-32 bg-accent rounded'></div>
+                <div class='h-8 mt-2 w-16 bg-accent rounded'></div>
+              </div>
+              <div class='col-span-2 md:col-span-2 flex flex-col'>
+                <div class='aspect-[1/3] md:aspect-1 bg-accent w-full flex-1'></div>
+                <div class='h-6 mt-2 w-32 bg-accent rounded'></div>
+                <div class='h-8 mt-2 w-16 bg-accent rounded'></div>
+              </div>
+              <div class='col-span-2 hidden md:block'>
+                <div class='aspect-1 bg-accent w-full'></div>
+                <div class='h-6 mt-2 w-32 bg-accent rounded'></div>
+                <div class='h-8 mt-2 w-16 bg-accent rounded'></div>
+              </div>
+              <div class='col-span-2 hidden md:block'>
+                <div class='aspect-1 bg-accent w-full'></div>
+                <div class='h-6 mt-2 w-32 bg-accent rounded'></div>
+                <div class='h-8 mt-2 w-16 bg-accent rounded'></div>
+              </div>
+            </div>
+            <div class="md:hidden w-full block rounded-button bg-accent h-12 mt-8"></div>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,71 @@
+<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+  <div class="page-container py-5" style="<%= section_styles(section) %>">
+    <% heading_size = case section.preferred_heading_size
+                      when 'small' then 'text-base font-medium'
+                      when 'medium' then 'text-lg lg:text-xl font-medium'
+                      when 'large' then 'text-xl lg:text-2xl font-medium'
+                      end
+    %>
+    <h3 class="<%= heading_size %> mb-4 text-<%= section.preferred_heading_alignment %>">
+      <%= section.preferred_heading %>
+    </h3>
+    <div class="gap-6 grid-cols-2 sm:grid-cols-4 lg:grid-cols-6 xl:gap-x-8 mb-7 hidden md:grid">
+      <% section.links.each do |link| %>
+        <%= page_builder_link_to link, title: link.label, class: 'group block overflow-hidden', target: link.open_in_new_tab.presence && '_blank' do %>
+          <% if link.linkable.image&.attached? && link.linkable.image&.variable? %>
+            <div class="flex space-y-2 flex-col">
+              <%= image_tag main_app.cdn_image_url(link.linkable.image.variant(spree_image_variant_options(resize_to_fill: [600, 600]))), height: 300, width: 300, class: 'h-full w-full object-cover object-center group-hover:opacity-75 rounded-md bg-gray-200', loading: :lazy, alt: link.label %>
+              <span><%= link.label %></span>
+            </div>
+          <% else %>
+            <div class="aspect-1 w-full group-hover:bg-gray-100 bg-gray-200 rounded-md flex items-center justify-center relative">
+              <span><%= link.label %></span>
+            </div>
+          <% end %>
+        <% end %>
+      <% end %>
+    </div>
+    <div class="pt-5 flex items-center space-x-2 md:hidden">
+      <button class='swiper-custom-button-prev'>
+        <%= render 'spree/shared/icons/arrow-left' %>
+      </button>
+      <div class="swiper-container overflow-hidden mb-7 relative flex-1" data-controller='carousel' data-carousel-options-value='{
+        "slidesPerView": "auto",
+        "centeredSlides": false,
+        "spaceBetween": 10,
+        "grabCursor": true,
+        "freeMode": true,
+        "navigation": {
+          "nextEl": ".swiper-custom-button-next",
+          "prevEl": ".swiper-custom-button-prev"
+        },
+        "pagination": {
+          "el": ".swiper-pagination"
+        }
+      }'>
+        <div class='swiper-wrapper'>
+          <% section.links.each do |link| %>
+            <div class='swiper-slide w-[200px]'>
+              <%= page_builder_link_to link, title: link.label, class: 'group block overflow-hidden', target: link.open_in_new_tab.presence && '_blank' do %>
+                <% if link.linkable.image&.attached? && link.linkable.image&.variable? %>
+                  <div class="flex space-y-2 flex-col">
+                    <%= image_tag main_app.cdn_image_url(link.linkable.image.variant(spree_image_variant_options(resize_to_fill: [400, 400]))), height: 200, width: 200, class: 'h-full w-full object-cover object-center group-hover:opacity-75 rounded-md bg-gray-200', loading: :lazy, alt: link.label %>
+                    <span><%= link.label %></span>
+                  </div>
+                <% else %>
+                  <div class="aspect-1 w-full group-hover:bg-gray-100 bg-gray-200 flex items-center justify-center relative">
+                    <span><%= link.label %></span>
+                  </div>
+                <% end %>
+              <% end %>
+            </div>
+          <% end %>
+        </div>
+        <div class="swiper-pagination !relative mt-10 items-center flex mx-auto align-center justify-center"></div>
+      </div>
+      <button class='swiper-custom-button-next'>
+        <%= render 'spree/shared/icons/arrow-right' %>
+      </button>
+    </div>
+  </div>
+<% end %>