Update index.html

index.html

@@ -7,10 +7,18 @@
             name="description"
             content="Odoo hosting, AI consulting and N8N automation. Reliable Odoo CE and Enterprise hosting with expert support, custom modules, and smart workflows."
         />
-        <title>ODOO4projects | Odoo Hosting, AI Consulting &amp; N8N Automation</title>
+        <title>
+            ODOO4projects | Odoo Hosting, AI Consulting &amp; N8N Automation
+        </title>
         <link rel="canonical" href="https://ODOO4projects.com/" />
-        <meta property="og:title" content="ODOO4projects | Odoo Hosting, AI Consulting &amp; N8N Automation" />
+        <meta
-        <meta property="og:description" content="Odoo hosting, AI consulting and N8N automation. Reliable Odoo CE and Enterprise hosting with expert support, custom modules, and smart workflows." />
+            property="og:title"
+            content="ODOO4projects | Odoo Hosting, AI Consulting &amp; N8N Automation"
+        />
+        <meta
+            property="og:description"
+            content="Odoo hosting, AI consulting and N8N automation. Reliable Odoo CE and Enterprise hosting with expert support, custom modules, and smart workflows."
+        />
         <meta property="og:type" content="website" />
         <meta property="og:url" content="https://ODOO4projects.com/" />
         <meta name="twitter:card" content="summary_large_image" />
@@ -28,9 +36,7 @@
                     "contactType": "customer support",
                     "url": "https://ODOO4projects.com/contactus"
                 },
-            "sameAs": [
+                "sameAs": ["https://www.linkedin.com/company/odooprojects"]
-                "https://www.linkedin.com/company/odooprojects"
-            ]
             }
         </script>
         <script type="application/ld+json">
@@ -43,8 +49,16 @@
         </script>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-        <link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700;800&display=swap" />
+        <link
-        <link rel="preload" as="style" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
+            rel="preload"
+            as="style"
+            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700;800&display=swap"
+        />
+        <link
+            rel="preload"
+            as="style"
+            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
+        />
         <link
             rel="stylesheet"
             href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Inter+Tight:wght@500;600;700;800&display=swap"
@@ -796,7 +810,10 @@
                 padding: 1.25rem;
                 display: flex;
                 flex-direction: column;
