rebly-sections 1.0.0

package/assets/data/component-library/hero-banner.liquid

@@ -0,0 +1,104 @@
+{%- comment -%} rebly-sections: Hero Banner | Category: hero | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="hero-banner">
+  <div class="hero-banner__inner"
+    style="
+      --overlay-opacity: {{ section.settings.overlay_opacity | divided_by: 100.0 }};
+      --text-color: {{ section.settings.text_color }};
+      --min-height: {{ section.settings.min_height }}px;
+    ">
+
+    {%- if section.settings.image != blank -%}
+      <div class="hero-banner__bg">
+        {{- section.settings.image | image_url: width: 1920 | image_tag: loading: 'eager', fetchpriority: 'high', class: 'hero-banner__img' -}}
+      </div>
+    {%- endif -%}
+
+    <div class="hero-banner__overlay"></div>
+
+    {%- for block in section.blocks -%}
+      <div {{ block.shopify_attributes }}></div>
+    {%- endfor -%}
+
+    <div class="hero-banner__content hero-banner__content--{{ section.settings.content_position }}">
+      {%- if section.settings.heading != blank -%}
+        <h1 class="hero-banner__heading">{{ section.settings.heading | escape }}</h1>
+      {%- endif -%}
+      {%- if section.settings.subtext != blank -%}
+        <p class="hero-banner__subtext">{{ section.settings.subtext | escape }}</p>
+      {%- endif -%}
+      {%- if section.settings.button_label != blank -%}
+        <a href="{{ section.settings.button_link }}" class="hero-banner__btn btn">
+          {{ section.settings.button_label | escape }}
+        </a>
+      {%- endif -%}
+    </div>
+
+  </div>
+</section>
+
+<style>
+  #section-{{ section.id }} .hero-banner__inner {
+    position: relative;
+    display: grid;
+    place-items: center;
+    min-height: var(--min-height, 500px);
+    overflow: hidden;
+    color: var(--text-color, #ffffff);
+  }
+  #section-{{ section.id }} .hero-banner__bg,
+  #section-{{ section.id }} .hero-banner__img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  #section-{{ section.id }} .hero-banner__overlay {
+    position: absolute;
+    inset: 0;
+    background: rgba(0,0,0, var(--overlay-opacity, 0.4));
+  }
+  #section-{{ section.id }} .hero-banner__content {
+    position: relative;
+    z-index: 1;
+    padding: 2rem;
+    max-width: 800px;
+    text-align: center;
+  }
+  #section-{{ section.id }} .hero-banner__content--left { text-align: left; justify-self: start; }
+  #section-{{ section.id }} .hero-banner__content--right { text-align: right; justify-self: end; }
+  #section-{{ section.id }} .hero-banner__heading { font-size: clamp(2rem, 5vw, 4rem); margin: 0 0 1rem; }
+  #section-{{ section.id }} .hero-banner__subtext { font-size: 1.125rem; margin: 0 0 1.5rem; opacity: 0.9; }
+  #section-{{ section.id }} .hero-banner__btn { display: inline-block; padding: 0.75rem 2rem; background: #fff; color: #000; text-decoration: none; border-radius: 4px; font-weight: 600; }
+  @media (max-width: 749px) {
+    #section-{{ section.id }} .hero-banner__content { padding: 1.5rem; }
+    #section-{{ section.id }} .hero-banner__content--left,
+    #section-{{ section.id }} .hero-banner__content--right { text-align: center; justify-self: center; }
+  }
+</style>
+
+{% schema %}
+{
+  "name": "Hero Banner",
+  "tag": "section",
+  "class": "section-hero-banner",
+  "settings": [
+    { "type": "image_picker", "id": "image", "label": "Background Image" },
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Welcome to our store" },
+    { "type": "text", "id": "subtext", "label": "Subtext", "default": "Discover our collection" },
+    { "type": "text", "id": "button_label", "label": "Button Label", "default": "Shop Now" },
+    { "type": "url", "id": "button_link", "label": "Button Link" },
+    { "type": "range", "id": "overlay_opacity", "label": "Overlay Opacity", "min": 0, "max": 80, "step": 5, "default": 40 },
+    { "type": "range", "id": "min_height", "label": "Min Height (px)", "min": 300, "max": 900, "step": 50, "default": 500 },
+    { "type": "color", "id": "text_color", "label": "Text Color", "default": "#ffffff" },
+    { "type": "select", "id": "content_position", "label": "Content Position", "options": [
+      { "value": "left", "label": "Left" },
+      { "value": "center", "label": "Center" },
+      { "value": "right", "label": "Right" }
+    ], "default": "center" }
+  ],
+  "blocks": [{ "type": "@app" }],
+  "presets": [{ "name": "Hero Banner" }]
+}
+{% endschema %}

