Menu content is stored as JSON data in src/data/, so updating products requires no component changes
VueCorporate Website
dessert-page — Vue Business Template
By LeonelRosado2407
A corporate website and online menu template for a Mexican-style coffee bakery, built with Vue 3, TypeScript, and Tailwind CSS, with content driven by JSON data.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 3
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 3
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-10View source
What stands out
A quick read of the recorded project description.
Search ignores accents and matches both product names and descriptions
Favorites are persisted via localStorage and have a dedicated filter view
Search and filter conditions are synced to the URL query string, making them shareable and supporting browser history navigation
Automatically displays "Abierto ahora / Cerrado" status based on business hours
Respects prefers-reduced-motion, disabling animations and smooth scrolling when enabled in the system
Template Details
This is a website and online menu project for a fictional Mexican coffee bakery brand, built with Vue 3, TypeScript, Vite, and Tailwind CSS, and deployed on Vercel. The pages include homepage sections, a product menu, a brand story, and a 404 page. Desktop and mobile use a sidebar and horizontal chips respectively for menu category navigation.
The menu contains 33 products organized by category and subcategory, with prices displayed in Mexican pesos and special orders marked "Por cotizar". Search ignores accents and matches both names and descriptions; favorites are persisted via localStorage and have a dedicated filter. Search terms and filter conditions are synced to the URL query string, making them shareable and supporting browser back and forward navigation. Product detail pages include a gallery and a keyboard-accessible lightbox.
For interactions, IntersectionObserver is used for scroll animations, staggered card appearances, page transition effects, and hover micro-interactions, while respecting the prefers-reduced-motion setting. The page calculates an "Abierto ahora / Cerrado" status based on business hours. The story page includes a horizontal timeline that draws as you scroll. When images are missing or fail to load, a brand-colored placeholder is shown.
All content (products, company information, business hours, story, FAQ, reviews) is stored in JSON files under src/data/, so updating the menu requires no component changes. The project includes Vitest unit tests and Playwright end-to-end tests, and runs lint, type checking, tests, and build via GitHub Actions on push and PR. The code is MIT licensed, but the demo photos are for display purposes only and copyright belongs to their respective authors; business information and contact details are fictional.
VueCorporate website
Is it right for your project?
Use Cases
- Building a brand website with an online menu for a coffee shop or bakery
- Food and beverage sites that need to browse products by category and display prices and details
- Projects that want to maintain menu content via JSON data files and avoid frequent front-end code changes
- Menu browsing experiences that require search, favorites, and shareable filter links
Suitable For
- Websites and menu displays for small food and beverage businesses such as coffee shops and bakeries
- Front-end developers using a Vue 3 and TypeScript stack for reference
- Projects that need to separate content from components for easier future integration with a CMS or API
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node ^22.18.0 or >=24.12.0
- 2
After installing dependencies, run npm run dev to start the development server, and npm run build to perform type checking and production build
- 3
Unit tests use npm run test:unit or npx vitest run; end-to-end tests require running npx playwright install first, then npm run test:e2e
- 4
The code is MIT licensed, but demo photo copyrights belong to their respective authors; business information and contact details are fictional and must be replaced before production use
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis entry covers the free version under the MIT license in the public repository; the free scope is the code of this version and does not imply that external services or third-party assets are free.
Must comply with when using
- You are allowed to use, modify, commercialize, and distribute the code of this version for free.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses; they cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments, or AI may incur additional charges.
- Demo photos are for display only, and copyright belongs to their respective authors; you must replace them or obtain authorization before production use.
- The merchant information, contact details, and brand story in the project are fictional and must be replaced with real information before going live.
View Original Text Basis
Permission is hereby granted, free of charge
Original License Text
Las fotografías se incluyen solo como demostración y pertenecen a sus respectivos autores.
Original README
https://github.com/LeonelRosado2407/dessert-page/blob/main/LICENSEhttps://github.com/LeonelRosado2407/dessert-page/blob/main/README.md> El negocio, sus datos de contacto y su historia son ficticios.
Original README
Compiled by DeepSeek based on repository license and README ·2026-10-10. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 80 / 100
- Technologies
- Vue
- Website type
- Corporate Website
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-10-10
- Screenshot last checked
- 2026-10-10
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Vue as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: [email protected] · 2026-10-10
Inspect the recorded source material
SHA-256: a16990d429b66b1f4da9d25e88295c24a25d3e9435fa24d7ca916643331204c8
2026-10-10T04:31:43.403Z
Source file / repository# Dulce Tentación · Café y repostería artesanal
[](https://github.com/LeonelRosado2407/dessert-page/actions/workflows/ci.yml)
[](https://dulce.leonelrosado.dev)
[](LICENSE)
Sitio web y **menú en línea** para una cafetería-pastelería mexicana (ficticia). El objetivo: una página vistosa, con animaciones suaves e interacciones claras, que además le sirva al cliente para consultar el menú, los precios y el horario desde el celular.
**Demo:** [dulce.leonelrosado.dev](https://dulce.leonelrosado.dev)
## Funcionalidades
**Menú en línea**
- 33 productos agrupados por categoría y subcategoría, con precio en MXN ("Por cotizar" en pedidos especiales).
- **Búsqueda sin acentos**: "cafe" encuentra "Café"; busca en nombre y descripción.
- **Favoritos** persistentes (`localStorage`) con filtro dedicado.
- La búsqueda y los filtros viven en la URL (`/productos?q=cafe&fav=1`): se pueden compartir y sobreviven al botón de atrás.
- Navegación por categorías: barra lateral en escritorio y chips horizontales en móvil, ambas resaltan la sección visible.
- Detalle de producto con galería y **lightbox** (teclado, flechas y cierre con Escape).
**Diseño e interacción**
- Animaciones al hacer scroll con `IntersectionObserver`, aparición escalonada de tarjetas, transiciones entre páginas y micro-interacciones (corazón con "pop", hover con zoom).
- Respeta `prefers-reduced-motion`: si el sistema lo pide, se desactivan animaciones y scroll suave.
- Indicador **"Abierto ahora / Cerrado"** calculado a partir del horario.
- Página de **Historia** con línea de tiempo que se dibuja conforme avanzas.
- Placeholder con la paleta del sitio cuando una foto no existe o falla al cargar.
- Responsive de 375px en adelante, navbar con menú hamburguesa, página 404 y títulos por ruta.
| Menú (escritorio) | Búsqueda (móvil) | Lightbox (móvil) |
| --- | --- | --- |
|  |  |  |
## Stack
- **Vue 3** (Composition API, `<script setup>`) + **TypeScript**
- **Vite** como bundler y servidor de desarrollo
- **Tailwind CSS v4** con tokens de diseño propios (`@theme`)
- **Vue Router** (rutas lazy, `scrollBehavior` personalizado) y **Pinia**
- **Vitest** + **Vue Test Utils** para pruebas unitarias y de componentes
- **Playwright** para pruebas end-to-end
- **GitHub Actions**: lint, type-check, pruebas y build en cada push y PR
- **oxlint + ESLint + Prettier**
- Desplegado en **Vercel**
## Decisiones técnicas
- **Contenido como datos.** Todo el contenido (productos, empresa, horario, historia, FAQ, reseñas) está en JSON dentro de `src/data/`. Cambiar el menú no requiere tocar componentes, y la estructura está lista para migrar a un CMS o API.
- **Estado en la URL.** Los filtros del menú se sincronizan con la query string en ambos sentidos. El `scrollBehavior` del router ignora los cambios de query en la misma página, para que escribir en el buscador no mueva el scroll, y restaura la posición al volver.
- **Animaciones sin conflictos.** En las tarjetas, un contenedor maneja la aparición (con retraso escalonado) y otro el hover (sin retraso), así el `transition-delay` no hace lento el hover.
- **Accesibilidad.** Links reales en las tarjetas (navegables con teclado), `aria-label`/`aria-pressed` en favoritos, diálogo modal accesible en el lightbox y soporte de movimiento reducido.
- **Rendimiento.** Imágenes redimensionadas y comprimidas, `loading="lazy"` y rutas con carga diferida.
## Estructura
```
src/
├── components/
│ ├── home/ # Secciones del inicio (hero, galería, reseñas, contacto…)
│ ├── layout/ # Navbar, footer, indicador de horario
│ ├── productos/ # Tarjeta, imagen con placeholder, favorito, lightbox
│ └── historia/ # Línea de tiempo
├── composables/ # useInView (animaciones al hacer scroll)
├── data/ # Contenido en JSON
├── router/
├── stores/ # Favoritos (Pinia + localStorage)
├── utils/ # Precio, horario, scroll
└── views/
```
## Correr el proyecto
Requiere Node `^22.18.0` o `>=24.12.0`.
```sh
npm install
npm run dev # servidor de desarrollo
npm run build # type-check + build de producción
npm run lint # oxlint + eslint
```
### Pruebas unitarias
```sh
npm run test:unit # modo watch
npx vitest run # una sola corrida
```
Cubren el formato de precios, el cálculo de "abierto ahora" (horas límite y días cerrados), la búsqueda sin acentos, el store de favoritos y los componentes de tarjeta e imagen con placeholder.
### Pruebas end-to-end
```sh
npx playwright install # solo la primera vez
npm run test:e2e # contra el servidor de desarrollo
```
Para correrlas sin abrir el navegador, contra el build de producción:
```sh
npm run build && CI=1 npx playwright test --project=chromium --reporter=list
```
---
## Licencia
El código está bajo la licencia [MIT](LICENSE). Las fotografías se incluyen solo como demostración y pertenecen a sus respectivos autores.
> El negocio, sus datos de contacto y su historia son ficticios.
Explore similar templates
Compare previews and descriptions within the same stack and category.
shadcn-vue-landing-page
A Vue + Shadcn-Vue + TypeScript + Tailwind landing page template with sections like Navbar, Hero, Pricing, FAQ, Team, and Contact, plus dark mode and responsive layout.
Vue · Corporate Website
dasos
dasos is an App landing page template built with Vue and Tailwind CSS, scaffolded with vue-cli. It includes Features, Testimonials, Download App, and Contact sections, and integrates vuefire and firebase for database connectivity, along with vue-carousel and vue-scrollto.
Vue · Corporate Website
hero-header-template
A Vue 3, Vite, and Tailwind CSS landing page template for agencies, featuring a Hero section and header with RTL language support.
Vue · Corporate Website
vue-porto
VuePorto is a Vue-based single-page resume and portfolio template adapted from StartBootstrap's Resume theme, adding animations and transitions. It suits personal resume or portfolio sites and is under the MIT license for free use and secondary development.
Vue · Portfolio
nagency
nagency is a digital agency website template built with Vue 3 and Vite, released under the MIT license. It includes desktop (1440×1000) and mobile (390×844) home page screenshots and provides basic install, development, and build commands.
Vue · Corporate Website
vitepress-marketing
A VitePress-based multi-page marketing site template with a home page, blog, and submittable contact form, deployed automatically to GitHub Pages via GitHub Actions.
Vue · Blog