Redesign customer story cards, detail template & stories section

src/components/MDCParserAndRenderer.vue

@@ -6,6 +6,9 @@
         :key="content"
         class="mdc-renderer"
     />
+    <div v-else-if="parseError" class="parse-error">
+        <strong>MDC parse error:</strong> {{ parseError }}
+    </div>
     <div v-else class="skeleton"></div>
 </template>
 
@@ -18,13 +21,25 @@
     }>()
 
     const docAst = ref<any>()
+    const parseError = ref<string>()
 
     async function parseContent() {
-        const parse = await getMDCParser()
-        if (!props.content) {
-            throw new Error("No content provided to MDCParserAndRenderer.vue")
+        try {
+            const parse = await getMDCParser()
+            if (!props.content) {
+                throw new Error("No content provided to MDCParserAndRenderer.vue")
+            }
+            const result = await parse(props.content)
+            if (!result?.body) {
+                parseError.value = `Parser returned empty body. AST keys: ${Object.keys(result ?? {}).join(", ")}`
+                console.error("[MDCParserAndRenderer] empty body:", result)
+            } else {
+                docAst.value = result
+            }
+        } catch (e: any) {
+            parseError.value = e?.message ?? String(e)
+            console.error("[MDCParserAndRenderer] parse failed:", e)
         }
-        docAst.value = await parse(props.content)
     }
 
     onMounted(async () => {
@@ -79,6 +94,15 @@
         }
     }
 
+    .parse-error {
+        background: #fee;
+        border: 1px solid #f88;
+        border-radius: 0.5rem;
+        padding: 1rem;
+        color: #c00;
+        font-size: 0.875rem;
+    }
+
     .skeleton {
         display: inline-block;
         position: relative;

src/components/stories/Card.vue

@@ -1,12 +1,15 @@
 <template>
     <a :href="`/customers/${story.slug}`" class="story-card">
-        <span class="card-industry">{{ story.industry }}</span>
+        <div class="card-industries">
+            <span class="card-industry">{{ story.industry }}</span>
+            <span v-if="story.industry2" class="card-industry">{{ story.industry2 }}</span>
+        </div>
 
         <div class="card-header">
             <div class="card-logo">
                 <img
-                    v-if="story.logo"
-                    :src="story.logo"
+                    v-if="story.logoIcon || story.logo"
+                    :src="story.logoIcon ?? story.logo"
                     :alt="displayName"
                     loading="lazy"
                 />
@@ -18,22 +21,23 @@
             </div>
         </div>
 
-        <div v-if="kpis.length" class="card-kpis">
-            <div v-for="(kpi, i) in kpis" :key="i" class="card-kpi">
-                <span class="card-kpi-value">{{ kpi.value }}</span>
-                <span class="card-kpi-label">{{ kpi.label }}</span>
-            </div>
-        </div>
-
-        <div class="card-footer">
-            <span class="card-plugins-label">Plugins Used :</span>
-            <div class="card-tasks">
-                <div
-                    class="task-icon-wrap"
-                    v-for="task in story.tasks.slice(0, 4)"
-                    :key="task"
-                >
-                    <TaskIcon :cls="task" />
+        <div class="card-bottom">
+            <p v-if="story.useCase" class="card-use-case">
+                <span class="card-use-case-label">→</span> {{ story.useCase }}
+            </p>
+
+            <KpiRotator :kpis="kpis" />
+
+            <div class="card-footer">
+                <span class="card-plugins-label">Plugins Used :</span>
+                <div class="card-tasks">
+                    <div
+                        class="task-icon-wrap"
+                        v-for="task in story.tasks.slice(0, 4)"
+                        :key="task"
+                    >
+                        <TaskIcon :cls="task" />
+                    </div>
                 </div>
             </div>
         </div>
@@ -43,6 +47,7 @@
 <script setup lang="ts">
     import { computed } from "vue"
     import TaskIcon from "~/components/common/TaskIcon.vue"
+    import KpiRotator from "~/components/stories/KpiRotator.vue"
 
     const props = defineProps<{
         story: Story
@@ -93,15 +98,22 @@
         }
     }
 
-    .card-industry {
+    .card-industries {
         align-self: flex-end;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        gap: 0.375rem;
         margin-top: -1rem;
         margin-right: -1rem;
         margin-bottom: 0.75rem;
+    }
+
+    .card-industry {
         font-size: 0.625rem;
         font-weight: 600;
-        color: var(--ks-content-link);
-        background: rgba(99, 27, 255, 0.08);
+        color: #8405ff;
+        background: #ece7f8;
         border: 1px solid rgba(99, 27, 255, 0.15);
         border-radius: 999px;
         padding: 0.2rem 0.625rem;
@@ -162,45 +174,36 @@
         color: var(--ks-content-secondary);
         line-height: 1.5;
         margin: 0;
+        min-height: calc(0.8125rem * 1.5 * 3);
     }
 
-    .card-kpis {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        border-top: 1px solid var(--ks-border-secondary);
-        border-bottom: 1px solid var(--ks-border-secondary);
-        margin-top: 1.25rem;
+    /* the bottom group (use-case + KPIs + footer) sticks to the bottom,
+       so its position is independent of the .card-short-desc height */
+    .card-bottom {
+        margin-top: auto;
     }
 
-    .card-kpi {
-        display: flex;
-        flex-direction: column;
-        gap: 0.15rem;
+    .card-use-case {
+        font-size: 0.8125rem;
+        line-height: 1.5;
+        color: var(--ks-content-secondary);
+        border-top: 1px solid var(--ks-border-secondary);
+        margin: 1.25rem 0 0;
         padding: 1rem 0;
-
-        &:nth-child(odd) {
-            padding-right: 1.5rem;
-        }
-    }
-
-    .card-kpi-value {
-        font-size: 1rem;
-        font-weight: 800;
-        color: var(--ks-content-primary);
-        line-height: 1.3;
+        min-height: calc(0.8125rem * 1.5 * 3 + 2rem);
     }
 
-    .card-kpi-label {
-        font-size: 0.8125rem;
-        color: var(--ks-content-secondary);
-        line-height: 1.4;
+    .card-use-case-label {
+        font-size: 0.6875rem;
+        font-weight: 600;
+        color: var(--ks-content-tertiary);
+        white-space: nowrap;
     }
 
     .card-footer {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        margin-top: auto;
         padding-top: 0.75rem;
         gap: 0.5rem;
     }