package/assets/data/component-library/image-gallery.liquid

@@ -0,0 +1,77 @@
+{%- comment -%} rebly-sections: Image Gallery | Category: media | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="image-gallery">
+  <div class="image-gallery__container">
+
+    {%- if section.settings.heading != blank -%}
+      <h2 class="image-gallery__heading">{{ section.settings.heading | escape }}</h2>
+    {%- endif -%}
+
+    <div class="image-gallery__grid" style="--cols: {{ section.settings.columns }};">
+      {%- for block in section.blocks -%}
+        {%- if block.type == 'gallery-item' -%}
+          <div class="image-gallery__item" {{ block.shopify_attributes }}>
+            {%- if block.settings.image != blank -%}
+              {%- if section.settings.enable_lightbox -%}
+                <a
+                  href="{{ block.settings.image | image_url: width: 1600 }}"
+                  class="image-gallery__link"
+                  data-lightbox="gallery-{{ section.id }}"
+                  data-title="{{ block.settings.caption | escape }}"
+                >
+              {%- endif -%}
+              {{- block.settings.image | image_url: width: 600 | image_tag: loading: 'lazy', alt: block.settings.caption, class: 'image-gallery__img' -}}
+              {%- if section.settings.enable_lightbox -%}</a>{%- endif -%}
+              {%- if block.settings.caption != blank -%}
+                <p class="image-gallery__caption">{{ block.settings.caption | escape }}</p>
+              {%- endif -%}
+            {%- else -%}
+              {{ 'image' | placeholder_svg_tag: 'image-gallery__img' }}
+            {%- endif -%}
+          </div>
+        {%- endif -%}
+      {%- endfor -%}
+    </div>
+
+  </div>
+</section>
+
+<style>
+  #section-{{ section.id }} .image-gallery__container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
+  #section-{{ section.id }} .image-gallery__heading { font-size: 2rem; text-align: center; margin: 0 0 2rem; }
+  #section-{{ section.id }} .image-gallery__grid { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1rem; }
+  #section-{{ section.id }} .image-gallery__item { position: relative; overflow: hidden; border-radius: 4px; }
+  #section-{{ section.id }} .image-gallery__img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform 0.3s; }
+  #section-{{ section.id }} .image-gallery__item:hover .image-gallery__img { transform: scale(1.04); }
+  #section-{{ section.id }} .image-gallery__link { display: block; overflow: hidden; }
+  #section-{{ section.id }} .image-gallery__caption { font-size: 0.85rem; opacity: 0.7; padding: 0.4rem 0; text-align: center; }
+  @media (max-width: 749px) { #section-{{ section.id }} .image-gallery__grid { grid-template-columns: repeat(2, 1fr); } }
+</style>
+
+{% schema %}
+{
+  "name": "Image Gallery",
+  "tag": "section",
+  "class": "section-image-gallery",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading" },
+    { "type": "range", "id": "columns", "label": "Columns", "min": 2, "max": 5, "step": 1, "default": 3 },
+    { "type": "checkbox", "id": "enable_lightbox", "label": "Enable Lightbox Links", "default": false }
+  ],
+  "blocks": [
+    {
+      "type": "gallery-item",
+      "name": "Image",
+      "settings": [
+        { "type": "image_picker", "id": "image", "label": "Image" },
+        { "type": "text", "id": "caption", "label": "Caption" }
+      ]
+    },
+    { "type": "@app" }
+  ],
+  "presets": [{
+    "name": "Image Gallery",
+    "blocks": [{ "type": "gallery-item" }, { "type": "gallery-item" }, { "type": "gallery-item" }, { "type": "gallery-item" }, { "type": "gallery-item" }, { "type": "gallery-item" }]
+  }]
+}
+{% endschema %}

