Sina Café
01 — The problem
Why it exists.
Small cafés usually rely only on Instagram. Visitors, especially summer tourists, can't easily find the menu, opening hours or location.
For Locals and summer visitors in Kélibia.
- There is no menu online, and no information on hours or location.
- Instagram alone doesn't convey the brand and the experience.
- AI-generated website bases tend to look generic and untrustworthy.
02 — What I built
What it does.
Menu showcase
Coffee and Mediterranean plates.
Atmosphere gallery (“Social Chronicles”)
Location & hours
With a map link.
Contact / reservation call-to-action
Responsive
Optimized for phones.
03 — Screens
A closer look.
04 — The stack & why
Tools, and why.
- React
The AI Studio base was React. Keeping it allowed fast iteration, and the page breaks naturally into reusable sections (menu, gallery, location).
- Fraunces + Figtree
A warm, characterful serif for headings and a clean sans for reading. Together they give a crafted, coastal-café feeling instead of the default “AI template” look.
- Gold palette (#C3A36B)
It echoes coffee, sand and sunset light, and stays readable on dark backgrounds.
05 — Challenges & learnings
What was hard.
Challenges
Turning a generated base into a credible brand
A full design audit removed generic patterns (pills, gradients, filler copy).
Image weight
Large, atmospheric photos had to stay fast on mobile.
Working as a pair
Splitting tasks and merging cleanly with Git.
Learnings
- AI speeds up the start, but craft (typography, spacing, real photos) is what makes a site trustworthy.
- A design audit checklist is a reusable tool for every project.
// credits: The first version was generated with Google AI Studio, then reworked by hand: new typography (Fraunces + Figtree), a gold palette, new photography, and removal of AI-looking patterns.