[Sugester V2](https://pomoc.sugester2.pl.md) / [CMS](https://pomoc.sugester2.pl/cms-1.md)

# [Paragrafy - tworzenie sekcji strony](https://pomoc.sugester2.pl/paragrafy-tworzenie-sekcji-strony-LPMVWqzx.md)

Paragrafy to bloki treści HTML, które składają się na zawartość strony.

## Struktura paragrafu

<table>
<tr><th>Pole</th><th>Opis</th></tr>
<tr><td><code>name</code></td><td>Nazwa identyfikująca (np. "Hero PL")</td></tr>
<tr><td><code>kind</code></td><td>Typ - zazwyczaj <code>text</code> dla HTML</td></tr>
<tr><td><code>priority</code></td><td>Kolejność: 100 = pierwszy, 50 = środek, 10 = ostatni</td></tr>
<tr><td><code>content</code></td><td>Treść HTML</td></tr>
<tr><td><code>page_id</code></td><td>ID strony (lub przypisanie przez paragraph_subjects)</td></tr>
</table>
## Priorytet i kolejność

Paragrafy sortowane są malejąco po `priority`:

```
Priority 100 → Hero (góra strony)
Priority 80  → Features
Priority 60  → Pricing
Priority 40  → Testimonials
Priority 20  → Contact Form
Priority 10  → Footer CTA (dół strony)
```

## Przykładowe sekcje

### Hero Section
```html
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-950 to-emerald-950">
  <div class="text-center px-6">
    <h1 class="text-5xl font-bold text-white mb-4">{{ title }}</h1>
    <p class="text-xl text-slate-300 mb-8">{{ tagline }}</p>
    <a href="#contact" class="bg-emerald-500 text-white px-8 py-3 rounded-full">
      Rozpocznij
    </a>
  </div>
</section>
```

### Features Grid
```html
<section class="py-20 bg-slate-900">
  <div class="max-w-6xl mx-auto px-6">
    <h2 class="text-3xl font-bold text-center text-white mb-12">Funkcje</h2>
    <div class="grid md:grid-cols-3 gap-8">
      <div class="bg-slate-800 p-6 rounded-xl">
        <div class="text-emerald-400 text-4xl mb-4">📊</div>
        <h3 class="text-xl font-semibold text-white mb-2">Monitoring</h3>
        <p class="text-slate-400">Śledzenie danych w czasie rzeczywistym</p>
      </div>
      <!-- więcej kart... -->
    </div>
  </div>
</section>
```

### Contact Form (z Sugester 2 Forms)
```html
<section id="contact" class="py-20 bg-slate-950">
  <div class="max-w-md mx-auto px-6">
    <h2 class="text-3xl font-bold text-center text-white mb-8">Kontakt</h2>
    <div data-form="contact_form_id"></div>
  </div>
</section>
<script src="https://domena.com/form/embed.js"></script>
```

## Przypisywanie do stron

### Opcja 1: Jeden paragraf = jedna strona
Podaj `page_id` przy tworzeniu:
```json
{
  "paragraph": {
    "name": "Hero Dashboard PL",
    "page_id": 1030,
    "content": "..."
  }
}
```

### Opcja 2: Jeden paragraf = wiele stron
Użyj tego samego paragrafu na wielu stronach przez UI (Przypisania).

## Zmienne w paragrafach

Paragrafy mają dostęp do zmiennych strony:
```html
<h1>{{ title }}</h1>
<p>{{ tagline }}</p>
<a href="mailto:{{ contact_email }}">{{ contact_label }}</a>
```

## Organizacja

### Konwencja nazewnictwa
```
[Sekcja] [Strona/Język]

Hero Dashboard PL
Hero Dashboard EN
Features MojaFirma
Contact Form Universal
```

### Współdzielone paragrafy
Dla elementów wspólnych (np. footer, testimonials) stwórz jeden paragraf i przypisz do wielu stron.

## Stylowanie z Tailwind

CMS ładuje Tailwind z CDN, więc możesz używać wszystkich klas:

```html
<div class="bg-gradient-to-r from-purple-600 to-purple-800 
            text-white p-8 rounded-2xl shadow-xl 
            hover:shadow-2xl transition-shadow">
  ...
</div>
```

## Debugowanie

Jeśli paragraf się nie wyświetla:
1. Sprawdź czy jest przypisany do strony
2. Sprawdź priority (może być za niski/wysoki)
3. Sprawdź czy layout ma `{% for p in paragraphs %}{{ p }}{% endfor %}`