package/assets/data/component-library/image-with-text.liquid

@@ -0,0 +1,84 @@
+{%- comment -%} rebly-sections: Image with Text | Category: content | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="image-with-text">
+  <div class="image-with-text__grid image-with-text__grid--{{ section.settings.image_position }} image-with-text__grid--{{ section.settings.image_width }}">
+
+    <div class="image-with-text__media">
+      {%- if section.settings.image != blank -%}
+        {{- section.settings.image | image_url: width: 800 | image_tag: loading: 'lazy', class: 'image-with-text__img' -}}
+      {%- else -%}
+        {{ 'image' | placeholder_svg_tag: 'image-with-text__img placeholder' }}
+      {%- endif -%}
+    </div>
+
+    {%- for block in section.blocks -%}<div {{ block.shopify_attributes }}></div>{%- endfor -%}
+
+    <div class="image-with-text__body">
+      {%- if section.settings.heading != blank -%}
+        <h2 class="image-with-text__heading">{{ section.settings.heading | escape }}</h2>
+      {%- endif -%}
+      {%- if section.settings.text != blank -%}
+        <div class="image-with-text__text rte">{{ section.settings.text }}</div>
+      {%- endif -%}
+      {%- if section.settings.button_label != blank -%}
+        <a href="{{ section.settings.button_link }}" class="image-with-text__btn btn">
+          {{ section.settings.button_label | escape }}
+        </a>
+      {%- endif -%}
+    </div>
+
+  </div>
+</section>
+
+<style>
+  #section-{{ section.id }} .image-with-text__grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    align-items: center;
+    padding: 4rem 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+  #section-{{ section.id }} .image-with-text__grid--small { grid-template-columns: 1fr 2fr; }
+  #section-{{ section.id }} .image-with-text__grid--large { grid-template-columns: 2fr 1fr; }
+  #section-{{ section.id }} .image-with-text__grid--right .image-with-text__media { order: 2; }
+  #section-{{ section.id }} .image-with-text__grid--right .image-with-text__body { order: 1; }
+  #section-{{ section.id }} .image-with-text__img { width: 100%; height: auto; display: block; border-radius: 4px; }
+  #section-{{ section.id }} .image-with-text__heading { font-size: 2rem; margin: 0 0 1rem; }
+  #section-{{ section.id }} .image-with-text__text { margin: 0 0 1.5rem; line-height: 1.6; }
+  #section-{{ section.id }} .image-with-text__btn { display: inline-block; padding: 0.75rem 1.5rem; background: currentColor; color: #fff; text-decoration: none; border-radius: 4px; }
+  @media (max-width: 749px) {
+    #section-{{ section.id }} .image-with-text__grid,
+    #section-{{ section.id }} .image-with-text__grid--small,
+    #section-{{ section.id }} .image-with-text__grid--large { grid-template-columns: 1fr; }
+    #section-{{ section.id }} .image-with-text__grid--right .image-with-text__media { order: 0; }
+    #section-{{ section.id }} .image-with-text__grid--right .image-with-text__body { order: 0; }
+  }
+</style>
+
+{% schema %}
+{
+  "name": "Image with Text",
+  "tag": "section",
+  "class": "section-image-with-text",
+  "settings": [
+    { "type": "image_picker", "id": "image", "label": "Image" },
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Image with text" },
+    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Pair text with an image to focus on your chosen product.</p>" },
+    { "type": "text", "id": "button_label", "label": "Button Label" },
+    { "type": "url", "id": "button_link", "label": "Button Link" },
+    { "type": "select", "id": "image_position", "label": "Image Position", "options": [
+      { "value": "left", "label": "Left" },
+      { "value": "right", "label": "Right" }
+    ], "default": "left" },
+    { "type": "select", "id": "image_width", "label": "Image Width", "options": [
+      { "value": "medium", "label": "Medium (50/50)" },
+      { "value": "small", "label": "Small (33/66)" },
+      { "value": "large", "label": "Large (66/33)" }
+    ], "default": "medium" }
+  ],
+  "blocks": [{ "type": "@app" }],
+  "presets": [{ "name": "Image with Text" }]
+}
+{% endschema %}

