<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WaitAMenu</title>
    <meta name="description" content="Free QR menu and digital ordering for restaurants, salons, and gyms." />

    <!-- Open Graph / WhatsApp / Social Sharing -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="WaitAMenu" />
    <meta property="og:description" content="Free QR menu and digital ordering for restaurants, salons, and gyms." />
    <meta property="og:image" content="https://app.waitamenu.in/web-app-manifest-512x512.png" />
    <meta property="og:url" content="https://app.waitamenu.in" />
    <meta property="og:site_name" content="WaitAMenu" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="WaitAMenu" />
    <meta name="twitter:description" content="Free QR menu and digital ordering for restaurants, salons, and gyms." />
    <meta name="twitter:image" content="https://app.waitamenu.in/web-app-manifest-512x512.png" />

    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="theme-color" content="#ffffff" />
    <script type="module" crossorigin src="/assets/index-CBNHZJOC.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-BaJB5vRs.css">
  </head>
  <body>
    <div id="root">
      <!-- Instant skeleton while JS loads — removed by React on mount -->
      <div id="boot-skeleton" style="min-height:100vh;min-height:100dvh;display:flex;justify-content:center;background:#f9fafb">
        <div style="width:100%;max-width:28rem;background:#fff;box-shadow:0 25px 50px -12px rgba(0,0,0,0.08);position:relative;overflow:hidden">
          <!-- Shimmer animation -->
          <style>
            @keyframes bootShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
            .boot-pulse{position:relative;overflow:hidden;background:#f3f4f6;border-radius:0.75rem}
            .boot-pulse::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);animation:bootShimmer 1.5s infinite}
          </style>
          <!-- Cover image skeleton -->
          <div class="boot-pulse" style="height:50vh;border-radius:0"></div>
          <!-- CTA skeleton -->
          <div style="padding:0 1.25rem;margin-top:-2rem;position:relative;z-index:1">
            <div class="boot-pulse" style="height:3.5rem;border-radius:0.5rem"></div>
          </div>
          <!-- Content skeleton rows -->
          <div style="padding:2rem 1.25rem;display:flex;flex-direction:column;gap:1.25rem">
            <div style="display:flex;align-items:center;gap:1rem">
              <div class="boot-pulse" style="width:3rem;height:3rem;flex-shrink:0"></div>
              <div style="flex:1;display:flex;flex-direction:column;gap:0.5rem">
                <div class="boot-pulse" style="height:0.875rem;width:75%"></div>
                <div class="boot-pulse" style="height:0.625rem;width:50%"></div>
              </div>
            </div>
            <div style="display:flex;gap:0.75rem">
              <div class="boot-pulse" style="height:3rem;flex:1"></div>
              <div class="boot-pulse" style="height:3rem;flex:1"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
