Hugging Face's logo

Spaces:
sinaweb2
/
anycoder-40f8f665
Running

App Files Community
sinaweb2 commited on
Commit
7cdba01
·
verified ·
1 Parent(s): d8b4039

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +347 -138
index.html CHANGED
@@ -1,22 +1,26 @@
1
  <!DOCTYPE html>
2
  <html lang="en" class="scroll-smooth">
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Aroma House | A Cozy Neighborhood Coffee Space</title>
7
- <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.">
8
-
 
9
  <!-- Google Fonts -->
10
  <link rel="preconnect" href="https://fonts.googleapis.com">
11
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
- <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">
13
-
 
 
14
  <!-- Lucide Icons -->
15
  <script src="https://unpkg.com/lucide@latest"></script>
16
-
17
  <!-- Tailwind CSS -->
18
  <script src="https://cdn.tailwindcss.com"></script>
19
-
20
  <script>
21
  tailwind.config = {
22
  theme: {
@@ -105,7 +109,7 @@
105
  }
106
  }
107
  </script>
108
-
109
  <style>
110
  /* =========================================
111
  CSS CUSTOM PROPERTIES & DESIGN TOKENS
@@ -125,25 +129,27 @@
125
  --color-coffee-950: #1a1008;
126
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
127
  --ease-bounce-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
128
- --shadow-card: 0 1px 3px rgba(26,16,8,0.06), 0 8px 24px rgba(26,16,8,0.08);
129
- --shadow-card-hover: 0 4px 12px rgba(26,16,8,0.1), 0 16px 48px rgba(26,16,8,0.12);
130
- --shadow-glow: 0 0 40px rgba(200,168,120,0.15);
131
  }
132
 
133
  /* =========================================
134
  GLOBAL BASE STYLES
135
  ========================================= */
136
- *, *::before, *::after {
 
 
137
  margin: 0;
138
  padding: 0;
139
  box-sizing: border-box;
140
  }
141
-
142
  html {
143
  scroll-behavior: smooth;
144
  scroll-padding-top: 90px;
145
  }
146
-
147
  body {
148
  font-family: 'DM Sans', system-ui, sans-serif;
149
  background-color: var(--color-cream);
@@ -153,25 +159,25 @@
153
  -webkit-font-smoothing: antialiased;
154
  -moz-osx-font-smoothing: grayscale;
155
  }
156
-
157
  ::selection {
158
  background-color: var(--color-coffee-300);
159
  color: var(--color-coffee-950);
160
  }
161
-
162
  ::-webkit-scrollbar {
163
  width: 7px;
164
  }
165
-
166
  ::-webkit-scrollbar-track {
167
  background: var(--color-cream);
168
  }
169
-
170
  ::-webkit-scrollbar-thumb {
171
  background: var(--color-coffee-300);
172
  border-radius: 10px;
173
  }
174
-
175
  ::-webkit-scrollbar-thumb:hover {
176
  background: var(--color-coffee-400);
177
  }
@@ -182,7 +188,7 @@
182
  .font-serif {
183
  font-family: 'Playfair Display', Georgia, serif;
184
  }
185
-
186
  /* Elegant text rendering */
187
  .text-balance {
188
  text-wrap: balance;
@@ -196,17 +202,31 @@
196
  transform: translateY(40px);
197
  transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
198
  }
199
-
200
  .reveal.visible {
201
  opacity: 1;
202
  transform: translateY(0);
203
  }