package/assets/data/component-library/logo-cloud.liquid

@@ -0,0 +1,70 @@
+{%- comment -%} rebly-sections: Logo Cloud | Category: social-proof | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="logo-cloud">
+  <div class="logo-cloud__container">
+
+    {%- if section.settings.heading != blank -%}
+      <h2 class="logo-cloud__heading">{{ section.settings.heading | escape }}</h2>
+    {%- endif -%}
+
+    <div class="logo-cloud__grid" style="--per-row: {{ section.settings.logos_per_row }};">
+      {%- for block in section.blocks -%}
+        {%- if block.type == 'logo-item' -%}
+          <div class="logo-cloud__item" {{ block.shopify_attributes }}>
+            {%- if block.settings.link != blank -%}
+              <a href="{{ block.settings.link }}" class="logo-cloud__link" aria-label="{{ block.settings.alt_text | default: 'Partner logo' }}">
+            {%- endif -%}
+            {%- if block.settings.image != blank -%}
+              {{- block.settings.image | image_url: width: 200 | image_tag: loading: 'lazy', alt: block.settings.alt_text -}}
+            {%- else -%}
+              {{ 'image' | placeholder_svg_tag: 'logo-cloud__placeholder' }}
+            {%- endif -%}
+            {%- if block.settings.link != blank -%}
+              </a>
+            {%- endif -%}
+          </div>
+        {%- endif -%}
+      {%- endfor -%}
+    </div>
+
+  </div>
+</section>
+
+<style>
+  #section-{{ section.id }} .logo-cloud__container { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; }
+  #section-{{ section.id }} .logo-cloud__heading { text-align: center; font-size: 1.25rem; opacity: 0.6; margin: 0 0 2rem; text-transform: uppercase; letter-spacing: 0.1em; }
+  #section-{{ section.id }} .logo-cloud__grid { display: grid; grid-template-columns: repeat(var(--per-row, 5), 1fr); gap: 1.5rem 2rem; align-items: center; }
+  #section-{{ section.id }} .logo-cloud__item { display: flex; justify-content: center; }
+  #section-{{ section.id }} .logo-cloud__item img { max-height: 60px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: 0.65; transition: filter 0.2s, opacity 0.2s; }
+  #section-{{ section.id }} .logo-cloud__item img:hover { filter: grayscale(0); opacity: 1; }
+  #section-{{ section.id }} .logo-cloud__link { display: flex; }
+  @media (max-width: 749px) { #section-{{ section.id }} .logo-cloud__grid { grid-template-columns: repeat(3, 1fr); } }
+</style>
+
+{% schema %}
+{
+  "name": "Logo Cloud",
+  "tag": "section",
+  "class": "section-logo-cloud",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Trusted by" },
+    { "type": "range", "id": "logos_per_row", "label": "Logos Per Row", "min": 3, "max": 7, "step": 1, "default": 5 }
+  ],
+  "blocks": [
+    {
+      "type": "logo-item",
+      "name": "Logo",
+      "settings": [
+        { "type": "image_picker", "id": "image", "label": "Logo Image" },
+        { "type": "url", "id": "link", "label": "Link" },
+        { "type": "text", "id": "alt_text", "label": "Alt Text" }
+      ]
+    },
+    { "type": "@app" }
+  ],
+  "presets": [{
+    "name": "Logo Cloud",
+    "blocks": [{ "type": "logo-item" }, { "type": "logo-item" }, { "type": "logo-item" }, { "type": "logo-item" }, { "type": "logo-item" }]
+  }]
+}
+{% endschema %}

