- some small changes to add about page

- updated contact page to be more responsive

app/__generated__/$.tsx

@@ -5,19 +5,19 @@
       import { Fragment, useState } from "react";
       import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
       import { Body as Body, Link as Link } from "@webstudio-is/sdk-components-react-router";
-import { HtmlEmbed as HtmlEmbed, Fragment as Fragment_1, Image as Image, Slot as Slot } from "@webstudio-is/sdk-components-react";
+import { Fragment as Fragment_1, Image as Image, Slot as Slot, HtmlEmbed as HtmlEmbed } from "@webstudio-is/sdk-components-react";
 
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-11-23T14:35:23.308Z";
+      export const lastPublished = "2025-11-26T03:01:58.340Z";
 
       export const siteName = "Inasa Healthcare";
 
       export const breakpoints = [{"id":"5zaWVFAeAfWgFjJNQ0GET"},{"id":"qOHlWr9cjM-6l364uX_FK","maxWidth":991},{"id":"8_hh5VMsAyWW46cnpT5HQ","maxWidth":767},{"id":"swNXPQRoKH4ij-T-zGDE7","maxWidth":479}];
 
       export const favIconAsset: string | undefined =
-        "file_000000003adc722fbb2d4c57f70e11d2_FsnGqm4TIkHGomknin2UT.png";
+        undefined;
 
       // Font assets on current page (can be preloaded)
       export const pageFontAssets: string[] =
@@ -34,13 +34,13 @@ className={`w-element w-element-1`}>
 <Slot>
 <Fragment_1>
 <div
-id={""}
+id={"top"}
-className={`w-element w-element-7`}>
+className={`w-element w-element-2`}>
 <Link
 href={"/"}
-className={`w-element w-element-8`}>
+className={`w-element w-element-3`}>
 <Image
-src={"/assets/file_000000003adc722fbb2d4c57f70e11d2_FsnGqm4TIkHGomknin2UT.png"}
+src={"/assets/file_000000003f50722fa551064d566374f2_kdDbKfOW9fojde3YWOccm.png"}
 width={1024}
 height={1024}
 loading={"lazy"}
@@ -48,20 +48,20 @@ alt={"logo"}
 className={`w-image w-image-1`} />
 </Link>
 <div
-className={`w-element w-element-9`}>
+className={`w-element w-element-4`}>
 <div
-className={`w-element w-element-10`}>
+className={`w-element w-element-5`}>
 <Link
 href={"/about"}
-className={`w-element w-element-11`}>
+className={`w-element w-element-6`}>
 <b
-className={`w-element w-element-25`}>
+className={`w-element w-element-20`}>
 {"About"}
 </b>
 </Link>
 <Link
 href={"/insurance"}
-className={`w-element w-element-12`}>
+className={`w-element w-element-7`}>
 <b
 className={`w-element`}>
 {"Insurance"}
@@ -69,7 +69,7 @@ className={`w-element`}>
 </Link>
 <Link
 href={"/services"}
-className={`w-element w-element-13`}>
+className={`w-element w-element-8`}>
 <b
 className={`w-element`}>
 {"Services"}
@@ -77,7 +77,7 @@ className={`w-element`}>
 </Link>
 <Link
 href={"/contact"}
-className={`w-element w-element-14`}>
+className={`w-element w-element-9`}>
 <b
 className={`w-element`}>
 {"Contact"}
@@ -85,10 +85,10 @@ className={`w-element`}>
 </Link>
 </div>
 <div
-className={`w-element w-element-15`}>
+className={`w-element w-element-10`}>
 <Link
 href={"https://portal.kareo.com/app/new/login"}
-className={`w-element w-element-16`}>
+className={`w-element w-element-11`}>
 {"Patient Portal"}
 </Link>
 </div>
@@ -97,29 +97,8 @@ className={`w-element w-element-16`}>
 </Fragment_1>
 </Slot>
 <div
-className={`w-element w-element-30`}>
+id={"top"}
-<div
+className={`w-element w-content-2`}>
-className={`w-element w-element-2`}>
-<div
-className={`w-element`}>
-{"404"}
-</div>
-<div
-className={`w-element w-element-3`}>
-{"404"}
-</div>
-<div
-className={`w-element w-element-4`}>
-{"404"}
-</div>
-<div
-className={`w-element w-element-5`} />
-</div>
-<p
-className={`w-element w-element-6`}>
-{"PAGE NOT FOUND"}
-</p>
-</div>
 <Link
 href={"https://bsidesol.com/"}
 target={"_blank"}
@@ -129,6 +108,156 @@ className={`w-element`}>
 {"Powered By BSide Solutions"}
 </div>
 </Link>
+<div
+className={`w-element w-page-content-3`}>
+<div
+className={`w-element w-wrapper-3`}>
+<div
+className={`w-element w-element-65`}>
+<div
+className={`w-element w-element-66`}>
+<div
+className={`w-element`}>
+{"404"}
+</div>
+<div
+className={`w-element w-element-67`}>
+{"404"}
+</div>
+<div
+className={`w-element w-element-68`}>
+{"404"}
+</div>
+<div
+className={`w-element w-element-69`} />
+</div>
+<p
+className={`w-element w-element-70`}>
+{"PAGE NOT FOUND"}
+</p>
+</div>
+</div>
+</div>
+<Slot>
+<Fragment_1>
+<div
+className={`w-element w-element-12`}>
+<div
+href={"/"}
+className={`w-element w-element-17`}>
+<div
+className={`w-element w-element-27`}>
+<Link
+href={"/"}
+className={`w-element w-element-25`}>
+<div
+className={`w-element w-element-26`}>
+<Image
+src={"/assets/file_000000003f50722fa551064d566374f2_kdDbKfOW9fojde3YWOccm.png"}
+width={1024}
+height={1024}
+loading={"lazy"}
+alt={"logo"}
+className={`w-image w-image-2`} />
+</div>
+</Link>
+</div>
+<div
+className={`w-element w-element-21`}>
+<h3
+className={`w-element w-element-22`}>
+<span
+className={`w-element`}>
+{"Quick Links"}
+</span>
+</h3>
+<ul
+className={`w-element w-element-23`}>
+<li
+className={`w-element`}>
+{"Home"}
+</li>
+<li
+className={`w-element`}>
+{"About"}
+</li>
+<li
+className={`w-element`}>
+{"Insurance"}
+</li>
+<li
+className={`w-element`}>
+{"Services"}
+</li>
+<li
+className={`w-element`}>
+{"Contact"}
+</li>
+</ul>
+</div>
+</div>
+<div
+className={`w-element w-element-13`}>
+<h3
+className={`w-element w-element-18`}>
+<span
+className={`w-element`}>
+{"Our Services"}
+</span>
+</h3>
+<ul
+className={`w-element w-element-14`}>
+<li
+className={`w-element`}>
+{"View All Services"}
+</li>
+<li
+className={`w-element`}>
+<Link
+href={"https://d2oe0ra32qx05a.cloudfront.net/?practiceKey=k_1_112536"}
+className={`w-element w-element-24`}>
+{"Book Appointment"}
+</Link>
+</li>
+</ul>
+</div>
+<div
+className={`w-element w-element-15`}>
+<h3
+className={`w-element w-element-19`}>
+<span
+className={`w-element`}>
+{"Contact Info"}
+</span>
+</h3>
+<ul
+className={`w-element w-element-16`}>
+<li
+className={`w-element`}>
+{"Home"}
+</li>
+<li
+className={`w-element`}>
+{"About"}
+</li>
+<li
+className={`w-element`}>
+{"Insurance"}
+</li>
+<li
+className={`w-element`}>
+{"Services"}
+</li>
+<li
+className={`w-element`}>
+{"Contact"}
+</li>
+</ul>
+</div>
+</div>
+</Fragment_1>
+</Slot>
+</div>
 </Body>
 }
 

app/__generated__/$resources.sitemap.xml.ts

@@ -2,7 +2,7 @@
       export const sitemap = [
   {
     "path": "/",
-    "lastModified": "2025-11-23"
+    "lastModified": "2025-11-26"
   }
 ];
     

app/__generated__/[about]._index.server.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable */
+      /* This is a auto generated file for building the project */ 
+
+
+      import type { PageMeta } from "@webstudio-is/sdk";
+      import type { System, ResourceRequest } from "@webstudio-is/sdk";
+export const getResources = (_props: { system: System }) => {
+  const _data = new Map<string, ResourceRequest>([
+  ])
+  const _action = new Map<string, ResourceRequest>([
+  ])
+  return { data: _data, action: _action }
+}
+
+
+      export const getPageMeta = ({
+  system,
+  resources,
+}: {
+  system: System;
+  resources: Record<string, any>;
+}): PageMeta => {
+  return {
+    title: "Inasa Healthcare | About",
+    description: "",
+    excludePageFromSearch: true,
+    language: "",
+    socialImageAssetName: undefined,
+    socialImageUrl: "",
+    status: undefined,
+    redirect: "",
+    custom: [
+    ],
+  };
+};
+
+
+      type Params = Record<string, string | undefined>;
+export const getRemixParams = ({ ...params }: Params): Params => {
+  return params
+}
+
+
+      export const contactEmail = "inasahealthcare@gmail.com";
+    

app/__generated__/[about]._index.tsx

