Paragrafy - tworzenie sekcji strony

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

Struktura paragrafu

Pole Opis

name	Nazwa identyfikująca (np. “Hero PL”)
kind	Typ - zazwyczaj text dla HTML
priority	Kolejność: 100 = pierwszy, 50 = środek, 10 = ostatni
content	Treść HTML
page_id	ID strony (lub przypisanie przez paragraph_subjects)

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

<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

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

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

{
  "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:

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

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