Self Care - Landing Page

Statyczna strona landing page dla usługi Self Care z formularzem kontaktowym, przygotowana do wdrożenia na Cloudflare Pages.

Tech Stack

• Frontend: Vanilla JavaScript, HTML5, CSS3
• Hosting: Cloudflare Pages
• Security: Custom HTTP headers via _headers config

Projekt nie używa żadnych frameworków ani build tools — tylko czysty HTML/CSS/JS dla maksymalnej wydajności i szybkości ładowania.

Funkcjonalności

(unverified — confirm with team)

• ✨ Nowoczesny i responsywny design
• 📝 Formularz kontaktowy z walidacją
• 🎨 Gradient background i animacje
• ⚡ Szybkie ładowanie strony
• 📱 W pełni responsywna na wszystkich urządzeniach
• 🔒 Bezpieczne nagłówki HTTP
• ✉️ Walidacja formularza w czasie rzeczywistym

Struktura projektu

self-care/
├── index.html              # Główna strona HTML
├── styles.css              # Style CSS
├── script.js               # Logika JavaScript (walidacja i submit formularza)
├── _headers                # Konfiguracja HTTP headers dla Cloudflare Pages
├── .gitignore              # Git ignore rules
├── FIGMA_DESIGN_TIPS.md    # Wskazówki dotyczące designu w Figma
├── FIGMA_TO_HTML.md        # Proces konwersji Figma → HTML
├── GITHUB_DEPLOY.md        # Instrukcje wdrożenia przez GitHub
└── README.md               # Dokumentacja projektu

Setup & Run

Lokalne uruchomienie

Projekt nie wymaga instalacji dependencies. Wystarczy otworzyć index.html w przeglądarce:

# Opcja 1: bezpośrednio w przeglądarce
open index.html

# Opcja 2: lokalny serwer (jeśli potrzebujesz testować CORS/fetch)
python3 -m http.server 8000
# lub
npx serve .

Strona będzie dostępna pod http://localhost:8000

Deployment na Cloudflare Pages

Opcja 1: Przez GitHub (zalecane)

1. Wypushuj kod do repozytorium GitHub
2. Otwórz Cloudflare Dashboard
3. Przejdź do Workers & Pages > Create Application > Pages > Connect to Git
4. Wybierz repozytorium Wellysa/self-care
5. Skonfiguruj build:
   • Framework preset: None (lub Plain HTML)
   • Build command: (pozostaw puste)
   • Build output directory: / (root directory)
   • Branch: main
6. Kliknij Save and Deploy
7. Strona będzie dostępna pod https://self-care.pages.dev (lub custom domain)

Szczegółowe instrukcje: zobacz GITHUB_DEPLOY.md

Opcja 2: Przez Wrangler CLI

# Zainstaluj Wrangler globalnie
npm install -g wrangler

# Zaloguj się do Cloudflare
wrangler login

# Deploy z root directory
wrangler pages deploy . --project-name=self-care

Opcja 3: GitHub Actions (CI/CD)

Dodaj workflow do .github/workflows/deploy.yml:

name: Deploy to Cloudflare Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          command: pages deploy . --project-name=self-care

Konfiguracja formularza

(unverified — confirm with team)

Obecnie formularz prawdopodobnie używa symulacji wysyłki. Aby podłączyć prawdziwy backend:

1. Utwórz Cloudflare Workers funkcję, użyj zewnętrznego API (np. FormSpree, SendGrid), lub własny endpoint
2. Zaktualizuj funkcję submitForm() w script.js:

async function submitForm(data) {
    const response = await fetch('https://your-api-endpoint.com/contact', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    });
    
    if (!response.ok) {
        throw new Error('Failed to submit form');
    }
    
    return response.json();
}

Dostosowanie

Zmiana kolorów

(unverified — confirm variable names in styles.css)

Edytuj zmienne CSS w styles.css:

:root {
    --primary-color: #667eea;
    --primary-dark: #5a67d8;
    --secondary-color: #764ba2;
    /* ... */
}

Zmiana treści

Edytuj plik index.html:

• Tytuł strony: zmień zawartość <title>
• Logo/brand: aktualizuj .logo lub podobny selektor
• Hero section: zmień teksty w głównej sekcji
• Formularz: dostosuj pola, etykiety, placeholdery

Zmiana designu

Zobacz dokumentację w:

• FIGMA_DESIGN_TIPS.md — best practices dla pracy w Figma
• FIGMA_TO_HTML.md — workflow konwersji designu do kodu

Wydajność

Strona została zoptymalizowana pod kątem:

• ⚡ Zero dependencies — brak npm/webpack/bundlers
• 📦 Tylko statyczne pliki (~19KB total: JS 6.5KB + HTML 6.5KB + CSS 6.5KB)
• 🎨 Wbudowane style (bez zewnętrznych frameworków CSS)
• 🚀 Szybkie ładowanie dzięki Cloudflare CDN i edge caching
• 🔒 Security headers w _headers (CSP, X-Frame-Options, etc.)

Status projektu

✅ Production-ready — projekt gotowy do wdrożenia
📍 Default branch: main
🌐 Hosting: Cloudflare Pages

Wsparcie

Jeśli masz pytania lub potrzebujesz pomocy:

• Utwórz issue w repozytorium GitHub
• Skontaktuj się z zespołem Wellysa

Licencja

(unverified — confirm with team)

MIT License — możesz swobodnie używać tego projektu dla swoich celów.