spree_storefront 5.0.0.rc1

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

@@ -0,0 +1,62 @@
+<% cache_unless page_builder_enabled?, [*spree_base_cache_scope.call(section), current_store] do %>
+  <footer
+    id='footer'
+    <% unless current_theme_preview %>
+    data-turbo-permanent
+    <% end %>>
+    <div style='<%= section_styles(section) %>'>
+      <div class="page-container">
+        <div class="flex gap-0 md:gap-6 md:flex-row flex-col">
+          <div class="flex justify-center flex-grow py-2 md:py-0 border-b md:border-none lg:w-60">
+            <%= render 'spree/shared/logo', logo: section.logo.attached? ? section.logo : current_header_logo %>
+          </div>
+          <div class="grid grid-cols-1 lg:grid-cols-4 grow w-full">
+            <% section.blocks.includes(:links).each do |block| %>
+              <div class="flex-grow gap-1 flex flex-col py-6 md:py-0 border-b md:border-none border-default lg:mb-6">
+                <div <%= block_attributes(block) %>>
+                  <h3 class="text-sm py-2"><%= block.preferred_label %></h3>
+                  <ul class="uppercase text-sm tracking-wider !leading-4 flex flex-col gap-1">
+                    <% block.links.each do |link| %>
+                      <li class='py-2'>
+                        <%= page_builder_link_to link, target: ('_blank' if link.open_in_new_tab), rel: ('noopener noreferrer' if link.open_in_new_tab), **link_attributes(link, as_html: false) do %>
+                          <%= link.label %>
+                        <% end %>
+                      </li>
+                    <% end %>
+                  </ul>
+                </div>
+              </div>
+            <% end %>
+          </div>
+          <div class="flex-grow gap-4 flex flex-col justify-between lg:w-60">
+            <div class="gap-1 flex flex-col py-6 md:py-0">
+              <h3 class="text-sm py-2"><%= Spree.t(:follow_us) %></h3>
+              <div class="flex flex-wrap gap-2 max-w-48 py-2">
+                <% cache spree_base_cache_scope.call(current_store) do %>
+                  <% Spree::Store::SUPPORTED_SOCIAL_NETWORKS.each do |media| %>
+                    <% if current_store.send(media).present? %>
+                      <%= link_to current_store.send("#{media}_link") do %>
+                        <%= render "spree/shared/icons/#{media.gsub('_', '-')}" %>
+                        <span class='hidden'><%= current_store.send("#{media}_handle") %></span>
+                      <% end %>
+                    <% end %>
+                  <% end %>
+                <% end %>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="flex justify-end w-full"></div>
+      </div>
+    </div>
+    <div class="text-sm" style="color: <%= section.preferred_copyright_text_color %>; background-color: <%= section.preferred_copyright_background_color %>">
+      <div class='page-container py-2 flex justify-center gap-2'>
+        <span>© <%= Time.now.year %>
+        <a href='/'><%= current_store.name %></a>. <%= Spree.t(:all_rights_reserved) %>.</span>
+        <span>
+          Powered by <a href='https://spreecommerce.org' target="_blank" rel="follow" class="underline">Spree Commerce</a>
+        </span>
+      </div>
+    </div>
+  </footer>
+<% end %>

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

