[
  {
    "id": "custom-code-custom",
    "name": "Card Applications",
    "icon": "⚙️",
    "html": "<link href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap\" rel=\"stylesheet\">\n<style>\n    .action-card {\n            transition: transform 0.2s, box-shadow 0.2s;\n            border: none;\n            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);\n            }\n            .action-card:hover {\n            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n            }\n</style>\n<section class=\"py-5 bg-light\">\n    <div class=\"container py-4\">\n        <div class=\"row g-4\">\n            <div class=\"col-md-6 col-lg-3\">\n                <div class=\"card h-100 action-card\">\n                    <div class=\"card-body text-center d-flex flex-column align-items-center\">\n                        <div class=\"icon-box bg-primary bg-opacity-10 text-primary\">\n                            <span class=\"material-symbols-outlined fs-1\">\nassignment_add</span>                            </div>\n                            <h5 class=\"card-title mb-2\">\n                                Apply for e-Permit\n                            </h5>\n                            <p class=\"card-text text-muted small mb-4\">\n                                Submit new applications for import, export, or transit permits.\n                            </p>\n                            <div class=\"mt-auto w-100\">\n                                <a class=\"btn btn-primary w-100\" href=\"#\">\nApply Now</a>                                </div>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"col-md-6 col-lg-3\">\n                        <div class=\"card h-100 action-card\">\n                            <div class=\"card-body text-center d-flex flex-column align-items-center\">\n                                <div class=\"icon-box bg-info bg-opacity-10 text-info\">\n                                    <span class=\"material-symbols-outlined fs-1\">\ntravel_explore</span>                                    </div>\n                                    <h5 class=\"card-title mb-2\">\n                                        Check Permit Status\n                                    </h5>\n                                    <p class=\"card-text text-muted small mb-4\">\n                                        Real-time tracking for your submitted permit applications.\n                                    </p>\n                                    <div class=\"mt-auto w-100\">\n                                        <a class=\"btn btn-primary w-100\" href=\"#\">\nTrack Status</a>                                        </div>\n                                    </div>\n                                </div>\n                            </div>\n                            <div class=\"col-md-6 col-lg-3\">\n                                <div class=\"card h-100 action-card\">\n                                    <div class=\"card-body text-center d-flex flex-column align-items-center\">\n                                        <div class=\"icon-box bg-success bg-opacity-10 text-success\">\n                                            <span class=\"material-symbols-outlined fs-1\">\nevent_available</span>                                            </div>\n                                            <h5 class=\"card-title mb-2\">\n                                                Schedule Inspection\n                                            </h5>\n                                            <p class=\"card-text text-muted small mb-4\">\n                                                Book an inspection slot at any authorized entry/exit point.\n                                            </p>\n                                            <div class=\"mt-auto w-100\">\n                                                <a class=\"btn btn-primary w-100\" href=\"#\">\nBook Slot</a>                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                    <div class=\"col-md-6 col-lg-3\">\n                                        <div class=\"card h-100 action-card\">\n                                            <div class=\"card-body text-center d-flex flex-column align-items-center\">\n                                                <div class=\"icon-box bg-warning bg-opacity-10 text-dark\">\n                                                    <span class=\"material-symbols-outlined fs-1\">\npayments</span>                                                    </div>\n                                                    <h5 class=\"card-title mb-2\">\n                                                        Pay Fees\n                                                    </h5>\n                                                    <p class=\"card-text text-muted small mb-4\">\n                                                        Online payment gateway for permit fees and service charges.\n                                                    </p>\n                                                    <div class=\"mt-auto w-100\">\n                                                        <a class=\"btn btn-primary w-100\" href=\"#\">\nMake Payment</a>                                                        </div>\n                                                    </div>\n                                                </div>\n                                            </div>\n                                        </div>\n                                    </div>\n                                </section>",
    "styles": {
      "fontSize": "16px",
      "fontFamily": "inherit",
      "textAlign": "left"
    },
    "cssClasses": "",
    "customCSS": ""
  }
]