Merge branch 'development_ehab' into development

src/components/Layout.tsx

@@ -1,8 +1,42 @@
+import { useEffect } from 'react'
 import { Outlet } from 'react-router-dom'
 import { Footer } from './Footer'
 import { Header } from './Header'
 
 export function Layout() {
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+
+    if (document.getElementById('mailerlite-universal')) return
+
+    const script = document.createElement('script')
+    script.id = 'mailerlite-universal'
+    script.innerHTML = `
+      (function(m,a,i,l,e,r){
+        m['MailerLiteObject']=e;
+        function f(){
+          var c={a:arguments,q:[]};
+          var r=this.push(c);
+          return "number"!=typeof r?r:f.bind(c.q);
+        }
+        f.q=f.q||[];
+        m[e]=m[e]||f.bind(f.q);
+        m[e].q=m[e].q||f.q;
+        r=a.createElement(i);
+        var _=a.getElementsByTagName(i)[0];
+        r.async=1;
+        r.src=l+'?v'+(~~(new Date().getTime()/1000000));
+        _.parentNode.insertBefore(r,_);
+      })(window, document, 'script', 'https://static.mailerlite.com/js/universal.js', 'ml');
+      window.ml_account = ml('accounts', '1778010', 'x2d3d9f8n1', 'load');
+    `
+
+    document.body.appendChild(script)
+
+    return () => {
+      script.remove()
+    }
+  }, [])
 
   return (
     <div className="bg-[#fdfdfd] antialiased relative" style={{ fontFamily: 'var(--font-inter)' }}>

src/pages/pods/Homepod.tsx

@@ -1,10 +1,25 @@
 import { H3, Eyebrow, P } from "@/components/Texts"
 import { Button } from "@/components/Button"
+import React from 'react';
+
+// NOTE: Ensure your global types file (global.d.ts) is set up 
+// to avoid TypeScript errors on window.ml_account
 
 export default function Homepod() {
   const onGetStartedClick = () => {
-    console.log("Get started clicked");
+    // 1. Ensure we are in a browser environment (client-side) 
+    // and the ml_account function is available globally.
+    if (typeof window !== 'undefined' && window.ml_account) {
+      
+      // 2. Execute the MailerLite pop-up trigger function using the specific snippet you provided.
+      // TypeScript is happy if you defined the global type in step 1.
+      window.ml_account('webforms', '6108375', 'l9m8g1', 'show');
+      
+    } else {
+      console.log("MailerLite script (ml_account) not fully loaded or not in browser.");
+    }
   };
+
   return (
     <div className="">
       {/* Boxed container */}
@@ -28,26 +43,26 @@ export default function Homepod() {
               Your Private Space in the New Internet
             </H3>
             <P className="mt-6 text-gray-800">
-             Pods are personal digital spaces on the Mycelium Network. They are private, persistent, and fully under your control. Run conversations, files, and tools directly on the network instead of through central servers
+              Pods are personal digital spaces on the Mycelium Network. They are private, persistent, and fully under your control. Run conversations, files, and tools directly on the network instead of through central servers
             </P>
             <div className="mt-8 flex items-center gap-x-6">
-                          <Button
+              <Button
-                            variant="solid"
+                variant="solid"
-                            color="cyan"
+                color="cyan"
-                            onClick={onGetStartedClick}
+                // The updated onClick handler calls the function
-                          >
+                onClick={onGetStartedClick} 
-                            Join the Waitlist
+              >
-                          </Button>
+                Join the Waitlist
-                          <Button to="#" variant="outline">
+              </Button>
-                            Explore Docs →
+              <Button to="#" variant="outline">
-                          </Button>
+                Explore Docs →
-                        </div>
+              </Button>
+            </div>
           </div>
         </div>
-        
       </div>
-      {/* ✅ Bottom horizontal line with spacing */}
+      {/* Bottom horizontal line with spacing */}
-      <div className="w-full border-b  border-gray-100" />
+      <div className="w-full border-b border-gray-100" />
       <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </div>
   )