Japanese Kaiseki Restaurant Site + Three-Type Menu & Online Reservations
2026
Jiaoxi Shan Guan is a "Guishan Island / Japanese seafood grill" fresh-catch restaurant in Jiaoxi, Yilan, blending Japanese grilling with Taiwanese wellness cuisine. Its core philosophy — "Fresh, Freshly Caught", "Natural, Fresh, Original Flavor", and "Reservation Means Freshness" — is backed by daily early-morning deliveries of fresh catch from Keelung's Kanziding fish market and Yilan's Daxi fishing harbor, with locally grown Yilan produce harvested the same day. The official domain, 039888033.com, is the reservation phone number itself — seen once, remembered forever.
The visual identity is built on a Japanese kaiseki palette: an ink-black stage, Shan Guan gold accents, and vermilion highlights, paired with oversized Noto Serif TC serif headings, Cinzel Latin subheadings, and a giant "Shan" character watermark throughout the site. The hero leads with "Freshly Caught Seafood / Naturally Sweet Cuisine" and the subline "Wellness Cuisine, Signature Grill, Daxi Harbor Fresh Sashimi", implemented with Astro 6 SSR and Vue 3 interactive components.
Beyond a brand site, the project includes a three-type menu system (banquet tables at NT$6,800–12,800 for a standard table of 10, set menus, and a la carte) and an online reservation form, plus a dish ordering catalog — chef's limited private dishes capped at 5–8 servings daily with 1–3 days advance ordering, alongside Nantou Lugu tea garden and seasonal fruit categories. The backend runs on Laravel + GraphQL + Filament with full admin management.
Ink black x Shan Guan gold x vermilion accents, oversized Noto Serif TC serif headings paired with Cinzel Latin subheadings, and a giant "Shan" character watermark throughout the site.
Full-screen banner auto-rotating every 6 seconds, with a gold fade-in two-line headline and dual CTAs (Reserve Now / Browse Menu).
Banquet tables (four tiers from 6,800 to 12,800), set menus, and a la carte in three switchable tabs — dishes, prices, and recommended badges all driven by the admin via fetchMenus().
Complete fields for dining type, date and time slot, table count and party size; a GraphQL mutation writes to the admin, with parallel LINE friend-add and phone-call booking tracks.
Three categories — chef's limited private dishes (only 5–8 servings daily), Lugu tea garden, and seasonal fruit — in an advance-order inquiry mode.
The "Fresh, Freshly Caught" philosophy narrative, a stacked dual-image round-seal design, and a YouTube video carousel (watch/shorts URLs auto-converted to embeds).
Paginated article listing plus slug detail pages, with featured badges and publish scheduling.
All homepage copy and images, company settings (business hours, social QR, map), menus, articles, reservations, and contact submissions are maintained in the Filament admin.
The frontend is built with Astro 6 in server-side rendering mode with output: server and the Node adapter. First-screen content is fetched and assembled live from the backend, ensuring SEO crawlers and social previews receive complete content. Interactive components such as MediaCarousel use Vue 3 Islands with client:idle deferred hydration, prioritizing SEO and load performance.
The backend is built on Laravel, and the frontend pulls data through GraphQL via four data sources — fetchPageContent, fetchCompanySetting, fetchMenus, and fetchArticles — each with frontend fallback defaults, so the layout never breaks even when the admin has no data.
The reservation form is relayed through an Astro API route to the submitReservation mutation, protected by a 10-second timeout against hanging requests. Two backup booking channels — LINE official account friend-add and one-tap tel: dialing — run in parallel with the online form.
The site outputs Restaurant + BreadcrumbList JSON-LD (including servesCuisine and priceRange) with canonical tags. Per-page SEO / OG fields are maintainable from the admin, and the sitemap covers ordering subpages for full search-engine and social-sharing support.
Integrates GA4, GTM, LINE Tag, Microsoft Clarity, and Facebook Pixel — all managed via environment variables and loaded only in production, keeping development and staging environments clean while letting the client toggle trackers or swap tracking IDs per campaign.
Tailwind CSS 4 @theme tokenizes the full ink-black, Shan Guan gold, and vermilion color scales alongside the serif type scale, so cards, buttons, and forms keep a consistent kaiseki refinement site-wide, while IntersectionObserver reveal animations bring content into view as visitors scroll.
Restaurant bookings need real-time confidence — relying on an online form alone can leave guests unsure whether their reservation actually went through. The form is submitted via a GraphQL mutation with a 10-second timeout guard, while an official LINE account and a one-tap tel: phone link stay available as backup channels, so guests who prefer confirming by phone or LINE can book with confidence too.
This project was completed in 2026, covering the Japanese kaiseki-style brand visuals, homepage carousel, a three-type menu system (table sets / set meals / à la carte), an online reservation form, a dish-ordering catalog, and a news system, all managed through the Filament admin. Restaurant sites with this scope of menu and booking functionality typically take 8–12 weeks.
Yes. Menu data is driven centrally by the backend's fetchMenus(), and the table-set/set-meal/à-la-carte presentation along with the reservation form field design are generic architecture — swap in different dishes and brand visuals and the same foundation extends to other seafood restaurants, izakayas, or banquet halls that need online booking and menu management.
CONTACT US
Whether it's a restaurant brand site, online reservation system, menu management, or a dish ordering catalog, we can tailor the right solution for you.
Contact Us
