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

  1. {% extends 'Front/Templates/layouts/main.html.twig' %}
  3. {% block content %}
  6. <style>
  7. .feature-card {padding:1rem; 
  8. border:solid 2px #79b06d;; border-radius: 1rem; position:relative; overflow:hidden;}
  9.        .feature-card:hover {
  10.            transform: translateY(-5px);
  11.            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  12.        }
  13.        .package-price {
  14.            font-size: 2.2rem;
  15.            font-weight: 700;
  16.            line-height: 1.1;
  17.        }
  18.        .package-price-desc {
  19.            font-size: 0.95rem;
  20.            color: #6c757d;
  21.            margin-top: -0.25rem;
  22.            margin-bottom: 1.2rem;
  23.        }
  24.        .feature-card ul {
  25.            margin-top: 1.5rem;
  26.            margin-bottom: 1.5rem;
  27.        }
  28.        .package-icon-bg {
  29.            position: absolute;
  30.            top: 1rem;
  31.            right: 1rem;
  32.            font-size: 3.5rem;
  33.            color: #e9ecef;
  34.            opacity: 0.7;
  35.            pointer-events: none;
  36.            z-index: 1;
  37.        }
  38.        .icon-box {
  39.            width: 50px;
  40.            height: 50px;
  41.            display: flex;
  42.            align-items: center;
  43.            justify-content: center;
  44.            border-radius: 10px;
  45.            margin-bottom: 20px;
  46.            font-size: 1.25rem;
  47.            color:#fff !important;
  48.        }
  49.        .team-member-img {
  50.            aspect-ratio: 3/4;
  51.            background-color: #e2e8f0;
  52.            border-radius: 16px;
  53.            display: flex;
  54.            align-items: center;
  55.            justify-content: center;
  56.            color: #94a3b8;
  57.            margin-bottom: 15px;
  58.            overflow: hidden;
  59.        }
  60.        .step-number {
  61.            width: 60px;
  62.            height: 60px;
  63.            background-color: var(--primary-color) !important;
  64.            color: #fff;
  65.            border-radius: 50%;
  66.            display: flex;
  67.            align-items: center;
  68.            justify-content: center;
  69.            font-size: 1.5rem;
  70.            font-weight: 700;
  71.            margin: 0 auto 20px;
  72.            box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
  73.        }
  74.    </style>
  76.    <!-- Sekcja #about -->
  77.    <section id="about">
  79.        <!-- 1. Hero / Misja -->
  80.        <div class="container section-padding">
  81.            <div class="row align-items-center g-5">
  82.                <div class="col-lg-6">
  83.                    <h6 class="text-primary fw-bold text-uppercase mb-3">Poznaj nas bliżej</h6>
  84.                    <h1 class="display-6 fw-bold mb-4">Smart Finance Business <br/>Twój spokój w świecie cyfr.</h1>
  85.                    <p class="lead text-muted mb-4">
  86.                        Zapomnij o segregatorach i kolejkach w urzędach. Jesteśmy zespołem ekspertów, którzy połączyli tradycyjną wiedzę księgową z nowoczesną technologią.
  87.                    </p>
  88.                    <p class="mb-5">
  89.                        Wierzymy, że księgowość powinna wspierać rozwój Twojej firmy, a nie go spowalniać. Dzięki naszemu systemowi online, zarządzanie finansami staje się intuicyjne i dostępne z każdego miejsca na świecie.
  90.                    </p>
  91.                    <div class="d-flex flex-wrap gap-3">
  92.                        <a href="#zalety" class="btn btn-primary px-lg-5 px-md-4">Nasze Atuty</a>
  94.                    </div>
  95.                </div>
  96.                <div class="col-lg-6">
  97.                    <img src="/assets/about.jpg" class="rounded-4 shadow-lg bg-light "  style="width:100%; border-radius:1rem;"/>
  98.                </div>
  99.            </div>
  100.        </div>
  102.        <!-- 2. Pakiety (Grid) -->
  103.        <div id="zalety" class="bg-light-subtle-blue section-padding pt-3 pt-lg-5">
  104.            <div class="container">
  105.                
  107.                  <div class="text-center mb-5">
  108.                     <span class="h1 fw-black display-6 text-dark mb-3 d-block">Wybierz pakiet dla swojej firmy</span>
  109.                     <p class="text-muted mx-auto" style="max-width: 600px;">
  110.                         Poniżej znajdziesz gotowe zestawy usług i miesięczne sumy netto.
  111.                     </p>
  112.                 </div>
  115.                <div class="row g-4">
  116.                    <div class="col-md-6 col-lg-3">
  117.                        <div class="feature-card h-100 d-flex flex-column">
  118.                            <span class="package-icon-bg"><i class="bi bi-briefcase"></i></span>
  119.                            <h5 class="fw-bold">Działalność gospodarcza</h5>
  120.                            <div class="package-price text-primary">200 zł</div>
  121.                            <div class="package-price-desc">cena / miesiąc netto</div>
  122.                            <ul class="small text-muted ps-3">
  123.                                <li>Księgowość</li>
  124.                                <li>Bez VAT</li>
  125.                                <li>Do 10 dokumentów</li>
  126.                                <li>DRA właściciela</li>
  127.                            </ul>
  128.                            <p class="small mb-4">Dodatkowe opcje: 9</p>
  129.                            <a href="{{ path('front_online_service_creator_index', { 'categoryId': null }) }}" class="btn btn-primary mt-auto">Zobacz więcej</a>
  130.                        </div>
  131.                    </div>
  133.                    <div class="col-md-6 col-lg-3">
  134.                        <div class="feature-card h-100 d-flex flex-column">
  135.                            <span class="package-icon-bg"><i class="bi bi-house-door"></i></span>
  136.                            <h5 class="fw-bold">Najem prywatny</h5>
  137.                            <div class="package-price text-primary">150 zł</div>
  138.                            <div class="package-price-desc">cena / miesiąc netto</div>
  139.                            <ul class="small text-muted ps-3">
  140.                                <li>Księgowość</li>
  141.                                <li>Bez VAT</li>
  142.                                <li>Do 10 dokumentów</li>
  143.                                <li>Konsultacja AI w cenie</li>
  144.                            </ul>
  145.                            <p class="small mb-4">Dodatkowe opcje: 5</p>
  146.                            <a href="{{ path('front_online_service_creator_index', { 'categoryId': null }) }}" class="btn btn-primary mt-auto">Zobacz więcej</a>
  147.                        </div>
  148.                    </div>
  150.                    <div class="col-md-6 col-lg-3">
  151.                        <div class="feature-card h-100 d-flex flex-column">
  152.                            <span class="package-icon-bg"><i class="bi bi-journal-bookmark"></i></span>
  153.                            <h5 class="fw-bold">Pełne księgi</h5>
  154.                            <div class="package-price text-primary">250 zł</div>
  155.                            <div class="package-price-desc">cena / miesiąc netto</div>
  156.                            <ul class="small text-muted ps-3">
  157.                                <li>Księgowość</li>
  158.                                <li>Do 10 dokumentów</li>
  159.                                <li>Konsultacja AI w cenie</li>
  160.                            </ul>
  161.                            <p class="small mb-4">Dodatkowe opcje: 10</p>
  162.                            <a href="{{ path('front_online_service_creator_index', { 'categoryId': null }) }}" class="btn btn-primary mt-auto">Zobacz więcej</a>
  163.                        </div>
  164.                    </div>
  166.                    <div class="col-md-6 col-lg-3">
  167.                        <div class="feature-card h-100 d-flex flex-column">
  168.                            <span class="package-icon-bg"><i class="bi bi-cash-stack"></i></span>
  169.                            <h5 class="fw-bold">Usługi płacowe</h5>
  170.                            <div class="package-price text-primary">110 zł</div>
  171.                            <div class="package-price-desc">cena / miesiąc netto</div>
  172.                            <ul class="small text-muted ps-3">
  173.                                <li>Rozliczenie umowy o pracę</li>
  174.                                <li>Konsultacja AI w cenie</li>
  175.                            </ul>
  176.                            <p class="small mb-4">Dodatkowe opcje: 6</p>
  177.                            <a href="{{ path('front_online_service_creator_index', { 'categoryId': null }) }}" class="btn btn-primary mt-auto">Zobacz więcej</a>
  178.                        </div>
  179.                    </div>
  180.                </div>
  185.            </div>
  186.        </div>
  190.        <!-- 4. Jak to działa -->
  191.        <div class="py-5">
  192.            <div class="container text-center">
  193.              
  194.                 <div class="text-center mb-5">
  195.                     <span class="h1 fw-black display-6 text-dark mb-3 d-block">Współpraca w 3 prostych krokach</span>
  196.                     <p class="text-muted mx-auto" style="max-width: 600px;">
  197.                         Smart Finance to połączenie profesjonalizmu, wieloletniego doświadczenia i nowoczesnych technologii w obsłudze księgowej. 
  198.                          
  199.                     </p>
  200.                 </div>
  202.                <div class="row g-4">
  203.                    <div class="col-md-4">
  204.                        <div class="step-number">1</div>
  205.                        <h6 class="fw-bold">Wybierz zakres</h6>
  206.                        <p class="text-muted small px-lg-4">Dopasuj pakiet do wielkości swojej firmy na naszej stronie.</p>
  207.                    </div>
  208.                    <div class="col-md-4">
  209.                        <div class="step-number">2</div>
  210.                        <h6 class="fw-bold">Zamów online</h6>
  211.                        <p class="text-muted small px-lg-4">Szybko i bezpiecznie dokonaj aktywacji usług przez panel.</p>
  212.                    </div>
  213.                    <div class="col-md-4">
  214.                        <div class="step-number">3</div>
  215.                        <h6 class="fw-bold">Wgraj dokumenty</h6>
  216.                        <p class="text-muted small px-lg-4">Zajmiemy się resztą, a Ty otrzymasz gotowe raporty.</p>
  217.                    </div>
  218.                </div>
  219.            </div>
  220.        </div>
  222.    </section>
  228. {% endblock %}