From 0d52cb7e627a3bd8b0f0364f34320d62d3d1cefe Mon Sep 17 00:00:00 2001
From: oonyeje <oonyeje@bsidesol.com>
Date: Sun, 7 Dec 2025 15:56:52 -0500
Subject: [PATCH] - updated svg icon and nav bar mobile menu script

---
 .webstudio/data.json                     | 40 +++++++++++++++++++++---
 app/__generated__/$.tsx                  |  7 +++--
 app/__generated__/[about]._index.tsx     |  7 +++--
 app/__generated__/[contact]._index.tsx   |  7 +++--
 app/__generated__/[insurance]._index.tsx |  7 +++--
 app/__generated__/[services]._index.tsx  |  7 +++--
 app/__generated__/_index.tsx             |  7 +++--
 7 files changed, 65 insertions(+), 17 deletions(-)

diff --git a/.webstudio/data.json b/.webstudio/data.json
index 2ce2099..3a34ded 100644
--- a/.webstudio/data.json
+++ b/.webstudio/data.json
@@ -1,10 +1,10 @@
 {
   "build": {
-    "id": "32343132-f16a-4a8b-894e-d0841b1ffa60",
+    "id": "87183b77-b411-408d-9914-d4e288e16400",
     "projectId": "363652e3-9846-4534-acdf-9b2b3c66eec0",
-    "version": 3929,
-    "createdAt": "2025-12-07T16:35:06.553+00:00",
-    "updatedAt": "2025-12-07T16:35:06.553+00:00",
+    "version": 4167,
+    "createdAt": "2025-12-07T20:54:45.389+00:00",
+    "updatedAt": "2025-12-07T20:54:45.389+00:00",
     "pages": {
       "meta": {
         "siteName": "Inasa Healthcare",
@@ -30040,7 +30040,7 @@
           "instanceId": "N3hlq0SmUpZeMxia9yt6I",
           "name": "code",
           "type": "string",
-          "value": "<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"
+          "value": "<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"
         }
       ],
       [
@@ -31252,6 +31252,36 @@
           "type": "string",
           "value": "mobile-menu-icon"
         }
+      ],
+      [
+        "KxnSt8TSLtznlu5Jzxdqj",
+        {
+          "id": "KxnSt8TSLtznlu5Jzxdqj",
+          "instanceId": "t-S7mtIoZ5s3u63KLx2ea",
+          "name": "id",
+          "type": "string",
+          "value": "rect-1"
+        }
+      ],
+      [
+        "GiEHNUqVUo3pqoRpjii7r",
+        {
+          "id": "GiEHNUqVUo3pqoRpjii7r",
+          "instanceId": "GobjFisjUkAjCSPR34mFQ",
+          "name": "id",
+          "type": "string",
+          "value": "rect-2"
+        }
+      ],
+      [
+        "b-2Z2xvyr2Y_5XFe2wNjH",
+        {
+          "id": "b-2Z2xvyr2Y_5XFe2wNjH",
+          "instanceId": "SMGhR2WuF4Qgvjz24BuxH",
+          "name": "id",
+          "type": "string",
+          "value": "rect-3"
+        }
       ]
     ],
     "dataSources": [
diff --git a/app/__generated__/$.tsx b/app/__generated__/$.tsx
index af92d6d..2864c22 100644
--- a/app/__generated__/$.tsx
+++ b/app/__generated__/$.tsx
@@ -10,7 +10,7 @@ import { Fragment as Fragment_1, Slot as Slot, HtmlEmbed as HtmlEmbed, Image as
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-12-07T16:35:06.553Z";
+      export const lastPublished = "2025-12-07T20:54:45.389Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -117,6 +117,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-1"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -126,6 +127,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-2"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -135,6 +137,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-3"}
 className={`w-element`} />
 </svg>
 </button>
@@ -178,7 +181,7 @@ className={`w-element`}>
 </div>
 <HtmlEmbed
 executeScriptOnCanvas={true}
-code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
+code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
 clientOnly={true}
 className={`w-html-embed`} />
 </div>
diff --git a/app/__generated__/[about]._index.tsx b/app/__generated__/[about]._index.tsx
index 9430dc0..2d98bb6 100644
--- a/app/__generated__/[about]._index.tsx
+++ b/app/__generated__/[about]._index.tsx
@@ -10,7 +10,7 @@ import { Link as Link, Body as Body } from "@webstudio-is/sdk-components-react-r
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-12-07T16:35:06.553Z";
+      export const lastPublished = "2025-12-07T20:54:45.389Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -117,6 +117,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-1"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -126,6 +127,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-2"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -135,6 +137,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-3"}
 className={`w-element`} />
 </svg>
 </button>
@@ -178,7 +181,7 @@ className={`w-element`}>
 </div>
 <HtmlEmbed
 executeScriptOnCanvas={true}
-code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
+code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
 clientOnly={true}
 className={`w-html-embed`} />
 </div>
diff --git a/app/__generated__/[contact]._index.tsx b/app/__generated__/[contact]._index.tsx
index cdd63f0..19513df 100644
--- a/app/__generated__/[contact]._index.tsx
+++ b/app/__generated__/[contact]._index.tsx
@@ -10,7 +10,7 @@ import { Link as Link, Body as Body, RemixForm as RemixForm } from "@webstudio-i
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-12-07T16:35:06.553Z";
+      export const lastPublished = "2025-12-07T20:54:45.389Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -117,6 +117,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-1"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -126,6 +127,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-2"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -135,6 +137,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-3"}
 className={`w-element`} />
 </svg>
 </button>
