mulmocast-vision 0.1.4 → 0.1.5

package/html/html/imageSlide.html.html

@@ -0,0 +1,3 @@
+<div>
+  <img src="{{imageUrl}}" />
+</div>

package/html/html2/imageSlide.html

@@ -0,0 +1,3 @@
+<div>
+  <img src="{{imageUrl}}" />
+</div>

package/html/html2_cool/agendaSlide.html

@@ -0,0 +1,41 @@
+
+<!-- Injected cool, minimal theme -->
+<style type="text/tailwindcss">
+  @layer utilities {
+    .slide-shell { @apply min-h-full bg-neutral-950 text-neutral-200 antialiased; }
+    .slide-grid  { @apply grid gap-6; }
+    .h1          { @apply text-5xl font-semibold tracking-tight leading-tight; }
+    .h2          { @apply text-2xl font-medium tracking-tight; }
+    .muted       { @apply text-neutral-400; }
+    .accent      { @apply text-indigo-300; }
+    .card        { @apply bg-neutral-900/60 border border-neutral-800 rounded-2xl p-6; }
+    .badge       { @apply inline-flex items-center rounded-full border border-neutral-700 px-3 py-1 text-sm text-neutral-300; }
+    .kpi         { @apply text-4xl font-semibold tracking-tight; }
+  }
+</style>
+<div class="slide-shell bg-gradient-to-b from-neutral-950 to-neutral-900 text-neutral-100 flex flex-col px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <header class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-b from-neutral-950 to-neutral-900 mb-8"></div>
+    <h1 class="text-6xl font-extrabold tracking-tight text-neutral-100 mb-4 leading-tight">{{title}}</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </header>
+
+  <!-- Agenda Items -->
+  <main class="flex-1 max-w-5xl">
+    <div class="space-y-6">
+      {% for item in items %}
+      <div class="bg-white rounded-2xl shadow border border-gray-100 p-8 transform hover:scale-[1.02] transition-all duration-300 hover:shadow">
+        <div class="flex items-start">
+          <div class="flex-shrink-0 w-12 h-12 bg-gradient-to-b from-neutral-950 to-neutral-900 rounded-xl flex items-center justify-center mr-6">
+            <span class="text-white font-bold text-lg">{{ loop.index }}</span>
+          </div>
+          <div class="flex-1">
+            <div class="h2" font-semibold text-gray-800 leading-relaxed break-words">{{ item }}</div>
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </main>
+</div>

package/html/html2_cool/balanceSheetSlide.html

