Case studyA’venue Café · Floridablanca, Pampanga
A mobile-first website for a neighbourhood café in Pampanga
01Overview
The brief and the build.
A’venue Café opened in Floridablanca, Pampanga in 2025. Most of its customers find it on Facebook and Instagram, on their phones, so it needed a website that works like an app on a phone and shows up when people nearby search for coffee.
I built it as a custom website, hand-coded with no framework and no database: seven pages covering the menu, events, a photo gallery, the café’s story, a visit page and its in-store Memory Wall. Every price lives in one data file, and the same file builds the menu page and the structured data. Guests can also download the printed menu boards as a PDF.
On phones it behaves like an app, with a tab bar, an order sheet, swipeable carousels and page transitions. I traced the café’s logo into a vector and animated it: the avenue opens, the leaves bloom and the letters rise.
For search, every page carries structured data for the café, its full menu with prices, its event services, the gallery and the FAQ. There is also a sitemap with image entries, an llms.txt fact sheet for AI search tools, and a share image per page. The site went live on its own domain on 16 October 2026.
02Design system
Taken from the café’s own posters.
Logo
“Along every journey, there’s a place to pause.”
Colour
- Cream #F6EAD9 Page ground, like the café’s poster paper
- Paper #FBF5EA Raised panels and menu sections
- Forest #2E3D1A Banners, buttons, footer, and all text
- Sage #B8C8A8 Quiet chips and badges
- Leaf #607C48 The exact logo green: icons and large type
- Berry #B03C5A Promos only, one per view
- Kraft #C0A078 Decoration: clips and twine
- Amber #F2B544 The storefront’s LED strips, used for the open-now dot
Type
Specialty coffee in Floridablanca
Matches the poster headlines
a place to pause
One word or phrase per block, never a button
Good coffee, satisfying rice meals and handmade sweets. Dine in, pick up, or we’ll bring it to you.
Everything people actually read
Shape
- sm · 6px
- md · 12px
- lg · 20px
- pill · pill
03What I built
An app on the phone, a site on the desk.
- 01Seven pages: home, menu, events, gallery, Memory Wall, about and visit
- 02An app-style phone layout with a tab bar, order sheet, carousels and page transitions
- 03A vector logo traced from the original artwork, animated for the preloader
- 04The full menu in one data file, which feeds the menu page and the structured data
- 05A moving clothesline gallery for the in-store Memory Wall
- 06Messenger and click-to-call ordering, with live open and closed hours
04SEO and AEO
Built to be found and quoted.
- 01CafeOrCoffeeShop structured data for the business
- 02Menu schema with every item and price
- 03Service schema for events, plus ImageGallery and FAQPage
- 04A sitemap with image entries, for Google Images
- 05An llms.txt fact sheet for AI search tools
- 06A share image for each page, on its own domain with HTTPS