package/assets/data/component-library/newsletter-signup.liquid

@@ -0,0 +1,72 @@
+{%- comment -%} rebly-sections: Newsletter Signup | Category: conversion | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="newsletter-signup" style="--bg: {{ section.settings.background_color }};">
+  <div class="newsletter-signup__container">
+
+    {%- for block in section.blocks -%}<div {{ block.shopify_attributes }}></div>{%- endfor -%}
+
+    {%- if section.settings.heading != blank -%}
+      <h2 class="newsletter-signup__heading">{{ section.settings.heading | escape }}</h2>
+    {%- endif -%}
+    {%- if section.settings.subtext != blank -%}
+      <p class="newsletter-signup__subtext">{{ section.settings.subtext | escape }}</p>
+    {%- endif -%}
+
+    {%- form 'customer', id: 'newsletter-form-{{ section.id }}', class: 'newsletter-signup__form' -%}
+      <input type="hidden" name="contact[tags]" value="newsletter">
+      <div class="newsletter-signup__fields">
+        <label for="email-{{ section.id }}" class="visually-hidden">Email address</label>
+        <input
+          type="email"
+          id="email-{{ section.id }}"
+          name="contact[email]"
+          class="newsletter-signup__input"
+          placeholder="your@email.com"
+          required
+          autocomplete="email"
+        >
+        <button type="submit" class="newsletter-signup__btn">
+          {{ section.settings.button_label | default: 'Subscribe' | escape }}
+        </button>
+      </div>
+      {%- if form.posted_successfully? -%}
+        <p class="newsletter-signup__success">{{ section.settings.success_message | escape }}</p>
+      {%- endif -%}
+      {%- if form.errors -%}
+        <p class="newsletter-signup__error">{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}</p>
+      {%- endif -%}
+    {%- endform -%}
+
+  </div>
+</section>
+
+<style>
+  #section-{{ section.id }} { background: var(--bg, #f5f5f5); }
+  #section-{{ section.id }} .newsletter-signup__container { max-width: 600px; margin: 0 auto; padding: 4rem 2rem; text-align: center; }
+  #section-{{ section.id }} .newsletter-signup__heading { font-size: 2rem; margin: 0 0 0.75rem; }
+  #section-{{ section.id }} .newsletter-signup__subtext { opacity: 0.75; margin: 0 0 2rem; }
+  #section-{{ section.id }} .newsletter-signup__fields { display: flex; gap: 0.5rem; }
+  #section-{{ section.id }} .newsletter-signup__input { flex: 1; padding: 0.75rem 1rem; border: 1px solid rgba(0,0,0,0.2); border-radius: 4px; font-size: 1rem; }
+  #section-{{ section.id }} .newsletter-signup__btn { padding: 0.75rem 1.5rem; background: #000; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 1rem; white-space: nowrap; }
+  #section-{{ section.id }} .newsletter-signup__success { color: green; margin-top: 1rem; }
+  #section-{{ section.id }} .newsletter-signup__error { color: red; margin-top: 1rem; }
+  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
+  @media (max-width: 749px) { #section-{{ section.id }} .newsletter-signup__fields { flex-direction: column; } }
+</style>
+
+{% schema %}
+{
+  "name": "Newsletter Signup",
+  "tag": "section",
+  "class": "section-newsletter-signup",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Subscribe to our newsletter" },
+    { "type": "text", "id": "subtext", "label": "Subtext", "default": "Get exclusive deals and updates." },
+    { "type": "text", "id": "button_label", "label": "Button Label", "default": "Subscribe" },
+    { "type": "text", "id": "success_message", "label": "Success Message", "default": "Thanks for subscribing!" },
+    { "type": "color_background", "id": "background_color", "label": "Background Color", "default": "#f5f5f5" }
+  ],
+  "blocks": [{ "type": "@app" }],
+  "presets": [{ "name": "Newsletter Signup" }]
+}
+{% endschema %}

