Dark Warm-Gold Restaurant Brand Site + Full Admin Content Management
2026
Dynasty Hotpot City is an all-you-can-eat hotpot and charcoal skewer restaurant in Jiaoxi, Yilan (No. 122, Heping Rd., Jiaoxi Township). Its official domain, 039887766.com, is the reservation line itself — (03) 988-7766 — so guests remember the URL at a glance. The hero opens with the "Relax & Unwind" tagline, "Let music and hotpot accompany you in a feast of fresh flavors and good moods," paired with the brand motto "Gather Around · Taste the Glory."
The site showcases 8 soup bases (pick any 2) — golden sour-spicy, numbing Sichuan pepper, seafood kombu, Thai tom yum, classic mala, northeastern pickled cabbage, pepper pork bone, and vegetarian shiitake — 10 all-you-can-eat charcoal skewers, freshly sliced whole cuts (US top blade, Angus beef, Taiwan black pork), a self-serve ingredient bar, and unlimited Meiji / Niseko ice cream and drinks. Adult hotpot starts at NT$729, hotpot + skewers at NT$828, framed by "a decade of artisan simmering craft" and a 3,000-year hotpot origin narrative.
A deep brown × warm gold gathering-table aesthetic runs through the whole site. The frontend is a framework-free Astro 5 SSR build, while the backend runs on Laravel + GraphQL + Filament, driving 12 page content sections (home, menu, gallery, reservation, and other PageContent slugs) — copy, images, menu pricing, and SEO/OG fields are all maintainable from the admin panel.
A deep brown base with warm gold accents and Noto Serif TC serif headings, creating the cozy gathering atmosphere of a hotpot restaurant.
Admin-managed hero visuals rotating every 5 seconds, overlaid with the restaurant name, tagline, and dual CTAs (Reserve a Table / View Menu & Pricing).
A 3,000-year hotpot history timeline from Shang-Zhou "ding cuisine" to the Qing dynasty, paired with a soup philosophy page to deepen the brand narrative.
An 8-soup-base grid, 10 skewers, pricing cards, and dining notes — soup base and skewer content all driven by admin-managed menu-items.
An interior and food photography grid with Lightbox viewing, with all images uploaded and managed from the admin panel.
A reservation-notes repeater plus "Call to Reserve Now" tel: and Google Maps navigation CTAs — one-tap dialing on mobile.
Publishing promo announcements such as review-for-skewer vouchers, half-price birthday deals, and 5% off for LINE friends.
Copy, images, and SEO/OG fields for all 12 page slugs are fully maintainable from the Filament admin panel.
The frontend is built with Astro 5 in server-side rendering mode — output: server with the Node adapter deployed via PM2. First-screen content is fetched live from the backend GraphQL API and pre-assembled, ensuring SEO crawlers and social previews receive complete content.
The site uses no Vue / React — the hero carousel, gallery Lightbox, and mobile menu are all implemented in native vanilla JS. Zero hydration cost and zero framework runtime translate into extreme load performance and a minimal payload, the most pragmatic choice for a content-driven restaurant site.
The backend runs Laravel as a headless CMS. The frontend calls fetchPageContent(slug) to drive 12 page content sections (home, menu, gallery, reservation, and more) and fetchCompanySetting() for site-wide company settings (phone, business hours, map). When the admin has no data, the frontend automatically falls back to built-in defaults, so no page ever renders empty.
Every PageContent slug carries its own seo_title, seo_description, seo_keyword, json_ld, and full OG fields, letting the client tune search and share appearance page by page. The site also injects Restaurant JSON-LD structured data (priceRange NT$499–NT$828) to strengthen its presence in Google restaurant search.
Integrates five tracking channels — GA4, GTM, LINE Tag, Microsoft Clarity, and Facebook Pixel — all managed through environment variables and loaded only in production, keeping dev and preview environments from polluting the data while letting the client toggle trackers or swap tracking IDs per campaign.
Tailwind CSS 4 @theme defines the warm gold / deep brown color scales and Noto Serif TC type scale as tokens, centralizing brand color and typography so cards, buttons, and forms keep a consistent, cozy gathering-table feel site-wide.
CONTACT US
Whether it's a restaurant brand site, menu & pricing system, reservation flow, or full admin content management, we can tailor the right solution for you.
Contact Us
