From 43d66fd295122ea1b84a826b3153eceb979cea44 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Tue, 5 May 2026 17:28:30 -0300
Subject: [PATCH] content: add Schedule a Meeting button with calendar modal
 next to trial widget

---
 index.html | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 178 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 8c82b5c..8a5b9e3 100644
--- a/index.html
+++ b/index.html
@@ -2083,10 +2083,131 @@
                 color: var(--gold);
             }
 
+            /* ── Article actions row (schedule + trial) ──────────────────── */
+            #article-actions {
+                display: flex;
+                align-items: stretch;
+                gap: 12px;
+                margin: 2.5rem 0 0 auto;
+                width: fit-content;
+            }
+
+            .article-schedule-btn {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 6px;
+                width: 150px;
+                background: #fdf6ee;
+                border: 1px solid rgba(93, 64, 55, 0.22);
+                border-top: 3px solid #8d6e63;
+                border-radius: 6px;
+                box-shadow:
+                    0 8px 32px rgba(62, 39, 35, 0.18),
+                    0 2px 8px rgba(0, 0, 0, 0.08);
+                padding: 18px 14px;
+                cursor: pointer;
+                transition: border-top-color 0.2s, box-shadow 0.2s;
+                text-align: center;
+            }
+
+            .article-schedule-btn:hover {
+                border-top-color: var(--gold);
+                box-shadow:
+                    0 12px 40px rgba(62, 39, 35, 0.22),
+                    0 2px 8px rgba(0, 0, 0, 0.1);
+            }
+
+            .article-schedule-icon {
+                font-size: 1.6rem;
+                line-height: 1;
+            }
+
+            .article-schedule-label {
+                font-family: Georgia, "Times New Roman", serif;
+                font-size: 0.83rem;
+                font-weight: 700;
+                color: #3e2723;
+                line-height: 1.3;
+            }
+
+            .article-schedule-sub {
+                font-family: "Segoe UI", system-ui, sans-serif;
+                font-size: 0.68rem;
+                color: #8d6e63;
+                font-style: italic;
+                line-height: 1.4;
+            }
+
+            /* ── Calendar modal ──────────────────────────────────────────────── */
+            #cal-overlay {
+                position: fixed;
+                inset: 0;
+                z-index: 9600;
+                display: none;
+                align-items: center;
+                justify-content: center;
+                padding: 20px;
+                background: rgba(62, 39, 35, 0.88);
+                backdrop-filter: blur(18px);
+                -webkit-backdrop-filter: blur(18px);
+            }
+
+            #cal-overlay.is-open {
+                display: flex;
+                animation: articleOverlayIn 0.3s ease-out;
+            }
+
+            #cal-box {
+                position: relative;
+                width: 100%;
+                max-width: 820px;
+                height: 80vh;
+                background: #fdf6ee;
+                border-radius: 6px;
+                border: 1px solid rgba(93, 64, 55, 0.22);
+                box-shadow:
+                    0 40px 100px rgba(0, 0, 0, 0.35),
+                    0 0 0 1px rgba(255, 243, 224, 0.15);
+                overflow: hidden;
+                animation: articleFlyIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
+            }
+
+            #cal-box iframe {
+                width: 100%;
+                height: 100%;
+                border: none;
+                display: block;
+            }
+
+            #cal-close {
+                position: absolute;
+                top: 10px;
+                right: 10px;
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                border: none;
+                background: rgba(93, 64, 55, 0.12);
+                color: #8d6e63;
+                font-size: 1.2rem;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition: background 0.2s, color 0.2s;
+                z-index: 2;
+            }
+
+            #cal-close:hover {
+                background: rgba(230, 81, 0, 0.12);
+                color: var(--gold);
+            }
+
             /* ── Article CTA panel ─────────────────────────────────────────── */
             #article-cta-panel {
                 width: 260px;
-                margin: 2.5rem 0 0 auto;
                 background: #fdf6ee;
                 border: 1px solid rgba(93, 64, 55, 0.22);
                 border-top: 3px solid var(--gold);
@@ -2258,7 +2379,13 @@
                     font-size: 0.95rem;
                     column-width: 280px;
                 }
-                #article-cta-panel { width: 100%; margin-top: 2rem; }
+                #article-actions {
+                    flex-direction: column;
+                    width: 100%;
+                    margin-top: 2rem;
+                }
+                #article-schedule-btn,
+                #article-cta-panel { width: 100%; }
             }
 
             #modal-confirm .confirm-title {
@@ -2626,6 +2753,13 @@
                 <div class="article-body" id="article-body">
                     <div id="article-content"></div>
 
+                    <div id="article-actions">
+                        <button id="article-schedule-btn" class="article-schedule-btn" type="button">
+                            <span class="article-schedule-icon">&#128197;</span>
+                            <span class="article-schedule-label">Schedule a Meeting</span>
+                            <span class="article-schedule-sub">Pick a time that works for you</span>
+                        </button>
+
                     <div id="article-cta-panel">
                         <div id="article-cta-form-wrap">
                             <p class="article-cta-heading">Try ODOO Free &mdash; 4&nbsp;Weeks</p>
@@ -2671,11 +2805,20 @@
                             <p class="article-cta-confirm-sub">We&rsquo;ve received your request. A specialist will be in touch within one business day.</p>
                         </div>
                     </div>
+
+                    </div>
                 </div>
 
             </div>
         </div>
 
+        <div id="cal-overlay">
+            <div id="cal-box">
+                <button id="cal-close" aria-label="Close calendar">&times;</button>
+                <iframe id="cal-iframe" src="" frameborder="0" allowfullscreen></iframe>
+            </div>
+        </div>
+
         <section id="story">
             <div class="story-grid">
                 <div
@@ -4329,6 +4472,39 @@
                     });
                     observer.observe(articleOverlay, { attributes: true, attributeFilter: ['class'] });
                 }
+
+                /* ── Calendar modal ───────────────────────────────────────── */
+                var CAL_URL    = 'https://calendar.google.com/calendar/u/0/appointments/schedules/AcZssZ3DDbaiHFlhNhWySszAQoPXE_H73QLqYT3w7H9IYWC76RA_TgNIhLESjb4N7ep_D2D_OyW9q4-c';
+                var calOverlay = document.getElementById('cal-overlay');
+                var calIframe  = document.getElementById('cal-iframe');
+                var calClose   = document.getElementById('cal-close');
+                var schedBtn   = document.getElementById('article-schedule-btn');
+
+                function openCal() {
+                    calIframe.src = CAL_URL;
+                    calOverlay.classList.add('is-open');
+                    document.body.style.overflow = 'hidden';
+                }
+
+                function closeCal() {
+                    calOverlay.classList.remove('is-open');
+                    document.body.style.overflow = '';
+                    setTimeout(function () { calIframe.src = ''; }, 300);
+                }
+
+                if (schedBtn)  schedBtn.addEventListener('click', openCal);
+                if (calClose)  calClose.addEventListener('click', closeCal);
+                if (calOverlay) {
+                    calOverlay.addEventListener('click', function (e) {
+                        if (e.target === calOverlay) closeCal();
+                    });
+                }
+
+                document.addEventListener('keydown', function (e) {
+                    if (e.key === 'Escape' && calOverlay && calOverlay.classList.contains('is-open')) {
+                        closeCal();
+                    }
+                });
             })();
         </script>