Olive & Bean - Cafe Landing Page (Self-Initiated Demo)
Mohamed Ali
About this project
A self-initiated demo I built to show how I approach a small business landing page, from layout through to a deployed site. Olive & Bean is a fictional cafe: the name, copy, prices, opening hours and contact details are all placeholders. This is not client work and no client was involved.
Live page
What the page includes
A sticky header that collapses into a mobile menu
A hero with a clear headline and two calls to action
A three-card menu preview with starting prices
An about section, opening hours, address and phone
A footer with social icons
Menu preview: three cards with photo, description and starting price
How it was built
React, Vite and Tailwind CSS, deployed as a static site on GitHub Pages. Semantic HTML with labelled images, visible focus states and a keyboard-accessible mobile menu. Images carry fixed dimensions and lazy loading so the layout does not shift while they load.
Tested at 375, 768 and desktop widths, with no console errors and no horizontal overflow. Photos are from Unsplash.
Visit section: opening hours, address and phone beside a photo of the counter
Like this project
Posted Sep 20, 2026
A self-initiated demo landing page for a fictional cafe, built with React, Vite and Tailwind and deployed live. Not a client project.
Likes
0
Views
0
