“Our product does twenty things. Every page of the website explains it a different way.”

Solved

For: 12Bot: WhatsApp, Instagram and Facebook automation, by 12Monday
Built: The whole website: a feature-page system, tools and the home page
Stack: Next.js · Tailwind · Framer Motion · content from 12 Admin
Result: Metric to confirm

Before: one product, a pinboard of pages that don’t match3D pixel film · made by me

01 · The pain

A big product, explained twenty different ways.

Nineteen features, each one needing a page that sells it.
Every page with its own hero, its own buttons, its own spacing.
Testimonials typed into the code, so changing one meant a deploy.

02 · The fix

Write the feature once. The page builds itself.

The left side is the site’s feature list. Pick an entry and watch the template on the right turn it into a page, with the copy straight from the real site.

lib/features.ts · 19 entries

Visual Flow Builder
Lead Generation & CRM
Bulk Messaging & Campaigns
E-commerce on WhatsApp
Bookings & Appointments
WhatsApp Voice AI Agent
Instagram & Facebook Automation
Ads Attribution
Analytics Dashboard
Team Roles & Mobile App
Developer API & Integrations
Shopify & WooCommerce Catalog Sync
WhatsApp Business App Coexistence
WhatsApp for Real Estate
WhatsApp for Restaurants
WhatsApp for Hospitals & Clinics

Pick one of the three highlighted entries. The template on the right re-renders from its data.

/features/ai-chat-assistant

The problem

Your team retypes the same answers all day

Prices, timings, delivery areas, availability — most messages are questions you have answered a hundred times. After hours they go unanswered, and unanswered messages become lost customers.

Replies at any hour: 24/7
Channels: WhatsApp, Instagram, Facebook: 3
Seamless AI-to-human handoff: 1 chat

How it works

1Customer sends a message
2The AI understands the request
3It looks up your knowledge
4It replies instantly

Real-world example

A restaurant at 2 a.m.

“What time do you open?”, “Do you deliver to Gulberg?”, “Price of chicken biryani?” The assistant answers every one from the restaurant’s own menu while staff sleep.

03 · How it works

Data, a template, and a hub behind it.

One data entry per feature
The problem, three highlights, the steps, a real-world example, who it’s for and the FAQs. The file’s own rule: highlights are facts from the product, never invented numbers.
One template turns it into a page
Problem, then solution, then steps hanging from a rope, then the example. The same calls to action, hero and spacing on every page, so the whole site reads as one product.
Content the team can change
Client testimonials and newsletter sign-ups come from 12 Admin, so marketing updates them without a developer.

The hard part

Nineteen pages that can’t drift apart.

Hand-built pages drift. One gets a bigger heading, another a different button, and a month later the site looks like five sites. Fixing that page by page never ends.

So the pages aren’t built by hand at all. Each one is generated from its data entry at build time, and the sitemap and search titles come from the same list. A design change lands once and every page gets it.

19 entries → in one data file

19 pages → one template, one sitemap, one look

04 · What changed

One product, told one way.

Feature pages from one template: 19
Sign-ups from the site: —
Search traffic: —

I built the whole site, including the WhatsApp link generator (with QR code), the Features menu, the mascots and the scroll-driven home journey. Blanks: metrics to confirm.