diff --git a/.webstudio/data.json b/.webstudio/data.json
index f3012a0..137fe38 100644
--- a/.webstudio/data.json
+++ b/.webstudio/data.json
@@ -1,16 +1,16 @@
 {
   "build": {
-    "id": "b2fe0b81-fe34-4f6a-bd68-efa6c4be59c2",
+    "id": "d1355bdf-5c5f-43e0-b303-63bbe781da27",
     "projectId": "363652e3-9846-4534-acdf-9b2b3c66eec0",
-    "version": 3200,
-    "createdAt": "2025-12-05T12:38:39.797+00:00",
-    "updatedAt": "2025-12-05T12:38:39.797+00:00",
+    "version": 3257,
+    "createdAt": "2025-12-05T13:16:43.55+00:00",
+    "updatedAt": "2025-12-05T13:16:43.55+00:00",
     "pages": {
       "meta": {
         "siteName": "Inasa Healthcare",
         "contactEmail": "inasahealthcare@gmail.com",
         "faviconAssetId": "9f21d5d9649e25cc357333e82a693d0abc56d6ae0466834542e33517997ecc16",
-        "code": ""
+        "code": "<script src=\"https://cdn.jsdelivr.net/npm/motion/dist/motion.js\"></script>"
       },
       "compiler": {
         "atomicStyles": true
@@ -28708,7 +28708,7 @@
           "instanceId": "r-znm5ELAYy0FXTViUlnW",
           "name": "code",
           "type": "string",
-          "value": "<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"about\");\n    debugger;\n    const framer = window.framer;\n\n    // Create a motion value for opacity\n    const opacity = framer.motion.value(0);\n\n    // Define the animation\n    const animation = framer.motion.animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"
+          "value": "<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"about\");\n    debugger;\n    const {animate} = Motion\n\n    // Define the animation\n    const animation = animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"
         }
       ],
       [
@@ -28738,7 +28738,7 @@
           "instanceId": "VJgLL4H1vzcr6iUQ4EmYk",
           "name": "code",
           "type": "string",
-          "value": "<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"services\");\n    const framer = window.framer;\n\n    // Create a motion value for opacity\n    const opacity = framer.motion.value(0);\n\n    // Define the animation\n    const animation = framer.motion.animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"
+          "value": "<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"services\");\n    debugger;\n    const {animate} = Motion\n\n    // Define the animation\n    const animation = animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"
         }
       ],
       [
@@ -28758,7 +28758,7 @@
           "instanceId": "3uk4jqZSxYBVymG0UHX47",
           "name": "code",
           "type": "string",
-          "value": "<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"insurance\");\n    const framer = window.framer;\n\n    // Create a motion value for opacity\n    const opacity = framer.motion.value(0);\n\n    // Define the animation\n    const animation = framer.motion.animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"
+          "value": "<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"insurance\");\n    debugger;\n    const {animate} = Motion\n\n    // Define the animation\n    const animation = animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"
         }
       ],
       [
@@ -28778,7 +28778,7 @@
           "instanceId": "ctpDuAXXXjro4xY_qTIjy",
           "name": "code",
           "type": "string",
-          "value": "<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"contact\");\n    const framer = window.framer;\n\n    // Create a motion value for opacity\n    const opacity = framer.motion.value(0);\n\n    // Define the animation\n    const animation = framer.motion.animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"
+          "value": "<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"contact\");\n    debugger;\n    const {animate} = Motion\n\n    // Define the animation\n    const animation = animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"
         }
       ],
       [
diff --git a/app/__generated__/$.tsx b/app/__generated__/$.tsx
index d16d1bd..cd41a1a 100644
--- a/app/__generated__/$.tsx
+++ b/app/__generated__/$.tsx
@@ -10,7 +10,7 @@ import { Fragment as Fragment_1, Slot as Slot, Image as Image, HtmlEmbed as Html
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-12-05T12:38:39.797Z";
+      export const lastPublished = "2025-12-05T13:16:43.550Z";
 
       export const siteName = "Inasa Healthcare";
 
diff --git a/app/__generated__/[about]._index.tsx b/app/__generated__/[about]._index.tsx
index 7dd6e28..d940054 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-05T12:38:39.797Z";
+      export const lastPublished = "2025-12-05T13:16:43.550Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -314,7 +314,7 @@ className={`w-element c1fw0cv2 c13twaxx c1asj7ri c8cfypq c10jyxyw c1jadkev ckmg8
 </div>
 </section>
 <HtmlEmbed
-code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"about\");\n    debugger;\n    const framer = window.framer;\n\n    // Create a motion value for opacity\n    const opacity = framer.motion.value(0);\n\n    // Define the animation\n    const animation = framer.motion.animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
+code={"<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"about\");\n    debugger;\n    const {animate} = Motion\n\n    // Define the animation\n    const animation = animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
 executeScriptOnCanvas={true}
 className={`w-html-embed`} />
 </Fragment_1>
diff --git a/app/__generated__/[contact]._index.tsx b/app/__generated__/[contact]._index.tsx
index 420004a..fa37c9c 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-05T12:38:39.797Z";
+      export const lastPublished = "2025-12-05T13:16:43.550Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -340,7 +340,7 @@ className={`w-html-embed`} />
 </div>
 </section>
 <HtmlEmbed
-code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"contact\");\n    const framer = window.framer;\n\n    // Create a motion value for opacity\n    const opacity = framer.motion.value(0);\n\n    // Define the animation\n    const animation = framer.motion.animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
+code={"<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"contact\");\n    debugger;\n    const {animate} = Motion\n\n    // Define the animation\n    const animation = animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
 executeScriptOnCanvas={true}
 className={`w-html-embed`} />
 </Fragment_1>
diff --git a/app/__generated__/[insurance]._index.tsx b/app/__generated__/[insurance]._index.tsx
index 73f72fc..9bed896 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-05T12:38:39.797Z";
+      export const lastPublished = "2025-12-05T13:16:43.550Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -355,7 +355,7 @@ className={`w-image`} />
 </div>
 </section>
 <HtmlEmbed
-code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"insurance\");\n    const framer = window.framer;\n\n    // Create a motion value for opacity\n    const opacity = framer.motion.value(0);\n\n    // Define the animation\n    const animation = framer.motion.animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
+code={"<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"insurance\");\n    debugger;\n    const {animate} = Motion\n\n    // Define the animation\n    const animation = animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
 executeScriptOnCanvas={true}
 className={`w-html-embed`} />
 </Fragment_1>
diff --git a/app/__generated__/[services]._index.tsx b/app/__generated__/[services]._index.tsx
index c337197..9abaacd 100644
--- a/app/__generated__/[services]._index.tsx
+++ b/app/__generated__/[services]._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-05T12:38:39.797Z";
+      export const lastPublished = "2025-12-05T13:16:43.550Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -645,7 +645,7 @@ className={`w-html-embed`} />
 </div>
 </section>
 <HtmlEmbed
-code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"services\");\n    const framer = window.framer;\n\n    // Create a motion value for opacity\n    const opacity = framer.motion.value(0);\n\n    // Define the animation\n    const animation = framer.motion.animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
+code={"<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"services\");\n    debugger;\n    const {animate} = Motion\n\n    // Define the animation\n    const animation = animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
 executeScriptOnCanvas={true}
 className={`w-html-embed`} />
 </Fragment_1>
diff --git a/app/__generated__/_index.tsx b/app/__generated__/_index.tsx
index d5a1ce8..5179a74 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-05T12:38:39.797Z";
+      export const lastPublished = "2025-12-05T13:16:43.550Z";
 
       export const siteName = "Inasa Healthcare";
 
@@ -29,9 +29,24 @@ import { Dialog as Dialog, DialogTrigger as DialogTrigger, DialogOverlay as Dial
 
       
             
+            const Script = ({children, ...props}: Record<string, string | boolean>) => {
+              if (children == null) {
+                return <script {...props} />;
+              }
+
+              return <script {...props} dangerouslySetInnerHTML={{__html: children}} />;
+            };
+            const Style = ({children, ...props}: Record<string, string | boolean>) => {
+              if (children == null) {
+                return <style {...props} />;
+              }
+
+              return <style {...props} dangerouslySetInnerHTML={{__html: children}} />;
+            };
+            
 
             export const CustomCode = () => {
-              return (<></>);
+              return (<><Script src={"https://cdn.jsdelivr.net/npm/motion/dist/motion.js"}></Script></>);
             }
           
 
@@ -352,7 +367,7 @@ className={`w-element c1fw0cv2 c13twaxx c1asj7ri c8cfypq c10jyxyw c1jadkev ckmg8
 </div>
 </section>
 <HtmlEmbed
-code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"about\");\n    debugger;\n    const framer = window.framer;\n\n    // Create a motion value for opacity\n    const opacity = framer.motion.value(0);\n\n    // Define the animation\n    const animation = framer.motion.animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
+code={"<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"about\");\n    debugger;\n    const {animate} = Motion\n\n    // Define the animation\n    const animation = animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
 executeScriptOnCanvas={true}
 className={`w-html-embed`} />
 </Fragment_1>
@@ -778,7 +793,7 @@ className={`w-html-embed`} />
 </div>
 </section>
 <HtmlEmbed
-code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"services\");\n    const framer = window.framer;\n\n    // Create a motion value for opacity\n    const opacity = framer.motion.value(0);\n\n    // Define the animation\n    const animation = framer.motion.animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
+code={"<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"services\");\n    debugger;\n    const {animate} = Motion\n\n    // Define the animation\n    const animation = animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
 executeScriptOnCanvas={true}
 className={`w-html-embed`} />
 </Fragment_1>
@@ -915,7 +930,7 @@ className={`w-image`} />
 </div>
 </section>
 <HtmlEmbed
-code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"insurance\");\n    const framer = window.framer;\n\n    // Create a motion value for opacity\n    const opacity = framer.motion.value(0);\n\n    // Define the animation\n    const animation = framer.motion.animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
+code={"<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"insurance\");\n    debugger;\n    const {animate} = Motion\n\n    // Define the animation\n    const animation = animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
 executeScriptOnCanvas={true}
 className={`w-html-embed`} />
 </Fragment_1>
@@ -1034,7 +1049,7 @@ className={`w-html-embed`} />
 </div>
 </section>
 <HtmlEmbed
-code={"<script src=\"https://unpkg.com/framer-motion@10.1.12/dist/framer-motion.min.js\"></script>\n<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"contact\");\n    const framer = window.framer;\n\n    // Create a motion value for opacity\n    const opacity = framer.motion.value(0);\n\n    // Define the animation\n    const animation = framer.motion.animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
+code={"<script>\n  // Wait for the DOM to load\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const section = document.getElementById(\"contact\");\n    debugger;\n    const {animate} = Motion\n\n    // Define the animation\n    const animation = animate({\n      from: { opacity: 0 },\n      to: { opacity: 1 },\n      duration: 1,\n      ease: \"easeOut\"\n    });\n\n    // Trigger animation when the section is in view\n    const observer = new IntersectionObserver(\n      (entries) => {\n        entries.forEach(entry => {\n          if (entry.isIntersecting) {\n            animation.play();\n            observer.unobserve(section);\n          }\n        });\n      },\n      { threshold: 0.1 }\n    );\n\n    observer.observe(section);\n  });\n</script>"}
 executeScriptOnCanvas={true}
 className={`w-html-embed`} />
 </Fragment_1>