-                transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
+                transition:
+                    transform 0.2s,
+                    border-color 0.2s,
+                    box-shadow 0.2s;
             }
             .blog-card:hover {
                 transform: translateY(-2px);
@@ -851,7 +868,7 @@
                 margin-bottom: 0.4rem;
             }
             .blog-card h3 {
-                font-family: 'Inter Tight', sans-serif;
+                font-family: "Inter Tight", sans-serif;
                 font-size: 0.95rem;
                 font-weight: 600;
                 margin: 0 0 0.5rem;
@@ -906,7 +923,9 @@
                 color: #e8e8f0;
                 cursor: pointer;
                 font-family: Inter, sans-serif;
-                transition: border-color 0.2s, background 0.2s;
+                transition:
+                    border-color 0.2s,
+                    background 0.2s;
             }
             .blog-page-btn:hover:not(:disabled) {
                 border-color: #00f5ff;
@@ -955,7 +974,17 @@
                                     free trial &mdash; no credit card required!
                                 </p>
                                 <p>
-                                    <a class="btn btn-primary" href="/contactus"
+                                    <a
+                                        class="btn btn-primary btn-lg"
+                                        href="javascript:void(0)"
+                                        onclick="
+                                            openOrderWidget(
+                                                'On the Rise',
+                                                36.21,
+                                                395.0,
+                                                false,
+                                            )
+                                        "
                                         >Try Now</a
                                     >
                                 </p>
@@ -1092,7 +1121,7 @@
         </div>
 
         <div
-            id="pop"
+            id="orderWidgetOverlay"
             style="
                 display: none;
                 position: fixed;
@@ -1103,6 +1132,8 @@
                 justify-content: center;
             "
         >
+            <!-- Buy Panel (shown on manual button clicks) -->
+            <div id="orderPanelBuy" style="display: none">
                 <div
                     style="
                         background: #fff;
@@ -1110,11 +1141,11 @@
                         max-width: 460px;
                         width: 90%;
                         overflow: hidden;
+                        position: relative;
                     "
                 >
-                <div style="position: relative">
                     <button
-                        onclick="closepop()"
+                        onclick="closeOrderWidget()"
                         style="
                             position: absolute;
                             top: 0.75rem;
@@ -1133,7 +1164,165 @@
                     >
                         &times;
                     </button>
-                    <div style="padding: 2rem; text-align: center; border-radius: 0.8rem;">
+                    <div style="padding: 2rem">
+                        <h2
+                            style="
+                                font-size: clamp(1rem, 2vw, 1.24rem);
+                                margin-bottom: 0.5rem;
+                                color: #1b1319;
+                            "
+                            id="orderPlanTitle"
+                        >
+                            On the Rise
+                        </h2>
+                        <p
+                            style="
+                                font-size: 0.8rem;
+                                color: rgba(33, 37, 41, 0.6);
+                                margin-bottom: 1rem;
+                            "
+                        >
+                            <span id="orderPlanPrice">$ 36.21</span>
+                            <span id="orderPlanPeriod">/ month</span>
+                            <span
+                                id="orderPlanTax"
+                                style="
+                                    font-size: 0.7rem;
+                                    color: rgba(33, 37, 41, 0.45);
+                                "
+                            >
+                                + tax</span
+                            >
+                        </p>
+                        <p
+                            id="orderCouponMsg"
+                            style="
+                                font-size: 0.78rem;
+                                color: #28a745;
+                                margin-bottom: 1rem;
+                                display: none;
+                            "
+                        >
+                            Use coupon <strong>FREE TRIAL</strong> at checkout
+                            for 1 month free
+                        </p>
+                        <p
+                            id="orderYearlySave"
+                            style="
+                                font-size: 0.78rem;
+                                color: #28a745;
+                                margin-bottom: 1rem;
+                                display: none;
+                            "
+                        >
+                            Save <span id="orderSavePercent">15</span>% with
+                            yearly billing
+                        </p>
+                        <label
+                            style="
+                                font-size: 0.78rem;
+                                font-weight: 500;
+                                display: block;
+                                margin-bottom: 0.25rem;
+                                color: #1b1319;
+                            "
+                            >Server Location</label
+                        >
+                        <select
+                            id="orderServerLocation"
+                            style="
+                                width: 100%;
+                                padding: 0.6rem 0.8rem;
+                                font-size: 0.82rem;
+                                border: 1px solid #e5e3e0;
+                                border-radius: 0.5rem;
+                                background: #fff;
+                                color: #1b1319;
+                                margin-bottom: 1.5rem;
+                                font-family: Inter, sans-serif;
+                                cursor: pointer;
+                            "
+                        >
+                            <option value="USA">
+                                &#127482;&#127480; United States
+                            </option>
+                            <option value="Brazil">
+                                &#127463;&#127479; Brazil
+                            </option>
+                            <option value="India">
+                                &#127470;&#127475; India
+                            </option>
+                            <option value="Australia">
+                                &#127462;&#127482; Australia
+                            </option>
+                            <option value="Netherlands">
+                                &#127475;&#127473; Netherlands
+                            </option>
+                            <option value="UK">
+                                &#127468;&#127463; United Kingdom
+                            </option>
+                        </select>
+                        <a
+                            id="orderBuyBtn"
+                            href="/contactus"
+                            class="btn btn-primary btn-lg"
+                            style="
+                                width: 100%;
+                                text-align: center;
+                                display: block;
+                            "
+                        >
+                            Continue to Stripe &rarr;
+                        </a>
+                        <p
+                            style="
+                                font-size: 0.68rem;
+                                color: rgba(33, 37, 41, 0.45);
+                                text-align: center;
+                                margin-top: 0.6rem;
+                            "
+                        >
+                            &#128274; Secure Stripe checkout &middot; Credit
+                            card required
+                        </p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Free Trial Panel (shown on automatic scroll popup) -->
+            <div id="orderPanelTrial" style="display: none">
+                <div
+                    style="
+                        background: #fff;
+                        border-radius: 1rem;
+                        max-width: 460px;
+                        width: 90%;
+                        overflow: hidden;
+                        position: relative;
+                        text-align: center;
+                    "
+                >
+                    <button
+                        onclick="closeOrderWidget()"
+                        style="
+                            position: absolute;
+                            top: 0.75rem;
+                            right: 0.75rem;
+                            z-index: 10;
+                            background: #fff;
+                            border: none;
+                            width: 2.4rem;
+                            height: 2.4rem;
+                            border-radius: 50%;
+                            cursor: pointer;
+                            font-size: 1.3rem;
+                            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                            color: #555;
+                        "
+                    >
+                        &times;
+                    </button>
+                    <div style="padding: 2rem 2rem 1.5rem">
                         <h2
                             style="
                                 font-size: clamp(1rem, 2vw, 1.24rem);
@@ -1147,14 +1336,32 @@
                             style="
                                 font-size: 0.8rem;
                                 color: rgba(33, 37, 41, 0.7);
+                                margin-bottom: 1.5rem;
                             "
                         >
-                                No credit card required
+                            Credit card required &middot; Cancel anytime
                         </p>
-                            <a class="btn btn-primary btn-lg" href="/contactus"
+                        <a
-                                >Try Now</a
+                            href="javascript:void(0)"
+                            class="btn btn-primary btn-lg"
+                            onclick="switchToBuyPanel()"
+                            style="
+                                background: #714b67;
+                                border-color: #714b67;
+                                color: #fff;
+                                display: inline-block;
+                            "
+                            >Select a Plan</a
                         >
-                        </div>
+                        <p
+                            style="
+                                font-size: 0.68rem;
+                                color: rgba(33, 37, 41, 0.45);
+                                margin-top: 0.8rem;
+                            "
+                        >
+                            &#128274; Secure &middot; No commitment
+                        </p>
                     </div>
                 </div>
             </div>
@@ -1164,8 +1371,8 @@
             <div class="container">
                 <div class="hr"></div>
                 <h1>
-                    Effortless Odoo Community Hosting with AI-Powered Automation &mdash;
+                    Effortless Odoo Community Hosting with AI-Powered Automation
-                    Scale Your Business Seamlessly
+                    &mdash; Scale Your Business Seamlessly
                 </h1>
             </div>
         </section>
@@ -1303,28 +1510,47 @@
                     <h2>Your Plan, Your Timing: Upgrade Anytime</h2>
                 </div>
                 <div class="billing-toggle-wrap">
-                    <span class="toggle-label toggle-label-monthly active">Monthly</span>
+                    <span class="toggle-label toggle-label-monthly active"
+                        >Monthly</span
+                    >
                     <div class="toggle-switch" id="billingSwitch">
                         <div class="thumb"></div>
                     </div>
-                    <span class="toggle-label toggle-label-yearly">Yearly <small>1 month free</small></span>
+                    <span class="toggle-label toggle-label-yearly"
+                        >Yearly <small>1 month free</small></span
+                    >
                 </div>
                 <div class="pgrid">
                     <div class="pcard">
                         <div class="pcard-body">
                             <h3>Side Hustle</h3>
                             <div class="price">
-                                    <strong class="price-amount" data-monthly="19.62" data-yearly="214.00">$ 19.62</strong>
+                                <strong
+                                    class="price-amount"
+                                    data-monthly="19.62"
+                                    data-yearly="214.00"
+                                    >$ 19.62</strong
+                                >
                                 <small class="price-period">/ month</small>
-                                    <div class="price-save" style="display:none;">1 month free</div>
+                                <div class="price-save" style="display: none">
+                                    1 month free
+                                </div>
                             </div>
                             <p class="desc">
                                 &ldquo;ODOO Standard .. that is all my business
                                 needs&rdquo;
                             </p>
                             <a
-                                href="/3/214.00/4/Side%20Hustle"
+                                href="javascript:void(0)"
                                 class="btn btn-primary"
+                                onclick="
+                                    openOrderWidget(
+                                        'Side Hustle',
+                                        19.62,
+                                        214.0,
+                                        false,
+                                    )
+                                "
                                 >Buy Now</a
                             >
                             <ul>
@@ -1366,17 +1592,32 @@
                         <div class="pcard-body">
                             <h3>On the Rise</h3>
                             <div class="price">
-                                    <strong class="price-amount" data-monthly="36.21" data-yearly="395.00">$ 36.21</strong>
+                                <strong
+                                    class="price-amount"
+                                    data-monthly="36.21"
+                                    data-yearly="395.00"
+                                    >$ 36.21</strong
+                                >
                                 <small class="price-period">/ month</small>
-                                    <div class="price-save" style="display:none;">1 month free</div>
+                                <div class="price-save" style="display: none">
+                                    1 month free
+                                </div>
                             </div>
                             <p class="desc">
                                 &ldquo;I need some modules and professional
                                 reports&rdquo;
                             </p>
                             <a
-                                href="/4/395.00/4/On%20the%20Rise"
+                                href="javascript:void(0)"
                                 class="btn btn-primary"
+                                onclick="
+                                    openOrderWidget(
+                                        'On the Rise',
+                                        36.21,
+                                        395.0,
+                                        false,
+                                    )
+                                "
                                 >Buy Now</a
                             >
                             <ul>
@@ -1418,16 +1659,31 @@
                         <div class="pcard-body">
                             <h3>Powerhouse</h3>
                             <div class="price">
-                                    <strong class="price-amount" data-monthly="54.54" data-yearly="595.00">$ 54.54</strong>
+                                <strong
+                                    class="price-amount"
+                                    data-monthly="54.54"
+                                    data-yearly="595.00"
+                                    >$ 54.54</strong
+                                >
                                 <small class="price-period">/ month</small>
-                                    <div class="price-save" style="display:none;">1 month free</div>
+                                <div class="price-save" style="display: none">
+                                    1 month free
+                                </div>
                             </div>
                             <p class="desc">
                                 &ldquo;ODOO Enterprise is a must have!&rdquo;
                             </p>
                             <a
-                                href="/5/595.00/4/Powerhouse"
+                                href="javascript:void(0)"
                                 class="btn btn-primary"
+                                onclick="
+                                    openOrderWidget(
+                                        'Powerhouse',
+                                        54.54,
+                                        595.0,
+                                        false,
+                                    )
+                                "
                                 >Buy Now</a
                             >
                             <ul>
@@ -1463,14 +1719,31 @@
                         <div class="pcard-body">
                             <h3>Empire</h3>
                             <div class="price">
-                                    <strong class="price-amount" data-monthly="86.67" data-yearly="950.00">&gt;$ 86.67</strong>
+                                <strong
+                                    class="price-amount"
+                                    data-monthly="86.67"
+                                    data-yearly="950.00"
+                                    >&gt;$ 86.67</strong
+                                >
                                 <small class="price-period">/ month</small>
-                                    <div class="price-save" style="display:none;">1 month free</div>
+                                <div class="price-save" style="display: none">
+                                    1 month free
+                                </div>
                             </div>
                             <p class="desc">
                                 &ldquo;My house! My Horse! My Server!&rdquo;
                             </p>
-                            <a href="/contactus" class="btn btn-outline-primary"
+                            <a
+                                href="javascript:void(0)"
+                                class="btn btn-outline-primary"
+                                onclick="
+                                    openOrderWidget(
+                                        'Empire',
+                                        86.67,
+                                        950.0,
+                                        true,
+                                    )
+                                "
                                 >Contact Us</a
                             >
                             <ul>
@@ -1513,7 +1786,12 @@
                     <h2>Latest from the Blog</h2>
                 </div>
                 <div class="blog-search-wrap">
-                    <input type="text" class="blog-search" id="blogSearch" placeholder="Search posts..." />
+                    <input
+                        type="text"
+                        class="blog-search"
+                        id="blogSearch"
+                        placeholder="Search posts..."
+                    />
                 </div>
                 <div class="blog-grid" id="blogGrid"></div>
                 <div class="blog-pagination" id="blogPagination"></div>
@@ -1732,16 +2010,18 @@
             }
 
             setTimeout(function () {
-                document.getElementById("pop").style.display = "flex";
+                var blogSection = document.getElementById("blog");
-            }, 5000);
+                if (blogSection) {
-            function closepop() {
+                    function onBlogScroll() {
-                document.getElementById("pop").style.display = "none";
+                        var rect = blogSection.getBoundingClientRect();
+                        if (rect.top < window.innerHeight && rect.bottom > 0) {
+                            openTrialWidget();
+                            window.removeEventListener("scroll", onBlogScroll);
                         }
-            document
+                    }
-                .getElementById("pop")
+                    window.addEventListener("scroll", onBlogScroll);
-                .addEventListener("click", function (e) {
+                }
-                    if (e.target === this) closepop();
+            }, 3000);
-                });
 
             document.querySelectorAll(".tab-btn").forEach(function (b) {
                 b.addEventListener("click", function () {
@@ -1760,6 +2040,89 @@
                 });
             });
 