@@ -0,0 +1,102 @@
+
+<!-- Injected cool, minimal theme -->
+<style type="text/tailwindcss">
+  @layer utilities {
+    .slide-shell { @apply min-h-full bg-neutral-950 text-neutral-200 antialiased; }
+    .slide-grid  { @apply grid gap-6; }
+    .h1          { @apply text-5xl font-semibold tracking-tight leading-tight; }
+    .h2          { @apply text-2xl font-medium tracking-tight; }
+    .muted       { @apply text-neutral-400; }
+    .accent      { @apply text-indigo-300; }
+    .card        { @apply bg-neutral-900/60 border border-neutral-800 rounded-2xl p-6; }
+    .badge       { @apply inline-flex items-center rounded-full border border-neutral-700 px-3 py-1 text-sm text-neutral-300; }
+    .kpi         { @apply text-4xl font-semibold tracking-tight; }
+  }
+</style>
+<div class="slide-shell bg-gradient-to-b from-neutral-950 to-neutral-900 text-neutral-100 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-b from-neutral-950 to-neutral-900 mb-6"></div>
+    <h1 class="text-6xl font-bold text-neutral-100 mb-4 leading-tight">Balance Sheet</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Balance Sheet Grid -->
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
+    <!-- Assets -->
+    <section
+      class="bg-gradient-to-b from-neutral-950 to-neutral-900 rounded-3xl p-8 text-white shadow transform hover:scale-105 transition-all duration-300"
+    >
+      <div class="flex items-center mb-6">
+        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4">
+          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fill-rule="evenodd"
+              d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <h2 class="text-3xl font-bold">Assets</h2>
+      </div>
+      <ul class="space-y-3 text-lg">
+        {% for a in assets %}
+        <li class="flex items-start"><span class="w-2 h-2 bg-white rounded-full mt-3 mr-3 flex-shrink-0"></span><span>{{a}}</span></li>
+        {% endfor %}
+      </ul>
+    </section>
+
+    <!-- Liabilities -->
+    <section class="bg-gradient-to-b from-neutral-950 to-neutral-900 rounded-3xl p-8 text-white shadow transform hover:scale-105 transition-all duration-300">
+      <div class="flex items-center mb-6">
+        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4">
+          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fill-rule="evenodd"
+              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <h2 class="text-3xl font-bold">Liabilities</h2>
+      </div>
+      <ul class="space-y-3 text-lg">
+        {% for l in liabilities %}
+        <li class="flex items-start"><span class="w-2 h-2 bg-white rounded-full mt-3 mr-3 flex-shrink-0"></span><span>{{l}}</span></li>
+        {% endfor %}
+      </ul>
+    </section>
+
+    <!-- Equity -->
+    <section class="bg-gradient-to-b from-neutral-950 to-neutral-900 rounded-3xl p-8 text-white shadow transform hover:scale-105 transition-all duration-300">
+      <div class="flex items-center mb-6">
+        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4">
+          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <h2 class="text-3xl font-bold">Equity</h2>
+      </div>
+      <ul class="space-y-3 text-lg">
+        {% for e in equity %}
+        <li class="flex items-start"><span class="w-2 h-2 bg-white rounded-full mt-3 mr-3 flex-shrink-0"></span><span>{{e}}</span></li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+
+  <!-- Balance Equation -->
+  <div class="text-center mt-12">
+    <div class="inline-flex items-center bg-white rounded-2xl shadow px-8 py-4">
+      <span class="h2" font-bold text-neutral-200">Assets</span>
+      <span class="h2" font-bold text-gray-400 mx-4">=</span>
+      <span class="h2" font-bold text-neutral-200">Liabilities</span>
+      <span class="h2" font-bold text-gray-400 mx-4">+</span>
+      <span class="h2" font-bold text-neutral-200">Equity</span>
+    </div>
+  </div>
+</div>

package/html/html2_cool/balancedScorecardSlide.html

@@ -0,0 +1,63 @@
+<!-- Injected cool, minimal theme -->
+<style type="text/tailwindcss">
+  @layer utilities {
+    .slide-shell {
+      @apply min-h-full bg-neutral-950 text-neutral-200 antialiased;
+    }
+    .slide-grid {
+      @apply grid gap-6;
+    }
+    .h1 {
+      @apply text-5xl font-semibold tracking-tight leading-tight;
+    }
+    .h2 {
+      @apply text-2xl font-medium tracking-tight;
+    }
+    .muted {
+      @apply text-neutral-400;
+    }
+    .accent {
+      @apply text-indigo-300;
+    }
+    .card {
+      @apply bg-neutral-900/60 border border-neutral-800 rounded-2xl p-6;
+    }
+    .badge {
+      @apply inline-flex items-center rounded-full border border-neutral-700 px-3 py-1 text-sm text-neutral-300;
+    }
+    .kpi {
+      @apply text-4xl font-semibold tracking-tight;
+    }
+  }
+</style>
+<div class="slide-shell bg-gradient-to-b from-neutral-950 to-neutral-900 text-neutral-100 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="text-center mb-16">
+    <div class="w-20 h-1 bg-gradient-to-b from-neutral-950 to-neutral-900 mb-6 mx-auto"></div>
+    <h1 class="text-6xl font-bold text-neutral-100 mb-4 leading-tight">Balanced Scorecard</h1>
+    <div class="w-32 h-0.5 bg-gray-300 mx-auto"></div>
+  </div>
+
+  <div class="grid grid-cols-2 gap-8 max-w-7xl mx-auto">
+    {% set colors = [ "from-emerald-500 to-green-600", "from-blue-500 to-indigo-600", "from-purple-500 to-violet-600", "from-amber-500 to-orange-600" ] %} {%
+    for p in perspectives %}
+    <section
+      class="bg-gradient-to-b from-neutral-950 to-neutral-900 {{colors[loop.index0 % 4]}} rounded-3xl p-10 text-white shadow hover:scale-105 transition-all duration-300"
+    >
+      <div class="flex items-center mb-6">
+        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-6">
+          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+            <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h8a2 2 0 012 2v10a2 2 0 002 2H4a2 2 0 01-2-2V5zm3 1h6v4H5V6zm6 6H5v2h6v-2z" clip-rule="evenodd" />
+          </svg>
+        </div>
+        <h2 class="text-3xl font-bold">{{p.name}}</h2>
+      </div>
+      <ul class="space-y-3 text-lg">
+        {% for it in p.items %}
+        <li class="flex items-start"><span class="w-2 h-2 bg-white rounded-full mt-3 mr-3 flex-shrink-0"></span><span class="font-light">{{it}}</span></li>
+        {% endfor %}
+      </ul>
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/html/html2_cool/bcgMatrixSlide.html

