[
  {
    "id": "custom-code-custom",
    "name": "News Standard",
    "icon": "⚙️",
    "html": "<style>\n.news-img-wrapper {\n            border-radius: 8px;\n            overflow: hidden;\n            margin-bottom: 1rem;\n            }\n            .news-img-wrapper img {\n            width: 100%;\n            aspect-ratio: 16/9;\n            object-fit: cover;\n            transition: transform 0.3s;\n            }\n            .news-img-wrapper:hover img {\n            transform: scale(1.05);\n            }\n            .badge-news {\n            font-size: 10px;\n            text-transform: uppercase;\n            font-weight: 700;\n            padding: 4px 8px;\n            margin-bottom: 0.5rem;\n            display: inline-block;\n            }\n</style>\n<section class=\"py-5\">\n                <div class=\"container py-4\">\n                    <div class=\"row align-items-end mb-5 border-bottom pb-3\">\n                        <div class=\"col-md\">\n                            <h2 class=\"fw-bold text-maqis-navy\">News &amp; Announcements</h2>\n                            <p class=\"text-muted mb-0\">Stay updated with the latest biosecurity regulations and alerts.</p>\n                        </div>\n                        <div class=\"col-md-auto mt-3 mt-md-0\">\n                            <a class=\"text-primary fw-semibold text-decoration-none d-flex align-items-center gap-1\" href=\"#\">\n                            View All News <span class=\"material-symbols-outlined fs-6\">open_in_new</span>\n                            </a>\n                        </div>\n                    </div>\n                    <div class=\"row g-4\">\n                        <div class=\"col-lg-4\">\n                            <div class=\"card border-0 bg-transparent h-100\">\n                                <div class=\"news-img-wrapper shadow-sm\">\n                                    <img alt=\"News Image\" src=\"https://lh3.googleusercontent.com/aida-public/AB6AXuAKtKju-fgAaHtfRqHg3EJ6v4zJAXieU1vM6emfRqPclJFmVAQsWId698g4VnndtgJuR99AJ3akgqsRzjfsgbhzAn0A2RRYq4ZnA5lO5oCVwAc6awSuVewHMuB1H-1bf2FtQIdYjLODe3OKFPpJ3IwEzfUY16LVs_79OAbu7oeho0jnd_Ob8pnmMFnd7Z8WL0Pec6frh8awMvl9rF2gnDnF56axx7SU6Vu2EHz_cXN7vLexb3l5LgG8wD8y2kXPW3nQc_FQr0XBLBk\">\n                                </div>\n                                <div class=\"card-body p-0\">\n                                    <span class=\"badge bg-primary badge-news\">Announcement</span>\n                                    <h5 class=\"fw-bold mb-2\">New Import Restrictions on Agricultural Products from Region X</h5>\n                                    <p class=\"text-muted small mb-3\">Effective from next month, all agricultural imports from Region X must adhere to updated phytosanitary standards...</p>\n                                    <div class=\"text-muted x-small d-flex align-items-center gap-1\" style=\"font-size: 12px;\">\n                                        <span class=\"material-symbols-outlined fs-6\">calendar_today</span> Oct 24, 2023\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"col-lg-4\">\n                            <div class=\"card border-0 bg-transparent h-100\">\n                                <div class=\"news-img-wrapper shadow-sm\">\n                                    <img alt=\"News Image\" src=\"https://lh3.googleusercontent.com/aida-public/AB6AXuBeDiHjqckCZ-FFhPgjMXkIzWBVyZs-ybEUs3aUgrHyTM1_ra06PYYrQ1F2Z55nN8T083Q5PZ2afPg920yqBFuXazByBVvBL6ggeTko-fRRMG87NOVPiusYhaj66vLfJq7_M9PfjuL-Rrl-zsCD0VtE6FAvf7VHtO3cz0qxbStKff3DVfmAqsHU4cntBF5cHTRaK_9yxhahdZJpJs3g7nrTwmJZ2KzegNVwYRWnd8EeaaSSqgNjr3FEs5YCA9_CWD6AmhJ8zZ1aJ_o\">\n                                </div>\n                                <div class=\"card-body p-0\">\n                                    <span class=\"badge bg-maqis-gold text-white badge-news\">Update</span>\n                                    <h5 class=\"fw-bold mb-2\">Digital Transformation: New Mobile Permit Checking App Launched</h5>\n                                    <p class=\"text-muted small mb-3\">MAQIS introduces a new mobile platform for field officers and agents to verify permit validity instantly via QR codes.</p>\n                                    <div class=\"text-muted x-small d-flex align-items-center gap-1\" style=\"font-size: 12px;\">\n                                        <span class=\"material-symbols-outlined fs-6\">calendar_today</span> Oct 20, 2023\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                        <div class=\"col-lg-4\">\n                            <div class=\"card border-0 bg-transparent h-100\">\n                                <div class=\"news-img-wrapper shadow-sm\">\n                                    <img alt=\"News Image\" src=\"https://lh3.googleusercontent.com/aida-public/AB6AXuBQYEMJQa4ZP56vP8JfBmcNWsoK-1NoFlXJDXbMlEJ5DtS6ARl7vlqo7Xl2NFCMCtRI8irqYxeb5M4us6UOVi8eoM1WnnnjZJHfo-EwRYBJcKAojZkATZ1XeiibPi3_IPQzCzqkDmpI80wquc1M2l7y3bWcw0ERe1cB20pNkpBVJbABaPuNFn3zBewxDsNYF_guWUR0E6B7nNHPwtyTWPiYWKZipErtPNmXa3GYa2eR7Iiv8h047csMRohrEbcPpbraPu5P0o_0X1U\">\n                                </div>\n                                <div class=\"card-body p-0\">\n                                    <span class=\"badge bg-primary badge-news\">General</span>\n                                    <h5 class=\"fw-bold mb-2\">Festive Season Operation Hours at Major Entry Points</h5>\n                                    <p class=\"text-muted small mb-3\">Inspection schedules for the upcoming public holidays have been revised. Please check the operational calendar for details.</p>\n                                    <div class=\"text-muted x-small d-flex align-items-center gap-1\" style=\"font-size: 12px;\">\n                                        <span class=\"material-symbols-outlined fs-6\">calendar_today</span> Oct 15, 2023\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </section>\n\n\\",
    "styles": {
      "fontSize": "16px",
      "fontFamily": "inherit",
      "textAlign": "left"
    },
    "cssClasses": "",
    "customCSS": ""
  }
]