<turbo-stream action="update" target="static_slider"><template></template></turbo-stream>
<turbo-stream action="update" target="static_slider"><template>
  <div data-controller="custom-slideover" class="slideover-control-div" style="z-index: 9999;">
  <div id="slide-over-title" class="relative" aria-labelledby="slide-over-title" role="dialog" aria-modal="true">
    <!-- Background backdrop, show/hide based on slide-over state. -->
    <div class="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity" style="z-index: 9999;"></div>
    <!-- New customer, contact, address slider -->
    <div class="fixed inset-0 overflow-hidden" style="z-index: 9999;">
      <div class="absolute inset-0 overflow-hidden">
        <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full xl:pl-10">
          <div id="slide-over-panel" class="pointer-events-auto w-screen max-w-2xl transform transition-all duration-300 ease-out translate-x-full">
            <div class="flex h-full flex-col bg-white shadow-2xl">
              <!-- Header -->
              <div class="px-6 py-4 bg-gray-50 border-b border-gray-200">
                <div class="flex items-center justify-between">
                  <h2 class="text-xl font-semibold text-gray-900 flex items-center gap-2" id="slide-over-title"></h2>
                  <button type="button" data-action="click->custom-slideover#close" class="rounded-lg p-2 text-gray-400 hover:text-gray-600 hover:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500 transition-colors">
                    <span class="sr-only">Close panel</span>
                    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </button>
                </div>
              </div>
              <!-- Content -->
              <div class="flex-1 overflow-y-auto">
                <div class="p-6">
                  
    <!-- app/views/static/_zoom_demo.html.erb -->
<div class="flex min-h-full flex-col justify-center py-0 sm:px-4 lg:px-4">
  <div class="sm:mx-auto sm:w-full sm:max-w-md">
    <h2 class="mt-6 text-center text-xl font-bold leading-9 tracking-tight text-gray-900">
      Personalised product tour
    </h2>
    <p class="mt-2 text-center text-sm text-gray-500">
      Experience a personalised demonstration of Puree, where we&#39;ll walk you through all the features and answer any questions you might have. It&#39;s the ideal way to explore how Puree can meet your needs.
    </p>
  </div>
  <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
    <div class="bg-white lg:px-4 py-4 lg:py-8 shadow sm:rounded-lg border">
      <!-- Cal inline embed code begins -->
      <div style="width:100%;height:100%;overflow:scroll" id="my-cal-inline"></div>
      <script type="text/javascript">
        (function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; if(typeof namespace === "string"){cal.ns[namespace] = cal.ns[namespace] || api;p(cal.ns[namespace], ar);p(cal, ["initNamespace", namespace]);} else p(cal, ar); return;} p(cal, ar); }; })(window, "https://app.cal.com/embed/embed.js", "init");
        Cal("init", "30min", {origin:"https://cal.com"});

        Cal.ns["30min"]("inline", {
          elementOrSelector:"#my-cal-inline",
          config: {"layout":"month_view","theme":"light"},
          calLink: "puree/30min",
        });

        Cal.ns["30min"]("ui", {"theme":"light","styles":{"branding":{"brandColor":"#000000"}},"hideEventTypeDetails":true,"layout":"month_view"});
      </script>
      <!-- Cal inline embed code ends -->
    </div>
  </div>


                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template></turbo-stream>