package/assets/data/component-library/pricing-table.liquid

@@ -0,0 +1,101 @@
+{%- comment -%} rebly-sections: Pricing Table | Category: conversion | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="pricing-table">
+  <div class="pricing-table__container">
+
+    {%- if section.settings.heading != blank or section.settings.subheading != blank -%}
+      <div class="pricing-table__header">
+        {%- if section.settings.heading != blank -%}
+          <h2 class="pricing-table__heading">{{ section.settings.heading | escape }}</h2>
+        {%- endif -%}
+        {%- if section.settings.subheading != blank -%}
+          <p class="pricing-table__subheading">{{ section.settings.subheading | escape }}</p>
+        {%- endif -%}
+      </div>
+    {%- endif -%}
+
+    <div class="pricing-table__tiers">
+      {%- for block in section.blocks -%}
+        {%- if block.type == 'pricing-tier' -%}
+          <div class="pricing-table__tier{% if block.settings.highlighted %} pricing-table__tier--featured{% endif %}" {{ block.shopify_attributes }}>
+            {%- if block.settings.plan_name != blank -%}
+              <h3 class="pricing-table__plan-name">{{ block.settings.plan_name | escape }}</h3>
+            {%- endif -%}
+            <div class="pricing-table__price-wrap">
+              <span class="pricing-table__price">{{ block.settings.price | escape }}</span>
+              {%- if block.settings.period != blank -%}
+                <span class="pricing-table__period">/ {{ block.settings.period | escape }}</span>
+              {%- endif -%}
+            </div>
+            {%- if block.settings.features != blank -%}
+              <ul class="pricing-table__features">
+                {%- assign feature_list = block.settings.features | split: "\n" -%}
+                {%- for feature in feature_list -%}
+                  {%- if feature != blank -%}
+                    <li>{{ feature | escape }}</li>
+                  {%- endif -%}
+                {%- endfor -%}
+              </ul>
+            {%- endif -%}
+            {%- if block.settings.button_label != blank -%}
+              <a href="{{ block.settings.button_link }}" class="pricing-table__btn">
+                {{ block.settings.button_label | escape }}
+              </a>
+            {%- endif -%}
+          </div>
+        {%- endif -%}
+      {%- endfor -%}
+    </div>
+
+  </div>
+</section>
+
+<style>
+  #section-{{ section.id }} .pricing-table__container { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem; }
+  #section-{{ section.id }} .pricing-table__header { text-align: center; margin-bottom: 3rem; }
+  #section-{{ section.id }} .pricing-table__heading { font-size: 2rem; margin: 0 0 0.75rem; }
+  #section-{{ section.id }} .pricing-table__subheading { opacity: 0.7; margin: 0; }
+  #section-{{ section.id }} .pricing-table__tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; align-items: start; }
+  #section-{{ section.id }} .pricing-table__tier { border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; padding: 2rem; }
+  #section-{{ section.id }} .pricing-table__tier--featured { border-color: #000; border-width: 2px; box-shadow: 0 4px 20px rgba(0,0,0,0.12); }
+  #section-{{ section.id }} .pricing-table__plan-name { font-size: 1.25rem; margin: 0 0 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
+  #section-{{ section.id }} .pricing-table__price-wrap { margin-bottom: 1.5rem; }
+  #section-{{ section.id }} .pricing-table__price { font-size: 2.5rem; font-weight: 700; }
+  #section-{{ section.id }} .pricing-table__period { opacity: 0.6; }
+  #section-{{ section.id }} .pricing-table__features { list-style: none; margin: 0 0 2rem; padding: 0; }
+  #section-{{ section.id }} .pricing-table__features li { padding: 0.4rem 0; border-bottom: 1px solid rgba(0,0,0,0.07); font-size: 0.95rem; }
+  #section-{{ section.id }} .pricing-table__btn { display: block; text-align: center; padding: 0.85rem 1.5rem; background: #000; color: #fff; text-decoration: none; border-radius: 4px; font-weight: 600; }
+  #section-{{ section.id }} .pricing-table__tier--featured .pricing-table__btn { background: #000; }
+</style>
+
+{% schema %}
+{
+  "name": "Pricing Table",
+  "tag": "section",
+  "class": "section-pricing-table",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Simple, Transparent Pricing" },
+    { "type": "text", "id": "subheading", "label": "Subheading" }
+  ],
+  "blocks": [
+    {
+      "type": "pricing-tier",
+      "name": "Pricing Tier",
+      "settings": [
+        { "type": "text", "id": "plan_name", "label": "Plan Name", "default": "Basic" },
+        { "type": "text", "id": "price", "label": "Price", "default": "$9" },
+        { "type": "text", "id": "period", "label": "Period", "default": "month" },
+        { "type": "textarea", "id": "features", "label": "Features (one per line)", "default": "Feature one\nFeature two\nFeature three" },
+        { "type": "text", "id": "button_label", "label": "Button Label", "default": "Get Started" },
+        { "type": "url", "id": "button_link", "label": "Button Link" },
+        { "type": "checkbox", "id": "highlighted", "label": "Highlight this tier", "default": false }
+      ]
+    },
+    { "type": "@app" }
+  ],
+  "presets": [{
+    "name": "Pricing Table",
+    "blocks": [{ "type": "pricing-tier" }, { "type": "pricing-tier" }, { "type": "pricing-tier" }]
+  }]
+}
+{% endschema %}

