Embed dedicated MyHub operations video and Dispatch Reseller partner video
This commit is contained in:
Hamza-Ayed
@@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"version": "0.0.1",
|
||||||
|
"configurations": [
|
||||||
|
{
|
||||||
|
"name": "marketing",
|
||||||
|
"runtimeExecutable": "python3",
|
||||||
|
"runtimeArgs": ["-m", "http.server", "8777", "--directory", "marketing"],
|
||||||
|
"port": 8777
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
+285
-97
@@ -512,6 +512,218 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
|
|||||||
.wa-float:hover{transform:scale(1.08)}
|
.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}}
|
@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 ============ */
|
||||||
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
|
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
|
||||||
.reveal.in{opacity:1;transform:none}
|
.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="#calc" data-i18n="nav.savings">حاسبة التوفير</a>
|
||||||
<a href="#pricing" data-i18n="nav.pricing">التسعير</a>
|
<a href="#pricing" data-i18n="nav.pricing">التسعير</a>
|
||||||
<a href="#how" data-i18n="nav.how">كيف نطلق</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>
|
<a href="#faq" data-i18n="nav.faq">الأسئلة</a>
|
||||||
</nav>
|
</nav>
|
||||||
<div class="nav-right">
|
<div class="nav-right">
|
||||||
@@ -612,18 +823,32 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-visual">
|
<div class="hero-visual">
|
||||||
<!-- Rider phone -->
|
<!-- 3D Laptop Video Showroom -->
|
||||||
<div class="phone p1">
|
<div class="hero-showroom">
|
||||||
<div class="p-notch"></div>
|
<div class="laptop-frame">
|
||||||
<div class="p-screen" style="padding:0">
|
<div class="laptop-screen">
|
||||||
<img src="assets/mock_rider.png" alt="Tripz Rider App" style="width:100%;height:auto;display:block">
|
<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>
|
||||||
</div>
|
<div class="laptop-base"></div>
|
||||||
<!-- Driver phone -->
|
|
||||||
<div class="phone p2">
|
<!-- Floating Rider Phone -->
|
||||||
<div class="p-notch"></div>
|
<div class="phone-float phone-rider">
|
||||||
<div class="p-screen" style="padding:0">
|
<div class="p-notch"></div>
|
||||||
<img src="assets/mock_driver.png" alt="Tripz Driver App" style="width:100%;height:auto;display:block">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -650,93 +875,45 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
|
|||||||
</div>
|
</div>
|
||||||
<div class="feature-rows">
|
<div class="feature-rows">
|
||||||
|
|
||||||
<div class="frow reveal">
|
<div class="pillar-card reveal">
|
||||||
<div class="frow-art">
|
<div class="pillar-card-media">
|
||||||
<svg viewBox="0 0 260 200" width="100%" height="100%">
|
<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;">
|
||||||
<defs>
|
<source src="assets/videos/Cinematic_K_video_of_a_modern.mp4" type="video/mp4">
|
||||||
<linearGradient id="g1" x1="0" y1="0" x2="1" y2="1">
|
</video>
|
||||||
<stop offset="0" style="stop-color:var(--brand-500)" stop-opacity=".16"/>
|
<div class="pillar-card-overlay"></div>
|
||||||
<stop offset="1" style="stop-color:var(--signal-400)" stop-opacity=".10"/>
|
<div class="pillar-card-badge"><i class="fa-solid fa-shield-halved" style="color:#10b981"></i> عقد تصدير كود وبيانات مكتوب</div>
|
||||||
</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>
|
</div>
|
||||||
<div class="frow-text">
|
<div class="pillar-card-content">
|
||||||
<h3 data-i18n="pillars.p1.t"></h3><p data-i18n="pillars.p1.d"></p>
|
<h3 data-i18n="pillars.p1.t">بياناتك سيادتك</h3>
|
||||||
|
<p data-i18n="pillars.p1.d">تصدير كامل في أي وقت، فترة انتقال 60 يوماً مكتوبة في العقد، وخيار نشر داخل بلدك.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="frow reveal reverse">
|
<div class="pillar-card reverse reveal">
|
||||||
<div class="frow-art">
|
<div class="pillar-card-content">
|
||||||
<svg viewBox="0 0 260 200" width="100%" height="100%">
|
<h3 data-i18n="pillars.p2.t">تكلفة بلا مفاجآت</h3>
|
||||||
<defs>
|
<p data-i18n="pillars.p2.d">أسعارنا معلنة بالكامل دون أي رسوم خفية أو أسرار في الفاتورة، مع توفير حقيقي يضمن نموك المالي.</p>
|
||||||
<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>
|
</div>
|
||||||
<div class="frow-text">
|
<div class="pillar-card-media">
|
||||||
<h3 data-i18n="pillars.p2.t"></h3><p data-i18n="pillars.p2.d"></p>
|
<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>
|
</div>
|
||||||
|
|
||||||
<div class="frow reveal">
|
<div class="pillar-card reveal">
|
||||||
<div class="frow-art">
|
<div class="pillar-card-media">
|
||||||
<svg viewBox="0 0 260 200" width="100%" height="100%">
|
<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;">
|
||||||
<defs>
|
<source src="assets/videos/Fast_action_cinematic_drone_sh.mp4" type="video/mp4">
|
||||||
<linearGradient id="g3" x1="0" y1="0" x2="1" y2="1">
|
</video>
|
||||||
<stop offset="0" style="stop-color:var(--brand-500)" stop-opacity=".16"/>
|
<div class="pillar-card-overlay"></div>
|
||||||
<stop offset="1" style="stop-color:var(--signal-400)" stop-opacity=".14"/>
|
<div class="pillar-card-badge"><i class="fa-solid fa-bolt" style="color:#ffd700"></i> إطلاق جاهز خلال 30 يوماً</div>
|
||||||
</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>
|
</div>
|
||||||
<div class="frow-text">
|
<div class="pillar-card-content">
|
||||||
<h3 data-i18n="pillars.p3.t"></h3><p data-i18n="pillars.p3.d"></p>
|
<h3 data-i18n="pillars.p3.t">أسرع من أن تتردد</h3>
|
||||||
|
<p data-i18n="pillars.p3.d">نطلق لك منصة وتطبيقات نقل متكاملة باسمك وشعارك على آبل وجوجل في 30 يوماً فقط!</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -797,7 +974,9 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="mock-img-wrap">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -811,7 +990,9 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="mock-img-wrap">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -825,7 +1006,9 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="mock-img-wrap">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -839,7 +1022,9 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="mock-img-wrap">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1043,9 +1228,9 @@ footer{background:var(--midnight-900);color:#8A99C2;padding:64px 0 32px;border-t
|
|||||||
<!-- 1. AI Suite -->
|
<!-- 1. AI Suite -->
|
||||||
<div class="addon-card">
|
<div class="addon-card">
|
||||||
<div class="addon-badge available" data-i18n="addon.badge.now"></div>
|
<div class="addon-badge available" data-i18n="addon.badge.now"></div>
|
||||||
<div class="addon-ico" style="background:rgba(46,75,255,.15);color:#2E4BFF">
|
<video autoplay loop muted playsinline class="transit-video" style="max-height:160px;margin-bottom:14px;border-radius:14px;">
|
||||||
<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>
|
<source src="assets/videos/Close_up_cinematic_video_of_a.mp4" type="video/mp4">
|
||||||
</div>
|
</video>
|
||||||
<h3 data-i18n="addons.m1.name"></h3>
|
<h3 data-i18n="addons.m1.name"></h3>
|
||||||
<p data-i18n="addons.m1.desc"></p>
|
<p data-i18n="addons.m1.desc"></p>
|
||||||
<div class="addon-price"><span class="num">$149</span><span data-i18n="addons.m1.period"></span></div>
|
<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>
|
||||||
<div class="transit-card">
|
<div class="transit-card">
|
||||||
<div class="addon-badge available" data-i18n="addon.badge.now"></div>
|
<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-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-setup" data-i18n="transit.setup"></div>
|
||||||
<div class="transit-sep"></div>
|
<div class="transit-sep"></div>
|
||||||
|
|||||||
Reference in New Issue
Block a user