public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cafe Hidden Garden — Specialty Coffee Roasters</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&family=Figtree:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>

  <!-- Navigation -->
  <nav class="nav" id="nav">
    <div class="nav-inner">
      <a href="#" class="nav-logo">Cafe Hidden Garden</a>
      <div class="nav-links">
        <a href="#menu">Menu</a>
        <a href="/order">Order</a>
        <a href="#about">About</a>
        <a href="#visit">Visit</a>
      </div>
      <button class="nav-toggle" id="navToggle" aria-label="Menu">
        <span></span><span></span>
      </button>
    </div>
  </nav>

  <!-- Hero — typographic, no background image -->
  <header class="hero">
    <div class="hero-inner">
      <p class="hero-overline">Specialty coffee roasted daily in Tirupati</p>
      <h1 class="hero-title" id="cafeName">Cafe Hidden Garden</h1>
      <p class="hero-subtitle">We source directly from 23 origins, roast in micro-lots,
      and serve with intention. Every bean has a story — we just help tell it.</p>
      <div class="hero-actions">
        <a href="#menu" class="btn">See the menu</a>
        <a href="#about" class="btn btn-ghost">Our story</a>
      </div>
      <div class="hero-details">
        <span id="cafeAddressSmall"></span>
        <span class="hero-dot">·</span>
        <span id="cafePhoneSmall"></span>
        <span class="hero-dot">·</span>
        <span>Open daily 7am–7pm</span>
      </div>
    </div>
  </header>

  <!-- Menu Section -->
  <section class="menu-section" id="menu">
    <div class="container">
      <div class="section-head">
        <h2 class="section-title">Menu</h2>
        <p class="section-desc">Each item made in-house with locally sourced ingredients. Our coffee is roasted within 7 days of serving.</p>
      </div>

      <div class="category-bar" id="categoryFilters"></div>

      <div class="menu-grid" id="menuGrid"></div>
    </div>
  </section>

  <!-- About / Story -->
  <section class="about-section" id="about">
    <div class="container">
      <div class="about-layout">
        <div class="about-text">
          <h2 class="section-title">From farm to cup, we pay attention at every step</h2>
          <p>Cafe Hidden Garden started in 2026 with a 3-kilo roaster in a garage and a conviction that coffee could be better. Today we operate a full cafe and roastery in India's east side, but the conviction hasn't changed.</p>
          <p>We buy directly from producers and beyond — paying well above commodity prices because quality farming deserves quality compensation. Each lot is roasted to highlight its unique character, not to conform to a house style.</p>
          <div class="about-figures">
            <div class="figure">
              <span class="figure-num"> </span>
              <span class="figure-label"> </span>
            </div>
            <div class="figure">
              <span class="figure-num"> </span>
              <span class="figure-label"> </span>
            </div>
            <div class="figure">
              <span class="figure-num"> </span>
              <span class="figure-label"> </span>
            </div>
          </div>
        </div>
        <div class="about-image">
          <picture>
            <source srcset="https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=700&q=85&fit=crop&crop=center" media="(min-width: 769px)">
            <img
              src="https://images.unsplash.com/photo-1504630083234-14187a9df0f5?w=700&q=85&fit=crop&crop=center"
              alt="Coffee being prepared by hand"
              loading="lazy"
            />
          </picture>
        </div>
      </div>
    </div>
  </section>

  <!-- Visit Section -->
  <section class="visit-section" id="visit">
    <div class="visit-bg">
      <img
        src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=1920&q=85&fit=crop&crop=center"
        alt="Interior of Cafe Hidden Garden"
        loading="lazy"
      />
    </div>
    <div class="visit-content">
      <div class="container">
        <div class="visit-card">
          <h2 class="section-title">Come through</h2>
          <div class="visit-details">
            <div class="visit-block">
              <h3 class="visit-label">Hours</h3>
              <div id="hoursList"></div>
            </div>
            <div class="visit-block">
              <h3 class="visit-label">Location</h3>
              <p id="cafeAddress"></p>
              <p id="cafePhone"></p>
              <p id="cafeEmailText"></p>
            </div>
          </div>
          <p class="visit-note">No reservations. First come, first served. Free Wi-Fi.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Newsletter -->
  <section class="cta-section">
    <div class="container">
      <div class="cta-card">
        <h2 class="section-title">New origins, seasonal specials, and events</h2>
        <p>Our newsletter goes out twice a month. No spam — just good coffee news.</p>
        <form class="cta-form" id="newsletterForm">
          <input type="email" placeholder="Your email" required>
          <button type="submit" class="btn">Subscribe</button>
        </form>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-grid">
        <div>
          <p class="footer-name">Cafe Hidden Garden</p>
          <p class="footer-tagline">Specialty coffee roasters<br>Andhra Pradesh,Tirupati</p>
        </div>
        <div class="footer-links">
          <a href="#menu">Menu</a>
          <a href="#about">About</a>
          <a href="#visit">Visit</a>
          <a href="/admin">Admin</a>
        </div>
      </div>
      <p class="footer-copy">&copy; 2026 Cafe Hidden Garden</p>
    </div>
  </footer>

  <script src="/js/main.js"></script>
</body>
</html>