@runwell/shopify-toolkit 0.17.4 → 0.18.0

package/modules/testimonials-medvi/module.json

@@ -0,0 +1,68 @@
+{
+  "name": "testimonials-medvi",
+  "version": "0.3.0",
+  "category": "social-proof",
+  "source": "medvi",
+  "base": "testimonials",
+  "qualifier": null,
+  "description": "Two horizontal marquee rows of testimonial cards. Cards are landscape (16:9), ~400px wide. Photos and quote cards are auto-split across two rows; row 2 scrolls in reverse for visual rhythm. Pauses on hover or focus; stops on prefers-reduced-motion.",
+  "replaces": null,
+  "files": {
+    "sections": [
+      "sections/runwell-testimonials-medvi.liquid"
+    ],
+    "snippets": [],
+    "assets": [
+      "assets/runwell-testimonials-medvi.css"
+    ]
+  },
+  "config": {
+    "schema": {
+      "section_eyebrow": {
+        "type": "string",
+        "default": "THOSE WHO CHOSE US",
+        "label": "Section eyebrow"
+      },
+      "headline_pre": {
+        "type": "string",
+        "default": "There's a reason people are",
+        "label": "Headline first part"
+      },
+      "headline_post": {
+        "type": "string",
+        "default": "raving about us.",
+        "label": "Headline accent part"
+      },
+      "headline_accent_color": {
+        "type": "string",
+        "default": "{{brand.primary}}",
+        "label": "Accent color for headline post"
+      },
+      "lede": {
+        "type": "string",
+        "default": "Join the multitude of people who have trusted us to help change their lives.",
+        "label": "Centered lede paragraph"
+      },
+      "card_bg": {
+        "type": "string",
+        "default": "{{brand.oat}}",
+        "label": "Quote card background"
+      },
+      "star_color": {
+        "type": "string",
+        "default": "{{brand.primary}}",
+        "label": "Star rating color"
+      },
+      "bg_band": {
+        "type": "string",
+        "default": "white",
+        "label": "Background band: white, oat, celadon-tint"
+      }
+    }
+  },
+  "lineage": {
+    "extracted_from": "https://home.medvi.org/",
+    "scrape_path": "_clients/capital-v/lushi/research/medvi-reference/site-scrape/",
+    "framer_label": "What Our Clients Say Parallax Scroll Section"
+  }
+}

package/modules/testimonials-medvi/sections/runwell-testimonials-medvi.liquid

