Spaces:

sinaweb2
/

anycoder-40f8f665

Running

App Files Files Community

sinaweb2 commited on Jun 7

Commit

439e496

verified ·

1 Parent(s): 02847de

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +992 -19

index.html CHANGED Viewed

@@ -1,19 +1,992 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Aroma House | A Cozy Neighborhood Coffee Space</title>
+  <meta name="description" content="Aroma House is a cozy neighborhood coffee space for meaningful conversations, quiet work, and handcrafted coffee with people you care about.">
+  <!-- Google Fonts -->
+  <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=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap" rel="stylesheet">
+  <!-- Lucide Icons -->
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <!-- Tailwind CSS -->
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ['DM Sans', 'system-ui', 'sans-serif'],
+            serif: ['Playfair Display', 'Georgia', 'serif'],
+          },
+          colors: {
+            coffee: {
+              50: '#faf6f1',
+              100: '#f0e6d8',
+              200: '#e0ccaf',
+              300: '#c8a878',
+              400: '#b08955',
+              500: '#9a6e3e',
+              600: '#7d5730',
+              700: '#5c4024',
+              800: '#3e2b18',
+              900: '#2a1d10',
+              950: '#1a1008',
+            },
+            cream: {
+              50: '#fdfcfa',
+              100: '#faf6ef',
+              200: '#f5ece0',
+              300: '#ecdfc9',
+            },
+            sage: {
+              100: '#e8ede6',
+              200: '#d1dcd0',
+              300: '#a8bfa4',
+              400: '#7a9a72',
+              500: '#5c7d54',
+            },
+            amber: {
+              warm: '#c9964b',
+              deep: '#a3742e',
+            }
+          },
+          animation: {
+            'fade-up': 'fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards',
+            'fade-in': 'fadeIn 0.6s ease-out forwards',
+            'slide-right': 'slideRight 0.5s ease-out forwards',
+            'float': 'float 6s ease-in-out infinite',
+            'gentle-bounce': 'gentleBounce 2s ease-in-out infinite',
+            'reveal': 'reveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards',
+            'draw-line': 'drawLine 1.2s ease-out forwards',
+            'scale-in': 'scaleIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards',
+          },
+          keyframes: {
+            fadeUp: {
+              '0%': { opacity: '0', transform: 'translateY(30px)' },
+              '100%': { opacity: '1', transform: 'translateY(0)' },
+            },
+            fadeIn: {
+              '0%': { opacity: '0' },
+              '100%': { opacity: '1' },
+            },
+            slideRight: {
+              '0%': { opacity: '0', transform: 'translateX(-20px)' },
+              '100%': { opacity: '1', transform: 'translateX(0)' },
+            },
+            float: {
+              '0%, 100%': { transform: 'translateY(0)' },
+              '50%': { transform: 'translateY(-8px)' },
+            },
+            gentleBounce: {
+              '0%, 100%': { transform: 'translateY(0)' },
+              '50%': { transform: 'translateY(-4px)' },
+            },
+            reveal: {
+              '0%': { clipPath: 'inset(0 100% 0 0)', opacity: '0' },
+              '100%': { clipPath: 'inset(0 0% 0 0)', opacity: '1' },
+            },
+            drawLine: {
+              '0%': { width: '0%' },
+              '100%': { width: '60px' },
+            },
+            scaleIn: {
+              '0%': { opacity: '0', transform: 'scale(0.9)' },
+              '100%': { opacity: '1', transform: 'scale(1)' },
+            },
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    /* =========================================
+       CSS CUSTOM PROPERTIES & DESIGN TOKENS
+       ========================================= */
+    :root {
+      --color-cream: #faf6ef;
+      --color-coffee-50: #faf6f1;
+      --color-coffee-100: #f0e6d8;
+      --color-coffee-200: #e0ccaf;
+      --color-coffee-300: #c8a878;
+      --color-coffee-400: #b08955;
+      --color-coffee-500: #9a6e3e;
+      --color-coffee-600: #7d5730;
+      --color-coffee-700: #5c4024;
+      --color-coffee-800: #3e2b18;
+      --color-coffee-900: #2a1d10;
+      --color-coffee-950: #1a1008;
+      --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
+      --ease-bounce-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
+      --shadow-card: 0 1px 3px rgba(26,16,8,0.06), 0 8px 24px rgba(26,16,8,0.08);
+      --shadow-card-hover: 0 4px 12px rgba(26,16,8,0.1), 0 16px 48px rgba(26,16,8,0.12);
+      --shadow-glow: 0 0 40px rgba(200,168,120,0.15);
+    }
+    /* =========================================
+       GLOBAL BASE STYLES
+       ========================================= */
+    *, *::before, *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    html {
+      scroll-behavior: smooth;
+      scroll-padding-top: 90px;
+    }
+    body {
+      font-family: 'DM Sans', system-ui, sans-serif;
+      background-color: var(--color-cream);
+      color: var(--color-coffee-800);
+      line-height: 1.7;
+      overflow-x: hidden;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+    }
+    ::selection {
+      background-color: var(--color-coffee-300);
+      color: var(--color-coffee-950);
+    }
+    ::-webkit-scrollbar {
+      width: 7px;
+    }
+    ::-webkit-scrollbar-track {
+      background: var(--color-cream);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: var(--color-coffee-300);
+      border-radius: 10px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--color-coffee-400);
+    }
+    /* =========================================
+       TYPOGRAPHY UTILITIES
+       ========================================= */
+    .font-serif {
+      font-family: 'Playfair Display', Georgia, serif;
+    }
+    /* Elegant text rendering */
+    .text-balance {
+      text-wrap: balance;
+    }
+    /* =========================================
+       SCROLL REVEAL ANIMATIONS
+       ========================================= */
+    .reveal {
+      opacity: 0;
+      transform: translateY(40px);
+      transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
+    }
+    .reveal.visible {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .reveal-delay-1 { transition-delay: 0.1s; }
+    .reveal-delay-2 { transition-delay: 0.2s; }
+    .reveal-delay-3 { transition-delay: 0.3s; }
+    .reveal-delay-4 { transition-delay: 0.4s; }
+    .reveal-delay-5 { transition-delay: 0.5s; }
+    /* =========================================
+       SECTION DECORATIVE ELEMENTS
+       ========================================= */
+    .section-label {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.75rem;
+      font-size: 0.7rem;
+      font-weight: 600;
+      letter-spacing: 0.2em;
+      text-transform: uppercase;
+      color: var(--color-coffee-400);
+      margin-bottom: 1.25rem;
+    }
+    .section-label::before {
+      content: '';
+      display: block;
+      width: 24px;
+      height: 1.5px;
+      background: var(--color-coffee-300);
+      border-radius: 1px;
+    }
+    .section-divider {
+      width: 60px;
+      height: 2px;
+      background: var(--color-coffee-300);
+      border-radius: 2px;
+      margin: 0 auto;
+    }
+    /* =========================================
+       HERO VIDEO BACKGROUND
+       ========================================= */
+    .hero-video-wrapper {
+      position: absolute;
+      inset: 0;
+      overflow: hidden;
+      border-radius: 0 0 48px 48px;
+    }
+    .hero-video-wrapper::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background:
+        linear-gradient(180deg, rgba(26,16,8,0.55) 0%, rgba(26,16,8,0.3) 40%, rgba(26,16,8,0.65) 100%),
+        linear-gradient(135deg, rgba(92,64,36,0.2) 0%, transparent 50%);
+      z-index: 1;
+    }
+    .hero-video-wrapper img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transform: scale(1.05);
+      animation: slowZoom 20s ease-in-out infinite alternate;
+    }
+    @keyframes slowZoom {
+      0% { transform: scale(1.05); }
+      100% { transform: scale(1.15); }
+    }
+    /* =========================================
+       GLASS MORPHISM EFFECTS
+       ========================================= */
+    .glass {
+      background: rgba(250, 246, 239, 0.75);
+      backdrop-filter: blur(20px) saturate(1.3);
+      -webkit-backdrop-filter: blur(20px) saturate(1.3);
+    }
+    .glass-dark {
+      background: rgba(42, 29, 16, 0.8);
+      backdrop-filter: blur(20px) saturate(1.3);
+      -webkit-backdrop-filter: blur(20px) saturate(1.3);
+    }
+    /* =========================================
+       CARD STYLES
+       ========================================= */
+    .card-luxe {
+      background: #fff;
+      border-radius: 20px;
+      border: 1px solid rgba(200, 168, 120, 0.12);
+      box-shadow: var(--shadow-card);
+      transition:
+        transform 0.5s var(--ease-smooth),
+        box-shadow 0.5s var(--ease-smooth),
+        border-color 0.4s ease;
+      overflow: hidden;
+    }
+    .card-luxe:hover {
+      transform: translateY(-6px);
+      box-shadow: var(--shadow-card-hover);
+      border-color: rgba(200, 168, 120, 0.25);
+    }
+    .card-luxe .card-img {
+      transition: transform 0.7s var(--ease-smooth);
+    }
+    .card-luxe:hover .card-img {
+      transform: scale(1.06);
+    }
+    /* =========================================
+       BUTTON STYLES
+       ========================================= */
+    .btn-primary {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      padding: 0.9rem 2.2rem;
+      background: var(--color-coffee-800);
+      color: #fff;
+      border-radius: 50px;
+      font-weight: 600;
+      font-size: 0.9rem;
+      letter-spacing: 0.02em;
+      border: none;
+      cursor: pointer;
+      overflow: hidden;
+      transition: all 0.4s var(--ease-smooth);
+      box-shadow: 0 4px 16px rgba(62, 43, 24, 0.25);
+    }
+    .btn-primary::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: var(--color-coffee-700);
+      transform: translateX(-101%);
+      transition: transform 0.5s var(--ease-smooth);
+      border-radius: 50px;
+    }
+    .btn-primary:hover::before {
+      transform: translateX(0);
+    }
+    .btn-primary span,
+    .btn-primary i {
+      position: relative;
+      z-index: 1;
+    }
+    .btn-primary:hover {
+      box-shadow: 0 8px 30px rgba(62, 43, 24, 0.35);
+      transform: translateY(-1px);
+    }
+    .btn-primary:active {
+      transform: translateY(0);
+      box-shadow: 0 2px 8px rgba(62, 43, 24, 0.2);
+    }
+    .btn-secondary {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      padding: 0.85rem 2rem;
+      background: transparent;
+      color: var(--color-coffee-800);
+      border: 1.5px solid rgba(200, 168, 120, 0.4);
+      border-radius: 50px;
+      font-weight: 600;
+      font-size: 0.9rem;
+      letter-spacing: 0.02em;
+      cursor: pointer;
+      transition: all 0.4s var(--ease-smooth);
+    }
+    .btn-secondary:hover {
+      border-color: var(--color-coffee-500);
+      background: rgba(200, 168, 120, 0.08);
+      transform: translateY(-1px);
+    }
+    /* =========================================
+       NAVIGATION STYLES
+       ========================================= */
+    .nav-glass {
+      background: rgba(250, 246, 239, 0.85);
+      backdrop-filter: blur(24px) saturate(1.2);
+      -webkit-backdrop-filter: blur(24px) saturate(1.2);
+    }
+    .nav-scrolled {
+      box-shadow: 0 1px 0 rgba(200,168,120,0.15), 0 4px 20px rgba(26,16,8,0.06);
+    }
+    .nav-link {
+      position: relative;
+      color: var(--color-coffee-700);
+      font-weight: 500;
+      font-size: 0.88rem;
+      padding: 0.4rem 0;
+      transition: color 0.3s ease;
+    }
+    .nav-link::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 1.5px;
+      background: var(--color-coffee-500);
+      border-radius: 1px;
+      transition: width 0.35s var(--ease-smooth);
+    }
+    .nav-link:hover {
+      color: var(--color-coffee-900);
+    }
+    .nav-link:hover::after {
+      width: 100%;
+    }
+    /* =========================================
+       MOBILE MENU
+       ========================================= */
+    .mobile-menu {
+      position: fixed;
+      inset: 0;
+      z-index: 100;
+      background: rgba(250, 246, 239, 0.97);
+      backdrop-filter: blur(30px);
+      -webkit-backdrop-filter: blur(30px);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 1.5rem;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.4s ease, visibility 0.4s ease;
+    }
+    .mobile-menu.open {
+      opacity: 1;
+      visibility: visible;
+    }
+    .mobile-menu a {
+      font-family: 'Playfair Display', serif;
+      font-size: 1.75rem;
+      color: var(--color-coffee-800);
+      opacity: 0;
+      transform: translateY(12px);
+      transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
+    }
+    .mobile-menu.open a {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    .mobile-menu.open a:nth-child(1) { transition-delay: 0.1s; }
+    .mobile-menu.open a:nth-child(2) { transition-delay: 0.15s; }
+    .mobile-menu.open a:nth-child(3) { transition-delay: 0.2s; }
+    .mobile-menu.open a:nth-child(4) { transition-delay: 0.25s; }
+    .mobile-menu.open a:nth-child(5) { transition-delay: 0.3s; }
+    .mobile-menu.open a:nth-child(6) { transition-delay: 0.35s; }
+    .mobile-menu.open a:nth-child(7) { transition-delay: 0.4s; }
+    .mobile-menu a:hover {
+      color: var(--color-coffee-500);
+    }
+    /* =========================================
+       STICKY BOTTOM BAR (MOBILE)
+       ========================================= */
+    .sticky-bar {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 50;
+      padding: 0.6rem 1rem 0.8rem;
+      background: rgba(250, 246, 239, 0.92);
+      backdrop-filter: blur(20px);
+      -webkit-backdrop-filter: blur(20px);
+      border-top: 1px solid rgba(200,168,120,0.15);
+      transform: translateY(100%);
+      transition: transform 0.5s var(--ease-smooth);
+    }
+    .sticky-bar.visible {
+      transform: translateY(0);
+    }
+    /* =========================================
+       FORM STYLES
+       ========================================= */
+    .form-input {
+      width: 100%;
+      padding: 0.85rem 1.1rem;
+      border: 1.5px solid rgba(200,168,120,0.2);
+      border-radius: 14px;
+      background: #fff;
+      color: var(--color-coffee-800);
+      font-size: 0.9rem;
+      font-family: inherit;
+      transition: all 0.3s var(--ease-smooth);
+      outline: none;
+    }
+    .form-input::placeholder {
+      color: var(--color-coffee-300);
+    }
+    .form-input:hover {
+      border-color: rgba(200,168,120,0.4);
+    }
+    .form-input:focus {
+      border-color: var(--color-coffee-400);
+      box-shadow: 0 0 0 4px rgba(200,168,120,0.12);
+    }
+    .form-label {
+      display: block;
+      font-size: 0.78rem;
+      font-weight: 600;
+      color: var(--color-coffee-600);
+      margin-bottom: 0.4rem;
+      letter-spacing: 0.03em;
+      text-transform: uppercase;
+    }
+    /* =========================================
+       MENU FILTER TABS
+       ========================================= */
+    .menu-tab {
+      position: relative;
+      padding: 0.55rem 1.2rem;
+      border-radius: 50px;
+      font-size: 0.82rem;
+      font-weight: 500;
+      color: var(--color-coffee-600);
+      background: transparent;
+      border: 1.5px solid transparent;
+      cursor: pointer;
+      transition: all 0.35s var(--ease-smooth);
+      white-space: nowrap;
+    }
+    .menu-tab:hover {
+      background: rgba(200,168,120,0.08);
+      color: var(--color-coffee-700);
+    }
+    .menu-tab.active {
+      background: var(--color-coffee-800);
+      color: #fff;
+      border-color: var(--color-coffee-800);
+      box-shadow: 0 4px 14px rgba(62,43,24,0.2);
+    }
+    /* =========================================
+       GALLERY MASONRY GRID
+       ========================================= */
+    .gallery-masonry {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      grid-auto-rows: 200px;
+      gap: 10px;
+    }
+    @media (max-width: 1024px) {
+      .gallery-masonry { grid-template-columns: repeat(3, 1fr); }
+    }
+    @media (max-width: 640px) {
+      .gallery-masonry { grid-template-columns: repeat(2, 1fr); }
+    }
+    .gallery-item {
+      position: relative;
+      border-radius: 16px;
+      overflow: hidden;
+      cursor: pointer;
+      box-shadow: var(--shadow-card);
+    }
+    .gallery-item img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      transition: transform 0.7s var(--ease-smooth), filter 0.5s ease;
+    }
+    .gallery-item:hover img {
+      transform: scale(1.08);
+      filter: brightness(1.05);
+    }
+    .gallery-item .gallery-overlay {
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(to top, rgba(26,16,8,0.6) 0%, transparent 60%);
+      opacity: 0;
+      transition: opacity 0.4s ease;
+      display: flex;
+      align-items: flex-end;
+      padding: 1rem;
+    }
+    .gallery-item:hover .gallery-overlay {
+      opacity: 1;
+    }
+    .gallery-item.tall { grid-row: span 2; }
+    .gallery-item.wide { grid-column: span 2; }
+    /* =========================================
+       LIGHTBOX
+       ========================================= */
+    .lightbox {
+      position: fixed;
+      inset: 0;
+      z-index: 200;
+      background: rgba(10, 6, 3, 0.92);
+      backdrop-filter: blur(12px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.4s ease, visibility 0.4s ease;
+    }
+    .lightbox.open {
+      opacity: 1;
+      visibility: visible;
+    }
+    .lightbox img {
+      max-width: 90vw;
+      max-height: 85vh;
+      object-fit: contain;
+      border-radius: 12px;
+      transform: scale(0.92);
+      transition: transform 0.5s var(--ease-smooth);
+    }
+    .lightbox.open img {
+      transform: scale(1);
+    }
+    /* =========================================
+       TESTIMONIAL CARD
+       ========================================= */
+    .testimonial-card {
+      background: #fff;
+      border-radius: 20px;
+      padding: 2rem;
+      border: 1px solid rgba(200,168,120,0.1);
+      box-shadow: var(--shadow-card);
+      transition: all 0.5s var(--ease-smooth);
+    }
+    .testimonial-card:hover {
+      transform: translateY(-4px);
+      box-shadow: var(--shadow-card-hover);
+    }
+    /* =========================================
+       LOYALTY CARD
+       ========================================= */
+    .loyalty-stamp {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      border: 2.5px dashed var(--color-coffee-200);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 0.5s var(--ease-bounce-soft);
+      position: relative;
+    }
+    .loyalty-stamp.filled {
+      background: var(--color-coffee-800);
+      border-color: var(--color-coffee-800);
+      box-shadow: 0 4px 14px rgba(62,43,24,0.25);
+      animation: stampPop 0.5s var(--ease-bounce-soft);
+    }
+    @keyframes stampPop {
+      0% { transform: scale(0.5); }
+      60% { transform: scale(1.15); }
+      100% { transform: scale(1); }
+    }
+    /* =========================================
+       FEATURE ROW HOVER
+       ========================================= */
+    .feature-row {
+      transition: all 0.4s var(--ease-smooth);
+      border-radius: 16px;
+      padding: 1rem;
+      margin: -1rem;
+    }
+    .feature-row:hover {
+      background: rgba(200,168,120,0.05);
+    }
+    /* =========================================
+       AMBIENCE IMAGE
+       ========================================= */
+    .ambience-img {
+      border-radius: 24px;
+      overflow: hidden;
+      box-shadow: 0 20px 60px rgba(26,16,8,0.15);
+      position: relative;
+    }
+    .ambience-img::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 24px;
+      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
+      pointer-events: none;
+    }
+    /* =========================================
+       RATING STARS
+       ========================================= */
+    .star-filled { color: #c9964b; }
+    .star-empty { color: var(--color-coffee-200); }
+    /* =========================================
+       MAP CONTAINER
+       ========================================= */
+    .map-container {
+      border-radius: 24px;
+      overflow: hidden;
+      box-shadow: var(--shadow-card);
+      position: relative;
+    }
+    .map-container::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: 24px;
+      box-shadow: inset 0 0 0 1px rgba(200,168,120,0.15);
+      pointer-events: none;
+    }
+    /* =========================================
+       HOURS ROW
+       ========================================= */
+    .hours-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.7rem 0;
+      border-bottom: 1px solid rgba(200,168,120,0.12);
+      transition: background 0.3s ease;
+    }
+    .hours-row:last-child {
+      border-bottom: none;
+    }
+    .hours-row:hover {
+      background: rgba(200,168,120,0.04);
+      margin: 0 -0.75rem;
+      padding-left: 0.75rem;
+      padding-right: 0.75rem;
+      border-radius: 8px;
+    }
+    /* =========================================
+       RESPONSIVE IMAGE ASPECT RATIO
+       ========================================= */
+    .img-aspect {
+      aspect-ratio: 4 / 3;
+      object-fit: cover;
+    }
+    /* =========================================
+       SUBTLE ANIMATED GRADIENT FOR HERO
+       ========================================= */
+    .hero-gradient-animated {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      height: 40%;
+      background: linear-gradient(to top, rgba(250,246,239,1) 0%, transparent 100%);
+      z-index: 2;
+      pointer-events: none;
+    }
+    /* =========================================
+       NOISE TEXTURE OVERLAY (subtle)
+       ========================================= */
+    .noise-overlay {
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      z-index: 9999;
+      opacity: 0.02;
+      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    }
+    /* =========================================
+       SMOOTH CURVE SECTION DIVIDERS
+       ========================================= */
+    .curve-top {
+      position: absolute;
+      top: -1px;
+      left: 0;
+      right: 0;
+      line-height: 0;
+    }
+    .curve-bottom {
+      position: absolute;
+      bottom: -1px;
+      left: 0;
+      right: 0;
+      line-height: 0;
+      transform: rotate(180deg);
+    }
+  </style>
+</head>
+<body>
+  <!-- Subtle Noise Texture -->
+  <div class="noise-overlay"></div>
+  <!-- =========================================
+       NAVIGATION HEADER
+       ========================================= -->
+  <header id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500">
+    <div class="max-w-7xl mx-auto px-5 sm:px-8">
+      <nav class="flex items-center justify-between h-[70px]">
+        <!-- Logo -->
+        <a href="#home" class="flex items-center gap-2.5 group">
+          <div class="w-9 h-9 rounded-xl bg-coffee-800 flex items-center justify-center transition-transform duration-300 group-hover:scale-105 group-hover:rotate-3">
+            <i data-lucide="coffee" class="w-[18px] h-[18px] text-cream-100"></i>
+          </div>
+          <span class="font-serif text-xl font-semibold text-coffee-900 tracking-tight">Aroma House</span>
+        </a>
+        <!-- Desktop Nav -->
+        <div class="hidden lg:flex items-center gap-7">
+          <a href="#home" class="nav-link">Home</a>
+          <a href="#menu" class="nav-link">Menu</a>
+          <a href="#about" class="nav-link">About</a>
+          <a href="#gallery" class="nav-link">Gallery</a>
+          <a href="#reservations" class="nav-link">Reservations</a>
+          <a href="#location" class="nav-link">Location</a>
+          <a href="#contact" class="nav-link">Contact</a>
+        </div>
+        <!-- CTA + Mobile Toggle -->
+        <div class="flex items-center gap-3">
+          <a href="#reservations" class="hidden sm:inline-flex btn-primary text-sm py-2.5 px-5">
+            <span>Book a Table</span>
+            <i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
+          </a>
+          <button id="mobileMenuBtn" class="lg:hidden w-10 h-10 rounded-xl border border-coffee-200/50 flex items-center justify-center transition-colors hover:bg-coffee-100/50" aria-label="Open menu">
+            <i data-lucide="menu" class="w-5 h-5 text-coffee-800"></i>
+          </button>
+        </div>
+      </nav>
+    </div>
+  </header>
+  <!-- Mobile Menu Overlay -->
+  <div id="mobileMenu" class="mobile-menu">
+    <button id="mobileMenuClose" class="absolute top-5 right-5 w-11 h-11 rounded-full bg-coffee-100 flex items-center justify-center transition-colors hover:bg-coffee-200" aria-label="Close menu">
+      <i data-lucide="x" class="w-5 h-5 text-coffee-800"></i>
+    </button>
+    <a href="#home" class="mobile-menu-link">Home</a>
+    <a href="#menu" class="mobile-menu-link">Menu</a>
+    <a href="#about" class="mobile-menu-link">About</a>
+    <a href="#gallery" class="mobile-menu-link">Gallery</a>
+    <a href="#reservations" class="mobile-menu-link">Reservations</a>
+    <a href="#location" class="mobile-menu-link">Location</a>
+    <a href="#contact" class="mobile-menu-link">Contact</a>
+    <a href="#reservations" class="btn-primary mt-4">
+      <span>Book a Table</span>
+    </a>
+  </div>
+  <!-- =========================================
+       HERO SECTION
+       ========================================= -->
+  <section id="home" class="relative min-h-[100dvh] flex items-center justify-center overflow-hidden">
+    <div class="hero-video-wrapper">
+      <img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=1920&q=85&auto=format" alt="Cozy coffee shop interior with warm lighting and wooden furniture">
+    </div>
+    <!-- Animated gradient at bottom -->
+    <div class="hero-gradient-animated"></div>
+    <div class="relative z-10 max-w-5xl mx-auto px-5 sm:px-8 text-center pt-20 pb-32">
+      <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 backdrop-blur-md border border-white/15 mb-8 animate-fade-in" style="animation-delay: 0.2s;">
+        <i data-lucide="sparkles" class="w-3.5 h-3.5 text-amber-warm"></i>
+        <span class="text-white/90 text-xs font-medium tracking-wide">Crafted with care since 2018</span>
+      </div>
+      <h1 class="font-serif text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-medium text-white leading-[1.05] mb-6 animate-fade-up text-balance" style="animation-delay: 0.3s; text-shadow: 0 4px 30px rgba(0,0,0,0.3);">
+        Relax, Connect, and<br class="hidden sm:block"> Enjoy Coffee <em class="text-amber-warm not-italic">Together</em>
+      </h1>
+      <p class="text-base sm:text-lg text-white/75 max-w-2xl mx-auto mb-10 leading-relaxed animate-fade-up text-balance" style="animation-delay: 0.5s; text-shadow: 0 2px 10px rgba(0,0,0,0.2);">
+        A cozy coffee space for meaningful conversations, quiet work sessions, weekend moments, and handcrafted coffee — shared with people you care about.
+      </p>
+      <div class="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-up" style="animation-delay: 0.7s;">
+        <a href="#reservations" class="btn-primary text-base py-3.5 px-8">
+          <span>Reserve a Table</span>
+          <i data-lucide="calendar" class="w-4 h-4"></i>
+        </a>
+        <a href="#menu" class="btn-secondary text-base py-3.5 px-8 border-white/30 text-white hover:bg-white/10 hover:border-white/50">
+          <span>View Menu</span>
+          <i data-lucide="utensils" class="w-4 h-4"></i>
+        </a>
+      </div>
+      <!-- Trust indicators -->
+      <div class="flex flex-wrap items-center justify-center gap-5 sm:gap-8 mt-14 animate-fade-up" style="animation-delay: 0.9s;">
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center">
+            <i data-lucide="leaf" class="w-3.5 h-3.5 text-sage-300"></i>
+          </div>
+          <span class="text-white/70 text-xs sm:text-sm font-medium">Fresh Roasted</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center">
+            <i data-lucide="sofa" class="w-3.5 h-3.5 text-amber-warm"></i>
+          </div>
+          <span class="text-white/70 text-xs sm:text-sm font-medium">Cozy Seating</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center">
+            <i data-lucide="wifi" class="w-3.5 h-3.5 text-sage-300"></i>
+          </div>
+          <span class="text-white/70 text-xs sm:text-sm font-medium">Free Wi-Fi</span>
+        </div>
+        <div class="flex items-center gap-2">
+          <div class="w-8 h-8 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center">
+            <i data-lucide="heart" class="w-3.5 h-3.5 text-rose-300"></i>
+          </div>
+          <span class="text-white/70 text-xs sm:text-sm font-medium">Family Friendly</span>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- =========================================
+       QUICK ROUTINE PROMPTS
+       ========================================= -->
+  <section class="py-16 px-5 sm:px-8">
+    <div class="max-w-6xl mx-auto">
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
+        <div class="card-luxe p-6 text-center reveal reveal-delay-1 group cursor-default">
+          <div class="w-12 h-12 rounded-2xl bg-coffee-100 flex items-center justify-center mx-auto mb-4 transition-transform duration-500 group-hover:scale-110 group-hover:rotate-6">
+            <i data-lucide="sunrise" class="w-5 h-5 text-coffee-600"></i>
+          </div>
+          <h3 class="font-serif text-lg font-medium text-coffee-800 mb-1.5">Morning Ritual</h3>
+          <p class="text-xs text-coffee-500 leading-relaxed">Start your day with a perfect pour-over before work.</p>
+        </div>
+        <div class="card-luxe p-6 text-center reveal reveal-delay-2 group cursor-default">
+          <div class="w-12 h-12 rounded-2xl bg