@@ -0,0 +1,197 @@
+<!-- Injected cool, minimal theme -->
+<style type="text/tailwindcss">
+  @layer utilities {
+    .slide-shell {
+      @apply min-h-full bg-neutral-950 text-neutral-200 antialiased;
+    }
+    .slide-grid {
+      @apply grid gap-6;
+    }
+    .h1 {
+      @apply text-5xl font-semibold tracking-tight leading-tight;
+    }
+    .h2 {
+      @apply text-2xl font-medium tracking-tight;
+    }
+    .muted {
+      @apply text-neutral-400;
+    }
+    .accent {
+      @apply text-indigo-300;
+    }
+    .card {
+      @apply bg-neutral-900/60 border border-neutral-800 rounded-2xl p-6;
+    }
+    .badge {
+      @apply inline-flex items-center rounded-full border border-neutral-700 px-3 py-1 text-sm text-neutral-300;
+    }
+    .kpi {
+      @apply text-4xl font-semibold tracking-tight;
+    }
+  }
+</style>
+<div class="slide-shell bg-gradient-to-b from-neutral-950 to-neutral-900 text-neutral-100 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="text-center mb-16">
+    <h1 class="h1 font-bold text-neutral-100 mb-4">BCG Matrix</h1>
+    <div class="w-24 h-1 bg-gradient-to-b from-neutral-950 to-neutral-900 mx-auto mb-4"></div>
+    <p class="text-lg text-gray-600 max-w-2xl mx-auto">Growth-Share Matrix for Portfolio Analysis</p>
+  </div>
+
+  <!-- BCG Matrix Grid -->
+  <div class="max-w-6xl mx-auto">
+    <!-- Axis Labels -->
+    <div class="relative">
+      <!-- Y-axis label (Market Growth Rate) -->
+      <div class="absolute -left-16 top-1/2 transform -translate-y-1/2 -rotate-90">
+        <span class="text-gray-600 font-semibold text-lg">Market Growth Rate</span>
+        <div class="flex items-center mt-2">
+          <span class="text-sm text-gray-500 mr-2">High</span>
+          <div class="w-12 h-0.5 bg-gray-400"></div>
+          <span class="text-sm text-gray-500 ml-2">Low</span>
+        </div>
+      </div>
+
+      <!-- X-axis label (Market Share) -->
+      <div class="text-center mb-4">
+        <span class="text-gray-600 font-semibold text-lg">Relative Market Share</span>
+        <div class="flex items-center justify-center mt-2">
+          <span class="text-sm text-gray-500 mr-4">High</span>
+          <div class="w-24 h-0.5 bg-gray-400"></div>
+          <span class="text-sm text-gray-500 ml-4">Low</span>
+        </div>
+      </div>
+
+      <!-- Matrix Grid -->
+      <div class="grid grid-cols-2 gap-8">
+        <!-- Stars (High Growth, High Share) -->
+        <section
+          class="bg-gradient-to-b from-neutral-950 to-neutral-900 rounded-3xl p-10 text-white shadow transform hover:scale-105 transition-all duration-300 relative overflow-hidden"
+        >
+          <div class="absolute top-0 right-0 opacity-20">
+            <svg class="w-20 h-20" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+              />
+            </svg>
+          </div>
+          <div class="flex items-center mb-6">
+            <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4">
+              <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"
+                />
+              </svg>
+            </div>
+            <h2 class="text-3xl font-bold">Stars</h2>
+          </div>
+          <div class="text-sm mb-4 opacity-90">High Growth • High Market Share</div>
+          <ul class="space-y-3 text-lg">
+            {% for it in stars %}
+            <li class="flex items-start"><span class="w-2 h-2 bg-white rounded-full mt-3 mr-3 flex-shrink-0"></span><span>{{it}}</span></li>
+            {% endfor %}
+          </ul>
+        </section>
+
+        <!-- Question Marks (High Growth, Low Share) -->
+        <section
+          class="bg-gradient-to-b from-neutral-950 to-neutral-900 rounded-3xl p-10 text-white shadow transform hover:scale-105 transition-all duration-300 relative overflow-hidden"
+        >
+          <div class="absolute top-0 right-0 opacity-20">
+            <svg class="w-20 h-20" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fill-rule="evenodd"
+                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </div>
+          <div class="flex items-center mb-6">
+            <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4">
+              <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fill-rule="evenodd"
+                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </div>
+            <h2 class="text-3xl font-bold">Question Marks</h2>
+          </div>
+          <div class="text-sm mb-4 opacity-90">High Growth • Low Market Share</div>
+          <ul class="space-y-3 text-lg">
+            {% for it in questionMarks %}
+            <li class="flex items-start"><span class="w-2 h-2 bg-white rounded-full mt-3 mr-3 flex-shrink-0"></span><span>{{it}}</span></li>
+            {% endfor %}
+          </ul>
+        </section>
+
+        <!-- Cash Cows (Low Growth, High Share) -->
+        <section
+          class="bg-gradient-to-b from-neutral-950 to-neutral-900 rounded-3xl p-10 text-white shadow transform hover:scale-105 transition-all duration-300 relative overflow-hidden"
+        >
+          <div class="absolute top-0 right-0 opacity-20">
+            <svg class="w-20 h-20" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fill-rule="evenodd"
+                d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </div>
+          <div class="flex items-center mb-6">
+            <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4">
+              <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fill-rule="evenodd"
+                  d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </div>
+            <h2 class="text-3xl font-bold">Cash Cows</h2>
+          </div>
+          <div class="text-sm mb-4 opacity-90">Low Growth • High Market Share</div>
+          <ul class="space-y-3 text-lg">
+            {% for it in cashCows %}
+            <li class="flex items-start"><span class="w-2 h-2 bg-white rounded-full mt-3 mr-3 flex-shrink-0"></span><span>{{it}}</span></li>
+            {% endfor %}
+          </ul>
+        </section>
+
+        <!-- Dogs (Low Growth, Low Share) -->
+        <section
+          class="bg-gradient-to-b from-neutral-950 to-neutral-900 rounded-3xl p-10 text-white shadow transform hover:scale-105 transition-all duration-300 relative overflow-hidden"
+        >
+          <div class="absolute top-0 right-0 opacity-20">
+            <svg class="w-20 h-20" fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fill-rule="evenodd"
+                d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </div>
+          <div class="flex items-center mb-6">
+            <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4">
+              <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fill-rule="evenodd"
+                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </div>
+            <h2 class="text-3xl font-bold">Dogs</h2>
+          </div>
+          <div class="text-sm mb-4 opacity-90">Low Growth • Low Market Share</div>
+          <ul class="space-y-3 text-lg">
+            {% for it in dogs %}
+            <li class="flex items-start"><span class="w-2 h-2 bg-white rounded-full mt-3 mr-3 flex-shrink-0"></span><span>{{it}}</span></li>
+            {% endfor %}
+          </ul>
+        </section>
+      </div>
+    </div>
+  </div>
+</div>

