Buy Area

index.html

@@ -182,7 +182,7 @@
       .oca-empty{text-align:center;padding:2rem;color:rgba(255,255,255,.4);font-style:italic;display:none}
       .oca-loading{text-align:center;padding:2rem;color:rgba(255,255,255,.4);font-size:.88rem}
       /* Custom Quote Modal */
-      .ow-sub{font-size:.95rem;color:rgba(255,255,255,.7);margin-bottom:1.5rem}
+      .ow-sub{font-size:.95rem;color:var(--midnight);margin-bottom:1.5rem}
       .ow-panel input[type="text"],.ow-panel textarea{width:100%;padding:.8rem 1rem;border-radius:var(--radius);border:1px solid var(--line-brass);background:rgba(255,255,255,.05);color:#171c26;font-family:Inter,sans-serif;font-size:.88rem;outline:none;transition:border-color .2s,background .2s;box-sizing:border-box}
       .ow-panel input[type="text"]:focus,.ow-panel textarea:focus{border-color:var(--brass);background:rgba(255,255,255,.08)}
       .ow-panel textarea{min-height:100px;resize:vertical}
@@ -198,6 +198,9 @@
       #customQuoteModal .biz-field input[type="email"]::placeholder{color:rgba(23,28,38,.3)}
       #customQuoteModal .biz-field input[type="text"]{color:#171c26}
       #customQuoteModal .biz-field input[type="text"]::placeholder{color:rgba(23,28,38,.3)}
+      /* Success message sits on the light modal panel, so it needs dark text (the global .biz-success rules target the dark wizard section) */
+      #customQuoteModal .biz-success h3{color:var(--midnight)}
+      #customQuoteModal .biz-success p{color:var(--midnight)}
       @media(max-width:600px){.oca-table td,.oca-table th{padding:.5rem .65rem;font-size:.8rem}.ow-panel{left:5%;right:5%}.ow-close{top:.5rem;right:.5rem;font-size:1.6rem}}
     </style>
     <link rel="stylesheet" href="style.css" media="print" onload="this.media='all'" />
@@ -208,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">
@@ -369,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">
@@ -383,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>
@@ -402,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>
@@ -422,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>
@@ -626,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>
@@ -634,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>

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');
@@ -810,6 +810,9 @@ var si = 0,
                     document.getElementById('customQuoteForm').reset();
                     document.getElementById('customQuoteSuccess').style.display = 'none';
                 }
+                /* Expose to global scope so the inline onclick handlers in the modal markup can reach them */
+                window.openCustomQuoteModal = openCustomQuoteModal;
+                window.closeCustomQuoteModal = closeCustomQuoteModal;
                 document.addEventListener('keydown', function(e) {
                     if (e.key === 'Escape') {
                         var modal = document.getElementById('customQuoteModal');
@@ -840,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';
@@ -867,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);
+                    });
+                });
+            })();

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; }