@@ -178,7 +181,7 @@ className={`w-element`}>
 </div>
 <HtmlEmbed
 executeScriptOnCanvas={true}
-code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
+code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
 clientOnly={true}
 className={`w-html-embed`} />
 </div>
diff --git a/app/__generated__/[insurance]._index.tsx b/app/__generated__/[insurance]._index.tsx
index cd46c10..20da8ff 100644
--- a/app/__generated__/[insurance]._index.tsx
+++ b/app/__generated__/[insurance]._index.tsx
@@ -10,7 +10,7 @@ import { Link as Link, Body as Body } from "@webstudio-is/sdk-components-react-r
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-12-07T16:35:06.553Z";
+      export const lastPublished = "2025-12-07T20:54:45.389Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -117,6 +117,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-1"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -126,6 +127,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-2"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -135,6 +137,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-3"}
 className={`w-element`} />
 </svg>
 </button>
@@ -178,7 +181,7 @@ className={`w-element`}>
 </div>
 <HtmlEmbed
 executeScriptOnCanvas={true}
-code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
+code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
 clientOnly={true}
 className={`w-html-embed`} />
 </div>
diff --git a/app/__generated__/[services]._index.tsx b/app/__generated__/[services]._index.tsx
index 856013a..dccf413 100644
--- a/app/__generated__/[services]._index.tsx
+++ b/app/__generated__/[services]._index.tsx
@@ -11,7 +11,7 @@ import { Body as Body, Link as Link } from "@webstudio-is/sdk-components-react-r
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-12-07T16:35:06.553Z";
+      export const lastPublished = "2025-12-07T20:54:45.389Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -118,6 +118,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-1"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -127,6 +128,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-2"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -136,6 +138,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-3"}
 className={`w-element`} />
 </svg>
 </button>
@@ -179,7 +182,7 @@ className={`w-element`}>
 </div>
 <HtmlEmbed
 executeScriptOnCanvas={true}
-code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
+code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
 clientOnly={true}
 className={`w-html-embed`} />
 </div>
diff --git a/app/__generated__/_index.tsx b/app/__generated__/_index.tsx
index 679a545..be2d2de 100644
--- a/app/__generated__/_index.tsx
+++ b/app/__generated__/_index.tsx
@@ -11,7 +11,7 @@ import { Dialog as Dialog, DialogTrigger as DialogTrigger, DialogOverlay as Dial
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-12-07T16:35:06.553Z";
+      export const lastPublished = "2025-12-07T20:54:45.389Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -139,6 +139,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-1"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -148,6 +149,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-2"}
 className={`w-element`} />
 <rect
 x={"0"}
@@ -157,6 +159,7 @@ width={"32"}
 height={"5"}
 rx={"3"}
 ry={"3"}
+id={"rect-3"}
 className={`w-element`} />
 </svg>
 </button>
@@ -200,7 +203,7 @@ className={`w-element`}>
 </div>
 <HtmlEmbed
 executeScriptOnCanvas={true}
-code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n\n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        \n      } else {\n        \n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      // animate(\n      //   verticalMenu,\n      //   {\n      //     display: open ? \"flex\" : \"none\",\n      //     visibility: open ? \"visible\" : \"hidden\",\n      //     { duration: 0.6, easing: \"easeInOut\" }\n      //   }\n      // );\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            animatedBox.style.display = 'none';\n            animatedBox.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
+code={"<style>\n    .mobile-menu {\n        opacity: 0;\n        visibility: hidden;\n        transition: opacity 0.5s ease-in-out;\n        display: none; /* Initially hidden */\n    }\n\n    .mobile-menu.visible {\n        visibility: visible;\n        opacity: 1;\n        display: flex; /* Make it visible for the transition */\n    }\n</style>\n<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const { animate } = Motion;\n    const panel = document.getElementById(\"top\");\n    const btn   = document.getElementById(\"menu-toggle-btn\");\n    const verticalMenu   = document.getElementById(\"mobile-vertical-menu\");\n    const verticalMenuIcon = document.getElementById(\"mobile-menu-icon\")\n  \n    let open = false;\n\n    btn.addEventListener(\"click\", () => {\n      animate(panel, { height: open ? \"15svh\" : \"100vh\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open) {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'inline'\n      } else {\n        verticalMenuIcon.getElementById(\"rect-2\").style.display = 'none'\n      }\n      animate(btn,   { rotate: open ? \"0deg\" : \"90deg\" }, { duration: 0.6, easing: \"easeInOut\" });\n      if (open && verticalMenu.classList.contains('visible')) {\n        verticalMenu.classList.remove('visible')\n        verticalMenu.addEventListener('transitionend', function handler() {\n            verticalMenu.style.display = 'none';\n            verticalMenu.removeEventListener('transitionend', handler);\n        });\n      } else {\n        verticalMenu.classList.add('visible')\n\n        verticalMenu.style.display = 'flex';\n        // Force reflow to ensure display change takes effect before opacity transition\n        verticalMenu.offsetWidth; \n        verticalMenu.classList.add('visible');\n      }\n    \n      open = !open;\n    });\n  });\n</script>\n"}
 clientOnly={true}
 className={`w-html-embed`} />
 </div>