src/Front/Modules/Page/Templates/Page/contact.html.twig line 1

  1. {% extends 'Front/Templates/layouts/main.html.twig' %}
  3. {% block content %}
  5. <style>
  6.         .contact-wrap {
  7.                 display: flex;
  8.                 flex-wrap: wrap;
  9.                 gap: 2rem;
  10.         }
  11.         .contact-info-col {
  12.                 flex: 1 1 320px;
  13.                 min-width: 280px;
  14.                 max-width: 420px;
  15.                 display: flex;
  16.                 flex-direction: column;
  17.                 gap: 1.5rem;
  18.         }
  19.         .contact-info-box {
  20.                 background: #fff;
  21.                 border-radius: 1.25rem;
  22.                 box-shadow: 0 2px 16px 0 rgba(0,0,0,0.04);
  23.                 padding: 1.5rem 2rem;
  24.                 border: 1px solid #f2f2f2;
  25.         }
  26.         .contact-info-box .contact-label {
  27.                 font-weight: 700;
  28.                 margin-bottom: .25rem;
  29.         }
  30.         .contact-info-box .contact-hours {
  31.                 font-size: 1.05rem;
  32.                 margin-bottom: .5rem;
  33.         }
  34.         .contact-info-box .contact-list {
  35.                 margin-bottom: 0.5rem;
  36.                 padding-left: 0;
  37.                 list-style: none;
  38.         }
  39.         .contact-info-box .contact-list li {
  40.                 margin-bottom: 0.15rem;
  41.                 font-size: 1.05rem;
  42.         }
  43.         .contact-info-box .contact-list a {
  44.                 color: var(--primary-color, #0d6efd);
  45.                 text-decoration: underline;
  46.         }
  47.         .contact-info-box .contact-list a:hover {
  48.                 text-decoration: none;
  49.         }
  50.         .contact-form-col {
  51.                 flex: 2 1 400px;
  52.                 min-width: 320px;
  53.                 max-width: 600px;
  54.         }
  55.         .contact-form-box {
  56.                 background: #fff;
  57.                 border-radius: 1.25rem;
  58.                 box-shadow: 0 2px 16px 0 rgba(0,0,0,0.04);
  59.                 padding: 2rem 2.5rem;
  60.                 border: 1px solid #f2f2f2;
  61.         }
  62.         @media (max-width: 991px) {
  63.                 .contact-wrap {
  64.                         flex-direction: column;
  65.                         gap: 2.5rem;
  66.                 }
  67.                 .contact-form-box {
  68.                         padding: 1.5rem 1rem;
  69.                 }
  70.         }
  71. </style>
  73. <section class="section-padding">
  75.         <div class="text-center mb-5">
  76.             <h1 class="fw-black display-6 text-dark mb-3"> Masz pytania?</h1>
  77.             <p class="text-muted mx-auto" style="max-width: 600px;">
  78.           
  79. Chętnie na nie odpowiemy.   
  80.             </p>
  81.         </div>
  84.     <div class="container">
  85.         <div class="row">
  86.             <!-- Dane kontaktowe -->
  87.             <div class="col-lg-4">
  88.                 <div class="contact-info-box mb-3">
  89.                     <div class="contact-label">Telefony</div>
  90.                     <ul class="contact-list">
  91.                         <li><a href="tel:+48519420793">+48 519 420 793</a></li>
  92.                         <li><a href="tel:+48600074064">+48 600 074 064</a></li>
  93.                         <li><a href="tel:+48690327393">+48 690 327 393</a></li>
  94.                     </ul>
  95.                 </div>
  96.                 <div class="contact-info-box mb-3">
  97.                     <div class="contact-label">E-mail</div>
  98.                     <ul class="contact-list">
  99.                         <li><a href="mailto:biuro@partnerzy.net">biuro@partnerzy.net</a></li>
  100.                         <li><a href="mailto:kancelaria@partnerzy.net">kancelaria@partnerzy.net</a></li>
  101.                         <li><a href="mailto:partnerzy@partnerzy.net">partnerzy@partnerzy.net</a></li>
  102.                     </ul>
  103.                 </div>
  104.               
  105.                 <div class="contact-info-box mb-3">
  106.                     <div class="contact-label">Godziny otwarcia</div>
  107.                     <div class="contact-hours">pn-pt <b>8:00–16:00</b></div>
  108.                 </div>
  109.                 <div class="contact-info-box mb-3">
  110.                     <div class="contact-label">Adres</div>
  111.                     <div>ul. 3 Maja 33,<br>81-743 Sopot</div>
  112.                 </div>
  113.             </div>
  115.             <!-- Formularz kontaktowy -->
  116.             <div class="col-lg-8">
  117.                 <form class="contact-form-box mb-3" method="post" action="#">
  118.                     <h4 class="fw-bold mb-4">Formularz kontaktowy</h4>
  119.                     <div class="row g-3 mb-3">
  120.                         <div class="col-md-6">
  121.                             <input type="text" class="form-control" name="name" placeholder="Imię i nazwisko" required>
  122.                         </div>
  123.                         <div class="col-md-6">
  124.                             <input type="email" class="form-control" name="email" placeholder="Adres email" required>
  125.                         </div>
  126.                         <div class="col-md-6">
  127.                             <input type="text" class="form-control" name="phone" placeholder="Telefon">
  128.                         </div>
  129.                         <div class="col-md-6">
  130.                             <input type="text" class="form-control" name="company" placeholder="Firma">
  131.                         </div>
  132.                         <div class="col-12">
  133.                             <textarea class="form-control" name="message" rows="7" placeholder="Treść wiadomości" required></textarea>
  134.                         </div>
  135.                     </div>
  136.                     <button type="submit" class="btn btn-primary  ">Wyślij wiadomość</button>
  137.                 </form>
  138.             </div>
  139.         </div>
  140.     </div>
  141. </section>
  143. {% endblock %}