# @progressive-development/pd-page

[![npm version](https://img.shields.io/npm/v/@progressive-development/pd-page.svg)](https://www.npmjs.com/package/@progressive-development/pd-page)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

Page layout components for navigation, footer, and contact sections.

## Features

- **Lit 3 & TypeScript** – Modern, type-safe web components
- **Accessible** – WCAG 2.1 compliant, keyboard navigation, ARIA support
- **Themeable** – CSS Custom Properties for easy customization
- **Localized** – Built-in i18n support (EN, DE, BE)
- **Lightweight** – No heavy dependencies, tree-shakeable
- **Framework-agnostic** – Works with React, Vue, Angular, or vanilla JS
- **Smart Scroll Navigation** – Auto-highlight menu items based on scroll position with smooth scrolling
- **Responsive Menu** – Desktop navigation with automatic burger menu on mobile
- **Dual-Mode Social Media** – View mode for icon links, edit mode for managing profiles
- **Integrated Contact Form** – Split layout with company address and validated contact form

## Installation

```bash
npm install @progressive-development/pd-page
```

## Quick Start

```html
<script type="module">
  import '@progressive-development/pd-page';
</script>

<pd-menu .menuItems=${items}></pd-menu>
<pd-footer></pd-footer>
```

## Components

| Component | Description |
|-----------|-------------|
| `<pd-menu>` | Responsive navigation menu with scroll tracking |
| `<pd-footer>` | Page footer |
| `<pd-contact-us>` | Contact section with form and address |
| `<pd-socialmedia>` | Social media links (view and edit modes) |

## Documentation

📖 **Full documentation:** [pd-components.web.app](https://pd-components.web.app/)

## License

MIT © [PD Progressive Development UG](https://progressive-development.com)