background and layout updates for Basic and Free plans

Author: Ali-Cheikh

plans/basic/index.html

@@ -20,7 +20,7 @@
     /* ── base ── */
     body {
       font-family: 'Inter', system-ui, -apple-system, sans-serif;
-      background: #0a0a0f;
+      background: #000 url(https://tccards.tn/Assets/bg.png) center / cover no-repeat fixed;
       color: #f1f5f9;
       min-height: 100vh;
     }
@@ -344,7 +344,7 @@
       left: 0;
       bottom: 36px;
       z-index: 4;
-      width: 190px;
+      width: 210px;
       padding: 12px 16px;
       border-radius: 18px;
       background: rgba(15, 23, 42, 0.92);
@@ -436,7 +436,7 @@
         height: 44px;
       }
       .hero-app-floating-badge {
-        width: 160px;
+        width: 200px;
         padding: 10px 14px;
         bottom: 20px;
         left: 4px;
@@ -510,7 +510,7 @@
         margin-top: 4px;
       }
       .hero-app-floating-badge {
-        width: 140px;
+        width: 180px;
         padding: 8px 12px;
         bottom: 12px;
         left: 2px;
@@ -791,8 +791,8 @@
           <a href="https://tccards.tn/#faq" class="nav-link">FAQ</a>
           <a href="https://tccards.tn/help/" class="nav-link">Support</a>
           <a href="https://edit.tccards.tn" class="nav-link">Edit Dashboard</a>
-          <a href="https://tccards.tn/plans/free/" class="nav-cta">
-            Get Started (Free)
+          <a href="https://tccards.tn/help/" class="nav-cta">
+            Get Help
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M5 12h14"></path>
               <path d="m12 5 7 7-7 7"></path>
@@ -814,8 +814,8 @@
           <a href="https://tccards.tn/#faq"><i class="fas fa-question-circle w-5 text-center"></i> FAQ</a>
           <a href="https://tccards.tn/help/"><i class="fas fa-life-ring w-5 text-center"></i> Support</a>
           <a href="https://edit.tccards.tn"><i class="fas fa-edit w-5 text-center"></i> Edit Dashboard</a>
-          <a href="https://tccards.tn/plans/free/" class="mobile-cta">
-            Get Started (Free)
+          <a href="https://tccards.tn/help/" class="mobile-cta">
+            Get Help
             <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <path d="M5 12h14"></path>
               <path d="m12 5 7 7-7 7"></path>
@@ -894,25 +894,15 @@ <h3 class="hero-app-title">
           <div class="skeleton-button" style="background:rgba(255,255,255,0.02);"></div>
         </div>
       </div>
-      <div class="hero-app-floating-badge">
-        <strong><i class="fas fa-id-badge mr-1.5 text-purple-400 text-xs"></i> identity</strong>
-        <span>impress with your profile instantly.</span>
+      <div class="hero-app-floating-badge" id="start">
+        <strong id="activeCounter">Loading...</strong>
+        <span id="counterMeta">Syncing live data... impress with your profile instantly.</span>
       </div>
     </div>
   </section>
 
-  <!-- ─── COUNTER ─── -->
-  <section class="max-w-3xl mx-auto px-4 pb-6 py-10 text-center">
-    <div class="bg-white/5 backdrop-blur-md border border-white/5 rounded-2xl p-6 max-w-md mx-auto">
-      <p class="text-xs text-gray-400 uppercase tracking-wider font-medium">Active Basic Accounts</p>
-      <div class="text-5xl sm:text-6xl font-extrabold bg-gradient-to-r from-purple-400 to-emerald-400 bg-clip-text text-transparent leading-none" id="activeCounter">Loading...</div>
-      <p class="text-xs text-gray-500 mt-1" id="counterMeta">Syncing live data...</p>
-    </div>
-  </section>
-
-
   <!-- ─── FORM ─── -->
-  <div class="form-container py-8" id="start">
+  <div class="form-container py-8" >
 
     <div class="rounded-2xl p-6 md:p-8 bg-white/5 backdrop-blur-md">
 
@@ -1019,7 +1009,7 @@ <h3 class="hero-app-title">
               <p class="text-xs text-center text-gray-400 mt-1.5">Professional</p>
             </button>
           </div>
-          <p class="field-hint mt-2">Pick a color theme for your webfolio.</p>
+          <p class="field-hint mt-2">Pick a color theme for your page. You can change this later.</p>
         </div>
 
         <hr class="form-divider" />

plans/basic/main.js

@@ -99,13 +99,14 @@ document.addEventListener("DOMContentLoaded", () => {
           current = target;
           clearInterval(ticker);
         }
-        counter.textContent = current.toLocaleString();
+        // Update the counter display with text
+        counter.textContent = current.toLocaleString()+"+ Active accounts";
       }, 25);
 
       if (counterMeta) {
         counterMeta.textContent = monthlyGrowth > 0
           ? `+${monthlyGrowth.toLocaleString()} this month`
-          : "No new accounts this month";
+          : "Be the first to join this month!";
       }
     } catch (error) {
       console.error("Live counter failed:", error);

plans/free/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html class="scroll-smooth" lang="en">
 
 <head>
   <meta charset="UTF-8" />
@@ -20,7 +20,7 @@
     /* ── base ── */
     body {
       font-family: 'Inter', system-ui, -apple-system, sans-serif;
-      background: #0a0a0f;
+      background: #000 url(https://tccards.tn/Assets/bg.png) center / cover no-repeat fixed;
       color: #f1f5f9;
       min-height: 100vh;
     }
@@ -774,7 +774,7 @@
   </style>
 </head>
 
-<body>
+<body class="fade-in">
 
   <!-- ─── MAIN NAVIGATION ─── -->
   <nav class="nav-container" id="mainNav" role="navigation" aria-label="Main navigation">
@@ -896,16 +896,6 @@ <h3 class="hero-app-title">
       </div>
     </div>
   </section>
-
-  <!-- ─── COUNTER ─── -->
-  <section class="max-w-3xl mx-auto px-4 pb-6 py-10 text-center">
-    <div class="bg-white/5 backdrop-blur-md border border-white/5 rounded-2xl p-6 max-w-md mx-auto">
-      <p class="text-xs text-gray-400 uppercase tracking-wider font-medium">Free Accounts Created</p>
-      <div class="text-5xl sm:text-6xl font-extrabold bg-gradient-to-r from-purple-400 to-emerald-400 bg-clip-text text-transparent leading-none" id="activeCounter">Loading...</div>
-      <p class="text-xs text-gray-500 mt-1" id="counterMeta">Syncing live data...</p>
-    </div>
-  </section>
-
   <!-- ─── FORM ─── -->
   <div class="form-container py-8" id="start">
     <div class="rounded-2xl p-6 md:p-8 bg-white/5 backdrop-blur-md">