[
  {
    "id": "custom-code-custom",
    "name": "Hero And Search",
    "icon": "⚙️",
    "html": "<style>\n.hero-section {\n            background: linear-gradient(rgba(10, 46, 122, 0.85), rgba(10, 46, 122, 0.85)), url('https://lh3.googleusercontent.com/aida-public/AB6AXuDo-Op9XM1_g8277jkKnmaBrf694KzJAjVLQCK-5QTU8BiOfuHY_pf6Tx_omWh7ZMLxxj4-qXp6fU-Ec-cq2o2bFyFfyA_dOIwtwF9X-1B0BoCGC46dtJn4IzD6MCZ2of07Eas7MiweRlfCjhuFjWpeREAeIWf38NHJcjnWGaGAdmgLHLT23L-ErLYX3imCJP6dWhkE1YWp_7ZOaicjqH-2WUFKQGaD6zXJfT-jVdKI2R9UleZkPuzrIUg8EgatHnSUN-Dlskx1cLM');\n            background-size: cover;\n            background-position: center;\n            color: white;\n            padding: 100px 0;\n            }\n    .search-container {\n            background: white;\n            border-radius: 8px;\n            padding: 8px;\n            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n            }\n            .search-container input, \n            .search-container select {\n            border: none;\n            box-shadow: none !important;\n            }\n            .search-container .divider {\n            width: 1px;\n            background-color: #dee2e6;\n            margin: 10px 0;\n            }\n</style>\n<section class=\"hero-section text-center\">\n    <div class=\"container\">\n        <h1 class=\"display-3 fw-extrabold mb-4\">\n            Protecting Malaysia's\n            <br>\n            Biosecurity &amp; Agriculture\n        </h1>\n        <p class=\"lead text-light mb-5 mx-auto\" style=\"max-width: 700px;\">\n            Streamlining inspection and permit services for safe trade. \n                        Securing the nation's borders against invasive species and diseases.\n        </p>\n        <div class=\"search-container mx-auto\" style=\"max-width: 800px;\">\n            <div class=\"row g-0 align-items-center\">\n                <div class=\"col-md-6 d-flex align-items-center px-3 border-end-md\">\n                    <span class=\"material-symbols-outlined text-muted me-2\">\nsearch</span>                        <input class=\"form-control\" placeholder=\"Search for Permit ID, Guidelines or News...\" type=\"text\">\n                    </div>\n                    <div class=\"col-md d-none d-md-block divider mx-0\">\n                    </div>\n                    <div class=\"col-md-3 px-3\">\n                        <select class=\"form-select border-0 fw-medium\">\n                            <option>\n                                All Services\n                            </option>\n                            <option>\n                                e-Permit\n                            </option>\n                            <option>\n                                Inspection\n                            </option>\n                            <option>\n                                Status Check\n                            </option>\n                        </select>\n                    </div>\n                    <div class=\"col-md-3 p-1\">\n                        <button class=\"btn btn-primary w-100 py-3 fw-bold text-uppercase\">\n                            Search\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    </section>",
    "styles": {
      "fontSize": "16px",
      "fontFamily": "inherit",
      "textAlign": "left"
    },
    "cssClasses": "",
    "customCSS": ""
  }
]