204
-
205
- .reveal-delay-1 { transition-delay: 0.1s; }
206
- .reveal-delay-2 { transition-delay: 0.2s; }
207
- .reveal-delay-3 { transition-delay: 0.3s; }
208
- .reveal-delay-4 { transition-delay: 0.4s; }
209
- .reveal-delay-5 { transition-delay: 0.5s; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
210
 
211
  /* =========================================
212
  SECTION DECORATIVE ELEMENTS
@@ -222,7 +242,7 @@
222
  color: var(--color-coffee-400);
223
  margin-bottom: 1.25rem;
224
  }
225
-
226
  .section-label::before {
227
  content: '';
228
  display: block;
@@ -231,7 +251,7 @@
231
  background: var(--color-coffee-300);
232
  border-radius: 1px;
233
  }
234
-
235
  .section-divider {
236
  width: 60px;
237
  height: 2px;
@@ -249,17 +269,17 @@
249
  overflow: hidden;
250
  border-radius: 0 0 48px 48px;
251
  }
252
-
253
  .hero-video-wrapper::after {
254
  content: '';
255
  position: absolute;
256
  inset: 0;
257
- background:
258
- linear-gradient(180deg, rgba(26,16,8,0.55) 0%, rgba(26,16,8,0.3) 40%, rgba(26,16,8,0.65) 100%),
259
- linear-gradient(135deg, rgba(92,64,36,0.2) 0%, transparent 50%);
260
  z-index: 1;
261
  }
262
-
263
  .hero-video-wrapper img {
264
  width: 100%;
265
  height: 100%;
@@ -267,10 +287,15 @@
267
  transform: scale(1.05);
268
  animation: slowZoom 20s ease-in-out infinite alternate;
269
  }
270
-
271
  @keyframes slowZoom {
272
- 0% { transform: scale(1.05); }
273
- 100% { transform: scale(1.15); }
 
 
 
 
 
274
  }
275
 
276
  /* =========================================
@@ -281,7 +306,7 @@
281
  backdrop-filter: blur(20px) saturate(1.3);
282
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
283
  }
284
-
285
  .glass-dark {
286
  background: rgba(42, 29, 16, 0.8);
287
  backdrop-filter: blur(20px) saturate(1.3);
@@ -296,23 +321,23 @@
296
  border-radius: 20px;
297
  border: 1px solid rgba(200, 168, 120, 0.12);
298
  box-shadow: var(--shadow-card);
299
- transition:
300
- transform 0.5s var(--ease-smooth),
301
  box-shadow 0.5s var(--ease-smooth),
302
  border-color 0.4s ease;
303
  overflow: hidden;
304
  }
305
-
306
  .card-luxe:hover {
307
  transform: translateY(-6px);
308
  box-shadow: var(--shadow-card-hover);
309
  border-color: rgba(200, 168, 120, 0.25);
310
  }
311
-
312
  .card-luxe .card-img {
313
  transition: transform 0.7s var(--ease-smooth);
314
  }
315
-
316
  .card-luxe:hover .card-img {
317
  transform: scale(1.06);
318
  }
@@ -339,7 +364,7 @@
339
  transition: all 0.4s var(--ease-smooth);
340
  box-shadow: 0 4px 16px rgba(62, 43, 24, 0.25);
341
  }
342
-
343
  .btn-primary::before {
344
  content: '';
345
  position: absolute;
@@ -349,27 +374,27 @@
349
  transition: transform 0.5s var(--ease-smooth);
350
  border-radius: 50px;
351
  }
352
-
353
  .btn-primary:hover::before {
354
  transform: translateX(0);
355
  }
356
-
357
  .btn-primary span,
358
  .btn-primary i {
359
  position: relative;
360
  z-index: 1;
361
  }
362
-
363
  .btn-primary:hover {
364
  box-shadow: 0 8px 30px rgba(62, 43, 24, 0.35);
365
  transform: translateY(-1px);
366
  }
367
-
368
  .btn-primary:active {
369
  transform: translateY(0);
370
  box-shadow: 0 2px 8px rgba(62, 43, 24, 0.2);
371
  }
372
-
373
  .btn-secondary {
374
  display: inline-flex;
375
  align-items: center;
@@ -386,7 +411,7 @@
386
  cursor: pointer;
387
  transition: all 0.4s var(--ease-smooth);
388
  }
389
-
390
  .btn-secondary:hover {
391
  border-color: var(--color-coffee-500);
392
  background: rgba(200, 168, 120, 0.08);
@@ -401,11 +426,11 @@
401
  backdrop-filter: blur(24px) saturate(1.2);
402
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
403
  }
404
-
405
  .nav-scrolled {
406
- box-shadow: 0 1px 0 rgba(200,168,120,0.15), 0 4px 20px rgba(26,16,8,0.06);
407
  }
408
-
409
  .nav-link {
410
  position: relative;
411
  color: var(--color-coffee-700);
@@ -414,7 +439,7 @@
414
  padding: 0.4rem 0;
415
  transition: color 0.3s ease;
416
  }
417
-
418
  .nav-link::after {
419
  content: '';
420
  position: absolute;
@@ -426,11 +451,11 @@
426
  border-radius: 1px;
427
  transition: width 0.35s var(--ease-smooth);
428
  }
429
-
430
  .nav-link:hover {
431
  color: var(--color-coffee-900);
432
  }
433
-
434
  .nav-link:hover::after {
435
  width: 100%;
436
  }
@@ -454,12 +479,12 @@
454
  visibility: hidden;
455
  transition: opacity 0.4s ease, visibility 0.4s ease;
456
  }
457
-
458
  .mobile-menu.open {
459
  opacity: 1;
460
  visibility: visible;
461
  }
462
-
463
  .mobile-menu a {
464
  font-family: 'Playfair Display', serif;
465
  font-size: 1.75rem;
@@ -468,20 +493,40 @@
468
  transform: translateY(12px);
469
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
470
  }
471
-
472
  .mobile-menu.open a {
473
  opacity: 1;
474
  transform: translateY(0);
475
  }
476
-
477
- .mobile-menu.open a:nth-child(1) { transition-delay: 0.1s; }
478
- .mobile-menu.open a:nth-child(2) { transition-delay: 0.15s; }
479
- .mobile-menu.open a:nth-child(3) { transition-delay: 0.2s; }
480
- .mobile-menu.open a:nth-child(4) { transition-delay: 0.25s; }
481
- .mobile-menu.open a:nth-child(5) { transition-delay: 0.3s; }
482
- .mobile-menu.open a:nth-child(6) { transition-delay: 0.35s; }
483
- .mobile-menu.open a:nth-child(7) { transition-delay: 0.4s; }
484
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
485
  .mobile-menu a:hover {
486
  color: var(--color-coffee-500);
487
  }
@@ -499,11 +544,11 @@
499
  background: rgba(250, 246, 239, 0.92);
500
  backdrop-filter: blur(20px);
501
  -webkit-backdrop-filter: blur(20px);
502
- border-top: 1px solid rgba(200,168,120,0.15);
503
  transform: translateY(100%);
504
  transition: transform 0.5s var(--ease-smooth);
505
  }
506
-
507
  .sticky-bar.visible {
508
  transform: translateY(0);
509
  }
@@ -514,7 +559,7 @@
514
  .form-input {
515
  width: 100%;
516
  padding: 0.85rem 1.1rem;
517
- border: 1.5px solid rgba(200,168,120,0.2);
518
  border-radius: 14px;
519
  background: #fff;
520
  color: var(--color-coffee-800);
@@ -523,20 +568,20 @@
523
  transition: all 0.3s var(--ease-smooth);
524
  outline: none;
525
  }
526
-
527
  .form-input::placeholder {
528
  color: var(--color-coffee-300);
529
  }
530
-
531
  .form-input:hover {
532
- border-color: rgba(200,168,120,0.4);
533
  }
534
-
535
  .form-input:focus {
536
  border-color: var(--color-coffee-400);
537
- box-shadow: 0 0 0 4px rgba(200,168,120,0.12);
538
  }
539
-
540
  .form-label {
541
  display: block;
542
  font-size: 0.78rem;
@@ -563,17 +608,17 @@
563
  transition: all 0.35s var(--ease-smooth);
564
  white-space: nowrap;
565
  }
566
-
567
  .menu-tab:hover {
568
- background: rgba(200,168,120,0.08);
569
  color: var(--color-coffee-700);
570
  }
571
-
572
  .menu-tab.active {
573
  background: var(--color-coffee-800);
574
  color: #fff;
575
  border-color: var(--color-coffee-800);
576
- box-shadow: 0 4px 14px rgba(62,43,24,0.2);
577
  }
578
 
579
  /* =========================================
@@ -585,15 +630,19 @@
585
  grid-auto-rows: 200px;
586
  gap: 10px;
587
  }
588
-
589
  @media (max-width: 1024px) {
590
- .gallery-masonry { grid-template-columns: repeat(3, 1fr); }
 
 
591
  }
592
-
593
  @media (max-width: 640px) {
594
- .gallery-masonry { grid-template-columns: repeat(2, 1fr); }
 
 
595
  }
596
-
597
  .gallery-item {
598
  position: relative;
599
  border-radius: 16px;
@@ -601,36 +650,41 @@
601
  cursor: pointer;
602
  box-shadow: var(--shadow-card);
603
  }
604
-
605
  .gallery-item img {
606
  width: 100%;
607
  height: 100%;
608
  object-fit: cover;
609
  transition: transform 0.7s var(--ease-smooth), filter 0.5s ease;
610
  }
611
-
612
  .gallery-item:hover img {
613
  transform: scale(1.08);
614
  filter: brightness(1.05);
615
  }
616
-
617
  .gallery-item .gallery-overlay {
618
  position: absolute;
619
  inset: 0;
620
- background: linear-gradient(to top, rgba(26,16,8,0.6) 0%, transparent 60%);
621
  opacity: 0;
622
  transition: opacity 0.4s ease;
623
  display: flex;
624
  align-items: flex-end;
625
  padding: 1rem;
626
  }
627
-
628
  .gallery-item:hover .gallery-overlay {
629
  opacity: 1;
630
  }
631
-
632
- .gallery-item.tall { grid-row: span 2; }
633
- .gallery-item.wide { grid-column: span 2; }
 
 
 
 
 
634
 
635
  /* =========================================
636
  LIGHTBOX
@@ -648,12 +702,12 @@
648
  visibility: hidden;
649
  transition: opacity 0.4s ease, visibility 0.4s ease;
650
  }
651
-
652
  .lightbox.open {
653
  opacity: 1;
654
  visibility: visible;
655
  }
656
-
657
  .lightbox img {
658
  max-width: 90vw;
659
  max-height: 85vh;
@@ -662,7 +716,7 @@
662
  transform: scale(0.92);
663
  transition: transform 0.5s var(--ease-smooth);
664
  }
665
-
666
  .lightbox.open img {
667
  transform: scale(1);
668
  }
@@ -674,11 +728,11 @@
674
  background: #fff;
675
  border-radius: 20px;
676
  padding: 2rem;
677
- border: 1px solid rgba(200,168,120,0.1);
678
  box-shadow: var(--shadow-card);
679
  transition: all 0.5s var(--ease-smooth);
680
  }
681
-
682
  .testimonial-card:hover {
683
  transform: translateY(-4px);
684
  box-shadow: var(--shadow-card-hover);
@@ -698,18 +752,26 @@
698
  transition: all 0.5s var(--ease-bounce-soft);
699
  position: relative;
700
  }
701
-
702
  .loyalty-stamp.filled {
703
  background: var(--color-coffee-800);
704
  border-color: var(--color-coffee-800);
705
- box-shadow: 0 4px 14px rgba(62,43,24,0.25);
706
  animation: stampPop 0.5s var(--ease-bounce-soft);
707
  }
708
-
709
  @keyframes stampPop {
710
- 0% { transform: scale(0.5); }
711
- 60% { transform: scale(1.15); }
712
- 100% { transform: scale(1); }
 
 
 
 
 
 
 
 
713
  }
714
 
715
  /* =========================================
@@ -721,9 +783,9 @@
721
  padding: 1rem;
722
  margin: -1rem;
723
  }
724
-
725
  .feature-row:hover {
726
- background: rgba(200,168,120,0.05);
727
  }
728
 
729
  /* =========================================
@@ -732,24 +794,29 @@
732
  .ambience-img {
733
  border-radius: 24px;
734
  overflow: hidden;
735
- box-shadow: 0 20px 60px rgba(26,16,8,0.15);
736
  position: relative;
737
  }
738
-
739
  .ambience-img::after {
740
  content: '';
741
  position: absolute;
742
  inset: 0;
743
  border-radius: 24px;
744
- box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
745
  pointer-events: none;
746
  }
747
 
748
  /* =========================================
749
  RATING STARS
750
  ========================================= */
751
- .star-filled { color: #c9964b; }
752
- .star-empty { color: var(--color-coffee-200); }
 
 
 
 
 
753
 
754
  /* =========================================
755
  MAP CONTAINER
@@ -760,13 +827,13 @@
760
  box-shadow: var(--shadow-card);
761
  position: relative;
762
  }
763
-
764
  .map-container::after {
765
  content: '';
766
  position: absolute;
767
  inset: 0;
768
  border-radius: 24px;
769
- box-shadow: inset 0 0 0 1px rgba(200,168,120,0.15);
770
  pointer-events: none;
771
  }
772
 
@@ -778,16 +845,16 @@
778
  justify-content: space-between;
779
  align-items: center;
780
  padding: 0.7rem 0;
781
- border-bottom: 1px solid rgba(200,168,120,0.12);
782
  transition: background 0.3s ease;
783
  }
784
-
785
  .hours-row:last-child {
786
  border-bottom: none;
787
  }
788
-
789
  .hours-row:hover {
790
- background: rgba(200,168,120,0.04);
791
  margin: 0 -0.75rem;
792
  padding-left: 0.75rem;
793
  padding-right: 0.75rem;
@@ -811,7 +878,7 @@
811
  left: 0;
812
  right: 0;
813
  height: 40%;
814
- background: linear-gradient(to top, rgba(250,246,239,1) 0%, transparent 100%);
815
  z-index: 2;
816
  pointer-events: none;
817
  }
@@ -838,7 +905,7 @@
838
  right: 0;
839
  line-height: 0;
840
  }
841
-
842
  .curve-bottom {
843
  position: absolute;
844
  bottom: -1px;
@@ -847,8 +914,129 @@
847
  line-height: 0;
848
  transform: rotate(180deg);
849
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
850
  </style>
851
  </head>
 
852
  <body>
853
  <!-- Subtle Noise Texture -->
854
  <div class="noise-overlay"></div>
@@ -861,12 +1049,13 @@
861
  <nav class="flex items-center justify-between h-[70px]">
862
  <!-- Logo -->
863
  <a href="#home" class="flex items-center gap-2.5 group">
864
- <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">
 
865
  <i data-lucide="coffee" class="w-[18px] h-[18px] text-cream-100"></i>
866
  </div>
867
  <span class="font-serif text-xl font-semibold text-coffee-900 tracking-tight">Aroma House</span>
868
  </a>
869
-
870
  <!-- Desktop Nav -->
871
  <div class="hidden lg:flex items-center gap-7">
872
  <a href="#home" class="nav-link">Home</a>
@@ -877,7 +1066,7 @@
877
  <a href="#location" class="nav-link">Location</a>
878
  <a href="#contact" class="nav-link">Contact</a>
879
  </div>
880
-
881
  <!-- CTA + Mobile Toggle -->
882
  <div class="flex items-center gap-3">
883
  <a href="#reservations" class="hidden sm:inline-flex btn-primary text-sm py-2.5 px-5">
@@ -916,37 +1105,47 @@
916
  <div class="hero-video-wrapper">
917
  <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">
918
  </div>
919
-
920
  <!-- Animated gradient at bottom -->
921
  <div class="hero-gradient-animated"></div>
922
-
923
  <div class="relative z-10 max-w-5xl mx-auto px-5 sm:px-8 text-center pt-20 pb-32">
924
- <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;">
 
 
925
  <i data-lucide="sparkles" class="w-3.5 h-3.5 text-amber-warm"></i>
926
  <span class="text-white/90 text-xs font-medium tracking-wide">Crafted with care since 2018</span>
927
  </div>
928
-
929
- <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);">
930
- Relax, Connect, and<br class="hidden sm:block"> Enjoy Coffee <em class="text-amber-warm not-italic">Together</em>
 
 
 
931
  </h1>
932
-
933
- <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);">
934
- A cozy coffee space for meaningful conversations, quiet work sessions, weekend moments, and handcrafted coffee — shared with people you care about.
 
 
935
  </p>
936
-
937
- <div class="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-up" style="animation-delay: 0.7s;">
 
938
  <a href="#reservations" class="btn-primary text-base py-3.5 px-8">
939
  <span>Reserve a Table</span>
940
  <i data-lucide="calendar" class="w-4 h-4"></i>
941
  </a>
942
- <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">
 
943
  <span>View Menu</span>
944
  <i data-lucide="utensils" class="w-4 h-4"></i>
945
  </a>
946
  </div>
947
-
948
  <!-- Trust indicators -->
949
- <div class="flex flex-wrap items-center justify-center gap-5 sm:gap-8 mt-14 animate-fade-up" style="animation-delay: 0.9s;">
 
950
  <div class="flex items-center gap-2">
951
  <div class="w-8 h-8 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center">
952
  <i data-lucide="leaf" class="w-3.5 h-3.5 text-sage-300"></i>
@@ -982,11 +1181,21 @@
982
  <div class="max-w-6xl mx-auto">
983
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
984
  <div class="card-luxe p-6 text-center reveal reveal-delay-1 group cursor-default">
985
- <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">
 
986
  <i data-lucide="sunrise" class="w-5 h-5 text-coffee-600"></i>
987
  </div>
988
  <h3 class="font-serif text-lg font-medium text-coffee-800 mb-1.5">Morning Ritual</h3>
989
  <p class="text-xs text-coffee-500 leading-relaxed">Start your day with a perfect pour-over before work.</p>
990
  </div>
991
  <div class="card-luxe p-6 text-center reveal reveal-delay-2 group cursor-default">
992
- <div class="w-12 h-12 rounded-2xl bg
 
 
 
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html lang="en" class="scroll-smooth">
3
+
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Aroma House | A Cozy Neighborhood Coffee Space</title>
8
+ <meta name="description"
9
+ content="Aroma House is a cozy neighborhood coffee space for meaningful conversations, quiet work, and handcrafted coffee with people you care about.">
10
+
11
  <!-- Google Fonts -->
12
  <link rel="preconnect" href="https://fonts.googleapis.com">
13
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
14
+ <link
15
+ 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"
16
+ rel="stylesheet">
17
+
18
  <!-- Lucide Icons -->
19
  <script src="https://unpkg.com/lucide@latest"></script>
20
+
21
  <!-- Tailwind CSS -->
22
  <script src="https://cdn.tailwindcss.com"></script>
23
+
24
  <script>
25
  tailwind.config = {
26
  theme: {
 
109
  }
110
  }
111
  </script>
112
+
113
  <style>
114
  /* =========================================
115
  CSS CUSTOM PROPERTIES & DESIGN TOKENS
 
129
  --color-coffee-950: #1a1008;
130
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
131
  --ease-bounce-soft: cubic-bezier(0.34, 1.56, 0.64, 1);
132
+ --shadow-card: 0 1px 3px rgba(26, 16, 8, 0.06), 0 8px 24px rgba(26, 16, 8, 0.08);
133
+ --shadow-card-hover: 0 4px 12px rgba(26, 16, 8, 0.1), 0 16px 48px rgba(26, 16, 8, 0.12);
134
+ --shadow-glow: 0 0 40px rgba(200, 168, 120, 0.15);
135
  }
136
 
137
  /* =========================================
138
  GLOBAL BASE STYLES
139
  ========================================= */
140
+ *,
141
+ *::before,
142
+ *::after {
143
  margin: 0;
144
  padding: 0;
145
  box-sizing: border-box;
146
  }
147
+
148
  html {
149
  scroll-behavior: smooth;
150
  scroll-padding-top: 90px;
151
  }
152
+
153
  body {
154
  font-family: 'DM Sans', system-ui, sans-serif;
155
  background-color: var(--color-cream);
 
159
  -webkit-font-smoothing: antialiased;
160
  -moz-osx-font-smoothing: grayscale;
161
  }
162
+
163
  ::selection {
164
  background-color: var(--color-coffee-300);
165
  color: var(--color-coffee-950);
166
  }
167
+
168
  ::-webkit-scrollbar {
169
  width: 7px;
170
  }
171
+
172
  ::-webkit-scrollbar-track {
173
  background: var(--color-cream);
174
  }
175
+
176
  ::-webkit-scrollbar-thumb {
177
  background: var(--color-coffee-300);
178
  border-radius: 10px;
179
  }
180
+
181
  ::-webkit-scrollbar-thumb:hover {
182
  background: var(--color-coffee-400);
183
  }
 
188
  .font-serif {
189
  font-family: 'Playfair Display', Georgia, serif;
190
  }
191
+
192
  /* Elegant text rendering */
193
  .text-balance {
194
  text-wrap: balance;
 
202
  transform: translateY(40px);
203
  transition: opacity 0.9s var(--ease-smooth), transform 0.9s var(--ease-smooth);
204
  }
205
+
206
  .reveal.visible {
207
  opacity: 1;
208
  transform: translateY(0);
209
  }
210
+
211
+ .reveal-delay-1 {
212
+ transition-delay: 0.1s;
213
+ }
214
+
215
+ .reveal-delay-2 {
216
+ transition-delay: 0.2s;
217
+ }
218
+
219
+ .reveal-delay-3 {
220
+ transition-delay: 0.3s;
221
+ }
222
+
223
+ .reveal-delay-4 {
224
+ transition-delay: 0.4s;
225
+ }
226
+
227
+ .reveal-delay-5 {
228
+ transition-delay: 0.5s;
229
+ }
230
 
231
  /* =========================================
232
  SECTION DECORATIVE ELEMENTS
 
242
  color: var(--color-coffee-400);
243
  margin-bottom: 1.25rem;
244
  }
245
+
246
  .section-label::before {
247
  content: '';
248
  display: block;
 
251
  background: var(--color-coffee-300);
252
  border-radius: 1px;
253
  }
254
+
255
  .section-divider {
256
  width: 60px;
257
  height: 2px;
 
269
  overflow: hidden;
270
  border-radius: 0 0 48px 48px;
271
  }
272
+
273
  .hero-video-wrapper::after {
274
  content: '';
275
  position: absolute;
276
  inset: 0;
277
+ background:
278
+ linear-gradient(180deg, rgba(26, 16, 8, 0.55) 0%, rgba(26, 16, 8, 0.3) 40%, rgba(26, 16, 8, 0.65) 100%),
279
+ linear-gradient(135deg, rgba(92, 64, 36, 0.2) 0%, transparent 50%);
280
  z-index: 1;
281
  }
282
+
283
  .hero-video-wrapper img {
284
  width: 100%;
285
  height: 100%;
 
287
  transform: scale(1.05);
288
  animation: slowZoom 20s ease-in-out infinite alternate;
289
  }
290
+
291
  @keyframes slowZoom {
292
+ 0% {
293
+ transform: scale(1.05);
294
+ }
295
+
296
+ 100% {
297
+ transform: scale(1.15);
298
+ }
299
  }
300
 
301
  /* =========================================
 
306
  backdrop-filter: blur(20px) saturate(1.3);
307
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
308
  }
309
+
310
  .glass-dark {
311
  background: rgba(42, 29, 16, 0.8);
312
  backdrop-filter: blur(20px) saturate(1.3);
 
321
  border-radius: 20px;
322
  border: 1px solid rgba(200, 168, 120, 0.12);
323
  box-shadow: var(--shadow-card);
324
+ transition:
325
+ transform 0.5s var(--ease-smooth),
326
  box-shadow 0.5s var(--ease-smooth),
327
  border-color 0.4s ease;
328
  overflow: hidden;
329
  }
330
+
331
  .card-luxe:hover {
332
  transform: translateY(-6px);
333
  box-shadow: var(--shadow-card-hover);
334
  border-color: rgba(200, 168, 120, 0.25);
335
  }
336
+
337
  .card-luxe .card-img {
338
  transition: transform 0.7s var(--ease-smooth);
339
  }
340
+
341
  .card-luxe:hover .card-img {
342
  transform: scale(1.06);
343
  }
 
364
  transition: all 0.4s var(--ease-smooth);
365
  box-shadow: 0 4px 16px rgba(62, 43, 24, 0.25);
366
  }
367
+
368
  .btn-primary::before {
369
  content: '';
370
  position: absolute;
 
374
  transition: transform 0.5s var(--ease-smooth);
375
  border-radius: 50px;
376
  }
377
+
378
  .btn-primary:hover::before {
379
  transform: translateX(0);
380
  }
381
+
382
  .btn-primary span,
383
  .btn-primary i {
384
  position: relative;
385
  z-index: 1;
386
  }
387
+
388
  .btn-primary:hover {
389
  box-shadow: 0 8px 30px rgba(62, 43, 24, 0.35);
390
  transform: translateY(-1px);
391
  }
392
+
393
  .btn-primary:active {
394
  transform: translateY(0);
395
  box-shadow: 0 2px 8px rgba(62, 43, 24, 0.2);
396
  }
397
+
398
  .btn-secondary {
399
  display: inline-flex;
400
  align-items: center;
 
411
  cursor: pointer;
412
  transition: all 0.4s var(--ease-smooth);
413
  }
414
+
415
  .btn-secondary:hover {
416
  border-color: var(--color-coffee-500);
417
  background: rgba(200, 168, 120, 0.08);
 
426
  backdrop-filter: blur(24px) saturate(1.2);
427
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
428
  }
429
+
430
  .nav-scrolled {
431
+ box-shadow: 0 1px 0 rgba(200, 168, 120, 0.15), 0 4px 20px rgba(26, 16, 8, 0.06);
432
  }
433
+
434
  .nav-link {
435
  position: relative;
436
  color: var(--color-coffee-700);
 
439
  padding: 0.4rem 0;
440
  transition: color 0.3s ease;
441
  }
442
+
443
  .nav-link::after {
444
  content: '';
445
  position: absolute;
 
451
  border-radius: 1px;
452
  transition: width 0.35s var(--ease-smooth);
453
  }
454
+
455
  .nav-link:hover {
456
  color: var(--color-coffee-900);
457
  }
458
+
459
  .nav-link:hover::after {
460
  width: 100%;
461
  }
 
479
  visibility: hidden;
480
  transition: opacity 0.4s ease, visibility 0.4s ease;
481
  }
482
+
483
  .mobile-menu.open {
484
  opacity: 1;
485
  visibility: visible;
486
  }
487
+
488
  .mobile-menu a {
489
  font-family: 'Playfair Display', serif;
490
  font-size: 1.75rem;
 
493
  transform: translateY(12px);
494
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
495
  }
496
+
497
  .mobile-menu.open a {
498
  opacity: 1;
499
  transform: translateY(0);
500
  }
501
+
502
+ .mobile-menu.open a:nth-child(1) {
503
+ transition-delay: 0.1s;
504
+ }
505
+
506
+ .mobile-menu.open a:nth-child(2) {
507
+ transition-delay: 0.15s;
508
+ }
509
+
510
+ .mobile-menu.open a:nth-child(3) {
511
+ transition-delay: 0.2s;
512
+ }
513
+
514
+ .mobile-menu.open a:nth-child(4) {
515
+ transition-delay: 0.25s;
516
+ }
517
+
518
+ .mobile-menu.open a:nth-child(5) {
519
+ transition-delay: 0.3s;
520
+ }
521
+
522
+ .mobile-menu.open a:nth-child(6) {
523
+ transition-delay: 0.35s;
524
+ }
525
+
526
+ .mobile-menu.open a:nth-child(7) {
527
+ transition-delay: 0.4s;
528
+ }
529
+
530
  .mobile-menu a:hover {
531
  color: var(--color-coffee-500);
532
  }
 
544
  background: rgba(250, 246, 239, 0.92);
545
  backdrop-filter: blur(20px);
546
  -webkit-backdrop-filter: blur(20px);
547
+ border-top: 1px solid rgba(200, 168, 120, 0.15);
548
  transform: translateY(100%);
549
  transition: transform 0.5s var(--ease-smooth);
550
  }
551
+
552
  .sticky-bar.visible {
553
  transform: translateY(0);
554
  }
 
559
  .form-input {
560
  width: 100%;
561
  padding: 0.85rem 1.1rem;
562
+ border: 1.5px solid rgba(200, 168, 120, 0.2);
563
  border-radius: 14px;
564
  background: #fff;
565
  color: var(--color-coffee-800);
 
568
  transition: all 0.3s var(--ease-smooth);
569
  outline: none;
570
  }
571
+
572
  .form-input::placeholder {
573
  color: var(--color-coffee-300);
574
  }
575
+
576
  .form-input:hover {
577
+ border-color: rgba(200, 168, 120, 0.4);
578
  }
579
+
580
  .form-input:focus {
581
  border-color: var(--color-coffee-400);
582
+ box-shadow: 0 0 0 4px rgba(200, 168, 120, 0.12);
583
  }
584
+
585
  .form-label {
586
  display: block;
587
  font-size: 0.78rem;
 
608
  transition: all 0.35s var(--ease-smooth);
609
  white-space: nowrap;
610
  }
611
+
612
  .menu-tab:hover {
613
+ background: rgba(200, 168, 120, 0.08);
614
  color: var(--color-coffee-700);
615
  }
616
+
617
  .menu-tab.active {
618
  background: var(--color-coffee-800);
619
  color: #fff;
620
  border-color: var(--color-coffee-800);
621
+ box-shadow: 0 4px 14px rgba(62, 43, 24, 0.2);
622
  }
623
 
624
  /* =========================================
 
630
  grid-auto-rows: 200px;
631
  gap: 10px;
632
  }
633
+
634
  @media (max-width: 1024px) {
635
+ .gallery-masonry {
636
+ grid-template-columns: repeat(3, 1fr);
637
+ }
638
  }
639
+
640
  @media (max-width: 640px) {
641
+ .gallery-masonry {
642
+ grid-template-columns: repeat(2, 1fr);
643
+ }
644
  }
645
+
646
  .gallery-item {
647
  position: relative;
648
  border-radius: 16px;
 
650
  cursor: pointer;
651
  box-shadow: var(--shadow-card);
652
  }
653
+
654
  .gallery-item img {
655
  width: 100%;
656
  height: 100%;
657
  object-fit: cover;
658
  transition: transform 0.7s var(--ease-smooth), filter 0.5s ease;
659
  }
660
+
661
  .gallery-item:hover img {
662
  transform: scale(1.08);
663
  filter: brightness(1.05);
664
  }
665
+
666
  .gallery-item .gallery-overlay {
667
  position: absolute;
668
  inset: 0;
669
+ background: linear-gradient(to top, rgba(26, 16, 8, 0.6) 0%, transparent 60%);
670
  opacity: 0;
671
  transition: opacity 0.4s ease;
672
  display: flex;
673
  align-items: flex-end;
674
  padding: 1rem;
675
  }
676
+
677
  .gallery-item:hover .gallery-overlay {
678
  opacity: 1;
679
  }
680
+
681
+ .gallery-item.tall {
682
+ grid-row: span 2;
683
+ }
684
+
685
+ .gallery-item.wide {
686
+ grid-column: span 2;
687
+ }
688
 
689
  /* =========================================
690
  LIGHTBOX
 
702
  visibility: hidden;
703
  transition: opacity 0.4s ease, visibility 0.4s ease;
704
  }
705
+
706
  .lightbox.open {
707
  opacity: 1;
708
  visibility: visible;
709
  }
710
+
711
  .lightbox img {
712
  max-width: 90vw;
713
  max-height: 85vh;
 
716
  transform: scale(0.92);
717
  transition: transform 0.5s var(--ease-smooth);
718
  }
719
+
720
  .lightbox.open img {
721
  transform: scale(1);
722
  }
 
728
  background: #fff;
729
  border-radius: 20px;
730
  padding: 2rem;
731
+ border: 1px solid rgba(200, 168, 120, 0.1);
732
  box-shadow: var(--shadow-card);
733
  transition: all 0.5s var(--ease-smooth);
734
  }
735
+
736
  .testimonial-card:hover {
737
  transform: translateY(-4px);
738
  box-shadow: var(--shadow-card-hover);
 
752
  transition: all 0.5s var(--ease-bounce-soft);
753
  position: relative;
754
  }
755
+
756
  .loyalty-stamp.filled {
757
  background: var(--color-coffee-800);
758
  border-color: var(--color-coffee-800);
759
+ box-shadow: 0 4px 14px rgba(62, 43, 24, 0.25);
760
  animation: stampPop 0.5s var(--ease-bounce-soft);
761
  }
762
+
763
  @keyframes stampPop {
764
+ 0% {
765
+ transform: scale(0.5);
766
+ }
767
+
768
+ 60% {
769
+ transform: scale(1.15);
770
+ }
771
+
772
+ 100% {
773
+ transform: scale(1);
774
+ }
775
  }
776
 
777
  /* =========================================
 
783
  padding: 1rem;
784
  margin: -1rem;
785
  }
786
+
787
  .feature-row:hover {
788
+ background: rgba(200, 168, 120, 0.05);
789
  }
790
 
791
  /* =========================================
 
794
  .ambience-img {
795
  border-radius: 24px;
796
  overflow: hidden;
797
+ box-shadow: 0 20px 60px rgba(26, 16, 8, 0.15);
798
  position: relative;
799
  }
800
+
801
  .ambience-img::after {
802
  content: '';
803
  position: absolute;
804
  inset: 0;
805
  border-radius: 24px;
806
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
807
  pointer-events: none;
808
  }
809
 
810
  /* =========================================
811
  RATING STARS
812
  ========================================= */
813
+ .star-filled {
814
+ color: #c9964b;
815
+ }
816
+
817
+ .star-empty {
818
+ color: var(--color-coffee-200);
819
+ }
820
 
821
  /* =========================================
822
  MAP CONTAINER
 
827
  box-shadow: var(--shadow-card);
828
  position: relative;
829
  }
830
+
831
  .map-container::after {
832
  content: '';
833
  position: absolute;
834
  inset: 0;
835
  border-radius: 24px;
836
+ box-shadow: inset 0 0 0 1px rgba(200, 168, 120, 0.15);
837
  pointer-events: none;
838
  }
839
 
 
845
  justify-content: space-between;
846
  align-items: center;
847
  padding: 0.7rem 0;
848
+ border-bottom: 1px solid rgba(200, 168, 120, 0.12);
849
  transition: background 0.3s ease;
850
  }
851
+
852
  .hours-row:last-child {
853
  border-bottom: none;
854
  }
855
+
856
  .hours-row:hover {
857
+ background: rgba(200, 168, 120, 0.04);
858
  margin: 0 -0.75rem;
859
  padding-left: 0.75rem;
860
  padding-right: 0.75rem;
 
878
  left: 0;
879
  right: 0;
880
  height: 40%;
881
+ background: linear-gradient(to top, rgba(250, 246, 239, 1) 0%, transparent 100%);
882
  z-index: 2;
883
  pointer-events: none;
884
  }
 
905
  right: 0;
906
  line-height: 0;
907
  }
908
+
909
  .curve-bottom {
910
  position: absolute;
911
  bottom: -1px;
 
914
  line-height: 0;
915
  transform: rotate(180deg);
916
  }
917
+
918
+ /* =========================================
919
+ MENU ITEM CARD
920
+ ========================================= */
921
+ .menu-item-card {
922
+ display: flex;
923
+ gap: 1rem;
924
+ padding: 1.25rem;
925
+ background: #fff;
926
+ border-radius: 16px;
927
+ border: 1px solid rgba(200, 168, 120, 0.1);
928
+ transition: all 0.4s var(--ease-smooth);
929
+ }
930
+
931
+ .menu-item-card:hover {
932
+ box-shadow: var(--shadow-card-hover);
933
+ transform: translateY(-3px);
934
+ border-color: rgba(200, 168, 120, 0.2);
935
+ }
936
+
937
+ .menu-item-img {
938
+ width: 80px;
939
+ height: 80px;
940
+ border-radius: 12px;
941
+ object-fit: cover;
942
+ flex-shrink: 0;
943
+ }
944
+
945
+ /* =========================================
946
+ MARQUEE ANIMATION
947
+ ========================================= */
948
+ .marquee-track {
949
+ display: flex;
950
+ gap: 2rem;
951
+ animation: marquee 30s linear infinite;
952
+ }
953
+
954
+ .marquee-track:hover {
955
+ animation-play-state: paused;
956
+ }
957
+
958
+ @keyframes marquee {
959
+ 0% {
960
+ transform: translateX(0);
961
+ }
962
+
963
+ 100% {
964
+ transform: translateX(-50%);
965
+ }
966
+ }
967
+
968
+ /* =========================================
969
+ STORY TIMELINE
970
+ ========================================= */
971
+ .timeline-line {
972
+ position: absolute;
973
+ left: 24px;
974
+ top: 0;
975
+ bottom: 0;
976
+ width: 2px;
977
+ background: linear-gradient(to bottom, var(--color-coffee-300), var(--color-coffee-200));
978
+ }
979
+
980
+ .timeline-dot {
981
+ width: 16px;
982
+ height: 16px;
983
+ border-radius: 50%;
984
+ background: var(--color-coffee-800);
985
+ border: 3px solid var(--color-cream);
986
+ box-shadow: 0 0 0 3px var(--color-coffee-200);
987
+ position: relative;
988
+ z-index: 1;
989
+ flex-shrink: 0;
990
+ }
991
+
992
+ /* =========================================
993
+ STATS COUNTER
994
+ ========================================= */
995
+ .stat-number {
996
+ font-family: 'Playfair Display', serif;
997
+ font-size: 3rem;
998
+ font-weight: 600;
999
+ color: var(--color-coffee-800);
1000
+ line-height: 1;
1001
+ }
1002
+
1003
+ /* =========================================
1004
+ FOOTER LINKS
1005
+ ========================================= */
1006
+ .footer-link {
1007
+ color: var(--color-coffee-400);
1008
+ transition: color 0.3s ease, transform 0.3s ease;
1009
+ display: inline-block;
1010
+ }
1011
+
1012
+ .footer-link:hover {
1013
+ color: var(--color-coffee-600);
1014
+ transform: translateX(4px);
1015
+ }
1016
+
1017
+ /* =========================================
1018
+ SOCIAL ICON
1019
+ ========================================= */
1020
+ .social-icon {
1021
+ width: 40px;
1022
+ height: 40px;
1023
+ border-radius: 12px;
1024
+ display: flex;
1025
+ align-items: center;
1026
+ justify-content: center;
1027
+ background: rgba(200, 168, 120, 0.1);
1028
+ color: var(--color-coffee-600);
1029
+ transition: all 0.4s var(--ease-smooth);
1030
+ }
1031
+
1032
+ .social-icon:hover {
1033
+ background: var(--color-coffee-800);
1034
+ color: #fff;
1035
+ transform: translateY(-3px);
1036
+ }
1037
  </style>
1038
  </head>
1039
+
1040
  <body>
1041
  <!-- Subtle Noise Texture -->
1042
  <div class="noise-overlay"></div>
 
1049
  <nav class="flex items-center justify-between h-[70px]">
1050
  <!-- Logo -->
1051
  <a href="#home" class="flex items-center gap-2.5 group">
1052
+ <div
1053
+ 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">
1054
  <i data-lucide="coffee" class="w-[18px] h-[18px] text-cream-100"></i>
1055
  </div>
1056
  <span class="font-serif text-xl font-semibold text-coffee-900 tracking-tight">Aroma House</span>
1057
  </a>
1058
+
1059
  <!-- Desktop Nav -->
1060
  <div class="hidden lg:flex items-center gap-7">
1061
  <a href="#home" class="nav-link">Home</a>
 
1066
  <a href="#location" class="nav-link">Location</a>
1067
  <a href="#contact" class="nav-link">Contact</a>
1068
  </div>
1069
+
1070
  <!-- CTA + Mobile Toggle -->
1071
  <div class="flex items-center gap-3">
1072
  <a href="#reservations" class="hidden sm:inline-flex btn-primary text-sm py-2.5 px-5">
 
1105
  <div class="hero-video-wrapper">
1106
  <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">
1107
  </div>
1108
+
1109
  <!-- Animated gradient at bottom -->
1110
  <div class="hero-gradient-animated"></div>
1111
+
1112
  <div class="relative z-10 max-w-5xl mx-auto px-5 sm:px-8 text-center pt-20 pb-32">
1113
+ <div
1114
+ 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"
1115
+ style="animation-delay: 0.2s;">
1116
  <i data-lucide="sparkles" class="w-3.5 h-3.5 text-amber-warm"></i>
1117
  <span class="text-white/90 text-xs font-medium tracking-wide">Crafted with care since 2018</span>
1118
  </div>
1119
+
1120
+ <h1
1121
+ 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"
1122
+ style="animation-delay: 0.3s; text-shadow: 0 4px 30px rgba(0,0,0,0.3);">
1123
+ Relax, Connect, and<br class="hidden sm:block"> Enjoy Coffee
1124
+ <em class="text-amber-warm not-italic">Together</em>
1125
  </h1>
1126
+
1127
+ <p class="text-base sm:text-lg text-white/75 max-w-2xl mx-auto mb-10 leading-relaxed animate-fade-up text-balance"
1128
+ style="animation-delay: 0.5s; text-shadow: 0 2px 10px rgba(0,0,0,0.2);">
1129
+ A cozy coffee space for meaningful conversations, quiet work sessions, weekend moments, and handcrafted coffee —
1130
+ shared with people you care about.
1131
  </p>
1132
+
1133
+ <div class="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-up"
1134
+ style="animation-delay: 0.7s;">
1135
  <a href="#reservations" class="btn-primary text-base py-3.5 px-8">
1136
  <span>Reserve a Table</span>
1137
  <i data-lucide="calendar" class="w-4 h-4"></i>
1138
  </a>
1139
+ <a href="#menu"
1140
+ class="btn-secondary text-base py-3.5 px-8 border-white/30 text-white hover:bg-white/10 hover:border-white/50">
1141
  <span>View Menu</span>
1142
  <i data-lucide="utensils" class="w-4 h-4"></i>
1143
  </a>
1144
  </div>
1145
+
1146
  <!-- Trust indicators -->
1147
+ <div class="flex flex-wrap items-center justify-center gap-5 sm:gap-8 mt-14 animate-fade-up"
1148
+ style="animation-delay: 0.9s;">
1149
  <div class="flex items-center gap-2">
1150
  <div class="w-8 h-8 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center">
1151
  <i data-lucide="leaf" class="w-3.5 h-3.5 text-sage-300"></i>
 
1181
  <div class="max-w-6xl mx-auto">
1182
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
1183
  <div class="card-luxe p-6 text-center reveal reveal-delay-1 group cursor-default">
1184
+ <div
1185
+ 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">
1186
  <i data-lucide="sunrise" class="w-5 h-5 text-coffee-600"></i>
1187
  </div>
1188
  <h3 class="font-serif text-lg font-medium text-coffee-800 mb-1.5">Morning Ritual</h3>
1189
  <p class="text-xs text-coffee-500 leading-relaxed">Start your day with a perfect pour-over before work.</p>
1190
  </div>
1191
  <div class="card-luxe p-6 text-center reveal reveal-delay-2 group cursor-default">
1192
+ <div
1193
+ class="w-12 h-12 rounded-2xl bg-sage-100 flex items-center justify-center mx-auto mb-4 transition-transform duration-500 group-hover:scale-110 group-hover:rotate-6">
1194
+ <i data-lucide="laptop" class="w-5 h-5 text-sage-500"></i>
1195
+ </div>
1196
+ <h3 class="font-serif text-lg font-medium text-coffee-800 mb-1.5">Work & Focus</h3>
1197
+ <p class="text-xs text-coffee-500 leading-relaxed">Quiet corners with power outlets and strong Wi-Fi.</p>
1198
+ </div>
1199
+ <div class="card-luxe p-6 text-center reveal reveal-delay-3 group cursor-default">
1200
+ <div
1201
+ class="w-12 h-12 rounded-2xl bg-amber-100 flex items-center justify-center mx-auto mb-4 transition-transform duration-500 group-hover:scale-110 group-hover:rotate-6">