@@ -0,0 +1,166 @@
+<% layout = section.preferred_layout %>
+<header
+  class='sticky has-[.currency-and-locale-modal:not(.hidden)]:relative top-0 z-50 has-[.currency-and-locale-modal:not(.hidden)]:z-[unset] header-<%= layout %>'
+  data-controller='header toggle-menu slideover <%= "slideover-account" if show_account_pane? %>'
+  data-toggle-menu-class='hamburger-visible'
+  data-slideover-invisible-class='translate-x-full,opacity-0'
+  data-slideover-visible-class='translate-x-0,opacity-100'
+  data-slideover-active-target='#slideover-cart'
+  data-slideover-account-invisible-class='translate-x-full,opacity-0'
+  data-slideover-account-visible-class='translate-x-0,opacity-100'
+  data-slideover-account-active-target='#slideover-account'
+>
+  <nav
+    aria-label='Top'
+    style="<%= section_styles(section) %>"
+    class="transition-transform duration-300 relative">
+    <div class='page-container'>
+      <div class='flex items-center<%= " lg:items-end" if layout == "logo-centered" %> <%= " lg:items-center" unless layout == "logo-centered" %> justify-between '>
+        <% unless layout == 'logo-centered' %>
+          <div class='hidden lg:flex' id='header-logo'>
+            <%= render 'spree/shared/logo', logo: section.logo, height: section.preferred_desktop_logo_height %>
+          </div>
+        <% end %>
+
+        <div class='flex -order-1 flex-1 <%= " lg:flex-none lg:order-1 z-10 lg:mr-8" unless layout == "logo-centered" %>'>
+          <!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
+          <button
+            type='button'
+            data-action='click->toggle-menu#toggle touch->toggle-menu#toggle'
+            class='lg:hidden relative w-6'
+            data-toggle-menu-target='button'
+          >
+            <span class='sr-only'><%= Spree.t(:toggle_menu) %></span>
+            <div
+              class='absolute top-0'
+            >
+              <%= render 'spree/shared/icons/menu', color: section.preferred_text_color %>
+            </div>
+            <div
+              class='absolute top-0 opacity-0'
+            >
+              <%= render 'spree/shared/icons/close', color: section.preferred_text_color %>
+            </div>
+          </button>
+
+          <!-- Search button -->
+          <div class='<%= "lg:relative" unless layout == "logo-centered" %> flex'>
+            <button
+              class='ml-4 lg:ml-0 flex items-center'
+              id='open-search'
+              data-action='click->toggle-menu#hide touch->toggle-menu#hide'
+            >
+              <%= render 'spree/shared/icons/search', color: section.preferred_text_color %>
+              <span class='hidden lg:block ml-2 text-sm !leading-6 uppercase'><%= Spree.t(:search) %></span>
+            </button>
+          </div>
+        </div>
+
+        <div class='flex items-center flex-col<%= " lg:flex-1" unless layout == "logo-centered" %> header-nav-container'>
+          <!-- Logo -->
+          <div class='<%= "flex lg:pb-4" if layout == "logo-centered" %><%= "lg:hidden" unless layout == "logo-centered" %>' id='header-logo'>
+            <%= render 'spree/shared/logo', logo: section.logo, height: section.preferred_desktop_logo_height %>
+          </div>
+
+          <!-- Desktop Menu -->
+          <% if layout == 'nav-centered' %>
+            <div
+              class='hidden lg:flex absolute top-px left-1/2 -translate-x-1/2 justify-center w-[calc(100%-29rem)] overflow-auto'
+            >
+          <% end %>
+          <div class='hidden lg:flex<%= " w-full px-12" if layout == "left" %>'>
+            <div class='flex flex-wrap justify-center h-full mx-4'>
+              <%= render 'spree/page_sections/nav/desktop', section: section %>
+            </div>
+          </div>
+        </div>
+        <% if layout == 'nav-centered' %></div><% end %>
+        <div
+          class='flex items-center gap-4 flex-1 justify-end<%= " lg:flex-none order-2" unless layout == "logo-centered" %>'
+        >
+          <% if should_render_currency_dropdown? || should_render_locale_dropdown? %>
+            <div
+            data-controller="modal"
+            data-modal-allow-background-close="true"
+            data-modal-
+            class="hidden lg:flex"
+            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>
+          <% end %>
+
+          <!-- Desktop Account -->
+          <div class='hidden lg:flex'>
+            <% if show_account_pane? %>
+              <button
+                data-action='click->slideover-account#toggle click@window->slideover-account#hide click->toggle-menu#hide touch->toggle-menu#hide'
+              >
+                <%= render 'spree/shared/icons/account', color: section.preferred_text_color, section: section %>
+              </button>
+            <% else %>
+              <%= link_to spree.account_path do %>
+                <%= render 'spree/shared/icons/account', color: section.preferred_text_color, section: section %>
+              <% end %>
+            <% end %>
+          </div>
+
+          <% if show_account_pane? %>
+            <%= form_with url: spree.account_wishlist_path, method: :get, data: { turbo_stream: true } do %>
+              <button
+                type="submit"
+                id="wishlist-icon"
+                class="flex items-end">
+                <%= render 'spree/shared/wishlist_icon', wishlist: current_wishlist, background_color: section.preferred_background_color %>
+              </button>
+            <% end %>
+          <% else %>
+            <%= link_to spree.account_wishlist_path, id: "wishlist-icon" do %>
+              <%= render 'spree/shared/wishlist_icon', background_color: section.preferred_background_color %>
+            <% end %>
+          <% end %>
+
+          <!-- Cart -->
+          <div
+            data-action='click->toggle-menu#hide touch->toggle-menu#hide'
+          >
+            <%= render 'spree/shared/cart_icon' %>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class='hide-on-load h-0 opacity-0 pointer-events-none'
+      data-toggle-menu-target='toggleable'
+      role='dialog'
+      aria-modal='true'
+    >
+      <div
+        class='flex justify-between flex-col lg:hidden w-full transition-transform translate-x-[-50%] has-[.currency-and-locale-modal:not(.hidden)]:transform-none body header--mobile-menu'
+        data-toggle-menu-target='content'
+        style='background-color: <%= section.preferred_background_color %>; height: calc(100dvh - 38px);'
+        >
+        <%= render 'spree/page_sections/nav/mobile', section: section %>
+      </div>
+    </div>
+  </nav>
+  <%= render 'spree/shared/cart_pane', section: section %>
+  <% if show_account_pane? %>
+    <%= render 'spree/shared/account_pane', section: section %>
+  <% end %>
+
+  <%= render 'spree/shared/search', section: section, logo: section.logo, logo_height: section.preferred_desktop_logo_height %>
+</header>

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

