From 04d39157b8f76e299b3eaed8ea7126953dada59c Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Thu, 8 Oct 2026 17:28:26 -0300
Subject: [PATCH] Buy Area

---
 index.html | 21 +++++++++-----
 script.js  | 48 ++++++++++++++++++++++++++++++--
 style.css  | 81 ++++++++++++++++++++++++++++++++++++++++++++----------
 3 files changed, 127 insertions(+), 23 deletions(-)

diff --git a/index.html b/index.html
index 554bf21..30cf133 100644
--- a/index.html
+++ b/index.html
@@ -211,14 +211,14 @@
     THESIS: The homepage as a global business lounge concierge desk — midnight blue, brass, marble, city placards for the six regions. The category default (hero + feature grid + pricing grid) is reframed as hospitality: the visitor checks in, reads the rate card, and books a suite.
     OWN-WORLD: Midnight blue (#0d1b2e) ground, brass (#c9a227) for every accent and CTA, cream (#f4f0e8) for light surfaces. Marcellus serif for display, Inter for body. Six city photos (Amsterdam, Boston, London, Mumbai, São Paulo, Sydney) as circular placards. Hairline brass rules. Concierge-card features.
     STORY: The visitor understands: "I can deploy Odoo in 5 minutes, globally, without DevOps. This is enterprise-grade, but the concierge handles everything." They believe it from the city photos (real regions), the partner logos, the brass CTA, and the "No setup fee. Stripe Payment. Cancel at any time" footer.
-    FIRST VIEWPORT: Midnight hero with faint Amsterdam skyline. Brass kicker "FULLY MANAGED ODOO HOSTING". Large serif h1 "Deploy Odoo in 5 Minutes — Fully Managed Hosting". Stats row with brass checks. Brass CTA button "See Plans & Pricing" + ghost "How It Works". Bottom: six city placards (photo + name + region) in a horizontal strip.
+    FIRST VIEWPORT: Midnight hero with faint Amsterdam skyline. Brass kicker "FULLY MANAGED ODOO COMMUNITY HOSTING". Large serif h1 "Deploy Odoo in 5 Minutes — Fully Managed Hosting". Stats row with brass checks. Brass CTA button "See Plans & Pricing" + ghost "How It Works". Bottom: six city placards (photo + name + region) in a horizontal strip.
     FORM: The Grand Hotel Business Lounge (model-pick, user-chosen). Seed key: 7db4dced.
     FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md.
     -->
     <!-- Hero -->
     <section class="hero">
       <div class="container">
-        <div class="hero-kicker">Fully Managed Odoo Hosting</div>
+        <div class="hero-kicker">Fully Managed Odoo Community Hosting</div>
         <h1>Deploy Odoo in <span>5 Minutes</span> — Fully Managed Hosting</h1>
         <p class="hero-sub">Launch a production-ready Odoo Community instance with automatic backups, free SSL, and Git-based module management. No DevOps required.</p>
         <div class="hero-stats">
@@ -372,7 +372,7 @@
           <label for="pricingOdooVersion">Odoo Version</label>
           <select id="pricingOdooVersion" class="pricing-server-select">
             <option value="19.0">19.0 — Tons of OCA supported modules</option>
-            <option value="20.0">20.0 — Latest Greatest</option>
+            <option value="20.0" selected>20.0 — Latest Greatest</option>
           </select>
         </div>
         <div class="pricing-grid">
@@ -386,7 +386,7 @@
                 <div class="price-save">Save 8%</div>
               </div>
               <p class="desc">"ODOO Standard .. that is all my business needs"</p>
-              <a href="javascript:void(0)" class="btn btn-brass btn-buy" data-id="54">Buy Now</a>
+              <a href="javascript:void(0)" class="btn btn-brass btn-buy" data-id="6">Buy Now</a>
               <ul>
                 <li><i class="fas fa-check" style="color: var(--success)"></i> Launch Odoo CE in 5 minutes</li>
                 <li><i class="fas fa-check" style="color: var(--success)"></i> Automatic backups — no remembering</li>
@@ -405,7 +405,7 @@
                 <div class="price-save">Save 9%</div>
               </div>
               <p class="desc">"I need some modules and professional reports"</p>
-              <a href="javascript:void(0)" class="btn btn-brass btn-buy" data-id="55">Buy Now</a>
+              <a href="javascript:void(0)" class="btn btn-brass btn-buy" data-id="4">Buy Now</a>
               <ul>
                 <li><i class="fas fa-check" style="color: var(--success)"></i> Launch Odoo CE in 5 minutes</li>
                 <li><i class="fas fa-check" style="color: var(--success)"></i> Automatic backups — no remembering</li>
@@ -425,7 +425,7 @@
                 <div class="price-save">Save 10%</div>
               </div>
               <p class="desc">"ODOO Enterprise is a must have!"</p>
-              <a href="javascript:void(0)" class="btn btn-brass btn-buy" data-id="56">Buy Now</a>
+              <a href="javascript:void(0)" class="btn btn-brass btn-buy" data-id="5">Buy Now</a>
               <ul>
                 <li><i class="fas fa-check" style="color: var(--success)"></i> Launch Odoo CE in 5 minutes</li>
                 <li><i class="fas fa-check" style="color: var(--success)"></i> Automatic backups — no remembering</li>
@@ -629,7 +629,6 @@
             <h4>About us</h4>
             <p>We build smart, scalable business solutions by combining the <strong>stability</strong> of Odoo ERP with the <strong>power</strong> of AI and N8N automation.</p>
             <p>From streamlined sales to global rollouts, our <strong>lean, eco-friendly</strong> approach helps businesses cut costs, boost efficiency, and grow without limits.</p>
-            <p><a href="mailto:support@odoo4projects.com" class="footer-email">support@odoo4projects.com</a></p>
           </div>
           <div>
             <h4>Follow us on</h4>
@@ -637,6 +636,14 @@
               <a href="https://www.linkedin.com/company/odoo4projects/" target="_blank" aria-label="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
               <a href="https://www.youtube.com/@ODOO4projects" target="_blank" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
             </div>
+            <form class="footer-contact-form" id="footerContactForm">
+              <input type="email" id="footerContactEmail" placeholder="Your email address" required />
+              <div class="footer-textarea-wrap">
+                <textarea id="footerContactText" placeholder="Your message..." required></textarea>
+                <button type="submit" class="footer-send-btn" aria-label="Send message"><i class="fas fa-paper-plane"></i></button>
+              </div>
+              <div class="footer-form-status" id="footerFormStatus" role="status"></div>
+            </form>
           </div>
         </div>
         <div class="fcopy">Copyright &copy; ODOO4projects LLC</div>
diff --git a/script.js b/script.js
index 3991b92..c38d9fd 100644
--- a/script.js
+++ b/script.js
@@ -701,7 +701,7 @@ var si = 0,
                 var version = verSelect ? verSelect.value : '';
                 var form = document.createElement('form');
                 form.method = 'POST';
-                form.action = 'https://odoo.odoo4projects.com/shop/post_basket';
+                form.action = 'https://20.odoo4projects.com/shop/post_basket';
                 form.target = '_blank';
                 form.style.display = 'none';
                 var basket = document.createElement('input');
@@ -843,7 +843,8 @@ var si = 0,
                             body: JSON.stringify(UTM.inject({
                                 name: name,
                                 email: email,
-                                requirements: requirements
+                                requirements: requirements,
+                                area: 'quote'
                             }))
                         }).then(function() {
                             customQuoteForm.style.display = 'none';
@@ -870,3 +871,46 @@ var si = 0,
                     });
                 });
             })();