package/html/html2_cool/beforeAfterSlide.html

@@ -0,0 +1,93 @@
+
+<!-- Injected cool, minimal theme -->
+<style type="text/tailwindcss">
+  @layer utilities {
+    .slide-shell { @apply min-h-full bg-neutral-950 text-neutral-200 antialiased; }
+    .slide-grid  { @apply grid gap-6; }
+    .h1          { @apply text-5xl font-semibold tracking-tight leading-tight; }
+    .h2          { @apply text-2xl font-medium tracking-tight; }
+    .muted       { @apply text-neutral-400; }
+    .accent      { @apply text-indigo-300; }
+    .card        { @apply bg-neutral-900/60 border border-neutral-800 rounded-2xl p-6; }
+    .badge       { @apply inline-flex items-center rounded-full border border-neutral-700 px-3 py-1 text-sm text-neutral-300; }
+    .kpi         { @apply text-4xl font-semibold tracking-tight; }
+  }
+</style>
+<div class="slide-shell bg-gradient-to-b from-neutral-950 to-neutral-900 text-neutral-100 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-b from-neutral-950 to-neutral-900 mb-6"></div>
+    <h1 class="text-6xl font-bold text-neutral-100 mb-4 leading-tight">{{title}}</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Before/After Comparison -->
+  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-7xl mx-auto">
+    <!-- Before -->
+    <section class="bg-gradient-to-b from-neutral-950 to-neutral-900 rounded-3xl p-10 text-white shadow transform hover:scale-105 transition-all duration-300">
+      <div class="flex items-center mb-8">
+        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4">
+          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fill-rule="evenodd"
+              d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <h2 class="h1 font-bold">Before</h2>
+      </div>
+      <ul class="space-y-4 text-lg">
+        {% for x in before %}
+        <li class="flex items-start"><span class="w-2 h-2 bg-white rounded-full mt-3 mr-3 flex-shrink-0"></span><span>{{x}}</span></li>
+        {% endfor %}
+      </ul>
+    </section>
+
+    <!-- After -->
+    <section
+      class="bg-gradient-to-b from-neutral-950 to-neutral-900 rounded-3xl p-10 text-white shadow transform hover:scale-105 transition-all duration-300"
+    >
+      <div class="flex items-center mb-8">
+        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4">
+          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <h2 class="text-4xl font-bold">After</h2>
+      </div>
+      <ul class="space-y-4 text-lg">
+        {% for x in after %}
+        <li class="flex items-start"><span class="w-2 h-2 bg-white rounded-full mt-3 mr-3 flex-shrink-0"></span><span>{{x}}</span></li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+
+  <!-- Transformation Arrow -->
+  <div class="flex justify-center mt-12">
+    <div class="bg-white rounded-full p-6 shadow">
+      <svg class="w-16 h-16 text-neutral-200" fill="currentColor" viewBox="0 0 20 20">
+        <path
+          fill-rule="evenodd"
+          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </div>
+  </div>
+
+  <!-- Impact Summary -->
+  <div class="text-center mt-12">
+    <div class="inline-flex items-center bg-gradient-to-b from-neutral-950 to-neutral-900 text-white rounded-2xl shadow px-8 py-6">
+      <svg class="w-8 h-8 mr-3" fill="currentColor" viewBox="0 0 20 20">
+        <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+      </svg>
+      <span class="h2" font-bold">Transformation Impact</span>
+    </div>
+  </div>
+</div>