@@ -0,0 +1,57 @@
+<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+  <div class="w-full relative image-banner" style="<%= section_styles(section) %>;height: <%= section.preferred_height %>px">
+    <div class="w-full absolute left-0 image-banner--image-wrapper" style="height: <%= section.preferred_height %>px; opacity: <%= section.preferred_overlay_transparency %>%;">
+      <% if section.image.attached? && section.image.variable? %>
+        <picture>
+          <source media="(max-width: 640px)" srcset="<%= main_app.cdn_image_url(section.image.variant(spree_image_variant_options(resize_to_limit: [640, nil]))) %>">
+          <source media="(max-width: 750px)" srcset="<%= main_app.cdn_image_url(section.image.variant(spree_image_variant_options(resize_to_limit: [750, nil]))) %>">
+          <source media="(max-width: 828px)" srcset="<%= main_app.cdn_image_url(section.image.variant(spree_image_variant_options(resize_to_limit: [828, nil]))) %>">
+          <source media="(max-width: 1080px)" srcset="<%= main_app.cdn_image_url(section.image.variant(spree_image_variant_options(resize_to_limit: [1080, nil]))) %>">
+          <source media="(max-width: 1200px)" srcset="<%= main_app.cdn_image_url(section.image.variant(spree_image_variant_options(resize_to_limit: [1200, nil]))) %>">
+          <source media="(min-width: 1201px)" srcset="<%= main_app.cdn_image_url(section.image.variant(spree_image_variant_options(resize_to_limit: [2000, nil]))) %>">
+          <%= image_tag main_app.cdn_image_url(section.image.variant(spree_image_variant_options(resize_to_limit: [2000, nil]))), class: "w-full h-full object-cover", loading: "lazy" %>
+        </picture>
+      <% end %>
+    </div>
+    <%
+      vertical_alignment_class = case section.preferred_vertical_alignment
+                                when 'top'
+                                  'justify-start'
+                                when 'bottom'
+                                  'justify-end'
+                                else
+                                  'justify-center'
+                                end
+    %>
+    <div class="flex h-full w-full items-center justify-center">
+      <div class="flex flex-col <%= vertical_alignment_class %> p-5 z-10 w-full gap-y-2 h-full image-banner--block-wrapper">
+        <% section.blocks.includes(:rich_text_text, :links).each do |block| %>
+          <% case block.type %>
+          <% when 'Spree::PageBlocks::Heading' %>
+            <h2 class="w-full font-medium <%= block.preferred_size == 'small' ? 'text-lg' : (block.preferred_size == 'medium' ? 'text-xl' : 'text-2xl lg:text-3xl') %> image-banner--heading" <%= block_attributes(block) %>>
+              <%= block.text %>
+            </h2>
+          <% when 'Spree::PageBlocks::Text' %>
+            <div class="w-full image-banner--text" <%= block_attributes(block) %>>
+              <%= block.text %>
+            </div>
+          <% when 'Spree::PageBlocks::Buttons' %>
+            <div <%= block_attributes(block) %> class="w-full text-center image-banner--buttons">
+              <div class="inline-block">
+                <div class="flex flex-col lg:flex-row gap-4">
+                  <% if block.link.present? %>
+                    <% if block.link.linkable_url.present? %>
+                      <%= page_builder_link_to block.link, label: block.link.label, class: "btn-#{block.preferred_button_style_1}", target: (block.link.open_in_new_tab ? "_blank" : nil) %>
+                    <% else %>
+                      <%= button_tag block.link.label, class: "btn-#{block.preferred_button_style_1}", disabled: true %>
+                    <% end %>
+                  <% end %>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,66 @@
+<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+  <div style="<%= section_styles(section) %>" class="image-with-text <%= 'right-aligned' if section.preferred_desktop_image_alignment == 'right' %>">
+    <div class="page-container">
+      <div class="lg:grid lg:grid-cols-12 lg:gap-6 image-with-text--container">
+        <div class="lg:col-span-6 aspect-[6/7] <%= 'lg:col-start-7 lg:order-1' if section.preferred_desktop_image_alignment == 'right' %> image-with-text--image-wrapper">
+          <%= page_builder_link_to(section.link, title: section.link&.label,  target: (section.link&.open_in_new_tab ? '_blank' : nil)) do %>
+            <% if section.image.present? %>
+              <%= image_tag main_app.cdn_image_url(section.image.variant(spree_image_variant_options(resize_to_fill: [2000, nil]))),
+                class: "w-full h-full object-cover",
+                loading: :lazy,
+                sizes: "(max-width: 1024px) 100vw, 50vw",
+                srcset: [640, 750, 828, 1080, 1200, 2000].map { |width|
+                  "#{main_app.cdn_image_url(section.image.variant(spree_image_variant_options(resize_to_fill: [width, nil])))} #{width}w"
+                }.join(', ')
+              %>
+            <% else %>
+              <%= content_tag(:div, '', class: 'w-full h-full object-cover bg-gray-100') %>
+            <% end %>
+          <% end %>
+        </div>
+        <%
+          vertical_alignment_class = case section.preferred_vertical_alignment
+          when 'top'
+            'lg:content-start'
+          when 'bottom'
+            'lg:content-end'
+          else
+            'lg:content-center'
+          end
+        %>
+        <div class="lg:grid lg:col-span-5 <%= vertical_alignment_class %> <%= 'lg:col-start-8' if section.preferred_desktop_image_alignment == 'left' %> image-with-text--blocks-wrapper">
+          <% section.blocks.includes(:rich_text_text, :links).each do |block| %>
+            <% case block.type %>
+            <% when 'Spree::PageBlocks::Heading' %>
+              <h2 class="<%= block.preferred_size == 'small' ? 'text-lg' : (block.preferred_size == 'medium' ? 'text-xl' : 'text-2xl lg:text-3xl') %> font-medium" <%= block_attributes(block) %>>
+                <%= page_builder_link_to(section.link, target: (section.link&.open_in_new_tab ? '_blank' : nil), class: "image-with-text--heading", style: block_background_color_style(block)) do %>
+                  <%= block.text %>
+                <% end %>
+              </h2>
+            <% when 'Spree::PageBlocks::Text' %>
+              <div <%= block_attributes(block) %>>
+                <%= page_builder_link_to(section.link, target: (section.link&.open_in_new_tab ? '_blank' : nil), class: "image-with-text--text", style: block_background_color_style(block)) do %>
+                  <%= block.text %>
+                <% end %>
+              </div>
+            <% when 'Spree::PageBlocks::Buttons' %>
+              <div class="w-full image-with-text--buttons" <%= block_attributes(block) %>>
+                <div class="inline-block">
+                  <div class="flex flex-col lg:flex-row gap-4">
+                    <% if block.link %>
+                      <%= page_builder_link_to block.link,
+                          label: block.link.label,
+                          class: block.preferred_button_style_1 == 'secondary' ? 'btn-secondary' : 'btn-primary',
+                          target: (block.link.open_in_new_tab ? '_blank' : nil),
+                          rel: (block.link.open_in_new_tab ? 'noopener noreferrer' : nil) %>
+                    <% end %>
+                  </div>
+                </div>
+              </div>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,64 @@
+<% logo = section.logo || current_store.logo %>
+
+<footer
+  id='password-footer'
+  style='<%= section_styles(section) %>'
+  <%= 'data-turbo-permanent' unless page_builder_enabled? %>>
+  <div class='page-container'>
+    <div class='flex flex-col lg:flex-row lg:justify-between'>
+      <div class='flex justify-center items-center'>
+        <%= render 'spree/shared/logo', logo: logo %>
+      </div>
+      <div class='flex justify-center gap-4 lg:gap-0 py-6 lg:py-0 items-end'>
+        <% if current_store.instagram.present? %>
+          <%= link_to current_store.instagram_link, class: 'p-3', target: '_blank', rel: 'nofollow' do %>
+            <%= render 'spree/shared/icons/instagram' %>
+            <span class='hidden'><%= current_store.instagram_handle %></span>
+          <% end %>
+        <% end %>
+
+        <% if current_store.tiktok.present? %>
+          <%= link_to current_store.tiktok_link, class: 'p-3', target: '_blank', rel: 'nofollow' do %>
+            <%= render 'spree/shared/icons/tiktok' %>
+            <span class='hidden'><%= current_store.tiktok_handle %></span>
+          <% end %>
+        <% end %>
+
+        <% if current_store.facebook.present? %>
+          <%= link_to current_store.facebook_link, class: 'p-3', target: '_blank', rel: 'nofollow' do %>
+            <%= render 'spree/shared/icons/facebook' %>
+            <span class='hidden'><%= current_store.facebook_handle %></span>
+          <% end %>
+        <% end %>
+
+        <% if current_store.twitter.present? %>
+          <%= link_to current_store.twitter_link, class: 'p-3', target: '_blank', rel: 'nofollow' do %>
+            <%= render 'spree/shared/icons/twitter' %>
+            <span class='hidden'><%= current_store.twitter_handle %></span>
+          <% end %>
+        <% end %>
+
+        <% if current_store.youtube.present? %>
+          <%= link_to current_store.youtube_link, class: 'p-3', target: '_blank', rel: 'nofollow' do %>
+            <%= render 'spree/shared/icons/youtube' %>
+            <span class='hidden'><%= current_store.youtube_handle %></span>
+          <% end %>
+        <% end %>
+
+        <% if current_store.spotify.present? %>
+          <%= link_to current_store.spotify_link, class: 'p-3', target: '_blank', rel: 'nofollow' do %>
+            <%= render 'spree/shared/icons/spotify' %>
+            <span class='hidden'><%= current_store.spotify_handle %></span>
+          <% end %>
+        <% end %>
+
+        <% if current_store.pinterest.present? %>
+          <%= link_to current_store.pinterest_link, class: 'p-3', target: '_blank', rel: 'nofollow' do %>
+            <%= render 'spree/shared/icons/pinterest' %>
+            <span class='hidden'><%= current_store.pinterest_handle %></span>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</footer>

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

