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 */}
@@ -34,6 +49,7 @@ export default function Homepod() {
               <Button
                 variant="solid"
                 color="cyan"
+                // The updated onClick handler calls the function
                 onClick={onGetStartedClick} 
               >
                 Join the Waitlist
@@ -44,9 +60,8 @@ export default function Homepod() {
             </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="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
     </div>