working form

public/index.html

@@ -160,8 +160,11 @@
         </ul>
       </nav>
     </div>
-    <section class="hero-content">
+
-      <h1>Odoo & n8n Automation Experts</h1>
+
+<section class="hero-content">
+  <div class="hero-left">
+    <h1>Odoo & n8n Automation Experts</h1>
     <p>We charge upfront — this lets us skip the sales talk and give serious clients immediate access to our best engineers.</p>
     <ul class="hero-list">
       <li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>One-hour get-to-know session included — not satisfied? Full refund, no questions asked</span></li>
@@ -169,8 +172,20 @@
       <li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Hosting solutions for Odoo & n8n available</span></li>
       <li><span class="icon"><i class="fa-solid fa-circle-check"></i></span><span>Custom development tailored to your workflows</span></li>
     </ul>
-    <button class="hero-button-cta plausible-event-name=ExplorePackages" onclick="location.href='#packages'">Explore packages</button>
+    <button class="hero-button-cta plausible-event-name=ExplorePackages" onclick="location.href='#packages'">
-    </section>
+      Explore packages
+    </button>
+  </div>
+
+  <div class="hero-right">
+    <div id="my-signup-widget"></div>
+    <script src="http://localhost:8000/widget-signup/widget.js" 
+            data-affiliate="od8n"></script>
+  </div>
+</section>
+
+
+
   </header>
 
   <!-- Product Packages -->

public/style.css

@@ -114,12 +114,22 @@ header.hero {
 }
 
 .hero-content {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 40px; /* space between text and widget */
   max-width: 80%;
   margin: 0 auto;
   padding-top: 200px;
   padding-bottom: 150px;
 }
+.hero-left {
+  flex: 1; /* text column grows */
+}
 
+.hero-right {
+  flex: 0 0 420px; /* fixed width for widget */
+}
 header.hero h1 {
   font-size: 3rem;
   margin-bottom: 20px;

public/widget-signup/widget.js

@@ -0,0 +1,186 @@
+(function() {
+  // Locate the script tag
+  const currentScript = document.currentScript;
+  const affiliateFromAttr = currentScript.getAttribute("data-affiliate");
+
+  // Allow ?affiliate=... from URL
+  const params = new URLSearchParams(window.location.search);
+  const affiliateFromURL = params.get("affiliate");
+
+  const affiliateCode = affiliateFromURL || affiliateFromAttr || "None";
+
+  // Container element
+  const container = document.getElementById("my-signup-widget");
+  if (!container) return;
+
+  // Attach shadow DOM
+  const shadow = container.attachShadow({ mode: "open" });
+
+  // CSS for the widget (isolated)
+  const styles = `
+    :host {
+      all: initial;
+      font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Inter,Arial,sans-serif;
+      display: block;
+      max-width: 420px;
+      margin: 0 auto;
+    }
+
+    .card {
+      background: linear-gradient(135deg,#ffffff 0%,#f7fafc 60%);
+      border: 1px solid #e6e8eb;
+      border-radius: 16px;
+      box-shadow: 0 6px 20px rgba(16,24,40,.08);
+      padding: 20px;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 12px;
+    }
+    .icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 12px;
+      background: linear-gradient(135deg,#6ee7b7,#3b82f6);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 700;
+      color: #fff;
+    }
+    .title {
+      font-size: 18px;
+      line-height: 1.2;
+      font-weight: 800;
+      color: #0f172a;
+    }
+    .subtitle {
+      font-size: 13px;
+      color: #475569;
+    }
+
+    label,
+    .label {
+      display: block;
+      font-size: 12px;
+      color: #334155;
+      font-weight: 600;
+      margin: 12px 0 6px;
+    }
+
+    .options {
+      display: flex;
+      gap: 12px;
+      flex-wrap: wrap;
+      margin-bottom: 6px;
+    }
+
+    .option {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      border: 1px solid #cbd5e1;
+      border-radius: 10px;
+      padding: 10px 12px;
+      cursor: pointer;
+      background: #fff;
+    }
+
+    input[type="radio"] {
+      accent-color: #3b82f6;
+      margin: 0;
+    }
+
+    select, input[type="email"], affiliate-display {
+      width: 100%;
+      background: #fff;
+      border: 1px solid #cbd5e1;
+      border-radius: 10px;
+      padding: 10px 12px;
+      font-size: 14px;
+      color: #0f172a;
+      outline: none;
+      box-sizing: border-box;
+    }
+
+    .affiliate-display {
+      background: #f8fafc;
+    }
+
+    button {
+      margin-top: 16px;
+      width: 100%;
+      border: none;
+      border-radius: 12px;
+      padding: 12px 14px;
+      font-size: 15px;
+      font-weight: 800;
+      background: linear-gradient(135deg,#22c55e,#3b82f6);
+      color: #fff;
+      cursor: pointer;
+      box-shadow: 0 8px 18px rgba(37,99,235,.25);
+    }
+
+    .footnote {
+      margin-top: 10px;
+      font-size: 11px;
+      color: #64748b;
+      text-align: center;
+    }
+  `;
+
+  // HTML structure
+  const html = `
+    <form action="https://001-001-123e4567-e89b-12d3-a456-426614174000.od8n.com/webhook-test/28c30b58-7786-4c63-b662-2a840014e472" method="post" class="card">
+      <div class="header">
+        <div class="icon">★</div>
+        <div>
+          <div class="title">Try Managed Odoo or n8n — Free</div>
+          <div class="subtitle">Full-featured 4-week trial. No credit card required.</div>
+        </div>
+      </div>
+
+      <div class="label">Product</div>
+      <div class="options">
+        <label class="option">
+          <input type="radio" name="product" value="ODOO" required checked>
+          <span>ODOO</span>
+        </label>
+        <label class="option">
+          <input type="radio" name="product" value="N8N" required>
+          <span>N8N</span>
+        </label>
+      </div>
+
+      <label for="location">Location</label>
+      <select id="location" name="location" required>
+        <option value="" disabled>Select a region</option>
+        <option value="amsterdam">Amsterdam</option>
+        <option value="mumbai" selected>Mumbai</option>
+        <option value="saopaulo">São Paulo</option>
+      </select>
+
+      <label for="email">Work Email</label>
+      <input id="email" name="email" type="email" required placeholder="you@company.com">
+
+      <input type="hidden" name="affiliate_code" value="${affiliateCode}">
+
+      <button type="submit">Start 4-Week Free Trial</button>
+
+      <div class="footnote">
+        By submitting, you agree to be contacted about your trial and our T&Cs.
+      </div>
+    </form>
+  `;
+
+  // Append everything into shadow DOM
+  shadow.innerHTML = `
+    <style>${styles}</style>
+    ${html}
+  `;
+})();
+

serve

@@ -1,4 +1,5 @@
 #!/bin/bash
 
 pip install livereload
+cd public
 python ../serve.py public/