HTML Design Snippets
Preview on top (mobile) / side-by-side (desktop), with copy option.Balance cards
₨
Current Balance
{{user.balance}}
Available for new orders.
+
Total Deposit
{{user.deposit}}
All credited payments so far.
−
Total Spent
{{user.spent}}
Amount used on all orders.
#
Your Total Orders
{{user.orders}}
All orders placed from this account.
<!-- Premium Stats Cards (Inline CSS) -->
<div style="display:flex;flex-wrap:wrap;gap:14px;margin:18px 0;">
<!-- Current Balance -->
<div style="flex:1 1 calc(25% - 14px);min-width:210px;background:#ffffff;border-radius:14px;border:1px solid #e5e7eb;box-shadow:0 6px 18px rgba(15,23,42,0.06);padding:12px 14px;box-sizing:border-box;">
<div style="display:flex;align-items:center;gap:12px;">
<!-- Icon -->
<div style="width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#0f57c9,#06b6d4);display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:20px;font-weight:700;flex-shrink:0;">
₨
</div>
<!-- Text -->
<div style="flex:1;">
<div style="font-size:11px;letter-spacing:.18px;color:#6b7280;font-weight:600;text-transform:uppercase;">
Current Balance
</div>
<div style="font-size:22px;font-weight:700;color:#0f172a;margin-top:3px;">
{{user.balance}}
</div>
<div style="font-size:11px;color:#9ca3af;margin-top:2px;">
Available for new orders.
</div>
</div>
</div>
</div>
<!-- Total Deposit -->
<div style="flex:1 1 calc(25% - 14px);min-width:210px;background:#ffffff;border-radius:14px;border:1px solid #e5e7eb;box-shadow:0 6px 18px rgba(15,23,42,0.06);padding:12px 14px;box-sizing:border-box;">
<div style="display:flex;align-items:center;gap:12px;">
<!-- Icon -->
<div style="width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:20px;font-weight:700;flex-shrink:0;">
+
</div>
<!-- Text -->
<div style="flex:1;">
<div style="font-size:11px;letter-spacing:.18px;color:#6b7280;font-weight:600;text-transform:uppercase;">
Total Deposit
</div>
<div style="font-size:22px;font-weight:700;color:#0f172a;margin-top:3px;">
{{user.deposit}}
</div>
<div style="font-size:11px;color:#9ca3af;margin-top:2px;">
All credited payments so far.
</div>
</div>
</div>
</div>
<!-- Total Spent -->
<div style="flex:1 1 calc(25% - 14px);min-width:210px;background:#ffffff;border-radius:14px;border:1px solid #fee2e2;box-shadow:0 6px 18px rgba(248,113,113,0.16);padding:12px 14px;box-sizing:border-box;">
<div style="display:flex;align-items:center;gap:12px;">
<!-- Icon -->
<div style="width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#f97373,#ef4444);display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:20px;font-weight:700;flex-shrink:0;">
−
</div>
<!-- Text -->
<div style="flex:1;">
<div style="font-size:11px;letter-spacing:.18px;color:#7f1d1d;font-weight:600;text-transform:uppercase;">
Total Spent
</div>
<div style="font-size:22px;font-weight:700;color:#7f1d1d;margin-top:3px;">
{{user.spent}}
</div>
<div style="font-size:11px;color:#b91c1c;margin-top:2px;">
Amount used on all orders.
</div>
</div>
</div>
</div>
<!-- Your Total Orders -->
<div style="flex:1 1 calc(25% - 14px);min-width:210px;background:#ffffff;border-radius:14px;border:1px solid #dcfce7;box-shadow:0 6px 18px rgba(34,197,94,0.14);padding:12px 14px;box-sizing:border-box;">
<div style="display:flex;align-items:center;gap:12px;">
<!-- Icon -->
<div style="width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#0ea5e9);display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:20px;font-weight:700;flex-shrink:0;">
#
</div>
<!-- Text -->
<div style="flex:1;">
<div style="font-size:11px;letter-spacing:.18px;color:#166534;font-weight:600;text-transform:uppercase;">
Your Total Orders
</div>
<div style="font-size:22px;font-weight:700;color:#166534;margin-top:3px;">
{{user.orders}}
</div>
<div style="font-size:11px;color:#16a34a;margin-top:2px;">
All orders placed from this account.
</div>
</div>
</div>
</div>
</div>Balance cards premium
Total Deposit
💰
{{user.deposit}}
Total amount you have added to your account.
Total Spent
📉
{{user.spent}}
Total amount spent on all completed orders.
Your Total Orders
📦
{{user.orders}}
Number of all orders placed from this account.
<!-- Premium Stats Row -->
<div style="display:flex;flex-wrap:wrap;gap:14px;margin:16px 0;">
<!-- Current Balance -->
<div style="flex:1 1 calc(25% - 14px);min-width:170px;background:linear-gradient(135deg,#0f57c9 0%,#4f46e5 50%,#06b6d4 100%);border-radius:14px;padding:14px 16px;box-shadow:0 10px 25px rgba(15,23,42,0.25);color:#f9fafb;position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease;">
<!-- subtle overlay -->
<div style="position:absolute;right:-20px;top:-20px;width:80px;height:80px;background:rgba(255,255,255,0.10);border-radius:50%;"></div>
<div style="position:relative;z-index:2;text-align:left;">
<!-- icon + label -->
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px;">
<span style="font-size:12px;letter-spacing:.2px;font-weight:600;text-transform:uppercase;opacity:.9;">
Current Balance
</span>
<span style="font-size:16px;background:rgba(15,23,42,0.25);border-radius:999px;padding:4px 9px;line-height:1;">
💳
</span>
</div>
<!-- value -->
<div style="font-size:24px;font-weight:700;margin-top:8px;">
{{user.balance}}
</div>
<div style="font-size:11px;margin-top:4px;opacity:.9;">
Available balance for new orders.
</div>
</div>
</div>
<!-- Total Deposit -->
<div style="flex:1 1 calc(25% - 14px);min-width:170px;background:#f8fafc;border-radius:14px;padding:14px 16px;border:1px solid #e2e8f0;box-shadow:0 4px 14px rgba(15,23,42,0.06);color:#0f172a;transition:transform .15s ease,box-shadow .15s ease;">
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px;">
<span style="font-size:12px;letter-spacing:.2px;color:#64748b;font-weight:600;text-transform:uppercase;">
Total Deposit
</span>
<span style="font-size:16px;background:#e0f2fe;border-radius:999px;padding:4px 9px;line-height:1;color:#0369a1;">
💰
</span>
</div>
<div style="font-size:23px;font-weight:700;color:#0f172a;margin-top:8px;">
{{user.deposit}}
</div>
<div style="font-size:11px;color:#64748b;margin-top:4px;">
Total amount you have added to your account.
</div>
</div>
<!-- Total Spent -->
<div style="flex:1 1 calc(25% - 14px);min-width:170px;background:#fef2f2;border-radius:14px;padding:14px 16px;border:1px solid #fecaca;box-shadow:0 4px 14px rgba(248,113,113,0.12);color:#7f1d1d;transition:transform .15s ease,box-shadow .15s ease;">
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px;">
<span style="font-size:12px;letter-spacing:.2px;font-weight:600;text-transform:uppercase;">
Total Spent
</span>
<span style="font-size:16px;background:#fee2e2;border-radius:999px;padding:4px 9px;line-height:1;">
📉
</span>
</div>
<div style="font-size:23px;font-weight:700;margin-top:8px;color:#7f1d1d;">
{{user.spent}}
</div>
<div style="font-size:11px;margin-top:4px;color:#9f1239;">
Total amount spent on all completed orders.
</div>
</div>
<!-- Total Orders -->
<div style="flex:1 1 calc(25% - 14px);min-width:170px;background:#ecfdf3;border-radius:14px;padding:14px 16px;border:1px solid #bbf7d0;box-shadow:0 4px 14px rgba(34,197,94,0.10);color:#14532d;transition:transform .15s ease,box-shadow .15s ease;">
<div style="display:flex;align-items:center;justify-content:space-between;gap:10px;">
<span style="font-size:12px;letter-spacing:.2px;font-weight:600;text-transform:uppercase;">
Your Total Orders
</span>
<span style="font-size:16px;background:#dcfce7;border-radius:999px;padding:4px 9px;line-height:1;">
📦
</span>
</div>
<div style="font-size:23px;font-weight:700;margin-top:8px;color:#14532d;">
{{user.orders}}
</div>
<div style="font-size:11px;margin-top:4px;color:#166534;">
Number of all orders placed from this account.
</div>
</div>
</div>Footer premium dark
<footer style="width:100%;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;">
<!-- Top gradient strip -->
<div style="width:100%;height:6px;background:linear-gradient(90deg,#0f57c9,#22c55e,#f97316);"></div>
<!-- Main footer card area -->
<div style="width:100%;background:#0f1324;padding:40px 15px 30px;box-sizing:border-box;">
<div style="max-width:1150px;margin:0 auto;">
<!-- Card style footer -->
<div style="background:rgba(15,23,42,0.9);border-radius:18px;border:1px solid rgba(148,163,184,0.4);padding:25px 20px 20px;box-shadow:0 12px 30px rgba(0,0,0,0.35);box-sizing:border-box;">
<!-- Top row -->
<div style="display:flex;flex-wrap:wrap;gap:25px;align-items:flex-start;justify-content:space-between;">
<!-- Brand + text -->
<div style="flex:1 1 260px;min-width:230px;">
<h2 style="margin:0;font-size:22px;font-weight:700;color:#ffffff;">
HQ Rental Panel
</h2>
<p style="margin:8px 0 0;font-size:13px;color:#cbd5f5;line-height:1.7;">
Premium SMM panel solution for agencies and resellers.
Fast delivery, transparent reports and 24/7 automated system designed
for serious marketers.
</p>
</div>
<!-- Quick links column -->
<div style="flex:1 1 180px;min-width:190px;">
<h3 style="margin:0 0 8px;font-size:15px;font-weight:600;color:#e5e7eb;">
Quick Links
</h3>
<a href="/trems" style="display:flex;align-items:center;gap:8px;margin:5px 0;font-size:13px;color:#9cc4ff;text-decoration:none;">
<span style="width:18px;text-align:center;">📜</span>
<span>Terms & Conditions</span>
</a>
<a href="/cookie-policy" style="display:flex;align-items:center;gap:8px;margin:5px 0;font-size:13px;color:#9cc4ff;text-decoration:none;">
<span style="width:18px;text-align:center;">🍪</span>
<span>Cookie & Privacy Policy</span>
</a>
<a href="/faq" style="display:flex;align-items:center;gap:8px;margin:5px 0;font-size:13px;color:#9cc4ff;text-decoration:none;">
<span style="width:18px;text-align:center;">❓</span>
<span>FAQs</span>
</a>
<a href="/contact_us" style="display:flex;align-items:center;gap:8px;margin:5px 0;font-size:13px;color:#9cc4ff;text-decoration:none;">
<span style="width:18px;text-align:center;">📞</span>
<span>Contact Us</span>
</a>
</div>
<!-- Social + contact -->
<div style="flex:1 1 220px;min-width:210px;">
<h3 style="margin:0 0 8px;font-size:15px;font-weight:600;color:#e5e7eb;">
Connect With Us
</h3>
<!-- Social icons row -->
<div style="display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 10px;">
<!-- Facebook -->
<a href="https://facebook.com/" style="min-width:46px;padding:8px 10px;border-radius:999px;border:1px solid rgba(148,163,184,0.7);background:rgba(15,23,42,0.9);color:#e5e7eb;font-size:12px;text-decoration:none;display:flex;align-items:center;gap:6px;">
<span style="font-size:14px;">f</span>
<span style="font-size:11px;">Facebook</span>
</a>
<!-- Instagram -->
<a href="https://instagram.com/" style="min-width:46px;padding:8px 10px;border-radius:999px;border:1px solid rgba(148,163,184,0.7);background:rgba(15,23,42,0.9);color:#e5e7eb;font-size:12px;text-decoration:none;display:flex;align-items:center;gap:6px;">
<span style="font-size:14px;">◎</span>
<span style="font-size:11px;">Instagram</span>
</a>
<!-- YouTube -->
<a href="https://youtube.com/" style="min-width:46px;padding:8px 10px;border-radius:999px;border:1px solid rgba(148,163,184,0.7);background:rgba(15,23,42,0.9);color:#e5e7eb;font-size:12px;text-decoration:none;display:flex;align-items:center;gap:6px;">
<span style="font-size:14px;">▶</span>
<span style="font-size:11px;">YouTube</span>
</a>
<!-- WhatsApp -->
<a href="https://wa.me/923399999002" style="min-width:46px;padding:8px 10px;border-radius:999px;border:1px solid rgba(74,222,128,0.8);background:rgba(22,101,52,0.9);color:#e5fbe7;font-size:12px;text-decoration:none;display:flex;align-items:center;gap:6px;">
<span style="font-size:14px;">💬</span>
<span style="font-size:11px;">WhatsApp</span>
</a>
</div>
<p style="margin:4px 0 0;font-size:12px;color:#9ca3c7;line-height:1.6;">
Support: <b style="color:#e5e7eb;">+92 339 9999002</b><br>
Email: <a href="mailto:support@hqrentalpanel.com" style="color:#9cc4ff;text-decoration:none;">support@hqrentalpanel.com</a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom minimal bar -->
<div style="width:100%;background:#020617;padding:10px 15px;box-sizing:border-box;">
<p style="max-width:1150px;margin:0 auto;font-size:11px;color:#9ca3c7;text-align:center;">
© 2025 HQ Rental Panel — All Rights Reserved.
</p>
</div>
</footer>Footer with social icons
<footer style="width:100%;background:#f7f9fc;border-top:1px solid #e6e8ec;padding:40px 15px;font-family:Arial,Helvetica,sans-serif;">
<div style="max-width:1200px;margin:auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:35px;align-items:flex-start;">
<!-- Column 1: Branding -->
<div style="flex:1 1 260px;min-width:240px;">
<h2 style="margin:0;font-size:24px;font-weight:700;color:#0f1324;">HQ Rental Panel</h2>
<p style="margin-top:10px;font-size:14px;color:#5a627a;line-height:1.6;">
Pakistan’s fastest & most reliable SMM Panel for agencies and resellers.
Trusted by thousands of users daily.
</p>
</div>
<!-- Column 2: Quick Links -->
<div style="flex:1 1 200px;min-width:180px;">
<h3 style="margin:0;font-size:16px;font-weight:600;color:#0f1324;margin-bottom:10px;">Quick Links</h3>
<a href="/trems" style="display:block;margin:6px 0;color:#0f57c9;text-decoration:none;font-size:14px;">Terms & Conditions</a>
<a href="/cookie-policy" style="display:block;margin:6px 0;color:#0f57c9;text-decoration:none;font-size:14px;">Cookie Policy</a>
<a href="/faq" style="display:block;margin:6px 0;color:#0f57c9;text-decoration:none;font-size:14px;">FAQs</a>
<a href="/contact_us" style="display:block;margin:6px 0;color:#0f57c9;text-decoration:none;font-size:14px;">Contact Us</a>
</div>
<!-- Column 3: Social Media -->
<div style="flex:1 1 220px;min-width:200px;">
<h3 style="margin:0;font-size:16px;font-weight:600;color:#0f1324;margin-bottom:12px;">Follow Us</h3>
<!-- Social Icons -->
<div style="display:flex;gap:12px;flex-wrap:wrap;">
<!-- Facebook -->
<a href="https://facebook.com/" style="background:#1877f2;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:18px;">
f
</a>
<!-- Instagram -->
<a href="https://instagram.com/" style="background:#e1306c;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:18px;">
♡
</a>
<!-- YouTube -->
<a href="https://youtube.com/" style="background:#ff0000;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:18px;">
▶
</a>
<!-- WhatsApp -->
<a href="https://wa.me/923399999002" style="background:#25d366;color:#fff;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-size:18px;">
☎
</a>
</div>
</div>
</div>
<!-- Bottom copy -->
<div style="max-width:1200px;margin:25px auto 0;padding-top:15px;border-top:1px solid #e6e8ec;text-align:center;">
<p style="margin:0;font-size:12px;color:#707789;">
© 2025 HQ Rental Panel — All Rights Reserved.
</p>
</div>
</footer>Footer with icons
<footer style="width:100%;background:#ffffff;border-top:1px solid #e6e8ec;padding:40px 15px;font-family:Arial,Helvetica,sans-serif;">
<div style="max-width:1200px;margin:auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:35px;">
<!-- Column 1 -->
<div style="flex:1 1 260px;min-width:240px;">
<h2 style="margin:0;font-size:24px;font-weight:700;color:#0f1324;">
HQ Rental Panel
</h2>
<p style="margin-top:10px;font-size:14px;color:#5a627a;line-height:1.6;">
Pakistan’s most reliable & fastest SMM Panel for agencies and resellers.
24/7 active services with premium quality.
</p>
</div>
<!-- Column 2 -->
<div style="flex:1 1 200px;min-width:180px;">
<h3 style="margin:0;font-size:16px;font-weight:600;color:#0f1324;margin-bottom:10px;">
Quick Links
</h3>
<!-- Links With Icons & Titles -->
<a href="/trems" style="display:flex;align-items:center;gap:8px;margin:6px 0;color:#0f57c9;text-decoration:none;font-size:14px;">
<span style="background:#e8efff;padding:6px 8px;border-radius:6px;font-size:12px;color:#0f57c9;">📜</span>
<span>Terms & Conditions</span>
</a>
<a href="/cookie-policy" style="display:flex;align-items:center;gap:8px;margin:6px 0;color:#0f57c9;text-decoration:none;font-size:14px;">
<span style="background:#e8efff;padding:6px 8px;border-radius:6px;font-size:12px;color:#0f57c9;">🍪</span>
<span>Cookie Policy</span>
</a>
<a href="/faq" style="display:flex;align-items:center;gap:8px;margin:6px 0;color:#0f57c9;text-decoration:none;font-size:14px;">
<span style="background:#e8efff;padding:6px 8px;border-radius:6px;font-size:12px;color:#0f57c9;">❓</span>
<span>FAQs</span>
</a>
<a href="/contact_us" style="display:flex;align-items:center;gap:8px;margin:6px 0;color:#0f57c9;text-decoration:none;font-size:14px;">
<span style="background:#e8efff;padding:6px 8px;border-radius:6px;font-size:12px;color:#0f57c9;">📞</span>
<span>Contact Us</span>
</a>
</div>
<!-- Column 3 -->
<div style="flex:1 1 230px;min-width:200px;">
<h3 style="margin:0;font-size:16px;font-weight:600;color:#0f1324;margin-bottom:10px;">
Contact Support
</h3>
<p style="margin:0;font-size:14px;color:#5a627a;line-height:1.7;">
📱 <b style="color:#0f1324;font-size:15px;">WhatsApp: +92 339 9999002</b><br><br>
✉️ Email:<br>
<a href="mailto:support@hqrentalpanel.com" style="color:#0f57c9;text-decoration:none;">
support@hqrentalpanel.com
</a>
</p>
</div>
</div>
<!-- Bottom Bar -->
<div style="max-width:1200px;margin:25px auto 0;padding-top:15px;border-top:1px solid #e6e8ec;text-align:center;">
<p style="margin:0;font-size:12px;color:#707789;">
© 2025 HQ Rental Panel — All Rights Reserved.
</p>
</div>
</footer>Footer Light
<footer style="width:100%;background:#ffffff;border-top:1px solid #e6e8ec;padding:40px 15px;font-family:Arial,Helvetica,sans-serif;">
<div style="max-width:1200px;margin:auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:35px;">
<!-- Column 1 -->
<div style="flex:1 1 260px;min-width:240px;">
<h2 style="margin:0;font-size:24px;font-weight:700;color:#0f1324;">
HQ Rental Panel
</h2>
<p style="margin-top:10px;font-size:14px;color:#5a627a;line-height:1.6;">
Pakistan’s most reliable & fastest SMM Panel for agencies and resellers.
24/7 active services with premium quality.
</p>
</div>
<!-- Column 2 -->
<div style="flex:1 1 200px;min-width:180px;">
<h3 style="margin:0;font-size:16px;font-weight:600;color:#0f1324;margin-bottom:10px;">
Quick Links
</h3>
<a href="/trems" style="display:block;margin:6px 0;color:#0f57c9;text-decoration:none;font-size:14px;">
Terms & Conditions
</a>
<a href="/cookie-policy" style="display:block;margin:6px 0;color:#0f57c9;text-decoration:none;font-size:14px;">
Cookie Policy
</a>
<a href="/faq" style="display:block;margin:6px 0;color:#0f57c9;text-decoration:none;font-size:14px;">
FAQs
</a>
<a href="/contact_us" style="display:block;margin:6px 0;color:#0f57c9;text-decoration:none;font-size:14px;">
Contact Us
</a>
</div>
<!-- Column 3 -->
<div style="flex:1 1 230px;min-width:200px;">
<h3 style="margin:0;font-size:16px;font-weight:600;color:#0f1324;margin-bottom:10px;">
Contact Support
</h3>
<p style="margin:0;font-size:14px;color:#5a627a;line-height:1.7;">
WhatsApp:<br>
<b style="color:#0f1324;font-size:15px;">+92 339 9999002</b>
<br><br>
Email:<br>
<a href="mailto:support@hqrentalpanel.com" style="color:#0f57c9;text-decoration:none;">
support@hqrentalpanel.com
</a>
</p>
</div>
</div>
<!-- Bottom Bar -->
<div style="max-width:1200px;margin:25px auto 0;padding-top:15px;border-top:1px solid #e6e8ec;text-align:center;">
<p style="margin:0;font-size:12px;color:#707789;">
© 2025 HQ Rental Panel — All Rights Reserved.
</p>
</div>
</footer>Footer dark
<footer style="width:100%;background:#0f1324;color:#e5e7f3;padding:30px 15px 18px;font-family:Arial,Helvetica,sans-serif;">
<div style="max-width:1150px;margin:0 auto;display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;justify-content:space-between;">
<!-- Left: Brand -->
<div style="flex:1 1 260px;min-width:230px;">
<h3 style="margin:0 0 8px;font-size:22px;font-weight:700;color:#ffffff;">
HQ Rental Panel
</h3>
<p style="margin:0;font-size:13px;line-height:1.6;color:#cbd2ff;">
Fast, secure & reliable SMM panel for agencies, resellers and marketers.
Boost your social media growth with real-time automation.
</p>
</div>
<!-- Middle: Links -->
<div style="flex:1 1 220px;min-width:200px;">
<h4 style="margin:0 0 10px;font-size:15px;font-weight:600;color:#ffffff;">
Useful Links
</h4>
<a href="/trems" style="display:block;margin-bottom:5px;font-size:13px;color:#d1ddff;text-decoration:none;">
Terms & Conditions
</a>
<a href="/cookie-policy" style="display:block;margin-bottom:5px;font-size:13px;color:#d1ddff;text-decoration:none;">
Cookie & Privacy Policy
</a>
<a href="/faq" style="display:block;margin-bottom:5px;font-size:13px;color:#d1ddff;text-decoration:none;">
FAQs
</a>
<a href="/contact_us" style="display:block;margin-bottom:5px;font-size:13px;color:#d1ddff;text-decoration:none;">
Contact Us
</a>
</div>
<!-- Right: Contact -->
<div style="flex:1 1 240px;min-width:220px;">
<h4 style="margin:0 0 10px;font-size:15px;font-weight:600;color:#ffffff;">
Support & Contact
</h4>
<p style="margin:0 0 8px;font-size:13px;color:#cbd2ff;line-height:1.5;">
WhatsApp:
<b style="color:#4ade80;">+92 339 9999002</b><br>
Email:
<a href="mailto:support@hqrentalpanel.com" style="color:#d1ddff;text-decoration:none;">
support@hqrentalpanel.com
</a>
</p>
<p style="margin:6px 0 0;font-size:12px;color:#9ca3c7;">
Support timing: 11:00 AM – 11:00 PM (PKT)
</p>
</div>
</div>
<!-- Bottom strip -->
<div style="max-width:1150px;margin:16px auto 0;border-top:1px solid #1e2640;padding-top:10px;text-align:center;">
<p style="margin:0;font-size:11px;color:#9ca3c7;">
© 2025 HQ Rental Panel — All Rights Reserved.
</p>
</div>
</footer>Footer
<footer style="width:100%;background:#f7f9fc;padding:30px 15px;text-align:center;font-family:Arial,Helvetica,sans-serif;color:#333;border-top:1px solid #e1e4eb;">
<div style="max-width:1100px;margin:auto;">
<h3 style="margin:0;font-size:22px;color:#0f1324;font-weight:700;">
WebSite Name</h3>
<p style="margin:8px 0 0;font-size:14px;line-height:1.6;color:#535b75;">
Fast, Secure & Reliable SMM Services For Agencies and Resellers.
</p>
<!-- Links -->
<div style="margin-top:15px;display:flex;justify-content:center;gap:18px;flex-wrap:wrap;">
<a href="/terms" style="color:#0f57c9;font-size:14px;text-decoration:none;">Terms & Conditions</a>
<a href="/cookie-policy" style="color:#0f57c9;font-size:14px;text-decoration:none;">Privacy Policy</a>
<a href="/faq" style="color:#0f57c9;font-size:14px;text-decoration:none;">FAQs</a>
<a href="/contact_us" style="color:#0f57c9;font-size:14px;text-decoration:none;">Contact Us</a>
</div>
<!-- Contact -->
<p style="margin:15px 0 0;font-size:14px;color:#333;">
WhatsApp: <b style="color:#0f1324;">+92 339 0000000</b>
</p>
<!-- Copyright -->
<p style="margin:15px 0 0;font-size:12px;color:#777;">
© 2025 Your Website Name — All Rights Reserved.
</p>
</div>
</footer>
Platforms Cards
ALL
Instagram
Facebook
YouTube
TikTok
Twitter
Spotify
Telegram
LinkedIn
Twitch
<div class="platform-cards" style="display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:20px auto;max-width:1100px;">
<div id="all" class="platform-card" data-all="1" data-keywords="all" style="display:flex;align-items:center;justify-content:center;gap:8px;
width:150px;height:50px;border-radius:12px;
background:#ffffff;border:1px solid #ddd;
box-shadow:0 1px 4px rgba(0,0,0,0.08);
cursor:pointer;font-weight:600;color:#333;
transition:all .2s ease;text-align:center;">
<i class="fas fa-bars" style="font-size:17px;color:#555;"></i> ALL
</div>
<div id="instagram" class="platform-card" data-keywords="instagram, insta, ig" style="display:flex;align-items:center;justify-content:center;gap:8px;
width:150px;height:50px;border-radius:12px;
background:#fff;border:1px solid #f5b6c3;
box-shadow:0 1px 4px rgba(228,64,95,.15);
cursor:pointer;font-weight:600;color:#E4405F;
transition:all .2s ease;text-align:center;">
<i class="fab fa-instagram" style="font-size:18px;color:#E4405F;"></i> Instagram
</div>
<div id="facebook" class="platform-card" data-keywords="facebook, fb" style="display:flex;align-items:center;justify-content:center;gap:8px;
width:150px;height:50px;border-radius:12px;
background:#fff;border:1px solid #bcd6ff;
box-shadow:0 1px 4px rgba(24,119,242,.15);
cursor:pointer;font-weight:600;color:#1877F2;
transition:all .2s ease;text-align:center;">
<i class="fab fa-facebook" style="font-size:18px;color:#1877F2;"></i> Facebook
</div>
<div id="youtube" class="platform-card" data-keywords="youtube, yt" style="display:flex;align-items:center;justify-content:center;gap:8px;
width:150px;height:50px;border-radius:12px;
background:#fff;border:1px solid #ffcaca;
box-shadow:0 1px 4px rgba(255,0,0,.15);
cursor:pointer;font-weight:600;color:#FF0000;
transition:all .2s ease;text-align:center;">
<i class="fab fa-youtube" style="font-size:18px;color:#FF0000;"></i> YouTube
</div>
<div id="tiktok" class="platform-card" data-keywords="tiktok, tt" style="display:flex;align-items:center;justify-content:center;gap:8px;
width:150px;height:50px;border-radius:12px;
background:#fff;border:1px solid #ccc;
box-shadow:0 1px 4px rgba(0,0,0,.12);
cursor:pointer;font-weight:600;color:#000;
transition:all .2s ease;text-align:center;">
<i class="fab fa-tiktok" style="font-size:18px;color:#000;"></i> TikTok
</div>
<div id="twitter" class="platform-card" data-keywords="twitter, x, tweet" style="display:flex;align-items:center;justify-content:center;gap:8px;
width:150px;height:50px;border-radius:12px;
background:#fff;border:1px solid #c8e6ff;
box-shadow:0 1px 4px rgba(29,161,242,.15);
cursor:pointer;font-weight:600;color:#1DA1F2;
transition:all .2s ease;text-align:center;">
<i class="fab fa-twitter" style="font-size:18px;color:#1DA1F2;"></i> Twitter
</div>
<div id="spotify" class="platform-card" data-keywords="spotify" style="display:flex;align-items:center;justify-content:center;gap:8px;
width:150px;height:50px;border-radius:12px;
background:#fff;border:1px solid #b4edcb;
box-shadow:0 1px 4px rgba(29,185,84,.15);
cursor:pointer;font-weight:600;color:#1DB954;
transition:all .2s ease;text-align:center;">
<i class="fab fa-spotify" style="font-size:18px;color:#1DB954;"></i> Spotify
</div>
<div id="telegram" class="platform-card" data-keywords="telegram" style="display:flex;align-items:center;justify-content:center;gap:8px;
width:150px;height:50px;border-radius:12px;
background:#fff;border:1px solid #b3e1fa;
box-shadow:0 1px 4px rgba(0,136,204,.15);
cursor:pointer;font-weight:600;color:#0088cc;
transition:all .2s ease;text-align:center;">
<i class="fab fa-telegram" style="font-size:18px;color:#0088cc;"></i> Telegram
</div>
<div id="linkedin" class="platform-card" data-keywords="linkedin" style="display:flex;align-items:center;justify-content:center;gap:8px;
width:150px;height:50px;border-radius:12px;
background:#fff;border:1px solid #c6daf9;
box-shadow:0 1px 4px rgba(10,102,194,.15);
cursor:pointer;font-weight:600;color:#0A66C2;
transition:all .2s ease;text-align:center;">
<i class="fab fa-linkedin" style="font-size:18px;color:#0A66C2;"></i> LinkedIn
</div>
<div id="twitch" class="platform-card" data-keywords="twitch" style="display:flex;align-items:center;justify-content:center;gap:8px;
width:150px;height:50px;border-radius:12px;
background:#fff;border:1px solid #e0ccff;
box-shadow:0 1px 4px rgba(145,70,255,.15);
cursor:pointer;font-weight:600;color:#9146FF;
transition:all .2s ease;text-align:center;">
<i class="fab fa-twitch" style="font-size:18px;color:#9146FF;"></i> Twitch
</div>
</div>New Order Page Platforms
ALL
Instagram
Facebook
YouTube
TikTok
Twitter
Spotify
Telegram
LinkedIn
Twitch
<div class="platform-cards">
<div id="all" class="platform-card" data-all="1" data-keywords="all"><i class="fas fa-bars"></i> ALL</div>
<div id="instagram" class="platform-card" data-keywords="instagram, insta, ig">
<i class="fab fa-instagram"></i> Instagram
</div>
<div id="facebook" class="platform-card" data-keywords="facebook, fb">
<i class="fab fa-facebook"></i> Facebook
</div>
<div id="youtube" class="platform-card" data-keywords="youtube, yt">
<i class="fab fa-youtube"></i> YouTube
</div>
<div id="tiktok" class="platform-card" data-keywords="tiktok, tt,">
<i class="fab fa-tiktok"></i> TikTok
</div>
<div id="twitter" class="platform-card" data-keywords="twitter, x, tweet">
<i class="fab fa-twitter"></i> Twitter
</div>
<div id="spotify" class="platform-card" data-keywords="spotify">
<i class="fab fa-spotify"></i> Spotify
</div>
<div id="telegram" class="platform-card" data-keywords="telegram">
<i class="fab fa-telegram"></i> Telegram
</div>
<div id="linkedin" class="platform-card" data-keywords="linkedin">
<i class="fab fa-linkedin"></i> LinkedIn
</div>
<div id="twitch" class="platform-card" data-keywords="twitch">
<i class="fab fa-twitch"></i> Twitch</div>
</div>Landing Page
<!-- ==== LONG LANDING SECTION (Inline CSS Only, English) ==== -->
<section style="max-width:1120px;margin:24px auto;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;background:#ffffff;box-shadow:0 14px 40px rgba(0,0,0,.08);">
<!-- Top Accent -->
<div style="height:6px;background:linear-gradient(90deg,#22c55e,#4f46e5,#06b6d4,#f97316);"></div>
<!-- HERO -->
<div style="padding:30px 28px;background:linear-gradient(135deg,#f8fafc,#eef2ff);display:flex;flex-wrap:wrap;gap:18px;align-items:center;">
<div style="flex:1 1 480px;">
<div style="display:inline-block;padding:6px 10px;border:1px solid #dbeafe;background:#ffffff;border-radius:18px;font-size:12.5px;color:#1e40af;margin-bottom:10px;">
⭐ Trusted by 3,000+ Creators & Agencies
</div>
<h1 style="margin:0 0 10px;font-size:30px;line-height:1.25;color:#0f172a;">
SITE_NAME — Give your social presence a real <span style="color:#4f46e5;">Boost</span>
</h1>
<p style="margin:0 0 16px;font-size:15px;line-height:1.8;color:#334155;">
Place orders in real time, get instant tracking, and grow your brand across every platform.
Simple workflow, secure payments, and reliable delivery — all inside one clean dashboard.
</p>
<div style="display:flex;gap:10px;flex-wrap:wrap;">
<a href="/new_order" style="text-decoration:none;background:#4f46e5;color:#fff;border:1px solid #4338ca;padding:12px 18px;border-radius:12px;font-weight:700;font-size:14px;box-shadow:0 10px 22px rgba(79,70,229,.28);">+ Place New Order</a>
<a href="/signup" style="text-decoration:none;background:#ffffff;color:#0f172a;border:1px solid #e5e7eb;padding:12px 18px;border-radius:12px;font-weight:700;font-size:14px;box-shadow:0 8px 18px rgba(0,0,0,.06);">Create Free Account</a>
</div>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;">
<span style="font-size:12.5px;color:#475569;">✅ No hidden fees</span>
<span style="font-size:12.5px;color:#475569;">⚡ Average start ~2–5 min</span>
<span style="font-size:12.5px;color:#475569;">🔒 PCI-ready gateways</span>
</div>
</div>
<div style="flex:1 1 340px;">
<div style="border:1px solid #e5e7eb;background:#fff;border-radius:14px;padding:16px;box-shadow:0 8px 20px rgba(0,0,0,.06);">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;">
<div style="width:44px;height:44px;border-radius:10px;border:1px solid #eaeaea;display:flex;align-items:center;justify-content:center;background:#f9fafb;font-size:22px;">📊</div>
<div>
<div style="font-weight:700;color:#0f172a;">Today’s Snapshot</div>
<div style="font-size:12.5px;color:#64748b;">Quick performance glance</div>
</div>
</div>
<div style="display:flex;gap:10px;flex-wrap:wrap;">
<div style="flex:1 1 120px;border:1px solid #e5e7eb;border-radius:10px;padding:10px;background:#f8fafc;">
<div style="font-size:12px;color:#64748b;">Orders Today</div>
<div style="font-weight:800;font-size:18px;color:#111827;">342</div>
</div>
<div style="flex:1 1 120px;border:1px solid #e5e7eb;border-radius:10px;padding:10px;background:#f8fafc;">
<div style="font-size:12px;color:#64748b;">Avg. Start</div>
<div style="font-weight:800;font-size:18px;color:#111827;">~3 min</div>
</div>
<div style="flex:1 1 120px;border:1px solid #e5e7eb;border-radius:10px;padding:10px;background:#f8fafc;">
<div style="font-size:12px;color:#64748b;">Success</div>
<div style="font-weight:800;font-size:18px;color:#111827;">99.1%</div>
</div>
</div>
<div style="margin-top:10px;font-size:12.5px;color:#475569;">Note: Values are demo — you can print live numbers from your panel.</div>
</div>
</div>
</div>
<!-- VALUE STRIP -->
<div style="padding:10px 28px;border-top:1px dashed #e5e7eb;background:#fcfcfc;">
<div style="display:flex;flex-wrap:wrap;gap:8px;align-items:center;">
<span style="font-size:12.5px;color:#64748b;">Works with:</span>
<span style="font-size:12.5px;color:#111827;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;">Instagram</span>
<span style="font-size:12.5px;color:#111827;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;">YouTube</span>
<span style="font-size:12.5px;color:#111827;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;">TikTok</span>
<span style="font-size:12.5px;color:#111827;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;">Facebook</span>
<span style="font-size:12.5px;color:#111827;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;">Telegram</span>
<span style="font-size:12.5px;color:#111827;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;">Spotify</span>
</div>
</div>
<!-- FEATURE GRID (6 cards) -->
<div style="padding:20px 28px;">
<h2 style="margin:0 0 8px;font-size:20px;color:#0f172a;">Why choose SITE_NAME?</h2>
<p style="margin:0 0 14px;font-size:14px;color:#334155;">A balanced focus on Speed, Stability, and Security:</p>
<div style="display:flex;flex-wrap:wrap;gap:12px;">
<div style="flex:1 1 220px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-size:22px;">⚡</div>
<div style="font-weight:700;margin-top:6px;color:#111827;">Fast Start</div>
<div style="font-size:13px;color:#374151;margin-top:6px;">Optimized queues — most orders start within 2–5 minutes.</div>
</div>
<div style="flex:1 1 220px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-size:22px;">🛡️</div>
<div style="font-weight:700;margin-top:6px;color:#111827;">Secure Payments</div>
<div style="font-size:13px;color:#374151;margin-top:6px;">Multiple gateways, anti-fraud checks, and instant confirmations.</div>
</div>
<div style="flex:1 1 220px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-size:22px;">📈</div>
<div style="font-weight:700;margin-top:6px;color:#111827;">Real-time Tracking</div>
<div style="font-size:13px;color:#374151;margin-top:6px;">Statuses: processing, completed, partial, canceled.</div>
</div>
<div style="flex:1 1 220px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-size:22px;">🤝</div>
<div style="font-weight:700;margin-top:6px;color:#111827;">Human Support</div>
<div style="font-size:13px;color:#374151;margin-top:6px;">24/7 responsive team with clear, friendly answers.</div>
</div>
<div style="flex:1 1 220px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-size:22px;">🔁</div>
<div style="font-weight:700;margin-top:6px;color:#111827;">Drop Protection</div>
<div style="font-size:13px;color:#374151;margin-top:6px;">Refill/partial policies on selected services.</div>
</div>
<div style="flex:1 1 220px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-size:22px;">🧠</div>
<div style="font-weight:700;margin-top:6px;color:#111827;">Smart Filters</div>
<div style="font-size:13px;color:#374151;margin-top:6px;">Powerful search and sorting for pro users.</div>
</div>
</div>
</div>
<!-- COMPARISON BAR -->
<div style="padding:12px 28px;border-top:1px dashed #e5e7eb;background:#fafafa;">
<div style="display:flex;flex-wrap:wrap;gap:12px;">
<div style="flex:1 1 320px;border:1px solid #e5e7eb;background:#ffffff;border-radius:12px;padding:14px;">
<div style="font-weight:800;color:#0f172a;">SITE_NAME vs Others</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">Transparent pricing, live status, and 24/7 support — our core strengths.</div>
</div>
<div style="flex:1 1 320px;border:1px solid #e5e7eb;background:#ffffff;border-radius:12px;padding:14px;">
<div style="font-weight:800;color:#0f172a;">Agency-Ready</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">Bulk ordering and CSV workflows kept smooth and predictable.</div>
</div>
<div style="flex:1 1 320px;border:1px solid #e5e7eb;background:#ffffff;border-radius:12px;padding:14px;">
<div style="font-weight:800;color:#0f172a;">Creator-Friendly</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">Single link, clear ETAs, fast help on drops or issues.</div>
</div>
</div>
</div>
<!-- 4-STEP HOW IT WORKS -->
<div style="padding:18px 28px;">
<h2 style="margin:0 0 8px;font-size:20px;color:#0f172a;">How it works (4 steps)</h2>
<div style="display:flex;flex-wrap:wrap;gap:12px;">
<div style="flex:1 1 240px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:14px;"><div style="font-weight:800;color:#4f46e5;">1) Sign Up</div><div style="font-size:13.5px;color:#374151;margin-top:6px;">Create your account and open the dashboard.</div></div>
<div style="flex:1 1 240px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:14px;"><div style="font-weight:800;color:#06b6d4;">2) Fund Wallet</div><div style="font-size:13.5px;color:#374151;margin-top:6px;">Add balance via secure payment gateways.</div></div>
<div style="flex:1 1 240px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:14px;"><div style="font-weight:800;color:#22c55e;">3) Place Order</div><div style="font-size:13.5px;color:#374151;margin-top:6px;">Pick a service, provide the correct link/username, set quantity.</div></div>
<div style="flex:1 1 240px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:14px;"><div style="font-weight:800;color:#f59e0b;">4) Track Results</div><div style="font-size:13.5px;color:#374151;margin-top:6px;">Monitor live status and verify final delivery.</div></div>
</div>
</div>
<!-- TESTIMONIALS -->
<div style="padding:18px 28px;border-top:1px dashed #e5e7eb;background:#ffffff;">
<h2 style="margin:0 0 8px;font-size:20px;color:#0f172a;">What users say</h2>
<div style="display:flex;flex-wrap:wrap;gap:12px;">
<div style="flex:1 1 360px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-weight:700;color:#111827;">“Speed and stability — both delivered.”</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">“Our agency works on tight deadlines. Orders on SITE_NAME started on time and the reporting was clear.”</div>
<div style="margin-top:8px;font-size:12px;color:#64748b;">— Zara, Agency Lead</div>
</div>
<div style="flex:1 1 360px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-weight:700;color:#111827;">“Support really helped.”</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">“One order went partial — the team guided instantly and processed the refund. Professional experience.”</div>
<div style="margin-top:8px;font-size:12px;color:#64748b;">— Hamza, Creator</div>
</div>
</div>
</div>
<!-- PRICING TEASER -->
<div style="padding:16px 28px;border-top:1px dashed #e5e7eb;background:#fafafa;">
<div style="display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;">
<div>
<div style="font-weight:800;color:#0f172a;font-size:18px;">Simple Pricing, Real Value</div>
<div style="font-size:13.5px;color:#475569;margin-top:4px;">Extra discounts on bulk orders — transparent fees, no surprises.</div>
</div>
<div style="display:flex;gap:10px;flex-wrap:wrap;">
<a href="/services" style="text-decoration:none;background:#4f46e5;color:#fff;border:1px solid #4338ca;padding:10px 16px;border-radius:10px;font-weight:700;font-size:13.5px;box-shadow:0 8px 18px rgba(79,70,229,.25);">View Services</a>
<a href="/signup" style="text-decoration:none;background:#ffffff;color:#0f172a;border:1px solid #e5e7eb;padding:10px 16px;border-radius:10px;font-weight:700;font-size:13.5px;box-shadow:0 6px 14px rgba(0,0,0,.06);">Get Started</a>
</div>
</div>
</div>
<!-- GUARANTEES / NOTES -->
<div style="padding:18px 28px;">
<h2 style="margin:0 0 8px;font-size:20px;color:#0f172a;">Our Commitments</h2>
<ul style="margin:0;padding-left:18px;font-size:13.5px;color:#374151;line-height:1.8;">
<li>🔒 Data privacy first — keep your API keys secure, never share publicly.</li>
<li>⏱️ ETAs are estimates and may vary with live load — we share proactive updates.</li>
<li>🧾 Transparent billing — wallet history & invoices always available.</li>
</ul>
</div>
<!-- FAQ -->
<div style="padding:18px 28px;border-top:1px dashed #e5e7eb;background:#fcfcfc;">
<h2 style="margin:0 0 8px;font-size:20px;color:#0f172a;">FAQ — Frequently Asked Questions</h2>
<div style="display:flex;flex-wrap:wrap;gap:12px;">
<div style="flex:1 1 340px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;">
<div style="font-weight:700;color:#111827;">Do you support private profiles?</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">No. Make sure the profile is public and the link/username is correct, otherwise orders may cancel or go partial.</div>
</div>
<div style="flex:1 1 340px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;">
<div style="font-weight:700;color:#111827;">When do refunds/partials apply?</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">If an order cannot be delivered or a service fails, partial/full adjustments apply according to status.</div>
</div>
<div style="flex:1 1 340px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;">
<div style="font-weight:700;color:#111827;">How do bulk orders work?</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">Use CSV flows, avoid duplicates; overlapping links may cause delays or drops. Our support can guide you.</div>
</div>
</div>
<div style="text-align:center;margin-top:14px;">
<a href="/support" style="text-decoration:none;background:#fff;color:#0f172a;border:1px solid #e5e7eb;padding:10px 16px;border-radius:10px;font-weight:700;font-size:13.5px;box-shadow:0 6px 14px rgba(0,0,0,.06);">Need more help? Contact Support</a>
</div>
</div>
<!-- FOOTER NOTE -->
<div style="padding:10px 16px 14px;border-top:1px dashed #e5e7eb;background:#ffffff;text-align:center;font-size:12.5px;color:#6b7280;">
“Small, consistent steps create big results. Keep scaling with SITE_NAME 🌱”
</div>
</section>Landing Page
<!-- ==== HERO + FEATURES + STEPS + TRUST + TESTIMONIALS + PRICING TEASER + FAQ (Inline CSS Only) ==== -->
<section style="max-width:1100px;margin:22px auto;border:1px solid #e5e7eb;border-radius:18px;overflow:hidden;background:#ffffff;box-shadow:0 12px 34px rgba(0,0,0,.08);">
<!-- top strip -->
<div style="height:6px;background:linear-gradient(90deg,#4f46e5,#06b6d4,#22c55e,#f59e0b);"></div>
<!-- HERO -->
<div style="padding:28px 26px;background:linear-gradient(135deg,#f8fafc,#eef2ff);display:flex;flex-wrap:wrap;gap:18px;align-items:center;">
<div style="flex:1 1 420px;">
<div style="display:inline-block;padding:6px 10px;border:1px solid #dbeafe;background:#ffffff;border-radius:20px;font-size:12.5px;color:#1e40af;margin-bottom:10px;">
🚀 New: Fast Delivery Engine Enabled
</div>
<h1 style="margin:0 0 10px;font-size:28px;line-height:1.25;color:#0f172a;">
SITE_NAME — Apni Social Growth ko <span style="color:#4f46e5;">Turbo</span> do!
</h1>
<p style="margin:0 0 16px;font-size:15px;line-height:1.8;color:#334155;">
Yahan se <strong>real-time</strong> me orders lagao, instant tracking pao, aur apne brand ko har platform par boost karo.
Simple process, secure payments, aur reliable delivery — sab kuch ek hi dashboard me.
</p>
<div style="display:flex;gap:10px;flex-wrap:wrap;">
<a href="/new_order" style="text-decoration:none;background:#4f46e5;color:#fff;border:1px solid #4338ca;padding:12px 18px;border-radius:12px;font-weight:700;font-size:14px;box-shadow:0 10px 22px rgba(79,70,229,.28);">
+ Place New Order
</a>
<a href="/services" style="text-decoration:none;background:#ffffff;color:#0f172a;border:1px solid #e5e7eb;padding:12px 18px;border-radius:12px;font-weight:700;font-size:14px;box-shadow:0 8px 18px rgba(0,0,0,.06);">
Browse Services
</a>
</div>
<div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;">
<span style="font-size:12.5px;color:#475569;">✅ 24/7 Support</span>
<span style="font-size:12.5px;color:#475569;">⚡ Fast Start</span>
<span style="font-size:12.5px;color:#475569;">🔒 Secure Payments</span>
</div>
</div>
<div style="flex:1 1 320px;">
<div style="border:1px solid #e5e7eb;background:#fff;border-radius:14px;padding:16px;box-shadow:0 8px 20px rgba(0,0,0,.06);">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:8px;">
<div style="width:44px;height:44px;border-radius:10px;border:1px solid #eaeaea;display:flex;align-items:center;justify-content:center;background:#f9fafb;font-size:22px;">📈</div>
<div>
<div style="font-weight:700;color:#0f172a;">Live Snapshot</div>
<div style="font-size:12.5px;color:#64748b;">Aaj ka quick overview</div>
</div>
</div>
<div style="display:flex;gap:10px;flex-wrap:wrap;">
<div style="flex:1 1 120px;border:1px solid #e5e7eb;border-radius:10px;padding:10px;background:#f8fafc;">
<div style="font-size:12px;color:#64748b;">Active Orders</div>
<div style="font-weight:800;font-size:18px;color:#111827;">128</div>
</div>
<div style="flex:1 1 120px;border:1px solid #e5e7eb;border-radius:10px;padding:10px;background:#f8fafc;">
<div style="font-size:12px;color:#64748b;">Avg. Start</div>
<div style="font-weight:800;font-size:18px;color:#111827;">~2 min</div>
</div>
<div style="flex:1 1 120px;border:1px solid #e5e7eb;border-radius:10px;padding:10px;background:#f8fafc;">
<div style="font-size:12px;color:#64748b;">Success Rate</div>
<div style="font-weight:800;font-size:18px;color:#111827;">99.2%</div>
</div>
</div>
<div style="margin-top:10px;font-size:12.5px;color:#475569;">Note: Snapshot demo values hain — apke panel se auto update ho sakte hain.</div>
</div>
</div>
</div>
<!-- FEATURES GRID -->
<div style="padding:18px 26px;">
<h2 style="margin:0 0 8px;font-size:20px;color:#0f172a;">Kyun choose karein SITE_NAME?</h2>
<p style="margin:0 0 14px;font-size:14px;color:#334155;">Hamari core features jo aapko consistent growth deti hain:</p>
<div style="display:flex;flex-wrap:wrap;gap:12px;">
<div style="flex:1 1 220px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-size:22px;">⚡</div>
<div style="font-weight:700;margin-top:6px;color:#111827;">Tez Start & Stable Delivery</div>
<div style="font-size:13px;color:#374151;margin-top:6px;">Queues optimized — orders jaldi initiate aur consistently deliver hote.</div>
</div>
<div style="flex:1 1 220px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-size:22px;">🛡️</div>
<div style="font-weight:700;margin-top:6px;color:#111827;">Secure Payments</div>
<div style="font-size:13px;color:#374151;margin-top:6px;">Multiple gateways, anti-fraud checks, aur instant confirmations.</div>
</div>
<div style="flex:1 1 220px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-size:22px;">📊</div>
<div style="font-weight:700;margin-top:6px;color:#111827;">Real-time Tracking</div>
<div style="font-size:13px;color:#374151;margin-top:6px;">Har order ka live status — processing, completed, partial, canceled.</div>
</div>
<div style="flex:1 1 220px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-size:22px;">🤝</div>
<div style="font-weight:700;margin-top:6px;color:#111827;">Reliable Support</div>
<div style="font-size:13px;color:#374151;margin-top:6px;">24/7 responsive team — quick answers, clear solutions.</div>
</div>
</div>
</div>
<!-- 3 STEPS -->
<div style="padding:4px 26px 20px;">
<h2 style="margin:0 0 8px;font-size:20px;color:#0f172a;">Shuru kaise karein? (3 Simple Steps)</h2>
<div style="display:flex;flex-wrap:wrap;gap:12px;">
<div style="flex:1 1 260px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:14px;">
<div style="font-weight:800;color:#4f46e5;">1) Sign Up / Login</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">Account banayein ya login karein. Dashboard se services explore karen.</div>
</div>
<div style="flex:1 1 260px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:14px;">
<div style="font-weight:800;color:#06b6d4;">2) Service Choose + Order</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">Sahi link/username dalein, quantity set karein, aur order place karein.</div>
</div>
<div style="flex:1 1 260px;background:#f9fafb;border:1px solid #e5e7eb;border-radius:12px;padding:14px;">
<div style="font-weight:800;color:#22c55e;">3) Track & Grow</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">Live status dekhein, results verify karein, aur apni growth ko scale karein.</div>
</div>
</div>
</div>
<!-- TRUST BADGES -->
<div style="padding:12px 26px;border-top:1px dashed #e5e7eb;background:#fcfcfc;">
<div style="display:flex;flex-wrap:wrap;gap:10px;align-items:center;">
<span style="font-size:12.5px;color:#64748b;">Trusted by:</span>
<span style="font-size:12.5px;color:#111827;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;">E-commerce Brands</span>
<span style="font-size:12.5px;color:#111827;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;">Agencies</span>
<span style="font-size:12.5px;color:#111827;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;">Creators</span>
<span style="font-size:12.5px;color:#111827;background:#ffffff;border:1px solid #e5e7eb;border-radius:8px;padding:6px 10px;">Startups</span>
</div>
</div>
<!-- TESTIMONIALS -->
<div style="padding:18px 26px;">
<h2 style="margin:0 0 8px;font-size:20px;color:#0f172a;">Users kya kehte hain?</h2>
<div style="display:flex;flex-wrap:wrap;gap:12px;">
<div style="flex:1 1 300px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-weight:700;color:#111827;">“Delivery bohat fast thi!”</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">“Maine IG followers order kiye the — 2 minute me start, aur smooth complete. Recommended!”</div>
<div style="margin-top:8px;font-size:12px;color:#64748b;">— Ali, Creator</div>
</div>
<div style="flex:1 1 300px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-weight:700;color:#111827;">“Support ne dil jeet liya”</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">“Ek query thi order status pe — reply instant aur clear. Service level top!”</div>
<div style="margin-top:8px;font-size:12px;color:#64748b;">— Sana, Agency</div>
</div>
<div style="flex:1 1 300px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;box-shadow:0 6px 16px rgba(0,0,0,.04);">
<div style="font-weight:700;color:#111827;">“Dashboard bohat asaan”</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">“Search, filter, tracking — sab simple. Hamari team ne turant adopt kar liya.”</div>
<div style="margin-top:8px;font-size:12px;color:#64748b;">— Rehan, E-com</div>
</div>
</div>
</div>
<!-- PRICING TEASER / CTA -->
<div style="padding:16px 26px;border-top:1px dashed #e5e7eb;background:#fafafa;">
<div style="display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;">
<div>
<div style="font-weight:800;color:#0f172a;font-size:18px;">Simple Pricing, Powerful Results</div>
<div style="font-size:13.5px;color:#475569;margin-top:4px;">Best rates, transparent fees — bulk orders par extra discount.</div>
</div>
<div style="display:flex;gap:10px;flex-wrap:wrap;">
<a href="/services" style="text-decoration:none;background:#4f46e5;color:#fff;border:1px solid #4338ca;padding:10px 16px;border-radius:10px;font-weight:700;font-size:13.5px;box-shadow:0 8px 18px rgba(79,70,229,.25);">View Services</a>
<a href="/signup" style="text-decoration:none;background:#ffffff;color:#0f172a;border:1px solid #e5e7eb;padding:10px 16px;border-radius:10px;font-weight:700;font-size:13.5px;box-shadow:0 6px 14px rgba(0,0,0,.06);">Create Account</a>
</div>
</div>
</div>
<!-- FAQ (Static, no JS) -->
<div style="padding:18px 26px;">
<h2 style="margin:0 0 8px;font-size:20px;color:#0f172a;">FAQ — Aksar poochay gaye sawaal</h2>
<div style="display:flex;flex-wrap:wrap;gap:12px;">
<div style="flex:1 1 320px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;">
<div style="font-weight:700;color:#111827;">Order kitni der me start hota hai?</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">Aksar services 1-5 minutes me start. Kabhi kabhi heavy load par thoda time lag sakta hai.</div>
</div>
<div style="flex:1 1 320px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;">
<div style="font-weight:700;color:#111827;">Refund policy kya hai?</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">Agar order deliver nahi hota ya service fail hoti hai to partial/full refund apply hota hai, as per status.</div>
</div>
<div style="flex:1 1 320px;border:1px solid #e5e7eb;border-radius:12px;padding:14px;background:#ffffff;">
<div style="font-weight:700;color:#111827;">Private accounts par kaam hota?</div>
<div style="font-size:13.5px;color:#374151;margin-top:6px;">Nahi. Link/username sahi ho aur profile public ho — warna order cancel/partial ho sakta.</div>
</div>
</div>
<div style="text-align:center;margin-top:14px;">
<a href="/support" style="text-decoration:none;background:#fff;color:#0f172a;border:1px solid #e5e7eb;padding:10px 16px;border-radius:10px;font-weight:700;font-size:13.5px;box-shadow:0 6px 14px rgba(0,0,0,.06);">Need more help? Contact Support</a>
</div>
</div>
<!-- footer note -->
<div style="padding:10px 16px 14px;border-top:1px dashed #e5e7eb;background:#fcfcfc;text-align:center;font-size:12.5px;color:#6b7280;">
“Consistency se growth aati hai — chhote steps, bada impact. Keep scaling! 🌱”
</div>
</section>Services
🛍️
Explore Our Services
Choose from hundreds of reliable, high-quality SMM services to grow your presence on every platform. Each service is tested for speed, stability, and real-time delivery.
- ⚡ Fast delivery – orders start automatically
- 📱 Supports all major platforms: Instagram, TikTok, YouTube & more
- 💬 Transparent pricing and instant order tracking
Tip: Use the search bar above to quickly find the exact service you need.
<!-- Services Page Header / Info Section -->
<div style="
max-width:960px;
margin:20px auto;
background:linear-gradient(135deg,#f0f9ff,#e0f2fe);
border:1px solid #bae6fd;
border-radius:16px;
padding:22px 24px;
box-shadow:0 8px 25px rgba(0,0,0,.06);
">
<div style="display:flex;align-items:flex-start;gap:14px;">
<div style="
flex:0 0 auto;
width:52px;height:52px;
display:flex;align-items:center;justify-content:center;
background:#ffffff;
border:1px solid #dbeafe;
border-radius:12px;
font-size:24px;
box-shadow:0 4px 10px rgba(0,0,0,.06);
">🛍️</div>
<div style="flex:1;">
<h2 style="margin:0 0 6px;font-size:20px;color:#0f172a;">Explore Our Services</h2>
<p style="margin:0 0 10px;font-size:14.5px;line-height:1.7;color:#1e3a8a;">
Choose from hundreds of reliable, high-quality SMM services to grow your presence on every platform.
Each service is tested for speed, stability, and real-time delivery.
</p>
<ul style="margin:0;padding-left:18px;font-size:13.5px;color:#334155;line-height:1.8;">
<li>⚡ Fast delivery – orders start automatically</li>
<li>📱 Supports all major platforms: Instagram, TikTok, YouTube & more</li>
<li>💬 Transparent pricing and instant order tracking</li>
</ul>
<p style="margin:14px 0 0;font-size:13.5px;color:#475569;">
Tip: Use the <strong>search bar</strong> above to quickly find the exact service you need.
</p>
</div>
</div>
</div>Signup
👋
Welcome to HQ SMM Provider!
Create your free account to explore thousands of high-quality social media services. Get faster orders, secure payments, and real-time order tracking — all in one dashboard.
- ⚡ Instant order processing system
- 💰 Multiple payment options available
- 📊 Smart dashboard to manage all orders easily
Already have an account? Login here
<!-- Signup Page Welcome Note (Inline CSS Only) -->
<div style="
max-width:900px;
margin:20px auto;
background:linear-gradient(135deg,#eef2ff,#f0fdfa);
border:1px solid #e5e7eb;
border-radius:16px;
padding:22px 24px;
box-shadow:0 8px 25px rgba(0,0,0,.06);
">
<div style="display:flex;align-items:flex-start;gap:14px;">
<div style="
flex:0 0 auto;
width:50px;height:50px;
display:flex;align-items:center;justify-content:center;
background:#fff;
border:1px solid #e5e7eb;
border-radius:12px;
font-size:24px;
box-shadow:0 4px 10px rgba(0,0,0,.05);
">👋</div>
<div style="flex:1;">
<h2 style="margin:0 0 6px;font-size:20px;color:#111827;">Welcome to HQ SMM Provider!</h2>
<p style="margin:0 0 10px;font-size:14.5px;line-height:1.7;color:#374151;">
Create your free account to explore thousands of high-quality social media services.
Get faster orders, secure payments, and real-time order tracking — all in one dashboard.
</p>
<ul style="margin:0;padding-left:18px;font-size:13.5px;color:#374151;line-height:1.8;">
<li>⚡ Instant order processing system</li>
<li>💰 Multiple payment options available</li>
<li>📊 Smart dashboard to manage all orders easily</li>
</ul>
<p style="margin:14px 0 0;font-size:13.5px;color:#6b7280;">
Already have an account? <a href="/login" style="color:#2563eb;text-decoration:none;font-weight:600;">Login here</a>
</p>
</div>
</div>
</div>API
🔐
Welcome, API Users!
This API gives you full control to place and manage orders directly from your own software or website. Please keep your API key confidential and avoid sharing it publicly. Misuse or overuse may lead to temporary suspension of access.
✅ Use secure HTTPS calls | ⚙️ Follow correct endpoints | 🧠 Respect rate limits
<!-- API Users Info Note -->
<div style="
margin:18px auto;max-width:900px;
background:linear-gradient(135deg,#f0f9ff,#e0f2fe);
border:1px solid #bae6fd;
border-radius:14px;
padding:18px 20px;
box-shadow:0 6px 20px rgba(0,0,0,.05);
">
<div style="display:flex;align-items:center;gap:12px;">
<div style="
flex:0 0 auto;
width:46px;height:46px;
display:flex;align-items:center;justify-content:center;
background:#ffffff;
border:1px solid #dbeafe;
border-radius:10px;
font-size:22px;
">🔐</div>
<div style="flex:1;">
<h2 style="margin:0;font-size:18px;color:#0f172a;">Welcome, API Users!</h2>
<p style="margin:6px 0 0;font-size:14px;color:#1e3a8a;line-height:1.7;">
This API gives you full control to place and manage orders directly from your own software or website.
Please keep your <strong>API key confidential</strong> and avoid sharing it publicly.
Misuse or overuse may lead to <strong>temporary suspension</strong> of access.
</p>
<p style="margin:10px 0 0;font-size:13.5px;color:#334155;">
✅ Use secure HTTPS calls | ⚙️ Follow correct endpoints | 🧠 Respect rate limits
</p>
</div>
</div>
</div>Orders Note
📋
Your Order History
Here you can track every order you've placed — see their progress, current status, and final results in real time. Stay updated with live order tracking and detailed delivery reports.
- ✅ “In Progress” means your order is being processed.
- 💬 “Completed” shows successful delivery.
- ⚠️ “Partial” means order was partly delivered and refund adjusted.
- ❌ “Canceled” shows failed or refunded orders.
Tip: You can filter orders by service, status, or date for quick access.
<!-- Order History Note (Inline CSS Only) -->
<div style="
margin:18px auto;max-width:960px;
background:linear-gradient(135deg,#f9fafb,#eef2ff);
border:1px solid #e5e7eb;
border-radius:14px;
padding:18px 20px;
box-shadow:0 6px 20px rgba(0,0,0,.05);
">
<div style="display:flex;align-items:flex-start;gap:14px;">
<div style="
flex:0 0 auto;width:46px;height:46px;
display:flex;align-items:center;justify-content:center;
border-radius:10px;background:#fff;
box-shadow:0 4px 12px rgba(0,0,0,.06);
border:1px solid #e5e7eb;
font-size:22px;
">📋</div>
<div style="flex:1;">
<h2 style="margin:0 0 6px;font-size:18px;color:#111827;">Your Order History</h2>
<p style="margin:0 0 10px;font-size:14px;color:#374151;line-height:1.7;">
Here you can track every order you've placed — see their progress, current status, and final results in real time.
Stay updated with <strong>live order tracking</strong> and detailed delivery reports.
</p>
<ul style="margin:0;padding-left:20px;font-size:13.5px;color:#374151;line-height:1.7;">
<li>✅ “In Progress” means your order is being processed.</li>
<li>💬 “Completed” shows successful delivery.</li>
<li>⚠️ “Partial” means order was partly delivered and refund adjusted.</li>
<li>❌ “Canceled” shows failed or refunded orders.</li>
</ul>
<p style="margin:14px 0 0;font-size:13.5px;color:#6b7280;">
Tip: You can filter orders by <strong>service, status, or date</strong> for quick access.
</p>
</div>
</div>
</div>Level Up
<!-- Stylish Info & Motivation Section (Inline CSS Only) -->
<section style="
margin:22px auto;max-width:980px;
background:linear-gradient(135deg,#4f46e5,#06b6d4);
border-radius:16px;overflow:hidden;
color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.2);
">
<!-- gradient header strip -->
<div style="height:5px;background:linear-gradient(90deg,#22c55e,#4f46e5,#06b6d4,#f97316);"></div>
<!-- main content -->
<div style="padding:26px 24px;">
<h1 style="margin:0 0 10px;font-size:26px;letter-spacing:.5px;">🚀 Level Up Your Social Growth</h1>
<p style="margin:0 0 18px;font-size:15px;line-height:1.8;opacity:.95;">
Welcome to <strong>HQ SMM Provider</strong> — the all-in-one platform designed to boost your social presence,
deliver faster results, and help you reach real audiences worldwide.
</p>
<div style="display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;">
<div style="flex:1 1 200px;background:rgba(255,255,255,.12);padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px);">
<div style="font-size:22px;">⚡</div>
<div style="font-weight:700;margin-top:6px;">Instant Processing</div>
<div style="font-size:13px;opacity:.9;margin-top:4px;">Orders start within seconds for top speed delivery.</div>
</div>
<div style="flex:1 1 200px;background:rgba(255,255,255,.12);padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px);">
<div style="font-size:22px;">💳</div>
<div style="font-weight:700;margin-top:6px;">Secure Payments</div>
<div style="font-size:13px;opacity:.9;margin-top:4px;">All transactions are safe, encrypted & fast.</div>
</div>
<div style="flex:1 1 200px;background:rgba(255,255,255,.12);padding:12px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(4px);">
<div style="font-size:22px;">📈</div>
<div style="font-weight:700;margin-top:6px;">Real Results</div>
<div style="font-size:13px;opacity:.9;margin-top:4px;">Boost growth that actually improves engagement.</div>
</div>
</div>
<div style="text-align:center;margin-top:8px;">
<a href="/new_order" style="
display:inline-block;
text-decoration:none;
background:#fff;color:#111827;
padding:10px 22px;border-radius:10px;
font-weight:700;font-size:14px;
border:1px solid #ddd;
box-shadow:0 6px 16px rgba(255,255,255,.3);
">
+ Create Your First Order
</a>
</div>
</div>
<!-- bottom note -->
<div style="padding:10px 16px 14px;background:rgba(255,255,255,.12);text-align:center;font-size:12.5px;opacity:.9;">
“Consistency is the secret to success — keep growing every day 🌱”
</div>
</section>Rules
<!-- New Order: Rules (Inline CSS Only) -->
<section style="
margin:16px auto;max-width:980px;border:1px solid #e5e7eb;border-radius:14px;overflow:hidden;
background:#ffffff;box-shadow:0 8px 24px rgba(0,0,0,.06);
">
<!-- top strip -->
<div style="height:6px;background:linear-gradient(90deg,#4f46e5,#06b6d4,#22c55e,#f59e0b);"></div>
<!-- header -->
<div style="display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px dashed #e5e7eb;background:#fafafa;">
<div style="width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#ffffff;border:1px solid #eaeaea;font-size:20px;">📜</div>
<div>
<h2 style="margin:0;font-size:18px;line-height:1.25;color:#111827;letter-spacing:.2px;">Order Rules</h2>
<small style="color:#6b7280;">Please read before placing a new order</small>
</div>
</div>
<!-- rules list -->
<div style="padding:16px 18px 6px;">
<!-- rule 1 -->
<div style="
display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#f9fafb;
">
<span style="
flex:0 0 auto;width:28px;height:28px;border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-weight:700;color:#fff;background:#4f46e5;border:1px solid #4338ca;box-shadow:0 4px 10px rgba(79,70,229,.25);
">1</span>
<div style="flex:1 1 auto;">
<div style="font-weight:700;color:#111827;margin-bottom:4px;">Use correct link / username</div>
<div style="font-size:13.5px;color:#374151;line-height:1.6;">
Orders to <strong>private, changed, or invalid</strong> accounts are <strong>non-refundable</strong>.
Make sure the profile/post is public and the URL is accurate.
</div>
</div>
</div>
<!-- rule 2 -->
<div style="
display:flex;gap:12px;align-items:flex-start;margin:0 0 12px;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#f9fafb;
">
<span style="
flex:0 0 auto;width:28px;height:28px;border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-weight:700;color:#fff;background:#06b6d4;border:1px solid #0891b2;box-shadow:0 4px 10px rgba(6,182,212,.25);
">2</span>
<div style="flex:1 1 auto;">
<div style="font-weight:700;color:#111827;margin-bottom:4px;">Avoid duplicate orders</div>
<div style="font-size:13.5px;color:#374151;line-height:1.6;">
Don’t place the <strong>same link</strong> while a previous order is still <strong>processing</strong>.
Duplicate / overlapping orders can cause delays or drops.
</div>
</div>
</div>
<!-- rule 3 -->
<div style="
display:flex;gap:12px;align-items:flex-start;margin:0 0 2px;padding:12px;border:1px solid #e5e7eb;border-radius:10px;background:#f9fafb;
">
<span style="
flex:0 0 auto;width:28px;height:28px;border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-weight:700;color:#fff;background:#22c55e;border:1px solid #16a34a;box-shadow:0 4px 10px rgba(34,197,94,.25);
">3</span>
<div style="flex:1 1 auto;">
<div style="font-weight:700;color:#111827;margin-bottom:4px;">Start time & speed are estimates</div>
<div style="font-size:13.5px;color:#374151;line-height:1.6;">
No instant guarantee. Once started, orders <strong>can’t be canceled</strong>.
Partial refund is only possible if an order <strong>fails</strong> or can’t be delivered.
</div>
</div>
</div>
</div>
<!-- tiny footer -->
<div style="padding:10px 16px 14px;border-top:1px dashed #e5e7eb;background:#fcfcfc;text-align:center;">
<span style="font-size:12.5px;color:#6b7280;">Tip: Track your order status in the dashboard for live updates.</span>
</div>
</section>Welcome Note
<!-- Welcome Note (Inline CSS Only) -->
<section style="
margin:16px auto;
max-width:980px;
border-radius:14px;
overflow:hidden;
background:linear-gradient(135deg,#f7fafc,#eef2ff);
border:1px solid #e5e7eb;
">
<!-- top strip -->
<div style="
height:6px;
background:linear-gradient(90deg,#6366f1,#22c55e,#06b6d4,#f97316);
"></div>
<!-- content -->
<div style="
padding:24px 22px 22px;
display:flex;
align-items:flex-start;
gap:14px;
">
<!-- emoji badge -->
<div style="
flex:0 0 auto;
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
border-radius:12px;
background:#ffffff;
box-shadow:0 4px 14px rgba(0,0,0,.06);
border:1px solid #eaeaea;
font-size:24px;
" aria-hidden="true">👋</div>
<!-- text block -->
<div style="flex:1 1 auto;">
<h1 style="
margin:0 0 6px;
font-size:22px;
line-height:1.25;
color:#111827;
letter-spacing:.2px;
">
Welcome to <span style="color:#4f46e5;">SITE_NAME</span>
</h1>
<p style="
margin:0 0 14px;
font-size:14.5px;
line-height:1.7;
color:#374151;
">
We’re excited to have you here! Explore services, place new orders, and track
everything in one clean dashboard. If you need any help, our support team is
just a message away.
</p>
<!-- quick bullets -->
<div style="
display:flex;flex-wrap:wrap;gap:8px;
margin:0 0 14px;
">
<span style="
display:inline-flex;align-items:center;gap:6px;
padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;
background:#fff;font-size:12.5px;color:#111827;
box-shadow:0 2px 8px rgba(0,0,0,.04);
">✅ Fast ordering</span>
<span style="
display:inline-flex;align-items:center;gap:6px;
padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;
background:#fff;font-size:12.5px;color:#111827;
box-shadow:0 2px 8px rgba(0,0,0,.04);
">🔒 Secure payments</span>
<span style="
display:inline-flex;align-items:center;gap:6px;
padding:8px 10px;border:1px solid #e5e7eb;border-radius:8px;
background:#fff;font-size:12.5px;color:#111827;
box-shadow:0 2px 8px rgba(0,0,0,.04);
">🕒 Real-time status</span>
</div>
<!-- CTA row -->
<div style="display:flex;gap:10px;flex-wrap:wrap;">
<a href="/new_order" style="
text-decoration:none;
padding:10px 14px;border-radius:9px;
background:#4f46e5;color:#fff;font-weight:600;font-size:13.5px;
border:1px solid #4338ca;
box-shadow:0 6px 18px rgba(79,70,229,.25);
">Place a New Order</a>
<a href="/support" style="
text-decoration:none;
padding:10px 14px;border-radius:9px;
background:#ffffff;color:#111827;font-weight:600;font-size:13.5px;
border:1px solid #e5e7eb;
box-shadow:0 4px 12px rgba(0,0,0,.04);
">Need Help?</a>
</div>
</div>
</div>
<!-- footer note -->
<div style="
padding:10px 16px 14px;
border-top:1px dashed #e5e7eb;
background:#fafafa;
text-align:center;
font-size:12.5px;color:#6b7280;
">
Tip: Bookmark your dashboard for quick access anytime.
</div>
</section>Balance Cards
Current Balance
{{user.balance}}
Total Deposit
{{user.deposit}}
Total Spent
{{user.spent}}
Your Total Orders
{{user.orders}}
<div style="display:flex;flex-wrap:wrap;gap:12px;margin:14px 0;">
<!-- User Balance -->
<div style="flex:1 1 calc(25% - 12px);min-width:160px;background:#f8f9fb;border:1px solid #e6e6e6;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.04);padding:14px 16px;text-align:center;">
<div style="font-size:12px;letter-spacing:.2px;color:#6b7280;font-weight:600;text-transform:uppercase;">Current Balance</div>
<div style="font-size:22px;font-weight:700;color:#222;margin-top:6px;">{{user.balance}}</div>
</div>
<!-- Total Deposit -->
<div style="flex:1 1 calc(25% - 12px);min-width:160px;background:#f8f9fb;border:1px solid #e6e6e6;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.04);padding:14px 16px;text-align:center;">
<div style="font-size:12px;letter-spacing:.2px;color:#6b7280;font-weight:600;text-transform:uppercase;">Total Deposit</div>
<div style="font-size:22px;font-weight:700;color:#222;margin-top:6px;">{{user.deposit}}</div>
</div>
<!-- Total Spent -->
<div style="flex:1 1 calc(25% - 12px);min-width:160px;background:#f8f9fb;border:1px solid #e6e6e6;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.04);padding:14px 16px;text-align:center;">
<div style="font-size:12px;letter-spacing:.2px;color:#6b7280;font-weight:600;text-transform:uppercase;">Total Spent</div>
<div style="font-size:22px;font-weight:700;color:#222;margin-top:6px;">{{user.spent}}</div>
</div>
<!-- Total Orders -->
<div style="flex:1 1 calc(25% - 12px);min-width:160px;background:#f8f9fb;border:1px solid #e6e6e6;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.04);padding:14px 16px;text-align:center;">
<div style="font-size:12px;letter-spacing:.2px;color:#6b7280;font-weight:600;text-transform:uppercase;">Your Total Orders</div>
<div style="font-size:22px;font-weight:700;color:#222;margin-top:6px;">{{user.orders}}</div>
</div>
</div>