<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="relative flex h-full flex-col bg-white shadow-2xl">
                <!-- Bare: no header bar, floating close button over the content -->
                <button type="button" data-action="click->custom-slideover#close" class="absolute right-5 top-5 z-20 flex h-10 w-10 items-center justify-center rounded-full bg-white text-gray-500 shadow-[0_2px_8px_rgba(30,27,46,0.12)] ring-1 ring-[#ddd6ca] transition-all hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500">
                  <span class="sr-only">Close panel</span>
                  <svg class="h-5 w-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>
              <!-- Content -->
              <div class="flex-1 overflow-y-auto bg-[#f7f5f0]">
                <div class="p-6">
                  
    <!-- app/views/static/_zoom_demo.html.erb -->
<div class="-m-6 bg-[#f7f5f0] p-6 pt-14 sm:p-8 sm:pt-16">
  <div class="mx-auto max-w-md text-center">
    <p class="text-xs font-bold uppercase tracking-[0.17em] text-indigo-700">Book a demo</p>
    <h2 class="mt-3 font-display text-3xl font-semibold tracking-tight text-gray-900 [text-wrap:balance]">
      Personalised product tour
    </h2>
    <p class="mx-auto mt-3 text-sm leading-6 text-gray-600">
      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 rounded-3xl border border-[#ddd6ca] bg-white p-3 shadow-[0_1px_2px_rgba(30,27,46,0.04),0_28px_60px_-24px_rgba(30,27,46,0.22)] sm:p-5">
    <!-- 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":"#4f46e5"}},"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>