@@ -0,0 +1,311 @@
+/* eslint-disable */
+      /* This is a auto generated file for building the project */ 
+
+
+      import { Fragment, useState } from "react";
+      import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
+      import { Fragment as Fragment_1, Image as Image, HtmlEmbed as HtmlEmbed, Slot as Slot } from "@webstudio-is/sdk-components-react";
+import { Link as Link, Body as Body } from "@webstudio-is/sdk-components-react-router";
+
+
+      export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
+
+      export const lastPublished = "2025-11-26T03:01:58.340Z";
+
+      export const siteName = "Inasa Healthcare";
+
+      export const breakpoints = [{"id":"5zaWVFAeAfWgFjJNQ0GET"},{"id":"qOHlWr9cjM-6l364uX_FK","maxWidth":991},{"id":"8_hh5VMsAyWW46cnpT5HQ","maxWidth":767},{"id":"swNXPQRoKH4ij-T-zGDE7","maxWidth":479}];
+
+      export const favIconAsset: string | undefined =
+        undefined;
+
+      // Font assets on current page (can be preloaded)
+      export const pageFontAssets: string[] =
+        []
+
+      export const pageBackgroundImageAssets: string[] =
+        []
+
+      
+
+      const Page = (_props: { system: any; }) => {
+return <Body
+className={`w-element`}>
+<Slot>
+<Fragment_1>
+<div
+id={"top"}
+className={`w-element w-element-2`}>
+<Link
+href={"/"}
+className={`w-element w-element-3`}>
+<Image
+src={"/assets/file_000000003f50722fa551064d566374f2_kdDbKfOW9fojde3YWOccm.png"}
+width={1024}
+height={1024}
+loading={"lazy"}
+alt={"logo"}
+className={`w-image w-image-1`} />
+</Link>
+<div
+className={`w-element w-element-4`}>
+<div
+className={`w-element w-element-5`}>
+<Link
+href={"/about"}
+className={`w-element w-element-6`}>
+<b
+className={`w-element w-element-20`}>
+{"About"}
+</b>
+</Link>
+<Link
+href={"/insurance"}
+className={`w-element w-element-7`}>
+<b
+className={`w-element`}>
+{"Insurance"}
+</b>
+</Link>
+<Link
+href={"/services"}
+className={`w-element w-element-8`}>
+<b
+className={`w-element`}>
+{"Services"}
+</b>
+</Link>
+<Link
+href={"/contact"}
+className={`w-element w-element-9`}>
+<b
+className={`w-element`}>
+{"Contact"}
+</b>
+</Link>
+</div>
+<div
+className={`w-element w-element-10`}>
+<Link
+href={"https://portal.kareo.com/app/new/login"}
+className={`w-element w-element-11`}>
+{"Patient Portal"}
+</Link>
+</div>
+</div>
+</div>
+</Fragment_1>
+</Slot>
+<div
+id={"top"}
+className={`w-element w-content-3`}>
+<Slot>
+<Fragment_1>
+<div
+className={`w-element w-element-60`}>
+<Link
+href={"https://d2oe0ra32qx05a.cloudfront.net/?practiceKey=k_1_112536"}
+className={`w-element w-book-appointment-btn`}>
+<Slot>
+<Fragment_1>
+<div
+className={`w-element w-element-58`}>
+<HtmlEmbed
+code={"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 20 20\">\n    <path fill=\"currentColor\" d=\"M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z\"/>\n</svg>"}
+className={`w-html-embed w-html-embed-1`} />
+</div>
+</Fragment_1>
+</Slot>
+</Link>
+<Link
+type={"button"}
+href={"/#top"}
+className={`w-element w-back-up-btn`}>
+<Slot>
+<Fragment_1>
+<div
+className={`w-element w-element-59`}>
+<HtmlEmbed
+code={"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 400 448\">\n    <path fill=\"currentColor\" d=\"m44 273l156-139l156 137q4 4 15 4q10 0 17-6q13-15-2-30L200 79L14 241q-14 16-2 30q14 13 32 2z\"/>\n</svg>"}
+className={`w-html-embed w-html-embed-2`} />
+</div>
+</Fragment_1>
+</Slot>
+</Link>
+</div>
+</Fragment_1>
+</Slot>
+<div
+className={`w-element w-page-content-4`}>
+<div
+className={`w-element w-wrapper-4`}>
+<Slot>
+<Fragment_1>
+<section
+className={`w-element w-element-71`}>
+<div
+className={`w-element w-element-77`}>
+<h1
+className={`w-element w-element-76`}>
+{"About Your Physician"}
+</h1>
+</div>
+<div
+className={`w-element w-element-72`}>
+<div
+className={`w-element w-element-73`}>
+<p
+className={`w-element w-element-75`}>
+<span
+className={`w-element`}>
+<b
+className={`w-element`}>
+{"Chinasa Rita Onyeje, DNP, CRNP, FNP-BC, PMHNP-BC,"}
+</b>
+</span>
+{" is a dual board-certified Family and Psychiatric Mental Health Nurse Practitioner who is compassionate, dedicated with genuine love for my profession. Patients are her first priority and she always strives to provide personalized, comprehensive, high-quality, patient centered care with emphasis on clear communication and patient education, to empower patients on their health care path. Establishing a therapeutic alliance with my patients through active listening, empathy, and mutual respect is the number one goal. I am dedicated to helping patients manage chronic conditions, psychiatric illnesses, urgent / acute care matters, wellness screening and preventive health care services. "}
+<br />
+{""}
+<br />
+{"Her educational career began at the University of Maryland, with a bachelor of Science degree in Nursing, then Masters degree in Family Nurse Practitioner from Coppin State University, and later a Doctorate degree with a focus on Psychiatric and Mental Health from University of Massachusetts."}
+</p>
+</div>
+<div
+className={`w-element w-element-74`}>
+<Image
+width={1024}
+height={1024}
+className={`w-image w-image-5`} />
+</div>
+</div>
+</section>
+</Fragment_1>
+</Slot>
+</div>
+</div>
+<Slot>
+<Fragment_1>
+<div
+className={`w-element w-element-12`}>
+<div
+href={"/"}
+className={`w-element w-element-17`}>
+<div
+className={`w-element w-element-27`}>
+<Link
+href={"/"}
+className={`w-element w-element-25`}>
+<div
+className={`w-element w-element-26`}>
+<Image
+src={"/assets/file_000000003f50722fa551064d566374f2_kdDbKfOW9fojde3YWOccm.png"}
+width={1024}
+height={1024}
+loading={"lazy"}
+alt={"logo"}
+className={`w-image w-image-2`} />
+</div>
+</Link>
+</div>
+<div
+className={`w-element w-element-21`}>
+<h3
+className={`w-element w-element-22`}>
+<span
+className={`w-element`}>
+{"Quick Links"}
+</span>
+</h3>
+<ul
+className={`w-element w-element-23`}>
+<li
+className={`w-element`}>
+{"Home"}
+</li>
+<li
+className={`w-element`}>
+{"About"}
+</li>
+<li
+className={`w-element`}>
+{"Insurance"}
+</li>
+<li
+className={`w-element`}>
+{"Services"}
+</li>
+<li
+className={`w-element`}>
+{"Contact"}
+</li>
+</ul>
+</div>
+</div>
+<div
+className={`w-element w-element-13`}>
+<h3
+className={`w-element w-element-18`}>
+<span
+className={`w-element`}>
+{"Our Services"}
+</span>
+</h3>
+<ul
+className={`w-element w-element-14`}>
+<li
+className={`w-element`}>
+{"View All Services"}
+</li>
+<li
+className={`w-element`}>
+<Link
+href={"https://d2oe0ra32qx05a.cloudfront.net/?practiceKey=k_1_112536"}
+className={`w-element w-element-24`}>
+{"Book Appointment"}
+</Link>
+</li>
+</ul>
+</div>
+<div
+className={`w-element w-element-15`}>
+<h3
+className={`w-element w-element-19`}>
+<span
+className={`w-element`}>
+{"Contact Info"}
+</span>
+</h3>
+<ul
+className={`w-element w-element-16`}>
+<li
+className={`w-element`}>
+{"Home"}
+</li>
+<li
+className={`w-element`}>
+{"About"}
+</li>
+<li
+className={`w-element`}>
+{"Insurance"}
+</li>
+<li
+className={`w-element`}>
+{"Services"}
+</li>
+<li
+className={`w-element`}>
+{"Contact"}
+</li>
+</ul>
+</div>
+</div>
+</Fragment_1>
+</Slot>
+</div>
+</Body>
+}
+
+
+      export { Page }
+    

app/__generated__/[contact]._index.tsx

@@ -10,14 +10,14 @@ 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-11-23T14:35:23.308Z";
+      export const lastPublished = "2025-11-26T03:01:58.340Z";
 
       export const siteName = "Inasa Healthcare";
 
       export const breakpoints = [{"id":"5zaWVFAeAfWgFjJNQ0GET"},{"id":"qOHlWr9cjM-6l364uX_FK","maxWidth":991},{"id":"8_hh5VMsAyWW46cnpT5HQ","maxWidth":767},{"id":"swNXPQRoKH4ij-T-zGDE7","maxWidth":479}];
 
       export const favIconAsset: string | undefined =
-        "file_000000003adc722fbb2d4c57f70e11d2_FsnGqm4TIkHGomknin2UT.png";
+        undefined;
 
       // Font assets on current page (can be preloaded)
       export const pageFontAssets: string[] =
@@ -34,13 +34,13 @@ className={`w-element`}>
 <Slot>
 <Fragment_1>
 <div
-id={""}
+id={"top"}
-className={`w-element w-element-7`}>
+className={`w-element w-element-2`}>
 <Link
 href={"/"}
-className={`w-element w-element-8`}>
+className={`w-element w-element-3`}>
 <Image
-src={"/assets/file_000000003adc722fbb2d4c57f70e11d2_FsnGqm4TIkHGomknin2UT.png"}
+src={"/assets/file_000000003f50722fa551064d566374f2_kdDbKfOW9fojde3YWOccm.png"}
 width={1024}
 height={1024}
 loading={"lazy"}
@@ -48,20 +48,20 @@ alt={"logo"}
 className={`w-image w-image-1`} />
 </Link>
 <div
-className={`w-element w-element-9`}>
+className={`w-element w-element-4`}>
 <div
-className={`w-element w-element-10`}>
+className={`w-element w-element-5`}>
 <Link
 href={"/about"}
-className={`w-element w-element-11`}>
+className={`w-element w-element-6`}>
 <b
-className={`w-element w-element-25`}>
+className={`w-element w-element-20`}>
 {"About"}
 </b>
 </Link>
 <Link
 href={"/insurance"}
-className={`w-element w-element-12`}>
+className={`w-element w-element-7`}>
 <b
 className={`w-element`}>
 {"Insurance"}
@@ -69,7 +69,7 @@ className={`w-element`}>
 </Link>
 <Link
 href={"/services"}
-className={`w-element w-element-13`}>
+className={`w-element w-element-8`}>
 <b
 className={`w-element`}>
 {"Services"}
@@ -77,7 +77,7 @@ className={`w-element`}>
 </Link>
 <Link
 href={"/contact"}
-className={`w-element w-element-14`}>
+className={`w-element w-element-9`}>
 <b
 className={`w-element`}>
 {"Contact"}
@@ -85,10 +85,10 @@ className={`w-element`}>
 </Link>
 </div>
 <div
-className={`w-element w-element-15`}>
+className={`w-element w-element-10`}>
 <Link
 href={"https://portal.kareo.com/app/new/login"}
-className={`w-element w-element-16`}>
+className={`w-element w-element-11`}>
 {"Patient Portal"}
 </Link>
 </div>
@@ -102,14 +102,14 @@ className={`w-element w-content-1`}>
 <Slot>
 <Fragment_1>
 <div
-className={`w-element w-element-70`}>
+className={`w-element w-element-60`}>
 <Link
 href={"https://d2oe0ra32qx05a.cloudfront.net/?practiceKey=k_1_112536"}
 className={`w-element w-book-appointment-btn`}>
 <Slot>
 <Fragment_1>
 <div
-className={`w-element w-element-68`}>
+className={`w-element w-element-58`}>
 <HtmlEmbed
 code={"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 20 20\">\n    <path fill=\"currentColor\" d=\"M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z\"/>\n</svg>"}
 className={`w-html-embed w-html-embed-1`} />
@@ -124,7 +124,7 @@ className={`w-element w-back-up-btn`}>
 <Slot>
 <Fragment_1>
 <div
-className={`w-element w-element-69`}>
+className={`w-element w-element-59`}>
 <HtmlEmbed
 code={"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 400 448\">\n    <path fill=\"currentColor\" d=\"m44 273l156-139l156 137q4 4 15 4q10 0 17-6q13-15-2-30L200 79L14 241q-14 16-2 30q14 13 32 2z\"/>\n</svg>"}
 className={`w-html-embed w-html-embed-2`} />
@@ -142,18 +142,33 @@ className={`w-element w-wrapper-2`}>
 <Slot>
 <Fragment_1>
 <section
-className={`w-element w-element-71`}>
+className={`w-element w-element-61`}>
 <div
-className={`w-element`}>
+className={`w-element w-element-63`}>
-<h1
-className={`w-element`}>
-{"Contact Us"}
-</h1>
 <RemixForm
 id={"contact.form"}
 method={"post"}
 encType={"application/x-www-form-urlencoded"}
-className={`w-element`}>
+className={`w-element w-element-62`}>
+<div
+className={`w-element w-contact-form-header-info`}>
+<h1
+className={`w-element w-element-85`}>
+{"Contact Us"}
+</h1>
+<p
+className={`w-element w-element-78`}>
+{"Let people know what to reach out about and what to expect after contacting you. Don’t forget to choose a storage option for submissions"}
+</p>
+<p
+className={`w-element w-element-79`}>
+{"inasahealthcare@gmail.com"}
+<br />
+{"(443) 631-3354"}
+</p>
+</div>
+<div
+className={`w-element w-contact-form`}>
 <label
 htmlFor={"contact.name"}
 className={`w-element`}>
@@ -167,8 +182,6 @@ required={true}
 className={`w-element`} />
 <br
 className={`w-element`} />
-<br
-className={`w-element`} />
 <label
 htmlFor={"contact.subject"}
 className={`w-element`}>
@@ -182,8 +195,6 @@ required={true}
 className={`w-element`} />
 <br
 className={`w-element`} />
-<br
-className={`w-element`} />
 <label
 htmlFor={"contact.email"}
 className={`w-element`}>
@@ -197,8 +208,6 @@ required={true}
 className={`w-element`} />
 <br
 className={`w-element`} />
-<br
-className={`w-element`} />
 <label
 htmlFor={"contact.message"}
 className={`w-element`}>
@@ -212,24 +221,28 @@ required={true}
 className={`w-element`} />
 <br
 className={`w-element`} />
-<br
-className={`w-element`} />
 <button
 type={"submit"}
-className={`w-element`}>
+className={`w-element w-element-84`}>
 {"Send Message"}
 </button>
-</RemixForm>
 <div
 id={"contact.responseMessage"}
 className={`w-element`} />
 </div>
