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

  1. {% extends 'Front/Templates/layouts/main.html.twig' %}
  3. {% block content %}
  6. <style>
  7. .feature-card {padding:1rem; border:solid 1px #efefef; border-radius: 1rem;}
  8.        .feature-card:hover {
  9.            transform: translateY(-5px);
  10.            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  11.        }
  12.        .icon-box {
  13.            width: 50px;
  14.            height: 50px;
  15.            display: flex;
  16.            align-items: center;
  17.            justify-content: center;
  18.            border-radius: 10px;
  19.            margin-bottom: 20px;
  20.            font-size: 1.25rem;
  21.            color:#fff !important;
  22.        }
  23.        .team-member-img {
  24.            aspect-ratio: 3/4;
  25.            background-color: #e2e8f0;
  26.            border-radius: 16px;
  27.            display: flex;
  28.            align-items: center;
  29.            justify-content: center;
  30.            color: #94a3b8;
  31.            margin-bottom: 15px;
  32.            overflow: hidden;
  33.        }
  34.        .step-number {
  35.            width: 60px;
  36.            height: 60px;
  37.            background-color: var(--primary-color) !important;
  38.            color: #fff;
  39.            border-radius: 50%;
  40.            display: flex;
  41.            align-items: center;
  42.            justify-content: center;
  43.            font-size: 1.5rem;
  44.            font-weight: 700;
  45.            margin: 0 auto 20px;
  46.            box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
  47.        }
  48.    </style>
  50.    <!-- Sekcja #about -->
  51.    <section id="about">
  53.        <!-- 1. Hero / Misja -->
  54.        <div class="container section-padding">
  55.            <div class="row align-items-center g-5">
  56.                <div class="col-lg-6">
  57.                    <h6 class="text-primary fw-bold text-uppercase mb-3">Poznaj nas bliżej</h6>
  58.                    <h1 class="display-6 fw-bold mb-4">Smart Finance Business <br/>Twój spokój w świecie cyfr.</h1>
  59.                    <p class="lead text-muted mb-4">
  60.                        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ą.
  61.                    </p>
  62.                    <p class="mb-5">
  63.                        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.
  64.                    </p>
  65.                    <div class="d-flex flex-wrap gap-3">
  66.                        <a href="#zalety" class="btn btn-primary px-lg-5 px-md-4">Nasze Atuty</a>
  68.                    </div>
  69.                </div>
  70.                <div class="col-lg-6">
  71.                    <img src="/assets/about.jpg" class="rounded-4 shadow-lg bg-light "  style="width:100%; border-radius:1rem;"/>
  72.                </div>
  73.            </div>
  74.        </div>
  76.        <!-- 2. Zalety (Grid) -->
  77.        <div id="zalety" class="bg-light-subtle-blue section-padding pt-3 pt-lg-5">
  78.            <div class="container">
  79.                <div class="text-center mb-5">
  80.                    <h2 class="fw-bold">Dlaczego nasz system to "gamechanger"?</h2>
  81.                    <p class="text-muted">Innowacja, która zmienia podejście do finansów Twojej firmy.</p>
  82.                </div>
  84.                <div class="row g-4">
  85.        <div class="col-md-6 col-lg-4">
  86.            <div class="feature-card">
  87.                <div class="icon-box bg-primary bg-opacity-10 text-primary">
  88.                    <i class="bi bi-lightning-fill"></i>
  89.                </div>
  90.                <h5 class="fw-bold">Błyskawiczny start</h5>
  91.                <p class="text-muted small">Wybierasz pakiet, zamawiasz online i w 15 minut jesteś gotowy do pracy. Bez zbędnej papierologii.</p>
  92.            </div>
  93.        </div>
  94.        <div class="col-md-6 col-lg-4">
  95.            <div class="feature-card">
  96.                <div class="icon-box bg-success bg-opacity-10 text-success">
  97.                    <i class="bi bi-clock-fill"></i>
  98.                </div>
  99.                <h5 class="fw-bold">Dostęp 24/7</h5>
  100.                <p class="text-muted small">Twoje finanse są w chmurze. Sprawdzasz stan podatków o dowolnej porze z poziomu smartfona.</p>
  101.            </div>
  102.        </div>
  103.        <div class="col-md-6 col-lg-4">
  104.            <div class="feature-card">
  105.                <div class="icon-box bg-info bg-opacity-10 text-info">
  106.                    <i class="bi bi-shield-lock-fill"></i>
  107.                </div>
  108.                <h5 class="fw-bold">Bezpieczeństwo</h5>
  109.                <p class="text-muted small">Szyfrowanie klasy bankowej gwarantuje, że Twoje dane są bezpieczniejsze niż w tradycyjnej poczcie.</p>
  110.            </div>
  111.        </div>
  112.        <div class="col-md-6 col-lg-4">
  113.            <div class="feature-card">
  114.                <div class="icon-box bg-warning bg-opacity-10 text-warning">
  115.                    <i class="bi bi-cash-coin"></i>
  116.                </div>
  117.                <h5 class="fw-bold">Przejrzystość kosztów</h5>
  118.                <p class="text-muted small">Brak ukrytych opłat. Stały abonament i pełna kontrola nad wydatkami na księgowość.</p>
  119.            </div>
  120.        </div>
  121.        <div class="col-md-6 col-lg-4">
  122.            <div class="feature-card">
  123.                <div class="icon-box bg-danger bg-opacity-10 text-danger">
  124.                    <i class="bi bi-robot"></i>
  125.                </div>
  126.                <h5 class="fw-bold">Automatyzacja</h5>
  127.                <p class="text-muted small">System przypomni Ci o terminach płatności VAT i ZUS. Ty rozwijasz biznes, my pilnujemy dat.</p>
  128.            </div>
  129.        </div>
  130.        <div class="col-md-6 col-lg-4">
  131.            <div class="feature-card text-white border-0 d-flex flex-column justify-content-center text-center"
  132.            style="background-image: linear-gradient(135deg, var(--finance-green) 0%, var(--finance-orange) 100%);">
  133.                <h5 class="fw-bold mb-3">Zacznij już teraz</h5>
  134.                <p class=" mb-4 px-lg-3"  >Dołącz do grona nowoczesnych firm rozliczanych online.</p>
  135.                <a href="https://smartfinance.business/kontakt" class="btn btn-light text-primary fw-bold">Skontaktuj się</a>
  136.            </div>
  137.        </div>
  138.    </div>
  143.            </div>
  144.        </div>
  148.        <!-- 4. Jak to działa -->
  149.        <div class="py-5">
  150.            <div class="container text-center">
  151.                <h3 class="fw-bold mb-5">Współpraca w 3 prostych krokach</h3>
  152.                <div class="row g-4">
  153.                    <div class="col-md-4">
  154.                        <div class="step-number">1</div>
  155.                        <h6 class="fw-bold">Wybierz zakres</h6>
  156.                        <p class="text-muted small px-lg-4">Dopasuj pakiet do wielkości swojej firmy na naszej stronie.</p>
  157.                    </div>
  158.                    <div class="col-md-4">
  159.                        <div class="step-number">2</div>
  160.                        <h6 class="fw-bold">Zamów online</h6>
  161.                        <p class="text-muted small px-lg-4">Szybko i bezpiecznie dokonaj aktywacji usług przez panel.</p>
  162.                    </div>
  163.                    <div class="col-md-4">
  164.                        <div class="step-number">3</div>
  165.                        <h6 class="fw-bold">Wgraj dokumenty</h6>
  166.                        <p class="text-muted small px-lg-4">Zajmiemy się resztą, a Ty otrzymasz gotowe raporty.</p>
  167.                    </div>
  168.                </div>
  169.            </div>
  170.        </div>
  172.    </section>
  178. {% endblock %}