templates/index/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Zatoka Kodu - Szkoła Programowania dla Dzieci{% endblock %}
  5. {% block body %}
  6.     <!-- **************** MAIN CONTENT START **************** -->
  7.     <main>
  8.         <!-- =======================
  9.         Hero Section START -->
  10.         <section class="hero-section position-relative overflow-hidden py-5 py-lg-7">
  11.             <!-- Animated background elements -->
  12.             <div class="hero-bg-elements">
  13.                 <div class="floating-shape shape-1"></div>
  14.                 <div class="floating-shape shape-2"></div>
  15.                 <div class="floating-shape shape-3"></div>
  16.                 <div class="floating-shape shape-4"></div>
  17.             </div>
  18.             
  19.             <div class="container position-relative">
  20.                 <div class="row align-items-center g-5">
  21.                     <!-- Left content START -->
  22.                     <div class="col-lg-6 text-center text-lg-start">
  23.                         <div class="hero-content" data-aos="fade-right">
  24.                             <h1 class="hero-title mb-4">
  25.                                 <span class="text-gold">Zaprogramuj</span> przyszłość swojego dziecka
  26.                             </h1>
  27.                             <p class="hero-subtitle mb-4">
  28.                                 Uczymy dzieci programowania w sposób <strong>zabawny i interaktywny</strong>. 
  29.                                 Scratch, Minecraft, Robotyka - wszystko w jednym miejscu!
  30.                                 <br>Dołącz do grona tysiąca zadowolonych rodziców!
  31.                             </p>
  32.                             <div class="hero-stats mb-4">
  33.                                 <div class="row g-3">
  34.                                     <div class="col-4">
  35.                                         <div class="stat-item">
  36.                                             <div class="stat-number">1000+</div>
  37.                                             <div class="stat-label">Zadowolonych dzieci</div>
  38.                                         </div>
  39.                                     </div>
  40.                                     <div class="col-4">
  41.                                         <div class="stat-item">
  42.                                             <div class="stat-number">70+</div>
  43.                                             <div class="stat-label">Szkoł partnerskich</div>
  44.                                         </div>
  45.                                     </div>
  46.                                     <div class="col-4">
  47.                                         <div class="stat-item">
  48.                                             <div class="stat-number">5</div>
  49.                                             <div class="stat-label">Lat doświadczenia</div>
  50.                                         </div>
  51.                                     </div>
  52.                                 </div>
  53.                             </div>
  54.                             <div class="hero-buttons">
  55.                                 <a href="#courses" class="btn btn-primary btn-lg me-3 mb-3">
  56.                                     <i class="fas fa-rocket me-2"></i>Zobacz kursy
  57.                                 </a>
  58.                                 <a href="https://zatokakodu.langlion.com/forms/rejestracja" class="btn btn-gold btn-lg mb-3">
  59.                                     <i class="fas fa-user-plus me-2"></i>Zapisz dziecko
  60.                                 </a>
  61.                             </div>
  62.                         </div>
  63.                     </div>
  64.                     <!-- Left content END -->
  66.                     <!-- Right content START -->
  67.                     <div class="col-lg-6 text-center">
  68.                         <div class="hero-image" data-aos="fade-left">
  69.                             <img src="{{ asset('./assets/images/element/banner-class.jpg') }}" alt="Dzieci programujące" class="img-fluid rounded-4">
  70.                             <div class="floating-card">
  71.                                 <a href="https://zatokakodu.langlion.com/forms/rejestracja" class="text-decoration-none">
  72.                                     <div class="card border-0 shadow-sm">
  73.                                         <div class="card-body p-3">
  74.                                             <div class="d-flex align-items-center">
  75.                                                 <div class="avatar-sm me-3">
  76.                                                     <i class="fas fa-star text-warning fa-2x"></i>
  77.                                                 </div>
  78.                                                 <div class="text-start">
  79.                                                     <div class="fw-bold text-primary fs-5">Zapisz swoje dziecko na zajęcia</div>
  80.                                                 </div>
  81.                                             </div>
  82.                                         </div>
  83.                                     </div>
  84.                                 </a>
  85.                             </div>
  86.                         </div>
  87.                     </div>
  88.                     <!-- Right content END -->
  89.                 </div>
  90.             </div>
  91.         </section>
  92.         <!-- =======================
  93.         Hero Section END -->
  95.         <!-- =======================
  96.         Courses Section START -->
  97.         <section id="courses" class="py-5 py-lg-7 bg-light">
  98.             <div class="container">
  99.                 <div class="row justify-content-center mb-5">
  100.                     <div class="col-lg-8 text-center">
  101.                         <h2 class="section-title mb-3" data-aos="fade-up">
  102.                             Nasze <span class="text-gold">kursy programowania</span>
  103.                         </h2>
  104.                         <p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">
  105.                             Każdy kurs jest dostosowany do wieku i umiejętności dziecka
  106.                         </p>
  107.                     </div>
  108.                 </div>
  110.                 <div class="row g-4">
  111.                     <!-- Scratch Course -->
  112.                     <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
  113.                         <div class="course-card card border-0 shadow-sm h-100">
  114.                             <div class="card-body p-4">
  115.                                 <div class="course-icon mb-3">
  116.                                     <img src="{{ asset('./assets/images/main/scratch-logo.png') }}" alt="Scratch" class="img-fluid" style="max-height: 80px;">
  117.                                 </div>
  118.                                 <h4 class="card-title mb-3 text-center">Programowanie w Scratch</h4>
  119.                                 <p class="card-text mb-4">
  120.                                     Uczymy podstaw programowania poprzez tworzenie gier, animacji i interaktywnych historii. 
  121.                                     Idealne dla dzieci w wieku 7-12 lat.
  122.                                 </p>
  123.                                 <ul class="course-features mb-4">
  124.                                     <li><i class="fas fa-check text-success me-2"></i>Wizualne programowanie blokowe</li>
  125.                                     <li><i class="fas fa-check text-success me-2"></i>Tworzenie własnych gier</li>
  126.                                     <li><i class="fas fa-check text-success me-2"></i>Rozwój kreatywności</li>
  127.                                     <li><i class="fas fa-check text-success me-2"></i>Logiczne myślenie</li>
  128.                                 </ul>
  129.                                 <a href="/scratch" class="btn btn-gold w-100">
  130.                                     <i class="fas fa-arrow-right me-2"></i>Dowiedz się więcej
  131.                                 </a>
  132.                             </div>
  133.                         </div>
  134.                     </div>
  136.                     <!-- Minecraft Course -->
  137.                     <div class="col-lg-4" data-aos="fade-up" data-aos-delay="300">
  138.                         <div class="course-card card border-0 shadow-sm h-100">
  139.                             <div class="card-body p-4">
  140.                                 <div class="course-icon mb-3">
  141.                                     <img src="{{ asset('./assets/images/minecraft-logo.png') }}" alt="Minecraft" class="img-fluid" style="max-height: 80px; width: auto;">
  142.                                 </div>
  143.                                 <h4 class="card-title mb-3 text-center">Matematyka w Minecraft</h4>
  144.                                 <p class="card-text mb-4">
  145.                                     Łączymy pasję do Minecrafta z nauką matematyki. 
  146.                                     Dzieci uczą się matematyki poprzez praktyczne zastosowania w świecie gry.
  147.                                 </p>
  148.                                 <ul class="course-features mb-4">
  149.                                     <li><i class="fas fa-check text-success me-2"></i>Dodawanie i odejmowanie</li>
  150.                                     <li><i class="fas fa-check text-success me-2"></i>Mnożenie i dzielenie</li>
  151.                                     <li><i class="fas fa-check text-success me-2"></i>Figury geometryczne</li>
  152.                                     <li><i class="fas fa-check text-success me-2"></i>Praktyczne zastosowania</li>
  153.                                 </ul>
  154.                                 <a href="/minecraft" class="btn btn-gold w-100">
  155.                                     <i class="fas fa-arrow-right me-2"></i>Dowiedz się więcej
  156.                                 </a>
  157.                             </div>
  158.                         </div>
  159.                     </div>
  161.                     <!-- Robotics Course -->
  162.                     <div class="col-lg-4" data-aos="fade-up" data-aos-delay="400">
  163.                         <div class="course-card card border-0 shadow-sm h-100">
  164.                             <div class="card-body p-4">
  165.                                 <div class="course-icon mb-3">
  166.                                     <img src="{{ asset('./assets/images/main/milo-logo.png') }}" alt="Robotyka" class="img-fluid" style="max-height: 80px;">
  167.                                 </div>
  168.                                 <h4 class="card-title mb-3 text-center">Robotyka Lego WeDo 2.0</h4>
  169.                                 <p class="card-text mb-4">
  170.                                     Budujemy i programujemy roboty z klocków Lego. 
  171.                                     Dzieci uczą się mechaniki, elektroniki i programowania w praktyce.
  172.                                 </p>
  173.                                 <ul class="course-features mb-4">
  174.                                     <li><i class="fas fa-check text-success me-2"></i>Budowanie robotów z Lego</li>
  175.                                     <li><i class="fas fa-check text-success me-2"></i>Programowanie ruchów</li>
  176.                                     <li><i class="fas fa-check text-success me-2"></i>Rozumienie mechaniki</li>
  177.                                     <li><i class="fas fa-check text-success me-2"></i>Rozwiązywanie problemów</li>
  178.                                 </ul>
  179.                                 <a href="/robotyka" class="btn btn-gold w-100">
  180.                                     <i class="fas fa-arrow-right me-2"></i>Dowiedz się więcej
  181.                                 </a>
  182.                             </div>
  183.                         </div>
  184.                     </div>
  185.                 </div>
  186.             </div>
  187.         </section>
  188.         <!-- =======================
  189.         Courses Section END -->
  191.         <!-- =======================
  192.         Benefits Section START -->
  193.         <section class="py-5 py-lg-7">
  194.             <div class="container">
  195.                 <div class="row justify-content-center mb-5">
  196.                     <div class="col-lg-8 text-center">
  197.                         <h2 class="section-title mb-3" data-aos="fade-up">
  198.                             Dlaczego warto uczyć dziecko <span class="text-gold">programowania</span>?
  199.                         </h2>
  200.                         <p class="section-subtitle" data-aos="fade-up" data-aos-delay="100">
  201.                             Programowanie to nie tylko umiejętność techniczna, ale przede wszystkim rozwój kluczowych kompetencji
  202.                         </p>
  203.                     </div>
  204.                 </div>
  206.                 <div class="row g-4">
  207.                     <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
  208.                         <div class="benefit-card text-center">
  209.                             <div class="benefit-icon mb-3">
  210.                                 <i class="fas fa-brain fa-3x text-gold"></i>
  211.                             </div>
  212.                             <h5 class="benefit-title mb-3">Logiczne myślenie</h5>
  213.                             <p class="benefit-text">
  214.                                 Programowanie uczy rozwiązywania problemów krok po kroku i analitycznego myślenia
  215.                             </p>
  216.                         </div>
  217.                     </div>
  219.                     <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
  220.                         <div class="benefit-card text-center">
  221.                             <div class="benefit-icon mb-3">
  222.                                 <i class="fas fa-lightbulb fa-3x text-warning"></i>
  223.                             </div>
  224.                             <h5 class="benefit-title mb-3">Kreatywność</h5>
  225.                             <p class="benefit-text">
  226.                                 Dzieci tworzą własne projekty, rozwijając wyobraźnię i innowacyjne podejście
  227.                             </p>
  228.                         </div>
  229.                     </div>
  231.                     <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="400">
  232.                         <div class="benefit-card text-center">
  233.                             <div class="benefit-icon mb-3">
  234.                                 <i class="fas fa-users fa-3x text-success"></i>
  235.                             </div>
  236.                             <h5 class="benefit-title mb-3">Współpraca</h5>
  237.                             <p class="benefit-text">
  238.                                 Praca w grupach uczy komunikacji, dzielenia się pomysłami i wspólnego rozwiązywania problemów
  239.                             </p>
  240.                         </div>
  241.                     </div>
  243.                     <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="500">
  244.                         <div class="benefit-card text-center">
  245.                             <div class="benefit-icon mb-3">
  246.                                 <i class="fas fa-rocket fa-3x text-danger"></i>
  247.                             </div>
  248.                             <h5 class="benefit-title mb-3">Przyszłość</h5>
  249.                             <p class="benefit-text">
  250.                                 Umiejętności cyfrowe to klucz do sukcesu w przyszłym świecie technologii
  251.                             </p>
  252.                         </div>
  253.                     </div>
  254.                 </div>
  255.             </div>
  256.         </section>
  257.         <!-- =======================
  258.         Benefits Section END -->
  260.         <!-- =======================
  261.         Najważniejsze informacje START -->
  262.         <section class="py-5 py-lg-7 bg-light">
  263.             <div class="container">
  264.                 <div class="row justify-content-center mb-5">
  265.                     <div class="col-lg-8 text-center">
  266.                         <h2 class="section-title mb-3" data-aos="fade-up">
  267.                             Najważniejsze <span class="text-gold">informacje</span>
  268.                         </h2>
  269.                         <p class="lead text-muted" data-aos="fade-up" data-aos-delay="100">
  270.                             Kluczowe szczegóły dotyczące organizacji zajęć
  271.                         </p>
  272.                     </div>
  273.                 </div>
  275.                 <div class="row g-4 justify-content-center">
  276.                     <!-- Zajęcia w szkole -->
  277.                     <div class="col-sm-6 col-lg-4 col-xl-3" data-aos="fade-up" data-aos-delay="200">
  278.                         <div class="info-card card border-0 shadow-lg h-100 position-relative overflow-hidden">
  279.                             <div class="card-header bg-gradient-primary text-white p-4 text-center border-0">
  280.                                 <i class="bi bi-building fs-1 mb-3 d-block"></i>
  281.                                 <h5 class="mb-0 fw-bold">Zajęcia w szkole</h5>
  282.                             </div>
  283.                             <div class="card-body p-4 text-center">
  284.                                 <p class="mb-0 fw-medium">Zajęcia odbywają się w szkole Twojego dziecka</p>
  285.                             </div>
  286.                         </div>
  287.                     </div>
  288.                     
  289.                     <!-- Odbieramy ze świetlicy -->
  290.                     <div class="col-sm-6 col-lg-4 col-xl-3" data-aos="fade-up" data-aos-delay="300">
  291.                         <div class="info-card card border-0 shadow-lg h-100 position-relative overflow-hidden">
  292.                             <div class="card-header bg-gradient-success text-white p-4 text-center border-0">
  293.                                 <i class="bi bi-people fs-1 mb-3 d-block"></i>
  294.                                 <h5 class="mb-0 fw-bold">Odbieramy dzieci</h5>
  295.                             </div>
  296.                             <div class="card-body p-4 text-center">
  297.                                 <p class="mb-0 fw-medium">Odbieramy dzieci bezpośrednio ze świetlicy</p>
  298.                             </div>
  299.                         </div>
  300.                     </div>
  301.                     
  302.                     <!-- 30 zajęć -->
  303.                     <div class="col-sm-6 col-lg-4 col-xl-3" data-aos="fade-up" data-aos-delay="400">
  304.                         <div class="info-card card border-0 shadow-lg h-100 position-relative overflow-hidden">
  305.                             <div class="card-header bg-gradient-primary text-white p-4 text-center border-0">
  306.                                 <i class="bi bi-calendar-check fs-1 mb-3 d-block"></i>
  307.                                 <h5 class="mb-0 fw-bold">30 zajęć rocznie</h5>
  308.                             </div>
  309.                             <div class="card-body p-4 text-center">
  310.                                 <p class="mb-0 fw-medium">30 zajęć w trakcie roku szkolnego</p>
  311.                             </div>
  312.                         </div>
  313.                     </div>
  314.                     
  315.                     <!-- Częstotliwość -->
  316.                     <div class="col-sm-6 col-lg-4 col-xl-3" data-aos="fade-up" data-aos-delay="500">
  317.                         <div class="info-card card border-0 shadow-lg h-100 position-relative overflow-hidden">
  318.                             <div class="card-header bg-gradient-success text-white p-4 text-center border-0">
  319.                                 <i class="bi bi-clock fs-1 mb-3 d-block"></i>
  320.                                 <h5 class="mb-0 fw-bold">Raz w tygodniu</h5>
  321.                             </div>
  322.                             <div class="card-body p-4 text-center">
  323.                                 <p class="mb-0 fw-medium">Raz w tygodniu po 60 minut</p>
  324.                             </div>
  325.                         </div>
  326.                     </div>
  327.                 </div>
  328.             </div>
  329.         </section>
  330.         <!-- =======================
  331.         Najważniejsze informacje END -->
  333.         <!-- =======================
  334.         FAQ Section START -->
  335.         <section class="py-5 py-lg-7">
  336.             <div class="container">
  337.                 <div class="row justify-content-center mb-5">
  338.                     <div class="col-lg-8 text-center">
  339.                         <h2 class="section-title mb-3" data-aos="fade-up">
  340.                             Często zadawane <span class="text-gold">pytania</span>
  341.                         </h2>
  342.                     </div>
  343.                 </div>
  345.                 <div class="row justify-content-center">
  346.                     <div class="col-lg-8">
  347.                         <div class="accordion" id="faqAccordion">
  348.                             <div class="accordion-item border-0 shadow-sm mb-3" data-aos="fade-up" data-aos-delay="200">
  349.                                 <h2 class="accordion-header">
  350.                                     <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">
  351.                                         W jakim wieku dziecko może zacząć naukę programowania?
  352.                                     </button>
  353.                                 </h2>
  354.                                 <div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion">
  355.                                     <div class="accordion-body">
  356.                                         Zajęcia są dostosowane do różnych grup wiekowych. Scratch jest idealny dla dzieci od 7 lat, 
  357.                                         robotyka od 8 lat, a Minecraft od 9 lat. Każdy kurs ma odpowiedni poziom trudności.
  358.                                     </div>
  359.                                 </div>
  360.                             </div>
  362.                             <div class="accordion-item border-0 shadow-sm mb-3" data-aos="fade-up" data-aos-delay="300">
  363.                                 <h2 class="accordion-header">
  364.                                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">
  365.                                         Czy dziecko potrzebuje własnego komputera?
  366.                                     </button>
  367.                                 </h2>
  368.                                 <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
  369.                                     <div class="accordion-body">
  370.                                         Nie, wszystkie potrzebne urządzenia i materiały są dostępne na zajęciach. 
  371.                                         Oferujemy nowoczesne komputery z zainstalowanym oprogramowaniem, tablety do robotyki 
  372.                                         oraz zestawy Lego WeDo 2.0. Dzieci pracują w małych grupach, więc każdy ma dostęp 
  373.                                         do własnego stanowiska pracy.
  374.                                     </div>
  375.                                 </div>
  376.                             </div>
  378.                             <div class="accordion-item border-0 shadow-sm mb-3" data-aos="fade-up" data-aos-delay="400">
  379.                                 <h2 class="accordion-header">
  380.                                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
  381.                                         Jak długo trwają zajęcia?
  382.                                     </button>
  383.                                 </h2>
  384.                                 <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
  385.                                     <div class="accordion-body">
  386.                                         Standardowe zajęcia trwają 60 minut. To optymalny czas, aby dziecko mogło się skupić 
  387.                                         i efektywnie pracować, jednocześnie nie męcząc się zbytnio.
  388.                                     </div>
  389.                                 </div>
  390.                             </div>
  392.                             <div class="accordion-item border-0 shadow-sm mb-3" data-aos="fade-up" data-aos-delay="500">
  393.                                 <h2 class="accordion-header">
  394.                                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4">
  395.                                         Czy oferujecie darmową lekcję próbną?
  396.                                     </button>
  397.                                 </h2>
  398.                                 <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
  399.                                     <div class="accordion-body">
  400.                                         Nie oferujemy darmowej lekcji próbnej, ale mamy gwarancję satysfakcji! 
  401.                                         Jeśli po pierwszych zajęciach Twojemu dziecku się nie spodoba, nie musisz nic płacić. 
  402.                                         Jesteśmy pewni jakości naszych zajęć.
  403.                                     </div>
  404.                                 </div>
  405.                             </div>
  407.                             <div class="accordion-item border-0 shadow-sm mb-3" data-aos="fade-up" data-aos-delay="600">
  408.                                 <h2 class="accordion-header">
  409.                                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5">
  410.                                         Co to jest gwarancja satysfakcji?
  411.                                     </button>
  412.                                 </h2>
  413.                                 <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
  414.                                     <div class="accordion-body">
  415.                                         Gwarancja satysfakcji oznacza, że jeśli po pierwszych zajęciach Twoje dziecko nie będzie zadowolone, 
  416.                                         zwrócimy Ci pełną kwotę lub nie będziesz musiał płacić. Jesteśmy pewni, że nasze zajęcia 
  417.                                         spodobają się każdemu dziecku!
  418.                                     </div>
  419.                                 </div>
  420.                             </div>
  422.                             <div class="accordion-item border-0 shadow-sm mb-3" data-aos="fade-up" data-aos-delay="700">
  423.                                 <h2 class="accordion-header">
  424.                                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq6">
  425.                                         Ile dzieci jest w grupie?
  426.                                     </button>
  427.                                 </h2>
  428.                                 <div id="faq6" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
  429.                                     <div class="accordion-body">
  430.                                         Maksymalnie 8 dzieci w grupie. To pozwala nam na indywidualne podejście do każdego dziecka 
  431.                                         i zapewnia, że każdy uczestnik otrzyma odpowiednią uwagę i wsparcie.
  432.                                     </div>
  433.                                 </div>
  434.                             </div>
  436.                             <div class="accordion-item border-0 shadow-sm mb-3" data-aos="fade-up" data-aos-delay="800">
  437.                                 <h2 class="accordion-header">
  438.                                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq7">
  439.                                         Czy dziecko może dołączyć w trakcie roku szkolnego?
  440.                                     </button>
  441.                                 </h2>
  442.                                 <div id="faq7" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
  443.                                     <div class="accordion-body">
  444.                                         Tak, dziecko może dołączyć w dowolnym momencie. Nasze kursy są zaprojektowane tak, 
  445.                                         aby nowi uczestnicy mogli łatwo nadrobić materiał i dołączyć do grupy.
  446.                                     </div>
  447.                                 </div>
  448.                             </div>
  450.                             <div class="accordion-item border-0 shadow-sm mb-3" data-aos="fade-up" data-aos-delay="900">
  451.                                 <h2 class="accordion-header">
  452.                                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq8">
  453.                                         Co jeśli dziecko opuści zajęcia?
  454.                                     </button>
  455.                                 </h2>
  456.                                 <div id="faq8" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
  457.                                     <div class="accordion-body">
  458.                                         Należy pamiętać, że nie ma zwrotu kosztów za opuszczone zajęcia, ponieważ zajęcia się odbyły 
  459.                                         i ponieśliśmy koszty związane z ich organizacją. Zajęcia są prowadzone w grupach, więc 
  460.                                         nieobecność jednego dziecka nie wpływa na przebieg lekcji. Jeśli dziecko opuści zajęcia, 
  461.                                         może nadrobić materiał na kolejnych zajęciach lub skorzystać z dodatkowych konsultacji 
  462.                                         z nauczycielem w razie potrzeby.
  463.                                     </div>
  464.                                 </div>
  465.                             </div>
  466.                         </div>
  467.                     </div>
  468.                 </div>
  469.             </div>
  470.         </section>
  471.         <!-- =======================
  472.         FAQ Section END -->
  474.         <!-- =======================
  475.         CTA Section START -->
  476.         <section class="py-5 py-lg-7 bg-primary text-white">
  477.             <div class="container">
  478.                 <div class="row justify-content-center text-center">
  479.                     <div class="col-lg-8">
  480.                         <h2 class="mb-4" data-aos="fade-up">
  481.                             Gotowy, aby dać swojemu dziecku <span class="text-warning">lepszy start</span> w przyszłość?
  482.                         </h2>
  483.                         <p class="lead mb-4" data-aos="fade-up" data-aos-delay="100">
  484.                             Dołącz do grona zadowolonych rodziców i pozwól swojemu dziecku odkryć świat programowania!
  485.                         </p>
  486.                         <div class="cta-buttons" data-aos="fade-up" data-aos-delay="200">
  487.                             <a href="https://zatokakodu.langlion.com/forms/rejestracja" class="btn btn-primary btn-lg me-3 mb-3">
  488.                                 <i class="fas fa-rocket me-2"></i>Zapisz dziecko teraz
  489.                             </a>
  490.                             <a href="/kontakt" class="btn btn-gold btn-lg mb-3">
  491.                                 <i class="fas fa-phone me-2"></i>Zadzwoń do nas
  492.                             </a>
  493.                         </div>
  494.                     </div>
  495.                 </div>
  496.             </div>
  497.         </section>
  498.         <!-- =======================
  499.         CTA Section END -->
  501.         <!-- =======================
  502.         Schools Section START -->
  503.         <section class="py-5 py-lg-7 bg-light">
  504.             <div class="container">
  505.                 <div class="row justify-content-center">
  506.                     <div class="col-12 col-lg-10">
  507.                         <div class="card shadow rounded-4 border-0">
  508.                             <!-- Card header -->
  509.                             <div class="card-header bg-white text-center py-4 border-bottom border-light">
  510.                                 <h2 class="mb-0 fw-semibold text-dark">Szkoły, w których prowadzimy zajęcia</h2>
  511.                             </div>
  513.                             <!-- Card body -->
  514.                             <div class="card-body p-4 p-md-5">
  515.                                 <!-- Filters -->
  516.                                 <div class="row g-3 align-items-center mb-4">
  517.                                     <!-- City input -->
  518.                                     <div class="col-md-8">
  519.                                         <form id="filter-form" class="rounded position-relative">
  520.                                             <input id="city-input" class="form-control pe-5 bg-transparent" type="search" name="city" placeholder="Podaj Miasto" aria-label="Podaj Miasto" style="color:#000;">
  521.                                             <button type="submit" class="bg-transparent p-2 position-absolute top-50 end-0 translate-middle-y border-0 text-primary-hover text-reset">
  522.                                                 <i class="fas fa-search fs-6"></i>
  523.                                             </button>
  524.                                         </form>
  525.                                     </div>
  527.                                     <!-- Course select -->
  528.                                     <div class="col-md-4">
  529.                                         <form id="course-form">
  530.                                             <select id="course-select" class="form-select js-choice border-1 z-index-9 bg-transparent" name="course" aria-label=".form-select-sm" style="color:#000">
  531.                                                 <option value="">Wybierz Kurs</option>
  532.                                                 <option value="Robotyka">Robotyka</option>
  533.                                                 <option value="Programowanie">Programowanie</option>
  534.                                             </select>
  535.                                         </form>
  536.                                     </div>
  537.                                 </div>
  539.                                 <!-- Group list -->
  540.                                 <div id="groups-container" class="table-responsive">
  541.                                     {% include 'lang_lion/groups.html.twig' %}
  542.                                 </div>
  543.                             </div>
  544.                         </div>
  545.                     </div>
  546.                 </div>
  547.             </div>
  548.         </section>
  549.         <!-- =======================
  550.         Schools Section END -->
  552.         <!-- =======================
  553.         Newsletter Section START -->
  554.         <section class="py-5 py-lg-7">
  555.             <div class="container">
  556.                 <div class="row justify-content-center">
  557.                     <div class="col-11 col-md-10 mx-auto">
  558.                         <div class="bg-warning rounded-3 shadow p-3 p-sm-4 position-relative overflow-hidden">
  559.                             <!-- SVG decoration -->
  560.                             <figure class="position-absolute top-100 start-100 translate-middle mt-n6 ms-n5">
  561.                                 <svg width="211px" height="211px">
  562.                                     <path class="fill-white opacity-4" d="M210.030,105.011 C210.030,163.014 163.010,210.029 105.012,210.029 C47.013,210.029 -0.005,163.014 -0.005,105.011 C-0.005,47.015 47.013,-0.004 105.012,-0.004 C163.010,-0.004 210.030,47.015 210.030,105.011 Z"></path>
  563.                                 </svg>
  564.                             </figure>
  565.                             <!-- SVG decoration -->
  566.                             <figure class="position-absolute top-100 start-0 translate-middle mt-n6 ms-5">
  567.                                 <svg width="141px" height="141px">
  568.                                     <path class="fill-white opacity-4" d="M140.520,70.258 C140.520,109.064 109.062,140.519 70.258,140.519 C31.454,140.519 -0.004,109.064 -0.004,70.258 C-0.004,31.455 31.454,-0.003 70.258,-0.003 C109.062,-0.003 140.520,31.455 140.520,70.258 Z"></path>
  569.                                 </svg>
  570.                             </figure>
  571.                             <!-- SVG decoration -->
  572.                             <figure class="position-absolute top-0 start-50 mt-4 ms-n9">
  573.                                 <svg width="41px" height="41px">
  574.                                     <path class="fill-white opacity-4" d="M40.531,20.265 C40.531,31.458 31.457,40.531 20.265,40.531 C9.072,40.531 -0.001,31.458 -0.001,20.265 C-0.001,9.073 9.072,-0.001 20.265,-0.001 C31.457,-0.001 40.531,9.073 40.531,20.265 Z"></path>
  575.                                 </svg>
  576.                             </figure>
  578.                             <div class="row">
  579.                                 <div class="col-md-8 mx-auto text-center py-5 position-relative">
  580.                                     <!-- Title -->
  581.                                     <h2 id="newsletter_title">Zapisz się do Newslettera i bądź na bieżąco z promocjami</h2>
  582.                                     <!-- Form -->
  583.                                     <form class="row align-items-center justify-content-center mt-3">
  584.                                         <div class="col-lg-8" id="newsletter_input">
  585.                                             <div class="bg-body shadow rounded-pill p-2">
  586.                                                 <div class="input-group">
  587.                                                     <input class="form-control border-0 me-1" id="newsletter_email" type="email" placeholder="Wprowadź swój adres email">
  588.                                                     <button type="button" id="newsletter_button" class="btn btn-blue mb-0 rounded-pill">Zapisz!</button>
  589.                                                 </div>
  590.                                             </div>
  591.                                         </div>
  592.                                     </form>
  593.                                 </div>
  594.                             </div>
  595.                         </div>
  596.                     </div>
  597.                 </div>
  598.             </div>
  599.         </section>
  600.         <!-- =======================
  601.         Newsletter Section END -->
  602.     </main>
  603. {% endblock %}
  605. {% block js %}
  606.     <script src="{{ asset('./assets/js/jquery-3.6.4.min.js') }}"></script>
  607.     <script>
  608.         function isValidEmail() {
  609.             var input = document.getElementById('newsletter_email')
  610.             var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  611.             return pattern.test(input.value);
  612.         }
  613.         
  614.         function sendMessage() {
  615.             const data = {
  616.                 email: $('#newsletter_email').val(),
  617.                 type: 'newsletter'
  618.             };
  620.             $.ajax({
  621.                 url: '/message',
  622.                 method: 'POST',
  623.                 data: data,
  624.                 success: function(response) {
  625.                     document.getElementById('newsletter_title').innerHTML = "Dziękujemy!</br>Twój adres mailowy został dodany do Newslettera";
  626.                     document.getElementById('newsletter_input').style.setProperty('display', 'none');
  627.                 },
  628.                 error: function(jqXHR, textStatus, errorThrown) {
  629.                     console.error('Error sending message:', errorThrown);
  630.                 }
  631.             });
  632.         }
  634.         document.getElementById('newsletter_button').addEventListener('click', function() {
  635.             var alert = document.createElement('div');
  636.             if(isValidEmail()) {
  637.                 sendMessage();
  638.             } else {
  639.                 alert.className = 'alert text-center alert-danger';
  640.                 alert.innerHTML = '<h4 class="alert-heading">Podaj prawidłowy adres email</h4>';
  641.             }
  642.             alert.style.position = 'fixed';
  643.             alert.style.left = '50%';
  644.             alert.style.top = '30%';
  645.             alert.style.transform = 'translate(-50%, -50%)';
  646.             alert.style.borderRadius = "10px";
  647.             alert.style.zIndex = '10';
  648.             document.body.appendChild(alert);
  649.             setTimeout(function() {
  650.                 document.body.removeChild(alert);
  651.             }, 2000);
  652.         });
  654.         document.addEventListener('DOMContentLoaded', function() {
  655.             const filterForm = document.getElementById('filter-form');
  656.             const courseForm = document.getElementById('course-form');
  657.             const groupsContainer = document.getElementById('groups-container');
  659.             // Funkcja do wysyłania zapytania AJAX
  660.             function sendAjaxRequest() {
  661.                 const city = document.getElementById('city-input').value;
  662.                 const course = document.getElementById('course-select').value;
  664.                 const xhr = new XMLHttpRequest();
  665.                 xhr.open('GET', `{{ path('get_groups') }}?city=${city}&course=${course}`, true);
  666.                 xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  668.                 xhr.onload = function() {
  669.                     if (xhr.status >= 200 && xhr.status < 400) {
  670.                         // Aktualizuj zawartość wyników
  671.                         groupsContainer.innerHTML = xhr.responseText;
  672.                     } else {
  673.                         console.error('Error:', xhr.statusText);
  674.                     }
  675.                 };
  677.                 xhr.onerror = function() {
  678.                     console.error('Request failed');
  679.                 };
  681.                 xhr.send();
  682.             }
  684.             // Obsługa wysłania formularza filtrowania
  685.             filterForm.addEventListener('submit', function(event) {
  686.                 event.preventDefault();
  687.                 sendAjaxRequest();
  688.             });
  690.             // Obsługa zmiany kursu
  691.             courseForm.addEventListener('change', function(event) {
  692.                 event.preventDefault();
  693.                 sendAjaxRequest();
  694.             });
  695.         });
  696.     </script>
  697.     {{ parent() }}
  698. {% endblock %}