Hero Product Cards

<section class="sl-hero-cards" style="padding:clamp(32px,6vw,64px) clamp(1rem,3vw,2rem);color:inherit;font-family:inherit;">
  <div style="max-width:1400px;margin:0 auto;">
    <header style="display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:baseline;margin:0 0 1.5rem;">
      <div>
        {%- if section.settings.eyebrow != blank -%}
          <span style="font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;color:var(--sl-accent,#0a5cff);font-weight:700;">{{ section.settings.eyebrow }}</span>
        {%- endif -%}
        <h2 style="margin:.15rem 0 0;font-size:clamp(1.5rem,3vw,2.25rem);">{{ section.settings.heading }}</h2>
      </div>
      {%- if section.settings.cta_link != blank -%}
        <a href="{{ section.settings.cta_link }}" style="color:var(--sl-accent,#0a5cff);text-decoration:none;border-bottom:1px solid var(--sl-accent,#0a5cff);font-size:.9rem;font-weight:600;">{{ section.settings.cta_text | default: 'See all' }} &rarr;</a>
      {%- endif -%}
    </header>
    <style>
      @keyframes sl-card-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
      .sl-hero-card { animation: sl-card-in .55s ease-out both; animation-delay: calc(var(--i) * 100ms); }
    </style>
    <div style="display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));">
      {%- assign coll = collections[section.settings.collection] -%}
      {%- if coll.products.size > 0 -%}
        {%- for product in coll.products limit: 4 -%}
          <article class="sl-hero-card" style="--i: {{ forloop.index0 }};border-radius:.75rem;overflow:hidden;background:{{ section.settings.card_color | default: 'transparent' }};border:1px solid currentColor;display:flex;flex-direction:column;">
            <a href="{{ product.url }}" style="color:inherit;text-decoration:none;display:block;">
              <img src="{{ product.featured_image | image_url: width: 600 | default: 'https://picsum.photos/seed/hpc/600/600' }}" alt="{{ product.featured_image.alt | default: product.title }}" loading="lazy" style="width:100%;aspect-ratio:1/1;object-fit:cover;display:block;" />
            </a>
            <div style="padding:1rem;display:flex;flex-direction:column;gap:.4rem;flex:1;">
              {%- assign rating = product.metafields.reviews.rating.value | default: 4.8 -%}
              <span role="img" aria-label="Rated {{ rating }} out of 5" style="color:var(--sl-accent,#0a5cff);font-size:.9rem;line-height:1;">&#9733;&#9733;&#9733;&#9733;&#9733; <span style="color:inherit;opacity:.7;font-size:.8rem;">{{ rating }}</span></span>
              <h3 style="margin:0;font-size:1rem;line-height:1.3;"><a href="{{ product.url }}" style="color:inherit;text-decoration:none;">{{ product.title }}</a></h3>
              <p style="margin:0;font-weight:700;color:var(--sl-accent,#0a5cff);">{{ product.price | money }}</p>
              {% form 'product', product %}
                <button type="submit" name="add" style="margin-top:.35rem;padding:.65rem 1rem;background:var(--sl-accent,#0a5cff);color:#fff;border:0;border-radius:.375rem;font-family:inherit;font-weight:700;cursor:pointer;font-size:.9rem;">{{ section.settings.button_text | default: 'Add to cart' }}</button>
              {% endform %}
            </div>
          </article>
        {%- endfor -%}
      {%- else -%}
        {%- for i in (1..4) -%}
          <article class="sl-hero-card" style="--i: {{ forloop.index0 }};border-radius:.75rem;overflow:hidden;background:{{ section.settings.card_color | default: 'transparent' }};border:1px solid currentColor;display:flex;flex-direction:column;">
            <img src="https://picsum.photos/seed/hpc{{ i }}/600/600" alt="{{ section.settings.placeholder_alt | default: 'Product placeholder' }}" loading="lazy" style="width:100%;aspect-ratio:1/1;object-fit:cover;display:block;" />
            <div style="padding:1rem;display:flex;flex-direction:column;gap:.4rem;flex:1;">
              <span role="img" aria-label="Rated 4.8 out of 5" style="color:var(--sl-accent,#0a5cff);font-size:.9rem;line-height:1;">&#9733;&#9733;&#9733;&#9733;&#9733; <span style="color:inherit;opacity:.7;font-size:.8rem;">4.8</span></span>
              <h3 style="margin:0;font-size:1rem;line-height:1.3;">Featured product {{ i }}</h3>
              <p style="margin:0;font-weight:700;color:var(--sl-accent,#0a5cff);">$29.00</p>
              <button type="button" style="margin-top:.35rem;padding:.65rem 1rem;background:var(--sl-accent,#0a5cff);color:#fff;border:0;border-radius:.375rem;font-family:inherit;font-weight:700;cursor:pointer;font-size:.9rem;">{{ section.settings.button_text | default: 'Add to cart' }}</button>
            </div>
          </article>
        {%- endfor -%}
      {%- endif -%}
    </div>
  </div>
</section>
{% schema %}
{
  "name": "Hero Product Cards",
  "settings": [
    { "type": "text", "id": "eyebrow", "label": "Eyebrow", "default": "Bestsellers" },
    { "type": "text", "id": "heading", "label": "Heading", "default": "Shop the edit" },
    { "type": "collection", "id": "collection", "label": "Collection" },
    { "type": "text", "id": "cta_text", "label": "Header link text", "default": "See all" },
    { "type": "url", "id": "cta_link", "label": "Header link URL" },
    { "type": "text", "id": "button_text", "label": "Button text", "default": "Add to cart" },
    { "type": "color", "id": "card_color", "label": "Card background" },
    { "type": "text", "id": "placeholder_alt", "label": "Alt text (placeholder)", "default": "Product placeholder" }
  ],
  "presets": [{ "name": "Hero Product Cards" }]
}
{% endschema %}