PromptBase
Upgrade
Close icon
General
Home
Marketplace
Create
Hire
Login
Chat
Sell
Explore

Prompt Details

Model
(claude-5-opus)
Token size
1,801
Example input
[shop_info]: Shop name: Lumen Coffee. Business type: Specialty coffee shop / roastery. Slogan: "Coffee, distilled." Description: Small-batch coffee roaster that buys direct from farmers in Đắk Lắk and Sơn La, roasts in-house every week, and brews each cup slowly. Target customers: office workers and remote workers, 22–40 years old. Address: 14 Tràng Tiền, Hoàn Kiếm, Hà Nội, Vietnam. Phone/WhatsApp: +84 24 3823 5566. Email: hello@lumencoffee.vn. Hours: every day, 7:00 AM – 7:00 PM. Social media: Instagram, Facebook. Google Maps: link to 14 Tràng Tiền, Hoàn Kiếm, Hà Nội. [design_style]: Main color palette: warm off-white, near-black, and a cobalt blue accent (instead of the usual coffee brown). Overall style: modern, minimalist. Fonts: Instrument Sans for headings, Inter for body text. Existing logo: no, design a simple text-based wordmark ("Lumen"). Design inspiration: Blue Bottle Coffee, Onyx Coffee Lab. [products_and_reviews]: Products: Classic Phin Drip 45,000₫; Egg Coffee 55,000₫; Coconut Cold Brew 60,000₫; Single-Origin Pour Over 65,000₫; Oat Milk Flat White 58,000₫; Cascara Fizz 50,000₫; Ethiopian Yirgacheffe 250g 175,000₫; House Blend 250g 140,000₫. Reviews: "The egg coffee here ruined every other version I've had" – Minh Anh, 5 stars. "Bought a bag of the Yirgacheffe on a whim, now I drive across town for it" – James Carter, 5 stars. "Quiet upstairs floor, strong coffee, staff remember my order" – Thu Trang, 5 stars. [tone_language]: Language: English. Tone: friendly and approachable. [extras]: Add a QR code bank-transfer button next to the contact form for pickup orders.
Example output
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Lumen Coffee — Specialty Coffee Roaster, Hanoi</title> <meta name="description" content="Lumen Coffee is a small-batch specialty coffee roaster in Hoàn Kiếm, Hanoi. Direct-trade beans, roasted weekly, brewed slow. Open daily 7am–7pm."> <meta property="og:title" content="Lumen Coffee — Specialty Coffee Roaster, Hanoi"> <meta property="og:description" content="Small-batch coffee, roasted weekly in Hanoi. Direct-trade beans, honest prices, a quiet place to sit."> <meta property="og:type" content="website"> <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>☕</text></svg>"> <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=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> <style> /* ============ DESIGN TOKENS ============ */ :root{ --paper: #F7F5F0; --paper-raised: #FFFFFF; --ink: #17140F; --ink-soft: #5C564A; --ink-faint: #8A8375; --accent: #2A4360; --accent-tint: #E7EDF2; --line: #E1DCD1; --radius: 4px; --radius-lg: 10px; --maxw: 1180px; --font-head: "Instrument Sans", sans-serif; --font-body: "Inter", sans-serif; } *{ box-sizing: border-box; margin:0; padding:0; } html{ scroll-behavior: smooth; } body{ font-family: var(--font-body); color: var(--ink); background: var(--paper); line-height: 1.55; -webkit-font-smoothing: antialiased; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } button{ font-family: inherit; cursor:pointer; border:none; background:none; } ul{ list-style:none; } .wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } section{ padding: 96px 0; } @media (max-width: 720px){ section{ padding: 64px 0; } } h1,h2,h3,h4{ font-family: var(--font-head); font-weight: 600; line-height: 1.12; letter-spacing: -0.01em; } .eyebrow{ display:block; font-size: 0.85rem; color: var(--accent); font-weight: 600; margin-bottom: 12px; } .section-head{ max-width: 560px; margin-bottom: 48px; } .section-head h2{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 14px; } .section-head p{ color: var(--ink-soft); font-size: 1.05rem; max-width: 46ch; } .btn{ display:inline-flex; align-items:center; gap:8px; padding: 13px 26px; border-radius: var(--radius); font-weight: 600; font-size: 0.95rem; transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease; } .btn-primary{ background: var(--accent); color: #fff; } .btn-primary:hover{ transform: translateY(-2px); background:#1F334A; } .btn-outline{ border: 1.5px solid var(--ink); color: var(--ink); } .btn-outline:hover{ border-color: var(--accent); color: var(--accent); } @media (prefers-reduced-motion: reduce){ .btn-primary:hover{ transform:none; } html{ scroll-behavior:auto; } } /* ============ HEADER ============ */ header{ position: sticky; top:0; z-index: 100; background: rgba(247,245,240,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); } .nav{ display:flex; align-items:center; justify-content:space-between; padding: 18px 24px; max-width: var(--maxw); margin:0 auto; } .logo{ font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.01em; } .logo span{ color: var(--accent); } .nav-links{ display:flex; align-items:center; gap: 34px; } .nav-links a{ font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); transition: color .15s ease; } .nav-links a:hover{ color: var(--ink); } .nav-cta{ display:flex; align-items:center; gap:22px; } .hamburger{ display:none; flex-direction:column; gap:5px; padding:6px; } .hamburger span{ width:22px; height:2px; background: var(--ink); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .hamburger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .hamburger.active span:nth-child(2){ opacity:0; } .hamburger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } @media (max-width: 880px){ .nav-links{ position:absolute; top:100%; left:0; right:0; background: var(--paper-raised); flex-direction:column; align-items:flex-start; gap:0; max-height:0; overflow:hidden; border-bottom: 1px solid var(--line); transition: max-height .25s ease; } .nav-links.open{ max-height: 320px; } .nav-links a{ padding: 16px 24px; width:100%; border-top: 1px solid var(--line); } .nav-cta .btn-primary{ display:none; } .hamburger{ display:flex; } } /* ============ HERO ============ */ .hero{ padding: 64px 0 96px; overflow:hidden; } .hero .wrap{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; } .hero-copy h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); margin-bottom: 20px; } .hero-copy .reveal-line{ display:block; overflow:hidden; } .hero-copy .reveal-line span{ display:block; transform: translateY(110%); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; } .hero-copy .reveal-line:nth-child(1) span{ animation-delay: .05s; } .hero-copy .reveal-line:nth-child(2) span{ animation-delay: .16s; } @keyframes rise{ to{ transform: translateY(0); } } @media (prefers-reduced-motion: reduce){ .hero-copy .reveal-line span{ animation:none; transform:none; } } .hero-tagline{ font-style: italic; font-family: var(--font-head); font-size: 1.15rem; color: var(--accent); margin-bottom: 20px; } .hero-copy p{ color: var(--ink-soft); font-size: 1.08rem; max-width: 46ch; margin-bottom: 32px; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; } .hero-img{ position:relative; border-radius: var(--radius-lg); overflow:hidden; aspect-ratio: 4/5; } .hero-img img{ width:100%; height:100%; object-fit:cover; } .hero-badge{ position:absolute; left:20px; bottom:20px; background: var(--paper-raised); padding: 14px 18px; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(23,20,15,.12); font-size: 0.85rem; max-width: 200px; } .hero-badge strong{ display:block; font-family: var(--font-head); font-size: 1.4rem; color: var(--accent); } @media (max-width: 880px){ .hero .wrap{ grid-template-columns: 1fr; } .hero-img{ order:-1; aspect-ratio: 16/10; } } /* ============ ABOUT ============ */ .about .wrap{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items:center; } .about-img{ border-radius: var(--radius-lg); overflow:hidden; } .about-img img{ width:100%; aspect-ratio: 5/6; object-fit:cover; } .about-copy p{ color: var(--ink-soft); margin-bottom: 18px; max-width: 52ch; } .stats{ display:flex; gap: 40px; margin-top: 32px; flex-wrap:wrap; } .stat strong{ display:block; font-family: var(--font-head); font-size: 2.1rem; color: var(--accent); } .stat span{ font-size: 0.88rem; color: var(--ink-faint); } @media (max-width: 880px){ .about .wrap{ grid-template-columns: 1fr; } } /* ============ PRODUCTS ============ */ .products-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .product-card{ background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); overflow:hidden; display:flex; flex-direction:column; transition: box-shadow .2s ease, transform .2s ease; } .product-card:hover{ box-shadow: 0 12px 28px rgba(23,20,15,.1); transform: translateY(-3px); } .product-card img{ aspect-ratio: 4/3; object-fit:cover; width:100%; } .product-body{ padding: 18px 20px 22px; display:flex; flex-direction:column; gap:8px; flex:1; } .product-body h3{ font-size: 1.05rem; } .product-body p{ color: var(--ink-soft); font-size: 0.9rem; flex:1; } .product-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:6px; } .price{ font-family: var(--font-head); font-weight: 700; color: var(--accent); } .order-link{ font-size: 0.85rem; font-weight: 600; border-bottom: 1.5px solid var(--ink); padding-bottom:1px; } .order-link:hover{ color: var(--accent); border-color: var(--accent); } @media (max-width: 980px){ .products-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .products-grid{ grid-template-columns: 1fr; } } /* ============ MENU / PRICING ============ */ .menu{ background: var(--paper-raised); } .menu-cols{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; } .menu-cat h3{ font-size: 1.1rem; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .menu-row{ display:flex; justify-content:space-between; gap:16px; padding: 12px 0; border-bottom: 1px dashed var(--line); } .menu-row:last-child{ border-bottom:none; } .menu-row-name{ font-weight:500; } .menu-row-desc{ color: var(--ink-faint); font-size: 0.85rem; margin-top:2px; } .menu-row-price{ font-family: var(--font-head); font-weight:700; white-space:nowrap; color: var(--accent); } @media (max-width: 720px){ .menu-cols{ grid-template-columns: 1fr; gap:36px; } } /* ============ WHY CHOOSE US ============ */ .why-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .why-card{ padding: 8px 0; } .why-icon{ width:44px; height:44px; border-radius: 50%; background: var(--accent-tint); display:flex; align-items:center; justify-content:center; margin-bottom: 18px; font-size:1.25rem; } .why-card h3{ font-size: 1.05rem; margin-bottom: 8px; } .why-card p{ color: var(--ink-soft); font-size: 0.92rem; } @media (max-width: 980px){ .why-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .why-grid{ grid-template-columns: 1fr; } } /* ============ TESTIMONIALS ============ */ .testi-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .testi-card{ background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display:flex; flex-direction:column; gap:14px; } .stars{ color: var(--accent); font-size: 0.95rem; letter-spacing: 2px; } .testi-card p{ color: var(--ink-soft); font-size: 0.95rem; } .testi-who{ display:flex; align-items:center; gap:12px; margin-top:auto; } .testi-who img{ width:40px; height:40px; border-radius:50%; object-fit:cover; } .testi-who strong{ display:block; font-size: 0.9rem; } .testi-who span{ font-size: 0.8rem; color: var(--ink-faint); } @media (max-width: 880px){ .testi-grid{ grid-template-columns: 1fr; } } /* ============ GALLERY ============ */ .gallery-grid{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 14px; } .gallery-grid a:nth-child(1){ grid-column: span 2; grid-row: span 2; } .gallery-grid a{ display:block; overflow:hidden; border-radius: var(--radius); position:relative; } .gallery-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; } .gallery-grid a:hover img{ transform: scale(1.06); } /* ============ PHOTO BAND ============ */ .photo-band{ padding: 0 0 96px; } .photo-band .wrap{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .photo-band a{ display:block; border-radius: var(--radius); overflow:hidden; aspect-ratio: 4/5; } .photo-band img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; } .photo-band a:hover img{ transform: scale(1.05); } @media (max-width: 720px){ .photo-band .wrap{ grid-template-columns: 1fr 1fr; } .photo-band a:nth-child(3){ display:none; } } @media (max-width: 880px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; } .gallery-grid a:nth-child(1){ grid-column: span 2; grid-row: span 1; aspect-ratio: 2/1; height:auto; } } /* ============ FAQ ============ */ .faq{ background: var(--paper-raised); } .faq-list{ max-width: 720px; } .faq-item{ border-bottom: 1px solid var(--line); } .faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; padding: 22px 4px; text-align:left; font-family: var(--font-head); font-weight:600; font-size: 1.02rem; } .faq-q .plus{ font-size: 1.4rem; color: var(--accent); transition: transform .2s ease; flex-shrink:0; margin-left:16px; } .faq-item.open .faq-q .plus{ transform: rotate(45deg); } .faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; } .faq-a p{ color: var(--ink-soft); padding: 0 4px 22px; max-width: 60ch; } /* ============ CONTACT ============ */ .contact .wrap{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; } .form-group{ margin-bottom: 18px; } .form-group label{ display:block; font-size: 0.85rem; font-weight:600; margin-bottom: 6px; } .form-group input, .form-group textarea{ width:100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: var(--radius); font-family: inherit; font-size: 0.95rem; background: var(--paper-raised); color: var(--ink); } .form-group input:focus, .form-group textarea:focus{ outline: 2px solid var(--accent); outline-offset: 1px; } .form-group textarea{ resize: vertical; min-height: 110px; } .info-block{ margin-bottom: 28px; } .info-block h4{ font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 6px; font-weight:600; } .info-block p, .info-block a{ font-size: 1rem; } .map-frame{ width:100%; aspect-ratio: 16/10; border:0; border-radius: var(--radius-lg); overflow:hidden; margin-top: 8px; } .social-row{ display:flex; gap: 14px; margin-top: 20px; } .social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:1rem; transition: border-color .15s ease, color .15s ease; } .social-row a:hover{ border-color: var(--accent); color: var(--accent); } @media (max-width: 880px){ .contact .wrap{ grid-template-columns: 1fr; } } /* ============ FOOTER ============ */ footer{ background: var(--ink); color: #DAD5C8; padding: 64px 0 28px; } .footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; margin-bottom: 48px; } .footer-logo{ font-family: var(--font-head); font-weight:700; font-size: 1.3rem; color:#fff; margin-bottom: 14px; } .footer-grid p{ color: #A9A292; font-size: 0.92rem; max-width: 38ch; } .footer-col h4{ font-size: 0.85rem; color:#fff; margin-bottom: 16px; font-weight:600; } .footer-col ul li{ margin-bottom: 10px; } .footer-col a{ color: #A9A292; font-size: 0.92rem; } .footer-col a:hover{ color: #fff; } .footer-bottom{ border-top: 1px solid rgba(255,255,255,.1); padding-top: 24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size: 0.82rem; color: #8B8577; } @media (max-width: 720px){ .footer-grid{ grid-template-columns: 1fr; gap: 32px; } } /* ============ FLOATING BUTTONS ============ */ .floating{ position:fixed; right: 22px; bottom: 22px; display:flex; flex-direction:column; gap: 12px; z-index: 200; } .floating a{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size: 1.3rem; box-shadow: 0 8px 20px rgba(23,20,15,.22); transition: transform .15s ease; } .floating a:hover{ transform: scale(1.08); } .floating .call{ background: var(--accent); color:#fff; } .floating .whatsapp{ background: #25D366; color:#fff; } /* ============ SCROLL REVEAL (single subtle utility) ============ */ .fade-in{ opacity:0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; } .fade-in.in-view{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .fade-in{ opacity:1; transform:none; } } /* Visually hidden but accessible */ .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } /* Keyboard focus visibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } </style> </head> <body> <!-- ================= HEADER ================= --> <header> <nav class="nav"> <a href="#top" class="logo">Lumen<span>.</span></a> <ul class="nav-links" id="navLinks"> <li><a href="#about">About</a></li> <li><a href="#products">Menu</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#testimonials">Reviews</a></li> <li><a href="#contact">Contact</a></li> </ul> <div class="nav-cta"> <a href="#contact" class="btn btn-primary">Order ahead</a> <button class="hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false" aria-controls="navLinks"> <span></span><span></span><span></span> </button> </div> </nav> </header> <!-- ================= HERO ================= --> <section class="hero" id="top"> <div class="wrap"> <div class="hero-copy"> <h1> <span class="reveal-line"><span>Coffee,</span></span> <span class="reveal-line"><span>distilled.</span></span> </h1> <p class="hero-tagline">Small-batch. Roasted weekly. No shortcuts.</p> <p>Lumen is a specialty coffee roaster on Tràng Tiền, Hoàn Kiếm — we buy direct from growers in Đắk Lắk and Sơn La, roast in-house every week, and brew each cup slowly enough to taste like it.</p> <div class="hero-actions"> <a href="#products" class="btn btn-primary">View the menu</a> <a href="tel:+842438235566" class="btn btn-outline">Call the shop</a> </div> </div> <div class="hero-img"> <img src="https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?w=900&q=80" alt="Barista pouring latte art into a ceramic cup at Lumen Coffee"> <div class="hero-badge"><strong>7 yrs</strong>roasting coffee in Hanoi</div> </div> </div> </section> <!-- ================= ABOUT ================= --> <section id="about"> <div class="wrap"> <div class="about-img fade-in"> <img src="https://images.unsplash.com/photo-1651783976258-3072215aac82?w=800&q=80" alt="Interior of Lumen Coffee with wooden tables and chairs"> </div> <div class="about-copy fade-in"> <span class="eyebrow">Our story</span> <h2>Started with one roaster and a lot of stubbornness</h2> <p>Lumen opened in 2018 in a narrow shophouse off Tràng Tiền, with a single drum roaster and a plan to sell coffee the way we actually liked to drink it — slow, honest about where it came from, and never bitter from sitting too long on a burner.</p> <p>We still roast every batch ourselves, in small runs, so what's in your cup was picked, dried and roasted by someone we can name. No syrups pretending to be flavor, no beans older than three weeks.</p> <div class="stats"> <div class="stat"><strong>7</strong><span>years open</span></div> <div class="stat"><strong>40k+</strong><span>cups served / year</span></div> <div class="stat"><strong>12</strong><span>partner farms</span></div> </div> </div> </div> </section> <!-- ================= PHOTO BAND ================= --> <section class="photo-band fade-in"> <div class="wrap"> <a href="#gallery"><img src="https://images.unsplash.com/photo-1497636577773-f1231844b336?w=500&q=80" alt="Cappuccino coffee in a ceramic mug"></a> <a href="#gallery"><img src="https://images.unsplash.com/photo-1531441802565-2948024f1b22?w=500&q=80" alt="White ceramic cup with latte art"></a> <a href="#gallery"><img src="https://images.unsplash.com/photo-1545418314-7ce0b9b53901?w=500&q=80" alt="Espresso machine and grinder below a chalkboard menu"></a> </div> </section> <!-- ================= PRODUCTS ================= --> <section id="products"> <div class="wrap"> <div class="section-head fade-in"> <span class="eyebrow">On the counter</span> <h2>What we're pouring this week</h2> <p>Eight regulars from the menu — the rest is on the full list below.</p> </div> <div class="products-grid"> <div class="product-card fade-in"> <img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?w=500&q=80" alt="Traditional Vietnamese drip coffee with phin filter"> <div class="product-body"> <h3>Classic Phin Drip</h3> <p>Slow-dripped robusta, served black or with condensed milk, the way it's always been made.</p> <div class="product-foot"><span class="price">45,000₫</span><a href="#contact" class="order-link">Order</a></div> </div> </div> <div class="product-card fade-in"> <img src="https://images.unsplash.com/photo-1497935586351-b67a49e012bf?w=500&q=80" alt="Egg coffee topped with whipped egg cream"> <div class="product-body"> <h3>Egg Coffee</h3> <p>Whipped egg yolk and condensed milk over dark roast — a Hanoi original, made fresh per cup.</p> <div class="product-foot"><span class="price">55,000₫</span><a href="#contact" class="order-link">Order</a></div> </div> </div> <div class="product-card fade-in"> <img src="https://images.unsplash.com/photo-1517701604599-bb29b565090c?w=500&q=80" alt="Iced coconut cold brew coffee in a tall glass"> <div class="product-body"> <h3>Coconut Cold Brew</h3> <p>18-hour cold brew blended with fresh coconut cream, no added sugar.</p> <div class="product-foot"><span class="price">60,000₫</span><a href="#contact" class="order-link">Order</a></div> </div> </div> <div class="product-card fade-in"> <img src="https://images.unsplash.com/photo-1523942839745-7848c839b661?w=500&q=80" alt="Pour over coffee being brewed"> <div class="product-body"> <h3>Single-Origin Pour Over</h3> <p>Rotating single-origin, brewed to order. Ask what's on the shelf this week.</p> <div class="product-foot"><span class="price">65,000₫</span><a href="#contact" class="order-link">Order</a></div> </div> </div> <div class="product-card fade-in"> <img src="https://images.unsplash.com/photo-1461023058943-07fcbe16d735?w=500&q=80" alt="Flat white coffee with oat milk latte art"> <div class="product-body"> <h3>Oat Milk Flat White</h3> <p>Double ristretto, steamed oat milk, no syrup needed.</p> <div class="product-foot"><span class="price">58,000₫</span><a href="#contact" class="order-link">Order</a></div> </div> </div> <div class="product-card fade-in"> <img src="https://images.unsplash.com/photo-1544787219-7f47ccb76574?w=500&q=80" alt="Sparkling cascara tea in a glass with ice"> <div class="product-body"> <h3>Cascara Fizz</h3> <p>Coffee-cherry tea, cold-steeped and topped with soda — bright, tart, caffeine-light.</p> <div class="product-foot"><span class="price">50,000₫</span><a href="#contact" class="order-link">Order</a></div> </div> </div> <div class="product-card fade-in"> <img src="https://images.unsplash.com/photo-1587734195503-904fca47e0b9?w=500&q=80" alt="Bag of Ethiopian Yirgacheffe whole bean coffee"> <div class="product-body"> <h3>Ethiopian Yirgacheffe, 250g</h3> <p>Floral, citrus-bright. This month's guest roast, in limited bags.</p> <div class="product-foot"><span class="price">175,000₫</span><a href="#contact" class="order-link">Order</a></div> </div> </div> <div class="product-card fade-in"> <img src="https://images.unsplash.com/photo-1559056199-641a0ac8b55e?w=500&q=80" alt="Bag of Lumen house blend whole bean coffee"> <div class="product-body"> <h3>Lumen House Blend, 250g</h3> <p>Our everyday roast — Đắk Lắk robusta and Sơn La arabica, balanced for milk drinks.</p> <div class="product-foot"><span class="price">140,000₫</span><a href="#contact" class="order-link">Order</a></div> </div> </div> </div> </div> </section> <!-- ================= MENU / PRICING ================= --> <section class="menu" id="pricing"> <div class="wrap"> <div class="section-head fade-in"> <span class="eyebrow">Full menu</span> <h2>Everything, by category</h2> <p>Prices in Vietnamese đồng, dine-in or takeaway.</p> </div> <div class="menu-cols"> <div class="menu-cat fade-in"> <h3>Hot</h3> <div class="menu-row"><div><div class="menu-row-name">Phin Drip (black)</div><div class="menu-row-desc">Robusta, no milk</div></div><div class="menu-row-price">40,000₫</div></div> <div class="menu-row"><div><div class="menu-row-name">Phin Sữa</div><div class="menu-row-desc">With condensed milk</div></div><div class="menu-row-price">45,000₫</div></div> <div class="menu-row"><div><div class="menu-row-name">Egg Coffee</div><div class="menu-row-desc">Whipped yolk, dark roast</div></div><div class="menu-row-price">55,000₫</div></div> <div class="menu-row"><div><div class="menu-row-name">Flat White</div><div class="menu-row-desc">Dairy or oat milk</div></div><div class="menu-row-price">58,000₫</div></div> <div class="menu-row"><div><div class="menu-row-name">Pour Over</div><div class="menu-row-desc">Rotating single-origin</div></div><div class="menu-row-price">65,000₫</div></div> </div> <div class="menu-cat fade-in"> <h3>Iced &amp; bottled beans</h3> <div class="menu-row"><div><div class="menu-row-name">Coconut Cold Brew</div><div class="menu-row-desc">18-hour steep</div></div><div class="menu-row-price">60,000₫</div></div> <div class="menu-row"><div><div class="menu-row-name">Cascara Fizz</div><div class="menu-row-desc">Coffee-cherry tea soda</div></div><div class="menu-row-price">50,000₫</div></div> <div class="menu-row"><div><div class="menu-row-name">Iced Black</div><div class="menu-row-desc">House blend over ice</div></div><div class="menu-row-price">42,000₫</div></div> <div class="menu-row"><div><div class="menu-row-name">House Blend, 250g bag</div><div class="menu-row-desc">Whole bean or ground</div></div><div class="menu-row-price">140,000₫</div></div> <div class="menu-row"><div><div class="menu-row-name">Guest Roast, 250g bag</div><div class="menu-row-desc">Changes monthly</div></div><div class="menu-row-price">175,000₫</div></div> </div> </div> </div> </section> <!-- ================= WHY CHOOSE US ================= --> <section id="why"> <div class="wrap"> <div class="section-head fade-in"> <span class="eyebrow">Why Lumen</span> <h2>A few things we don't compromise on</h2> </div> <div class="why-grid"> <div class="why-card fade-in"> <div class="why-icon">🌱</div> <h3>Direct-trade beans</h3> <p>We buy straight from twelve partner farms in Đắk Lắk and Sơn La — no middlemen, fairer prices for growers.</p> </div> <div class="why-card fade-in"> <div class="why-icon">🔥</div> <h3>Roasted weekly</h3> <p>Every bag is roasted within seven days of sale. Nothing sits in storage going stale.</p> </div> <div class="why-card fade-in"> <div class="why-icon">♻️</div> <h3>Zero-waste packaging</h3> <p>Compostable cups, paper straws, and bean bags that go back into the compost bin, not the landfill.</p> </div> <div class="why-card fade-in"> <div class="why-icon">💻</div> <h3>Built for working</h3> <p>Fast wifi, plenty of outlets, and a quiet upstairs floor if you need to actually get something done.</p> </div> </div> </div> </section> <!-- ================= TESTIMONIALS ================= --> <section id="testimonials"> <div class="wrap"> <div class="section-head fade-in"> <span class="eyebrow">What people say</span> <h2>Regulars do most of our marketing</h2> </div> <div class="testi-grid"> <div class="testi-card fade-in"> <div class="stars">★★★★★</div> <p>The egg coffee here ruined every other version I've had. I come by twice a week now, usually for the wifi too.</p> <div class="testi-who"> <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80" alt=""> <div><strong>Minh Anh</strong><span>Graphic designer, Hanoi</span></div> </div> </div> <div class="testi-card fade-in"> <div class="stars">★★★★★</div> <p>Bought a bag of the Yirgacheffe on a whim and now I drive across town for it. Honestly worth the trip.</p> <div class="testi-who"> <img src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=100&q=80" alt=""> <div><strong>James Carter</strong><span>Expat, works remotely</span></div> </div> </div> <div class="testi-card fade-in"> <div class="stars">★★★★★</div> <p>Quiet upstairs floor, strong coffee, and the staff remember my order. That's rare in this neighborhood.</p> <div class="testi-who"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100&q=80" alt=""> <div><strong>Thu Trang</strong><span>University student</span></div> </div> </div> </div> </div> </section> <!-- ================= GALLERY ================= --> <section id="gallery"> <div class="wrap"> <div class="section-head fade-in"> <span class="eyebrow">Inside Lumen</span> <h2>A look around the shop</h2> </div> <div class="gallery-grid"> <a href="#"><img src="https://images.unsplash.com/photo-1565650839149-2c48a094196c?w=900&q=80" alt="Round wooden tables beside a leather sofa at Lumen Coffee"></a> <a href="#"><img src="https://images.unsplash.com/photo-1542181961-9590d0c79dab?w=500&q=80" alt="Customers sitting and chatting inside Lumen Coffee"></a> <a href="#"><img src="https://images.unsplash.com/photo-1522126039546-182129aa0b93?w=500&q=80" alt="Quiet corner of the shop early in the morning"></a> <a href="#"><img src="https://images.unsplash.com/photo-1690271965447-f873ea9b3448?w=500&q=80" alt="Bookshelf and reading nook inside the shop"></a> <a href="#"><img src="https://images.unsplash.com/photo-1650338031221-ba71d1178d43?w=500&q=80" alt="Tables and artwork on the wall at Lumen Coffee"></a> <a href="#"><img src="https://images.unsplash.com/photo-1593443320739-77f74939d0da?w=500&q=80" alt="White ceramic cup with saucer on a wooden table"></a> <a href="#"><img src="https://images.unsplash.com/photo-1650097364104-eef0e54af0da?w=500&q=80" alt="Cappuccino with a leaf latte art design"></a> <a href="#"><img src="https://images.unsplash.com/photo-1503240778100-fd245e17a273?w=500&q=80" alt="Coffee served in a white ceramic mug"></a> </div> </div> </section> <!-- ================= FAQ ================= --> <section class="faq" id="faq"> <div class="wrap"> <div class="section-head fade-in"> <span class="eyebrow">Good to know</span> <h2>Frequently asked questions</h2> </div> <div class="faq-list fade-in"> <div class="faq-item"> <button class="faq-q" aria-expanded="false"> Do you have decaf? <span class="plus">+</span> </button> <div class="faq-a"><p>Yes — Swiss water-process decaf is available on any drink, no extra charge. Just ask when you order.</p></div> </div> <div class="faq-item"> <button class="faq-q" aria-expanded="false"> Can I bring my laptop and work here? <span class="plus">+</span> </button> <div class="faq-a"><p>Absolutely. The upstairs floor is set up for it — outlets at every table and the wifi password is on the receipt. We just ask that big groups keep calls to the ground floor.</p></div> </div> <div class="faq-item"> <button class="faq-q" aria-expanded="false"> Do you sell beans wholesale? <span class="plus">+</span> </button> <div class="faq-a"><p>We do, for cafés and offices ordering 5kg or more per month. Email hello@lumencoffee.vn and we'll send pricing and a sample bag.</p></div> </div> <div class="faq-item"> <button class="faq-q" aria-expanded="false"> Do you deliver? <span class="plus">+</span> </button> <div class="faq-a"><p>Within Hoàn Kiếm and Ba Đình we deliver directly — message us on WhatsApp. Further out, we ship bagged beans nationwide via GHN, 1–3 days.</p></div> </div> <div class="faq-item"> <button class="faq-q" aria-expanded="false"> Is Lumen dog-friendly? <span class="plus">+</span> </button> <div class="faq-a"><p>Yes, on the ground floor and the front patio. We keep a water bowl by the door.</p></div> </div> </div> </div> </section> <!-- ================= CONTACT ================= --> <section id="contact"> <div class="wrap"> <div class="contact-form fade-in"> <span class="eyebrow">Get in touch</span> <h2 style="margin-bottom:28px;">Order ahead or ask us anything</h2> <form id="contactForm" action="https://formspree.io/f/your-form-id" method="POST"> <div class="form-group"> <label for="name">Full name</label> <input type="text" id="name" name="name" required> </div> <div class="form-group"> <label for="phone">Phone number</label> <input type="tel" id="phone" name="phone" required> </div> <div class="form-group"> <label for="email">Email <span style="font-weight:400;color:var(--ink-faint);">(optional)</span></label> <input type="email" id="email" name="email"> </div> <div class="form-group"> <label for="message">What can we help with?</label> <textarea id="message" name="message" placeholder="e.g. I'd like to order 2 bags of the house blend for pickup Saturday" required></textarea> </div> <button type="submit" class="btn btn-primary">Send message</button> </form> </div> <div class="contact-info fade-in"> <div class="info-block"> <h4>Address</h4> <p>14 Tràng Tiền, Hoàn Kiếm, Hà Nội, Vietnam</p> </div> <div class="info-block"> <h4>Phone / WhatsApp</h4> <a href="tel:+842438235566">+84 24 3823 5566</a> </div> <div class="info-block"> <h4>Email</h4> <a href="mailto:hello@lumencoffee.vn">hello@lumencoffee.vn</a> </div> <div class="info-block"> <h4>Hours</h4> <p>Every day, 7:00 AM – 7:00 PM</p> </div> <div class="social-row"> <a href="https://instagram.com" aria-label="Lumen Coffee on Instagram" target="_blank" rel="noopener">IG</a> <a href="https://facebook.com" aria-label="Lumen Coffee on Facebook" target="_blank" rel="noopener">FB</a> </div> <iframe class="map-frame" loading="lazy" src="https://www.google.com/maps?q=14+Tr%C3%A0ng+Ti%E1%BB%81n,+Ho%C3%A0n+Ki%E1%BA%BFm,+H%C3%A0+N%E1%BB%99i&output=embed" title="Lumen Coffee location on Google Maps"></iframe> </div> </div> </section> <!-- ================= FOOTER ================= --> <footer> <div class="wrap"> <div class="footer-grid"> <div> <div class="footer-logo">Lumen.</div> <p>Small-batch specialty coffee, roasted weekly in Hoàn Kiếm, Hanoi. Direct-trade beans, honest prices.</p> </div> <div class="footer-col"> <h4>Quick links</h4> <ul> <li><a href="#about">About</a></li> <li><a href="#products">Menu</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-col"> <h4>Contact</h4> <ul> <li><a href="tel:+842438235566">+84 24 3823 5566</a></li> <li><a href="mailto:hello@lumencoffee.vn">hello@lumencoffee.vn</a></li> <li>14 Tràng Tiền, Hoàn Kiếm, Hà Nội</li> </ul> </div> </div> <div class="footer-bottom"> <span>© <span id="year"></span> Lumen Coffee. All rights reserved.</span> <span>Built with care in Hanoi.</span> </div> </div> </footer> <!-- ================= FLOATING BUTTONS ================= --> <div class="floating"> <a href="https://wa.me/842438235566" class="whatsapp" aria-label="Chat on WhatsApp" target="_blank" rel="noopener">💬</a> <a href="tel:+842438235566" class="call" aria-label="Call Lumen Coffee">📞</a> </div> <script> // ---- Mobile menu ---- const hamburger = document.getElementById('hamburger'); const navLinks = document.getElementById('navLinks'); hamburger.addEventListener('click', () => { const isOpen = navLinks.classList.toggle('open'); hamburger.classList.toggle('active', isOpen); hamburger.setAttribute('aria-expanded', isOpen); }); navLinks.querySelectorAll('a').forEach(link => { link.addEventListener('click', () => { navLinks.classList.remove('open'); hamburger.classList.remove('active'); hamburger.setAttribute('aria-expanded', 'false'); }); }); // ---- FAQ accordion ---- document.querySelectorAll('.faq-item').forEach(item => { const q = item.querySelector('.faq-q'); const a = item.querySelector('.faq-a'); q.addEventListener('click', () => { const isOpen = item.classList.contains('open'); // close all document.querySelectorAll('.faq-item').forEach(other => { other.classList.remove('open'); other.querySelector('.faq-q').setAttribute('aria-expanded', 'false'); other.querySelector('.faq-a').style.maxHeight = null; }); // open clicked one if it wasn't already open if (!isOpen) { item.classList.add('open'); q.setAttribute('aria-expanded', 'true'); a.style.maxHeight = a.scrollHeight + 'px'; } }); }); // ---- Scroll reveal ---- const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('in-view'); observer.unobserve(entry.target); } }); }, { threshold: 0.12 }); document.querySelectorAll('.fade-in').forEach(el => observer.observe(el)); // ---- Footer year ---- document.getElementById('year').textContent = new Date().getFullYear(); // ---- Contact form (static-site friendly fallback) ---- document.getElementById('contactForm').addEventListener('submit', function(e) { // If a real Formspree endpoint hasn't been configured, fall back to WhatsApp. if (this.action.includes('your-form-id')) { e.preventDefault(); const name = document.getElementById('name').value; const phone = document.getElementById('phone').value; const message = document.getElementById('message').value; const text = encodeURIComponent(`Hi Lumen! My name is ${name} (${phone}). ${message}`); window.open(`https://wa.me/842438235566?text=${text}`, '_blank'); } }); </script> </body> </html>
Claude

Shop Website Builder

Add to Cart
PromptBase Select
Get this prompt + 9 more with SelectFrom $14/mo · Cancel anytimeFrom $14/mo · Cancel anytime
View Select
Instant accessInstant access
Usage rightsCommercial use
Money-back guaranteeMoney‑back
By purchasing this prompt, you agree to our terms of service
CLAUDE-5-OPUS
Tested icon
Guide icon
4 examples icon
Free credits icon
Generate a complete, professional single-page static website for any small shop or local business — no coding needed. Just fill in your shop's info, colors, and style, and get a full self-contained HTML file with hero section, product grid, testimonials, FAQ, contact form, sticky navigation, mobile-responsive design, and SEO tags. Perfect for cafes, boutiques, bakeries, salons, and more. Works with Claude, ChatGPT, and other AI models. Fully customizable, ready to publish or hand to a developer.
...more
Added 3 weeks ago
Report
Browse Marketplace