Jack & John Kitchen - Website

Jack & John Kitchen started in Surabaya in 2016, grew to 10+ outlets across Surabaya and Jakarta, secured investment from ISMAYA Group (one of Indonesia's largest F&B conglomerates), and built a loyal following — including 24,000+ Instagram followers and the informal title of "No. 1 Babi Kriuk In Town." Despite all of this, the brand has no dedicated website. Its entire digital presence is fragmented: Discoverability is broken. A potential customer searching "babi kriuk Jakarta" or "crispy pork catering Surabaya" lands on third-party review sites, aggregator listings, or an Instagram profile — none of which the brand controls. There is no owned page to rank in search results. The brand story is invisible. The ISMAYA Group backing, the founder story, the brand's expansion journey — none of this is communicated anywhere online. What could be a powerful trust signal for new customers simply doesn't exist in the digital space. Catering inquiries have no clear channel. Catering is a high-value revenue stream (corporate events, weddings, Chinese New Year celebrations), but there is no structured way for businesses or event organizers to reach out. Inquiries happen inconsistently through Instagram DMs, phone calls, or word of mouth. Delivery app dependency creates risk. A significant portion of orders go through GoFood, GrabFood, and ShopeeFood. Each platform takes a commission of 20–30%, owns the customer data, and controls the brand's visibility through its own algorithm. A change in platform fee structure or ranking can directly impact revenue. There is no central place for loyal customers. Regulars who want to check the latest menu items, find a new outlet, or share the brand with friends have no reliable destination. The brand relies entirely on Instagram reach, which is subject to algorithmic changes.

The website is built to solve each of these problems in a practical, phased way: Establish a single source of truth. One URL — jacknjohnkitchen.com — where customers, press, and potential partners can find everything: the full menu, all outlet locations and hours, the catering service, the brand story, and contact information. Own the customer relationship for certain order types. Direct WhatsApp orders for bulk takeaway, catering, and packaged goods bypass delivery app commissions entirely. The brand retains the customer data and communication channel. Make catering accessible and professional. A structured catering inquiry form with event type, date, guest count, and location gives the team everything they need to respond quickly. Email notifications ensure no inquiry gets missed. Give the brand a digital identity that matches its physical energy. The website's visual design — bold black and yellow, condensed display typography, zero rounded corners, heavy editorial layouts — is a direct translation of the brand's in-store character. First-time visitors who land on the site should immediately understand who Jack & John is before reading a single word. Enable content independence. The team can update menu prices, add new outlets, publish campaigns, and change hero copy without filing a development request. The Sanity CMS is designed for non-technical editors. Build a foundation for growth. v1.0 deliberately excludes a payment gateway, user accounts, and order tracking. These are Phase 2 and Phase 3 features. The architecture is designed so they can be added without rebuilding the site.

• ✦Full menu browsable by category (Babi Kriuk, Babi Kecap, Rice Bowls, Packaged Products, etc.)
• ✦Category tabs with sort order controlled from the CMS
• ✦Each item shows name, description, price in IDR, flavor variants, and allergen info
• ✦Bestseller badge and New badge, both CMS-controlled
• ✦WhatsApp order button on every menu item, pre-filled with the item name
• ✦Separate section for packaged/processed products available outside outlets
• ✦All content bilingual — name, description, and WhatsApp message in both languages
• ✦Outlet cards organized by city (Surabaya first, then Jakarta)
• ✦Each card shows outlet name, mall/location, full address, and today's opening hours
• ✦Opening hours calculated dynamically — shows "Open Now" or "Closed" based on the current time
• ✦One-tap links to Google Maps, GoFood, GrabFood, and ShopeeFood per outlet
• ✦Outlet-specific WhatsApp number (overrides the global number when set)
• ✦Photo gallery per outlet
• ✦New outlet badge for recently opened locations
• ✦Three or more catering package tiers (e.g., Corporate, Private, Wedding) with features and starting price per person
• ✦Each package shows minimum and maximum guest count, lead time, and delivery coverage area
• ✦"Most Popular" highlight on the recommended tier
• ✦Catering inquiry form with fields: name, phone, email, event type, event date, guest count, location, and notes
• ✦Zod validation on both client and server — no incomplete submissions reach the team
• ✦Email notification to the catering team on every successful submission
• ✦Rate limiting prevents form abuse