@@ -0,0 +1,54 @@
+<% logo = section.logo || current_store.logo %>
+<div style='<%= section_styles(section) %>'>
+  <div class="page-container">
+    <div class="bg-background text-text flex flex-col items-center gap-2 md:flex-row justify-between">
+      <% if logo&.attached? && logo.variable? %>
+        <%= render 'spree/shared/logo', logo: section.logo, height: section.preferred_desktop_logo_height %>
+      <% else %>
+        <h1 class="text-2xl"><%= current_store.name %></h1>
+      <% end %>
+
+      <div
+        data-controller="modal"
+        data-modal-allow-background-close="true"
+        data-modal-backdrop-color-value="rgba(0,0,0,0.32)"
+        class="h-full">
+        <%= button_tag class: "underline flex gap-2 items-center", data: { action: "click->modal#open" } do %>
+          <span>
+            <%= render 'spree/shared/icons/lock', class: "w-5 h-5" %>
+          </span>
+          <%= Spree.t(:enter_using_password) %>
+        <% end %>
+
+        <div
+          data-modal-target="container"
+          data-action="click->modal#closeBackground keyup@window->modal#closeWithKeyboard"
+          class="hidden animated fadeIn fixed inset-0 overflow-y-auto flex items-center justify-center z-[9999]">
+          <div class="w-full lg:w-[800px] relative h-[100dvh] lg:h-auto lg:max-h-screen flex items-center">
+            <div class="lg:mx-0 w-full bg-background">
+              <div class="px-8 py-6">
+                <div class="flex justify-between uppercase mb-4">
+                  <%= Spree.t(:enter_using_password) %>
+                  <%= button_tag data: { action: "click->modal#close" } do %>
+                    <%= render 'spree/shared/icons/close' %>
+                    <span class="sr-only"><%= Spree.t(:close) %></span>
+                  <% end %>
+                </div>
+                <div class="text-sm p-1">
+                  <%= form_with url: spree.password_path, method: :post, class: "flex gap-2" do |f| %>
+                    <%= f.password_field :password,
+                      class: 'text-input w-full px-4 py-3',
+                      placeholder: Spree.t(:password),
+                      required: true,
+                      autofocus: true %>
+                    <%= f.button Spree.t(:enter), type: :submit, class: "btn w-40 btn-primary" %>
+                  <% end %>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,47 @@
+<% img = section.image %>
+
+<div class="w-full flex justify-center items-center relative" style="<%= section_styles(section) %>">
+  <% if img.attached? && img.variable? %>
+    <img
+      class="w-full h-full absolute top-0 object-cover z-0"
+      style="opacity: <%= section.preferred_overlay_transparency %>%"
+      src="<%= main_app.cdn_image_url(img.variant(spree_image_variant_options(resize_to_limit: [2000, nil]))) %>" />
+  <% end %>
+  <div class="w-full page-container flex flex-col text-center py-5 px-5 z-10">
+    <% section.blocks.includes(:rich_text_text).each do |block| %>
+      <% case block.type %>
+        <% when 'Spree::PageBlocks::Heading' %>
+          <h2 class='font-medium <%= block.preferred_size == 'small' ? 'text-xl lg:text-2xl' : block.preferred_size == 'medium' ? 'text-xl lg:text-3xl' : 'text-2xl lg:text-3xl' %>' <%= block_attributes(block) %>>
+            <%= block.text.body %>
+          </h2>
+        <% when 'Spree::PageBlocks::Text' %>
+          <div class='text-sm lg:text-base' <%= block_attributes(block) %>>
+            <%= block.text.body %>
+          </div>
+        <% when 'Spree::PageBlocks::NewsletterForm' %>
+          <%= form_for :newsletter, url: spree.newsletter_subscribers_path do |f| %>
+            <div class="flex items-center flex-col md:flex-row w-full <%= block_css_classes(block) %>" <%= block_attributes(block) %>>
+              <div class='relative w-full lg:w-[424px] flex'>
+                <%= hidden_field_tag :section_id, section.id %>
+                <%= f.email_field :email, placeholder: block.preferred_placeholder, required: true, class: 'focus:border-primary focus:ring-primary pr-36 text-sm bg-accent rounded-input border-accent py-2 px-4 w-full relative z-30 !leading-[46px]' %>
+                <div class="absolute right-2 top-1/2 transform -translate-y-1/2 z-40">
+                  <%= f.submit block.preferred_button_text.html_safe, class: "#{block.preferred_button_style == 'secondary' ? 'btn-secondary' : 'btn-primary'} content-center" %>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        <% when 'Spree::PageBlocks::Subheading' %>
+          <h3 class='<%= block.size == 'small' ? 'text-lg' : block.size == 'medium' ? 'text-xl' : 'text-xl' %>' <%= block_attributes(block) %>>
+            <%= block.text.body %>
+          </h3>
+        <% when 'Spree::PageBlocks::Image' %>
+          <div <%= block_attributes(block) %> class="flex justify-center w-full">
+            <% if block.image.attached? && block.image.variable? %>
+              <% image_style = "aspect-ratio: #{as_aspect_ratio(block.image)}; --desktop-height: #{block.preferred_height}px; --mobile-height: #{block.preferred_mobile_height}px;" %>
+              <%= image_tag main_app.cdn_image_url(block.image.variant(spree_image_variant_options(resize_to_fill: [1000, 1000]))), height: block.preferred_height, width: block.preferred_width, class: "custom-desktop-height custom-mobile-height", style: image_style %>
+            <% end %>
+          </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,7 @@
+<% cache_unless page_builder_enabled?, spree_base_cache_scope.call(section) do %>
+  <div class="page-container">
+    <h1 class="text-xl lg:text-2xl font-medium py-10 lg:pt-16 lg:pb-6" style="<%= section_heading_styles(section) %>">
+      <%= section.preferred_title.presence || title %>
+    </h1>
+  </div>
+<% end %>

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

@@ -0,0 +1,19 @@
+<div style="<%= section_styles(section) %>">
+  <div class="page-container">
+    <div class="flex flex-col max-w-3xl m-auto mt-16 first:mt-0">
+      <% 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 %>
+
+      <h1 class="uppercase text-2xl font-medium mt-4"><%= post.title %></h1>
+
+      <% if post.published? %>
+        <div class="mt-2 text-sm"><%= local_time(post.published_at, '%B %e, %Y') %></div>
+      <% end %>
+
+      <div class="mt-8 post-details-content"><%= post.content %></div>
+    </div>
+  </div>
+</div>
+
+<%= render 'spree/posts/json_ld', post: post %>

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

@@ -0,0 +1,11 @@
+<div style="<%= section_styles(section) %>">
+  <% if @posts.any? %>
+    <div class="page-container">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-4 auto-rows-fr">
+        <%= render partial: 'spree/posts/post', collection: @posts, cached: true %>
+      </div>
+
+      <%= paginate @posts, theme: 'storefront', outer_window: 1, inner_window: 2 %>
+    </div>
+  <% end %>
+</div>