<!--
================================================================================
  TEMPLATE ANALYSIS — VoltPaper Theme
  Source: TemplateMo 583 Festava Live
================================================================================

1. LAYOUT DNA
   Dominant pattern: Full-viewport hero sections with dark overlays, followed by
   alternating dark/light full-width sections. Each section is completely self-
   contained with its own background treatment (image + overlay, or solid dark,
   or off-white). Content lives in fixed-width containers centered inside these
   full-bleed backdrops. An asymmetric two-column "about" section (text left,
   image-with-floating-glassmorphism-overlay right) breaks the symmetry. The
   artists section uses an asymmetric 5+7 column split with stacked smaller
   cards on the right. Editorial long-scroll with strong sectional rhythm.

2. VISUAL RHYTHM
   Alternating dark/warm/light sections create a punchy rhythm:
   Dark hero → warm image-section → light artists → dark schedule → light pricing.
   Large display typography (74px h1) creates strong hierarchy. Each section
   starts with a bold h2 heading followed by content. Dense information blocks
   are placed INSIDE breathable padded containers (100px top/bottom), creating
   tension between section density and inter-section breathing room. Horizontal
   accent bars (the gold/orange top bar) punctuate transitions.

3. DISTINCTIVE FEATURES
   a) Full-viewport background with dark semi-transparent overlay (hero + about
      + schedule sections) — immersive, cinematic feel
   b) Hover-reveal info panels on artist/content cards: translateY(100%) → 0
      with backdrop-filter blur and semi-transparent gold background
   c) Dotted-border containers (pricing cards) with absolute-positioned circular
      badge elements in the corner — unusual, tactile, not generic
   d) Animated link-fx-1: underline + animated SVG circle-arrow icon that draws
      on hover — highly distinctive micro-interaction
   e) Dual-tone accent system: gold (#F8CB2E) as primary + orange (#EE5007) as
      secondary, both used structurally (top bar gold, button orange, hover gold)
   f) Glassmorphism floating text overlays on images (about section, artists hover)
      with backdrop-filter blur + rgba white/gold backgrounds

