{"id":1194,"date":"2025-02-11T17:37:36","date_gmt":"2025-02-11T12:07:36","guid":{"rendered":"https:\/\/luxhospitals.com\/blog\/?page_id=1194"},"modified":"2025-07-23T15:19:51","modified_gmt":"2025-07-23T09:49:51","slug":"new-home-page","status":"publish","type":"page","link":"https:\/\/luxhospitals.com\/blog\/","title":{"rendered":"New Home Page"},"content":{"rendered":"    <style>\n      \/* ========== FILTER BUTTONS (same as your current) ========== *\/\n      .lux-cat-btn {\n        display: inline-block;\n        background: #FFFFFF;\n        color: #502b9c;\n        border: #E2E8F0 1px solid;\n        border-radius: 24px;\n        padding: 9px 26px;\n        font-size: 17px;\n        margin: 0 10px 13px 0;\n        transition: 0.2s;\n        cursor: pointer;\n        font-weight: 500;\n        text-decoration: none;\n      }\n      .lux-cat-btn.active, .lux-cat-btn:hover {\n        background: #915097;\n        color: #fff;\n      }\n\n      \/* ========== PAGE \/ CONTAINER (match design view) ========== *\/\n      .category-container {\n        max-width: 1320px;\n        width: 90%;\n        margin: 0 auto;\n        padding: 100px 0 50px 0;\n\t\tmargin-top:5%;\n      }\n\n      \/* Optional title\/desc alignment like your design view *\/\n      .lux-category-title {\n        margin-bottom: 12px;\n        text-align: center;\n        font-size: 36px;\n        font-weight: 700;\n        color: #111827;\n      }\n      .lux-category-desc {\n        margin: 0 auto 28px auto;\n        text-align: center;\n        color: #777;\n        font-size: 1.1rem;\n        max-width: 600px;\n        padding: 0 2rem;\n      }\n\n      \/* ========== GRID (match design view) ========== *\/\n      .blog-card-grid {\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 32px;\n        margin: 48px auto;\n        padding: 0;\n      }\n      @media (max-width: 1100px) {\n        .blog-card-grid { grid-template-columns: 1fr 1fr; }\n      }\n      @media (max-width: 700px) {\n        .blog-card-grid { grid-template-columns: 1fr; }\n        .category-container { padding-left: 0; padding-right: 0; margin-top:15%;}\n      }\n\n      \/* ========== CARD (match design view) ========== *\/\n      .blog-card {\n        background: #fff;\n        border-radius: 12px;\n        box-shadow: 0 6px 24px 0 rgba(40,40,80,0.10);\n        overflow: hidden;\n        transition: box-shadow 0.2s cubic-bezier(.4,0,.2,1), transform 0.2s cubic-bezier(.4,0,.2,1);\n        display: flex;\n        flex-direction: column;\n        min-width: 0;\n        height: 100%;\n        position: relative;\n        text-decoration: none;\n        color: inherit;\n      }\n\n      .blog-card__thumb-wrap {\n        position: relative;\n        overflow: hidden;\n        border-top-left-radius: 18px;\n        border-top-right-radius: 18px;\n        width: 100%;\n        aspect-ratio: 3\/2;\n        background: #eaeaea;\n      }\n\n      .blog-card:hover {\n        box-shadow: 0 14px 36px 0 rgba(80, 43, 156, 0.16);\n        transform: translateY(-4px) scale(1.012);\n      }\n\n      .blog-card:hover .blog-card__thumb {\n        transform: scale(1.065);\n        filter: brightness(0.96) saturate(1.12);\n      }\n      .blog-card:hover .blog-card__title{\n        color: #915097;\n      }\n\n      .blog-card__thumb {\n        width: 100%;\n        height: 100%;\n        aspect-ratio: 16 \/ 9;\n        object-fit: fill;\n        background: #eaeaea;\n        border-top-left-radius: 18px;\n        border-top-right-radius: 18px;\n        display: block;\n        transition: transform .35s cubic-bezier(.32,1.4,.33,1), filter .22s;\n      }\n\n      .blog-card__body {\n        padding: 20px 24px 18px 24px;\n        flex: 1 1 auto;\n        display: flex;\n        flex-direction: column;\n        justify-content: flex-start;\n      }\n\n      .blog-card__title {\n        font-size: 18px;\n        font-weight: 900 !important;\n        color: #000;\n        margin: 0 0 8px 0;\n        line-height: 1.2;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      .blog-card__excerpt {\n        font-size: 16px;\n        color: #5d6071;\n        margin: 0 0 18px 0;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n      }\n\n      .blog-card__readmore {\n        font-weight: 500;\n        color: #915097;\n        display: inline-flex;\n        align-items: center;\n        gap: 7px;\n        text-decoration: none;\n        margin-top: auto;\n        font-size: 16px;\n        transition: color 0.18s cubic-bezier(.4,0,.2,1);\n      }\n\n      .blog-card__readmore svg {\n        stroke: #915097;\n        transition: stroke 0.18s cubic-bezier(.4,0,.2,1);\n      }\n\n      .blog-card__readmore:hover,\n      .blog-card:hover .blog-card__readmore {\n        color: #502b9c;\n        text-decoration: underline;\n      }\n\n      .blog-card__readmore:hover svg,\n      .blog-card:hover .blog-card__readmore svg {\n        stroke: #502b9c;\n      }\n\n      \/* ========== LOAD MORE (match design view) ========== *\/\n      #lux-load-more.lux-loadmore-btn{\n        background: #FFFFFF;\n        color: #502b9c;\n        border: #E2E8F0 1px solid;\n        border-radius: 24px;\n        padding: 9px 26px;\n        font-size: 17px;\n        transition: 0.2s;\n        cursor: pointer;\n        font-weight: 500;\n        text-align: center;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 12%;\n        margin: 40px auto 10px auto;\n      }\n      @media (max-width: 900px){\n        #lux-load-more.lux-loadmore-btn{ width: 40%; }\n      }\n      @media (max-width: 600px){\n        #lux-load-more.lux-loadmore-btn{ width: 70%; }\n      }\n\n      .lux-loadmore-status{\n        color:#6e7191;\n        font-size:15px;\n        text-align:center;\n        margin-top:10px;\n      }\n    <\/style>\n\n    <div class=\"lux-cat-filter-wrap_blog\" id=\"lux-filter-bar\"><\/div>\n\n    <div class=\"category-container\">\n      <div class=\"lux-category-title\" id=\"lux-category-title\"><\/div>\n      <div class=\"lux-category-desc\" id=\"lux-category-desc\"><\/div>\n\n      <div class=\"blog-card-grid\" id=\"lux-posts-list\"><\/div>\n\n      <button id=\"lux-load-more\" class=\"lux-loadmore-btn\" style=\"display:none\" type=\"button\">\n        Load More\n      <\/button>\n      <div class=\"lux-loadmore-status\" id=\"lux-loadmore-status\" aria-live=\"polite\"><\/div>\n    <\/div>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function () {\n      \/* ========== SAFETY GUARD ========== *\/\n      if (window.luxHomeBlogInit) return;\n      window.luxHomeBlogInit = true;\n\n      \/* ========== FILTER BAR (NAVIGATION ONLY) ========== *\/\n      const categories = [\n        { label: \"Proctology\", slug: \"proctology\", url: \"https:\/\/luxhospitals.com\/blog\/category\/proctology\/\" },\n        { label: \"General and Laparoscopic\", slug: \"general-surgery\", url: \"https:\/\/luxhospitals.com\/blog\/category\/general-surgery\/\" },\n\t\t{ label: \"Surgical Gastroenterology\", slug: \"surgical-gastroenterology\/\", url: \"https:\/\/luxhospitals.com\/blog\/category\/surgical-gastroenterology\/\" },\n        { label: \"Gynecology\", slug: \"gynecology\", url: \"https:\/\/luxhospitals.com\/blog\/category\/gynecology\/\" },\n        { label: \"Urology\", slug: \"urology\", url: \"https:\/\/luxhospitals.com\/blog\/category\/urology\/\" },\n        { label: \"Plastic and Cosmetic\", slug: \"plastic-and-cosmetic\", url: \"https:\/\/luxhospitals.com\/blog\/category\/plastic-and-cosmetic\/\" },\n        { label: \"Orthopaedic\", slug: \"orthopaedic\", url: \"https:\/\/luxhospitals.com\/blog\/category\/orthopaedic\/\" },\n        { label: \"General\", slug: \"general\", url: \"https:\/\/luxhospitals.com\/blog\/category\/general\/\" }\n      ];\n\n      const filterBar = document.getElementById(\"lux-filter-bar\");\n      const currentPath = window.location.pathname.replace(\/\\\/$\/, \"\");\n\n      if (filterBar) {\n        categories.forEach(cat => {\n          const link = document.createElement(\"a\");\n          link.href = cat.url;\n          link.textContent = cat.label;\n          link.className = \"lux-cat-btn\";\n          if (currentPath.includes(`\/category\/${cat.slug}`)) link.classList.add(\"active\");\n          filterBar.appendChild(link);\n        });\n      }\n\n      \/* ========== BLOG GRID (REST API) ========== *\/\n      const API_BASE = \"https:\/\/luxhospitals.com\/blog\/wp-json\/wp\/v2\";\n      const PER_PAGE = 12;\n\n      let currentPage = 1;\n      let totalPages = 1;\n      let isFetching = false;\n\n      const postsContainer = document.getElementById(\"lux-posts-list\");\n      const loadMoreBtn = document.getElementById(\"lux-load-more\");\n      const statusEl = document.getElementById(\"lux-loadmore-status\");\n\n      if (!postsContainer || !loadMoreBtn) return;\n\n      const setStatus = (msg) => { if (statusEl) statusEl.textContent = msg || \"\"; };\n\n      loadMoreBtn.style.display = \"none\";\n\n      function fetchPosts(initial = false) {\n        if (isFetching) return;\n        isFetching = true;\n\n        if (initial) {\n          postsContainer.innerHTML = \"<p>Loading...<\/p>\";\n          setStatus(\"\");\n        }\n\n        const url = `${API_BASE}\/posts?per_page=${PER_PAGE}&page=${currentPage}&orderby=date&order=desc&_embed`;\n\n        fetch(url)\n          .then(async r => {\n            if (!r.ok) throw new Error(\"API error\");\n            totalPages = parseInt(r.headers.get(\"X-WP-TotalPages\") || \"1\", 10);\n            return r.json();\n          })\n          .then(renderPosts)\n          .catch(() => {\n            postsContainer.innerHTML = \"<p>Unable to load posts.<\/p>\";\n            loadMoreBtn.style.display = \"none\";\n            setStatus(\"Something went wrong.\");\n          })\n          .finally(() => {\n            isFetching = false;\n            updateLoadMore();\n          });\n      }\n\n      function renderPosts(posts) {\n        if (!Array.isArray(posts) || posts.length === 0) {\n          if (currentPage === 1) postsContainer.innerHTML = \"<p>No posts found.<\/p>\";\n          return;\n        }\n\n        let html = \"\";\n\n        posts.forEach(post => {\n          const media = post._embedded?.[\"wp:featuredmedia\"]?.[0];\n          const imgUrl = media?.source_url || \"\";\n          const title = post.title?.rendered || \"\";\n          const link  = post.link || \"#\";\n\n          const text = (post.excerpt?.rendered || \"\").replace(\/<[^>]*>\/g, \"\").trim();\n          const words = text.split(\/\\s+\/).filter(Boolean);\n          const shortExcerpt = words.slice(0, 28).join(\" \") + (words.length > 28 ? \"\u2026\" : \"\");\n\n          html += `\n            <div class=\"blog-card\">\n              <div class=\"blog-card__thumb-wrap\">\n                ${imgUrl\n                  ? `<img decoding=\"async\" class=\"blog-card__thumb\" src=\"${imgUrl}\" alt=\"${title}\">`\n                  : `<div style=\"width:100%;height:100%;background:#eaeaea;\"><\/div>`\n                }\n              <\/div>\n\n              <div class=\"blog-card__body\">\n                <div class=\"blog-card__title\">\n                  <a href=\"${link}\" style=\"text-decoration:none;color:inherit;\">${title}<\/a>\n                <\/div>\n\n                <div class=\"blog-card__excerpt\">${shortExcerpt}<\/div>\n\n                <a class=\"blog-card__readmore\" href=\"${link}\">\n                  Read More\n                  <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"#915097\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n                    <path d=\"M3.5 8h9\"\/>\n                    <path d=\"M9.5 4l4 4-4 4\"\/>\n                  <\/svg>\n                <\/a>\n              <\/div>\n            <\/div>\n          `;\n        });\n\n        if (currentPage === 1) postsContainer.innerHTML = html;\n        else postsContainer.insertAdjacentHTML(\"beforeend\", html);\n      }\n\n      function updateLoadMore() {\n        if (currentPage < totalPages) {\n          loadMoreBtn.style.display = \"flex\";\n          loadMoreBtn.disabled = false;\n          loadMoreBtn.textContent = \"Load More\";\n          setStatus(\"\");\n        } else {\n          loadMoreBtn.style.display = \"none\";\n          setStatus(currentPage === 1 ? \"\" : \"No posts left.\");\n        }\n      }\n\n      loadMoreBtn.addEventListener(\"click\", () => {\n        if (isFetching || currentPage >= totalPages) return;\n        currentPage++;\n        loadMoreBtn.disabled = true;\n        loadMoreBtn.textContent = \"Loading...\";\n        fetchPosts(false);\n      });\n\n      \/* INIT *\/\n      fetchPosts(true);\n    });\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1194","page","type-page","status-publish","hentry"],"blocksy_meta":{"has_hero_section":"disabled","vertical_spacing_source":"custom","content_area_spacing":"none","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"_links":{"self":[{"href":"https:\/\/luxhospitals.com\/blog\/wp-json\/wp\/v2\/pages\/1194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/luxhospitals.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/luxhospitals.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/luxhospitals.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/luxhospitals.com\/blog\/wp-json\/wp\/v2\/comments?post=1194"}],"version-history":[{"count":0,"href":"https:\/\/luxhospitals.com\/blog\/wp-json\/wp\/v2\/pages\/1194\/revisions"}],"wp:attachment":[{"href":"https:\/\/luxhospitals.com\/blog\/wp-json\/wp\/v2\/media?parent=1194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}