THe Lawnpack

{% schema %}
{
  "name": "Lawn Pack Clone Section",
  "settings": [
    { "type": "image_picker", "id": "hero_image", "label": "Hero Image" },
    { "type": "text", "id": "heading", "label": "Main Heading", "default": "The Ultimate Lawn Transformation Kit" },
    { "type": "text", "id": "subheading", "label": "Subheading", "default": "All‑in‑one solution for a lush lawn in 4 weeks" },
    { "type": "richtext", "id": "features_html", "label": "Features HTML", "default": "<ul><li>Fast results in 4 weeks</li><li>Safe for kids & pets</li><li>Pre‑measured kit</li><li>6‑week money‑back guarantee</li></ul>" }
  ],
  "presets": [{ "name": "Lawn Pack Clone", "category": "Product" }]
}
{% endschema %}

{% stylesheet %}
.lcp-hero { display: grid; grid-template-columns:1fr 1fr; gap:20px; align-items:center; padding:60px 0; }
.lcp-hero img { width:100%; border-radius:8px; }
.lcp-info h1 { font-size:2.4em; margin-bottom:10px; }
.lcp-info p { font-size:1.1em; color:#555; }
.lcp-info .btn { background:#3a7d44; color:#fff; padding:15px 30px; font-size:1.2em; border:none; border-radius:6px; cursor:pointer; }
.lcp-features { margin:40px 0; }
.lcp-features ul { list-style: none; padding-left:0; }
.lcp-features li { margin-bottom:12px; padding-left: 1.5em; position: relative; }
.lcp-features li:before { content: "✔"; position: absolute; left:0; color:#3a7d44; }
{% endsstylesheet %}

<section class="lcp-hero">
  <div class="lcp-info">
    <h1>{{ section.settings.heading }}</h1>
    <p>{{ section.settings.subheading }}</p>
    <form action="/cart/add" method="post">
      <input type="hidden" name="id" value="{{ product.variants.first.id }}">
      <button type="submit" class="btn">Add to Cart – {{ product.price | money }}</button>
    </form>
    <div class="lcp-features">{% if section.settings.features_html %}{{ section.settings.features_html | html }}{% endif %}</div>
  </div>
  <div><img src="{{ section.settings.hero_image | img_url: '800x' }}" alt="Hero"></div>
</section>