4. COLOR STRATEGY
   Black (#000000/#111) base with two warm accent colors layered on top.
   Gold (#F8CB2E) used for: logo text, primary CTAs, link colors, pricing link,
   section titles in footer, top announcement bar background.
   Orange (#EE5007) used for: buttons, icon accents, secondary labels, schedule
   table headers, social icon backgrounds, footer top bar.
   White used for all text-on-dark. Body text on light backgrounds: #717275 (gray).
   Section alternation: dark → off-white (#f0f8ff) → dark creates high contrast.
   NOT a gradient hero approach — solid atmospheric backgrounds with overlays.

5. TYPOGRAPHY FEEL
   Geometric sans-serif ('Outfit') — clean, modern, but with optical personality
   from its slightly humanist curves. All headings bold (700), body light (300).
   Very large display h1 at 74px — the scale contrast IS the hierarchy. Small
   all-caps labels (#F8CB2E) for eyebrow text add editorial structure. Heading
   and body both use the same typeface but rely on weight/size for contrast.
   In VoltPaper: adapted to serif display headings (Georgia) + sans body for
   stronger editorial/magazine personality.

6. COMPONENT STYLE
   Pill-shaped buttons (border-radius: 100px) — rounded, friendly but bold.
   Cards: NO box-shadow by default; border-based distinction. Hover states use
   translateY reveal (not just color/shadow changes) — active, theatrical.
   Tab navigation with pill shape and shadow on active state.
   Form inputs with large padding, plain borders.
   Social icons: circular filled orange pills with hover gold flip.
   Pricing: dotted thick (5px) border for unconventional structural feel.

================================================================================
  ADAPTATION DECISIONS FOR SLASHSEO EDITORIAL PORTAL
================================================================================

  SECTION ORDER CHOSEN: Hero → Latest Posts → Topics → FAQ
  Rationale: Posts are primary content (editorial-first). Topics orient new
  readers after the hero. FAQ closes with educational depth.

  LAYOUT CHANGES (required):
  - Hero: no video (CSS grid-pattern background preserving the atmospheric dark
    feel). Asymmetric hero grid with stats column on desktop.
  - Posts: asymmetric featured-card + small-stack (from artists 5+7 DNA)
  - Topics: dotted-border cards with hover-reveal (from pricing + artists DNA)
  - FAQ: accordion with tab-pill icon animation (from contact tab DNA)

  PRESERVED:
  - Gold + Orange dual-tone palette (exact hex values)
  - Dark section base with overlays
  - Alternating dark/off-white section rhythm
  - Hover-reveal translateY animation
  - Dotted-border card style (pricing DNA)
  - Animated SVG link arrows (link-fx-1 DNA)
  - Pill-shaped buttons (border-radius: 100px)
  - Glassmorphism floating elements
  - Large display typography scale

================================================================================
-->
<!DOCTYPE html>
<html lang="pl-PL">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SchoolLine – Nowoczesna edukacja i technologie dla szkół</title>
  <meta name="description" content="Portal o innowacyjnych narzędziach dydaktycznych, szkoleniach, materiałach edukacyjnych i trendach w edukacji dla szkół i nauczycieli.">
  <link rel="canonical" href="https://schoolline.pl/">
  <meta property="og:title" content="SchoolLine – Nowoczesna edukacja i technologie dla szkół">
  <meta property="og:description" content="Portal o innowacyjnych narzędziach dydaktycznych, szkoleniach, materiałach edukacyjnych i trendach w edukacji dla szkół i nauczycieli.">
  <meta property="og:image" content="">
  <link rel="stylesheet" href="/assets/css/style.css">
<meta name="generator" content="WordPress 6.5.5" />
<link rel="stylesheet" id="voltpaper-style-css" href="/wp-content/themes/voltpaper/style.css?ver=6.5.5" type="text/css" media="all" />
<link rel="alternate" type="application/rss+xml" title="SchoolLine &raquo; Feed" href="/feed/" />
<link rel="https://api.w.org/" href="/wp-json/" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="/xmlrpc.php?rsd" />
<link rel="pingback" href="/xmlrpc.php" />
<script src="/wp-includes/js/wp-embed.min.js?ver=6.5.5" defer></script>
<link rel="stylesheet" id="rank-math-css" href="/wp-content/plugins/seo-by-rank-math/assets/css/rank-math.min.css?ver=1.0.218" type="text/css" media="all" />
<link rel="stylesheet" id="contact-form-7-css" href="/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=5.9.8" type="text/css" media="all" />
<script src="/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.9.8" defer></script>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://schoolline.pl/" />
<script type="application/ld+json">{"@context": "https://schema.org", "@type": "WebSite", "name": "SchoolLine", "url": "https://schoolline.pl", "description": "SchoolLine to portal branżowy dedykowany nowoczesnej edukacji. Publikujemy artykuły, poradniki i analizy dotyczące innowacyjnych narzędzi dydaktycznych, technologii w szkołach i rozwoju kompetencji nauczycieli. Nasza strona jest skierowana do nauczycieli, dyrektorów szkół oraz wszystkich zainteresowanych nowoczesnym podejściem do nauczania."}</script>
<script type="application/ld+json">{"@context": "https://schema.org", "@type": "Organization", "name": "SchoolLine", "url": "https://schoolline.pl", "email": "redakcja@schoolline.pl"}</script>
<script type="application/ld+json">{"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "Czym są narzędzia dydaktyczne online i jak wpływają na nauczanie?", "acceptedAnswer": {"@type": "Answer", "text": "Narzędzia dydaktyczne online to aplikacje i platformy wspierające proces nauczania, ułatwiające interakcję, personalizację oraz monitorowanie postępów uczniów. Ich wykorzystanie pozwala zwiększyć zaangażowanie i efektywność nauki."}}, {"@type": "Question", "name": "Jak nauczyciel może rozwijać swoje kompetencje cyfrowe?", "acceptedAnswer": {"@type": "Answer", "text": "Kompetencje cyfrowe można rozwijać poprzez udział w szkoleniach, webinariach, korzystanie z kursów e-learningowych oraz samodzielne testowanie nowych technologii edukacyjnych."}}, {"@type": "Question", "name": "Jakie materiały edukacyjne są polecane do nauczania zdalnego?", "acceptedAnswer": {"@type": "Answer", "text": "Do nauczania zdalnego warto wykorzystywać interaktywne prezentacje, quizy online, platformy edukacyjne oraz multimedialne zasoby, które angażują uczniów i pomagają w utrwalaniu wiedzy."}}, {"@type": "Question", "name": "Jakie są obecnie najważniejsze trendy w edukacji?", "acceptedAnswer": {"@type": "Answer", "text": "Do najważniejszych trendów należą personalizacja nauczania, integracja technologii cyfrowych, rozwój kompetencji miękkich oraz promowanie uczenia się przez całe życie."}}]}</script>
</head>
<body>

<!-- VoltPaper: partials/header.html -->
<a href="#main-content" class="skip-nav">Przejdź do treści</a>

<!-- Top bar (gold bar DNA from site-header) -->
<div class="top-bar">
  <div class="container">
    <div class="top-bar-inner">
      <span class="top-bar-brand">SchoolLine</span>
      <span class="top-bar-tagline">Portal o innowacyjnych narzędziach dydaktycznych, szkoleniach, materiałach edukacyjnych i trendach w edukacji dla szkół i nauczycieli.</span>
    </div>
  </div>
</div>

<!-- Main navigation (dark sticky navbar DNA) -->
<nav class="site-nav" aria-label="Nawigacja główna">
  <div class="container">
    <div class="nav-inner">
      <a href="/" class="nav-logo" aria-label="SchoolLine — strona główna">
        SchoolLine
      </a>

      <!-- Desktop nav -->
      <div class="nav-links" role="list">
        <a href="/" role="listitem">Strona główna</a>
        <a href="/o-portalu/" role="listitem">O portalu</a>
        <a href="/blog/" role="listitem">Blog</a>
        <a href="/artykuly/" role="listitem">Baza wiedzy</a>
      </div>

      <!-- Hamburger button -->
      <button
        class="nav-toggle"
        aria-label="Otwórz menu"
        aria-expanded="false"
        aria-controls="mobile-nav"
      >
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </div>

  <!-- Mobile nav drawer -->
  <div class="nav-mobile" id="mobile-nav" role="navigation" aria-label="Menu mobilne">
    <a href="/">Strona główna</a>
    <a href="/o-portalu/">O portalu</a>
    <a href="/blog/">Blog</a>
    <a href="/artykuly/">Baza wiedzy</a>
  </div>
</nav>
<main id="main-content">

  <!-- ============================================================
       HERO SECTION — full-viewport dark atmospheric (DNA preserved)
  ============================================================ -->
  <section class="hero-section">
    <div class="container hero-content">
      <div class="hero-grid">

        <div class="hero-main">
          <span class="eyebrow">SchoolLine</span>
          <h1>Nowoczesna edukacja i technologie dla szkół</h1>
          <div class="hero-subtitle">
            Poznaj najnowsze narzędzia dydaktyczne, inspiracje i analizy dla edukacji XXI wieku.
          </div>
          <div class="hero-cta">
            <a href="/blog/" class="btn btn-primary">
              Czytaj artykuły
            </a>
            <a href="/blog/" class="link-arrow link-arrow-white">
              Przeglądaj artykuły
              <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
        </div>

        <!-- Meta stats — asymmetric DNA -->
        <div class="hero-meta" aria-hidden="true">
          <div class="hero-meta-item">
            <div class="num">100+</div>
            <div class="label">Artykułów</div>
          </div>
          <div class="hero-meta-item">
            <div class="num">10+</div>
            <div class="label">Tematów</div>
          </div>
        </div>

      </div>
      <hr class="hero-rule">
    </div>
  </section>


  <!-- ============================================================
       LATEST POSTS — dark section, asymmetric grid (artists DNA)
  ============================================================ -->
  <section class="posts-section section-pad">
    <div class="container">

      <div class="posts-section-header">
        <div>
          <span class="eyebrow" style="color:var(--gold)">Aktualne treści</span>
          <h2 class="text-white" style="margin-bottom:0;">Najnowsze artykuły</h2>
        </div>
        <a href="/blog/" class="link-arrow link-arrow-white">
          Wszystkie artykuły
          <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
            <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
      </div>

      <div class="posts-asymmetric">

        <!-- Featured post (first) — large card -->
        <article class="post-card-featured">
          <div class="post-bg">
            <img src="/wp-content/uploads/2026/06/nowoczesne-narzedzia-wspierajace-edukacje.jpg" alt="Jak nowoczesne narzędzia zmieniają pracę nauczyciela w szkole">
          </div>
          <div class="post-body">
            <p class="post-date">
              <time datetime="2026-06-26">2026-06-26</time>
            </p>
            <h3><a href="/nowoczesne-narzedzia-wspierajace-edukacje/" style="color:inherit;text-decoration:none;">Jak nowoczesne narzędzia zmieniają pracę nauczyciela w szkole</a></h3>
            <div class="post-excerpt">Technologia coraz bardziej wpływa na edukację, oferując nauczycielom narzędzia do personalizacji nauczania, interaktywności oraz efektywnej organizacji pracy. Sprawdzamy, jak nowoczesne rozwiązania wspierają codzienne zadania pedagogów.</div>
            <a href="/nowoczesne-narzedzia-wspierajace-edukacje/" class="link-arrow link-arrow-white">
              Czytaj artykuł
              <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
        </article>

        <!-- Stack of smaller posts -->
        <div class="posts-stack">
          <article class="post-card-small">
            <div class="post-cover-sm">
              <img src="/wp-content/uploads/2026/06/kurs-ratownika-wodnego-ile-trwa.jpg" alt="Ile trwa kurs ratownika wodnego i od czego zależy czas szkolenia?">
            </div>
            <div class="post-content-sm">
              <p class="post-date">
                <time datetime="2026-06-24">2026-06-24</time>
              </p>
              <h4><a href="/kurs-ratownika-wodnego-ile-trwa/" style="color:inherit;text-decoration:none;">Ile trwa kurs ratownika wodnego i od czego zależy czas szkolenia?</a></h4>
              <div class="post-excerpt-sm">Czas trwania kursu ratownika wodnego nie jest stały i zależy od wielu czynników takich jak program, intensywność zajęć oraz wymagania organizatora. Dowiedz się, jak wygląda podział na teorię i praktykę oraz jakie warunki trzeba spełnić, aby zdobyć uprawnienia ratownicze.</div>
              <a href="/kurs-ratownika-wodnego-ile-trwa/" class="link-arrow link-arrow-white" style="font-size:11px;">
                Czytaj
                <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                  <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </a>
            </div>
          </article>
          <article class="post-card-small">
            <div class="post-cover-sm">
              <img src="/wp-content/uploads/2026/05/ocena-wybor-oprogramowania-edukacyjnego-szkoly.jpg" alt="Jak ocenić i wybrać oprogramowanie edukacyjne dla szkół? Kompleksowy przewodnik">
            </div>
            <div class="post-content-sm">
              <p class="post-date">
                <time datetime="2026-06-24">2026-06-24</time>
              </p>
              <h4><a href="/ocena-wybor-oprogramowania-edukacyjnego-szkoly/" style="color:inherit;text-decoration:none;">Jak ocenić i wybrać oprogramowanie edukacyjne dla szkół? Kompleksowy przewodnik</a></h4>
              <div class="post-excerpt-sm">Wybór odpowiedniego oprogramowania edukacyjnego to klucz do nowoczesnej i efektywnej edukacji. Dowiedz się, jak dopasować narzędzia do potrzeb szkoły, jakie funkcje są niezbędne oraz jak przeprowadzić wdrożenie, które zwiększy zaangażowanie uczniów i ułatwi pracę nauczycieli.</div>
              <a href="/ocena-wybor-oprogramowania-edukacyjnego-szkoly/" class="link-arrow link-arrow-white" style="font-size:11px;">
                Czytaj
                <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                  <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </a>
            </div>
          </article>
          <article class="post-card-small">
            <div class="post-cover-sm">
              <img src="/wp-content/uploads/2026/06/jak-dziala-koparka-praktyczne-wyjasnienie-mechanizmu-i-sterowania-maszyna-budowlana.jpg" alt="Jak działa koparka: praktyczne wyjaśnienie mechanizmu i sterowania maszyną budowlaną">
            </div>
            <div class="post-content-sm">
              <p class="post-date">
                <time datetime="2026-06-22">2026-06-22</time>
              </p>
              <h4><a href="/jak-dziala-koparka-praktyczne-wyjasnienie-mechanizmu-i-sterowania-maszyna-budowlana/" style="color:inherit;text-decoration:none;">Jak działa koparka: praktyczne wyjaśnienie mechanizmu i sterowania maszyną budowlaną</a></h4>
              <div class="post-excerpt-sm">Wstęp Koparka budowlana to zaawansowana maszyna umożliwiająca wykonywanie prac ziemnych, podnoszenie oraz przenoszenie materiałów na placu budowy. Mechanizm działania koparki opiera się na hydraulice...</div>
              <a href="/jak-dziala-koparka-praktyczne-wyjasnienie-mechanizmu-i-sterowania-maszyna-budowlana/" class="link-arrow link-arrow-white" style="font-size:11px;">
                Czytaj
                <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                  <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                  <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
              </a>
            </div>
          </article>
        </div>

      </div>
    </div>
  </section>


  <!-- ============================================================
       TOPICS — off-white section, dotted borders + hover reveal
  ============================================================ -->
  <section class="topics-section section-pad">
    <div class="container">

      <div class="topics-section-header">
        <div>
          <span class="eyebrow">Czym się zajmujemy</span>
          <h2>Tematy portalu</h2>
          <p>Obszary tematyczne, które eksplorujemy w naszych artykułach i analizach.</p>
        </div>
        <a href="/blog/" class="link-arrow" style="color:var(--orange);border-bottom-color:var(--orange);">
          Czytaj artykuły
          <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
            <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </a>
      </div>

      <div class="topics-grid">
        <div class="topic-card">
          <span class="topic-num">01</span>
          <h3>Nowoczesne narzędzia dydaktyczne</h3>
          <div class="topic-desc">Opisujemy najnowsze rozwiązania technologiczne i cyfrowe wspierające nauczanie oraz wdrażanie ich w szkołach.</div>

          <!-- Hover reveal overlay (artists-hover DNA) -->
          <div class="topic-hover" aria-hidden="true">
            <div class="topic-desc">Opisujemy najnowsze rozwiązania technologiczne i cyfrowe wspierające nauczanie oraz wdrażanie ich w szkołach.</div>
            <a href="/blog/" class="link-arrow link-arrow-white" style="color:var(--white);">
              Dowiedz się więcej
              <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
        </div>
        <div class="topic-card">
          <span class="topic-num">02</span>
          <h3>Szkolenia i rozwój nauczycieli</h3>
          <div class="topic-desc">Prezentujemy metody rozwoju zawodowego nauczycieli, szkolenia, webinaria oraz dobre praktyki doskonalenia kompetencji.</div>

          <!-- Hover reveal overlay (artists-hover DNA) -->
          <div class="topic-hover" aria-hidden="true">
            <div class="topic-desc">Prezentujemy metody rozwoju zawodowego nauczycieli, szkolenia, webinaria oraz dobre praktyki doskonalenia kompetencji.</div>
            <a href="/blog/" class="link-arrow link-arrow-white" style="color:var(--white);">
              Dowiedz się więcej
              <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
        </div>
        <div class="topic-card">
          <span class="topic-num">03</span>
          <h3>Materiały edukacyjne</h3>
          <div class="topic-desc">Publikujemy recenzje, zestawienia oraz darmowe materiały i zasoby wspierające naukę w różnych przedmiotach.</div>

          <!-- Hover reveal overlay (artists-hover DNA) -->
          <div class="topic-hover" aria-hidden="true">
            <div class="topic-desc">Publikujemy recenzje, zestawienia oraz darmowe materiały i zasoby wspierające naukę w różnych przedmiotach.</div>
            <a href="/blog/" class="link-arrow link-arrow-white" style="color:var(--white);">
              Dowiedz się więcej
              <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
        </div>
        <div class="topic-card">
          <span class="topic-num">04</span>
          <h3>Trendy w edukacji</h3>
          <div class="topic-desc">Analizujemy nowe kierunki i badania w edukacji, omawiamy zmiany w podstawach programowych i inspirujące inicjatywy szkolne.</div>

          <!-- Hover reveal overlay (artists-hover DNA) -->
          <div class="topic-hover" aria-hidden="true">
            <div class="topic-desc">Analizujemy nowe kierunki i badania w edukacji, omawiamy zmiany w podstawach programowych i inspirujące inicjatywy szkolne.</div>
            <a href="/blog/" class="link-arrow link-arrow-white" style="color:var(--white);">
              Dowiedz się więcej
              <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
                <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </a>
          </div>
        </div>
      </div>

    </div>
  </section>


  <!-- ============================================================
       FAQ — dark section with grid layout (contact tab DNA)
  ============================================================ -->
  <section class="faq-section section-pad">
    <div class="container">
      <div class="faq-layout">

        <div class="faq-intro">
          <span class="eyebrow" style="color:var(--gold)">Wiedza i odpowiedzi</span>
          <h2>Najczęściej zadawane pytania</h2>
          <p>Odpowiedzi na kluczowe pytania dotyczące tematyki portalu.</p>
          <a href="/blog/" class="link-arrow link-arrow-white" style="margin-top:12px;">
            Więcej w artykułach
            <svg class="arr" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
              <circle cx="16" cy="16" r="15.5" stroke="currentColor"/>
              <path d="M11 16h10M17 12l4 4-4 4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </a>
        </div>

        <div class="faq-list" role="list">
          <div class="faq-item" role="listitem">
            <button
              class="faq-q"
              aria-expanded="false"
              aria-controls="faq-answer-1"
            >
              <span class="q-text">Czym są narzędzia dydaktyczne online i jak wpływają na nauczanie?</span>
              <span class="q-icon" aria-hidden="true">+</span>
            </button>
            <div
              class="faq-answer"
              id="faq-answer-1"
              role="region"
            >
              <div class="faq-answer-inner">
                Narzędzia dydaktyczne online to aplikacje i platformy wspierające proces nauczania, ułatwiające interakcję, personalizację oraz monitorowanie postępów uczniów. Ich wykorzystanie pozwala zwiększyć zaangażowanie i efektywność nauki.
              </div>
            </div>
          </div>
          <div class="faq-item" role="listitem">
            <button
              class="faq-q"
              aria-expanded="false"
              aria-controls="faq-answer-2"
            >
              <span class="q-text">Jak nauczyciel może rozwijać swoje kompetencje cyfrowe?</span>
              <span class="q-icon" aria-hidden="true">+</span>
            </button>
            <div
              class="faq-answer"
              id="faq-answer-2"
              role="region"
            >
              <div class="faq-answer-inner">
                Kompetencje cyfrowe można rozwijać poprzez udział w szkoleniach, webinariach, korzystanie z kursów e-learningowych oraz samodzielne testowanie nowych technologii edukacyjnych.
              </div>
            </div>
          </div>
          <div class="faq-item" role="listitem">
            <button
              class="faq-q"
              aria-expanded="false"
              aria-controls="faq-answer-3"
            >
              <span class="q-text">Jakie materiały edukacyjne są polecane do nauczania zdalnego?</span>
              <span class="q-icon" aria-hidden="true">+</span>
            </button>
            <div
              class="faq-answer"
              id="faq-answer-3"
              role="region"
            >
              <div class="faq-answer-inner">
                Do nauczania zdalnego warto wykorzystywać interaktywne prezentacje, quizy online, platformy edukacyjne oraz multimedialne zasoby, które angażują uczniów i pomagają w utrwalaniu wiedzy.
              </div>
            </div>
          </div>
          <div class="faq-item" role="listitem">
            <button
              class="faq-q"
              aria-expanded="false"
              aria-controls="faq-answer-4"
            >
              <span class="q-text">Jakie są obecnie najważniejsze trendy w edukacji?</span>
              <span class="q-icon" aria-hidden="true">+</span>
            </button>
            <div
              class="faq-answer"
              id="faq-answer-4"
              role="region"
            >
              <div class="faq-answer-inner">
                Do najważniejszych trendów należą personalizacja nauczania, integracja technologii cyfrowych, rozwój kompetencji miękkich oraz promowanie uczenia się przez całe życie.
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

</main>

<!-- VoltPaper: partials/footer.html -->
<footer class="site-footer" role="contentinfo">

  <!-- Orange top bar (secondary-color banner DNA) -->
  <div class="footer-top">
    <div class="container">
      <div class="footer-top-inner">
        <h2>SchoolLine</h2>
        <p style="color:rgba(255,255,255,0.85);margin:0;font-size:15px;">Portal o innowacyjnych narzędziach dydaktycznych, szkoleniach, materiałach edukacyjnych i trendach w edukacji dla szkół i nauczycieli.</p>
      </div>
    </div>
  </div>

  <!-- Footer body -->
  <div class="footer-body">
    <div class="container">
      <div class="footer-grid">

        <!-- Brand column -->
        <div class="footer-brand">
          <h3>SchoolLine</h3>
          <p>Portal o innowacyjnych narzędziach dydaktycznych, szkoleniach, materiałach edukacyjnych i trendach w edukacji dla szkół i nauczycieli.</p>
          <div class="footer-contact-email" style="margin-top:20px;">
            <p class="footer-col-title">Kontakt</p>
            <a href="mailto:redakcja@schoolline.pl">
              <svg class="email-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                <rect x="1" y="3" width="14" height="10" rx="1.5" stroke="currentColor" stroke-width="1.2"/>
                <path d="M1 5l7 5 7-5" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
              </svg>
              redakcja@schoolline.pl
            </a>
          </div>
        </div>

        <!-- Nav links column -->
        <div>
          <p class="footer-col-title">Nawigacja</p>
          <ul class="footer-links">
            <li><a href="/">Strona główna</a></li>
            <li><a href="/o-portalu/">O portalu</a></li>
            <li><a href="/blog/">Blog</a></li>
            <li><a href="/artykuly/">Baza wiedzy</a></li>
          </ul>
        </div>

        <!-- About column -->
        <div>
          <p class="footer-col-title">O portalu</p>
          <p style="color:rgba(255,255,255,0.45);font-size:14px;font-weight:300;line-height:1.7;">
            Portal informacyjny publikujący artykuły, poradniki i analizy.<br>
            Rzetelna wiedza w jednym miejscu.
          </p>
        </div>

      </div>
    </div>
  </div>

  <!-- Footer bottom -->
  <div class="footer-bottom">
    <div class="container">
      <div class="footer-bottom-inner">
        <p class="copyright">
          &copy;  SchoolLine. Wszelkie prawa zastrzeżone.
        </p>
        <p class="copyright">schoolline.pl</p>
      </div>
    </div>
  </div>

</footer>

<script src="/assets/js/main.js"></script>
</body>
</html>