mulmocast-vision 0.0.1

package/assets/html/segmentationPage.html

@@ -0,0 +1,15 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Segmentation</h1>
+  <div class="grid grid-cols-{{segments|length}} gap-4">
+    {% for s in segments %}
+    <section class="rounded-xl border p-4 bg-gray-50">
+      <h2 class="text-lg font-semibold mb-2">{{s}}</h2>
+      <ul class="list-disc ml-5 space-y-1 text-xl">
+        {% for d in descriptors %}
+        <li>{{d}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/assets/html/sensitivityAnalysisPage.html

@@ -0,0 +1,22 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Sensitivity Analysis</h1>
+  <p class="text-xl text-gray-700 mb-4">Variables x Scenarios</p>
+  <div class="grid grid-cols-2 gap-6">
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-3">Variables</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for v in variables %}
+        <li>{{v}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold mb-3">Scenarios</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for s in scenarios %}
+        <li>{{s}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+</div>

package/assets/html/sevenSPage.html

@@ -0,0 +1,11 @@
+<div class="bg-white text-gray-900 px-20 py-20">
+  <div class="grid grid-cols-2 gap-6">
+    {% set pairs = [ ["Strategy", strategy], ["Structure", structure], ["Systems", systems], ["Shared Values", sharedValues], ["Skills", skills], ["Style",
+    style], ["Staff", staff] ] %} {% for p in pairs %}
+    <section class="rounded-2xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">{{p[0]}}</h2>
+      <p class="text-2xl leading-relaxed whitespace-pre-wrap">{{p[1]}}</p>
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/assets/html/shareholderValueTreePage.html

@@ -0,0 +1,8 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Shareholder Value Drivers</h1>
+  <ul class="list-disc ml-5 space-y-2 text-2xl">
+    {% for d in drivers %}
+    <li>{{d}}</li>
+    {% endfor %}
+  </ul>
+</div>

package/assets/html/stakeholderMapPage.html

@@ -0,0 +1,14 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Stakeholder Map</h1>
+  <div class="grid grid-cols-2 gap-6">
+    {% for s in stakeholders %}
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <div class="text-2xl font-semibold mb-2">{{s.name}}</div>
+      <p class="text-xl text-gray-700">Influence: {{s.influence}} / Interest: {{s.interest}}</p>
+      {% if s.notes %}
+      <p class="mt-2 text-gray-600">{{s.notes}}</p>
+      {% endif %}
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/assets/html/supportOrgModelPage.html

@@ -0,0 +1,21 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-6">Support Org Model</h1>
+  <div class="grid grid-cols-2 gap-6">
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-3">Tiers</h2>
+      <ul class="list-disc ml-5 text-2xl">
+        {% for t in tiers %}
+        <li>{{t}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold mb-3">Roles</h2>
+      <ul class="list-disc ml-5 text-2xl">
+        {% for r in roles %}
+        <li>{{r}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+</div>

package/assets/html/surveyResultsPage.html

@@ -0,0 +1,11 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Survey Results</h1>
+  <div class="grid grid-cols-2 gap-6">
+    {% for i in range(0, questions|length) %}
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold mb-3">{{questions[i]}}</h2>
+      <p class="text-xl text-gray-700">{{summaries[i]}}</p>
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/assets/html/sustainabilityRoadmapPage.html

@@ -0,0 +1,15 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Sustainability Roadmap</h1>
+  <div class="grid grid-cols-{{phases|length}} gap-4">
+    {% for ph in phases %}
+    <section class="rounded-xl border p-4 bg-gray-50">
+      <h2 class="text-lg font-semibold mb-2">{{ph}}</h2>
+      <ul class="list-disc ml-5 space-y-1 text-xl">
+        {% for a in actions %}
+        <li>{{a}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/assets/html/swotPage.html

@@ -0,0 +1,36 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <div class="grid grid-cols-2 gap-6">
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">Strengths</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for s in strengths %}
+        <li>{{s}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">Weaknesses</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for w in weaknesses %}
+        <li>{{w}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">Opportunities</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for o in opportunities %}
+        <li>{{o}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">Threats</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for t in threats %}
+        <li>{{t}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+</div>

package/assets/html/synergyCapturePage.html

@@ -0,0 +1,8 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-6">Synergy Capture</h1>
+  <ul class="list-disc ml-5 text-2xl">
+    {% for i in range(0, sources|length) %}
+    <li>{{sources[i]}}{% if values %} — {{values[i]}}{% endif %}</li>
+    {% endfor %}
+  </ul>
+</div>

package/assets/html/tamSamSomPage.html

@@ -0,0 +1,11 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">TAM / SAM / SOM</h1>
+  <ul class="list-disc ml-5 text-2xl">
+    <li>TAM: {{tam}}</li>
+    <li>SAM: {{sam}}</li>
+    <li>SOM: {{som}}</li>
+  </ul>
+  {% if notes %}
+  <p class="mt-4 text-gray-600">{{notes}}</p>
+  {% endif %}
+</div>

package/assets/html/techRoadmapPage.html

@@ -0,0 +1,15 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">Technology Roadmap</h1>
+  <div class="grid grid-cols-{{phases|length}} gap-4">
+    {% for ph in phases %}
+    <section class="rounded-xl border p-4 bg-gray-50">
+      <h2 class="text-lg font-semibold mb-2">{{ph}}</h2>
+      <ul class="list-disc ml-5 space-y-1 text-xl">
+        {% for it in items %}{% if it.phase == ph %}
+        <li>{{it.label}}</li>
+        {% endif %}{% endfor %}
+      </ul>
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/assets/html/thankYouContactPage.html

@@ -0,0 +1,24 @@
+<div class="bg-white text-gray-900 flex flex-col items-center justify-center px-16 py-24">
+  <h1 class="text-7xl font-extrabold tracking-tight text-center mb-8">{{message}}</h1>
+
+  <div class="w-full max-w-4xl grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
+    <div class="md:col-span-2 rounded-2xl border border-gray-200 p-8 bg-gray-50">
+      <ul class="space-y-3 text-2xl leading-relaxed">
+        {%- if name %}
+        <li><span class="font-semibold">Name:</span>{{name}}</li>
+        {%- endif %} {%- if email %}
+        <li><span class="font-semibold">Email:</span>{{email}}</li>
+        {%- endif %} {%- if url %}
+        <li><span class="font-semibold">URL:</span>{{url}}</li>
+        {%- endif %}
+      </ul>
+    </div>
+
+    {%- if qrImageUrl %}
+    <!-- Remove this block if you don't have a QR -->
+    <div class="rounded-2xl border border-gray-200 p-6 bg-white flex items-center justify-center">
+      <img src="${qrImageUrl}" alt="QR code" class="w-56 h-56 object-contain" />
+    </div>
+    {%- endif %}
+  </div>
+</div>

package/assets/html/threeCPage.html

@@ -0,0 +1,28 @@
+<div class="bg-white text-gray-900 px-20 py-20">
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+    <section class="rounded-2xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">Company</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for c in company %}
+        <li>{{c}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-2xl border p-6 bg-white">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">Customer</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for c in customer %}
+        <li>{{c}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    <section class="rounded-2xl border p-6 bg-gray-50">
+      <h2 class="text-xl font-semibold text-gray-700 mb-3">Competitor</h2>
+      <ul class="list-disc ml-5 space-y-2 text-2xl">
+        {% for c in competitor %}
+        <li>{{c}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+  </div>
+</div>

package/assets/html/twoByTwoMatrixPage.html

@@ -0,0 +1,17 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <div class="mb-6 flex items-center justify-between">
+    <div class="text-2xl font-semibold">Y: {{yAxis}}</div>
+    <div class="text-2xl font-semibold">X: {{xAxis}}</div>
+  </div>
+  <div class="grid grid-cols-2 gap-6">
+    {% for q in quadrants %}
+    <section class="rounded-xl border p-6 bg-gray-50 min-h-[140px]">
+      <ul class="list-disc ml-5 space-y-2 text-xl">
+        {% for it in q %}
+        <li>{{it}}</li>
+        {% endfor %}
+      </ul>
+    </section>
+    {% endfor %}
+  </div>
+</div>

package/assets/html/valueChainPage.html

@@ -0,0 +1,18 @@
+<div class="bg-white text-gray-900 px-16 py-16 space-y-8">
+  <section>
+    <h2 class="text-xl font-semibold text-gray-700 mb-3">Primary Activities</h2>
+    <div class="grid grid-cols-5 gap-4">
+      {% for p in primary %}
+      <div class="rounded-xl border p-4 text-center text-2xl bg-white">{{p}}</div>
+      {% endfor %}
+    </div>
+  </section>
+  <section>
+    <h2 class="text-xl font-semibold text-gray-700 mb-3">Support Activities</h2>
+    <div class="grid grid-cols-5 gap-4">
+      {% for s in support %}
+      <div class="rounded-xl border p-4 text-center text-2xl bg-gray-50">{{s}}</div>
+      {% endfor %}
+    </div>
+  </section>
+</div>

package/assets/html/waterfallPage.html

@@ -0,0 +1,8 @@
+<div class="bg-white text-gray-900 px-16 py-16">
+  <h1 class="text-5xl font-bold mb-8">{{title}}</h1>
+  <ul class="list-disc ml-5 space-y-2 text-2xl">
+    {% for s in steps %}
+    <li>{{s.label}} — {{s.value}}</li>
+    {% endfor %}
+  </ul>
+</div>

package/assets/html2/agendaPage.html

@@ -0,0 +1,26 @@
+<div class="bg-gradient-to-br from-slate-50 to-blue-50 text-gray-900 flex flex-col px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <header class="mb-16">
+    <div class="w-20 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 mb-8"></div>
+    <h1 class="text-6xl font-extrabold tracking-tight text-gray-900 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-lg border border-gray-100 p-8 transform hover:scale-[1.02] transition-all duration-300 hover:shadow-xl">
+        <div class="flex items-start">
+          <div class="flex-shrink-0 w-12 h-12 bg-gradient-to-br from-blue-500 to-indigo-600 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="text-2xl font-semibold text-gray-800 leading-relaxed break-words">{{ item }}</div>
+          </div>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </main>
+</div>

package/assets/html2/balanceSheetPage.html

@@ -0,0 +1,87 @@
+<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-emerald-600 to-green-600 mb-6"></div>
+    <h1 class="text-6xl font-bold text-gray-900 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-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-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-br from-red-500 to-rose-600 rounded-3xl p-8 text-white shadow-2xl 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-br from-blue-500 to-indigo-600 rounded-3xl p-8 text-white shadow-2xl 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-lg px-8 py-4">
+      <span class="text-2xl font-bold text-emerald-600">Assets</span>
+      <span class="text-2xl font-bold text-gray-400 mx-4">=</span>
+      <span class="text-2xl font-bold text-red-500">Liabilities</span>
+      <span class="text-2xl font-bold text-gray-400 mx-4">+</span>
+      <span class="text-2xl font-bold text-blue-600">Equity</span>
+    </div>
+  </div>
+</div>

package/assets/html2/balancedScorecardPage.html

@@ -0,0 +1,29 @@
+<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">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-br {{colors[loop.index0 % 4]}} 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="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/assets/html2/bcgMatrixPage.html

@@ -0,0 +1,165 @@
+<div class="bg-gradient-to-br from-slate-50 to-gray-100 text-gray-900 px-16 py-16 min-h-screen">
+  <!-- Header -->
+  <div class="text-center mb-16">
+    <h1 class="text-5xl font-bold text-gray-900 mb-4">BCG Matrix</h1>
+    <div class="w-24 h-1 bg-gradient-to-r from-blue-600 to-indigo-600 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-br from-yellow-400 to-orange-500 rounded-3xl p-10 text-white shadow-2xl 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-br from-red-500 to-pink-600 rounded-3xl p-10 text-white shadow-2xl 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-br from-emerald-500 to-green-600 rounded-3xl p-10 text-white shadow-2xl 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-br from-gray-600 to-gray-800 rounded-3xl p-10 text-white shadow-2xl 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>