Soothing Oddity

<div class="page-width" style="padding:60px 0; background:#F7F5EF; color:#2E2E2E;">

  <div class="atelier-hero" style="margin-bottom:60px;">

    <h1 class="h0" style="margin-bottom:10px;">

      {{ section.settings.hero_heading }}

    </h1>

    <p class="subtitle" style="max-width:480px; margin-bottom:30px;">

      {{ section.settings.hero_sub }}

    </p>

    <a href="/collections/all"

       class="button"

       style="background:#A8B8A2; border-radius:6px; color:#2E2E2E;">

       Shop the Oddities

    </a>

  </div>

  <hr style="margin:60px 0; border-color:#D8C4B6;" />

  <h2 class="h2">Featured Products</h2>

  {% if section.settings.featured_collection %}

    {% assign collection = collections[section.settings.featured_collection] %}

    <div class="grid grid--3-col" style="margin-top:30px;">

      {% for product in collection.products %}

        <div class="grid__item">

          <a href="{{ product.url }}">

            <img src="{{ product.featured_image | img_url: '600x' }}"

                 style="width:100%; border-radius:8px;" />

          </a>

          <h3 class="h4" style="margin-top:10px;">{{ product.title }}</h3>

          <p>{{ product.price | money }}</p>

        </div>

      {% endfor %}

    </div>

  {% else %}

    <p>No collection selected yet.</p>

  {% endif %}

  <hr style="margin:60px 0; border-color:#D8C4B6;" />

  <h2 class="h2">About Soothing Oddity</h2>

  <p style="max-width:600px;">{{ section.settings.about_text }}</p>

  <hr style="margin:60px 0; border-color:#D8C4B6;" />

  <h2 class="h2">Join the Oddity Circle</h2>

  {% form 'customer' %}

    <input type="email" name="contact[email]" placeholder="Your email"

           style="padding:12px; width:280px; border:1px solid #C8C3D9; border-radius:4px;" />

    <button type="submit"

            class="button"

            style="background:#A8B8A2; border-radius:6px; margin-left:10px;">

      Sign Up

    </button>

  {% endform %}

</div>

{% schema %}

{

  "name": "Soothing Oddity – Atelier Test Page",

  "settings": [

    { "type": "text", "id": "hero_heading", "label": "Hero heading", "default": "Soothing Oddity" },

    { "type": "text", "id": "hero_sub", "label": "Hero subheading", "default": "Handmade candles, soaps, and soothing odd creations." },

    { "type": "collection", "id": "featured_collection", "label": "Featured collection" },

    { "type": "textarea", "id": "about_text", "label": "About text", "default": "Soothing Oddity celebrates the charm of handmade goods. Every candle, soap, and mist is crafted with intention, warmth, and a touch of oddity." }

  ],

  "presets": [{ "name": "Soothing Oddity – Atelier Test Page" }]

}

{% endschema %}