Chalkboard-Style Daily Menu Page Design (Next.js + Tailwind CSS)
Budget: $30 – $250 USD
Project Overview:
We are looking for a UI designer/developer to create a beautiful, mobile-friendly daily menu page for restaurants, inspired by traditional chalkboard menus seen on the street. The page will be shared via QR codes and social media links.
You’ll be working from real test data and a provided logo, aligning the style with our current site mockup and brand identity.
Purpose:
- Display a restaurant’s daily menu using a stylized chalkboard design.
- Support mobile-first UX, ideal for quick viewing on phones when scanned via QR codes or clicked from Instagram, WhatsApp, etc.
- The design should evoke a chalkboard menu, while being implemented in modern web standards.
Page Features:
1. Header:
- Restaurant name in a hand-drawn or chalk-styled font.
- Show today's menu price (fixed, e.g. $3.00).
- Display of menu date, in Spanish format (e.g., 8 de junio de 2025).
2. Menu Categories:
- Four fixed sections:
* Entrantes (Starters)
* Platos Fuertes (Main Dishes)
* Postres (Desserts)
* Bebidas (Drinks)
- Each category can list multiple items (no prices per item).
3. Photos Section:
- Button labeled "Ver fotos del menú".
- Opens a photo carousel in a modal (React-based).
- Use placeholder photos for now.
- Photos may have different ratios give that they are uploaded by the users, need to make sure they are properly rendered on the page.
4. Footer:
- Contains “Powered by Come Aquí”.
- Includes a chalk-style version of our logo (see attached red bowl icon) the background should not be red, it should be the color of the board.
- Styled subtly, but should reinforce the brand.
We Will Provide:
- Our current alpha homepage mockup (for reference on colors, fonts, spacing).
- Our logo in vector format (see attached).
- Sample test data (see attached).
- Screenshot inspiration of the chalkboard menu.
Tech Requirements:
- Next.js 15.3.2
- React 19.1.0
- Tailwind CSS 3.4.10
- Use React-friendly libraries or headless implementations only.
- The code should be componentized and ready to integrate into our existing site.
Design Requirements:
- Style inspired by chalkboard menus in the street (see photo references).
- Handwriting or chalk-like font for the titles and categories.
- Dark textured background (chalkboard), chalk styled text, use colors, not everything has to be white-ish.
- Responsive layout that looks great on mobile first, but also works on tablets and desktops.
- Logo should appear chalk-style in footer (you may stylize the provided logo accordingly).
Deliverables:
- Figma (or comparable) mockup file showing the full page design.
- React + Tailwind component(s) for:
* Menu header + sections
* Modal photo carousel
* Footer with brand
- Font file(s) used or clear link to license-free fonts.
- Any Photoshop or Illustrator files used for styling the chalk logo or mock.
- Example JSON wired into the page as a test case.
- Instructions on how to integrate the modal and menu page into an existing Next.js project.
References Included:
- Inspiration image of a chalkboard street menu.
- Our logo (bowl with steam, red background).
- Sample Figma-style image of an example layout, feel free to provide better solutions for the layout based in usability (this is expected)
We are looking for a UI designer/developer to create a beautiful, mobile-friendly daily menu page for restaurants, inspired by traditional chalkboard menus seen on the street. The page will be shared via QR codes and social media links.
You’ll be working from real test data and a provided logo, aligning the style with our current site mockup and brand identity.
Purpose:
- Display a restaurant’s daily menu using a stylized chalkboard design.
- Support mobile-first UX, ideal for quick viewing on phones when scanned via QR codes or clicked from Instagram, WhatsApp, etc.
- The design should evoke a chalkboard menu, while being implemented in modern web standards.
Page Features:
1. Header:
- Restaurant name in a hand-drawn or chalk-styled font.
- Show today's menu price (fixed, e.g. $3.00).
- Display of menu date, in Spanish format (e.g., 8 de junio de 2025).
2. Menu Categories:
- Four fixed sections:
* Entrantes (Starters)
* Platos Fuertes (Main Dishes)
* Postres (Desserts)
* Bebidas (Drinks)
- Each category can list multiple items (no prices per item).
3. Photos Section:
- Button labeled "Ver fotos del menú".
- Opens a photo carousel in a modal (React-based).
- Use placeholder photos for now.
- Photos may have different ratios give that they are uploaded by the users, need to make sure they are properly rendered on the page.
4. Footer:
- Contains “Powered by Come Aquí”.
- Includes a chalk-style version of our logo (see attached red bowl icon) the background should not be red, it should be the color of the board.
- Styled subtly, but should reinforce the brand.
We Will Provide:
- Our current alpha homepage mockup (for reference on colors, fonts, spacing).
- Our logo in vector format (see attached).
- Sample test data (see attached).
- Screenshot inspiration of the chalkboard menu.
Tech Requirements:
- Next.js 15.3.2
- React 19.1.0
- Tailwind CSS 3.4.10
- Use React-friendly libraries or headless implementations only.
- The code should be componentized and ready to integrate into our existing site.
Design Requirements:
- Style inspired by chalkboard menus in the street (see photo references).
- Handwriting or chalk-like font for the titles and categories.
- Dark textured background (chalkboard), chalk styled text, use colors, not everything has to be white-ish.
- Responsive layout that looks great on mobile first, but also works on tablets and desktops.
- Logo should appear chalk-style in footer (you may stylize the provided logo accordingly).
Deliverables:
- Figma (or comparable) mockup file showing the full page design.
- React + Tailwind component(s) for:
* Menu header + sections
* Modal photo carousel
* Footer with brand
- Font file(s) used or clear link to license-free fonts.
- Any Photoshop or Illustrator files used for styling the chalk logo or mock.
- Example JSON wired into the page as a test case.
- Instructions on how to integrate the modal and menu page into an existing Next.js project.
References Included:
- Inspiration image of a chalkboard street menu.
- Our logo (bowl with steam, red background).
- Sample Figma-style image of an example layout, feel free to provide better solutions for the layout based in usability (this is expected)