Copy the following code into Squarespace code block, but don’t forget to replace image links with your own (you can ask Claude to do it after you copy the links from Squarespace).

<style>
  #as-slider-root *, #as-slider-root *::before, #as-slider-root *::after {
    box-sizing: border-box;
  }
  #as-slider-root { width: 100%; }

  .as-slider { width: 100%; display: flex; flex-direction: column; }

  .as-slide-image { width: 100%; min-height: 260px; overflow: hidden; flex-shrink: 0; }
  .as-slide-image img {
    display: block; width: 100%; height: 92%;
    object-fit: cover; object-position: center;
    transition: opacity 0.4s ease;
  }
  .as-slide-image img.as-fade { opacity: 0; }

  .as-slide-right { flex: 1; display: flex; flex-direction: column; }

  .as-nav-row {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; padding: 12px 24px;
  }
  .as-nav-btn {
    width: 46px; height: 46px; border-radius: 50%;
    background: #000; border: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.15s, transform 0.1s; flex-shrink: 0;
  }
  .as-nav-btn:hover { background: #404040; }
  .as-nav-btn:active { transform: scale(0.95); }

  .as-beige-panel {
    flex: 1; background: #fff6e2;
    display: flex; flex-direction: column; justify-content: center;
    padding: 32px 32px 64px 32px;
    min-height: 380px;
  }

  .as-step-circle {
    position: relative; width: 61px; height: 61px;
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  }
  .as-step-circle svg { position: absolute; inset: 0; width: 100%; height: 100%; }
  .as-step-num {
    position: relative;
    font-family: 'freight-big-pro', Georgia, serif;
    font-size: 36px; line-height: 1; color: #000; font-weight: 400;
    user-select: none; transition: opacity 0.3s ease 0.08s;
  }

  .as-slide-heading {
    margin: 32px 0 0;
    font-family: 'freight-big-pro', Georgia, serif;
    font-size: 35px; line-height: 39px; color: #000; font-weight: 400;
    white-space: pre-line;
    transition: opacity 0.3s ease 0.14s, transform 0.3s ease 0.14s;
  }
  .as-slide-body {
    margin: 32px 0 0;
    font-family: 'futura-pt', 'Futura', 'Century Gothic', sans-serif;
    font-size: 16px; line-height: 24px; color: #000; font-weight: 400;
    transition: opacity 0.3s ease 0.2s, transform 0.3s ease 0.2s;
  }

  .as-text-out .as-step-num,
  .as-text-out .as-slide-heading,
  .as-text-out .as-slide-body {
    opacity: 0; transform: translateY(-6px); transition-delay: 0s !important;
  }
  .as-text-in .as-step-num,
  .as-text-in .as-slide-heading,
  .as-text-in .as-slide-body {
    opacity: 1; transform: translateY(0);
  }

  @media (min-width: 768px) {
    .as-slider { flex-direction: row; }
    .as-slide-image { width: 45%; min-height: 420px; }
    .as-nav-row { padding: 4px 40px 25px; }
    .as-beige-panel { padding: 64px 40px 96px 130px; min-height: 420px; }
    .as-slide-heading { max-width: 390px; }
    .as-slide-body { max-width: 373px; }
  }
</style>

<div id="as-slider-root">
  <div class="as-slider">
    <div class="as-slide-image">
      <img id="as-img" src="" alt="" />
    </div>
    <div class="as-slide-right">
      <div class="as-nav-row">
        <button class="as-nav-btn" id="as-prev" aria-label="Previous slide">
          <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
            <path d="M8 2L2 8L8 14" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
        <button class="as-nav-btn" id="as-next" aria-label="Next slide">
          <svg width="10" height="16" viewBox="0 0 10 16" fill="none">
            <path d="M2 2L8 8L2 14" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </button>
      </div>
      <div class="as-beige-panel" id="as-panel">
        <div class="as-step-circle">
          <svg viewBox="0 0 61 61" fill="none">
            <circle cx="30.5" cy="30.5" r="30" stroke="black"/>
          </svg>
          <span class="as-step-num" id="as-step"></span>
        </div>
        <h2 class="as-slide-heading" id="as-heading"></h2>
        <p class="as-slide-body" id="as-body"></p>
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  var slides = [
    {
      image: '<https://images.squarespace-cdn.com/content/v1/68f6dce64a80144885b50d6f/64a24c09-48ad-4673-a90c-b762a4d75cf3/Rectangle+1.png?format=750w>',
      step: '1',
      heading: 'Choose a gorgeous Squarespace template',
      body: 'Choose a modern, strategic design that fits your business. No guesswork, no messy DIY.',
    },
    {
      image: '<https://images.squarespace-cdn.com/content/v1/68f6dce64a80144885b50d6f/6a4802a8-0330-402b-ab1e-191abf916532/image+2.png?format=750w>',
      step: '2',
      heading: 'Receive your\nwebsite demo',
      body: "We'll set up the demo site on your Squarespace account so you start with a ready-made foundation—not a blank page.",
    },
    {
      image: '<https://images.squarespace-cdn.com/content/v1/68f6dce64a80144885b50d6f/bcf5853e-da70-476c-a97b-ffb092577aa2/Rectangle+6.png?format=750w>',
      step: '3',
      heading: 'Watch a tutorial,\nmake it yours',
      body: 'Swap in your photos, text, and branding. Follow the easy customization guide to bring your personality and message to life.',
    },
  ];

  var current = 0, animating = false;
  var imgEl  = document.getElementById('as-img');
  var panel  = document.getElementById('as-panel');
  var stepEl = document.getElementById('as-step');
  var headEl = document.getElementById('as-heading');
  var bodyEl = document.getElementById('as-body');

  function setSlide(idx, animate) {
    var s = slides[idx];
    if (!animate) {
      imgEl.src = s.image; imgEl.alt = 'Step ' + s.step;
      stepEl.textContent = s.step;
      headEl.textContent = s.heading;
      bodyEl.textContent = s.body;
      panel.classList.add('as-text-in');
      return;
    }
    if (animating) return;
    animating = true;
    panel.classList.remove('as-text-in');
    panel.classList.add('as-text-out');
    imgEl.classList.add('as-fade');
    setTimeout(function () {
      stepEl.textContent = s.step;
      headEl.textContent = s.heading;
      bodyEl.textContent = s.body;
      imgEl.alt = 'Step ' + s.step;
      function reveal() {
        imgEl.classList.remove('as-fade');
        panel.classList.remove('as-text-out');
        panel.classList.add('as-text-in');
        animating = false;
      }
      imgEl.onload = reveal;
      imgEl.src = s.image;
      if (imgEl.complete) { imgEl.onload = null; reveal(); }
    }, 350);
  }

  document.getElementById('as-prev').addEventListener('click', function () {
    current = (current - 1 + slides.length) % slides.length;
    setSlide(current, true);
  });
  document.getElementById('as-next').addEventListener('click', function () {
    current = (current + 1) % slides.length;
    setSlide(current, true);
  });

  setSlide(0, false);
})();
</script>