Template:AppPromo: Difference between revisions

Revision as of 14:01, 4 February 2026

Documentation: Use

to display the Dark Mode App Download banner.

@@ Line 1: / Line 1: @@
-<div class="bc-card bc-promo" style="background-color: #002D40; color: #ffffff; border-radius: 8px; padding: 20px; border-left: 5px solid #005f73;">
+<div class="bc-card bc-promo" style="background-color: #002D40 !important; color: #ffffff !important; border-radius: 8px; padding: 20px; border-left: 5px solid #005f73;">
-    <h2 style="color: #ffffff; margin-top: 0; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 10px;">
+<h2 style="color: #ffffff !important; margin-top: 0; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 10px; font-size: 1.5em; display:flex; align-items:center; gap:10px;">{{Icon|mobile-screen-button|color=#ffffff}} {{{title|BorderConnect Mobile App}}}</h2>
-        {{Icon|mobile-screen-button|color=#ffffff}} {{{title|BorderConnect Mobile App}}}
+<div style="margin-bottom:20px; color: #e0e6ed; font-size: 1.1em;">{{{text|Track shipments, view PARS/PAPS statuses, and upload documents in real-time.}}}</div>
-    </h2>
+<div class="bc-btngrid">
+<div class="bc-btn" style="background: #ffffff !important; border: none !important; display: flex; align-items: center; gap: 10px; padding: 10px;">
-    <div style="margin-bottom:20px; color: #e0e6ed; font-size: 1.1em;">
+<div class="bc-btn-icon">{{Icon|apple|type=fa-brands|size=2em|color=#002D40}}</div>
-        {{{text|Track shipments, view PARS/PAPS statuses, and upload documents in real-time.}}}
+<div class="bc-btn-content"><span class="plainlinks">[{{{ios|https://apps.apple.com/us/app/emanifest-app/id1620694667}}} <span style="font-weight:bold; display:block; color:#333; font-size:0.75em; text-transform:uppercase;">Download on the</span><span style="color:#002D40; font-weight:bold; font-size:1.1em;">App Store</span>]</span></div>
-    </div>
+</div>
+<div class="bc-btn" style="background: #ffffff !important; border: none !important; display: flex; align-items: center; gap: 10px; padding: 10px;">
-    <div class="bc-btngrid">
+<div class="bc-btn-icon">{{Icon|google-play|type=fa-brands|size=1.8em|color=#002D40}}</div>
-        <div class="bc-btn" style="background: #ffffff; border: none;">
+<div class="bc-btn-content"><span class="plainlinks">[{{{android|https://play.google.com/store/apps/details?id=com.borderconnect.app}}} <span style="font-weight:bold; display:block; color:#333; font-size:0.75em; text-transform:uppercase;">Get it on</span><span style="color:#002D40; font-weight:bold; font-size:1.1em;">Google Play</span>]</span></div>
-            <div class="bc-btn-icon">{{Icon|apple|type=fa-brands|size=2em|color=#002D40}}</div>
+</div>
-            <div class="bc-btn-content">
+</div>
-                <span class="plainlinks">
-                [{{{ios|https://apps.apple.com/us/app/emanifest-app/id1620694667}}} <span style="font-weight:bold; display:block; color:#333; font-size:0.8em;">Download on the</span><span style="color:#002D40; font-weight:bold; font-size:1.1em;">App Store</span>]
-                </span>
-            </div>
-        </div>
-        <div class="bc-btn" style="background: #ffffff; border: none;">
-            <div class="bc-btn-icon">{{Icon|google-play|type=fa-brands|size=1.8em|color=#002D40}}</div>
-            <div class="bc-btn-content">
-                <span class="plainlinks">
-                [{{{android|https://play.google.com/store/apps/details?id=com.borderconnect.app}}} <span style="font-weight:bold; display:block; color:#333; font-size:0.8em;">Get it on</span><span style="color:#002D40; font-weight:bold; font-size:1.1em;">Google Play</span>]
-                </span>
-            </div>
-        </div>
-    </div>
 </div><noinclude>
-Documentation:
+Documentation: Use {{Promo}} to display the Dark Mode App Download banner.
-Use {{Promo}} to display the Dark Mode App Download banner.
 </noinclude>