mulmocast-vision 0.0.1

package/assets/html2/pricingWaterfallPage.html

@@ -0,0 +1,33 @@
+<div class="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 px-16 py-16">
+  <!-- Header Section -->
+  <div class="mb-12">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-8"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Pricing Waterfall</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Waterfall Steps Section -->
+  <div class="mb-8">
+    <div class="grid gap-6">
+      {% for s in steps %}
+      <div class="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-3xl p-8 text-white shadow-2xl hover:scale-105 transition-all duration-300">
+        <div class="flex items-center justify-between">
+          <div class="flex items-center">
+            <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>
+            <div>
+              <p class="text-2xl font-semibold">{{s.label}}</p>
+            </div>
+          </div>
+          <div class="text-right">
+            <p class="text-3xl font-bold">{{s.value}}</p>
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>

package/assets/html2/productRoadmapPage.html

@@ -0,0 +1,47 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header Section -->
+  <div class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Product Roadmap</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Timeline Layout -->
+  <div class="relative">
+    <!-- Timeline Line -->
+    <div class="absolute top-20 left-0 right-0 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 hidden md:block"></div>
+
+    <!-- Release Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-{{releases|length}} gap-8 relative">
+      {% for r in releases %}
+      <div class="relative">
+        <!-- Timeline Dot -->
+        <div class="absolute -top-3 left-1/2 transform -translate-x-1/2 w-6 h-6 bg-blue-600 rounded-full border-4 border-white shadow-lg hidden md:block"></div>
+
+        <!-- Release Card -->
+        <div class="bg-gradient-to-br from-blue-600 to-indigo-700 rounded-3xl p-8 text-white shadow-2xl hover:scale-105 transition-all duration-300 mt-12">
+          <!-- Release Icon -->
+          <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mb-6">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
+            </svg>
+          </div>
+
+          <!-- Release Title -->
+          <h2 class="text-2xl font-bold mb-6">{{r}}</h2>
+
+          <!-- Features List -->
+          <div class="space-y-3">
+            {% for it in items %}{% if it.release == r %}
+            <div class="flex items-start space-x-3">
+              <div class="w-2 h-2 bg-white bg-opacity-60 rounded-full mt-2 flex-shrink-0"></div>
+              <span class="text-lg leading-relaxed">{{it.label}}</span>
+            </div>
+            {% endif %}{% endfor %}
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>

package/assets/html2/pyramidPrinciplePage.html

@@ -0,0 +1,47 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="text-center mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6 mx-auto"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Pyramid Principle</h1>
+    <div class="w-32 h-0.5 bg-gray-300 mx-auto"></div>
+  </div>
+
+  <div class="max-w-7xl mx-auto space-y-12">
+    <!-- Key Message -->
+    <section class="bg-gradient-to-br from-indigo-600 to-purple-700 rounded-3xl p-12 text-white shadow-2xl">
+      <div class="text-center">
+        <div class="w-20 h-20 bg-white bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-6">
+          <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fill-rule="evenodd"
+              d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <h2 class="text-5xl font-bold mb-6">Key Message</h2>
+        <p class="text-2xl font-light leading-relaxed">{{keyMessage}}</p>
+      </div>
+    </section>
+
+    <!-- Supporting Points -->
+    <section>
+      <div class="mb-8">
+        <h2 class="text-4xl font-bold text-gray-900 mb-4">Supporting Points</h2>
+        <div class="w-24 h-0.5 bg-emerald-500 mb-6"></div>
+      </div>
+      <ol class="space-y-6">
+        {% for support in supports %}
+        <li class="bg-gradient-to-br from-emerald-500 to-green-600 rounded-2xl p-8 text-white shadow-xl hover:scale-105 transition-all duration-300">
+          <div class="flex items-start">
+            <div class="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center mr-6 flex-shrink-0 mt-1">
+              <span class="text-xl font-bold text-white">{{loop.index}}</span>
+            </div>
+            <p class="text-xl leading-relaxed font-light">{{support}}</p>
+          </div>
+        </li>
+        {% endfor %}
+      </ol>
+    </section>
+  </div>
+</div>

package/assets/html2/quarterlyRoadmapPage.html

