From 7ab18358ce22b7911dd550b968de28d16ade68cf Mon Sep 17 00:00:00 2001
From: Hamza-Ayed <hamzaayedflutter@gmail.com>
Date: Fri, 24 Jul 2026 22:51:55 +0300
Subject: [PATCH] Embed dedicated MyHub operations video and Dispatch Reseller
 partner video

---
 .claude/launch.json  |  11 ++
 marketing/index.html | 382 ++++++++++++++++++++++++++++++++-----------
 2 files changed, 296 insertions(+), 97 deletions(-)
 create mode 100644 .claude/launch.json

diff --git a/.claude/launch.json b/.claude/launch.json
new file mode 100644
index 0000000..299d134
--- /dev/null
+++ b/.claude/launch.json
@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "marketing",
+      "runtimeExecutable": "python3",
+      "runtimeArgs": ["-m", "http.server", "8777", "--directory", "marketing"],
+      "port": 8777
+    }
+  ]
+}
diff --git a/marketing/index.html b/marketing/index.html
index 2349619..1b52815 100644
--- a/marketing/index.html
+++ b/marketing/index.html
@@ -512,6 +512,218 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
 .wa-float:hover{transform:scale(1.08)}
 @keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}
 
+/* ============ VIDEO SHOWCASE STYLING ============ */
+.video-hero {
+  width: 100%;
+  max-width: 520px;
+  border-radius: 24px;
+  box-shadow: 0 20px 50px rgba(46, 75, 255, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  object-fit: cover;
+  display: block;
+}
+
+.hero-showroom {
+  position: relative;
+  width: 100%;
+  max-width: 620px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.laptop-frame {
+  width: 100%;
+  background: #0b0f19;
+  border-radius: 20px 20px 4px 4px;
+  border: 2px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 30px 80px rgba(46, 75, 255, 0.4), 0 0 50px rgba(138, 160, 255, 0.2);
+  overflow: hidden;
+  position: relative;
+}
+
+.laptop-screen {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: #000;
+}
+
+.video-laptop {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.video-overlay-badge {
+  position: absolute;
+  top: 14px;
+  inset-inline-start: 14px;
+  background: rgba(11, 15, 25, 0.85);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: #fff;
+  padding: 6px 14px;
+  border-radius: 20px;
+  font-size: 13px;
+  font-weight: 700;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.4);
+}
+
+.laptop-base {
+  width: 108%;
+  height: 12px;
+  background: linear-gradient(180deg, #2a385c, #131b2e);
+  border-radius: 0 0 12px 12px;
+  margin-bottom: 25px;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.5);
+}
+
+.phone-float {
+  position: absolute;
+  width: 140px;
+  border-radius: 22px;
+  background: #0b0f19;
+  border: 3px solid rgba(255, 255, 255, 0.25);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
+  overflow: hidden;
+  z-index: 10;
+  transition: transform 0.3s ease;
+}
+
+.phone-float.phone-rider {
+  bottom: -15px;
+  inset-inline-start: -40px;
+  transform: rotate(-8deg);
+}
+
+.phone-float.phone-driver {
+  bottom: -15px;
+  inset-inline-end: -40px;
+  transform: rotate(8deg);
+}
+
+.phone-float:hover {
+  transform: translateY(-8px) scale(1.05);
+}
+
+@media(max-width: 800px) {
+  .phone-float { display: none; }
+}
+
+.mock-video {
+  width: 100%;
+  border-radius: 20px;
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  object-fit: cover;
+  display: block;
+  max-height: 480px;
+}
+.transit-video {
+  width: 100%;
+  border-radius: 18px;
+  max-height: 380px;
+  object-fit: cover;
+  box-shadow: 0 15px 35px rgba(46, 75, 255, 0.3);
+  margin-bottom: 20px;
+}
+
+/* ============ RE-DESIGNED PILLAR CARDS ============ */
+.feature-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  margin-top: 3rem;
+}
+
+.pillar-card {
+  background: var(--bg-card, #131b2e);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 28px;
+  overflow: hidden;
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  align-items: center;
+  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
+  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.pillar-card:hover {
+  transform: translateY(-6px);
+  border-color: rgba(59, 130, 246, 0.4);
+  box-shadow: 0 35px 80px rgba(46, 75, 255, 0.25);
+}
+
+.pillar-card.reverse {
+  grid-template-columns: 1fr 1.2fr;
+}
+
+.pillar-card-media {
+  position: relative;
+  width: 100%;
+  height: 380px;
+  overflow: hidden;
+}
+
+.pillar-card-media img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  transition: transform 0.5s ease;
+}
+
+.pillar-card:hover .pillar-card-media img {
+  transform: scale(1.04);
+}
+
+.pillar-card-overlay {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: linear-gradient(180deg, rgba(11, 15, 25, 0.1) 0%, rgba(11, 15, 25, 0.65) 100%);
+}
+
+.pillar-card-badge {
+  position: absolute;
+  bottom: 20px;
+  inset-inline-start: 20px;
+  background: rgba(11, 15, 25, 0.85);
+  backdrop-filter: blur(14px);
+  border: 1px solid rgba(255, 255, 255, 0.25);
+  color: #fff;
+  padding: 8px 18px;
+  border-radius: 24px;
+  font-size: 14px;
+  font-weight: 700;
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pillar-card-content {
+  padding: 3rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+}
+
+.pillar-card-content h3 {
+  font-size: clamp(24px, 3vw, 34px);
+  font-weight: 800;
+  color: #fff;
+  line-height: 1.25;
+}
+
+.pillar-card-content p {
+  font-size: 1.1rem;
+  color: #b7c4e6;
+  line-height: 1.7;
+}
+
 /* ============ REVEAL ============ */
 .reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
 .reveal.in{opacity:1;transform:none}
@@ -553,7 +765,6 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
       <a href="#calc" data-i18n="nav.savings">حاسبة التوفير</a>
       <a href="#pricing" data-i18n="nav.pricing">التسعير</a>
       <a href="#how" data-i18n="nav.how">كيف نطلق</a>
-      <a href="studio.html" style="color:#8b5cf6;font-weight:700;">✨ استوديو AI</a>
       <a href="#faq" data-i18n="nav.faq">الأسئلة</a>
     </nav>
     <div class="nav-right">
@@ -612,18 +823,32 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
       </p>
     </div>
     <div class="hero-visual">
-      <!-- Rider phone -->
-      <div class="phone p1">
-        <div class="p-notch"></div>
-        <div class="p-screen" style="padding:0">
-          <img src="assets/mock_rider.png" alt="Tripz Rider App" style="width:100%;height:auto;display:block">
+      <!-- 3D Laptop Video Showroom -->
+      <div class="hero-showroom">
+        <div class="laptop-frame">
+          <div class="laptop-screen">
+            <video autoplay loop muted playsinline poster="assets/mock_rider.png" class="video-laptop">
+              <source src="assets/videos/A_sleek_modern_laptop_on_a_des.mp4" type="video/mp4">
+            </video>
+            <div class="video-overlay-badge"><i class="fa-solid fa-bolt" style="color:#ffd700;margin-inline-end:6px"></i> إطلاق منصتك خلال 30 يوماً</div>
+          </div>
         </div>
-      </div>
-      <!-- Driver phone -->
-      <div class="phone p2">
-        <div class="p-notch"></div>
-        <div class="p-screen" style="padding:0">
-          <img src="assets/mock_driver.png" alt="Tripz Driver App" style="width:100%;height:auto;display:block">
+        <div class="laptop-base"></div>
+
+        <!-- Floating Rider Phone -->
+        <div class="phone-float phone-rider">
+          <div class="p-notch"></div>
+          <div class="p-screen" style="padding:0">
+            <img src="assets/mock_rider.png" alt="Tripz Rider App" style="width:100%;height:auto;display:block">
+          </div>
+        </div>
+
+        <!-- Floating Driver Phone -->
+        <div class="phone-float phone-driver">
+          <div class="p-notch"></div>
+          <div class="p-screen" style="padding:0">
+            <img src="assets/mock_driver.png" alt="Tripz Driver App" style="width:100%;height:auto;display:block">
+          </div>
         </div>
       </div>
     </div>
@@ -650,93 +875,45 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
     </div>
     <div class="feature-rows">
 
-      <div class="frow reveal">
-        <div class="frow-art">
-          <svg viewBox="0 0 260 200" width="100%" height="100%">
-            <defs>
-              <linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
-                <stop offset="0" style="stop-color:var(--brand-500)" stop-opacity=".16"/>
-                <stop offset="1" style="stop-color:var(--signal-400)" stop-opacity=".10"/>
-              </linearGradient>
-            </defs>
-            <rect x="4" y="4" width="252" height="192" rx="20" style="fill:url(#g1)"/>
-            <circle cx="224" cy="34" r="5" style="fill:var(--signal-400)" opacity=".7"/>
-            <circle cx="34" cy="168" r="4" style="fill:var(--brand-500)" opacity=".5"/>
-            <!-- shield -->
-            <path d="M130 36 L182 54 V96 C182 130 158 152 130 164 C102 152 78 130 78 96 V54 Z"
-              style="fill:var(--midnight-700)" opacity=".9"/>
-            <path d="M130 36 L182 54 V96 C182 130 158 152 130 164 C102 152 78 130 78 96 V54 Z"
-              style="fill:none;stroke:var(--brand-500);stroke-width:2.5"/>
-            <!-- document sliding out -->
-            <rect x="106" y="76" width="48" height="60" rx="4" style="fill:#fff" opacity=".95"/>
-            <line x1="114" y1="90" x2="146" y2="90" style="stroke:var(--ink-300);stroke-width:2.5"/>
-            <line x1="114" y1="100" x2="146" y2="100" style="stroke:var(--ink-300);stroke-width:2.5"/>
-            <line x1="114" y1="110" x2="134" y2="110" style="stroke:var(--ink-300);stroke-width:2.5"/>
-            <!-- export arrow -->
-            <path d="M130 118 L130 150 M130 150 L120 140 M130 150 L140 140" style="stroke:var(--signal-400);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;fill:none"/>
-          </svg>
+      <div class="pillar-card reveal">
+        <div class="pillar-card-media">
+          <video autoplay loop muted playsinline poster="https://images.unsplash.com/photo-1563986768609-322da13575f3?auto=format&fit=crop&w=1200&q=80" style="width:100%;height:100%;object-fit:cover;display:block;">
+            <source src="assets/videos/Cinematic_K_video_of_a_modern.mp4" type="video/mp4">
+          </video>
+          <div class="pillar-card-overlay"></div>
+          <div class="pillar-card-badge"><i class="fa-solid fa-shield-halved" style="color:#10b981"></i> عقد تصدير كود وبيانات مكتوب</div>
         </div>
-        <div class="frow-text">
-          <h3 data-i18n="pillars.p1.t"></h3><p data-i18n="pillars.p1.d"></p>
+        <div class="pillar-card-content">
+          <h3 data-i18n="pillars.p1.t">بياناتك سيادتك</h3>
+          <p data-i18n="pillars.p1.d">تصدير كامل في أي وقت، فترة انتقال 60 يوماً مكتوبة في العقد، وخيار نشر داخل بلدك.</p>
         </div>
       </div>
 
-      <div class="frow reveal reverse">
-        <div class="frow-art">
-          <svg viewBox="0 0 260 200" width="100%" height="100%">
-            <defs>
-              <linearGradient id="g2" x1="0" y1="0" x2="1" y2="1">
-                <stop offset="0" style="stop-color:var(--signal-400)" stop-opacity=".14"/>
-                <stop offset="1" style="stop-color:var(--brand-500)" stop-opacity=".12"/>
-              </linearGradient>
-            </defs>
-            <rect x="4" y="4" width="252" height="192" rx="20" style="fill:url(#g2)"/>
-            <circle cx="40" cy="40" r="5" style="fill:var(--brand-500)" opacity=".6"/>
-            <!-- receipt -->
-            <path d="M92 40 H168 V148 L160 142 L152 148 L144 142 L136 148 L128 142 L120 148 L112 142 L104 148 L96 142 L92 148 Z"
-              style="fill:#fff" opacity=".97"/>
-            <path d="M92 40 H168 V148 L160 142 L152 148 L144 142 L136 148 L128 142 L120 148 L112 142 L104 148 L96 142 L92 148 Z"
-              style="fill:none;stroke:var(--line);stroke-width:1.5"/>
-            <line x1="104" y1="60" x2="156" y2="60" style="stroke:var(--ink-300);stroke-width:2.5"/>
-            <line x1="104" y1="72" x2="156" y2="72" style="stroke:var(--ink-300);stroke-width:2.5"/>
-            <line x1="104" y1="84" x2="140" y2="84" style="stroke:var(--ink-300);stroke-width:2.5"/>
-            <!-- transparent % badge -->
-            <circle cx="150" cy="108" r="26" style="fill:var(--success-500)" opacity=".14"/>
-            <circle cx="150" cy="108" r="26" style="fill:none;stroke:var(--success-500);stroke-width:2.5"/>
-            <text x="150" y="114" text-anchor="middle" style="fill:var(--success-500);font-size:15px;font-weight:700;font-family:sans-serif">2.5%</text>
-            <path d="M186 96 L196 106 L212 88" style="fill:none;stroke:var(--signal-400);stroke-width:4;stroke-linecap:round;stroke-linejoin:round"/>
-          </svg>
+      <div class="pillar-card reverse reveal">
+        <div class="pillar-card-content">
+          <h3 data-i18n="pillars.p2.t">تكلفة بلا مفاجآت</h3>
+          <p data-i18n="pillars.p2.d">أسعارنا معلنة بالكامل دون أي رسوم خفية أو أسرار في الفاتورة، مع توفير حقيقي يضمن نموك المالي.</p>
         </div>
-        <div class="frow-text">
-          <h3 data-i18n="pillars.p2.t"></h3><p data-i18n="pillars.p2.d"></p>
+        <div class="pillar-card-media">
+          <video autoplay loop muted playsinline poster="https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?auto=format&fit=crop&w=1200&q=80" style="width:100%;height:100%;object-fit:cover;display:block;">
+            <source src="assets/videos/Ultra_modern_financial_tech_da.mp4" type="video/mp4">
+          </video>
+          <div class="pillar-card-overlay"></div>
+          <div class="pillar-card-badge"><i class="fa-solid fa-calculator" style="color:#3b82f6"></i> أسعار معلنة وحاسبة توفير فائقة</div>
         </div>
       </div>
 
-      <div class="frow reveal">
-        <div class="frow-art">
-          <svg viewBox="0 0 260 200" width="100%" height="100%">
-            <defs>
-              <linearGradient id="g3" x1="0" y1="0" x2="1" y2="1">
-                <stop offset="0" style="stop-color:var(--brand-500)" stop-opacity=".16"/>
-                <stop offset="1" style="stop-color:var(--signal-400)" stop-opacity=".14"/>
-              </linearGradient>
-            </defs>
-            <rect x="4" y="4" width="252" height="192" rx="20" style="fill:url(#g3)"/>
-            <!-- motion streaks -->
-            <path d="M30 70 H70 M24 90 H82 M30 110 H64" style="stroke:var(--brand-500);stroke-width:3;stroke-linecap:round" opacity=".45"/>
-            <!-- speedometer -->
-            <circle cx="150" cy="104" r="46" style="fill:var(--midnight-700)" opacity=".92"/>
-            <path d="M114 128 A46 46 0 0 1 186 128" style="fill:none;stroke:var(--brand-500);stroke-width:6;stroke-linecap:round"/>
-            <path d="M114 128 A46 46 0 0 1 150 60" style="fill:none;stroke:var(--signal-400);stroke-width:6;stroke-linecap:round"/>
-            <line x1="150" y1="104" x2="176" y2="82" style="stroke:#fff;stroke-width:3.5;stroke-linecap:round"/>
-            <circle cx="150" cy="104" r="6" style="fill:#fff"/>
-            <!-- 30-day badge -->
-            <circle cx="204" cy="150" r="24" style="fill:var(--signal-400)"/>
-            <text x="204" y="156" text-anchor="middle" style="fill:var(--midnight-900);font-size:16px;font-weight:800;font-family:sans-serif">30</text>
-          </svg>
+      <div class="pillar-card reveal">
+        <div class="pillar-card-media">
+          <video autoplay loop muted playsinline poster="https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=1200&q=80" style="width:100%;height:100%;object-fit:cover;display:block;">
+            <source src="assets/videos/Fast_action_cinematic_drone_sh.mp4" type="video/mp4">
+          </video>
+          <div class="pillar-card-overlay"></div>
+          <div class="pillar-card-badge"><i class="fa-solid fa-bolt" style="color:#ffd700"></i> إطلاق جاهز خلال 30 يوماً</div>
         </div>
-        <div class="frow-text">
-          <h3 data-i18n="pillars.p3.t"></h3><p data-i18n="pillars.p3.d"></p>
+        <div class="pillar-card-content">
+          <h3 data-i18n="pillars.p3.t">أسرع من أن تتردد</h3>
+          <p data-i18n="pillars.p3.d">نطلق لك منصة وتطبيقات نقل متكاملة باسمك وشعارك على آبل وجوجل في 30 يوماً فقط!</p>
         </div>
       </div>
 
@@ -797,7 +974,9 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
         </ul>
       </div>
       <div class="mock-img-wrap">
-        <img src="assets/mock_rider.png" alt="Tripz Rider App" class="mock-img">
+        <video autoplay loop muted playsinline poster="assets/mock_rider.png" class="mock-video">
+          <source src="assets/videos/Close_up_shot_of_a_smartphone.mp4" type="video/mp4">
+        </video>
       </div>
     </div>
 
@@ -811,7 +990,9 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
         </ul>
       </div>
       <div class="mock-img-wrap">
-        <img src="assets/mock_driver.png" alt="Tripz Driver App" class="mock-img">
+        <video autoplay loop muted playsinline poster="assets/mock_driver.png" class="mock-video">
+          <source src="assets/videos/Close_up_shot_of_a_smartphone.mp4" type="video/mp4">
+        </video>
       </div>
     </div>
 
@@ -825,7 +1006,9 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
         </ul>
       </div>
       <div class="mock-img-wrap">
-        <img src="assets/mock_dispatch.png" alt="Tripz Dispatch Hub" class="mock-img" onerror="this.src='assets/tripz_dispatch_mockup.png'">
+        <video autoplay loop muted playsinline poster="assets/mock_dispatch.png" class="mock-video">
+          <source src="assets/videos/Ultra_modern_executive_laptop.mp4" type="video/mp4">
+        </video>
       </div>
     </div>
 
@@ -839,7 +1022,9 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
         </ul>
       </div>
       <div class="mock-img-wrap">
-        <img src="assets/mock_hub.png" alt="Tripz Hub Analytics" class="mock-img">
+        <video autoplay loop muted playsinline poster="assets/mock_hub.png" class="mock-video">
+          <source src="assets/videos/Cinematic_K_video_of_a_modern.mp4" type="video/mp4">
+        </video>
       </div>
     </div>
   </div>
@@ -1043,9 +1228,9 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
       <!-- 1. AI Suite -->
       <div class="addon-card">
         <div class="addon-badge available" data-i18n="addon.badge.now"></div>
-        <div class="addon-ico" style="background:rgba(46,75,255,.15);color:#2E4BFF">
-          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
-        </div>
+        <video autoplay loop muted playsinline class="transit-video" style="max-height:160px;margin-bottom:14px;border-radius:14px;">
+          <source src="assets/videos/Close_up_cinematic_video_of_a.mp4" type="video/mp4">
+        </video>
         <h3 data-i18n="addons.m1.name"></h3>
         <p data-i18n="addons.m1.desc"></p>
         <div class="addon-price"><span class="num">$149</span><span data-i18n="addons.m1.period"></span></div>
@@ -1101,6 +1286,9 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
       </div>
       <div class="transit-card">
         <div class="addon-badge available" data-i18n="addon.badge.now"></div>
+        <video autoplay loop muted playsinline class="transit-video">
+          <source src="assets/videos/A_modern_electric_city_bus_tra.mp4" type="video/mp4">
+        </video>
         <div class="transit-price"><span class="num">$299</span><span data-i18n="transit.period"></span></div>
         <div class="transit-setup" data-i18n="transit.setup"></div>
         <div class="transit-sep"></div>