package/assets/data/component-library/product-grid.liquid

@@ -0,0 +1,74 @@
+{%- comment -%} rebly-sections: Product Grid | Category: product | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="product-grid">
+  <div class="product-grid__container">
+
+    {%- if section.settings.heading != blank -%}
+      <h2 class="product-grid__heading">{{ section.settings.heading | escape }}</h2>
+    {%- endif -%}
+
+    {%- for block in section.blocks -%}<div {{ block.shopify_attributes }}></div>{%- endfor -%}
+    {%- assign collection = collections[section.settings.collection] -%}
+    {%- assign products_limit = section.settings.products_to_show -%}
+
+    <div class="product-grid__items" style="--cols: {{ section.settings.columns }};">
+      {%- if collection != blank -%}
+        {%- for product in collection.products limit: products_limit -%}
+          <div class="product-grid__card">
+            <a href="{{ product.url }}" class="product-grid__card-link">
+              <div class="product-grid__card-image">
+                {{- product.featured_image | image_url: width: 400 | image_tag: loading: 'lazy', alt: product.title -}}
+              </div>
+              <div class="product-grid__card-info">
+                {%- if section.settings.show_vendor and product.vendor != blank -%}
+                  <p class="product-grid__vendor">{{ product.vendor }}</p>
+                {%- endif -%}
+                <h3 class="product-grid__card-title">{{ product.title }}</h3>
+                {%- if section.settings.show_price -%}
+                  <p class="product-grid__price">{{ product.price | money }}</p>
+                {%- endif -%}
+              </div>
+            </a>
+          </div>
+        {%- endfor -%}
+      {%- else -%}
+        {%- for i in (1..products_limit) -%}
+          <div class="product-grid__card">{{ 'product-' | append: i | placeholder_svg_tag: 'product-grid__placeholder' }}</div>
+        {%- endfor -%}
+      {%- endif -%}
+    </div>
+
+  </div>
+</section>
+
+<style>
+  #section-{{ section.id }} .product-grid__container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
+  #section-{{ section.id }} .product-grid__heading { font-size: 2rem; text-align: center; margin: 0 0 2rem; }
+  #section-{{ section.id }} .product-grid__items { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 1.5rem; }
+  #section-{{ section.id }} .product-grid__card-link { display: block; text-decoration: none; color: inherit; }
+  #section-{{ section.id }} .product-grid__card-image img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }
+  #section-{{ section.id }} .product-grid__card-info { padding: 0.75rem 0; }
+  #section-{{ section.id }} .product-grid__card-title { font-size: 1rem; margin: 0 0 0.25rem; }
+  #section-{{ section.id }} .product-grid__vendor { font-size: 0.85rem; opacity: 0.6; margin: 0 0 0.25rem; }
+  #section-{{ section.id }} .product-grid__price { font-weight: 600; margin: 0; }
+  @media (max-width: 989px) { #section-{{ section.id }} .product-grid__items { grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 749px) { #section-{{ section.id }} .product-grid__items { grid-template-columns: repeat(2, 1fr); } }
+</style>
+
+{% schema %}
+{
+  "name": "Product Grid",
+  "tag": "section",
+  "class": "section-product-grid",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Featured Products" },
+    { "type": "collection", "id": "collection", "label": "Collection" },
+    { "type": "range", "id": "products_to_show", "label": "Products to Show", "min": 2, "max": 12, "step": 1, "default": 6 },
+    { "type": "range", "id": "columns", "label": "Columns", "min": 2, "max": 4, "step": 1, "default": 3 },
+    { "type": "checkbox", "id": "show_price", "label": "Show Price", "default": true },
+    { "type": "checkbox", "id": "show_vendor", "label": "Show Vendor", "default": false }
+  ],
+  "blocks": [{ "type": "@app" }],
+  "presets": [{ "name": "Product Grid" }]
+}
+{% endschema %}

