npm package: @feedweb/proste-menu-landing-page
Description: Landing page component for Proste Menu
Latest version: 0.3.8

# @feedweb/proste-menu-landing-page

Nowoczesny, responsywny landing page dla proste.menu zbudowany w React + TypeScript + Styled Components.

## Funkcjonalności

- ✅ **W pełni responsywny** - płynne skalowanie typografii z użyciem `clamp()`
- ✅ **Dostępność (A11y)** - zgodność z WCAG 2.1, obsługa klawiatury, screen readers
- ✅ **SEO-optimized** - meta tagi, structured data, semantic HTML
- ✅ **Performant** - zoptymalizowane czasy ładowania, preconnect dla fontów
- ✅ **TypeScript** - pełne type safety
- ✅ **Styled Components** - CSS-in-JS z pełnym wsparciem dla theme

## Design System

### Kolory
```css
--color-green-dark: #1E363C
--color-green-normal: #66AF8A
--color-green-light: #EBFED1
--color-green-gray: #374B50
--color-gray-0: #FEFFFC
--color-gray-900: #0B0B0B
--color-yellow: #EEFF00
```

### Typografia (responsywna)
- **Headline Huge**: 80px desktop → 40px mobile
- **Headline Normal**: 52px desktop → 32px mobile
- **Body Large**: 22px desktop → 18px mobile
- **Body Medium**: 18px desktop → 16px mobile
- **Body Small**: 14px
- **CTA**: 22px desktop → 18px mobile

Wszystkie rozmiary fontów skalują się płynnie dzięki funkcji CSS `clamp()`.

## Instalacja

```bash
npm install @feedweb/proste-menu-landing-page
```

## Użycie

```tsx
import { LandingPage } from '@feedweb/proste-menu-landing-page';

function App() {
  return (
    <LandingPage
      onGetStarted={() => console.log('Get started')}
      onLearnMore={() => console.log('Learn more')}
    />
  );
}
```

## Development

```bash
# Instalacja zależności
npm install

# Uruchomienie dev servera
npm run dev

# Build produkcyjny
npm run build

# Linting
npm run lint
```

## Struktura projektu

```
src/
├── components/
│   ├── Button.tsx              # Komponent przycisku CTA (3 warianty)
│   ├── Hero.tsx                # Sekcja Hero
│   ├── ValueProposition.tsx    # Sekcja Value Proposition
│   ├── SocialProof.tsx         # Sekcja Social Proof (oceny + loga)
│   ├── Features.tsx            # Sekcja Features (5 kart z obrazami)
│   ├── Testimonials.tsx        # Sekcja Testimonials (opinie klientów)
│   ├── LandingPage.tsx         # Główny komponent
│   └── index.ts
├── styles/
│   ├── GlobalStyles.ts         # Reset CSS + zmienne globalne
│   ├── Typography.ts           # Komponenty typograficzne
│   ├── Layout.ts               # Layout utilities (Container, Grid, Flex)
│   └── index.ts
├── index.ts
└── main.tsx                    # Entry point dla dev
```

## Button System

Aplikacja używa 3 wariantów buttonów:
- `fill-light-green` - wypełniony zielonym
- `border-light-green` - przezroczysty z zieloną obwódką (na ciemnym tle)
- `border-dark-green` - przezroczysty z ciemnozieloną obwódką (na jasnym tle)

Szczegółowa dokumentacja: [BUTTONS.md](BUTTONS.md)

## Accessibility Features

- ✅ Semantic HTML (nav, main, section, article)
- ✅ ARIA labels i role
- ✅ Keyboard navigation (Tab, Enter, Space)
- ✅ Focus indicators
- ✅ Skip to main content link
- ✅ Screen reader support
- ✅ Prefers reduced motion support

## SEO Features

- ✅ Meta tags (title, description, keywords)
- ✅ Open Graph (Facebook)
- ✅ Twitter Cards
- ✅ Canonical URLs
- ✅ Language tags (lang="pl")
- ✅ Structured data (Schema.org) - coming soon

## Publishing do npm

### Prerequisites

1. Zaloguj się do npm z kontem mającym dostęp do `@feedweb`:
   ```bash
   npm login
   npm whoami
   ```

### Publishing nowej wersji

1. **Zaktualizuj wersję** w `package.json`:
   ```bash
   # Patch (0.1.2 -> 0.1.3) - bug fixes
   npm version patch

   # Minor (0.1.2 -> 0.2.0) - new features
   npm version minor

   # Major (0.1.2 -> 1.0.0) - breaking changes
   npm version major
   ```

2. **Build i publish**:
   ```bash
   npm publish --access public
   ```

3. **Push do git z tagiem**:
   ```bash
   git push && git push --tags
   ```

### Quick publish (wszystkie kroki razem)

```bash
# Patch release
npm version patch && npm publish --access public && git push && git push --tags

# Minor release
npm version minor && npm publish --access public && git push && git push --tags
```

### Weryfikacja opublikowanego pakietu

```bash
npm view @feedweb/proste-menu-landing-page
```

Lub sprawdź na: https://www.npmjs.com/package/@feedweb/proste-menu-landing-page

## Browser Support

- Chrome/Edge (ostatnie 2 wersje)
- Firefox (ostatnie 2 wersje)
- Safari (ostatnie 2 wersje)
- iOS Safari (ostatnie 2 wersje)
- Android Chrome (ostatnie 2 wersje)

## License

MIT

## Roadmap

- [ ] Animacje i transitions
- [ ] Dodatkowe sekcje (Features, How It Works, Pricing, Footer)
- [ ] Dark mode support
- [ ] Internationalization (i18n)
- [ ] Structured data (Schema.org)