You know the 7-day free trial we currently have i want you to make it so the secound someone click the link to our domain that is like a popup that they can exit out.

components/trial-popup.js

@@ -0,0 +1,95 @@
+class TrialPopup extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        .popup-overlay {
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background-color: rgba(0, 0, 0, 0.8);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          z-index: 1000;
+        }
+        .popup-content {
+          background: linear-gradient(135deg, #000000, #1a1a1a);
+          border: 2px solid #b8860b;
+          border-radius: 12px;
+          padding: 2rem;
+          max-width: 500px;
+          width: 90%;
+          position: relative;
+          box-shadow: 0 0 20px rgba(184, 134, 11, 0.5);
+        }
+        .close-btn {
+          position: absolute;
+          top: 1rem;
+          right: 1rem;
+          background: none;
+          border: none;
+          color: #b8860b;
+          font-size: 1.5rem;
+          cursor: pointer;
+        }
+        .popup-title {
+          font-family: 'Bebas Neue', sans-serif;
+          font-size: 2rem;
+          color: #b8860b;
+          margin-bottom: 1rem;
+          text-align: center;
+        }
+        .popup-text {
+          color: #ffffff;
+          margin-bottom: 1.5rem;
+          line-height: 1.5;
+        }
+        .popup-btn {
+          background: linear-gradient(to right, #b8860b, #9b0000);
+          color: white;
+          border: none;
+          padding: 0.75rem 1.5rem;
+          border-radius: 6px;
+          font-weight: bold;
+          cursor: pointer;
+          width: 100%;
+          text-transform: uppercase;
+          transition: transform 0.3s ease;
+        }
+        .popup-btn:hover {
+          transform: translateY(-3px);
+        }
+      </style>
+      <div class="popup-overlay">
+        <div class="popup-content">
+          <button class="close-btn">
+            <i data-feather="x"></i>
+          </button>
+          <h2 class="popup-title">7-Day Free Trial</h2>
+          <p class="popup-text">
+            Ready to amplify your performance? Try our premium VR/AR mental training 
+            platform free for 7 days. No credit card required!
+          </p>
+          <button class="popup-btn">Start Free Trial</button>
+        </div>
+      </div>
+    `;
+
+    this.shadowRoot.querySelector('.close-btn').addEventListener('click', () => {
+      this.remove();
+      localStorage.setItem('trialPopupClosed', 'true');
+    });
+
+    this.shadowRoot.querySelector('.popup-btn').addEventListener('click', () => {
+      window.location.href = 'index.html#pricing';
+    });
+
+    // Initialize feather icons
+    feather.replace();
+  }
+}
+
+customElements.define('trial-popup', TrialPopup);

index.html

@@ -516,8 +516,13 @@ Get Started
             <p class="text-xl mb-12 max-w-2xl mx-auto text-gray-300">
                 Join thousands of athletes, performers, and professionals who are mastering their minds with our technology.
             </p>
-                            <a href="https://portal.veinternational.org/buybuttons/us0110243/btn/free-trial-2/" class="bg-gradient-to-r from-green-600 to-green-800 hover:from-green-500 hover:to-green-700 text-white font-bold px-10 py-5 rounded-lg text-xl transition transform hover:scale-105 shadow-lg mb-4 inline-block">
-Start 7-Day Free Trial
+                            <button onclick="addToCart({
+                                id: 'free-trial',
+                                name: '7-Day Free Trial', 
+                                price: 0,
+                                description: 'Free trial with limited features'
+                            })" class="bg-gradient-to-r from-green-600 to-green-800 hover:from-green-500 hover:to-green-700 text-white font-bold px-10 py-5 rounded-lg text-xl transition transform hover:scale-105 shadow-lg mb-4">
+                                Start 7-Day Free Trial
                             </button>
 <p class="text-sm text-gray-400">No credit card required • Cancel anytime</p>
 </div>

login.html

@@ -91,8 +91,8 @@ Sign In
                 <div class="mt-6 text-center">
                     <div class="mb-4">
                         <p class="text-gray-400">Don't have an account?</p>
-                    <a href="https://portal.veinternational.org/buybuttons/us0110243/btn/free-trial-2/" class="text-yellow-500 hover:text-yellow-400 font-medium">Start your 7-day free trial</a>
-</div>
+                        <a href="#" class="text-yellow-500 hover:text-yellow-400 font-medium">Start your 7-day free trial</a>
+                    </div>
                     <p class="text-sm text-gray-400">No credit card required</p>
                 </div>
 <div class="mt-8 pt-6 border-t border-gray-800">

results.html

@@ -224,7 +224,7 @@
             <p class="text-xl mb-12 max-w-2xl mx-auto text-gray-300">
                 Join our next competition and test your mental performance against others
             </p>
-            <a href="https://portal.veinternational.org/buybuttons/us0110243/btn/free-trial-2/" class="bg-[#9b0000] hover:bg-[#7a0000] text-white font-bold px-10 py-5 rounded-lg text-xl transition transform hover:scale-105 shadow-lg inline-block">
+            <button class="bg-[#9b0000] hover:bg-[#7a0000] text-white font-bold px-10 py-5 rounded-lg text-xl transition transform hover:scale-105 shadow-lg">
 Join Next Event
             </button>
 </div>