@@ -0,0 +1,355 @@
+{%- comment -%}
+  Runwell testimonials-medvi.
+
+  Two horizontal marquee rows of testimonial cards. Each row scrolls
+  continuously; row 2 reverses direction by default for visual rhythm.
+  Cards alternate photo and quote naturally based on block ordering;
+  the designer arranges blocks once, the marquee handles the rest.
+
+  Card aspect: ~16:9 landscape. Photos fill the full card with object-fit
+  cover. Quote cards have a tinted background, padded interior with author
+  + star rating row at top, quote body below.
+
+  Loop technique: each row's content is rendered twice in DOM. CSS
+  animation translates by -50% (one full set width) over the configured
+  duration. When the first set leaves viewport, the second set has already
+  taken its place; loop is seamless.
+
+  Lineage: extracted from home.medvi.org (Framer label "Testimonials"
+  with id "testimonials"). Medvi uses 2 ul[role="group"] tickers with
+  9 items each, 20px gap, ~400px card width, JS-driven translateX.
+  We use CSS @keyframes equivalent for portability.
+{%- endcomment -%}
+
+{{ 'runwell-testimonials-medvi.css' | asset_url | stylesheet_tag }}
+
+{%- liquid
+  assign bg_band = section.settings.bg_band | default: 'white'
+  assign accent_color = section.settings.headline_accent_color | default: 'var(--runwell-primary)'
+  assign card_bg = section.settings.card_bg | default: 'var(--runwell-oat)'
+  assign star_color = section.settings.star_color | default: 'var(--runwell-primary)'
+  assign duration = section.settings.marquee_duration | default: 60
+  assign card_width = section.settings.card_width | default: 380
+  assign row2_dir = section.settings.marquee_row2_direction | default: 'same'
+  assign quote_aspect = section.settings.quote_aspect | default: '5-3'
+  assign photo_aspect = section.settings.photo_aspect | default: '16-9'
+
+  assign all_blocks = section.blocks
+  assign block_count = all_blocks.size
+  assign half = block_count | divided_by: 2
+  assign row1_blocks = all_blocks | slice: 0, half
+  assign remaining = block_count | minus: half
+  assign row2_blocks = all_blocks | slice: half, remaining
+-%}
+
+<section class="runwell-testimonials-medvi runwell-testimonials-medvi--bg-{{ bg_band }}">
+
+  <header class="runwell-testimonials-medvi__header">
+    {%- if section.settings.section_eyebrow != blank -%}
+      <p class="runwell-testimonials-medvi__eyebrow">{{ section.settings.section_eyebrow }}</p>
+    {%- endif -%}
+
+    {%- if section.settings.headline_pre != blank or section.settings.headline_post != blank -%}
+      <h2 class="runwell-testimonials-medvi__headline">
+        {%- if section.settings.headline_pre != blank -%}
+          <span class="runwell-testimonials-medvi__headline-pre">{{ section.settings.headline_pre }}</span>
+        {%- endif -%}
+        {%- if section.settings.headline_post != blank -%}
+          {{ ' ' }}<span class="runwell-testimonials-medvi__headline-post" style="color: {{ accent_color }};">{{ section.settings.headline_post }}</span>
+        {%- endif -%}
+      </h2>
+    {%- endif -%}
+
+    {%- if section.settings.lede != blank -%}
+      <p class="runwell-testimonials-medvi__lede">{{ section.settings.lede }}</p>
+    {%- endif -%}
+  </header>
+
+  {%- if block_count > 0 -%}
+    <div
+      class="runwell-testimonials-medvi__rows runwell-testimonials-medvi__rows--row2-{{ row2_dir }} runwell-testimonials-medvi__rows--quote-aspect-{{ quote_aspect }} runwell-testimonials-medvi__rows--photo-aspect-{{ photo_aspect }}"
+      style="--rw-tm-duration: {{ duration }}s; --rw-tm-card-w: {{ card_width }}px;"
+    >
+
+      {%- for row_blocks in (1..2) -%}
+        {%- if forloop.first -%}
+          {%- assign blocks = row1_blocks -%}
+          {%- assign row_class = 'runwell-testimonials-medvi__row runwell-testimonials-medvi__row--1' -%}
+        {%- else -%}
+          {%- assign blocks = row2_blocks -%}
+          {%- assign row_class = 'runwell-testimonials-medvi__row runwell-testimonials-medvi__row--2' -%}
+        {%- endif -%}
+
+        {%- if blocks.size > 0 -%}
+          <div class="{{ row_class }}">
+            <ul class="runwell-testimonials-medvi__track" role="group">
+              {%- for cycle in (1..2) -%}
+                {%- for block in blocks -%}
+                  {%- assign aria_hidden = false -%}
+                  {%- if forloop.parentloop.first == false -%}{%- assign aria_hidden = true -%}{%- endif -%}
+
+                  {%- case block.type -%}
+
+                    {%- when 'quote' -%}
+                      <li
+                        class="runwell-testimonials-medvi__item runwell-testimonials-medvi__item--quote"
+                        {% if aria_hidden %}aria-hidden="true"{% endif %}
+                        {{ block.shopify_attributes }}
+                      >
+                        <article class="runwell-testimonials-medvi__card runwell-testimonials-medvi__card--quote" style="background: {{ card_bg }};">
+                          <header class="runwell-testimonials-medvi__card-head">
+                            {%- if block.settings.author != blank -%}
+                              <p class="runwell-testimonials-medvi__card-author">{{ block.settings.author }}</p>
+                            {%- endif -%}
+                            {%- if block.settings.rating > 0 -%}
+                              <div class="runwell-testimonials-medvi__card-rating" aria-label="{{ block.settings.rating }} out of 5 stars">
+                                {%- for i in (1..block.settings.rating) -%}
+                                  <span class="runwell-testimonials-medvi__star" style="color: {{ star_color }};">★</span>
+                                {%- endfor -%}
+                              </div>
+                            {%- endif -%}
+                          </header>
+                          {%- if block.settings.quote != blank -%}
+                            <div class="runwell-testimonials-medvi__card-quote">{{ block.settings.quote }}</div>
+                          {%- endif -%}
+                        </article>
+                      </li>
+
+                    {%- when 'photo' -%}
+                      <li
+                        class="runwell-testimonials-medvi__item runwell-testimonials-medvi__item--photo"
+                        {% if aria_hidden %}aria-hidden="true"{% endif %}
+                        {{ block.shopify_attributes }}
+                      >
+                        <figure class="runwell-testimonials-medvi__card runwell-testimonials-medvi__card--photo runwell-testimonials-medvi__card--photo-focal-{{ block.settings.image_focal | default: 'center' }}">
+                          {%- if block.settings.image != blank -%}
+                            <img
+                              src="{{ block.settings.image | image_url: width: 1200 }}"
+                              alt="{{ block.settings.image.alt | default: '' | escape }}"
+                              width="{{ block.settings.image.width }}"
+                              height="{{ block.settings.image.height }}"
+                              loading="lazy"
+                            >
+                          {%- elsif block.settings.image_asset != blank -%}
+                            <img
+                              src="{{ block.settings.image_asset | asset_url }}"
+                              alt=""
+                              width="1200"
+                              height="675"
+                              loading="lazy"
+                            >
+                          {%- endif -%}
+                        </figure>
+                      </li>
+
+                  {%- endcase -%}
+                {%- endfor -%}
+              {%- endfor -%}
+            </ul>
+          </div>
+        {%- endif -%}
+
+      {%- endfor -%}
+
+    </div>
+  {%- endif -%}
+
+</section>
+
+{% schema %}
+{
+  "name": "Testimonials (medvi)",
+  "tag": "section",
+  "class": "section-runwell-testimonials-medvi",
+  "max_blocks": 24,
+  "settings": [
+    {
+      "type": "header",
+      "content": "Header"
+    },
+    {
+      "type": "text",
+      "id": "section_eyebrow",
+      "label": "Eyebrow",
+      "default": "THOSE WHO CHOSE US"
+    },
+    {
+      "type": "text",
+      "id": "headline_pre",
+      "label": "Headline (first part)",
+      "default": "There's a reason people are"
+    },
+    {
+      "type": "text",
+      "id": "headline_post",
+      "label": "Headline (accent part)",
+      "default": "raving about us."
+    },
+    {
+      "type": "color",
+      "id": "headline_accent_color",
+      "label": "Headline accent color",
+      "default": "#0B3D38"
+    },
+    {
+      "type": "textarea",
+      "id": "lede",
+      "label": "Centered lede",
+      "default": "Join the multitude of people who have trusted us to help change their lives."
+    },
+    {
+      "type": "header",
+      "content": "Cards + marquee"
+    },
+    {
+      "type": "color",
+      "id": "card_bg",
+      "label": "Quote card background",
+      "default": "#F5F0EE"
+    },
+    {
+      "type": "color",
+      "id": "star_color",
+      "label": "Star color",
+      "default": "#0B3D38"
+    },
+    {
+      "type": "range",
+      "id": "card_width",
+      "label": "Card width (px)",
+      "min": 280,
+      "max": 520,
+      "step": 20,
+      "default": 380
+    },
+    {
+      "type": "range",
+      "id": "marquee_duration",
+      "label": "Scroll duration (seconds per loop)",
+      "info": "Longer is slower. Both rows share this duration.",
+      "min": 30,
+      "max": 180,
+      "step": 5,
+      "default": 60
+    },
+    {
+      "type": "select",
+      "id": "marquee_row2_direction",
+      "label": "Row 2 scroll direction",
+      "info": "`same`: both rows scroll left (medvi-faithful). `reverse`: row 2 scrolls right for visual rhythm.",
+      "options": [
+        { "value": "same", "label": "Same direction (medvi)" },
+        { "value": "reverse", "label": "Reverse" }
+      ],
+      "default": "same"
+    },
+    {
+      "type": "select",
+      "id": "quote_aspect",
+      "label": "Quote card aspect",
+      "options": [
+        { "value": "16-9", "label": "16:9 (wide)" },
+        { "value": "5-3",  "label": "5:3 (medvi-faithful)" },
+        { "value": "4-3",  "label": "4:3" },
+        { "value": "1-1",  "label": "1:1 (square)" }
+      ],
+      "default": "5-3"
+    },
+    {
+      "type": "select",
+      "id": "photo_aspect",
+      "label": "Photo card aspect",
+      "info": "Photos can keep their native landscape (16:9) while quotes use a different aspect. Items center-align in the row when aspects differ.",
+      "options": [
+        { "value": "16-9", "label": "16:9 (medvi-faithful)" },
+        { "value": "5-3",  "label": "5:3 (match quote default)" },
+        { "value": "4-3",  "label": "4:3" },
+        { "value": "1-1",  "label": "1:1 (square)" }
+      ],
+      "default": "16-9"
+    },
+    {
+      "type": "select",
+      "id": "bg_band",
+      "label": "Background band",
+      "options": [
+        { "value": "white", "label": "White" },
+        { "value": "oat", "label": "Oat" },
+        { "value": "celadon-tint", "label": "Celadon tint" }
+      ],
+      "default": "white"
+    }
+  ],
+  "blocks": [
+    {
+      "type": "quote",
+      "name": "Quote card",
+      "settings": [
+        {
+          "type": "text",
+          "id": "author",
+          "label": "Author"
+        },
+        {
+          "type": "range",
+          "id": "rating",
+          "label": "Rating",
+          "min": 0,
+          "max": 5,
+          "step": 1,
+          "default": 5
+        },
+        {
+          "type": "richtext",
+          "id": "quote",
+          "label": "Quote"
+        }
+      ]
+    },
+    {
+      "type": "photo",
+      "name": "Photo card",
+      "settings": [
+        {
+          "type": "image_picker",
+          "id": "image",
+          "label": "Image",
+          "info": "16:9 landscape recommended."
+        },
+        {
+          "type": "text",
+          "id": "image_asset",
+          "label": "Image (asset filename fallback)"
+        },
+        {
+          "type": "select",
+          "id": "image_focal",
+          "label": "Focal point",
+          "options": [
+            { "value": "center", "label": "Center" },
+            { "value": "top", "label": "Top (faces, headshots)" },
+            { "value": "bottom", "label": "Bottom" }
+          ],
+          "default": "center"
+        }
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Testimonials (medvi)",
+      "blocks": [
+        { "type": "photo" },
+        { "type": "quote", "settings": { "author": "Jamie", "rating": 5, "quote": "<p>The questions are to the point and easy to navigate. I'm able to voice my concerns if needed.</p>" } },
+        { "type": "quote", "settings": { "author": "Jacqueline", "rating": 5, "quote": "<p>My experience is very positive. I am doing very well. Slowly and surely reaching my goals.</p>" } },
+        { "type": "quote", "settings": { "author": "Diana", "rating": 5, "quote": "<p>The staff has been so friendly and caring. If I call, I get an immediate answer from a real person.</p>" } },
+        { "type": "photo" },
+        { "type": "quote", "settings": { "author": "Alexandra", "rating": 5, "quote": "<p>Everything was quick and concise. I was treated professionally and given the opportunity to ask questions.</p>" } },
+        { "type": "quote", "settings": { "author": "Greg", "rating": 5, "quote": "<p>I was ready to give up. Wow. I would pay 10x as much if I had to. Thanks, game changer.</p>" } },
+        { "type": "photo" },
+        { "type": "quote", "settings": { "author": "Lou-Ann", "rating": 5, "quote": "<p>Doctors and staff have been very professional and prompt with any questions I have.</p>" } }
+      ]
+    }
+  ]
+}
+{% endschema %}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runwell/shopify-toolkit",
-  "version": "0.17.4",
+  "version": "0.18.0",
   "description": "Reusable Shopify theme modules from Runwell. Replaces typically app-driven features (reviews, wishlist, urgency, FAQ, post-purchase upsell, exit popups, free-ship progress, sticky ATC, testimonials, badges, bundles) with native Liquid + JS + CSS that ship across multiple client themes via a config-driven sync CLI.",
   "type": "module",
   "main": "lib/index.js",
@@ -42,4 +42,4 @@
     "type": "git",
     "url": "https://github.com/louayelbiche/runwell-shopify-toolkit.git"
   }
-}
+}