templates/default/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block custom_js %}
  3.     <script src="{{ asset('homepage_form/js/formOrder.js') }}" async></script>
  4. {% endblock %}
  5. {% block title %}Wyceń nieruchomość online - RONiN24.pl{% endblock %}
  6. {% block body %}
  7.     <header id="intro" class="container-fluid d-flex align-items-center">
  8.         {{ include('menu.html.twig') }}
  9.         <div class="container">
  10.             <div class="row">
  11.                 <div class="col-sm-12 col-md-12 col-lg-5 col-xl-5">
  12.                     <article>
  13.                         <h1>
  14.                             Wyceń mieszkanie lub dom online!
  15.                         </h1>
  16.                         <h2 class="mt-5 mb-3">RONiN24.pl to niezwykle przydatne i nowoczesne narzędzie służące do wyceny nieruchomości online na tle trendów rynkowych.</h2>
  17.                         <p>Raport Ofert Nieruchomości i Notowań wycenia dom lub mieszkanie w oparciu o ceny ofertowe nieruchomości oraz o podany typ transakcji, lokalizację, powierzchnie i liczbę pokoi. Intuicyjna obsługa oraz przejrzystość programu sprawiają, że w profesjonalny sposób dostarcza on najważniejszych informacji na temat analizowanej nieruchomości.</p>
  18.                     </article>
  19.                 </div>
  20.             </div>
  21.         </div>
  22.     </header>
  23.     <section id="benefits" class="py-5">
  24.         <div class="container">
  25.             <div class="row text-center">
  26.                 <div class="col-md-12">
  27.                     <h3 class="mx-auto mb-2">Jak to działa</h3>
  28.                     <div class="border-title-section mb-4"></div>
  29.                 </div>
  30.                 <div class="col-md-12">
  31.                     <h4>Raport RONiN24.pl z wyceną nieruchomości</h4>
  32.                 </div>
  33.             </div>
  34.             <div class="row icon-benefits-section py-5">
  35.                 <div class="col-md-4 mb-3">
  36.                     <figure class="mb-3">
  37.                         <img src="{{ asset('images/icon/notowania-kwartalne.png') }}" alt="Cena za kwartał">
  38.                     </figure>
  39.                     <h2 class="mb-2">Notowania kwartalne</h2>
  40.                     <p>RONiN analizuje i wylicza średnią cenę, średnią cenę za m2 oraz liczbe ofert dla czterech ostatnich kwartałów i wskazuje ich wzrost lub spadek.</p>
  41.                 </div>
  42.                 <div class="col-md-4 mb-3">
  43.                     <figure class="mb-3">
  44.                         <img src="{{ asset('images/icon/trend-dwuletni.png') }}" alt="Wartość nieruchomości w ostatnich dwóch latach">
  45.                     </figure>
  46.                     <h2 class="mb-2">Trend dwuletni</h2>
  47.                     <p>RONiN analizuje i tworzy raport wyłącznie na podstawie danych z ostatnich 24 miesięcy. Wartości liczbowe oraz wykresy liniowe pokazują nam dwuletni trend wartości nieruchomości na tle średniej ceny dla danej miejscowości, z podziałem na kwartały. </p>
  48.                 </div>
  49.                 <div class="col-md-4 mb-3">
  50.                     <figure class="mb-3">
  51.                         <img src="{{ asset('images/icon/notowania-historyczne.png') }}" alt="Historyczne ceny nieruchomości">
  52.                     </figure>
  53.                     <h2 class="mb-2">Notowania historyczne</h2>
  54.                     <p>RONiN analizuje i tworzy raport na podstawie danych z ostatnich 8 lat. Wartości liczbowe prezentowane za pomocą tabeli oraz wykresów słupkowych zostały podzielone na lata i przedstawiają informacje o cenie nieruchomości oraz liczbie występujących ofert tzw. trend aktywności rynkowej. </p>
  55.                 </div>
  56.                 <div class="col-md-4 mb-3">
  57.                     <figure class="mb-3">
  58.                         <img src="{{ asset('images/icon/trend-dwuletni.png') }}" alt="Cena za kwartał">
  59.                     </figure>
  60.                     <h2 class="mb-2">Trend dwuletni na tle średniej ceny miejscowości</h2>
  61.                     <p>algorytm wylicza średnią cenę za m2 na podstawie ofert z ostatnich 24 miesięcy przy uwzględnieniu powierzchni +/- 20% od podanej wartości. </p>
  62.                 </div>
  63.                 <div class="col-md-4 mb-3">
  64.                     <figure class="mb-3">
  65.                         <img src="{{ asset('images/icon/trend-cenowy.png') }}" alt="Cena za kwartał">
  66.                     </figure>
  67.                     <h2 class="mb-2">Trend cenowy długoterminowy</h2>
  68.                     <p>chronologiczne zestawienie średnich cen za m2 z podziałem na lata, obejmujące zakresem wszystkie oferty z całego okresu analizy. </p>
  69.                 </div>
  70.                 <div class="col-md-4 mb-3">
  71.                     <figure class="mb-3">
  72.                         <img src="{{ asset('images/icon/trend-aktywnosci.png') }}" alt="Cena za kwartał">
  73.                     </figure>
  74.                     <h2 class="mb-2">Trend aktywności rynkowej</h2>
  75.                     <p>chronologiczne zestawienie liczby ofert z podziałem na lata, obejmujące zakresem wszystkie oferty z całego okresu analizy. </p>
  76.                 </div>
  77.             </div>
  78.         </div>
  79.     </section>
  80.     <section id="report" class="py-5">
  81.         <div class="container-fluid">
  82.             <div class="row justify-content-center align-items-center">
  83.                 <div class="col-sm-0 col-md-0 col-lg-6 col-xl-6 col-xxl-7 card-report d-block"></div>
  84.                 <div class="col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-5">
  85.                     <div class="row text-center mb-5">
  86.                         <div class="col-md-12">
  87.                             <h3 class="mx-auto mb-2">Raport</h3>
  88.                             <div class="border-title-section mb-4"></div>
  89.                         </div>
  90.                         <div class="col-md-12">
  91.                             <h4>Zobacz przykładowy raport z wyceną - RONiN24.pl</h4>
  92.                         </div>
  93.                     </div>
  94.                     <div class="row justify-content-center">
  95.                         <div class="col-sm-6 col-md-5 col-lg-6 col-xl-6 border-right">
  96.                             <div>
  97.                                 <div class="">Lokalizacja: <span>Warszawa</span></div>
  98.                                 <div class="">Nieruchomość: <span>Mieszkanie</span></div>
  99.                                 <div class="">Transakcja: <span>Sprzedaż</span></div>
  100.                                 <div class="">Powierzchnia: <span>50 m<sup>2</sup></span></div>
  101.                                 <div class="my-4">
  102.                                     <a class="btn btn-light" href="">Zobacz</a>
  103.                                 </div>
  104.                             </div>
  105.                         </div>
  106.                         <div class="col-sm-6 col-md-5 col-lg-6 col-xl-6 ps-5">
  107.                             <div>
  108.                                 <div class="">Lokalizacja: <span>Kraków</span></div>
  109.                                 <div class="">Nieruchomość: <span>Mieszkanie</span></div>
  110.                                 <div class="">Transakcja: <span>Wynajem</span></div>
  111.                                 <div class="">Powierzchnia: <span>50 m<sup>2</sup></span></div>
  112.                                 <div class="my-4">
  113.                                     <a class="btn btn-light" href="">Zobacz</a>
  114.                                 </div>
  115.                             </div>
  116.                         </div>
  117.                     </div>
  118.                 </div>
  119.             </div>
  120.         </div>
  121.     </section>
  122.     <section id="offer" class="py-5">
  123.         <div class="container">
  124.             <div class="row text-center">
  125.                 <div class="col-md-12">
  126.                     <h3 class="mx-auto mb-2">Oferta</h3>
  127.                     <div class="border-title-section mb-4"></div>
  128.                 </div>
  129.                 <div class="col-md-12">
  130.                     <h4>Wybierz idealną dla siebie opcję</h4>
  131.                 </div>
  132.             </div>
  133.             <div class="row text-center py-5">
  134.                 <div class="col-sm-6 col-md-6 col-lg-3 col-xl-3 mb-3">
  135.                     <div class="box-color py-4 px-5">
  136.                         <div class="row">
  137.                             <div class="col-12">
  138.                                 <div class="quotation">Wycena</div>
  139.                             </div>
  140.                         </div>
  141.                         <div class="row">
  142.                             <div class="col-12">
  143.                                 <div class="price"><span>19,90</span> zł</div>
  144.                             </div>
  145.                         </div>
  146.                         <hr>
  147.                         <div class="row">
  148.                             <div class="quotation-color my-4">1 wycena</div>
  149.                         </div>
  150.                         <div class="row">
  151.                             <div class="col-md-12 mt-2">
  152.                                 <a class="btn btn-dark" href="#order">Zamów</a>
  153.                             </div>
  154.                         </div>
  155.                     </div>
  156.                 </div>
  157.                 <div class="col-sm-6 col-md-6 col-lg-3 col-xl-3 mb-3">
  158.                     <div class="box-color py-4 px-5">
  159.                         <div class="row">
  160.                             <div class="col-12">
  161.                                 <div class="quotation">Pakiet S</div>
  162.                             </div>
  163.                         </div>
  164.                         <div class="row">
  165.                             <div class="col-12">
  166.                                 <div class="price"><span>89,90</span> zł</div>
  167.                             </div>
  168.                         </div>
  169.                         <hr>
  170.                         <div class="row">
  171.                             <div class="quotation-color my-4">5 wycen</div>
  172.                         </div>
  173.                         <div class="row">
  174.                             <div class="col-md-12 mt-2">
  175.                                 <a class="btn btn-dark" href="#order">Zamów</a>
  176.                             </div>
  177.                         </div>
  178.                     </div>
  179.                 </div>
  180.                 <div class="col-sm-6 col-md-6 col-lg-3 col-xl-3 mb-3">
  181.                     <div class="box-color py-4 px-5">
  182.                         <div class="row">
  183.                             <div class="col-12">
  184.                                 <div class="quotation">Pakiet M</div>
  185.                             </div>
  186.                         </div>
  187.                         <div class="row">
  188.                             <div class="col-12">
  189.                                 <div class="price"><span>329,90</span> zł</div>
  190.                             </div>
  191.                         </div>
  192.                         <hr>
  193.                         <div class="row">
  194.                             <div class="quotation-color my-4">20 wycen</div>
  195.                         </div>
  196.                         <div class="row">
  197.                             <div class="col-md-12 mt-2">
  198.                                 <a class="btn btn-dark" href="#order">Zamów</a>
  199.                             </div>
  200.                         </div>
  201.                     </div>
  202.                 </div>
  203.                 <div class="col-sm-6 col-md-6 col-lg-3 col-xl-3 mb-3">
  204.                     <div class="box-color py-4 px-5">
  205.                         <div class="row">
  206.                             <div class="col-12">
  207.                                 <div class="quotation">Pakiet L</div>
  208.                             </div>
  209.                         </div>
  210.                         <div class="row">
  211.                             <div class="col-12">
  212.                                 <div class="price"><span>799,90</span> zł</div>
  213.                             </div>
  214.                         </div>
  215.                         <hr>
  216.                         <div class="row">
  217.                             <div class="quotation-color my-4">50 wycen</div>
  218.                         </div>
  219.                         <div class="row">
  220.                             <div class="col-md-12 mt-2">
  221.                                 <a class="btn btn-dark" href="#order">Zamów</a>
  222.                             </div>
  223.                         </div>
  224.                     </div>
  225.                 </div>
  226.             </div>
  227.             <div class="row">
  228.                 <div class="col-12">
  229.                     <p id="text-info">* Podane ceny są cenami netto</p>
  230.                 </div>
  231.             </div>
  232.         </div>
  233.     </section>
  234.     <section id="order" class="py-5">
  235.         <div class="container">
  236.             <div class="row text-center">
  237.                 <div class="col-md-12 ">
  238.                     <h3 class="mx-auto mb-2" id="order-title">Zamówienie</h3>
  239.                     <div class="border-title-section mb-4"></div>
  240.                 </div>
  241.                 <div class="col-md-12 pb-5">
  242.                     <h4>Zamów interesujący Cię pakiet</h4>
  243.                 </div>
  244.             </div>
  245.             <div class="row order-section py-5">
  246.                 <form id="orderForm" action="{{ path('app_form_order') }}">
  247.                     <div>
  248.                         <div id="services">
  249.                             <div class="row justify-content-center px-3">
  250.                                 <div class="col-md-12 d-sm-block d-md-block d-lg-none d-xl-none d-xxl-none">
  251.                                     <h6 class="text-center">Wybór usługi</h6>
  252.                                     <select id="selectPackage" name="selectPackage" class="form-select mb-3" required>
  253.                                         <option value="-1" hidden selected>Ilość wycen</option>
  254.                                         <option value="0">Pojedyncza wycena</option>
  255.                                         <option value="1">Pakiet S - 5 wycen</option>
  256.                                         <option value="2">Pakiet M - 20 wycen</option>
  257.                                         <option value="3">Pakiet L - 50 wycen</option>
  258.                                     </select>
  259.                                 </div>
  260.                                 <div id="selectPackageXl" class="row text-center d-none d-sm-none d-md-none d-lg-block d-xl-block d-xxl-block">
  261.                                     <section>
  262.                                         <div>
  263.                                             <input type="radio" name="selectPackage" id="firstPackageOption" class="form-check-input mx-auto mb-2" value="0">
  264.                                             <label class="form-check-label" for="firstPackageOption">
  265.                                                 <div class="row">
  266.                                                     <div class="quotation">Pojedyncza wycena</div>
  267.                                                 </div>
  268.                                                 <div class="row">
  269.                                                     <div class="quotation-color">1 wycen</div>
  270.                                                 </div>
  271.                                                 <div class="row">
  272.                                                     <div class="price">19,90 zł</div>
  273.                                                 </div>
  274.                                             </label>
  275.                                         </div>
  276.                                         <div>
  277.                                             <input type="radio" name="selectPackage" id="secondPackageOption" class="form-check-input mx-auto mb-2" value="1">
  278.                                             <label class="form-check-label" for="secondPackageOption">
  279.                                                 <div class="row">
  280.                                                     <div class="quotation">Pakiet S</div>
  281.                                                 </div>
  282.                                                 <div class="row">
  283.                                                     <div class="quotation-color">5 wycen</div>
  284.                                                 </div>
  285.                                                 <div class="row">
  286.                                                     <div class="price">89,90 zł</div>
  287.                                                 </div>
  288.                                             </label>
  289.                                         </div>
  290.                                         <div>
  291.                                             <input type="radio" name="selectPackage" id="thirdPackageOption" class="form-check-input mx-auto mb-2" value="2">
  292.                                             <label class="form-check-label" for="thirdPackageOption">
  293.                                                 <div class="row">
  294.                                                     <div class="quotation">Pakiet M</div>
  295.                                                 </div>
  296.                                                 <div class="row">
  297.                                                     <div class="quotation-color">20 wycen</div>
  298.                                                 </div>
  299.                                                 <div class="row">
  300.                                                     <div class="price">329,90 zł</div>
  301.                                                 </div>
  302.                                             </label>
  303.                                         </div>
  304.                                         <div>
  305.                                             <input type="radio" name="selectPackage" id="fourthPackageOption" class="form-check-input mx-auto mb-2" value="3">
  306.                                             <label class="form-check-label" for="fourthPackageOption">
  307.                                                 <div class="row">
  308.                                                     <div class="quotation">Pakiet L</div>
  309.                                                 </div>
  310.                                                 <div class="row">
  311.                                                     <div class="quotation-color">50 wycen</div>
  312.                                                 </div>
  313.                                                 <div class="row">
  314.                                                     <div class="price">799,90 zł</div>
  315.                                                 </div>
  316.                                             </label>
  317.                                         </div>
  318.                                     </section>
  319.                                 </div>
  320.                                 <div class="col-md-12">
  321.                                     <div class="button-section float-end mt-4">
  322.                                         <div class="btn btn-dark" onClick="toggle('services', 'billing')">
  323.                                             <div>
  324.                                                 <span class="txt">Przejdź dalej</span>
  325.                                                 <span class="arrow"><i class="bi bi-arrow-right"></i></span>
  326.                                             </div>
  327.                                         </div>
  328.                                     </div>
  329.                                 </div>
  330.                             </div>
  331.                         </div>
  332.                         <div id="billing" class="col hidden">
  333.                             <div>
  334.                                 <div class="row justify-content-center px-3">
  335.                                     <div class="col-sm-12 col-md-12 col-lg-12 col-xl-7">
  336.                                         <div class="col-md-12 text-center mb-5">
  337.                                             <h5 class="title-form">
  338.                                                 Dane zamawiającego
  339.                                             </h5>
  340.                                         </div>
  341.                                         <div class="row justify-content-center">
  342.                                             <div class="col-12 row justify-content-center mb-3">
  343.                                                 <div class="col-md-5 btn btn-light btn-active my-2 me-1" id="business"><i class="bi bi-people"></i> Firma</div>
  344.                                                 <div class="col-md-5 btn btn-light my-2 ms-1" id="private"><i class="bi bi-person"></i> Osoba prywatna</div>
  345.                                             </div>
  346.                                             <div class="row justify-content-center py-3">
  347.                                                 <div class="col-md-12">
  348.                                                     <div class="form-name-section text-center">Dane do faktury</div>
  349.                                                     <div class="input-group mb-3 billingData_companyName_form">
  350.                                                         <input type="text" class="form-control" name="billingData_companyName" id="company_name" placeholder="Nazwa przedsiębiorstwa / Imię i Nazwisko" required>
  351.                                                     </div>
  352.                                                     <div class="input-group mb-3 billingData_companyVATNumber_form">
  353.                                                         <input type="text" class="form-control" name="billingData_companyVATNumber" id="nip" placeholder="NIP XXXXXXXXXX" pattern="^((\d{3}\d{3}\d{2}\d{2})|(\d{3}[- ]\d{2}[- ]\d{2}[- ]\d{3}))$" required>
  354.                                                     </div>
  355.                                                     <div class="input-group mb-3">
  356.                                                         <input type="text" class="form-control" name="billingData_nameAndSurname" id="name" placeholder="Imię i Nazwisko" required>
  357.                                                     </div>
  358.                                                     <div class="row">
  359.                                                         <div class="col-md-8 mb-3">
  360.                                                             <input type="text" class="form-control" name="billingData_address" id="street" placeholder="Ulica" required>
  361.                                                         </div>
  362.                                                         <div class="col-md-4 mb-3">
  363.                                                             <input type="text" class="form-control" name="billingData_apartmentNumber" id="number_street" placeholder="Numer lokalu" required>
  364.                                                         </div>
  365.                                                     </div>
  366.                                                     <div class="row">
  367.                                                         <div class="col-md-8 mb-3">
  368.                                                             <input type="text" class="form-control" name="billingData_city" id="city" placeholder="Miasto" required>
  369.                                                         </div>
  370.                                                         <div class="col-md-4 mb-3">
  371.                                                             <input type="text" class="form-control" name="billingData_postalCode" id="zip_code" placeholder="Kod pocztowy" required>
  372.                                                         </div>
  373.                                                     </div>
  374.                                                     <div class="input-group mb-3">
  375.                                                         <input type="tel" class="form-control" name="billingData_phone" id="phone" placeholder="Telefon" required>
  376.                                                     </div>
  377.                                                     <div class="input-group mb-3">
  378.                                                         <input type="email" class="form-control" name="billingData_email" id="email" placeholder="E-mail" required>
  379.                                                     </div>
  380.                                                     <div id="container_order_load" class="col-12 section-message text-center fw-bold mt-5"></div>
  381.                                                     <div class="input-group mb-4">
  382.                                                         <label class="form-check-label" for="invalidCheck">
  383.                                                             <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
  384.                                                             Akceptuję regulamin RONiN24.pl i potwierdzam zapoznanie się z jego postanowieniami.
  385.                                                         </label>
  386.                                                         <div class="invalid-feedback">
  387.                                                             Musisz zaakceptować
  388.                                                         </div>
  389.                                                     </div>
  390.                                                 </div>
  391.                                             </div>
  392.                                         </div>
  393.                                     </div>
  394.                                     <style>
  395.                                         .error {border-color: red;}
  396.                                         .hidden {display: none;}
  397.                                     </style>
  398.                                     <div class="col-md-12">
  399.                                         <div class="col btn btn-light btn-prev mt-4" onClick="toggle('billing', 'services')">
  400.                                             <span class="d-inline"><i class="bi bi-arrow-left "></i></span>
  401.                                             <span class="txt d-inline">Wstecz</span>
  402.                                         </div>
  403.                                         <div class="button-section float-end my-3">
  404.                                             <div id="wyslijBtn" class="btn btn-dark">
  405.                                                 <div>
  406.                                                     <span class="txt">Przejdź dalej</span>
  407.                                                     <span class="arrow"><i class="bi bi-arrow-right"></i></span>
  408.                                                 </div>
  409.                                             </div>
  410.                                         </div>
  411.                                     </div>
  412.                                 </div>
  413.                             </div>
  414.                         </div>
  415.                         <div id="summary" class="col hidden">
  416.                             <div>
  417.                                 <div class="row justify-content-center px-3">
  418.                                     <div class="col-sm-12 col-md-12 col-lg-12 col-xl-8">
  419.                                         <div class="col-md-12 text-center mb-5">
  420.                                             <h5 class="title-form">
  421.                                                 Podsumowanie zamówienia
  422.                                             </h5>
  423.                                         </div>
  424.                                         <div class="row justify-content-center py-3">
  425.                                             <div class="col-md-12 row">
  426.                                                 <div class="col-md-6 row mb-3">
  427.                                                     <div class="col-md-auto">Ilość wycen</div>
  428.                                                     <div class="col order-summary selectedPackage"></div>
  429.                                                 </div>
  430.                                                 <div class="col-md-6 row mb-3">
  431.                                                     <div class="col-md-auto">Do zapłaty:</div>
  432.                                                     <div class="col order-summary orderSummary"></div>
  433.                                                 </div>
  434.                                             </div>
  435.                                             <div class="col-md-12 row mt-4">
  436.                                                 <div class="col-md-12 row mb-2">
  437.                                                     <div class="col-md-12 text-center mb-3">Dane zamawiającego:</div>
  438.                                                     <div class="order-summary billingDataSummary">
  439.                                                         <div class="row billingData_companyName_form">
  440.                                                             <div class="col-3">Nazwa firmy:</div> <div class="col billingData_companyName"></div>
  441.                                                         </div>
  442.                                                         <div class="row billingData_companyVATNumber_form">
  443.                                                             <div class="col-3">NIP firmy:</div> <div class="col billingData_companyVATNumber"></div>
  444.                                                         </div>
  445.                                                         <div class="row">
  446.                                                             <div class="col-3">Imię i nazwisko:</div> <div class="col billingData_nameAndSurname"></div>
  447.                                                         </div>
  448.                                                         <div class="row">
  449.                                                             <div class="col-3">Adres:</div> <div class="col billingData_address"></div>
  450.                                                         </div>
  451.                                                         <div class="row">
  452.                                                             <div class="col-3">Numer domu:</div> <div class="col billingData_apartmentNumber"></div>
  453.                                                         </div>
  454.                                                         <div class="row">
  455.                                                             <div class="col-3">Miasto:</div> <div class="col billingData_city"></div>
  456.                                                         </div>
  457.                                                         <div class="row">
  458.                                                             <div class="col-3">Kod pocztowy:</div> <div class="col billingData_postalCode"></div>
  459.                                                         </div>
  460.                                                         <div class="row">
  461.                                                             <div class="col-3">Numer telefonu:</div> <div class="col billingData_phone"></div>
  462.                                                         </div>
  463.                                                         <div class="row">
  464.                                                             <div class="col-3">Adres e-mail:</div> <div class="col billingData_email"></div>
  465.                                                         </div>
  466.                                                     </div>
  467.                                                 </div>
  468.                                             </div>
  469.                                         </div>
  470.                                     </div>
  471.                                     <div class="col-md-12">
  472.                                         <div class="col btn btn-light btn-prev my-3" onClick="toggle('summary', 'billing')">
  473.                                             <i class="bi bi-arrow-left "></i> Wstecz
  474.                                         </div>
  475.                                         <div class="button-section float-end my-3">
  476.                                             <button class="btn btn-dark" type="submit">
  477.                                                 <span id="submit_current_text">
  478.                                                     Przejdź do płatności <i class="bi bi-arrow-right"></i>
  479.                                                 </span>
  480.                                             </button>
  481.                                         </div>
  482.                                     </div>
  483.                                 </div>
  484.                             </div>
  485.                         </div>
  486.                     </div>
  487.                 </form>
  488.             </div>
  489.         </div>
  490.         <script>
  491.             let isSelectedPackage = false;
  492.             document.querySelectorAll('[name="selectPackage"]').forEach(selectPackageOption => {
  493.                 selectPackageOption.addEventListener('change',
  494.                     (event) => {
  495.                         if (event.target.value !== '-1' && !isSelectedPackage) {
  496.                             isSelectedPackage = true;
  497.                         }
  498.                     }
  499.                 )
  500.             });
  501.             function toggle(hide, show) {
  502.                 if (hide === 'services') {
  503.                     if (isSelectedPackage === false) {
  504.                         alert('Wybierz pakiet przed kontunuowaniem');
  505.                         return;
  506.                     }
  507.                 }
  508.                 document.getElementById(hide).classList.add('hidden');
  509.                 document.getElementById(show).classList.remove('hidden');
  510.             }
  511.         </script>
  512.     </section>
  513.     <section id="about" class="py-5">
  514.         <div class="container">
  515.             <div class="row text-center">
  516.                 <div class="col-md-12">
  517.                     <h3 class="mx-auto mb-2">O programie</h3>
  518.                     <div class="border-title-section mb-4"></div>
  519.                 </div>
  520.             </div>
  521.             <div class="row">
  522.                 <div class="col-md-5 pe-5">
  523.                     <div class="row h-100 align-items-center">
  524.                         <div class="col-sm-6 col-md-12 col-lg-6 box-icon-color py-3 pe-3">
  525.                             <figure class="text-center">
  526.                                 <img class="img-fluid mx-auto" src="{{ asset('images/icon/mieszkania.png') }}" alt="Wycena mieszkań na sprzedaż i wynajem">
  527.                                 <figcaption class="mt-2 mb-1">Mieszkania</figcaption>
  528.                                 <div>sprzedaż/wynajem</div>
  529.                             </figure>
  530.                         </div>
  531.                         <div class="col-sm-6 col-md-12 col-lg-6 box-icon-color py-3">
  532.                             <figure class="text-center">
  533.                                 <img class="img-fluid mx-auto" src="{{ asset('images/icon/domy.png') }}" alt="Wycena mieszkań na sprzedaż i wynajem">
  534.                                 <figcaption class="mt-2 mb-1">Domy</figcaption>
  535.                                 <div>sprzedaż/wynajem</div>
  536.                             </figure>
  537.                         </div>
  538.                     </div>
  539.                 </div>
  540.                 <div class="col-md-7">
  541.                     <article class="">
  542.                         <h4 class="mb-5">Dlaczego warto nas wybrać<span></span></h4>
  543.                         <div>
  544.                             <p>Raport RONiN24.pl uzyskiwany jest na podstawie jedynej w Polsce bazy ponad 15 milionów ofert nieruchomości z całej Polski, zgromadzonych na przestrzeni 10 ostatnich lat oraz zaawansowany algorytm obliczeniowy.</p>
  545.                             <hr>
  546.                             <p class="fw-bold">Potwierdzając wiarygodność danych prezentowanych w raporcie RONiN, należy zwrócić szczególną uwagę na wykorzystywaną bazę danych, która zalicza się do tzw. Big Data, czyli operacji wykonywanych na ogromnej liczbie zmiennych dostarczających wartościowych oraz statystycznie wysoko wiarygodnych informacji.</p>
  547.                         </div>
  548.                     </article>
  549.                 </div>
  550.             </div>
  551.         </div>
  552.     </section>
  553.     <section id="contact" class="py-5">
  554.         <div class="container">
  555.             <div class="row text-center">
  556.                 <div class="col-md-12">
  557.                     <h3 class="mx-auto mb-2">Kontakt</h3>
  558.                     <div class="border-title-section mb-4"></div>
  559.                 </div>
  560.                 <div class="row">
  561.                     <div class="col-md-12">
  562.                         <h4>Masz pytania? Skontaktuj się z nami :)</h4>
  563.                     </div>
  564.                 </div>
  565.             </div>
  566.             <div class="row justify-content-center py-5">
  567.                 <div class="col-md-10">
  568.                     {{ include('default/contact.html.twig') }}
  569.                 </div>
  570.             </div>
  571.         </div>
  572.     </section>
  573.     <section>
  574.         <div class="container pb-5">
  575.             <div class="row align-items-center" id="icon-list">
  576.                 <div class="col">
  577.                     <a href="https://www.krn.pl" target="_blank">
  578.                         <figure>
  579.                             <img class="img-fluid d-block mx-auto"
  580.                                  src="{{ asset('images/logo/krn.png') }}"
  581.                                  alt="Krajowy Rynek Nieruchomości"/>
  582.                         </figure>
  583.                     </a>
  584.                 </div>
  585.                 <div class="col">
  586.                     <a href="https://pop.krn.pl" target="_blank">
  587.                         <figure>
  588.                             <img class="img-fluid d-block mx-auto"
  589.                                  src="{{ asset('images/logo/pop.png') }}"
  590.                                  alt="Przegląd Ofert Prywatnych"/>
  591.                         </figure>
  592.                     </a>
  593.                 </div>
  594.                 <div class="col">
  595.                     <a href="https://zainwestujwnieruchomosci.pl" target="_blank">
  596.                         <figure>
  597.                             <img class="img-fluid d-block mx-auto" src="{{ asset('images/logo/zainwestuj.png') }}"
  598.                                  alt="Zainwestuj w nieruchomości"/>
  599.                         </figure>
  600.                     </a>
  601.                 </div>
  602.                 <div class="col">
  603.                     <a href="https://e-biurowce.pl/" target="_blank">
  604.                         <figure>
  605.                             <img class="img-fluid d-block mx-auto" src="{{ asset('images/logo/ebiurowce.png') }}"
  606.                              alt="Raport Ofert Nieruchomości i Notowań"/>
  607.                         </figure>
  608.                     </a>
  609.                 </div>
  610.                 <div class="col">
  611.                     <a href="https://www.yanokhipoteczny.pl" target="_blank">
  612.                         <figure>
  613.                             <img class="img-fluid d-block mx-auto" src="{{ asset('images/logo/yanok.png') }}"
  614.                              alt="Yanok Hipoteczny"/>
  615.                         </figure>
  616.                     </a>
  617.                 </div>
  618.             </div>
  619.         </div>
  620.     </section>
  621. {% endblock %}