# Basic (2022-04-08)

Single-page business landing template rendered with PDRenderKit data binding: blurred hero, card lists, icon stats, YouTube embed and rich footer.

## Overview

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

## Live Preview

<iframe src="/target/20220408/" title="Basic (2022-04-08)" loading="lazy" style="width:100%;height:640px;border:1px solid #e5e7eb;border-radius:8px"></iframe>

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

## Page Sections

| Section | Description |
|---|---|
| Header / hero | Background-image header with dark blur overlay; top bar with social icons (rendered from data.contact) and Contact mail button; sticky nav with a dropdown submenu and mobile list button; hero article with Code / GitHub buttons. |
| Article cards (section 1) | Header text plus 3 article cards (title with index, icon link, date, image with caption) generated by :for over section_1.item. |
| Icon stats band (section 2) | Black-to-steelblue gradient band with 4 icon + text blocks from section_2.item; diagonal edge drawn with a ::before gradient. |
| Image gallery (section 3) | 4 figure cards with image and linked caption from section_3.item. |
| Feature cards (section 4) | Background-image section with 4 icon feature cards and caret links from section_4.item. |
| Text + video (section 5) | Two-column block: text with two buttons, and a YouTube iframe embed with caption. |
| Footer | Blurred background footer with About + social icons, link list, contact form (name / email inputs), 3x3 thumbnail grid from footer.image, page links and copyright row. |

## Interactions

- js/index.js builds random sample data (fakeimg URLs, shuffled Font Awesome icon names via PDRenderKit Array.$random) and mounts new PD({ id: 'body', data, event, next }).
- event.show / event.close toggle the 'show' class on the mobile nav list via @click.
- next(): body scroll listener adds 'show' to #top-nav once scrolled &gt;= 64px (blurred sticky nav).

## Dependencies

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

## Styling

| Item | Value |
|---|---|
| SCSS entry | `sass/index.scss` |
| Output CSS | `css/index.css` |
| Partials | `_init.scss`, `_header.scss`, `_section2.scss`, `_section3.scss`, `_section4.scss`, `_section5.scss`, `_section6.scss`, `_footer.scss` |

_init defines rem spacing variables ($_1..$_1440), safe-area env() vars and resets; each _sectionN styles body &gt; section:nth-child(N); html is fixed and body is the scroll container.

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

## Techniques

- PDRenderKit template syntax: :for="(e, i) in ...", :class, :href, :src, {{ i }}, @click.
- position: sticky nav with backdrop-filter blur toggled by class.
- Diagonal section edges via ::before linear-gradient (transparent 49.5% / #fff 50.5%).
- Mobile-first breakpoints at 480 / 640 / 800 / 1024 / 1280 (rem vars) plus (hover: hover) and (pointer: fine) hover guards.
- Footer thumbnail grid with aspect-ratio: 1 / 1 and hover scale(110%).

## External Assets

- `https://fakeimg.pl/1024/282828/eae0d0/?text=sample`
- `https://www.youtube.com/embed/hvBHWOhPANk`
- `https://pardn.io/image/head.png`
- `https://pardn.io/web-template/image/20220408.jpg`

## Related

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