+
+            /* ---- Footer contact form ---- */
+            (function () {
+                var form = document.getElementById('footerContactForm');
+                if (!form) return;
+                var emailInput = document.getElementById('footerContactEmail');
+                var textInput = document.getElementById('footerContactText');
+                var submitBtn = form.querySelector('.footer-send-btn');
+                var status = document.getElementById('footerFormStatus');
+
+                function showStatus(message, isError) {
+                    status.textContent = message;
+                    status.classList.toggle('error', !!isError);
+                    status.classList.add('visible');
+                }
+
+                form.addEventListener('submit', function (e) {
+                    e.preventDefault();
+                    var email = emailInput.value.trim();
+                    var text = textInput.value.trim();
+                    if (!email || !text) return;
+
+                    submitBtn.disabled = true;
+                    status.classList.remove('visible');
+
+                    fetch('https://n8n.odoo4projects.com/webhook/ODOO4projects/crm', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(UTM.inject({
+                            email: email,
+                            requirements: text,
+                            area: 'message'
+                        }))
+                    }).then(function () {
+                        form.reset();
+                        submitBtn.disabled = false;
+                        showStatus("Thanks! We'll get back to you shortly.", false);
+                    }).catch(function () {
+                        submitBtn.disabled = false;
+                        showStatus('Something went wrong. Please try again.', true);
+                    });
+                });
+            })();
diff --git a/style.css b/style.css
index f82737d..43c691d 100644
--- a/style.css
+++ b/style.css
@@ -920,23 +920,76 @@ img { max-width: 100%; height: auto; vertical-align: middle; }
 }
 .fcopy a { color: rgba(255,255,255,0.4); }
 .fcopy a:hover { color: var(--brass); }