+            /* ---- Order Widget ---- */
+            var orderPopupShown = false;
+            function openOrderWidget(
+                plan,
+                monthlyPrice,
+                yearlyPrice,
+                isEmpire,
+            ) {
+                document.getElementById("orderPanelTrial").style.display =
+                    "none";
+                document.getElementById("orderPanelBuy").style.display =
+                    "block";
+                var widget = document.getElementById("orderWidgetOverlay");
+                document.getElementById("orderPlanTitle").textContent = plan;
+                var yearly = yearlyMode;
+                var price = yearly ? yearlyPrice : monthlyPrice;
+                var amountEl = document.getElementById("orderPlanPrice");
+                var prefix = isEmpire ? ">$" : "$";
+                amountEl.textContent = prefix + " " + price.toFixed(2);
+                document.getElementById("orderPlanPeriod").textContent = yearly
+                    ? "/ year"
+                    : "/ month";
+                var couponMsg = document.getElementById("orderCouponMsg");
+                var yearlySave = document.getElementById("orderYearlySave");
+                if (!yearly) {
+                    couponMsg.style.display = "block";
+                    yearlySave.style.display = "none";
+                } else {
+                    couponMsg.style.display = "none";
+                    yearlySave.style.display = "block";
+                    var saved = Math.round(
+                        (1 - yearlyPrice / (monthlyPrice * 12)) * 100,
+                    );
+                    document.getElementById("orderSavePercent").textContent =
+                        saved;
+                }
+                var buyBtn = document.getElementById("orderBuyBtn");
+                var loc = document.getElementById("orderServerLocation").value;
+                buyBtn.href =
+                    "/3/" +
+                    price.toFixed(2) +
+                    "/4/" +
+                    encodeURIComponent(plan) +
+                    "?location=" +
+                    encodeURIComponent(loc);
+                widget.style.display = "flex";
+                orderPopupShown = true;
+            }
+            function openTrialWidget() {
+                document.getElementById("orderPanelBuy").style.display = "none";
+                document.getElementById("orderPanelTrial").style.display =
+                    "block";
+                document.getElementById("orderWidgetOverlay").style.display =
+                    "flex";
+                orderPopupShown = true;
+            }
+            function switchToBuyPanel() {
+                openOrderWidget("On the Rise", 36.21, 395.0, false);
+            }
+            function closeOrderWidget() {
+                document.getElementById("orderWidgetOverlay").style.display =
+                    "none";
+            }
+            document
+                .getElementById("orderServerLocation")
+                .addEventListener("change", function () {
+                    var plan =
+                        document.getElementById("orderPlanTitle").textContent;
+                    var priceText = document
+                        .getElementById("orderPlanPrice")
+                        .textContent.replace(">$", "")
+                        .replace("$", "")
+                        .trim();
+                    var price = parseFloat(priceText);
+                    var loc = this.value;
+                    document.getElementById("orderBuyBtn").href =
+                        "/3/" +
+                        price.toFixed(2) +
+                        "/4/" +
+                        encodeURIComponent(plan) +
+                        "?location=" +
+                        encodeURIComponent(loc);
+                });
             /* ---- Billing Toggle ---- */
             var yearlyMode = false;
             var biSwitch = document.getElementById("billingSwitch");
