new url

public/index.html

@@ -160,7 +160,10 @@
         </ul>
       </nav>
     </div>
-    <section class="hero-content">
+
+
+<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">
@@ -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,168 @@
+(function() {
+  const currentScript = document.currentScript;
+  const affiliateFromAttr = currentScript.getAttribute("data-affiliate");
+
+  const params = new URLSearchParams(window.location.search);
+  const affiliateFromURL = params.get("affiliate");
+
+  const affiliateCode = affiliateFromURL || affiliateFromAttr || "None";
+
+  const container = document.getElementById("my-signup-widget");
+  if (!container) return;
+
+  const shadow = container.attachShadow({ mode: "open" });
+
+  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;
+      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; }
+
+    .status {
+      padding: 20px;
+      font-size: 15px;
+      color: #0f172a;
+      background: linear-gradient(135deg,#f0f9ff,#e0f2fe);
+      border: 1px solid #cbd5e1;
+      border-radius: 12px;
+      text-align: center;
+      box-shadow: 0 4px 12px rgba(16,24,40,.08);
+      word-break: break-word;
+    }
+    .status.success { background: linear-gradient(135deg,#d1fae5,#a7f3d0); color: #065f46; }
+    .status.error { background: linear-gradient(135deg,#fee2e2,#fecaca); color: #991b1b; }
+  `;
+
+  const html = `
+    <form class="card">
+      <div class="header">
+        <img class="icon" src="https://sp01.odoo4projects.com/hugo/live/4.svg">
+        <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="manchester">UK - Manchester</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 the T&C of ODOO4projects.
+      </div>
+    </form>
+
+    <div id="status" class="status" style="display:none;"></div>
+  `;
+
+  shadow.innerHTML = `<style>${styles}</style>${html}`;
+
+  const form = shadow.querySelector("form");
+  const statusEl = shadow.getElementById("status");
+
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+    statusEl.style.display = "block";
+    statusEl.textContent = "Submitting...";
+    statusEl.className = "status";
+
+    try {
+      const formData = new FormData(form);
+      const res = await fetch("https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a", {
+        method: "POST",
+        body: formData,
+      });
+
+      const text = await res.text();
+
+      // Hide the form
+      form.style.display = "none";
+
+      // Show the webhook response nicely
+      statusEl.textContent = text;
+      statusEl.className = "status success";
+    } catch (err) {
+      statusEl.textContent = "❌ Failed to submit. Please try again.";
+      statusEl.className = "status error";
+    }
+  });
+})();
+

serve

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