package/html/html2_cool/benchmarkingTableSlide.html

@@ -0,0 +1,85 @@
+
+<!-- Injected cool, minimal theme -->
+<style type="text/tailwindcss">
+  @layer utilities {
+    .slide-shell { @apply min-h-full bg-neutral-950 text-neutral-200 antialiased; }
+    .slide-grid  { @apply grid gap-6; }
+    .h1          { @apply text-5xl font-semibold tracking-tight leading-tight; }
+    .h2          { @apply text-2xl font-medium tracking-tight; }
+    .muted       { @apply text-neutral-400; }
+    .accent      { @apply text-indigo-300; }
+    .card        { @apply bg-neutral-900/60 border border-neutral-800 rounded-2xl p-6; }
+    .badge       { @apply inline-flex items-center rounded-full border border-neutral-700 px-3 py-1 text-sm text-neutral-300; }
+    .kpi         { @apply text-4xl font-semibold tracking-tight; }
+  }
+</style>
+<div class="slide-shell bg-gradient-to-b from-neutral-950 to-neutral-900 text-neutral-100 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-b from-neutral-950 to-neutral-900 mb-6"></div>
+    <h1 class="text-6xl font-bold text-neutral-100 mb-4 leading-tight">Benchmarking</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Benchmarking Table -->
+  <div class="max-w-7xl mx-auto">
+    <div class="bg-white rounded-3xl shadow border border-gray-100 overflow-hidden">
+      <!-- Table Header -->
+      <div class="bg-gradient-to-b from-neutral-950 to-neutral-900 text-white">
+        <div class="grid grid-cols-{{ competitors|length + 1 }} gap-4 px-8 py-6">
+          <div class="text-xl font-bold">Metric / Competitor</div>
+          {% for c in competitors %}
+          <div class="text-xl font-bold text-center">{{c}}</div>
+          {% endfor %}
+        </div>
+      </div>
+
+      <!-- Table Body -->
+      <div class="divide-y divide-gray-100">
+        {% for m in metrics %}
+        <div class="grid grid-cols-{{ competitors|length + 1 }} gap-4 px-8 py-6 hover:bg-gray-50 transition-colors duration-200">
+          <div class="text-lg font-semibold text-gray-800 flex items-center">
+            <div class="w-8 h-8 bg-neutral-900 rounded-lg flex items-center justify-center mr-3">
+              <span class="text-neutral-200 font-bold text-sm">{{ loop.index }}</span>
+            </div>
+            {{m}}
+          </div>
+          {% for c in competitors %}
+          <div class="text-center">
+            <div class="bg-gray-100 rounded-xl p-4 min-h-[60px] flex items-center justify-center">
+              <span class="text-gray-400 text-sm">Data</span>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+
+  <!-- Competitor Legend -->
+  <div class="grid grid-cols-1 md:grid-cols-{{ competitors|length }} gap-6 max-w-7xl mx-auto mt-12">
+    {% for c in competitors %} {% set colors = ['emerald', 'blue', 'purple', 'amber', 'red', 'indigo', 'pink', 'green'] %} {% set color = colors[loop.index0 %
+    (colors|length)] %}
+    <div class="bg-gradient-to-b from-neutral-950 to-neutral-900 from-{{ color }}-500 to-{{ color }}-600 rounded-2xl p-6 text-white shadow text-center">
+      <div class="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center mx-auto mb-3">
+        <span class="text-lg font-bold">{{ loop.index }}</span>
+      </div>
+      <div class="text-lg font-bold mb-2">{{c}}</div>
+      <div class="text-sm opacity-90">Competitor Analysis</div>
+    </div>
+    {% endfor %}
+  </div>
+
+  <!-- Analysis Summary -->
+  <div class="text-center mt-12">
+    <div class="inline-flex items-center bg-gradient-to-b from-neutral-950 to-neutral-900 text-white rounded-2xl shadow px-8 py-6">
+      <svg class="w-8 h-8 mr-3" fill="currentColor" viewBox="0 0 20 20">
+        <path
+          d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"
+        />
+      </svg>
+      <span class="h2" font-bold">Competitive Benchmarking Analysis</span>
+    </div>
+  </div>
+</div>