Hamza/tripz-llc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Embed dedicated MyHub operations video and Dispatch Reseller partner video

Browse Source
This commit is contained in:
Hamza-Ayed
2026-07-24 22:51:55 +03:00
parent 1434b1da39
commit 7ab18358ce
2 changed files with 296 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files
marketing/index.html
+285 -97
View File
@@ -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>