rebly-sections 1.0.0

package/README.md

@@ -0,0 +1,67 @@
+# rebly-sections
+
+AI-powered Shopify Liquid section builder for Claude Code and Antigravity Kit.
+
+## Quick Start
+
+```bash
+npx rebly-sections init
+```
+
+Detects your platform and installs the skill + slash commands automatically.
+
+## Prerequisites
+
+- **Node.js** 16.7+
+- **Python** 3.6+ (stdlib only, no pip install needed)
+- **Claude Code** (`.claude/` directory) or **Antigravity Kit** (`.agent/` directory)
+
+## What It Installs
+
+| Location | Contents |
+|----------|----------|
+| `.claude/skills/rebly-sections/` | Scripts, data (6 knowledge bases), templates, SKILL.md |
+| `.claude/commands/section.md` | `/section` slash command |
+| `.claude/commands/theme-init.md` | `/theme-init` slash command |
+
+## Usage
+
+### Generate a Section
+
+```
+/section hero "modern animated hero with background video"
+```
+
+Assembles context from knowledge bases (schema types, Liquid tags, component patterns, best practices) and generates a production-ready OS2.0 section.
+
+### Detect Theme Profile
+
+```
+/theme-init /path/to/your/shopify-theme
+```
+
+Scans theme for CSS variables, naming conventions, and block patterns. Outputs `theme-profile.md` for use with `/section --theme-profile`.
+
+### Search Knowledge Bases
+
+```bash
+python3 .claude/skills/rebly-sections/scripts/search.py "product grid" --domain components
+```
+
+Search across schema, liquid, tokens, components, themes, and practices domains.
+
+### Quality Gate
+
+```bash
+python3 .claude/skills/rebly-sections/scripts/quality-gate.py sections/hero.liquid
+```
+
+10-point OS2.0 compliance validation.
+
+## Full Documentation
+
+See the [main repository](https://github.com/rebly-sections/sections-ai) for architecture, contributing guidelines, and roadmap.
+
+## License
+
+MIT

package/assets/SKILL.md

@@ -0,0 +1,65 @@
+---
+name: rebly-sections
+description: "Shopify Liquid section builder. Generates OS2.0 compliant sections, blocks, snippets with schema settings. Covers: hero, testimonials, product grid, FAQ, CTA, newsletter, gallery, pricing, team, collection list, blog posts, announcement bar. Searches: Shopify schema types, Liquid tags/filters/objects, design tokens, component patterns, theme DNA, best practices. Commands: /section, /theme-init. Quality gate validates OS2.0 compliance."
+version: 1.0.0
+---
+
+# Rebly Sections - Shopify Section AI Skill
+
+## When to Apply
+- User mentions: Shopify, Liquid, section, block, snippet, schema, theme, OS2.0
+- User wants to: create/modify Shopify sections, build theme components, generate section schemas
+- User asks about: Shopify settings types, Liquid syntax, section best practices
+
+## Prerequisites
+- Python 3.x (stdlib only, no pip install needed)
+
+## Workflows
+
+### /theme-init — Theme Profile Detection
+Scans a local Shopify theme directory, detects the theme, generates a theme-profile.md.
+
+```bash
+python3 scripts/theme-init.py /path/to/theme [--output theme-profile.md]
+```
+
+### /section — Section Generation
+Assembles context from knowledge bases for Claude to generate a production section.
+
+```bash
+python3 scripts/section-generator.py "section-name" "description" [--theme-profile path] [--refine path/to/section.liquid]
+```
+
+### Search CLI
+```bash
+python3 scripts/search.py "<query>" [--domain <domain>] [-n 3] [--component] [--json]
+```
+
+**Domains:**
+| Domain | Data | Rows |
+|--------|------|------|
+| schema | Shopify setting types | 45 |
+| liquid | Tags, filters, objects | 133 |
+| tokens | Design tokens (Tailwind) | 56 |
+| components | Section patterns | 18 |
+| themes | Theme DNA profiles | ~40 |
+| practices | Best practices | ~35 |
+
+### Quality Gate
+```bash
+python3 scripts/quality-gate.py path/to/section.liquid
+```
+
+Validates: valid schema JSON, presets, @app blocks, block.shopify_attributes, no {% include %}, scoped CSS, semantic HTML, lazy-load images.
+
+## Pre-Delivery Checklist
+Before delivering any Shopify section to the user:
+- [ ] Valid {% schema %} JSON
+- [ ] Non-empty presets array
+- [ ] @app block type included
+- [ ] {{ block.shopify_attributes }} on all block wrappers
+- [ ] {% render %} not {% include %}
+- [ ] CSS scoped via #section-{{ section.id }}
+- [ ] Responsive (mobile-first)
+- [ ] Accessible (semantic HTML, aria-labels, alt text)
+- [ ] Images use loading="lazy" (except hero/above-fold)

package/assets/commands/section.md

@@ -0,0 +1,27 @@
+# Section Generator - Generate Shopify OS2.0 section
+
+Generate a production-ready Shopify OS2.0 compliant Liquid section.
+
+IMPORTANT: All rebly-sections scripts are in the PROJECT-LOCAL `.claude/skills/rebly-sections/` directory (relative to project root), NOT in `~/.claude/skills/`. Always use project-relative paths.
+
+## Instructions
+
+1. Parse arguments: $ARGUMENTS (expected format: "description" or section-name "description")
+2. Locate scripts directory: `.claude/skills/rebly-sections/scripts/`
+3. If theme-profile.md exists in project root, use it with `--theme-profile`
+4. Run the section generator to assemble context:
+
+```bash
+python3 .claude/skills/rebly-sections/scripts/section-generator.py "<section-name>" "<description>" --theme-profile theme-profile.md
+```
+
+5. Use the output context to generate the complete .liquid section file
+6. Save to `sections/<section-name>.liquid`
+7. Run quality gate validation:
+
+```bash
+python3 .claude/skills/rebly-sections/scripts/quality-gate.py sections/<section-name>.liquid
+```
+
+8. If quality gate fails, fix issues and re-validate until PASS
+9. Display the quality gate results to the user

package/assets/commands/theme-init.md

@@ -0,0 +1,20 @@
+# Theme Init - Scan Shopify theme and generate profile
+
+Scan the Shopify theme directory and generate a theme-profile.md file.
+
+## Instructions
+
+1. Determine the theme directory path from arguments: $ARGUMENTS
+   - If no path given, use current working directory
+2. Find the rebly-sections scripts in the PROJECT directory (not global ~/.claude):
+   - Look for scripts at: `.claude/skills/rebly-sections/scripts/`
+3. Run the theme-init script using `python3`:
+
+```bash
+python3 .claude/skills/rebly-sections/scripts/theme-init.py "<theme-path>" --output theme-profile.md
+```
+
+4. Read and display the generated theme-profile.md
+5. Summarize findings: theme name, version, CSS variable prefix, section count, naming patterns
+
+IMPORTANT: Use the project-local `.claude/skills/rebly-sections/` directory, NOT `~/.claude/skills/`. The scripts are installed per-project.

package/assets/data/component-library/_index.csv

@@ -0,0 +1,19 @@
+No,Name,Slug,Category,Keywords,Difficulty,Blocks Used,Settings Count,ui_style_keywords,File,Description
+1,Hero Banner,hero-banner,hero,"hero banner headline image background overlay call-to-action above-fold full-width",beginner,heading|button|image,8,glassmorphism gradient overlay dark-mode hero,hero-banner.liquid,Full-width hero section with background image/video and CTA overlay
+2,Image with Text,image-with-text,content,"image text side-by-side split layout media content columns",beginner,heading|text|button|image,7,clean minimal balanced layout,image-with-text.liquid,Side-by-side image and text content block
+3,Features Grid,features-grid,content,"features grid columns icons benefits multicolumn highlights",beginner,heading|text|icon,6,card grid minimal modern,features-grid.liquid,Multi-column feature highlights with icons
+4,Product Grid,product-grid,product,"products collection grid cards featured shop browse",intermediate,product-card,5,ecommerce grid card modern,product-grid.liquid,Product collection grid with cards
+5,CTA Banner,cta-banner,conversion,"call-to-action banner button signup conversion promo",beginner,heading|button,5,bold contrast gradient cta,cta-banner.liquid,Call-to-action banner with heading and button
+6,Rich Text Content,rich-text-content,content,"rich text content wysiwyg paragraph body copy",beginner,heading|text,4,clean typography readable,rich-text-content.liquid,Rich text content section with customizable typography
+7,Testimonials Slider,testimonials-slider,social-proof,"testimonials reviews quotes customers social-proof slider carousel",intermediate,testimonial,7,card slider social-proof trust,testimonials-slider.liquid,Customer testimonials with quote blocks
+8,FAQ Accordion,faq-accordion,content,"faq questions answers accordion expandable collapsible help",intermediate,faq-item,5,clean accordion expandable minimal,faq-accordion.liquid,Expandable FAQ with question-answer pairs
+9,Newsletter Signup,newsletter-signup,conversion,"newsletter email signup subscribe form capture leads",beginner,heading|text,6,form input minimal conversion,newsletter-signup.liquid,Email capture form with Shopify customer form
+10,Blog Posts Grid,blog-posts-grid,content,"blog articles posts grid cards latest news",intermediate,none,6,card grid editorial blog,blog-posts-grid.liquid,Latest blog articles in responsive grid
+11,Collection List,collection-list,product,"collections categories grid cards browse shop departments",intermediate,none,5,card grid ecommerce browse,collection-list.liquid,Display collection cards for store navigation
+12,Pricing Table,pricing-table,conversion,"pricing plans tiers comparison table subscription",advanced,pricing-tier,8,card comparison table pricing,pricing-table.liquid,2-3 tier pricing comparison with feature lists
+13,Stats Counter,stats-counter,social-proof,"statistics numbers counter metrics achievements data",beginner,stat-item,4,bold numbers counter minimal,stats-counter.liquid,Number statistics with animated counters
+14,Logo Cloud,logo-cloud,social-proof,"logos partners brands clients trust badges sponsors",beginner,logo-item,4,grid logos trust minimal,logo-cloud.liquid,Partner/brand logos grid display
+15,Team Members,team-members,content,"team people staff members bios photos about",intermediate,team-member,6,card grid people team,team-members.liquid,Team member grid with photos and bios
+16,Video Hero,video-hero,media,"video background hero embed youtube vimeo fullscreen",intermediate,heading|button,7,video fullscreen cinematic overlay,video-hero.liquid,Video background hero with text overlay
+17,Image Gallery,image-gallery,media,"gallery images photos grid masonry lightbox portfolio",intermediate,gallery-item,5,grid masonry gallery portfolio,image-gallery.liquid,Image gallery grid with optional lightbox
+18,Announcement Bar,announcement-bar,utility,"announcement banner top bar notification alert dismiss",beginner,announcement,5,minimal bar notification utility,announcement-bar.liquid,Top banner with announcement text and link

package/assets/data/component-library/announcement-bar.liquid

@@ -0,0 +1,69 @@
+{%- comment -%} rebly-sections: Announcement Bar | Category: utility | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="announcement-bar" style="--bg: {{ section.settings.background_color }}; --color: {{ section.settings.text_color }};" data-dismissible="{{ section.settings.dismissible }}">
+  <div class="announcement-bar__track">
+    {%- for block in section.blocks -%}
+      {%- if block.type == 'announcement' -%}
+        <div class="announcement-bar__item" {{ block.shopify_attributes }}>
+          {%- if block.settings.link != blank and block.settings.link_text != blank -%}
+            {{ block.settings.text | escape }}
+            <a href="{{ block.settings.link }}" class="announcement-bar__link">{{ block.settings.link_text | escape }}</a>
+          {%- else -%}
+            {{ block.settings.text | escape }}
+          {%- endif -%}
+        </div>
+      {%- endif -%}
+    {%- endfor -%}
+  </div>
+  {%- if section.settings.dismissible -%}
+    <button class="announcement-bar__close" aria-label="Dismiss announcement" onclick="this.closest('.announcement-bar').style.display='none'">&#x2715;</button>
+  {%- endif -%}
+</section>
+
+<style>
+  #section-{{ section.id }} {
+    background: var(--bg, #000);
+    color: var(--color, #fff);
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 44px;
+    padding: 0.5rem 3rem;
+  }
+  #section-{{ section.id }} .announcement-bar__track { display: flex; gap: 2rem; flex-wrap: wrap; justify-content: center; align-items: center; text-align: center; font-size: 0.9rem; }
+  #section-{{ section.id }} .announcement-bar__item { white-space: nowrap; }
+  #section-{{ section.id }} .announcement-bar__link { color: inherit; font-weight: 600; margin-left: 0.35rem; }
+  #section-{{ section.id }} .announcement-bar__close { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; padding: 0.25rem; opacity: 0.75; }
+  #section-{{ section.id }} .announcement-bar__close:hover { opacity: 1; }
+  @media (max-width: 749px) { #section-{{ section.id }} { padding: 0.5rem 2.5rem; } #section-{{ section.id }} .announcement-bar__track { gap: 1rem; } }
+</style>
+
+{% schema %}
+{
+  "name": "Announcement Bar",
+  "tag": "section",
+  "class": "section-announcement-bar",
+  "settings": [
+    { "type": "color_background", "id": "background_color", "label": "Background Color", "default": "#000000" },
+    { "type": "color", "id": "text_color", "label": "Text Color", "default": "#ffffff" },
+    { "type": "checkbox", "id": "dismissible", "label": "Allow Dismiss", "default": true }
+  ],
+  "blocks": [
+    {
+      "type": "announcement",
+      "name": "Announcement",
+      "settings": [
+        { "type": "text", "id": "text", "label": "Text", "default": "Free shipping on orders over $50" },
+        { "type": "url", "id": "link", "label": "Link" },
+        { "type": "text", "id": "link_text", "label": "Link Text", "default": "Shop now" }
+      ]
+    },
+    { "type": "@app" }
+  ],
+  "presets": [{
+    "name": "Announcement Bar",
+    "blocks": [{ "type": "announcement" }]
+  }]
+}
+{% endschema %}

package/assets/data/component-library/blog-posts-grid.liquid

@@ -0,0 +1,77 @@
+{%- comment -%} rebly-sections: Blog Posts Grid | Category: content | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="blog-posts-grid">
+  <div class="blog-posts-grid__container">
+
+    {%- if section.settings.heading != blank -%}
+      <h2 class="blog-posts-grid__heading">{{ section.settings.heading | escape }}</h2>
+    {%- endif -%}
+
+    {%- for block in section.blocks -%}<div {{ block.shopify_attributes }}></div>{%- endfor -%}
+    {%- assign blog = blogs[section.settings.blog] -%}
+    <div class="blog-posts-grid__items" style="--cols: {{ section.settings.columns }};">
+      {%- if blog != blank -%}
+        {%- for article in blog.articles limit: section.settings.posts_to_show -%}
+          <article class="blog-posts-grid__card">
+            {%- if article.image != blank -%}
+              <a href="{{ article.url }}" class="blog-posts-grid__card-img-link">
+                {{- article.image | image_url: width: 600 | image_tag: loading: 'lazy', alt: article.title -}}
+              </a>
+            {%- endif -%}
+            <div class="blog-posts-grid__card-body">
+              {%- if section.settings.show_date -%}
+                <time class="blog-posts-grid__date" datetime="{{ article.published_at | date: '%Y-%m-%d' }}">
+                  {{ article.published_at | date: '%B %d, %Y' }}
+                </time>
+              {%- endif -%}
+              <h3 class="blog-posts-grid__card-title"><a href="{{ article.url }}">{{ article.title }}</a></h3>
+              {%- if section.settings.show_author -%}
+                <p class="blog-posts-grid__author">{{ article.author }}</p>
+              {%- endif -%}
+              {%- if section.settings.show_excerpt and article.excerpt != blank -%}
+                <p class="blog-posts-grid__excerpt">{{ article.excerpt | strip_html | truncate: 120 }}</p>
+              {%- endif -%}
+            </div>
+          </article>
+        {%- endfor -%}
+      {%- else -%}
+        <p>Select a blog to display articles.</p>
+      {%- endif -%}
+    </div>
+
+  </div>
+</section>
+
+<style>
+  #section-{{ section.id }} .blog-posts-grid__container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
+  #section-{{ section.id }} .blog-posts-grid__heading { font-size: 2rem; text-align: center; margin: 0 0 2rem; }
+  #section-{{ section.id }} .blog-posts-grid__items { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 2rem; }
+  #section-{{ section.id }} .blog-posts-grid__card-img-link img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 4px; display: block; }
+  #section-{{ section.id }} .blog-posts-grid__card-body { padding: 1rem 0; }
+  #section-{{ section.id }} .blog-posts-grid__date { font-size: 0.8rem; opacity: 0.6; display: block; margin-bottom: 0.4rem; }
+  #section-{{ section.id }} .blog-posts-grid__card-title { font-size: 1.1rem; margin: 0 0 0.4rem; }
+  #section-{{ section.id }} .blog-posts-grid__card-title a { text-decoration: none; color: inherit; }
+  #section-{{ section.id }} .blog-posts-grid__author { font-size: 0.85rem; opacity: 0.65; margin: 0 0 0.5rem; }
+  #section-{{ section.id }} .blog-posts-grid__excerpt { font-size: 0.9rem; line-height: 1.5; opacity: 0.8; margin: 0; }
+  @media (max-width: 989px) { #section-{{ section.id }} .blog-posts-grid__items { grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 749px) { #section-{{ section.id }} .blog-posts-grid__items { grid-template-columns: 1fr; } }
+</style>
+
+{% schema %}
+{
+  "name": "Blog Posts Grid",
+  "tag": "section",
+  "class": "section-blog-posts-grid",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Latest Articles" },
+    { "type": "blog", "id": "blog", "label": "Blog" },
+    { "type": "range", "id": "posts_to_show", "label": "Posts to Show", "min": 2, "max": 9, "step": 1, "default": 3 },
+    { "type": "range", "id": "columns", "label": "Columns", "min": 2, "max": 4, "step": 1, "default": 3 },
+    { "type": "checkbox", "id": "show_date", "label": "Show Date", "default": true },
+    { "type": "checkbox", "id": "show_author", "label": "Show Author", "default": false },
+    { "type": "checkbox", "id": "show_excerpt", "label": "Show Excerpt", "default": true }
+  ],
+  "blocks": [{ "type": "@app" }],
+  "presets": [{ "name": "Blog Posts Grid" }]
+}
+{% endschema %}

package/assets/data/component-library/collection-list.liquid

@@ -0,0 +1,71 @@
+{%- comment -%} rebly-sections: Collection List | Category: product | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="collection-list">
+  <div class="collection-list__container">
+
+    {%- if section.settings.heading != blank -%}
+      <h2 class="collection-list__heading">{{ section.settings.heading | escape }}</h2>
+    {%- endif -%}
+
+    <div class="collection-list__grid">
+      {%- for block in section.blocks -%}
+        {%- if block.type == 'collection' -%}
+          {%- assign col = collections[block.settings.collection] -%}
+          <a href="{{ col.url }}" class="collection-list__card" {{ block.shopify_attributes }}>
+            <div class="collection-list__card-image">
+              {%- if col.image != blank -%}
+                {{- col.image | image_url: width: 600 | image_tag: loading: 'lazy', alt: col.title -}}
+              {%- else -%}
+                {{ 'collection-1' | placeholder_svg_tag }}
+              {%- endif -%}
+            </div>
+            <div class="collection-list__card-info">
+              <h3 class="collection-list__card-title">{{ col.title }}</h3>
+              <span class="collection-list__card-count">{{ col.products_count }} products</span>
+            </div>
+          </a>
+        {%- endif -%}
+      {%- endfor -%}
+    </div>
+
+  </div>
+</section>
+
+<style>
+  #section-{{ section.id }} .collection-list__container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
+  #section-{{ section.id }} .collection-list__heading { font-size: 2rem; text-align: center; margin: 0 0 2rem; }
+  #section-{{ section.id }} .collection-list__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
+  #section-{{ section.id }} .collection-list__card { text-decoration: none; color: inherit; display: block; border-radius: 6px; overflow: hidden; }
+  #section-{{ section.id }} .collection-list__card-image img,
+  #section-{{ section.id }} .collection-list__card-image svg { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
+  #section-{{ section.id }} .collection-list__card-info { padding: 0.75rem; }
+  #section-{{ section.id }} .collection-list__card-title { font-size: 1.1rem; margin: 0 0 0.25rem; }
+  #section-{{ section.id }} .collection-list__card-count { font-size: 0.85rem; opacity: 0.6; }
+  @media (max-width: 989px) { #section-{{ section.id }} .collection-list__grid { grid-template-columns: repeat(2, 1fr); } }
+  @media (max-width: 749px) { #section-{{ section.id }} .collection-list__grid { grid-template-columns: repeat(2, 1fr); } }
+</style>
+
+{% schema %}
+{
+  "name": "Collection List",
+  "tag": "section",
+  "class": "section-collection-list",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Shop by Collection" }
+  ],
+  "blocks": [
+    {
+      "type": "collection",
+      "name": "Collection",
+      "settings": [
+        { "type": "collection", "id": "collection", "label": "Collection" }
+      ]
+    },
+    { "type": "@app" }
+  ],
+  "presets": [{
+    "name": "Collection List",
+    "blocks": [{ "type": "collection" }, { "type": "collection" }, { "type": "collection" }]
+  }]
+}
+{% endschema %}

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

@@ -0,0 +1,58 @@
+{%- comment -%} rebly-sections: CTA Banner | Category: conversion | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="cta-banner">
+  {%- for block in section.blocks -%}<div {{ block.shopify_attributes }}></div>{%- endfor -%}
+  <div class="cta-banner__inner" style="--bg: {{ section.settings.background_color }}; --color: {{ section.settings.text_color }};">
+    <div class="cta-banner__content">
+      {%- if section.settings.heading != blank -%}
+        <h2 class="cta-banner__heading">{{ section.settings.heading | escape }}</h2>
+      {%- endif -%}
+      {%- if section.settings.text != blank -%}
+        <p class="cta-banner__text">{{ section.settings.text | escape }}</p>
+      {%- endif -%}
+      {%- if section.settings.button_label != blank -%}
+        <a href="{{ section.settings.button_link }}" class="cta-banner__btn">
+          {{ section.settings.button_label | escape }}
+        </a>
+      {%- endif -%}
+    </div>
+  </div>
+</section>
+
+<style>
+  #section-{{ section.id }} .cta-banner__inner {
+    background: var(--bg, #000);
+    color: var(--color, #fff);
+    padding: 4rem 2rem;
+    text-align: center;
+  }
+  #section-{{ section.id }} .cta-banner__content { max-width: 700px; margin: 0 auto; }
+  #section-{{ section.id }} .cta-banner__heading { font-size: 2.25rem; margin: 0 0 1rem; }
+  #section-{{ section.id }} .cta-banner__text { font-size: 1.125rem; margin: 0 0 1.5rem; opacity: 0.85; }
+  #section-{{ section.id }} .cta-banner__btn {
+    display: inline-block; padding: 0.85rem 2rem;
+    border: 2px solid currentColor; border-radius: 4px;
+    text-decoration: none; color: inherit; font-weight: 600;
+    transition: background 0.2s, color 0.2s;
+  }
+  #section-{{ section.id }} .cta-banner__btn:hover { background: var(--color, #fff); color: var(--bg, #000); }
+  @media (max-width: 749px) { #section-{{ section.id }} .cta-banner__heading { font-size: 1.75rem; } }
+</style>
+
+{% schema %}
+{
+  "name": "CTA Banner",
+  "tag": "section",
+  "class": "section-cta-banner",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Ready to get started?" },
+    { "type": "text", "id": "text", "label": "Text", "default": "Join thousands of happy customers." },
+    { "type": "text", "id": "button_label", "label": "Button Label", "default": "Shop Now" },
+    { "type": "url", "id": "button_link", "label": "Button Link" },
+    { "type": "color_background", "id": "background_color", "label": "Background", "default": "#000000" },
+    { "type": "color", "id": "text_color", "label": "Text Color", "default": "#ffffff" }
+  ],
+  "blocks": [{ "type": "@app" }],
+  "presets": [{ "name": "CTA Banner" }]
+}
+{% endschema %}

package/assets/data/component-library/faq-accordion.liquid

@@ -0,0 +1,76 @@
+{%- comment -%} rebly-sections: FAQ Accordion | Category: content | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="faq-accordion">
+  <div class="faq-accordion__container">
+
+    {%- if section.settings.heading != blank or section.settings.subheading != blank -%}
+      <div class="faq-accordion__header">
+        {%- if section.settings.heading != blank -%}
+          <h2 class="faq-accordion__heading">{{ section.settings.heading | escape }}</h2>
+        {%- endif -%}
+        {%- if section.settings.subheading != blank -%}
+          <p class="faq-accordion__subheading">{{ section.settings.subheading | escape }}</p>
+        {%- endif -%}
+      </div>
+    {%- endif -%}
+
+    <div class="faq-accordion__items">
+      {%- for block in section.blocks -%}
+        {%- if block.type == 'faq-item' -%}
+          <details class="faq-accordion__item" {{ block.shopify_attributes }}>
+            <summary class="faq-accordion__question">
+              <span>{{ block.settings.question | escape }}</span>
+              <span class="faq-accordion__icon" aria-hidden="true">+</span>
+            </summary>
+            <div class="faq-accordion__answer rte">{{ block.settings.answer }}</div>
+          </details>
+        {%- endif -%}
+      {%- endfor -%}
+    </div>
+
+  </div>
+</section>
+
+<style>
+  #section-{{ section.id }} .faq-accordion__container { max-width: 800px; margin: 0 auto; padding: 4rem 2rem; }
+  #section-{{ section.id }} .faq-accordion__header { text-align: center; margin-bottom: 2.5rem; }
+  #section-{{ section.id }} .faq-accordion__heading { font-size: 2rem; margin: 0 0 0.75rem; }
+  #section-{{ section.id }} .faq-accordion__subheading { opacity: 0.7; margin: 0; }
+  #section-{{ section.id }} .faq-accordion__item { border-bottom: 1px solid rgba(0,0,0,0.12); }
+  #section-{{ section.id }} .faq-accordion__question {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: 1.25rem 0; cursor: pointer; list-style: none; font-weight: 600; font-size: 1.05rem;
+  }
+  #section-{{ section.id }} .faq-accordion__question::-webkit-details-marker { display: none; }
+  #section-{{ section.id }} details[open] .faq-accordion__icon { transform: rotate(45deg); }
+  #section-{{ section.id }} .faq-accordion__icon { transition: transform 0.2s; flex-shrink: 0; font-size: 1.5rem; line-height: 1; }
+  #section-{{ section.id }} .faq-accordion__answer { padding: 0 0 1.25rem; line-height: 1.7; }
+  @media (max-width: 749px) { #section-{{ section.id }} .faq-accordion__container { padding: 2.5rem 1.5rem; } }
+</style>
+
+{% schema %}
+{
+  "name": "FAQ Accordion",
+  "tag": "section",
+  "class": "section-faq-accordion",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Frequently Asked Questions" },
+    { "type": "text", "id": "subheading", "label": "Subheading" }
+  ],
+  "blocks": [
+    {
+      "type": "faq-item",
+      "name": "FAQ Item",
+      "settings": [
+        { "type": "text", "id": "question", "label": "Question", "default": "What is your return policy?" },
+        { "type": "richtext", "id": "answer", "label": "Answer", "default": "<p>We offer a 30-day return policy on all items.</p>" }
+      ]
+    },
+    { "type": "@app" }
+  ],
+  "presets": [{
+    "name": "FAQ Accordion",
+    "blocks": [{ "type": "faq-item" }, { "type": "faq-item" }, { "type": "faq-item" }]
+  }]
+}
+{% endschema %}

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

@@ -0,0 +1,94 @@
+{%- comment -%} rebly-sections: Features Grid | Category: content | OS2.0 {%- endcomment -%}
+
+<section id="section-{{ section.id }}" class="features-grid">
+  <div class="features-grid__container">
+
+    {%- if section.settings.heading != blank or section.settings.subheading != blank -%}
+      <div class="features-grid__header">
+        {%- if section.settings.heading != blank -%}
+          <h2 class="features-grid__heading">{{ section.settings.heading | escape }}</h2>
+        {%- endif -%}
+        {%- if section.settings.subheading != blank -%}
+          <p class="features-grid__subheading">{{ section.settings.subheading | escape }}</p>
+        {%- endif -%}
+      </div>
+    {%- endif -%}
+
+    <div class="features-grid__items" style="--cols: {{ section.settings.columns_per_row }};">
+      {%- for block in section.blocks -%}
+        {%- if block.type == 'feature' -%}
+          <div class="features-grid__item" {{ block.shopify_attributes }}>
+            {%- if block.settings.icon_image != blank -%}
+              <div class="features-grid__icon">
+                {{- block.settings.icon_image | image_url: width: 80 | image_tag: loading: 'lazy' -}}
+              </div>
+            {%- endif -%}
+            {%- if block.settings.heading != blank -%}
+              <h3 class="features-grid__item-heading">{{ block.settings.heading | escape }}</h3>
+            {%- endif -%}
+            {%- if block.settings.text != blank -%}
+              <p class="features-grid__item-text">{{ block.settings.text | escape }}</p>
+            {%- endif -%}
+          </div>
+        {%- endif -%}
+      {%- endfor -%}
+    </div>
+
+  </div>
+</section>
+
+<style>
+  #section-{{ section.id }} .features-grid__container { max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; }
+  #section-{{ section.id }} .features-grid__header { text-align: center; margin-bottom: 3rem; }
+  #section-{{ section.id }} .features-grid__heading { font-size: 2rem; margin: 0 0 0.75rem; }
+  #section-{{ section.id }} .features-grid__subheading { font-size: 1.125rem; opacity: 0.75; margin: 0; }
+  #section-{{ section.id }} .features-grid__items {
+    display: grid;
+    grid-template-columns: repeat(var(--cols, 3), 1fr);
+    gap: 2rem;
+  }
+  #section-{{ section.id }} .features-grid__item { text-align: center; padding: 1.5rem; }
+  #section-{{ section.id }} .features-grid__icon { margin: 0 auto 1rem; width: 60px; height: 60px; }
+  #section-{{ section.id }} .features-grid__icon img { width: 100%; height: 100%; object-fit: contain; }
+  #section-{{ section.id }} .features-grid__item-heading { font-size: 1.25rem; margin: 0 0 0.5rem; }
+  #section-{{ section.id }} .features-grid__item-text { line-height: 1.6; opacity: 0.8; margin: 0; }
+  @media (max-width: 989px) {
+    #section-{{ section.id }} .features-grid__items { grid-template-columns: repeat(2, 1fr); }
+  }
+  @media (max-width: 749px) {
+    #section-{{ section.id }} .features-grid__items { grid-template-columns: 1fr; }
+  }
+</style>
+
+{% schema %}
+{
+  "name": "Features Grid",
+  "tag": "section",
+  "class": "section-features-grid",
+  "settings": [
+    { "type": "text", "id": "heading", "label": "Heading", "default": "Why choose us" },
+    { "type": "text", "id": "subheading", "label": "Subheading" },
+    { "type": "range", "id": "columns_per_row", "label": "Columns", "min": 2, "max": 4, "step": 1, "default": 3 }
+  ],
+  "blocks": [
+    {
+      "type": "feature",
+      "name": "Feature",
+      "settings": [
+        { "type": "image_picker", "id": "icon_image", "label": "Icon Image" },
+        { "type": "text", "id": "heading", "label": "Heading", "default": "Feature title" },
+        { "type": "text", "id": "text", "label": "Description", "default": "Describe your feature here." }
+      ]
+    },
+    { "type": "@app" }
+  ],
+  "presets": [{
+    "name": "Features Grid",
+    "blocks": [
+      { "type": "feature" },
+      { "type": "feature" },
+      { "type": "feature" }
+    ]
+  }]
+}
+{% endschema %}