+</RemixForm>
+<div
+className={`w-element w-element-64`}>
+<Image
+width={1024}
+height={1024}
+className={`w-image w-image-6`} />
+</div>
 <HtmlEmbed
 executeScriptOnCanvas={true}
 code={"<script>\n  document.getElementById('contact.form').addEventListener('submit', function(event) {\n    event.preventDefault(); // Prevent default form submission\n\n    const webhookUrl = 'https://n8n-ai.bsidesolutions.net/webhook-test/9974ca96-98ba-4e56-bb48-debfdad8cf59'; // use Webhook studio Global data var\n    \n    const name = document.getElementById('contact.name').value;\n    const subject = document.getElementById('contact.subject').value;\n    const sender = document.getElementById('contact.email').value;\n    const message = document.getElementById('contact.message').value;\n    const recipient = 'no-reply@inasahealthcare.com'; // use Webhook studio Global data var\n\n    const formData = {\n        name,\n        subject,\n        sender,\n        message,\n        recipient\n    };\n\n    fetch(webhookUrl, {\n        method: 'POST',\n        headers: {\n            'Content-Type': 'application/json' // Or 'application/x-www-form-urlencoded' if your webhook expects that\n        },\n        body: JSON.stringify(formData) // Send data as JSON\n    })\n    .then(response => {\n        if (!response.ok) {\n            throw new Error(`HTTP error! status: ${response.status}`);\n        }\n        return response.json(); // Or response.text() if your webhook doesn't return JSON\n    })\n    .then(data => {\n        document.getElementById('contact.responseMessage').innerText = 'Message sent successfully!';\n        console.log('Success:', data);\n        document.getElementById('contact.form').reset(); // Clear the form\n    })\n    .catch(error => {\n        document.getElementById('contact.responseMessage').innerText = 'Error sending message.';\n        console.error('Error:', error);\n    });\n});\n</script>\n"}
 className={`w-html-embed`} />
-<div
+</div>
-className={`w-element`} />
 </section>
 </Fragment_1>
 </Slot>
@@ -238,19 +251,19 @@ className={`w-element`} />
 <Slot>
 <Fragment_1>
 <div
+className={`w-element w-element-12`}>
+<div
+href={"/"}
 className={`w-element w-element-17`}>
 <div
-href={"/"}
+className={`w-element w-element-27`}>
-className={`w-element w-element-22`}>
-<div
-className={`w-element w-element-33`}>
 <Link
 href={"/"}
-className={`w-element w-element-31`}>
+className={`w-element w-element-25`}>
 <div
-className={`w-element w-element-32`}>
+className={`w-element w-element-26`}>
 <Image
-src={"/assets/file_000000003adc722fbb2d4c57f70e11d2_FsnGqm4TIkHGomknin2UT.png"}
+src={"/assets/file_000000003f50722fa551064d566374f2_kdDbKfOW9fojde3YWOccm.png"}
 width={1024}
 height={1024}
 loading={"lazy"}
@@ -260,16 +273,16 @@ className={`w-image w-image-2`} />
 </Link>
 </div>
 <div
-className={`w-element w-element-26`}>
+className={`w-element w-element-21`}>
 <h3
-className={`w-element w-element-27`}>
+className={`w-element w-element-22`}>
 <span
 className={`w-element`}>
 {"Quick Links"}
 </span>
 </h3>
 <ul
-className={`w-element w-element-28`}>
+className={`w-element w-element-23`}>
 <li
 className={`w-element`}>
 {"Home"}
@@ -294,16 +307,16 @@ className={`w-element`}>
 </div>
 </div>
 <div
-className={`w-element w-element-18`}>
+className={`w-element w-element-13`}>
 <h3
-className={`w-element w-element-23`}>
+className={`w-element w-element-18`}>
 <span
 className={`w-element`}>
 {"Our Services"}
 </span>
 </h3>
 <ul
-className={`w-element w-element-19`}>
+className={`w-element w-element-14`}>
 <li
 className={`w-element`}>
 {"View All Services"}
@@ -312,23 +325,23 @@ className={`w-element`}>
 className={`w-element`}>
 <Link
 href={"https://d2oe0ra32qx05a.cloudfront.net/?practiceKey=k_1_112536"}
-className={`w-element w-element-29`}>
+className={`w-element w-element-24`}>
 {"Book Appointment"}
 </Link>
 </li>
 </ul>
 </div>
 <div
-className={`w-element w-element-20`}>
+className={`w-element w-element-15`}>
 <h3
-className={`w-element w-element-24`}>
+className={`w-element w-element-19`}>
 <span
 className={`w-element`}>
 {"Contact Info"}
 </span>
 </h3>
 <ul
-className={`w-element w-element-21`}>
+className={`w-element w-element-16`}>
 <li
 className={`w-element`}>
 {"Home"}

app/__generated__/[services]._index.tsx

