restaurant cafe coffee modern gallery reviews newsletter modern
Restaurant Cafe
Modern neighborhood cafe page with menu highlights, gallery, reviews, and newsletter signup.
modern Responsive
Live Preview
Sections
navbarheromenu-highlightsgalleryreviewsvisitnewsletterfooter
Patterns used
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Daily Grind — Modern Cafe</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://webspire.de/webspire-tokens.css">
<link rel="stylesheet" href="https://webspire.de/webspire-components.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
/* Brand tokens — warm cozy café: coffee oranges, cream amber */
:root {
--ws-color-accent: oklch(0.47 0.14 40); /* orange-700 */
--ws-color-accent-hover: oklch(0.52 0.14 40); /* orange-600 */
--ws-color-accent-subtle: oklch(0.96 0.04 80); /* amber-50 */
--ws-color-surface: oklch(1 0 0);
--ws-color-surface-alt: oklch(0.97 0.03 80); /* amber-50 */
--ws-color-text: oklch(0.22 0.03 50); /* orange-900 */
--ws-color-text-muted: oklch(0.45 0.02 60); /* stone-600 */
}
/* hover-lift snippet */
.hover-lift {
--lift-distance: -4px;
--lift-shadow: 0 8px 24px oklch(0 0 0 / 0.12);
--lift-duration: 0.25s;
transition:
transform var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1),
box-shadow var(--lift-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
transform: translateY(var(--lift-distance));
box-shadow: var(--lift-shadow);
}
@media (prefers-reduced-motion: reduce) {
.hover-lift { transition: none; }
}
</style>
</head>
<body class="bg-amber-50 text-stone-900 antialiased">
<!-- Navbar -->
<nav class="ws-navbar sticky top-0 z-50 bg-white/90 backdrop-blur-sm border-b border-amber-100" aria-label="Main navigation">
<div class="max-w-6xl mx-auto flex items-center justify-between px-4 sm:px-6 py-4">
<a href="#" class="text-xl font-bold tracking-tight text-orange-900">The Daily Grind <span class="text-orange-400">●</span></a>
<ul class="hidden md:flex items-center gap-8 text-sm text-stone-600">
<li><a href="#highlights" class="hover:text-orange-700 transition-colors">Menu</a></li>
<li><a href="#gallery" class="hover:text-orange-700 transition-colors">Gallery</a></li>
<li><a href="#reviews" class="hover:text-orange-700 transition-colors">Reviews</a></li>
<li><a href="#visit" class="hover:text-orange-700 transition-colors">Visit Us</a></li>
</ul>
<a href="#visit" class="hidden sm:inline-flex px-5 py-2 text-sm font-medium text-white bg-orange-700 rounded-full hover:bg-orange-600 transition-colors">Find Us</a>
<button class="md:hidden p-2 text-stone-600" aria-label="Open menu">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
</nav>
<!-- Hero -->
<section class="ws-hero py-24 sm:py-32 px-4 text-center">
<div class="max-w-3xl mx-auto">
<p class="text-orange-700 text-sm font-medium uppercase tracking-widest mb-4">Coffee · Pastries · Community</p>
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6">Your Favorite Neighborhood Cafe</h1>
<p class="text-stone-600 text-lg sm:text-xl max-w-xl mx-auto mb-10 leading-relaxed">Specialty coffee, house-baked pastries, and wholesome food made with love. Open daily from 7am.</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a href="#highlights" class="px-8 py-3.5 text-sm font-semibold text-white bg-orange-700 rounded-full hover:bg-orange-600 transition-colors">See Our Menu</a>
<a href="#newsletter" class="px-8 py-3.5 text-sm font-semibold text-orange-800 bg-orange-100 rounded-full hover:bg-orange-200 transition-colors">Get Weekly Specials</a>
</div>
</div>
</section>
<!-- Menu Highlights -->
<section id="highlights" class="ws-cards py-24 px-4 bg-white">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<p class="text-orange-700 text-sm font-medium uppercase tracking-widest mb-3">Featured</p>
<h2 class="text-3xl sm:text-4xl font-bold">Menu Highlights</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="hover-lift group bg-amber-50 rounded-2xl overflow-hidden">
<div class="aspect-[4/3] bg-gradient-to-br from-orange-200 to-amber-100 flex items-center justify-center">
<span class="text-orange-400 text-sm">Coffee Photo</span>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-2">
<h3 class="font-semibold text-lg">Signature Flat White</h3>
<span class="text-orange-700 font-semibold">$5.50</span>
</div>
<p class="text-stone-500 text-sm leading-relaxed">Double ristretto with velvety steamed milk. Our single-origin beans are roasted in-house weekly.</p>
</div>
</div>
<div class="hover-lift group bg-amber-50 rounded-2xl overflow-hidden">
<div class="aspect-[4/3] bg-gradient-to-br from-yellow-200 to-orange-100 flex items-center justify-center">
<span class="text-orange-400 text-sm">Pastry Photo</span>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-2">
<h3 class="font-semibold text-lg">Almond Croissant</h3>
<span class="text-orange-700 font-semibold">$4.80</span>
</div>
<p class="text-stone-500 text-sm leading-relaxed">Flaky butter croissant filled with frangipane cream, topped with sliced almonds and powdered sugar.</p>
</div>
</div>
<div class="hover-lift group bg-amber-50 rounded-2xl overflow-hidden">
<div class="aspect-[4/3] bg-gradient-to-br from-green-100 to-amber-100 flex items-center justify-center">
<span class="text-orange-400 text-sm">Bowl Photo</span>
</div>
<div class="p-6">
<div class="flex items-center justify-between mb-2">
<h3 class="font-semibold text-lg">Acai Power Bowl</h3>
<span class="text-orange-700 font-semibold">$12.50</span>
</div>
<p class="text-stone-500 text-sm leading-relaxed">Organic acai blended with banana, topped with granola, fresh berries, coconut flakes, and honey.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery" class="ws-gallery py-24 px-4">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<p class="text-orange-700 text-sm font-medium uppercase tracking-widest mb-3">Life at the Grind</p>
<h2 class="text-3xl sm:text-4xl font-bold">Gallery</h2>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">
<div class="aspect-square bg-gradient-to-br from-orange-200 to-amber-100 rounded-xl flex items-center justify-center"><span class="text-orange-400 text-xs">Photo 1</span></div>
<div class="aspect-square bg-gradient-to-br from-amber-200 to-yellow-100 rounded-xl flex items-center justify-center"><span class="text-orange-400 text-xs">Photo 2</span></div>
<div class="aspect-square bg-gradient-to-br from-yellow-200 to-orange-100 rounded-xl flex items-center justify-center"><span class="text-orange-400 text-xs">Photo 3</span></div>
<div class="aspect-square bg-gradient-to-br from-stone-200 to-orange-100 rounded-xl flex items-center justify-center"><span class="text-orange-400 text-xs">Photo 4</span></div>
<div class="aspect-square bg-gradient-to-br from-orange-100 to-red-100 rounded-xl flex items-center justify-center"><span class="text-orange-400 text-xs">Photo 5</span></div>
<div class="aspect-square bg-gradient-to-br from-amber-100 to-stone-200 rounded-xl flex items-center justify-center"><span class="text-orange-400 text-xs">Photo 6</span></div>
</div>
</div>
</section>
<!-- Reviews -->
<section id="reviews" class="ws-testimonials py-24 px-4 bg-white">
<div class="max-w-6xl mx-auto">
<div class="text-center mb-16">
<p class="text-orange-700 text-sm font-medium uppercase tracking-widest mb-3">Kind Words</p>
<h2 class="text-3xl sm:text-4xl font-bold">What Our Guests Say</h2>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="p-6 bg-amber-50 rounded-2xl">
<div class="flex gap-1 text-orange-400 mb-4" aria-label="5 stars">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-stone-600 text-sm leading-relaxed mb-4">"Best flat white in the city, hands down. The almond croissant is life-changing. We come here every Saturday morning."</p>
<p class="font-medium text-sm">Sarah M.</p>
<p class="text-stone-400 text-xs">Regular since 2023</p>
</div>
<div class="p-6 bg-amber-50 rounded-2xl">
<div class="flex gap-1 text-orange-400 mb-4" aria-label="5 stars">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-stone-600 text-sm leading-relaxed mb-4">"Finally a cafe that gets it right — great wifi, friendly staff, and the brunch menu is incredible. My go-to remote work spot."</p>
<p class="font-medium text-sm">James K.</p>
<p class="text-stone-400 text-xs">Google Review</p>
</div>
<div class="p-6 bg-amber-50 rounded-2xl">
<div class="flex gap-1 text-orange-400 mb-4" aria-label="5 stars">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
</div>
<p class="text-stone-600 text-sm leading-relaxed mb-4">"The attention to detail here is amazing. From the latte art to the house-made syrups. It's more than a cafe, it's an experience."</p>
<p class="font-medium text-sm">Mia L.</p>
<p class="text-stone-400 text-xs">Yelp Review</p>
</div>
</div>
</div>
</section>
<!-- Visit Us -->
<section id="visit" class="ws-contact py-24 px-4">
<div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center">
<div>
<p class="text-orange-700 text-sm font-medium uppercase tracking-widest mb-3">Come Say Hello</p>
<h2 class="text-3xl sm:text-4xl font-bold mb-8">Visit Us</h2>
<div class="space-y-6 text-stone-600">
<div>
<h3 class="font-semibold text-stone-900 mb-1">Location</h3>
<p>128 Market Street<br>Portland, OR 97201</p>
</div>
<div>
<h3 class="font-semibold text-stone-900 mb-1">Hours</h3>
<p>Monday – Friday: 7:00am – 6:00pm<br>Saturday – Sunday: 8:00am – 5:00pm</p>
</div>
<div>
<h3 class="font-semibold text-stone-900 mb-1">Contact</h3>
<p>(503) 555-0142<br>hello@thedailygrind.com</p>
</div>
</div>
</div>
<div class="aspect-[4/3] bg-gradient-to-br from-orange-200 to-amber-100 rounded-2xl flex items-center justify-center">
<span class="text-orange-400 text-sm">Map / Location Image</span>
</div>
</div>
</section>
<!-- Newsletter -->
<section id="newsletter" class="ws-newsletter py-24 px-4 bg-orange-700 text-white">
<div class="max-w-xl mx-auto text-center">
<h2 class="text-3xl sm:text-4xl font-bold mb-4">Stay in the Loop</h2>
<p class="text-orange-100 mb-8">Get weekly specials, seasonal menu updates, and event invites delivered to your inbox.</p>
<form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
<label for="email" class="sr-only">Email address</label>
<input id="email" type="email" placeholder="your@email.com" required class="flex-1 px-4 py-3 rounded-full text-stone-900 text-sm placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-orange-300" />
<button type="submit" class="px-6 py-3 text-sm font-semibold bg-stone-900 text-white rounded-full hover:bg-stone-800 transition-colors">Subscribe</button>
</form>
<p class="text-orange-200 text-xs mt-4">No spam, ever. Unsubscribe anytime.</p>
</div>
</section>
<!-- Footer -->
<footer class="ws-footer bg-stone-900 py-12 px-4">
<div class="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-6">
<a href="#" class="text-lg font-bold text-white">The Daily Grind</a>
<div class="flex gap-6">
<a href="#" class="text-stone-400 hover:text-orange-400 transition-colors" aria-label="Instagram">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/></svg>
</a>
<a href="#" class="text-stone-400 hover:text-orange-400 transition-colors" aria-label="TikTok">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
</a>
</div>
<p class="text-stone-500 text-sm">© 2026 The Daily Grind. All rights reserved.</p>
</div>
</footer>
</body>
</html>Warm, inviting modern cafe template with bright amber tones. Features menu highlights with pricing, a 6-image gallery grid, customer reviews with star ratings, location details, and a newsletter signup section.