package/assets/data/component-library/rich-text-content.liquid

@@ -0,0 +1,52 @@
+{%- comment -%} rebly-sections: Rich Text Content | Category: content | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="rich-text-content">
+  {%- for block in section.blocks -%}<div {{ block.shopify_attributes }}></div>{%- endfor -%}
+  <div class="rich-text-content__container rich-text-content__container--{{ section.settings.content_width }}">
+    <div class="rich-text-content__body" style="text-align: {{ section.settings.text_alignment }};">
+      {%- if section.settings.heading != blank -%}
+        <h2 class="rich-text-content__heading">{{ section.settings.heading | escape }}</h2>
+      {%- endif -%}
+      {%- if section.settings.text != blank -%}
+        <div class="rich-text-content__text rte">{{ section.settings.text }}</div>
+      {%- endif -%}
+    </div>
+  </div>
+</section>
+
+<style>
+  #section-{{ section.id }} .rich-text-content__container {
+    margin: 0 auto;
+    padding: 4rem 2rem;
+  }
+  #section-{{ section.id }} .rich-text-content__container--narrow { max-width: 640px; }
+  #section-{{ section.id }} .rich-text-content__container--medium { max-width: 900px; }
+  #section-{{ section.id }} .rich-text-content__container--full { max-width: 100%; }
+  #section-{{ section.id }} .rich-text-content__heading { font-size: 2rem; margin: 0 0 1.25rem; }
+  #section-{{ section.id }} .rich-text-content__text { line-height: 1.7; }
+  #section-{{ section.id }} .rich-text-content__text p { margin: 0 0 1rem; }
+  @media (max-width: 749px) {
+    #section-{{ section.id }} .rich-text-content__container { padding: 2.5rem 1.5rem; }
+    #section-{{ section.id }} .rich-text-content__heading { font-size: 1.5rem; }
+  }
+</style>
+
+{% schema %}
+{
+  "name": "Rich Text Content",
+  "tag": "section",
+  "class": "section-rich-text-content",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Talk about your brand" },
+    { "type": "richtext", "id": "text", "label": "Text", "default": "<p>Share information about your brand with your customers. Describe a product, make announcements, or welcome customers to your store.</p>" },
+    { "type": "text_alignment", "id": "text_alignment", "label": "Text Alignment", "default": "center" },
+    { "type": "select", "id": "content_width", "label": "Content Width", "options": [
+      { "value": "narrow", "label": "Narrow" },
+      { "value": "medium", "label": "Medium" },
+      { "value": "full", "label": "Full" }
+    ], "default": "medium" }
+  ],
+  "blocks": [{ "type": "@app" }],
+  "presets": [{ "name": "Rich Text Content" }]
+}
+{% endschema %}