-.footer-email {
-  display: inline-block;
-  margin-top: 0.75rem;
-  padding: 0.5rem 0.8rem;
-  background: rgba(201,162,39,0.08);
-  border: 1px solid rgba(201,162,39,0.25);
+.footer-contact-form {
+  margin-top: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+}
+.footer-contact-form input[type="email"],
+.footer-contact-form textarea {
+  width: 100%;
+  padding: 0.6rem 0.8rem;
   border-radius: var(--radius);
-  color: var(--brass);
-  font-family: Inter, sans-serif;
-  font-size: 0.85rem;
-  transition: all 0.2s;
-}
-.footer-email:hover {
-  background: rgba(201,162,39,0.12);
-  border-color: var(--brass);
+  border: 1px solid var(--line-brass);
+  background: rgba(255,255,255,0.06);
   color: #fff;
+  font-family: Inter, sans-serif;
+  font-size: 0.82rem;
+  line-height: 1.6;
+  outline: none;
+  box-sizing: border-box;
+  transition: border-color 0.2s, background 0.2s;
 }
+.footer-contact-form input[type="email"]:focus,
+.footer-contact-form textarea:focus {
+  border-color: var(--brass);
+  background: rgba(255,255,255,0.1);
+}
+.footer-contact-form input[type="email"]::placeholder,
+.footer-contact-form textarea::placeholder {
+  color: rgba(255,255,255,0.3);
+}
+.footer-textarea-wrap { position: relative; }
+.footer-contact-form textarea {
+  min-height: 84px;
+  padding-right: 2.6rem;
+  resize: vertical;
+}
+.footer-send-btn {
+  position: absolute;
+  right: 0.45rem;
+  bottom: 0.45rem;
+  width: 1.9rem;
+  height: 1.9rem;
+  border: none;
+  border-radius: 50%;
+  background: var(--brass);
+  color: var(--midnight);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.72rem;
+  transition: background 0.2s, transform 0.2s;
+}
+.footer-send-btn:hover {
+  background: var(--brass-bright);
+  transform: translateY(-1px);
+}
+.footer-send-btn:disabled {
+  opacity: 0.6;
+  cursor: default;
+  transform: none;
+}
+.footer-form-status {
+  font-size: 0.82rem;
+  line-height: 1.4;
+  color: #4ade80;
+  display: none;
+}
+.footer-form-status.visible { display: block; }
+.footer-form-status.error { color: #ef4444; }
 @media (max-width: 768px) {
   .fgrid { grid-template-columns: 1fr; }
   .footer { padding-top: 2.5rem; padding-bottom: 5rem; }