Adjatché

Adjatché is a fictional guided-tour concept for Porto-Novo, presented as a mobile-app screen rather than a conventional website. Four real circuits — a palace tour, a lagoon canoe trip, a market walk, an evening of Zangbeto storytelling — each with its own price and its own WhatsApp link, because the entire point is starting a conversation, not filling out a form.

What makes it work

• A phone-shaped page, not a shrunk-down desktop site. The whole layout sits inside a fixed, centered 430px frame with its own drop shadow — built to read like a mobile app screen at every viewport, not a responsive site that happens to work on mobile.
• Every tour books itself. Each of the four circuits has its own WhatsApp link, pre-filled with that specific tour's name — a message is already half-written before the visitor even taps send.
• Placeholder links that admit they're placeholders. The Instagram and Google Maps links are visibly present but deliberately disabled, rather than pointing anywhere fake — nothing on the page implies a connection that doesn't exist.

Design at a glance

• ink · #14171f
• ivory · #f3ecdd
• ochre · #d9a441
• vermillion · #c1432b
• teal · #1f6f5c

The signature element is a hand-drawn inline SVG skyline — the royal palace, palm trees, a pirogue on the lagoon — carrying a real, descriptive aria-label rather than standing in as unlabeled decoration.

Built to last

• Every tour's WhatsApp link is pre-filled with that specific circuit's name
• Scroll-reveal respects prefers-reduced-motion, with a genuine no-JS fallback
• Visible focus rings on every interactive element
• A persistent, honest “concept site” disclosure in the footer

For developers — the full technical breakdown

01. A fixed mobile-app frame instead of responsive breakpoints

Problem

Wanted the page to feel like using an app, not browsing a website that happens to fit on a phone.

Choice

A centered, fixed-width (430px) frame with its own drop shadow, held constant across viewport sizes rather than reflowing at breakpoints.

Result

A consistent, deliberate “app” feeling on any device — a fair trade for a concept built around a phone-first booking flow, even though it leaves space unused on very wide screens.

02. Disabled placeholder links instead of fake ones

Problem

Instagram and Google Maps links needed to exist visually without pointing at a real, or fabricated, destination.

Choice

Kept them visible with a disabled click handler, rather than a working link to a placeholder page or a bare href="#".

Result

Nothing on the page implies a connection that doesn't exist.

Accessibility & performance

• A real, descriptive aria-label on the hand-drawn skyline illustration
• Scroll-reveal respects prefers-reduced-motion, with a genuine fallback when IntersectionObserver isn't available
• Visible 2px focus rings on every interactive element
• Zero build tooling, zero runtime dependencies beyond Google Fonts

What I’d do differently

The only external dependency on the page is Google Fonts. Self-hosting the three families, the way I did on Nova Home Care, would remove the last third-party request.

Stack

• HTML5
• CSS3 (custom properties)
• Vanilla JavaScript
• IntersectionObserver