@@ -0,0 +1,54 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header Section -->
+  <div class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Quarterly Roadmap</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Timeline Layout -->
+  <div class="relative">
+    <!-- Timeline Line -->
+    <div class="absolute top-20 left-0 right-0 h-1 bg-gradient-to-r from-emerald-500 to-blue-600 hidden md:block"></div>
+
+    <!-- Quarter Cards -->
+    <div class="grid grid-cols-1 md:grid-cols-{{quarters|length}} gap-8 relative">
+      {% for q in quarters %}
+      <div class="relative">
+        <!-- Timeline Dot -->
+        <div
+          class="absolute -top-3 left-1/2 transform -translate-x-1/2 w-6 h-6 bg-emerald-600 rounded-full border-4 border-white shadow-lg hidden md:block"
+        ></div>
+
+        <!-- Quarter Card -->
+        <div class="bg-gradient-to-br from-emerald-600 to-green-700 rounded-3xl p-8 text-white shadow-2xl hover:scale-105 transition-all duration-300 mt-12">
+          <!-- Quarter Icon -->
+          <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mb-6">
+            <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+              ></path>
+            </svg>
+          </div>
+
+          <!-- Quarter Title -->
+          <h2 class="text-2xl font-bold mb-6">{{q}}</h2>
+
+          <!-- Quarter Items -->
+          <div class="space-y-3">
+            {% for it in items %}{% if it.quarter == q %}
+            <div class="flex items-start space-x-3">
+              <div class="w-2 h-2 bg-white bg-opacity-60 rounded-full mt-2 flex-shrink-0"></div>
+              <span class="text-lg leading-relaxed">{{it.label}}</span>
+            </div>
+            {% endif %}{% endfor %}
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</div>

package/assets/html2/raciPage.html