@@ -11,14 +11,14 @@ import { Dialog as Dialog, DialogTrigger as DialogTrigger, DialogOverlay as Dial
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-11-23T14:35:23.308Z";
+      export const lastPublished = "2025-11-26T03:01:58.340Z";
 
       export const siteName = "Inasa Healthcare";
 
       export const breakpoints = [{"id":"5zaWVFAeAfWgFjJNQ0GET"},{"id":"qOHlWr9cjM-6l364uX_FK","maxWidth":991},{"id":"8_hh5VMsAyWW46cnpT5HQ","maxWidth":767},{"id":"swNXPQRoKH4ij-T-zGDE7","maxWidth":479}];
 
       export const favIconAsset: string | undefined =
-        "file_000000003adc722fbb2d4c57f70e11d2_FsnGqm4TIkHGomknin2UT.png";
+        undefined;
 
       // Font assets on current page (can be preloaded)
       export const pageFontAssets: string[] =
@@ -35,13 +35,13 @@ className={`w-element`}>
 <Slot>
 <Fragment_1>
 <div
-id={""}
+id={"top"}
-className={`w-element w-element-7`}>
+className={`w-element w-element-2`}>
 <Link
 href={"/"}
-className={`w-element w-element-8`}>
+className={`w-element w-element-3`}>
 <Image
-src={"/assets/file_000000003adc722fbb2d4c57f70e11d2_FsnGqm4TIkHGomknin2UT.png"}
+src={"/assets/file_000000003f50722fa551064d566374f2_kdDbKfOW9fojde3YWOccm.png"}
 width={1024}
 height={1024}
 loading={"lazy"}
@@ -49,20 +49,20 @@ alt={"logo"}
 className={`w-image w-image-1`} />
 </Link>
 <div
-className={`w-element w-element-9`}>
+className={`w-element w-element-4`}>
 <div
-className={`w-element w-element-10`}>
+className={`w-element w-element-5`}>
 <Link
 href={"/about"}
-className={`w-element w-element-11`}>
+className={`w-element w-element-6`}>
 <b
-className={`w-element w-element-25`}>
+className={`w-element w-element-20`}>
 {"About"}
 </b>
 </Link>
 <Link
 href={"/insurance"}
-className={`w-element w-element-12`}>
+className={`w-element w-element-7`}>
 <b
 className={`w-element`}>
 {"Insurance"}
@@ -70,7 +70,7 @@ className={`w-element`}>
 </Link>
 <Link
 href={"/services"}
-className={`w-element w-element-13`}>
+className={`w-element w-element-8`}>
 <b
 className={`w-element`}>
 {"Services"}
@@ -78,7 +78,7 @@ className={`w-element`}>
 </Link>
 <Link
 href={"/contact"}
-className={`w-element w-element-14`}>
+className={`w-element w-element-9`}>
 <b
 className={`w-element`}>
 {"Contact"}
@@ -86,10 +86,10 @@ className={`w-element`}>
 </Link>
 </div>
 <div
-className={`w-element w-element-15`}>
+className={`w-element w-element-10`}>
 <Link
 href={"https://portal.kareo.com/app/new/login"}
-className={`w-element w-element-16`}>
+className={`w-element w-element-11`}>
 {"Patient Portal"}
 </Link>
 </div>
@@ -97,6 +97,42 @@ className={`w-element w-element-16`}>
 </div>
 </Fragment_1>
 </Slot>
+<Slot>
+<Fragment_1>
+<div
+className={`w-element w-element-60`}>
+<Link
+href={"https://d2oe0ra32qx05a.cloudfront.net/?practiceKey=k_1_112536"}
+className={`w-element w-book-appointment-btn`}>
+<Slot>
+<Fragment_1>
+<div
+className={`w-element w-element-58`}>
+<HtmlEmbed
+code={"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 20 20\">\n    <path fill=\"currentColor\" d=\"M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z\"/>\n</svg>"}
+className={`w-html-embed w-html-embed-1`} />
+</div>
+</Fragment_1>
+</Slot>
+</Link>
+<Link
+type={"button"}
+href={"/#top"}
+className={`w-element w-back-up-btn`}>
+<Slot>
+<Fragment_1>
+<div
+className={`w-element w-element-59`}>
+<HtmlEmbed
+code={"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 400 448\">\n    <path fill=\"currentColor\" d=\"m44 273l156-139l156 137q4 4 15 4q10 0 17-6q13-15-2-30L200 79L14 241q-14 16-2 30q14 13 32 2z\"/>\n</svg>"}
+className={`w-html-embed w-html-embed-2`} />
+</div>
+</Fragment_1>
+</Slot>
+</Link>
+</div>
+</Fragment_1>
+</Slot>
 <div
 className={`w-element w-page-content`}>
 <div
@@ -105,43 +141,39 @@ className={`w-element w-wrapper`}>
 <Fragment_1>
 <section
 id={"services"}
-className={`w-element ${"services"}`}>
+className={`w-element w-element-83 ${"services"}`}>
 <div
 className={`w-element ${"container"}`}>
 <div
-className={`w-element w-element-34 ${"section-header"}`}>
+className={`w-element w-element-28 ${"section-header"}`}>
 <h1
-className={`w-element w-element-45`}>
+className={`w-element w-element-36`}>
 {"Our Services"}
 </h1>
-<p
-className={`w-element w-element-46`}>
-{"Comprehensive healthcare services tailored to your needs"}
-</p>
 </div>
 <div
-className={`w-element w-element-35 ${"services-grid"}`}>
+className={`w-element w-element-29 ${"services-grid"}`}>
 <div
-className={`w-element w-element-36 ${"service-card"}`}>
+className={`w-element w-element-30 ${"service-card"}`}>
 <div
-className={`w-element w-element-37 ${"service-icon"}`}>
+className={`w-element w-element-31 ${"service-icon"}`}>
 <Image
 alt={"Mental Health Services"}
 src={"/services/primarycare.svg"}
 className={`w-image w-image-3 ${"w-10 h-10"}`} />
 </div>
 <h3
-className={`w-element w-element-47`}>
+className={`w-element w-element-37`}>
 {"Mental Health Services"}
 </h3>
 <p
-className={`w-element w-element-48`}>
+className={`w-element w-element-38`}>
 {"Mental Health Screening, Evaluation and Treatment for: depression, anxiety, bipolar disorder, other psychiatric conditions"}
 </p>
 <Dialog>
 <DialogTrigger>
 <button
-className={`w-element w-element-57 ${"service-button"}`}>
+className={`w-element w-element-47 ${"service-button"}`}>
 {"Learn More"}
 </button>
 </DialogTrigger>
@@ -175,26 +207,26 @@ className={`w-html-embed`} />
 </Dialog>
 </div>
 <div
-className={`w-element w-element-38 ${"service-card"}`}>
+className={`w-element w-element-32 ${"service-card"}`}>
 <div
-className={`w-element w-element-39 ${"service-icon"}`}>
+className={`w-element w-element-33 ${"service-icon"}`}>
 <Image
 alt={"Chronic Illness"}
 src={"/services/urgentcare.svg"}
 className={`w-image ${"w-10 h-10"}`} />
 </div>
 <h3
-className={`w-element w-element-49`}>
+className={`w-element w-element-39`}>
 {"Chronic Illness Management"}
 </h3>
 <p
-className={`w-element w-element-50`}>
+className={`w-element w-element-40`}>
 {"Diabetes and Hypertension management, Cholesterol screening and management, Weight loss management and support, Women and Men's health, Nicotine dependency treatment"}
 </p>
 <Dialog>
 <DialogTrigger>
 <button
-className={`w-element w-element-58 ${"service-button"}`}>
+className={`w-element w-element-48 ${"service-button"}`}>
 {"Learn More"}
 </button>
 </DialogTrigger>
@@ -228,26 +260,26 @@ className={`w-html-embed`} />
 </Dialog>
 </div>
 <div
-className={`w-element w-element-40 ${"service-card"}`}>
+className={`w-element w-element-34 ${"service-card"}`}>
 <div
-className={`w-element w-element-41 ${"service-icon"}`}>
+className={`w-element w-element-35 ${"service-icon"}`}>
 <Image
 alt={"Physicals & Screenings"}
 src={"/services/physical.svg"}
 className={`w-image ${"w-10 h-10"}`} />
 </div>
 <h3
-className={`w-element w-element-51`}>
+className={`w-element w-element-41`}>
 {"Primary & Preventive Care"}
 </h3>
 <p
-className={`w-element w-element-52`}>
+className={`w-element w-element-42`}>
 {"Pre-employment, DOT, sports, camp physicals, tuberculin tests, and titers."}
 </p>
 <Dialog>
 <DialogTrigger>
 <button
-className={`w-element w-element-59 ${"service-button"}`}>
+className={`w-element w-element-49 ${"service-button"}`}>
 {"Learn More"}
 </button>
 </DialogTrigger>
@@ -281,26 +313,26 @@ className={`w-html-embed`} />
 </Dialog>
 </div>
 <div
-className={`w-element w-element-53 ${"service-card"}`}>
+className={`w-element w-element-43 ${"service-card"}`}>
 <div
-className={`w-element w-element-54 ${"service-icon"}`}>
+className={`w-element w-element-44 ${"service-icon"}`}>
 <Image
 alt={"Physicals & Screenings"}
 src={"/services/physical.svg"}
 className={`w-image w-image-4 ${"w-10 h-10"}`} />
 </div>
 <h3
-className={`w-element w-element-55`}>
+className={`w-element w-element-45`}>
 {"Urgent Care & Walk-in Services"}
 </h3>
 <p
-className={`w-element w-element-56`}>
+className={`w-element w-element-46`}>
 {"Pre-employment, DOT, sports, camp physicals, tuberculin tests, and titers."}
 </p>
 <Dialog>
 <DialogTrigger>
 <button
-className={`w-element w-element-60 ${"service-button"}`}>
+className={`w-element w-element-50 ${"service-button"}`}>
 {"Learn More"}
 </button>
 </DialogTrigger>
@@ -312,7 +344,7 @@ className={`w-dialog-content w-dialog-content-4`}>
 className={`w-box w-dialog-header-3`}>
 <DialogTitle
 className={`w-dialog-title w-dialog-title-4`}>
-{"Dialog Title you can edit"}
+{"Urgent Care & Walk In Services"}
 </DialogTitle>
 <DialogDescription
 className={`w-dialog-description w-dialog-description-4`}>
@@ -321,8 +353,43 @@ className={`w-dialog-description w-dialog-description-4`}>
 </Box>
 <Text
 className={`w-text`}>
-{"The text you can edit"}
+{"Services Include:"}
 </Text>
+<div
+className={`w-element w-element-80`}>
+<div
+className={`w-element w-element-81`}>
+<ul
+className={`w-element`}>
+<li
+className={`w-element`}>
+{"Acute & Sick Visits"}
+</li>
+<li
+className={`w-element`}>
+{"STI Testing & Treatment"}
+</li>
+<li
+className={`w-element`}>
+{"UTI Testing & Treatment"}
+</li>
+</ul>
+</div>
+<div
+className={`w-element w-element-82`}>
+<ul
+className={`w-element`}>
+<li
+className={`w-element`}>
+{"Sprain & Strain Management"}
+</li>
+<li
+className={`w-element`}>
+{"Telehealth/Virtual visits for diagnosis, prescriptions, follow up, lab results, and health education"}
+</li>
+</ul>
+</div>
+</div>
 <DialogClose
 className={`w-close-button w-close-button-4`}>
 <HtmlEmbed
@@ -334,20 +401,6 @@ className={`w-html-embed`} />
 </Dialog>
 </div>
 </div>
-<div
-className={`w-element w-element-42`}>
-<p
-className={`w-element w-element-43`}>
-{"Looking for immediate care in Nottingham, MD? "}
-<Link
-href={"/nottingham-md-clinic"}
-data-discover={"true"}
-className={`w-element w-element-44`}>
-{"Visit our Nottingham clinic page"}
-</Link>
-{" for same-day appointments, walk-in services, and comprehensive care at 4416 Fitch Ave."}
-</p>
-</div>
 </div>
 </section>
 </Fragment_1>
@@ -357,19 +410,19 @@ className={`w-element w-element-44`}>
 <Slot>
 <Fragment_1>
 <div
+className={`w-element w-element-12`}>
+<div
+href={"/"}
 className={`w-element w-element-17`}>
 <div
-href={"/"}
+className={`w-element w-element-27`}>
-className={`w-element w-element-22`}>
-<div
-className={`w-element w-element-33`}>
 <Link
 href={"/"}
-className={`w-element w-element-31`}>
+className={`w-element w-element-25`}>
 <div
-className={`w-element w-element-32`}>
+className={`w-element w-element-26`}>
 <Image
-src={"/assets/file_000000003adc722fbb2d4c57f70e11d2_FsnGqm4TIkHGomknin2UT.png"}
+src={"/assets/file_000000003f50722fa551064d566374f2_kdDbKfOW9fojde3YWOccm.png"}
 width={1024}
 height={1024}
 loading={"lazy"}
@@ -379,16 +432,16 @@ className={`w-image w-image-2`} />
 </Link>
 </div>
 <div
-className={`w-element w-element-26`}>
+className={`w-element w-element-21`}>
 <h3
-className={`w-element w-element-27`}>
+className={`w-element w-element-22`}>
 <span
 className={`w-element`}>
 {"Quick Links"}
 </span>
 </h3>
 <ul
-className={`w-element w-element-28`}>
+className={`w-element w-element-23`}>
 <li
 className={`w-element`}>
 {"Home"}
@@ -413,16 +466,16 @@ className={`w-element`}>
 </div>
 </div>
 <div
-className={`w-element w-element-18`}>
+className={`w-element w-element-13`}>
 <h3
-className={`w-element w-element-23`}>
+className={`w-element w-element-18`}>
 <span
 className={`w-element`}>
 {"Our Services"}
 </span>
 </h3>
 <ul
-className={`w-element w-element-19`}>
+className={`w-element w-element-14`}>
 <li
 className={`w-element`}>
 {"View All Services"}
@@ -431,23 +484,23 @@ className={`w-element`}>
 className={`w-element`}>
 <Link
 href={"https://d2oe0ra32qx05a.cloudfront.net/?practiceKey=k_1_112536"}
-className={`w-element w-element-29`}>
+className={`w-element w-element-24`}>
 {"Book Appointment"}
 </Link>
 </li>
 </ul>
 </div>
 <div
-className={`w-element w-element-20`}>
+className={`w-element w-element-15`}>
 <h3
-className={`w-element w-element-24`}>
+className={`w-element w-element-19`}>
 <span
 className={`w-element`}>
 {"Contact Info"}
 </span>
 </h3>
 <ul
-className={`w-element w-element-21`}>
+className={`w-element w-element-16`}>
 <li
 className={`w-element`}>
 {"Home"}

app/__generated__/_index.tsx

@@ -4,21 +4,21 @@
 
       import { Fragment, useState } from "react";
       import { useResource, useVariableState } from "@webstudio-is/react-sdk/runtime";
-      import { Body as Body, Link as Link } from "@webstudio-is/sdk-components-react-router";
+      import { Body as Body, Link as Link, RemixForm as RemixForm } from "@webstudio-is/sdk-components-react-router";
-import { Fragment as Fragment_1, Image as Image, Slot as Slot, Box as Box, Text as Text, HtmlEmbed as HtmlEmbed } from "@webstudio-is/sdk-components-react";
+import { Fragment as Fragment_1, Image as Image, Slot as Slot, Box as Box, Text as Text, HtmlEmbed as HtmlEmbed, Input as Input, Textarea as Textarea } from "@webstudio-is/sdk-components-react";
 import { Dialog as Dialog, DialogTrigger as DialogTrigger, DialogOverlay as DialogOverlay, DialogContent as DialogContent, DialogTitle as DialogTitle, DialogDescription as DialogDescription, DialogClose as DialogClose } from "@webstudio-is/sdk-components-react-radix";
 
 
       export const projectId = "363652e3-9846-4534-acdf-9b2b3c66eec0";
 
-      export const lastPublished = "2025-11-23T14:35:23.308Z";
+      export const lastPublished = "2025-11-26T03:01:58.340Z";
 
       export const siteName = "Inasa Healthcare";
 
       export const breakpoints = [{"id":"5zaWVFAeAfWgFjJNQ0GET"},{"id":"qOHlWr9cjM-6l364uX_FK","maxWidth":991},{"id":"8_hh5VMsAyWW46cnpT5HQ","maxWidth":767},{"id":"swNXPQRoKH4ij-T-zGDE7","maxWidth":479}];
 
       export const favIconAsset: string | undefined =
-        "file_000000003adc722fbb2d4c57f70e11d2_FsnGqm4TIkHGomknin2UT.png";
+        undefined;
 
       // Font assets on current page (can be preloaded)
       export const pageFontAssets: string[] =
@@ -37,17 +37,17 @@ import { Dialog as Dialog, DialogTrigger as DialogTrigger, DialogOverlay as Dial
 
       const Page = (_props: { system: any; }) => {
 return <Body
-className={`w-element w-element-61`}>
+className={`w-element w-element-51`}>
 <Slot>
 <Fragment_1>
 <div
-id={""}
+id={"top"}
-className={`w-element w-element-7`}>
+className={`w-element w-element-2`}>
 <Link
 href={"/"}
-className={`w-element w-element-8`}>
+className={`w-element w-element-3`}>
 <Image
-src={"/assets/file_000000003adc722fbb2d4c57f70e11d2_FsnGqm4TIkHGomknin2UT.png"}
+src={"/assets/file_000000003f50722fa551064d566374f2_kdDbKfOW9fojde3YWOccm.png"}
 width={1024}
 height={1024}
 loading={"lazy"}
@@ -55,20 +55,20 @@ alt={"logo"}
 className={`w-image w-image-1`} />
 </Link>
 <div
-className={`w-element w-element-9`}>
+className={`w-element w-element-4`}>
 <div
-className={`w-element w-element-10`}>
+className={`w-element w-element-5`}>
 <Link
 href={"/about"}
-className={`w-element w-element-11`}>
+className={`w-element w-element-6`}>
 <b
-className={`w-element w-element-25`}>
+className={`w-element w-element-20`}>
 {"About"}
 </b>
 </Link>
 <Link
 href={"/insurance"}
-className={`w-element w-element-12`}>
+className={`w-element w-element-7`}>
 <b
 className={`w-element`}>
 {"Insurance"}
@@ -76,7 +76,7 @@ className={`w-element`}>
 </Link>
 <Link
 href={"/services"}
-className={`w-element w-element-13`}>
+className={`w-element w-element-8`}>
 <b
 className={`w-element`}>
 {"Services"}
@@ -84,7 +84,7 @@ className={`w-element`}>
 </Link>
 <Link
 href={"/contact"}
-className={`w-element w-element-14`}>
+className={`w-element w-element-9`}>
 <b
 className={`w-element`}>
 {"Contact"}
@@ -92,10 +92,10 @@ className={`w-element`}>
 </Link>
 </div>
 <div
-className={`w-element w-element-15`}>
+className={`w-element w-element-10`}>
 <Link
 href={"https://portal.kareo.com/app/new/login"}
-className={`w-element w-element-16`}>
+className={`w-element w-element-11`}>
 {"Patient Portal"}
 </Link>
 </div>
@@ -104,19 +104,19 @@ className={`w-element w-element-16`}>
 </Fragment_1>
 </Slot>
 <div
-id={"top"}
+id={""}
 className={`w-element w-content`}>
 <Slot>
 <Fragment_1>
 <div
-className={`w-element w-element-70`}>
+className={`w-element w-element-60`}>
 <Link
 href={"https://d2oe0ra32qx05a.cloudfront.net/?practiceKey=k_1_112536"}
 className={`w-element w-book-appointment-btn`}>
 <Slot>
 <Fragment_1>
 <div
-className={`w-element w-element-68`}>
+className={`w-element w-element-58`}>
 <HtmlEmbed
 code={"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 20 20\">\n    <path fill=\"currentColor\" d=\"M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z\"/>\n</svg>"}
 className={`w-html-embed w-html-embed-1`} />
@@ -131,7 +131,7 @@ className={`w-element w-back-up-btn`}>
 <Slot>
 <Fragment_1>
 <div
-className={`w-element w-element-69`}>
+className={`w-element w-element-59`}>
 <HtmlEmbed
 code={"<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 400 448\">\n    <path fill=\"currentColor\" d=\"m44 273l156-139l156 137q4 4 15 4q10 0 17-6q13-15-2-30L200 79L14 241q-14 16-2 30q14 13 32 2z\"/>\n</svg>"}
 className={`w-html-embed w-html-embed-2`} />
@@ -149,24 +149,24 @@ className={`w-element w-hero-section`}>
 <div
 className={`w-element w-hero-overlay`}>
 <div
-className={`w-element w-element-62`}>
+className={`w-element w-element-52`}>
 <h1
-className={`w-element w-element-63`}>
+className={`w-element w-element-53`}>
 <b
-className={`w-element w-element-64`}>
+className={`w-element w-element-54`}>
 {"Welcome to Inasa Healthcare"}
 </b>
 </h1>
 <div
-className={`w-element w-element-65 ${"hero-cta-buttons"}`}>
+className={`w-element w-element-55 ${"hero-cta-buttons"}`}>
 <Link
 href={"https://d2oe0ra32qx05a.cloudfront.net/?practiceKey=k_1_112536"}
-className={`w-element w-element-66 ${"cta-button secondary"}`}>
+className={`w-element w-element-56 ${"cta-button secondary"}`}>
 {"Book An Appointment"}
 </Link>
 <Link
 href={"tel:4436313354"}
-className={`w-element w-element-67 ${"cta-button secondary"}`}>
+className={`w-element w-element-57 ${"cta-button secondary"}`}>
 {"Call Us At 443-631-3321"}
 </Link>
 </div>
@@ -180,44 +180,82 @@ className={`w-element w-wrapper-1`}>
 <Slot>
 <Fragment_1>
 <section
-id={"services"}
+className={`w-element w-element-71`}>
-className={`w-element ${"services"}`}>
 <div
-className={`w-element ${"container"}`}>
+className={`w-element w-element-77`}>
-<div
-className={`w-element w-element-34 ${"section-header"}`}>
 <h1
-className={`w-element w-element-45`}>
+className={`w-element w-element-76`}>
-{"Our Services"}
+{"About Your Physician"}
 </h1>
+</div>
+<div
+className={`w-element w-element-72`}>
+<div
+className={`w-element w-element-73`}>
 <p
-className={`w-element w-element-46`}>
+className={`w-element w-element-75`}>
-{"Comprehensive healthcare services tailored to your needs"}
+<span
+className={`w-element`}>
+<b
+className={`w-element`}>
+{"Chinasa Rita Onyeje, DNP, CRNP, FNP-BC, PMHNP-BC,"}
+</b>
+</span>
+{" is a dual board-certified Family and Psychiatric Mental Health Nurse Practitioner who is compassionate, dedicated with genuine love for my profession. Patients are her first priority and she always strives to provide personalized, comprehensive, high-quality, patient centered care with emphasis on clear communication and patient education, to empower patients on their health care path. Establishing a therapeutic alliance with my patients through active listening, empathy, and mutual respect is the number one goal. I am dedicated to helping patients manage chronic conditions, psychiatric illnesses, urgent / acute care matters, wellness screening and preventive health care services. "}
+<br />
+{""}
+<br />
+{"Her educational career began at the University of Maryland, with a bachelor of Science degree in Nursing, then Masters degree in Family Nurse Practitioner from Coppin State University, and later a Doctorate degree with a focus on Psychiatric and Mental Health from University of Massachusetts."}
 </p>
 </div>
 <div
-className={`w-element w-element-35 ${"services-grid"}`}>
+className={`w-element w-element-74`}>
+<Image
+width={1024}
+height={1024}
+className={`w-image w-image-5`} />
+</div>
+</div>
+</section>
+</Fragment_1>
+</Slot>
+<Slot>
+<Fragment_1>
+<section
+id={"services"}
+className={`w-element w-element-83 ${"services"}`}>
 <div
-className={`w-element w-element-36 ${"service-card"}`}>
+className={`w-element ${"container"}`}>
 <div
-className={`w-element w-element-37 ${"service-icon"}`}>
+className={`w-element w-element-28 ${"section-header"}`}>
+<h1
+className={`w-element w-element-36`}>
+{"Our Services"}
+</h1>
+</div>
+<div
+className={`w-element w-element-29 ${"services-grid"}`}>
+<div
+className={`w-element w-element-30 ${"service-card"}`}>
+<div
+className={`w-element w-element-31 ${"service-icon"}`}>
 <Image
 alt={"Mental Health Services"}
 src={"/services/primarycare.svg"}
 className={`w-image w-image-3 ${"w-10 h-10"}`} />
 </div>
 <h3
-className={`w-element w-element-47`}>
+className={`w-element w-element-37`}>
 {"Mental Health Services"}
 </h3>
 <p
-className={`w-element w-element-48`}>
+className={`w-element w-element-38`}>
 {"Mental Health Screening, Evaluation and Treatment for: depression, anxiety, bipolar disorder, other psychiatric conditions"}
 </p>
 <Dialog>
 <DialogTrigger>
 <button
-className={`w-element w-element-57 ${"service-button"}`}>
+className={`w-element w-element-47 ${"service-button"}`}>
 {"Learn More"}
 </button>
 </DialogTrigger>
@@ -251,26 +289,26 @@ className={`w-html-embed`} />
 </Dialog>
 </div>
 <div
-className={`w-element w-element-38 ${"service-card"}`}>
+className={`w-element w-element-32 ${"service-card"}`}>
 <div
-className={`w-element w-element-39 ${"service-icon"}`}>
+className={`w-element w-element-33 ${"service-icon"}`}>
 <Image
 alt={"Chronic Illness"}
 src={"/services/urgentcare.svg"}
 className={`w-image ${"w-10 h-10"}`} />
 </div>
 <h3
-className={`w-element w-element-49`}>
+className={`w-element w-element-39`}>
 {"Chronic Illness Management"}
 </h3>
 <p
-className={`w-element w-element-50`}>
+className={`w-element w-element-40`}>
 {"Diabetes and Hypertension management, Cholesterol screening and management, Weight loss management and support, Women and Men's health, Nicotine dependency treatment"}
 </p>
 <Dialog>
 <DialogTrigger>
 <button
-className={`w-element w-element-58 ${"service-button"}`}>
+className={`w-element w-element-48 ${"service-button"}`}>
 {"Learn More"}
 </button>
 </DialogTrigger>
@@ -304,26 +342,26 @@ className={`w-html-embed`} />
 </Dialog>
 </div>
 <div
-className={`w-element w-element-40 ${"service-card"}`}>
+className={`w-element w-element-34 ${"service-card"}`}>
 <div
-className={`w-element w-element-41 ${"service-icon"}`}>
+className={`w-element w-element-35 ${"service-icon"}`}>
 <Image
 alt={"Physicals & Screenings"}
 src={"/services/physical.svg"}
 className={`w-image ${"w-10 h-10"}`} />
 </div>
 <h3
-className={`w-element w-element-51`}>
+className={`w-element w-element-41`}>
 {"Primary & Preventive Care"}
 </h3>
 <p
-className={`w-element w-element-52`}>
+className={`w-element w-element-42`}>
 {"Pre-employment, DOT, sports, camp physicals, tuberculin tests, and titers."}
 </p>
 <Dialog>
 <DialogTrigger>
 <button
-className={`w-element w-element-59 ${"service-button"}`}>
+className={`w-element w-element-49 ${"service-button"}`}>
 {"Learn More"}
 </button>
 </DialogTrigger>
@@ -357,26 +395,26 @@ className={`w-html-embed`} />
 </Dialog>
 </div>
 <div
-className={`w-element w-element-53 ${"service-card"}`}>
+className={`w-element w-element-43 ${"service-card"}`}>
 <div
-className={`w-element w-element-54 ${"service-icon"}`}>
+className={`w-element w-element-44 ${"service-icon"}`}>
 <Image
 alt={"Physicals & Screenings"}
 src={"/services/physical.svg"}
 className={`w-image w-image-4 ${"w-10 h-10"}`} />
 </div>
 <h3
-className={`w-element w-element-55`}>
+className={`w-element w-element-45`}>
 {"Urgent Care & Walk-in Services"}
 </h3>
 <p
-className={`w-element w-element-56`}>
+className={`w-element w-element-46`}>
 {"Pre-employment, DOT, sports, camp physicals, tuberculin tests, and titers."}
 </p>
 <Dialog>
 <DialogTrigger>
 <button
-className={`w-element w-element-60 ${"service-button"}`}>
+className={`w-element w-element-50 ${"service-button"}`}>
 {"Learn More"}
 </button>
 </DialogTrigger>
@@ -388,7 +426,7 @@ className={`w-dialog-content w-dialog-content-4`}>
 className={`w-box w-dialog-header-3`}>
 <DialogTitle
 className={`w-dialog-title w-dialog-title-4`}>
-{"Dialog Title you can edit"}
+{"Urgent Care & Walk In Services"}
 </DialogTitle>
 <DialogDescription
 className={`w-dialog-description w-dialog-description-4`}>
@@ -397,8 +435,43 @@ className={`w-dialog-description w-dialog-description-4`}>
 </Box>
 <Text
 className={`w-text`}>
-{"The text you can edit"}
+{"Services Include:"}
 </Text>
+<div
+className={`w-element w-element-80`}>
+<div
+className={`w-element w-element-81`}>
+<ul
+className={`w-element`}>
+<li
+className={`w-element`}>
+{"Acute & Sick Visits"}
+</li>
+<li
+className={`w-element`}>
+{"STI Testing & Treatment"}
+</li>
+<li
+className={`w-element`}>
+{"UTI Testing & Treatment"}
+</li>
+</ul>
+</div>
+<div
+className={`w-element w-element-82`}>
+<ul
+className={`w-element`}>
+<li
+className={`w-element`}>
+{"Sprain & Strain Management"}
+</li>
+<li
+className={`w-element`}>
+{"Telehealth/Virtual visits for diagnosis, prescriptions, follow up, lab results, and health education"}
+</li>
+</ul>
+</div>
+</div>
 <DialogClose
 className={`w-close-button w-close-button-4`}>
 <HtmlEmbed
@@ -410,20 +483,113 @@ className={`w-html-embed`} />
 </Dialog>
 </div>
 </div>
+</div>
+</section>
+</Fragment_1>
+</Slot>
+<Slot>
+<Fragment_1>
+<section
+className={`w-element w-element-61`}>
 <div
-className={`w-element w-element-42`}>
+className={`w-element w-element-63`}>
+<RemixForm
+id={"contact.form"}
+method={"post"}
+encType={"application/x-www-form-urlencoded"}
+className={`w-element w-element-62`}>
+<div
+className={`w-element w-contact-form-header-info`}>
+<h1
+className={`w-element w-element-85`}>
+{"Contact Us"}
+</h1>
 <p
-className={`w-element w-element-43`}>
+className={`w-element w-element-78`}>
-{"Looking for immediate care in Nottingham, MD? "}
+{"Let people know what to reach out about and what to expect after contacting you. Don’t forget to choose a storage option for submissions"}
-<Link
+</p>
-href={"/nottingham-md-clinic"}
+<p
-data-discover={"true"}
+className={`w-element w-element-79`}>
-className={`w-element w-element-44`}>
+{"inasahealthcare@gmail.com"}
-{"Visit our Nottingham clinic page"}
+<br />
-</Link>
+{"(443) 631-3354"}
-{" for same-day appointments, walk-in services, and comprehensive care at 4416 Fitch Ave."}
 </p>
 </div>
+<div
+className={`w-element w-contact-form`}>
+<label
+htmlFor={"contact.name"}
+className={`w-element`}>
+{"Name:"}
+</label>
+<Input
+type={"text"}
+id={"contact.name"}
+name={"contact.name"}
+required={true}
+className={`w-element`} />
+<br
+className={`w-element`} />
+<label
+htmlFor={"contact.subject"}
+className={`w-element`}>
+{"Subject:"}
+</label>
+<Input
+type={"text"}
+id={"contact.subject"}
+name={"contact.subject"}
+required={true}
+className={`w-element`} />
+<br
+className={`w-element`} />
+<label
+htmlFor={"contact.email"}
+className={`w-element`}>
+{"Email:"}
+</label>
+<Input
+type={"email"}
+id={"contact.email"}
+name={"contact.email"}
+required={true}
+className={`w-element`} />
+<br
+className={`w-element`} />
+<label
+htmlFor={"contact.message"}
+className={`w-element`}>
+{"Message:"}
+</label>
+<Textarea
+id={"contact.message"}
+name={"contact.message"}
+rows={5}
+required={true}
+className={`w-element`} />
+<br
+className={`w-element`} />
+<button
+type={"submit"}
+className={`w-element w-element-84`}>
+{"Send Message"}
+</button>
+<div
+id={"contact.responseMessage"}
+className={`w-element`} />
+</div>
+</RemixForm>
+<div
+className={`w-element w-element-64`}>
+<Image
+width={1024}
+height={1024}
+className={`w-image w-image-6`} />
+</div>
+<HtmlEmbed
+executeScriptOnCanvas={true}
+code={"<script>\n  document.getElementById('contact.form').addEventListener('submit', function(event) {\n    event.preventDefault(); // Prevent default form submission\n\n    const webhookUrl = 'https://n8n-ai.bsidesolutions.net/webhook-test/9974ca96-98ba-4e56-bb48-debfdad8cf59'; // use Webhook studio Global data var\n    \n    const name = document.getElementById('contact.name').value;\n    const subject = document.getElementById('contact.subject').value;\n    const sender = document.getElementById('contact.email').value;\n    const message = document.getElementById('contact.message').value;\n    const recipient = 'no-reply@inasahealthcare.com'; // use Webhook studio Global data var\n\n    const formData = {\n        name,\n        subject,\n        sender,\n        message,\n        recipient\n    };\n\n    fetch(webhookUrl, {\n        method: 'POST',\n        headers: {\n            'Content-Type': 'application/json' // Or 'application/x-www-form-urlencoded' if your webhook expects that\n        },\n        body: JSON.stringify(formData) // Send data as JSON\n    })\n    .then(response => {\n        if (!response.ok) {\n            throw new Error(`HTTP error! status: ${response.status}`);\n        }\n        return response.json(); // Or response.text() if your webhook doesn't return JSON\n    })\n    .then(data => {\n        document.getElementById('contact.responseMessage').innerText = 'Message sent successfully!';\n        console.log('Success:', data);\n        document.getElementById('contact.form').reset(); // Clear the form\n    })\n    .catch(error => {\n        document.getElementById('contact.responseMessage').innerText = 'Error sending message.';\n        console.error('Error:', error);\n    });\n});\n</script>\n"}
+className={`w-html-embed`} />
 </div>
 </section>
 </Fragment_1>
@@ -433,19 +599,19 @@ className={`w-element w-element-44`}>
 <Slot>
 <Fragment_1>
 <div
+className={`w-element w-element-12`}>
+<div
+href={"/"}
 className={`w-element w-element-17`}>
 <div
-href={"/"}
+className={`w-element w-element-27`}>
-className={`w-element w-element-22`}>
-<div
-className={`w-element w-element-33`}>
 <Link
 href={"/"}
-className={`w-element w-element-31`}>
+className={`w-element w-element-25`}>
 <div
-className={`w-element w-element-32`}>
+className={`w-element w-element-26`}>
 <Image
-src={"/assets/file_000000003adc722fbb2d4c57f70e11d2_FsnGqm4TIkHGomknin2UT.png"}
+src={"/assets/file_000000003f50722fa551064d566374f2_kdDbKfOW9fojde3YWOccm.png"}
 width={1024}
 height={1024}
 loading={"lazy"}
@@ -455,16 +621,16 @@ className={`w-image w-image-2`} />
 </Link>
 </div>
 <div
-className={`w-element w-element-26`}>
+className={`w-element w-element-21`}>
 <h3
-className={`w-element w-element-27`}>
+className={`w-element w-element-22`}>
 <span
 className={`w-element`}>
 {"Quick Links"}
 </span>
 </h3>
 <ul
-className={`w-element w-element-28`}>
+className={`w-element w-element-23`}>
 <li
 className={`w-element`}>
 {"Home"}
@@ -489,16 +655,16 @@ className={`w-element`}>
 </div>
 </div>
 <div
-className={`w-element w-element-18`}>
+className={`w-element w-element-13`}>
 <h3
-className={`w-element w-element-23`}>
+className={`w-element w-element-18`}>
 <span
 className={`w-element`}>
 {"Our Services"}
 </span>
 </h3>
 <ul
-className={`w-element w-element-19`}>
+className={`w-element w-element-14`}>
 <li
 className={`w-element`}>
 {"View All Services"}
@@ -507,23 +673,23 @@ className={`w-element`}>
 className={`w-element`}>
 <Link
 href={"https://d2oe0ra32qx05a.cloudfront.net/?practiceKey=k_1_112536"}
-className={`w-element w-element-29`}>
+className={`w-element w-element-24`}>
 {"Book Appointment"}
 </Link>
 </li>
 </ul>
 </div>
 <div
-className={`w-element w-element-20`}>
+className={`w-element w-element-15`}>
 <h3
-className={`w-element w-element-24`}>
+className={`w-element w-element-19`}>
 <span
 className={`w-element`}>
 {"Contact Info"}
 </span>
 </h3>
 <ul
-className={`w-element w-element-21`}>
+className={`w-element w-element-16`}>
 <li
 className={`w-element`}>
 {"Home"}

app/__generated__/index.css

@@ -246,82 +246,6 @@
     background-color: rgba(255, 255, 255, 1)
   }
   .w-element-2 {
-    position: relative;
-    text-align: center;
-    font-weight: 900;
-    font-size: 8rem;
-    line-height: 1;
-    letter-spacing: -0.05em
-  }
-  .w-element-3 {
-    position: absolute;
-    top: 0;
-    right: -0.125rem;
-    bottom: 0;
-    left: 0.125rem;
-    opacity: 0.3
-  }
-  .w-element-4 {
-    position: absolute;
-    top: 0;
-    right: 0.125rem;
-    bottom: 0;
-    left: -0.125rem;
-    opacity: 0.3
-  }
-  .w-element-5 {
-    position: absolute;
-    top: 50%;
-    left: 0;
-    width: 100%;
-    background-color: rgba(255, 255, 255, 1);
-    height: 0.375rem
-  }
-  .w-element-6 {
-    margin-top: 1.5rem;
-    font-weight: 700;
-    font-size: 1.5rem;
-    line-height: 2rem;
-    letter-spacing: 0.05em
-  }
-  .w-built-by-b-side {
-    display: inline-flex;
-    row-gap: 6px;
-    column-gap: 6px;
-    align-items: center;
-    justify-content: center;
-    position: fixed;
-    z-index: 1000;
-    padding-top: 6px;
-    padding-right: 10px;
-    padding-bottom: 6px;
-    padding-left: 10px;
-    right: 16px;
-    bottom: 16px;
-    color: rgba(251, 252, 253, 1);
-    font-family: system-ui, sans-serif;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 1;
-    border-top-left-radius: 9px;
-    border-top-right-radius: 9px;
-    border-bottom-right-radius: 9px;
-    border-bottom-left-radius: 9px;
-    text-decoration-line: none;
-    -webkit-background-clip: padding-box, border-box;
-    background-clip: padding-box, border-box;
-    background-origin: padding-box, border-box;
-    background-image: linear-gradient(135deg,#4a4efa 0%,#bd2fdb 66%,#ec59ce 100%), linear-gradient(135deg,#92fddc 0%,#7d7ffb 31.94%,#ed72fe 64.24%,#fdd791 100%);
-    border: 1px solid transparent;
-    white-space: nowrap
-  }
-  .w-logo {
-    display: block;
-    width: 16px;
-    height: 16px;
-    flex-shrink: 0
-  }
-  .w-element-7 {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -342,7 +266,7 @@
     z-index: 9;
     background-position: 0% 0%
   }
-  .w-element-8 {
+  .w-element-3 {
     align-self: center;
     display: flex;
     flex-direction: row;
@@ -354,11 +278,11 @@
     text-decoration-line: none
   }
   .w-image-1 {
-    width: 25%;
+    width: 50px;
-    height: 25%;
+    height: 50px;
     align-self: center
   }
-  .w-element-9 {
+  .w-element-4 {
     display: flex;
     flex-direction: row;
     justify-content: flex-end;
@@ -366,7 +290,7 @@
     column-gap: 1rem;
     row-gap: 1rem
   }
-  .w-element-10 {
+  .w-element-5 {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -375,34 +299,34 @@
     row-gap: 2rem;
     justify-content: end
   }
-  .w-element-11 {
+  .w-element-6 {
     display: inline-block;
     text-decoration-line: none;
     color: rgba(0, 0, 0, 1)
   }
-  .w-element-12 {
+  .w-element-7 {
     display: inline-block;
     color: rgba(0, 0, 0, 1);
     text-decoration-line: none
   }
-  .w-element-13 {
+  .w-element-8 {
     display: inline-block;
     color: rgba(0, 0, 0, 1);
     text-decoration-line: none
   }
-  .w-element-14 {
+  .w-element-9 {
     display: inline-block;
     color: rgba(0, 0, 0, 1);
     text-decoration-line: none
   }
-  .w-element-15 {
+  .w-element-10 {
     width: auto;
     display: flex;
     column-gap: 20px;
     row-gap: 20px;
     align-self: center
   }
-  .w-element-16 {
+  .w-element-11 {
     border-top-left-radius: 9%;
     border-top-right-radius: 9%;
     border-bottom-left-radius: 9%;
@@ -431,9 +355,9 @@
     padding: 4px;
     background-position: 0% 0%
   }
-  .w-element-17 {
+  .w-element-12 {
     background-color: rgba(7, 110, 166, 0.5);
-    height: 45svh;
+    height: max-content;
     padding-left: 10%;
     padding-right: 10%;
     display: flex;
@@ -444,13 +368,13 @@
     padding-top: 5%;
     justify-content: space-between
   }
-  .w-element-18 {
+  .w-element-13 {
     width: max-content;
     display: flex;
     flex-direction: column;
     align-items: start
   }
-  .w-element-19 {
+  .w-element-14 {
     list-style-type: none;
     padding-left: 0px;
     margin-top: 0em;
@@ -459,13 +383,13 @@
     column-gap: 1em;
     row-gap: 1em
   }
-  .w-element-20 {
+  .w-element-15 {
     width: max-content;
     display: flex;
     flex-direction: column;
     align-items: start
   }
-  .w-element-21 {
+  .w-element-16 {
     list-style-type: none;
     padding-left: 0px;
     margin-top: 0em;
@@ -474,7 +398,7 @@
     column-gap: 1em;
     row-gap: 1em
   }
-  .w-element-22 {
+  .w-element-17 {
     align-self: flex-start;
     display: flex;
     flex-direction: row;
@@ -486,23 +410,23 @@
     text-decoration-line: none;
     row-gap: 6em
   }
-  .w-element-23 {
+  .w-element-18 {
     margin-top: 0em
   }
-  .w-element-24 {
+  .w-element-19 {
     margin-top: 0em
   }
-  .w-element-26 {
+  .w-element-21 {
     width: max-content;
     display: flex;
     flex-direction: column;
     align-items: start;
     align-self: auto
   }
-  .w-element-27 {
+  .w-element-22 {
     margin-top: 0em
   }
-  .w-element-28 {
+  .w-element-23 {
     list-style-type: none;
     padding-left: 0px;
     margin-top: 0em;
@@ -511,18 +435,15 @@
     column-gap: 1em;
     row-gap: 1em
   }
-  .w-element-29 {
+  .w-element-24 {
     display: inline-block;
     color: rgba(255, 255, 255, 1);
     text-decoration-line: none
   }
-  .w-element-30 {
+  .w-element-25 {
-    align-self: center
-  }
-  .w-element-31 {
     text-decoration-line: none
   }
-  .w-element-32 {
+  .w-element-26 {
     display: flex;
     flex-direction: row
   }
@@ -530,7 +451,7 @@
     align-self: center;
     width: 5em
   }
-  .w-element-33 {
+  .w-element-27 {
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -538,24 +459,24 @@
     justify-content: center;
     align-self: center
   }
-  .w-element-34 {
+  .w-element-28 {
     opacity: 1;
     transform: none;
     display: flex;
     flex-direction: column
   }
-  .w-element-35 {
+  .w-element-29 {
     opacity: 1;
     display: flex;
     flex-wrap: wrap;
     align-content: space-around;
-    flex-direction: column;
+    flex-direction: row;
-    align-items: stretch;
+    align-items: start;
     justify-content: start;
     column-gap: 21px;
     row-gap: 21px
   }
-  .w-element-36 {
+  .w-element-30 {
     background-color: rgba(255, 255, 255, 1);
     opacity: 1;
     transform: none;
@@ -563,7 +484,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    width: auto;
+    width: 100%;
     align-self: stretch;
     box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.2);
     height: 40svh;
@@ -571,12 +492,10 @@
     border-top-right-radius: 20px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
-    min-width: 50%;
-    max-width: 100%;
     border: medium none currentcolor;
     padding: 20px
   }
-  .w-element-37 {
+  .w-element-31 {
     background-color: white;
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
     color: rgba(87, 180, 224, 1);
@@ -587,7 +506,7 @@
   .w-image-3 {
     display: block
   }
-  .w-element-38 {
+  .w-element-32 {
     background-color: rgba(255, 255, 255, 1);
     opacity: 1;
     transform: none;
@@ -602,12 +521,11 @@
     border-top-right-radius: 20px;
     border-bottom-left-radius: 20px;
     border-bottom-right-radius: 20px;
-    min-width: 50%;
+    width: 100%;
-    max-width: 100%;
     border: medium none currentcolor;
     padding: 20px
   }
-  .w-element-39 {
+  .w-element-33 {
     background-color: white;
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
     color: rgba(231, 76, 60, 1);
@@ -615,7 +533,7 @@
     align-items: center;
     justify-content: center
   }
-  .w-element-40 {
+  .w-element-34 {
     background-color: rgba(251, 251, 251, 1);
     opacity: 1;
     transform: none;
@@ -633,7 +551,7 @@
     border: medium none currentcolor;
     padding: 20px
   }
-  .w-element-41 {
+  .w-element-35 {
     background-color: white;
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
     color: rgba(145, 185, 84, 1);
@@ -641,60 +559,31 @@
     align-items: center;
     justify-content: center
   }
-  .w-element-42 {
+  .w-element-36 {
-    text-align: center;
-    margin-top: 50px;
-    background-color: rgba(249, 250, 251, 1);
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-    border-bottom-right-radius: 12px;
-    border-bottom-left-radius: 12px;
-    opacity: 0;
-    transform: translateY(20px);
-    border: 2px solid rgba(229, 231, 235, 1);
-    padding: 30px
-  }
-  .w-element-43 {
-    font-size: 18px;
-    color: rgba(55, 65, 81, 1);
-    margin-bottom: 20px
-  }
-  .w-element-44 {
-    color: rgba(87, 180, 224, 1);
-    font-weight: 600;
-    text-decoration-line: underline;
-    text-decoration-style: solid;
-    text-decoration-color: currentcolor
-  }
-  .w-element-45 {
     align-self: center;
     font-size: 3em;
     color: rgba(8, 111, 168, 1)
   }
-  .w-element-46 {
+  .w-element-37 {
-    align-self: center;
-    font-size: 2em
-  }
-  .w-element-47 {
     text-align: center
   }
-  .w-element-48 {
+  .w-element-38 {
     text-align: center;
     font-size: 16px
   }
-  .w-element-49 {
+  .w-element-39 {
     text-align: center
   }
-  .w-element-50 {
+  .w-element-40 {
     text-align: center
   }
-  .w-element-51 {
+  .w-element-41 {
     text-align: center
   }
-  .w-element-52 {
+  .w-element-42 {
     text-align: center
   }
-  .w-element-53 {
+  .w-element-43 {
     background-color: rgba(251, 251, 251, 1);
     opacity: 1;
     transform: none;
@@ -712,7 +601,7 @@
     border: medium none currentcolor;
     padding: 20px
   }
-  .w-element-54 {
+  .w-element-44 {
     background-color: white;
     box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
     color: rgba(145, 185, 84, 1);
@@ -720,10 +609,10 @@
     align-items: center;
     justify-content: center
   }
-  .w-element-55 {
+  .w-element-45 {
     text-align: center
   }
-  .w-element-56 {
+  .w-element-46 {
     text-align: center
   }
   .w-image-4 {
@@ -804,7 +693,7 @@
   .w-close-button-1:hover {
     opacity: 1
   }
-  .w-element-57 {
+  .w-element-47 {
     margin-top: auto;
     padding-top: 12px;
     padding-right: 24px;
@@ -995,13 +884,20 @@
     flex-direction: column;
     row-gap: 1rem;
     column-gap: 1rem;
-    max-width: 32rem;
+    max-width: 36rem;
     background-color: rgba(255, 255, 255, 1);
+    padding-top: 1.5rem;
+    padding-right: 1rem;
+    padding-bottom: 1.5rem;
+    padding-left: 1.5rem;
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
     position: relative;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
     border: 1px solid rgba(226, 232, 240, 1);
-    margin: auto;
+    margin: auto
-    padding: 1.5rem
   }
   .w-dialog-header-3 {
     display: flex;
@@ -1045,7 +941,7 @@
   .w-close-button-4:hover {
     opacity: 1
   }
-  .w-element-58 {
+  .w-element-48 {
     margin-top: auto;
     padding-top: 12px;
     padding-right: 24px;
@@ -1073,7 +969,7 @@
     column-gap: 8px;
     border: 1px solid rgba(231, 76, 60, 1)
   }
-  .w-element-59 {
+  .w-element-49 {
     margin-top: auto;
     padding-top: 12px;
     padding-right: 24px;
@@ -1102,7 +998,7 @@
     --hover-bg: rgba(145, 185, 84, 1);
     border: 1px solid rgba(145, 185, 84, 1)
   }
-  .w-element-60 {
+  .w-element-50 {
     margin-top: auto;
     padding-top: 12px;
     padding-right: 24px;
@@ -1142,7 +1038,7 @@
     padding-right: 10%;
     margin-top: 8svh
   }
-  .w-element-61 {
+  .w-element-51 {
     position: relative;
     scroll-behavior: smooth
   }
@@ -1156,12 +1052,13 @@
     position: relative
   }
   .w-hero-section {
-    position: relative
+    position: relative;
+    height: 100svh
   }
   .w-hero-overlay {
     position: absolute;
     width: 100%;
-    height: 60svh;
+    height: 100%;
     background-color: rgba(0, 0, 0, 0.48);
     display: flex;
     flex-direction: row;
@@ -1169,42 +1066,46 @@
     justify-content: center;
     padding-bottom: 10svh
   }
-  .w-element-62 {
+  .w-element-52 {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     margin-left: auto;
-    margin-right: auto
+    margin-right: auto;
+    height: 50svh
   }
-  .w-element-63 {
+  .w-element-53 {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
     flex-wrap: nowrap;
     color: rgba(7, 7, 7, 1);
-    font-weight: 700
+    font-weight: 700;
+    width: 75%;
+    text-align: center
   }
-  .w-element-64 {
+  .w-element-54 {
     color: rgba(255, 255, 255, 1);
     font-weight: 700;
     font-size: 2em
   }
-  .w-element-65 {
+  .w-element-55 {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-around;
     column-gap: 2em;
     row-gap: 2em;
-    height: fit-content
+    height: fit-content;
+    width: 100%
   }
-  .w-element-66 {
+  .w-element-56 {
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     display: flex;
     align-items: center;
-    height: fit-content;
+    height: 60px;
     color: rgba(6, 59, 92, 1);
     text-decoration-line: none;
     align-self: center;
@@ -1216,18 +1117,18 @@
     border-top-right-radius: 25px;
     border-bottom-left-radius: 25px;
     border-bottom-right-radius: 25px;
-    width: fit-content;
+    width: 40%;
     min-width: max-content;
     padding-left: 8%;
     padding-right: 8%;
     margin-left: 0px
   }
-  .w-element-67 {
+  .w-element-57 {
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
     display: flex;
     align-items: center;
-    height: fit-content;
+    height: 60px;
     color: rgba(242, 241, 241, 1);
     text-decoration-line: none;
     align-self: center;
@@ -1239,7 +1140,7 @@
     border-top-right-radius: 25px;
     border-bottom-left-radius: 25px;
     border-bottom-right-radius: 25px;
-    width: fit-content;
+    width: 40%;
     min-width: max-content;
     padding-left: 8%;
     padding-right: 8%;
@@ -1247,7 +1148,7 @@
     border: 2px solid rgba(255, 255, 255, 0.23)
   }
   .w-hero {
-    height: 60svh;
+    height: 100%;
     display: flex;
     flex-direction: row;
     width: 100%;
@@ -1265,9 +1166,10 @@
   .w-wrapper-1 {
     padding-left: 10%;
     padding-right: 10%;
-    margin-top: 8svh
+    margin-top: 8svh;
+    height: auto
   }
-  .w-element-68 {
+  .w-element-58 {
     position: relative;
     display: flex;
     flex-direction: row;
@@ -1279,7 +1181,7 @@
   .w-html-embed-1 {
     align-self: center
   }
-  .w-element-69 {
+  .w-element-59 {
     position: relative;
     display: flex;
     flex-direction: row;
@@ -1330,7 +1232,7 @@
     color: rgba(255, 255, 255, 1);
     padding-top: 8px
   }
-  .w-element-70 {
+  .w-element-60 {
     display: flex;
     flex-direction: row;
     column-gap: 2px;
@@ -1359,40 +1261,292 @@
     padding-right: 10%;
     margin-top: 8svh
   }
-  .w-element-71 {
+  .w-element-61 {
     display: flex;
     width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-top: 5svh;
+    padding-bottom: 8svh
+  }
+  .w-element-62 {
+    width: 100%;
+    display: flex;
+    flex-direction: column
+  }
+  .w-element-63 {
+    display: flex;
+    flex-direction: row
+  }
+  .w-element-64 {
+    width: 100%
+  }
+  .w-content-2 {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%
+  }
+  .w-page-content-3 {
+    background-color: rgba(253, 243, 243, 1);
+    margin-top: 15svh;
+    height: max-content;
+    position: relative
+  }
+  .w-wrapper-3 {
+    padding-left: 10%;
+    padding-right: 10%;
+    margin-top: 8svh;
+    display: flex;
+    flex-direction: row;
+    align-items: start;
+    justify-content: center
+  }
+  .w-element-65 {
+    align-self: center;
+    max-width: 50%
+  }
+  .w-element-66 {
+    position: relative;
+    text-align: center;
+    font-weight: 900;
+    font-size: 8rem;
+    line-height: 1;
+    letter-spacing: -0.05em
+  }
+  .w-element-67 {
+    position: absolute;
+    top: 0;
+    right: -0.125rem;
+    bottom: 0;
+    left: 0.125rem;
+    opacity: 0.3
+  }
+  .w-element-68 {
+    position: absolute;
+    top: 0;
+    right: 0.125rem;
+    bottom: 0;
+    left: -0.125rem;
+    opacity: 0.3
+  }
+  .w-element-69 {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    background-color: rgba(255, 255, 255, 1);
+    height: 0.375rem
+  }
+  .w-element-70 {
+    margin-top: 1.5rem;
+    font-weight: 700;
+    font-size: 1.5rem;
+    line-height: 2rem;
+    letter-spacing: 0.05em
+  }
+  .w-built-by-b-side {
+    display: inline-flex;
+    row-gap: 6px;
+    column-gap: 6px;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    z-index: 1000;
+    padding-top: 6px;
+    padding-right: 10px;
+    padding-bottom: 6px;
+    padding-left: 10px;
+    right: 16px;
+    bottom: 16px;
+    color: rgba(251, 252, 253, 1);
+    font-family: system-ui, sans-serif;
+    font-size: 12px;
+    font-weight: 500;
+    line-height: 1;
+    border-top-left-radius: 9px;
+    border-top-right-radius: 9px;
+    border-bottom-right-radius: 9px;
+    border-bottom-left-radius: 9px;
+    text-decoration-line: none;
+    -webkit-background-clip: padding-box, border-box;
+    background-clip: padding-box, border-box;
+    background-origin: padding-box, border-box;
+    background-image: linear-gradient(135deg,#4a4efa 0%,#bd2fdb 66%,#ec59ce 100%), linear-gradient(135deg,#92fddc 0%,#7d7ffb 31.94%,#ed72fe 64.24%,#fdd791 100%);
+    border: 1px solid transparent;
+    white-space: nowrap
+  }
+  .w-logo {
+    display: block;
+    width: 16px;
+    height: 16px;
+    flex-shrink: 0
+  }
+  .w-element-71 {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center
+  }
+  .w-element-72 {
+    display: flex
+  }
+  .w-element-73 {
+    width: 100%;
+    display: flex;
+    flex-direction: column
+  }
+  .w-element-74 {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch
+  }
+  .w-element-75 {
+    display: inline-block;
+    width: 90%;
+    padding: 4px
+  }
+  .w-image-5 {
+    max-height: 100%;
+    display: flex;
+    align-self: flex-start;
+    flex-direction: row;
+    margin-top: 1em
+  }
+  .w-element-76 {
+    align-self: center;
+    font-size: 3em;
+    color: rgba(8, 111, 168, 1);
+    text-align: center
+  }
+  .w-element-77 {
+    align-self: center;
+    display: flex;
+    flex-direction: column;
+    column-gap: 0px;
+    row-gap: 0px
+  }
+  .w-content-3 {
+    position: relative
+  }
+  .w-page-content-4 {
+    background-color: rgba(253, 243, 243, 1);
+    margin-top: 15svh;
+    height: max-content;
+    position: relative
+  }
+  .w-wrapper-4 {
+    padding-left: 10%;
+    padding-right: 10%;
+    margin-top: 8svh
+  }
+  .w-image-6 {
+    max-height: 100%
+  }
+  .w-element-78 {
+    width: 75%;
+    font-family: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive;
+    font-size: 20px
+  }
+  .w-element-79 {
+    width: 50%;
+    font-family: "Segoe Print", "Bradley Hand", Chilanka, TSCu_Comic, casual, cursive
+  }
+  .w-element-80 {
+    display: flex;
     flex-direction: row;
     justify-content: space-between
   }
+  .w-element-81 {
+    width: 100%
+  }
+  .w-element-82 {
+    width: 100%
+  }
+  .w-element-83 {
+    padding-bottom: 8svh
+  }
+  .w-contact-form {
+    display: flex;
+    flex-direction: column;
+    width: 75%
+  }
+  .w-element-85 {
+    font-size: 3em
+  }
 }
 @media all and (max-width: 991px) {
-  .w-element-10 {
+  .w-element-5 {
     column-gap: 0.8rem;
     row-gap: 0.8rem
   }
+  .w-element-72 {
+    flex-direction: row
+  }
 }
 @media all and (max-width: 767px) {
-  .w-element-65 {
+  .w-element-52 {
+    height: auto;
+    text-align: start
+  }
+  .w-element-53 {
+    text-align: center
+  }
+  .w-element-55 {
     flex-direction: column
   }
-  .w-element-66 {
+  .w-element-56 {
     padding-left: 12%;
     padding-right: 12%
   }
+  .w-element-63 {
+    flex-direction: column-reverse
+  }
+  .w-element-72 {
+    flex-direction: column-reverse
+  }
+  .w-element-73 {
+    text-align: center
+  }
+  .w-element-75 {
+    width: 100%
+  }
+  .w-element-78 {
+    text-align: center;
+    width: 100%
+  }
+  .w-element-79 {
+    width: 100%;
+    text-align: center
+  }
+  .w-contact-form {
+    width: 100%
+  }
+  .w-contact-form-header-info {
+    display: flex;
+    flex-direction: column
+  }
+  .w-element-85 {
+    text-align: center
+  }
 }
 @media all and (max-width: 479px) {
-  .w-element-17 {
+  .w-element-12 {
     flex-direction: column;
     height: 50%
   }
-  .w-element-22 {
+  .w-element-17 {
     flex-direction: column
   }
-  .w-element-64 {
+  .w-element-36 {
-    font-size: 2em
+    text-align: center
   }
-  .w-element-70 {
+  .w-element-54 {
+    font-size: 1.5em
+  }
+  .w-element-60 {
     column-gap: 2px;
     row-gap: 2px
   }

app/routes/[about]._index.tsx

@@ -0,0 +1,315 @@
+import {
+  type MetaFunction,
+  type LinksFunction,
+  type LinkDescriptor,
+  type ActionFunctionArgs,
+  type LoaderFunctionArgs,
+  type HeadersFunction,
+  data,
+  redirect,
+  useLoaderData,
+} from "react-router";
+import {
+  isLocalResource,
+  loadResource,
+  loadResources,
+  formIdFieldName,
+  formBotFieldName,
+  cachedFetch,
+} from "@webstudio-is/sdk/runtime";
+import {
+  ReactSdkContext,
+  PageSettingsMeta,
+  PageSettingsTitle,
+} from "@webstudio-is/react-sdk/runtime";
+import {
+  projectId,
+  Page,
+  siteName,
+  favIconAsset,
+  pageFontAssets,
+  pageBackgroundImageAssets,
+  breakpoints,
+} from "../__generated__/[about]._index";
+import {
+  getResources,
+  getPageMeta,
+  getRemixParams,
+  contactEmail,
+} from "../__generated__/[about]._index.server";
+import * as constants from "../constants.mjs";
+import css from "../__generated__/index.css?url";
+import { sitemap } from "../__generated__/$resources.sitemap.xml";
+
+const customFetch: typeof fetch = (input, init) => {
+  if (typeof input !== "string") {
+    return cachedFetch(projectId, input, init);
+  }
+
+  if (isLocalResource(input, "sitemap.xml")) {
+    // @todo: dynamic import sitemap ???
+    const response = new Response(JSON.stringify(sitemap));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
+  if (isLocalResource(input, "current-date")) {
+    const now = new Date();
+    // Normalize to midnight UTC to prevent hydration mismatches
+    const startOfDay = new Date(
+      Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate())
+    );
+    const data = {
+      iso: startOfDay.toISOString(),
+      year: startOfDay.getUTCFullYear(),
+      month: startOfDay.getUTCMonth() + 1, // 1-12 instead of 0-11
+      day: startOfDay.getUTCDate(),
+      timestamp: startOfDay.getTime(),
+    };
+    const response = new Response(JSON.stringify(data));
+    response.headers.set("content-type", "application/json; charset=utf-8");
+    return Promise.resolve(response);
+  }
+
+  return cachedFetch(projectId, input, init);
+};
+
+export const loader = async (arg: LoaderFunctionArgs) => {
+  const url = new URL(arg.request.url);
+  const host =
+    arg.request.headers.get("x-forwarded-host") ||
+    arg.request.headers.get("host") ||
+    "";
+  url.host = host;
+  url.protocol = "https";
+
+  const params = getRemixParams(arg.params);
+  const system = {
+    params,
+    search: Object.fromEntries(url.searchParams),
+    origin: url.origin,
+    pathname: url.pathname,
+  };
+
+  const resources = await loadResources(
+    customFetch,
+    getResources({ system }).data
+  );
+  const pageMeta = getPageMeta({ system, resources });
+
+  if (pageMeta.redirect) {
+    const status =
+      pageMeta.status === 301 || pageMeta.status === 302
+        ? pageMeta.status
+        : 302;
+    throw redirect(pageMeta.redirect, status);
+  }
+
+  // typecheck
+  arg.context.EXCLUDE_FROM_SEARCH satisfies boolean;
+
+  if (arg.context.EXCLUDE_FROM_SEARCH) {
+    pageMeta.excludePageFromSearch = arg.context.EXCLUDE_FROM_SEARCH;
+  }
+
+  return data(
+    {
+      host,
+      url: url.href,
+      system,
+      resources,
+      pageMeta,
+    },
+    // No way for current information to change, so add cache for 10 minutes
+    // In case of CRM Data, this should be set to 0
+    {
+      status: pageMeta.status,
+      headers: {
+        "Cache-Control": "public, max-age=600",
+      },
+    }
+  );
+};
+
+export const headers: HeadersFunction = () => {
+  return {
+    "Cache-Control": "public, max-age=0, must-revalidate",
+  };
+};
+
+export const meta: MetaFunction<typeof loader> = ({ data }) => {
+  const metas: ReturnType<MetaFunction> = [];
+  if (data === undefined) {
+    return metas;
+  }
+
+  const origin = `https://${data.host}`;
+
+  if (siteName) {
+    metas.push({
+      "script:ld+json": {
+        "@context": "https://schema.org",
+        "@type": "WebSite",
+        name: siteName,
+        url: origin,
+      },
+    });
+  }
+
+  return metas;
+};
+
+export const links: LinksFunction = () => {
+  const result: LinkDescriptor[] = [];
+
+  result.push({
+    rel: "stylesheet",
+    href: css,
+  });
+
+  if (favIconAsset) {
+    result.push({
+      rel: "icon",
+      href: constants.imageLoader({
+        src: `${constants.assetBaseUrl}${favIconAsset}`,
+        // width,height must be multiple of 48 https://developers.google.com/search/docs/appearance/favicon-in-search
+        width: 144,
+        height: 144,
+        fit: "pad",
+        quality: 100,
+        format: "auto",
+      }),
+      type: undefined,
+    });
+  }
+
+  for (const asset of pageFontAssets) {
+    result.push({
+      rel: "preload",
+      href: `${constants.assetBaseUrl}${asset}`,
+      as: "font",
+      crossOrigin: "anonymous",
+    });
+  }
+
+  for (const backgroundImageAsset of pageBackgroundImageAssets) {
+    result.push({
+      rel: "preload",
+      href: `${constants.assetBaseUrl}${backgroundImageAsset}`,
+      as: "image",
+    });
+  }
+
+  return result;
+};
+
+const getRequestHost = (request: Request): string =>
+  request.headers.get("x-forwarded-host") || request.headers.get("host") || "";
+
+export const action = async ({
+  request,
+  context,
+}: ActionFunctionArgs): Promise<
+  { success: true } | { success: false; errors: string[] }
+> => {
+  try {
+    const url = new URL(request.url);
+    url.host = getRequestHost(request);
+
+    const formData = await request.formData();
+
+    const system = {
+      params: {},
+      search: {},
+      origin: url.origin,
+      pathname: url.pathname,
+    };
+
+    const resourceName = formData.get(formIdFieldName);
+    let resource =
+      typeof resourceName === "string"
+        ? getResources({ system }).action.get(resourceName)
+        : undefined;
+
+    const formBotValue = formData.get(formBotFieldName);
+
+    if (formBotValue == null || typeof formBotValue !== "string") {
+      throw new Error("Form bot field not found");
+    }
+
+    const submitTime = parseInt(formBotValue, 16);
+    // Assumes that the difference between the server time and the form submission time,
+    // including any client-server time drift, is within a 5-minute range.
+    // Note: submitTime might be NaN because formBotValue can be any string used for logging purposes.
+    // Example: `formBotValue: jsdom`, or `formBotValue: headless-env`
+    if (
+      Number.isNaN(submitTime) ||
+      Math.abs(Date.now() - submitTime) > 1000 * 60 * 5
+    ) {
+      throw new Error(`Form bot value invalid ${formBotValue}`);
+    }
+
+    formData.delete(formIdFieldName);
+    formData.delete(formBotFieldName);
+
+    if (resource) {
+      resource.body = Object.fromEntries(formData);
+    } else {
+      if (contactEmail === undefined) {
+        throw new Error("Contact email not found");
+      }
+
+      resource = context.getDefaultActionResource?.({
+        url,
+        projectId,
+        contactEmail,
+        formData,
+      });
+    }
+
+    if (resource === undefined) {
+      throw Error("Resource not found");
+    }
+    const { ok, statusText } = await loadResource(fetch, resource);
+    if (ok) {
+      return { success: true };
+    }
+    return { success: false, errors: [statusText] };
+  } catch (error) {
+    console.error(error);
+
+    return {
+      success: false,
+      errors: [error instanceof Error ? error.message : "Unknown error"],
+    };
+  }
+};
+
+const Outlet = () => {
+  const { system, resources, url, pageMeta, host } =
+    useLoaderData<typeof loader>();
+  return (
+    <ReactSdkContext.Provider
+      value={{
+        ...constants,
+        resources,
+        breakpoints,
+        onError: console.error,
+      }}
+    >
+      {/* Use the URL as the key to force scripts in HTML Embed to reload on dynamic pages */}
+      <Page key={url} system={system} />
+      <PageSettingsMeta
+        url={url}
+        pageMeta={pageMeta}
+        host={host}
+        siteName={siteName}
+        imageLoader={constants.imageLoader}
+        assetBaseUrl={constants.assetBaseUrl}
+      />
+      <PageSettingsTitle>{pageMeta.title}</PageSettingsTitle>
+    </ReactSdkContext.Provider>
+  );
+};
+
+export default Outlet;