src/Front/Modules/OnlineService/Templates/OnlineService/index.html.twig line 1

  1. {% extends 'Front/Templates/layouts/main.html.twig' %}
  3. {% block javascripts %}
  4.     <script type="text/javascript" src="{{ asset('assets/app/front/modules/online-service/js/online_service_list.js') }}"></script>
  5. {% endblock %}
  7. {% block content %}
  8.     <style>
  9.         .feature-card {padding:1rem; border:solid 1px #efefef; border-radius: 1rem;}
  10.         .feature-card:hover {
  11.             transform: translateY(-5px);
  12.             box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  13.         }
  14.         .service-card {
  15.             border-width: 2px;
  16.         }
  17.         .service-card .price {
  18.                 font-size: 2.2rem;
  19.                  font-weight: 700;
  20.                  line-height: 1.1;
  21.         }
  22.         .package-price-desc {
  23.              font-size: 0.95rem;
  24.              color: #6c757d;
  25.              margin-top: -0.25rem;
  26.              margin-bottom: 1.2rem;
  27.          }
  28.         .filter-badge {
  29.             cursor: pointer;
  30.             border: 1px solid #d7dde5;
  31.             background: #fff;
  32.             color: #3c4a5c;
  33.             transition: all .2s ease;
  34.         }
  35.         .filter-badge:hover {
  36.             border-color: var(--primary-color);
  37.             color: var(--primary-color);
  38.         }
  39.         .filter-badge.active {
  40.             background: var(--primary-color);
  41.             border-color: var(--primary-color);
  42.             color: #fff;
  43.         }
  44.         .service-group-badge {
  45.             cursor: pointer;
  46.             margin-left: auto;
  47.         }
  48.         .icon-box {
  49.             width: 50px;
  50.             height: 50px;
  51.             display: flex;
  52.             align-items: center;
  53.             justify-content: center;
  54.             border-radius: 10px;
  55.             margin-bottom: 20px;
  56.             font-size: 1.25rem;
  57.             color:#fff !important;
  58.         }
  59.         .team-member-img {
  60.             aspect-ratio: 3/4;
  61.             background-color: #e2e8f0;
  62.             border-radius: 16px;
  63.             display: flex;
  64.             align-items: center;
  65.             justify-content: center;
  66.             color: #94a3b8;
  67.             margin-bottom: 15px;
  68.             overflow: hidden;
  69.         }
  70.         .step-number {
  71.             width: 60px;
  72.             height: 60px;
  73.             background-color: var(--primary-color) !important;
  74.             color: #fff;
  75.             border-radius: 50%;
  76.             display: flex;
  77.             align-items: center;
  78.             justify-content: center;
  79.             font-size: 1.5rem;
  80.             font-weight: 700;
  81.             margin: 0 auto 20px;
  82.             box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
  83.         }
  84.    </style>
  86.    <section id="about">
  87.        <div class="text-center mb-5">
  88.             <h1 class="fw-black display-6 text-dark mb-3">Usługi jednorazowe</h1>
  89.             <p class="text-muted mx-auto" style="max-width: 600px;">
  90.                 Dobierz interesujące cię usługi jednorazowe
  91.             </p>
  92.         </div>
  94.         {% if data.services %}
  95.             <div class="bg-light-subtle-blue section-padding pt-3 pt-lg-5">
  96.                <div class="container">
  97.                    <div class="d-flex flex-wrap justify-content-center gap-2 mb-4">
  98.                        <span class="badge rounded-pill px-3 py-2 filter-badge active" data-id="">Wszystkie</span>
  99.                        {% for categoryData in data.categories %}
  100.                            <span class="category_container badge rounded-pill px-3 py-2 filter-badge" data-id="{{ categoryData.entity.id }}">{{ categoryData.entity.name }}</span>
  101.                        {% endfor %}
  102.                    </div>
  103.                </div>
  104.             </div>
  106.            <div class="row g-4">
  107.                {% for serviceData in data.services %}
  108.                    {% set service = serviceData.entity %}
  109.                    {% set colors = data.categories[service.category.id].colors %}
  110.                    <div class="col-md-6 col-xl-4 service-item" data-category-id="{{ service.category.id }}">
  111.                        <div class="feature-card service-card h-100 d-flex flex-column" style="border-color: {{ colors.border }}">
  112.                            <span class="badge rounded-pill align-self-start mb-3 service-group-badge" data-category-id="{{ service.category.id }}" style="background-color: {{ colors.badge_bg }}; color: {{ colors.badge_text }};"#}>{{ service.category.name }}</span>
  113.                            <h6 class="fw-bold mb-3"
  114.                                style="cursor: help;"
  115.                                data-bs-toggle="popover"
  116.                                data-bs-trigger="hover focus"
  117.                                data-bs-placement="top"
  118.                                data-bs-content="{{ service.description }}">
  119.                                {{ service.name }}
  120.                            </h6>
  121.                            <img src="{{ serviceData.image_url }}" width="100" class="online-img" />
  123.                            <p class="online-description">{{ service.description|nl2br }}</p>
  124.                            <p class="price text-primary fw-semibold mb-0">{{ serviceData.price|formatPrice }}</p>
  125.                            <div class="package-price-desc mb-4">cena netto</div>
  126.                            {{ render(controller('App\\Front\\Modules\\OnlineService\\Controller\\OnlineServiceController::addToCartButtonWidget', { 'service': service })) }}
  127.                        </div>
  128.                    </div>
  129.                {% endfor %}
  130.            </div>
  131.         {% endif %}
  132.    </section>
  133. {% endblock %}