@@ -0,0 +1,49 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">RACI Matrix</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- RACI Table -->
+  <div
+    class="bg-gradient-to-br from-amber-500 to-orange-600 rounded-3xl p-10 text-white shadow-2xl hover:scale-105 transition-all duration-300 max-w-7xl mx-auto"
+  >
+    <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-6">
+        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            fill-rule="evenodd"
+            d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </div>
+      <h2 class="text-4xl font-bold">Responsibility Matrix</h2>
+    </div>
+
+    <div class="bg-white bg-opacity-10 rounded-2xl p-6 overflow-x-auto">
+      <table class="w-full border-collapse">
+        <thead>
+          <tr>
+            <th class="border border-white border-opacity-30 p-4 text-left text-xl font-bold bg-white bg-opacity-10">Task</th>
+            {% for r in roles %}
+            <th class="border border-white border-opacity-30 p-4 text-left text-xl font-bold bg-white bg-opacity-10">{{r}}</th>
+            {% endfor %}
+          </tr>
+        </thead>
+        <tbody>
+          {% for row in assignments %}
+          <tr>
+            <td class="border border-white border-opacity-30 p-4 text-lg font-semibold bg-white bg-opacity-5">{{tasks[loop.index0]}}</td>
+            {% for cell in row %}
+            <td class="border border-white border-opacity-30 p-4 text-lg text-center font-bold">{{cell}}</td>
+            {% endfor %}
+          </tr>
+          {% endfor %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>

package/assets/html2/revenueModelPage.html

@@ -0,0 +1,54 @@
+<div class="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 px-16 py-16">
+  <!-- Header Section -->
+  <div class="mb-12">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-8"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Revenue Model</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Revenue Streams Section -->
+  <div class="mb-12">
+    <h2 class="text-3xl font-bold text-gray-900 mb-8">Revenue Streams</h2>
+    <div class="grid gap-6">
+      {% for s in streams %}
+      <div class="bg-gradient-to-br from-emerald-500 to-green-600 rounded-3xl p-8 text-white shadow-2xl hover:scale-105 transition-all duration-300">
+        <div class="flex items-center">
+          <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
+                d="M4 4a2 2 0 00-2 2v1h16V6a2 2 0 00-2-2H4zM18 9H2v5a2 2 0 002 2h12a2 2 0 002-2V9zM4 13a1 1 0 011-1h1a1 1 0 110 2H5a1 1 0 01-1-1zm5-1a1 1 0 100 2h1a1 1 0 100-2H9z"
+              />
+            </svg>
+          </div>
+          <div class="flex-1">
+            <p class="text-2xl font-semibold leading-relaxed">{{s}}</p>
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+
+  {% if pricingNotes %}
+  <!-- Pricing Notes Section -->
+  <div class="mb-8">
+    <h2 class="text-3xl font-bold text-gray-900 mb-8">Pricing Strategy</h2>
+    <div class="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-3xl p-10 text-white shadow-2xl hover:scale-105 transition-all duration-300">
+      <div class="flex items-start">
+        <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-6 flex-shrink-0">
+          <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-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <div class="flex-1">
+          <p class="text-xl leading-relaxed whitespace-pre-wrap">{{pricingNotes}}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  {% endif %}
+</div>

package/assets/html2/riskMitigationPage.html

@@ -0,0 +1,36 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="text-center mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6 mx-auto"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Risk Mitigation</h1>
+    <div class="w-32 h-0.5 bg-gray-300 mx-auto"></div>
+  </div>
+
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-7xl mx-auto">
+    {% for r in risks %}
+    <section class="bg-gradient-to-br from-red-500 to-rose-600 rounded-3xl p-10 text-white shadow-2xl 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="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-2xl font-bold break-words">{{r.risk}}</h2>
+      </div>
+      <div class="space-y-4">
+        {% if r.impact %}
+        <div class="bg-white bg-opacity-10 rounded-xl p-4"><span class="font-semibold">Impact:</span> <span class="font-light">{{r.impact}}</span></div>
+        {% endif %} {% if r.likelihood %}
+        <div class="bg-white bg-opacity-10 rounded-xl p-4"><span class="font-semibold">Likelihood:</span> <span class="font-light">{{r.likelihood}}</span></div>
+        {% endif %} {% if r.mitigation %}
+        <div class="bg-white bg-opacity-10 rounded-xl p-4"><span class="font-semibold">Mitigation:</span> <span class="font-light">{{r.mitigation}}</span></div>
+        {% endif %}
+      </div>
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/assets/html2/salesDashboardPage.html

@@ -0,0 +1,58 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Sales Dashboard</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Sales Metrics -->
+  <div class="max-w-5xl mx-auto">
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
+      {% for m in metrics %}
+      <div class="bg-gradient-to-br from-emerald-500 to-green-600 rounded-3xl p-8 text-white shadow-2xl transform hover:scale-105 transition-all duration-300">
+        <div class="flex items-center mb-4">
+          <div class="w-12 h-12 bg-white bg-opacity-20 rounded-xl flex items-center justify-center mr-4">
+            <svg class="w-6 h-6" 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>
+          </div>
+          <span class="text-lg font-bold">Metric {{ loop.index }}</span>
+        </div>
+        <div class="text-xl font-light">{{m}}</div>
+      </div>
+      {% endfor %}
+    </div>
+
+    <!-- Notes Section -->
+    {% if notes %}
+    <div class="bg-white rounded-3xl shadow-xl border border-gray-100 p-10">
+      <div class="flex items-center mb-6">
+        <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mr-4">
+          <svg class="w-6 h-6 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fill-rule="evenodd"
+              d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <h2 class="text-2xl font-bold text-gray-900">Sales Notes</h2>
+      </div>
+      <p class="text-lg text-gray-700 leading-relaxed">{{notes}}</p>
+    </div>
+    {% endif %}
+  </div>
+
+  <!-- Dashboard Summary -->
+  <div class="text-center mt-16">
+    <div class="inline-flex items-center bg-gradient-to-r from-emerald-600 to-green-600 text-white rounded-2xl shadow-xl 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="text-2xl font-bold">Sales Performance Overview</span>
+    </div>
+  </div>
+</div>

package/assets/html2/scenarioPlanningPage.html

@@ -0,0 +1,63 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header Section -->
+  <div class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Scenario Planning</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Scenario Cards Layout -->
+  <div class="grid grid-cols-1 md:grid-cols-{{scenarios|length}} gap-8">
+    {% for s in scenarios %} {% set colors = [ 'from-blue-600 to-indigo-700', 'from-emerald-600 to-green-700', 'from-amber-600 to-orange-700', 'from-purple-600
+    to-violet-700', 'from-red-600 to-rose-700' ] %}
+    <div class="bg-gradient-to-br {{colors[loop.index0 % colors|length]}} rounded-3xl p-10 text-white shadow-2xl hover:scale-105 transition-all duration-300">
+      <!-- Scenario Icon -->
+      <div class="w-16 h-16 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mb-8">
+        {% if loop.index0 == 0 %}
+        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
+        </svg>
+        {% elif loop.index0 == 1 %}
+        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+          ></path>
+        </svg>
+        {% elif loop.index0 == 2 %}
+        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          ></path>
+        </svg>
+        {% else %}
+        <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          ></path>
+        </svg>
+        {% endif %}
+      </div>
+
+      <!-- Scenario Content -->
+      <div>
+        <h2 class="text-3xl font-bold mb-6">{{s}}</h2>
+        {% if impacts %}
+        <div class="bg-white bg-opacity-10 rounded-xl p-6">
+          <h3 class="text-xl font-semibold mb-3 text-white opacity-90">Impact Analysis</h3>
+          <p class="text-lg leading-relaxed text-white opacity-80">{{impacts[loop.index0]}}</p>
+        </div>
+        {% endif %}
+      </div>
+    </div>
+    {% endfor %}
+  </div>
+</div>

package/assets/html2/scqaPage.html

@@ -0,0 +1,74 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="text-center mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6 mx-auto"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">SCQA Framework</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">
+    <section class="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-3xl p-10 text-white shadow-2xl 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="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">Situation</h2>
+      </div>
+      <p class="text-xl leading-relaxed whitespace-pre-wrap break-words font-light">{{situation}}</p>
+    </section>
+
+    <section class="bg-gradient-to-br from-amber-500 to-orange-600 rounded-3xl p-10 text-white shadow-2xl 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="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">Complication</h2>
+      </div>
+      <p class="text-xl leading-relaxed whitespace-pre-wrap break-words font-light">{{complication}}</p>
+    </section>
+
+    <section class="bg-gradient-to-br from-purple-500 to-violet-600 rounded-3xl p-10 text-white shadow-2xl 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="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</h2>
+      </div>
+      <p class="text-xl leading-relaxed whitespace-pre-wrap break-words font-light">{{question}}</p>
+    </section>
+
+    <section class="bg-gradient-to-br from-emerald-500 to-green-600 rounded-3xl p-10 text-white shadow-2xl 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="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.293l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13a1 1 0 102 0V9.414l1.293 1.293a1 1 0 001.414-1.414z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <h2 class="text-3xl font-bold">Answer</h2>
+      </div>
+      <p class="text-xl leading-relaxed whitespace-pre-wrap break-words font-light">{{answer}}</p>
+    </section>
+  </div>
+</div>

package/assets/html2/sectionDividerPage.html

@@ -0,0 +1,25 @@
+<div
+  class="bg-gradient-to-br from-indigo-900 via-blue-800 to-slate-800 text-white flex items-center justify-center min-h-screen px-20 relative overflow-hidden"
+>
+  <!-- Decorative background elements -->
+  <div class="absolute inset-0 opacity-10">
+    <div class="absolute top-0 right-0 w-96 h-96 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-full transform translate-x-32 -translate-y-32"></div>
+    <div class="absolute bottom-0 left-0 w-80 h-80 bg-gradient-to-tr from-indigo-400 to-blue-500 rounded-full transform -translate-x-24 translate-y-24"></div>
+  </div>
+
+  <div class="w-full max-w-6xl text-center relative z-10">
+    <div class="mb-12 flex items-center justify-center">
+      <div class="h-px w-20 bg-gradient-to-r from-transparent to-blue-300"></div>
+      <div class="mx-6 w-3 h-3 bg-blue-300 rounded-full"></div>
+      <div class="h-px w-20 bg-gradient-to-l from-transparent to-blue-300"></div>
+    </div>
+
+    <h1 class="text-7xl lg:text-8xl font-black tracking-tight mb-8 leading-none bg-gradient-to-r from-white to-blue-100 bg-clip-text text-transparent">
+      {{heading}}
+    </h1>
+
+    <div class="w-24 h-0.5 bg-gradient-to-r from-blue-300 to-indigo-300 mx-auto mb-8"></div>
+
+    <p class="text-2xl lg:text-3xl text-blue-100 font-light leading-relaxed max-w-4xl mx-auto">{{subheading}}</p>
+  </div>
+</div>

package/assets/html2/segmentationPage.html

@@ -0,0 +1,36 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 mb-4 leading-tight">Market Segmentation</h1>
+    <div class="w-32 h-0.5 bg-gray-300"></div>
+  </div>
+
+  <!-- Segments Grid -->
+  <div class="grid grid-cols-1 md:grid-cols-{{segments|length}} gap-8 max-w-7xl mx-auto">
+    {% for s in segments %}
+    <section class="bg-gradient-to-br from-emerald-500 to-green-600 rounded-3xl p-8 text-white shadow-2xl hover:scale-105 transition-all duration-300">
+      <div class="flex items-center mb-6">
+        <div class="w-12 h-12 bg-white bg-opacity-20 rounded-2xl flex items-center justify-center mr-4">
+          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+            <path
+              fill-rule="evenodd"
+              d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v6a1 1 0 102 0V5zm0 8a1 1 0 10-2 0 1 1 0 002 0z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <h2 class="text-2xl font-bold">{{s}}</h2>
+      </div>
+      <ul class="space-y-3 text-lg">
+        {% for d in descriptors %}
+        <li class="flex items-start">
+          <span class="w-2 h-2 bg-white rounded-full mt-3 mr-3 flex-shrink-0"></span>
+          <span>{{d}}</span>
+        </li>
+        {% endfor %}
+      </ul>
+    </section>
+    {% endfor %}
+  </div>
+</div>