@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

--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

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

Użycie

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

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

Development

# 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

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:

   npm login
   npm whoami

Publishing nowej wersji

1. Zaktualizuj wersję w package.json:

   # 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:

   npm publish --access public

3. Push do git z tagiem:

   git push && git push --tags

Quick publish (wszystkie kroki razem)

# 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

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)