@@ -1771,8 +2134,11 @@
                 var amounts = document.querySelectorAll(".price-amount");
                 for (var k = 0; k < amounts.length; k++) {
                     var el = amounts[k];
-                    var val = yearly ? el.getAttribute("data-yearly") : el.getAttribute("data-monthly");
+                    var val = yearly
-                    var prefix = el.textContent.trim().charAt(0) === ">" ? ">" : "";
+                        ? el.getAttribute("data-yearly")
+                        : el.getAttribute("data-monthly");
+                    var prefix =
+                        el.textContent.trim().charAt(0) === ">" ? ">" : "";
                     el.textContent = prefix + "$ " + parseFloat(val).toFixed(2);
                 }
                 var periods = document.querySelectorAll(".price-period");
@@ -1815,51 +2181,108 @@
                 filteredPosts: [],
                 currentPage: 1,
                 perPage: 6,
-                searchTerm: ""
+                searchTerm: "",
             };
 
             function formatDate(dateStr) {
                 var d = new Date(dateStr + "T00:00:00Z");
-                var months = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
+                var months = [
-                return months[d.getUTCMonth()] + " " + d.getUTCDate() + ", " + d.getUTCFullYear();
+                    "Jan",
+                    "Feb",
+                    "Mar",
+                    "Apr",
+                    "May",
+                    "Jun",
+                    "Jul",
+                    "Aug",
+                    "Sep",
+                    "Oct",
+                    "Nov",
+                    "Dec",
+                ];
+                return (
+                    months[d.getUTCMonth()] +
+                    " " +
+                    d.getUTCDate() +
+                    ", " +
+                    d.getUTCFullYear()
+                );
             }
 
             function badgeClass(area) {
-                var m = {"speed-run":"speed-run","guide":"guide","howto":"howto","news":"news"};
+                var m = {
+                    "speed-run": "speed-run",
+                    guide: "guide",
+                    howto: "howto",
+                    news: "news",
+                };
                 return m[area] || "default";
             }
 
             function renderBlog() {
                 var grid = document.getElementById("blogGrid");
                 var search = (blogState.searchTerm || "").toLowerCase();
-                blogState.filteredPosts = blogState.allPosts.filter(function(p) {
+                blogState.filteredPosts = blogState.allPosts.filter(
+                    function (p) {
                         if (!search) return true;
-                    return (p.headline + " " + p.teaser).toLowerCase().indexOf(search) !== -1;
+                        return (
-                });
+                            (p.headline + " " + p.teaser)
+                                .toLowerCase()
+                                .indexOf(search) !== -1
+                        );
+                    },
+                );
                 var total = blogState.filteredPosts.length;
-                var totalPages = Math.max(1, Math.ceil(total / blogState.perPage));
+                var totalPages = Math.max(
-                if (blogState.currentPage > totalPages) blogState.currentPage = totalPages;
+                    1,
+                    Math.ceil(total / blogState.perPage),
+                );
+                if (blogState.currentPage > totalPages)
+                    blogState.currentPage = totalPages;
                 var start = (blogState.currentPage - 1) * blogState.perPage;
-                var pagePosts = blogState.filteredPosts.slice(start, start + blogState.perPage);
+                var pagePosts = blogState.filteredPosts.slice(
+                    start,
+                    start + blogState.perPage,
+                );
 
                 var html = "";
                 if (pagePosts.length === 0) {
-                    html = "<div class=\"blog-empty\">No posts match your search.</div>";
+                    html =
+                        '<div class="blog-empty">No posts match your search.</div>';
                 } else {
                     for (var i = 0; i < pagePosts.length; i++) {
                         var p = pagePosts[i];
                         var bc = badgeClass(p.area);
                         var agentHtml = "";
-                        if (p.agent) agentHtml = "<span class=\"blog-agent\">" + p.agent + "</span>";
+                        if (p.agent)
-                        html += "<div class=\"blog-card\">" +
+                            agentHtml =
-                            "<div class=\"blog-card-top\">" +
+                                '<span class="blog-agent">' +
-                            "<span class=\"blog-badge blog-badge-" + bc + "\">" + p.area + "</span>" +
+                                p.agent +
+                                "</span>";
+                        html +=
+                            '<div class="blog-card">' +
+                            '<div class="blog-card-top">' +
+                            '<span class="blog-badge blog-badge-' +
+                            bc +
+                            '">' +
+                            p.area +
+                            "</span>" +
                             agentHtml +
                             "</div>" +
-                            "<div class=\"blog-date\">" + formatDate(p.date) + "</div>" +
+                            '<div class="blog-date">' +
-                            "<h3><a href=\"" + p.link + "\">" + p.headline + "</a></h3>" +
+                            formatDate(p.date) +
-                            "<p class=\"blog-teaser\">" + p.teaser + "</p>" +
+                            "</div>" +
-                            "<a href=\"" + p.link + "\" class=\"blog-readmore\">Read more &rarr;</a>" +
+                            '<h3><a href="' +
+                            p.link +
+                            '">' +
+                            p.headline +
+                            "</a></h3>" +
+                            '<p class="blog-teaser">' +
+                            p.teaser +
+                            "</p>" +
+                            '<a href="' +
+                            p.link +
+                            '" class="blog-readmore">Read more &rarr;</a>' +
                             "</div>";
                     }
                 }
@@ -1868,11 +2291,38 @@
                 var pag = document.getElementById("blogPagination");
                 var pagHtml = "";
                 if (totalPages > 1) {
-                    pagHtml += "<button class=\"blog-page-btn\" onclick=\"blogGo(1)\"" + (blogState.currentPage <= 1 ? " disabled\"" : "\"") + ">&laquo;</button>";
+                    pagHtml +=
-                    pagHtml += "<button class=\"blog-page-btn\" onclick=\"blogGo(" + (blogState.currentPage - 1) + ")\"" + (blogState.currentPage <= 1 ? " disabled\"" : "\"") + ">&lsaquo; Prev</button>";
+                        '<button class="blog-page-btn" onclick="blogGo(1)"' +
-                    pagHtml += "<span class=\"blog-page-info\">Page " + blogState.currentPage + " of " + totalPages + "</span>";
+                        (blogState.currentPage <= 1 ? ' disabled"' : '"') +
-                    pagHtml += "<button class=\"blog-page-btn\" onclick=\"blogGo(" + (blogState.currentPage + 1) + ")\"" + (blogState.currentPage >= totalPages ? " disabled\"" : "\"") + ">Next &rsaquo;</button>";
+                        ">&laquo;</button>";
-                    pagHtml += "<button class=\"blog-page-btn\" onclick=\"blogGo(" + totalPages + ")\"" + (blogState.currentPage >= totalPages ? " disabled\"" : "\"") + ">&raquo;</button>";
+                    pagHtml +=
+                        '<button class="blog-page-btn" onclick="blogGo(' +
+                        (blogState.currentPage - 1) +
+                        ')"' +
+                        (blogState.currentPage <= 1 ? ' disabled"' : '"') +
+                        ">&lsaquo; Prev</button>";
+                    pagHtml +=
+                        '<span class="blog-page-info">Page ' +
+                        blogState.currentPage +
+                        " of " +
+                        totalPages +
+                        "</span>";
+                    pagHtml +=
+                        '<button class="blog-page-btn" onclick="blogGo(' +
+                        (blogState.currentPage + 1) +
+                        ')"' +
+                        (blogState.currentPage >= totalPages
+                            ? ' disabled"'
+                            : '"') +
+                        ">Next &rsaquo;</button>";
+                    pagHtml +=
+                        '<button class="blog-page-btn" onclick="blogGo(' +
+                        totalPages +
+                        ')"' +
+                        (blogState.currentPage >= totalPages
+                            ? ' disabled"'
+                            : '"') +
+                        ">&raquo;</button>";
                 }
                 pag.innerHTML = pagHtml;
             }
@@ -1883,16 +2333,21 @@
             }
 
             fetch("blog/index.json?_=" + Date.now())
-                .then(function(r) { return r.json(); })
+                .then(function (r) {
+                    return r.json();
+                })
                 .then(function (data) {
                     blogState.allPosts = data.posts;
                     renderBlog();
                 })
                 .catch(function () {
-                    document.getElementById("blogGrid").innerHTML = "<div class=\"blog-empty\">Could not load blog posts.</div>";
+                    document.getElementById("blogGrid").innerHTML =
+                        '<div class="blog-empty">Could not load blog posts.</div>';
                 });
 
-            document.getElementById("blogSearch").addEventListener("input", function() {
+            document
+                .getElementById("blogSearch")
+                .addEventListener("input", function () {
                     blogState.searchTerm = this.value;
                     blogState.currentPage = 1;
                     renderBlog();