@anker-in/ui 0.1.10 → 0.1.11

package/dist/demo-room.mjs

@@ -49,7 +49,7 @@ var StudioCard = ({
     {
       ...props,
       className: cn(
-        "p-6 cursor-pointer transition-colors duration-200",
+        "p-6 cursor-pointer transition-colors duration-200 border-b border-[#E4E5E6] last:border-b-0",
         className
       ),
       style: {
@@ -66,8 +66,8 @@ var StudioCard = ({
       },
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between mb-4", children: [
-          /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-gray-900", children: name }),
-          distance !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[#2E8B57] bg-[#E8F5E9] px-3 py-1 rounded-full whitespace-nowrap ml-2", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-[24px] l:text-[20px] font-bold text-[#080A0F]", children: name }),
+          distance !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-[16px] l:text-[14px] font-medium text-[#2E8B57] bg-[#E8F5E9] px-3 py-1 rounded-full whitespace-nowrap ml-2", children: [
             formatDistance(distance),
             " ",
             pageData.away
@@ -126,7 +126,7 @@ var StudioCard = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("p", { className: "text-[16px] l:text-[12px] text-[#2A2C32]", children: [
             availableTime === pageData.noAvailableTime ? "" : pageData.available,
             " ",
             availableTime
@@ -162,7 +162,7 @@ var StudioCard = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 break-words", children: address }) })
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-[16px] l:text-[14px] text-[#2A2C32] break-words", children: address }) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-6", children: [
           /* @__PURE__ */ jsxs(
@@ -170,55 +170,44 @@ var StudioCard = ({
             {
               width: "20",
               height: "20",
-              viewBox: "0 0 20 20",
+              viewBox: "0 0 24 24",
               fill: "none",
               xmlns: "http://www.w3.org/2000/svg",
               className: "flex-shrink-0 mt-0.5",
               children: [
-                /* @__PURE__ */ jsx(
-                  "rect",
-                  {
-                    x: "3",
-                    y: "5",
-                    width: "14",
-                    height: "10",
-                    rx: "1.5",
-                    stroke: "currentColor",
-                    strokeWidth: "1.5"
-                  }
-                ),
                 /* @__PURE__ */ jsx(
                   "path",
                   {
-                    d: "M7 15V17",
+                    d: "M14.4643 7.4929H9.65565M3.16391 18.7132H20.8171C22.0122 18.7132 22.981 17.7563 22.981 16.576L23 13.8348L22.981 6.42431C22.981 5.24396 22.0122 4.28711 20.8171 4.28711H3.16391C1.96882 4.28711 1 5.24396 1 6.42431V16.576C1 17.7563 1.96882 18.7132 3.16391 18.7132Z",
                     stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round"
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   "path",
                   {
-                    d: "M13 15V17",
+                    d: "M5.32812 18.2325V14.4238C5.32812 13.8715 5.77584 13.4238 6.32813 13.4238H17.7925C18.3447 13.4238 18.7925 13.8715 18.7925 14.4238V18.2325",
                     stroke: "currentColor",
-                    strokeWidth: "1.5",
-                    strokeLinecap: "round"
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
                   }
-                ),
-                /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "1.5", fill: "currentColor" })
+                )
               ]
             }
           ),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: euifyMakeModel }) })
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "text-[16px] l:text-[14px] text-[#2A2C32]", children: euifyMakeModel }) })
         ] }),
         /* @__PURE__ */ jsx(
           "button",
           {
             onClick: handleScheduleClick,
             className: cn(
-              "w-full px-6 py-3 rounded-full",
-              "bg-white text-gray-900 border border-gray-900",
-              "font-medium text-sm",
+              "w-fit px-[28px] l:px-[20px] l:py-[8px] py-3 rounded-full",
+              "bg-white text-gray-900 border-2 border-gray-900",
+              "font-bold text-[16px] l:text-[14px]",
               "hover:bg-gray-900 hover:text-white",
               "transition-all duration-200"
             ),
@@ -338,14 +327,12 @@ var StudioMap = ({
       const lng = Number(location.lng);
       const svgIcon = {
         url: `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="24" cy="24" r="22" fill="#00000010"/>
-            <circle cx="24" cy="24" r="10" fill="#000000"/>
-            <circle cx="24" cy="24" r="5" fill="#3ADB67"/>
+          <svg xmlns="http://www.w3.org/2000/svg" width="34" height="44" viewBox="0 0 17 22" fill="none">
+            <path d="M8.5 0C13.1944 0 17 3.80557 17 8.5C17 12.1044 14.94 15.4573 13.0264 17.8174C12.0543 19.0162 11.0847 20.0016 10.3584 20.6875C9.99466 21.031 9.69081 21.3018 9.47559 21.4873C9.36796 21.5801 9.28226 21.6518 9.22266 21.7012C9.19285 21.7259 9.16878 21.7444 9.15234 21.7578C9.14444 21.7642 9.13843 21.7697 9.13379 21.7734C9.13156 21.7752 9.12935 21.7772 9.12793 21.7783L9.12598 21.7803H9.125C9.12232 21.7774 9.08429 21.7304 8.5 21L9.125 21.7812C8.75978 22.0734 8.24022 22.0734 7.875 21.7812L8.5 21C7.91571 21.7304 7.87768 21.7774 7.875 21.7803H7.87402L7.87207 21.7783C7.87065 21.7772 7.86844 21.7752 7.86621 21.7734C7.86157 21.7697 7.85556 21.7642 7.84766 21.7578C7.83122 21.7444 7.80715 21.7259 7.77734 21.7012C7.71774 21.6518 7.63204 21.5801 7.52441 21.4873C7.30919 21.3018 7.00534 21.031 6.6416 20.6875C5.91533 20.0016 4.94566 19.0162 3.97363 17.8174C2.06001 15.4573 0 12.1044 0 8.5C0 3.80557 3.80557 0 8.5 0ZM8.5 2C4.91013 2 2 4.91013 2 8.5C2 11.3955 3.69006 14.2928 5.52637 16.5576C6.4292 17.6711 7.33473 18.5922 8.01465 19.2344C8.19381 19.4036 8.3573 19.5526 8.5 19.6807C8.6427 19.5526 8.80619 19.4036 8.98535 19.2344C9.66527 18.5922 10.5708 17.6711 11.4736 16.5576C13.3099 14.2928 15 11.3955 15 8.5C15 4.91013 12.0899 2 8.5 2ZM8.5 4.59961C10.6539 4.59961 12.4004 6.34609 12.4004 8.5C12.4004 10.6539 10.6539 12.4004 8.5 12.4004C6.34609 12.4004 4.59961 10.6539 4.59961 8.5C4.59961 6.34609 6.34609 4.59961 8.5 4.59961ZM8.5 6.40039C7.34021 6.40039 6.40039 7.34021 6.40039 8.5C6.40039 9.65979 7.34021 10.5996 8.5 10.5996C9.65979 10.5996 10.5996 9.65979 10.5996 8.5C10.5996 7.34021 9.65979 6.40039 8.5 6.40039Z" fill="#3D3D3F"/>
           </svg>
         `)}`,
-        scaledSize: { width: 48, height: 48 },
-        anchor: { x: 24, y: 24 }
+        scaledSize: { width: 34, height: 44 },
+        anchor: { x: 17, y: 44 }
       };
       const marker = new google.maps.Marker({
         position: { lat, lng },
@@ -356,41 +343,53 @@ var StudioMap = ({
       marker.addListener("click", () => {
         setSelectedLocation(location);
         const content = `
-          <div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
-            <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
-            ${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
-                    <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
-                      <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
+          <div style="padding: 0 16px 16px 16px; font-weight: 700; font-family: 'MontForAnker'; max-width: 420px;">
+            <h3 style="margin: 0 0 16px 0; font-size: 24px; color: #080A0F;">${location.name}</h3>
+            ${location.availableTime ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
+                    <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <rect x="3" y="4" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/>
+                      <path d="M3 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                      <path d="M6 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                      <path d="M14 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                     </svg>
-                    <span style="vertical-align: middle;"> ${location.availableTime === pageData?.noAvailableTime ? "" : pageData.available} ${location.availableTime}</span>
+                    <div>
+                      <p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.availableTime === pageData?.noAvailableTime ? "" : pageData.available} ${location.availableTime}</p>
+                    </div>
                   </div>` : ""}
-            <div style="margin-bottom: 8px; color: #666;">
-              <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
+            <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
+              <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M10 10C11.1046 10 12 9.10457 12 8C12 6.89543 11.1046 6 10 6C8.89543 6 8 6.89543 8 8C8 9.10457 8.89543 10 10 10Z" stroke="currentColor" stroke-width="1.5"/>
+                <path d="M10 18C10 18 16 13 16 8C16 4.68629 13.3137 2 10 2C6.68629 2 4 4.68629 4 8C4 13 10 18 10 18Z" stroke="currentColor" stroke-width="1.5"/>
               </svg>
-              <span style="vertical-align: middle;">${location.address}</span>
+              <div style="flex: 1;">
+                <p style="margin: 0; font-size: 16px; color: #2A2C32; word-wrap: break-word;">${location.address}</p>
+              </div>
             </div>
-            ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
-                    <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
-                      <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
+            ${location.euifyMakeModel ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px;">
+                    <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M14.4643 7.4929H9.65565M3.16391 18.7132H20.8171C22.0122 18.7132 22.981 17.7563 22.981 16.576L23 13.8348L22.981 6.42431C22.981 5.24396 22.0122 4.28711 20.8171 4.28711H3.16391C1.96882 4.28711 1 5.24396 1 6.42431V16.576C1 17.7563 1.96882 18.7132 3.16391 18.7132Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M5.32812 18.2325V14.4238C5.32812 13.8715 5.77584 13.4238 6.32813 13.4238H17.7925C18.3447 13.4238 18.7925 13.8715 18.7925 14.4238V18.2325" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                     </svg>
-                    <span style="vertical-align: middle;">${location.euifyMakeModel}</span>
+                    <div>
+                      <p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.euifyMakeModel}</p>
+                    </div>
                   </div>` : ""}
             <button
               id="schedule-btn-${location.id}"
               style="
-                width: 100%;
-                padding: 10px 16px;
-                background: #000;
-                color: #fff;
-                border: none;
-                border-radius: 6px;
-                font-weight: 500;
+                width: fit-content;
+                padding: 12px 28px;
+                background: #fff;
+                color: #111827;
+                border: 2px solid #111827;
+                border-radius: 9999px;
+                font-weight: 700;
                 cursor: pointer;
-                font-size: 14px;
+                font-size: 16px;
+                transition: all 0.2s;
               "
-              onmouseover="this.style.background='#333'"
-              onmouseout="this.style.background='#000'"
+              onmouseover="this.style.background='#111827'; this.style.color='#fff';"
+              onmouseout="this.style.background='#fff'; this.style.color='#111827';"
             >
               ${pageData.scheduleNow}
             </button>
@@ -442,41 +441,53 @@ var StudioMap = ({
     const marker = markersRef.current[markerIndex];
     if (location && marker) {
       const content = `
-        <div style="padding: 16px; max-width: 300px; font-family: system-ui, sans-serif;">
-          <h3 style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">${location.name}</h3>
-          ${location.availableTime ? `<div style="margin-bottom: 8px; color: #666;">
-                  <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
+        <div style="padding: 0 16px 16px 16px; font-weight: 700; font-family: 'MontForAnker'; max-width: 420px;">
+          <h3 style="margin: 0 0 16px 0; font-size: 24px; color: #080A0F;">${location.name}</h3>
+          ${location.availableTime ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
+                  <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect x="3" y="4" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/>
+                    <path d="M3 8H17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    <path d="M6 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+                    <path d="M14 2V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
                   </svg>
-                  <span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
+                  <div>
+                    <p style="margin: 0;font-size: 16px; color: #2A2C32;">${location.availableTime === pageData?.noAvailableTime ? "" : pageData.available} ${location.availableTime}</p>
+                  </div>
                 </div>` : ""}
-          <div style="margin-bottom: 8px; color: #666;">
-            <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
+          <div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px;">
+            <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M10 10C11.1046 10 12 9.10457 12 8C12 6.89543 11.1046 6 10 6C8.89543 6 8 6.89543 8 8C8 9.10457 8.89543 10 10 10Z" stroke="currentColor" stroke-width="1.5"/>
+              <path d="M10 18C10 18 16 13 16 8C16 4.68629 13.3137 2 10 2C6.68629 2 4 4.68629 4 8C4 13 10 18 10 18Z" stroke="currentColor" stroke-width="1.5"/>
             </svg>
-            <span style="vertical-align: middle;">${location.address}</span>
+            <div style="flex: 1;">
+              <p style="margin: 0; font-size: 16px; color: #2A2C32; word-wrap: break-word;">${location.address}</p>
+            </div>
           </div>
-          ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
-                  <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
-                    <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
+          ${location.euifyMakeModel ? `<div style="display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px;">
+                  <svg style="flex-shrink: 0; margin-top: 2px;" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M14.4643 7.4929H9.65565M3.16391 18.7132H20.8171C22.0122 18.7132 22.981 17.7563 22.981 16.576L23 13.8348L22.981 6.42431C22.981 5.24396 22.0122 4.28711 20.8171 4.28711H3.16391C1.96882 4.28711 1 5.24396 1 6.42431V16.576C1 17.7563 1.96882 18.7132 3.16391 18.7132Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    <path d="M5.32812 18.2325V14.4238C5.32812 13.8715 5.77584 13.4238 6.32813 13.4238H17.7925C18.3447 13.4238 18.7925 13.8715 18.7925 14.4238V18.2325" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                   </svg>
-                  <span style="vertical-align: middle;">${location.euifyMakeModel}</span>
+                  <div>
+                    <p style="margin: 0; font-size: 16px; color: #2A2C32;">${location.euifyMakeModel}</p>
+                  </div>
                 </div>` : ""}
           <button
             id="schedule-btn-hover-${location.id}"
             style="
-              width: 100%;
-              padding: 10px 16px;
-              background: #000;
-              color: #fff;
-              border: none;
-              border-radius: 6px;
-              font-weight: 500;
+              width: fit-content;
+              padding: 12px 28px;
+              background: #fff;
+              color: #111827;
+              border: 2px solid #111827;
+              border-radius: 9999px;
+              font-weight: 700;
               cursor: pointer;
-              font-size: 14px;
+              font-size: 16px;
+              transition: all 0.2s;
             "
-            onmouseover="this.style.background='#333'"
-            onmouseout="this.style.background='#000'"
+            onmouseover="this.style.background='#111827'; this.style.color='#fff';"
+            onmouseout="this.style.background='#fff'; this.style.color='#111827';"
           >
             ${pageData.scheduleNow}
           </button>
@@ -770,9 +781,9 @@ var LocationFilter = ({
           "div",
           {
             style: { background: "#F8F8F8" },
-            className: "rounded-[12px] rounded-b-none h-[72px] font-bold text-[14px] flex flex-col",
+            className: "rounded-[12px] rounded-b-none h-[108px] font-bold text-[14px] flex flex-col",
             children: [
-              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-[20px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end px-[24px] pt-[12px] pb-[8px]", children: /* @__PURE__ */ jsx(
                 "button",
                 {
                   onClick: onClose,
@@ -796,14 +807,14 @@ var LocationFilter = ({
                   )
                 }
               ) }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center px-[20px] gap-[16px] pb-[8px]", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center text-[16px] px-[20px] gap-[16px] py-[16px]", children: [
                 /* @__PURE__ */ jsx(
                   "button",
                   {
                     onClick: () => handleTabClick("country"),
                     className: cn(
                       "pb-[4px] transition-colors",
-                      currentLevel === "country" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]"
+                      currentLevel === "country" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]"
                     ),
                     children: pageData.country
                   }
@@ -815,7 +826,7 @@ var LocationFilter = ({
                     disabled: !selectedCountry,
                     className: cn(
                       "pb-[4px] transition-colors",
-                      currentLevel === "state" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
+                      currentLevel === "state" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
                       !selectedCountry && "opacity-50 cursor-not-allowed"
                     ),
                     children: pageData.state
@@ -828,7 +839,7 @@ var LocationFilter = ({
                     disabled: !selectedState,
                     className: cn(
                       "pb-[4px] transition-colors",
-                      currentLevel === "city" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
+                      currentLevel === "city" ? "text-[#080A0F] border-b-2 border-[#3ADB67]" : "text-[#080A0F]",
                       !selectedState && "opacity-50 cursor-not-allowed"
                     ),
                     children: pageData.city
@@ -838,12 +849,13 @@ var LocationFilter = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(AntdMobileIsolated, { style: { height: "calc(100% - 72px)" }, children: showIndexBar ? /* @__PURE__ */ jsx(IndexBar, { style: { height: "100%" }, children: groupedItems.map((group) => {
+        /* @__PURE__ */ jsx(AntdMobileIsolated, { style: { height: "calc(100% - 108px)" }, children: showIndexBar ? /* @__PURE__ */ jsx(IndexBar, { style: { height: "100%" }, children: groupedItems.map((group) => {
           const { title, items } = group;
           return /* @__PURE__ */ jsx(IndexBar.Panel, { index: title, title, children: /* @__PURE__ */ jsx(List, { children: items.map((item) => /* @__PURE__ */ jsx(
             List.Item,
             {
               onClick: () => handleItemClick(item),
+              className: "text-[16px] !pl-[24px]",
               style: { cursor: "pointer" },
               children: item.name
             },
@@ -853,6 +865,7 @@ var LocationFilter = ({
           List.Item,
           {
             onClick: () => handleItemClick(item),
+            className: "text-[16px] !pl-[24px]",
             style: { cursor: "pointer" },
             children: item.name
           },
@@ -1053,7 +1066,7 @@ var RoomsList = ({
         lat: Number(room.latitude) || 0,
         lng: Number(room.longitude) || 0,
         availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : mergedPageData.noAvailableTime,
-        euifyMakeModel: room?.description
+        euifyMakeModel: room?.equipment?.join(", ") || ""
       };
     });
   }, [demoRooms, mergedPageData.defaultCountry, mergedPageData.noAvailableTime]);
@@ -1105,7 +1118,7 @@ var RoomsList = ({
               /* @__PURE__ */ jsxs(
                 "button",
                 {
-                  className: "flex cursor-pointer items-center hover:text-[#2E8B57] transition-colors",
+                  className: "flex cursor-pointer items-center hover:text-[#3ADB67] transition-colors",
                   onClick: () => setShowLocationFilter(true),
                   children: [
                     /* @__PURE__ */ jsx("span", { className: "mr-1", children: getSelectedLocationName() }),
@@ -1162,7 +1175,7 @@ var RoomsList = ({
               "div",
               {
                 style: { maxHeight: "706px", overflow: "auto" },
-                className: "rounded-[12px] bg-white border border-[#E4E5E6]",
+                className: "rounded-[12px] bg-white border h-[706px] border-[#E4E5E6]",
                 children: filteredStudioLocations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[200px] text-[#767880]", children: mergedPageData.locationFilter.noStudiosFound }) : filteredStudioLocations.map((item) => {
                   return /* @__PURE__ */ jsx(
                     StudioCard,