# Restaurant Introduction (2023-06-04)

Single-page landing site for a vegetarian brunch restaurant (耕園7293 / G-Burger) with hero, featured dishes, menu cards and contact footer.

## Overview

| Item | Value |
|---|---|
| Created | 2023-06-04 |
| Category | Business Examples |
| HTML files | `index.html` |
| Source | [target/20230604](https://github.com/pardnio/demo-web/tree/main/target/20230604) |

## Live Preview

<iframe src="/target/20230604/" title="Restaurant Introduction (2023-06-04)" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

[Open the example in a new tab](/target/20230604/)

## Page Sections

| Section | Description |
|---|---|
| Fixed nav | Brand 耕園7293 with tagline, 4 tab items (關於耕園 / 熱門介紹 / 店長推薦 / 聯絡我們) and a hamburger button for mobile. |
| Hero (.top) | Headline 素食也能吃得精彩, intro text, Uber Eats order button, burger image, and 4 tiles each cross-fading 5 dish photos. |
| Featured dishes (.hot) | Banner image followed by 6 numbered glass cards (01-06) describing dishes, each with LEARN MORE linking to Instagram posts. |
| Manager's picks (.menu) | 8 menu cards with photo, dish name, price and an order button opening Uber Eats. |
| Contact (.contact) | Image, newsletter email input (no handler), Google Maps address link, copyright, and phone / Facebook / Instagram icons. |

## Interactions

- js/index.js: scroll listener on body sets #view-tab sel=0..3 based on precomputed section offsets (scroll-spy) to highlight the active tab.
- js/index.js scrollTo(top): custom eased smooth scroll via setInterval (30ms steps, 1/5 of remaining distance) triggered by clicking each tab.
- #button-tab toggles the .show class on #view-tab to open a full-screen mobile menu; clicking an item closes it.
- Inline onclick window.open() on buttons to Uber Eats and Instagram.

## Dependencies

| Name | Version | Source |
|---|---|---|
| Font Awesome Free | 6.5.2 | https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css |
| PDRenderKit | 1.0.0 | https://cdn.jsdelivr.net/npm/pdrenderkit@1.0.0/dist/PDRenderKit.js |
| Google Analytics (gtag.js) | - | https://www.googletagmanager.com/gtag/js?id=G-L5VYEZPVXX |
| Noto Sans TC (font-family only, not loaded by the page) | - | none |

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/index.scss` |
| Output CSS | `css/index.css` |
| Partials | `_nav.scss`, `_top.scss`, `_hot.scss`, `_menu.scss` |

index.scss holds reset, :root vars (--max-width 1024px, --col-sys #FF6B18) and the contact block; partials are @imported nested inside body selectors: _nav (fixed bar, sel-based active tab, mobile .show overlay), _top (hero, rotating bg keyframes, 25s cross-fade tiles), _hot (numbered glass cards via ::before), _menu (menu card grid with hover).

```bash
cd target/20230604
npx sass sass/index.scss css/index.css --no-source-map || exit 1
```

## Techniques

- PDRenderKit 1.0 String-prototype DOM helpers: "id".$, ._attr(), ._click(), ._class(), .class_(), .$$class(), .$child().
- Attribute-driven state: ul[sel="n"] &gt; li:nth-child(n+1) styles the active tab.
- Pure-CSS image carousel: stacked images with staggered animation-delay (0/5/10/15/20s) on a 25s opacity keyframe.
- backdrop-filter blur glass cards; flex-wrap with calc() widths for 1/2/3 columns.
- Breakpoints 480px, 640px, 768px, 800px; @media (hover: hover) and (pointer: fine) for hover effects.
- html fixed with body as the scroll container (overflow: hidden scroll), hidden scrollbars.

## External Assets

- https://pardn.io/image/head.png (favicon)
- https://pardn.io/web-template/image/20230604.jpg (og/twitter image)
- `https://ubereats.app.link/V22g35mu3zb`
- Instagram post links (https://www.instagram.com/p/...)
- Google Maps place link

## Related

- [Project Structure](/project-structure)
- [Styling Workflow](/styling-workflow)
- [Frameworks](/frameworks)