templates/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Willkommen bei PfauPN | Sichere VPN- und Bot-Hosting-Dienste{% endblock %}
  5. {% block body %}
  6. <section class="pb-6">
  7.     <div class="container">
  8.         <div class="row flex-center">
  9.             <div class="col-lg-6 col-md-5 order-md-1">
  10.                 <img class="img-fluid" src="{{ asset('assets/img/illustrations/1.png') }}" alt="" />
  11.             </div>
  12.             <div class="col-md-7 col-lg-6 mt-5 text-center text-md-start">
  13.                 <h1 class="fw-medium">Einfacher Zugang zu sicheren <span class="fw-bold">VPN-</span> und <span
  14.                         class="fw-bold">Bot-Hosting-Diensten</span></h1>
  15.                 <p class="mt-3 mb-4">Mit PfauPN bieten wir dir nicht nur sichere VPN-Dienste, sondern auch die Möglichkeit,
  16.                     Discord-Bots einfach und dezentral zu hosten. Entdecke unsere leistungsstarken Funktionen und sorge für grenzenlose Freiheit und höchste Sicherheit.</p>
  17.                 <a class="btn btn-lg btn-danger hover-top btn-glow" href="#">Jetzt starten</a>
  18.             </div>
  19.         </div>
  20.     </div>
  21. </section>
  23. <section class="py-4">
  24.     <div class="container">
  25.         <div class="card py-5 border-0 shadow-sm">
  26.             <div class="card-body">
  27.                 <div class="row">
  28.                     <div class="col-4">
  29.                         <div class="border-end d-flex justify-content-md-center">
  30.                             <div class="mx-2 mx-md-0 me-md-5">
  31.                                 <div class="badge badge-circle bg-soft-danger">
  32.                                     <svg class="bi bi-person-fill" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#0d5987" viewBox="0 0 16 16">
  33.                                         <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path>
  34.                                     </svg>
  35.                                 </div>
  36.                             </div>
  37.                             <div>
  38.                                 <p class="fw-bolder text-1000 mb-0">100+ </p>
  39.                                 <p class="mb-0">Zufriedene Nutzer</p>
  40.                             </div>
  41.                         </div>
  42.                     </div>
  43.                     <div class="col-4">
  44.                         <div class="border-end d-flex justify-content-md-center">
  45.                             <div class="mx-2 mx-md-0 me-md-5">
  46.                                 <div class="badge badge-circle bg-soft-danger">
  47.                                     <svg class="bi bi-geo-alt-fill" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#0d5987" viewBox="0 0 16 16">
  48.                                         <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
  49.                                     </svg>
  50.                                 </div>
  51.                             </div>
  52.                             <div>
  53.                                 <p class="fw-bolder text-1000 mb-0">50+ </p>
  54.                                 <p class="mb-0">Server weltweit</p>
  55.                             </div>
  56.                         </div>
  57.                     </div>
  58.                     <div class="col-4">
  59.                         <div class="d-flex justify-content-md-center">
  60.                             <div class="mx-2 mx-md-0 me-md-5">
  61.                                 <div class="badge badge-circle bg-soft-danger">
  62.                                     <svg class="bi bi-hdd-stack-fill" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#0d5987" viewBox="0 0 16 16">
  63.                                         <path d="M2 9a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1a2 2 0 0 0-2-2H2zm.5 3a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm2 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zM2 2a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2zm.5 3a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1zm2 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1z"></path>
  64.                                     </svg>
  65.                                 </div>
  66.                             </div>
  67.                             <div>
  68.                                 <p class="fw-bolder text-1000 mb-0">200+ </p>
  69.                                 <p class="mb-0">Gehostete Bots</p>
  70.                             </div>
  71.                         </div>
  72.                     </div>
  73.                 </div>
  74.             </div>
  75.         </div>
  76.     </div>
  77. </section>
  79. <section class="pt-4 pt-md-6">
  80.     <div class="container">
  81.         <div class="row align-items-center">
  82.             <div class="col-md-5 col-lg-7 text-lg-center">
  83.                 <img class="img-fluid mb-5 mb-md-0" src="{{ asset('assets/img/illustrations/2.png') }}" alt="" />
  84.             </div>
  85.             <div class="col-md-7 col-lg-5 text-center text-md-start">
  86.                 <h2>Wir bieten viele <br />Funktionen, die du nutzen kannst</h2>
  87.                 <p>Erkunde die Funktionen von PfauPN: Sichere Verbindungen, grenzenlose Freiheit und dezentrales Bot-Hosting, alles mit einem Klick verfügbar.</p>
  88.                 <div class="d-flex">
  89.                     <svg class="bi bi-check-circle-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#2FAB73" viewBox="0 0 16 16">
  90.                         <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
  91.                     </svg>
  92.                     <p class="ms-2">Starke Online-Sicherheit.</p>
  93.                 </div>
  94.                 <div class="d-flex">
  95.                     <svg class="bi bi-check-circle-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#2FAB73" viewBox="0 0 16 16">
  96.                         <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
  97.                     </svg>
  98.                     <p class="ms-2">Keine geografischen Beschränkungen.</p>
  99.                 </div>
  100.                 <div class="d-flex">
  101.                     <svg class="bi bi-check-circle-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#2FAB73" viewBox="0 0 16 16">
  102.                         <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
  103.                     </svg>
  104.                     <p class="ms-2">VPN mit Hochgeschwindigkeit.</p>
  105.                 </div>
  106.                 <div class="d-flex">
  107.                     <svg class="bi bi-check-circle-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#2FAB73" viewBox="0 0 16 16">
  108.                         <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"></path>
  109.                     </svg>
  110.                     <p class="ms-2">Dezentrales Bot-Hosting.</p>
  111.                 </div>
  112.             </div>
  113.         </div>
  114.     </div>
  115. </section>
  117. <section class="bg-100 py-7 text-center">
  118.     <div class="container-lg">
  119.         <div class="row justify-content-center">
  120.             <div class="col-md-8 col-lg-5">
  121.                 <h2>Wähle deinen Plan</h2>
  122.                 <p>Wähle das für dich passende Paket und genieße alle Vorteile von PfauPN und unserem Bot-Hosting!</p>
  123.             </div>
  124.         </div>
  125.         <div class="row h-100 justify-content-center">
  126.             <div class="col-md-4 pt-4 px-md-2 px-lg-3">
  127.                 <div class="card h-100">
  128.                     <div class="card-body d-flex flex-column justify-content-around mx-auto">
  129.                         <div class="text-center pt-5">
  130.                             <img class="img-fluid" src="{{ asset('assets/img/icons/pricing.png') }}" alt="" />
  131.                             <h5 class="my-4">VPN Plan</h5>
  132.                         </div>
  133.                         <ul class="list-unstyled">
  134.                             <li class="mb-3"><span class="me-2">Unbegrenzte Bandbreite</span></li>
  135.                             <li class="mb-3"><span class="me-2">Verschlüsselte Verbindung</span></li>
  136.                             <li class="mb-3"><span class="me-2">Keine Protokollierung</span></li>
  137.                             <li class="mb-3"><span class="me-2">Kompatibel mit allen Geräten</span></li>
  138.                         </ul>
  139.                         <div class="text-center my-5">
  140.                             <h2 class="mb-3">9,99€/Monat</h2>
  141.                             <button class="btn btn-outline-danger rounded-pill" type="submit">Registrieren</button>
  142.                         </div>
  143.                     </div>
  144.                 </div>
  145.             </div>
  146.             <div class="col-md-4 pt-4 px-md-2 px-lg-3">
  147.                 <div class="card h-100">
  148.                     <div class="card-body d-flex flex-column justify-content-around mx-auto">
  149.                         <div class="text-center pt-5">
  150.                             <img class="img-fluid" src="{{ asset('assets/img/icons/pricing.png') }}" alt="" />
  151.                             <h5 class="my-4">Discord Bot Hosting Plan</h5>
  152.                         </div>
  153.                         <ul class="list-unstyled">
  154.                             <li class="mb-3"><span class="me-2">Dezentrales Bot-Hosting</span></li>
  155.                             <li class="mb-3"><span class="me-2">24/7 Verfügbarkeit</span></li>
  156.                             <li class="mb-3"><span class="me-2">Hosting für mehrere Discord-Server</span></li>
  157.                             <li class="mb-3"><span class="me-2">Einfache Verwaltung und Updates</span></li>
  158.                         </ul>
  159.                         <div class="text-center my-5">
  160.                             <h2 class="mb-3">4,99€/Monat</h2>
  161.                             <button class="btn btn-outline-danger rounded-pill" type="submit">Registrieren</button>
  162.                         </div>
  163.                     </div>
  164.                 </div>
  165.             </div>
  166.             <div class="col-md-4 pt-4 px-md-2 px-lg-3">
  167.                 <div class="card h-100">
  168.                     <div class="card-body d-flex flex-column justify-content-around mx-auto">
  169.                         <div class="text-center pt-5">
  170.                             <img class="img-fluid" src="{{ asset('assets/img/icons/pricing.png') }}" alt="" />
  171.                             <h5 class="my-4">VIP Plan</h5>
  172.                         </div>
  173.                         <ul class="list-unstyled">
  174.                             <li class="mb-3"><span class="me-2">99,9% Verbindungsstabilität</span></li>
  175.                             <li class="mb-3"><span class="me-2">Geld-zurück-Garantie bei Ausfällen</span></li>
  176.                             <li class="mb-3"><span class="me-2">Priorisierter Support</span></li>
  177.                             <li class="mb-3"><span class="me-2">Exklusive Features und Updates</span></li>
  178.                         </ul>
  179.                         <div class="text-center my-5">
  180.                             <h2 class="mb-3">19,99€/Monat</h2>
  181.                             <button class="btn btn-danger hover-top btn-glow rounded-pill border-0" type="submit">Registrieren</button>
  182.                         </div>
  183.                     </div>
  184.                 </div>
  185.             </div>
  186.         </div>
  187.     </div>
  188. </section>
  190. <section class="bg-100 py-7 text-center">
  191.     <div class="container-lg">
  192.         <div class="row justify-content-center">
  193.             <div class="col-md-8 col-lg-5">
  194.                 <h2>Partnerprogramm</h2>
  195.                 <p>Verdiene Geld, indem du VPN-Server bei dir zuhause betreibst und Teil der dezentralen Infrastruktur von PfauPN wirst.</p>
  196.             </div>
  197.         </div>
  198.         <div class="row h-100 justify-content-center">
  199.             <div class="col-md-4 pt-4 px-md-2 px-lg-3">
  200.                 <div class="card h-100">
  201.                     <div class="card-body d-flex flex-column justify-content-around mx-auto">
  202.                         <div class="text-center pt-5">
  203.                             <img class="img-fluid" src="{{ asset('assets/img/icons/pricing.png') }}" alt="" />
  204.                             <h5 class="my-4">Werde PfauPN-Partner</h5>
  205.                         </div>
  206.                         <ul class="list-unstyled">
  207.                             <li class="mb-3"><span class="me-2">Erhalte monatliche Vergütung für den Betrieb deines Servers</span></li>
  208.                             <li class="mb-3"><span class="me-2">Wir stellen die Hardware und Software bereit</span></li>
  209.                             <li class="mb-3"><span class="me-2">Technischer Support bei Installation und Wartung</span></li>
  210.                             <li class="mb-3"><span class="me-2">Trage zum Umweltschutz bei durch den Verzicht auf große Rechenzentren</span></li>
  211.                         </ul>
  212.                         <div class="text-center my-5">
  213.                             <h2 class="mb-3">Werde Partner</h2>
  214.                             <button class="btn btn-outline-danger rounded-pill" type="submit">Mehr erfahren</button>
  215.                         </div>
  216.                     </div>
  217.                 </div>
  218.             </div>
  219.             <div class="col-md-4 pt-4 px-md-2 px-lg-3">
  220.                 <div class="card h-100">
  221.                     <div class="card-body d-flex flex-column justify-content-around mx-auto">
  222.                         <div class="text-center pt-5">
  223.                             <img class="img-fluid" src="{{ asset('assets/img/icons/pricing.png') }}" alt="" />
  224.                             <h5 class="my-4">Zusätzliche Einnahmequellen</h5>
  225.                         </div>
  226.                         <ul class="list-unstyled">
  227.                             <li class="mb-3"><span class="me-2">Erhalte bis zu 40% mehr Vergütung durch das Werben von Kunden</span></li>
  228.                             <li class="mb-3"><span class="me-2">Verdiene zusätzlich durch das Hosting von Discord-Bots</span></li>
  229.                             <li class="mb-3"><span class="me-2">Dein Server, dein Einkommen – Du entscheidest, wie du ihn nutzt</span></li>
  230.                             <li class="mb-3"><span class="me-2">Volle Flexibilität bei der Nutzung deiner Hardware</span></li>
  231.                         </ul>
  232.                         <div class="text-center my-5">
  233.                             <h2 class="mb-3">Partner werben Kunden</h2>
  234.                             <button class="btn btn-outline-danger rounded-pill" type="submit">Jetzt Partner werden</button>
  235.                         </div>
  236.                     </div>
  237.                 </div>
  238.             </div>
  239.             <div class="col-md-4 pt-4 px-md-2 px-lg-3">
  240.                 <div class="card h-100">
  241.                     <div class="card-body d-flex flex-column justify-content-around mx-auto">
  242.                         <div class="text-center pt-5">
  243.                             <img class="img-fluid" src="{{ asset('assets/img/icons/pricing.png') }}" alt="" />
  244.                             <h5 class="my-4">Umweltfreundlich und sicher</h5>
  245.                         </div>
  246.                         <ul class="list-unstyled">
  247.                             <li class="mb-3"><span class="me-2">Betrieb von VPN-Servern direkt bei dir zuhause</span></li>
  248.                             <li class="mb-3"><span class="me-2">Reduziere den Energieverbrauch durch Verzicht auf große Rechenzentren</span></li>
  249.                             <li class="mb-3"><span class="me-2">Trage zur CO₂-Reduktion bei und unterstütze nachhaltige Technologien</span></li>
  250.                             <li class="mb-3"><span class="me-2">Garantierte Sicherheit und höchste Anonymität für Endkunden</span></li>
  251.                         </ul>
  252.                         <div class="text-center my-5">
  253.                             <h2 class="mb-3">Dezentral und umweltfreundlich</h2>
  254.                             <button class="btn btn-outline-danger rounded-pill" type="submit">Jetzt informieren</button>
  255.                         </div>
  256.                     </div>
  257.                 </div>
  258.             </div>
  259.         </div>
  260.     </div>
  261. </section>
  263. <section class="bg-100 py-7 text-center">
  264.     <div class="container">
  265.         <div class="row justify-content-center">
  266.             <div class="col-md-8 col-lg-5">
  267.                 <h2>Ein globales Netzwerk<br />blitzschnelle VPN-Server</h2>
  268.                 <p>PfauPN wächst stetig, um dir immer den besten Zugang zu bieten. 
  269.                 Wir sind ständig dabei, unser Netzwerk zu erweitern und suchen laufend neue Partner, 
  270.                 um unser Servernetzwerk weiter auszubauen. Egal, wo du dich gerade aufhältst, 
  271.                 mit PfauPN bist du sicher und blitzschnell online – weltweit und zukunftsorientiert.</p>
  272.             </div>
  273.             <div class="pt-8">
  274.                 <img class="img-fluid" src="{{ asset('assets/img/gallery/map.png') }}" alt="" />
  275.             </div>
  276.         </div>
  277.     </div>
  278. </section>
  280. <section class="py-5 bg-100">
  281.     <div class="container">
  282.         <div class="row justify-content-center">
  283.             <div class="col-6 col-sm-4 col-md-2 mb-2 mb-md-0"><img class="img-fluid" src="{{ asset('assets/img/gallery/netflix.png') }}" alt="" height="50" /></div>
  284.             <div class="col-6 col-sm-4 col-md-2 mb-2 mb-md-0"><img class="img-fluid" src="{{ asset('assets/img/gallery/reddit.png') }}" alt="" height="50" /></div>
  285.             <div class="col-6 col-sm-4 col-md-2 mb-2 mb-md-0"><img class="img-fluid" src="{{ asset('assets/img/gallery/discord.png') }}" alt="" height="50" /></div>
  286.             <div class="col-6 col-sm-4 col-md-2 mb-2 mb-sm-0"><img class="img-fluid" src="{{ asset('assets/img/gallery/spotify.png') }}" alt="" height="50" /></div>
  287.         </div>
  288.     </div>
  289. </section>
  291. <section class="py-7">
  292.     <div class="container">
  293.         <div class="row flex-center">
  294.             <div class="col-md-8 col-lg-5 text-center">
  295.                 <h2>Vertraut von Tausenden<br />zufriedener Kunden</h2>
  296.                 <p>Unsere Kunden vertrauen auf die zuverlässigen Dienste von PfauPN und unser dezentrales Bot-Hosting.</p>
  297.             </div>
  298.         </div>
  299.         <div class="carousel slide pt-6" id="carouselExampleDark" data-bs-ride="carousel">
  300.             <div class="carousel-inner">
  301.                 <div class="carousel-item active" data-bs-interval="10000">
  302.                     <div class="row h-100">
  303.                                                 <div class="col-md-4 mb-3 mb-md-0">
  304.                             <div class="card h-100">
  305.                                 <div class="card-body">
  306.                                     <div class="d-flex justify-content-between align-items-center">
  307.                                         <div class="d-flex align-items-center"><img class="img-fluid" src="{{ asset('assets/img/gallery/user-1.png') }}" alt="" />
  308.                                             <div class="flex-1 ms-3">
  309.                                                 <h6 class="mb-0 fs--1 text-1000 fw-medium">Marie Schmidt</h6>
  310.                                                 <p class="fs--2 fw-normal mb-0">Berlin, Deutschland</p>
  311.                                             </div>
  312.                                         </div>
  313.                                         <div class="d-flex align-items-center"><span class="text-900 me-3">4.9</span>
  314.                                             <svg class="bi bi-star-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FEA250" viewBox="0 0 16 16">
  315.                                                 <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
  316.                                             </svg>
  317.                                         </div>
  318.                                     </div>
  319.                                     <p class="card-text pt-3">"PfauPN bietet die beste Verbindung und Anonymität, die ich je erlebt habe. Besonders die umweltfreundliche Struktur ist für mich ein großer Pluspunkt."</p>
  320.                                 </div>
  321.                             </div>
  322.                         </div>
  323.                         <div class="col-md-4 mb-3 mb-md-0">
  324.                             <div class="card h-100">
  325.                                 <div class="card-body">
  326.                                     <div class="d-flex justify-content-between align-items-center">
  327.                                         <div class="d-flex align-items-center"><img class="img-fluid" src="{{ asset('assets/img/gallery/user-2.png') }}" alt="" />
  328.                                             <div class="flex-1 ms-3">
  329.                                                 <h6 class="mb-0 fs--1 text-1000 fw-medium">Jan Müller</h6>
  330.                                                 <p class="fs--2 fw-normal mb-0">Hamburg, Deutschland</p>
  331.                                             </div>
  332.                                         </div>
  333.                                         <div class="d-flex align-items-center"><span class="text-900 me-3">4.8</span>
  334.                                             <svg class="bi bi-star-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FEA250" viewBox="0 0 16 16">
  335.                                                 <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
  336.                                             </svg>
  337.                                         </div>
  338.                                     </div>
  339.                                     <p class="card-text pt-3">"Die Bot-Hosting-Option von PfauPN ist unschlagbar. Keine Ausfälle und eine blitzschnelle Verbindung für meinen Discord-Server."</p>
  340.                                 </div>
  341.                             </div>
  342.                         </div>
  343.                         <div class="col-md-4 mb-3 mb-md-0">
  344.                             <div class="card h-100">
  345.                                 <div class="card-body">
  346.                                     <div class="d-flex justify-content-between align-items-center">
  347.                                         <div class="d-flex align-items-center"><img class="img-fluid" src="{{ asset('assets/img/gallery/user-3.png') }}" alt="" />
  348.                                             <div class="flex-1 ms-3">
  349.                                                 <h6 class="mb-0 fs--1 text-1000 fw-medium">Lisa Weber</h6>
  350.                                                 <p class="fs--2 fw-normal mb-0">München, Deutschland</p>
  351.                                             </div>
  352.                                         </div>
  353.                                         <div class="d-flex align-items-center"><span class="text-900 me-3">5.0</span>
  354.                                             <svg class="bi bi-star-fill" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FEA250" viewBox="0 0 16 16">
  355.                                                 <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.283.95l-3.523 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
  356.                                             </svg>
  357.                                         </div>
  358.                                     </div>
  359.                                     <p class="card-text pt-3">"Ich fühle mich sicher und anonym mit PfauPN, und der Support ist ausgezeichnet. Die beste Entscheidung für mein Unternehmen."</p>
  360.                                 </div>
  361.                             </div>
  362.                         </div>
  363.                     </div>
  364.                 </div>
  365.             </div>
  366.             <div class="row px-3 px-md-0 mt-4">
  367.                 <div class="col-6 position-relative">
  368.                     <ol class="carousel-indicators">
  369.                         <li class="active" data-bs-target="#carouselExampleDark" data-bs-slide-to="0"></li>
  370.                         <li data-bs-target="#carouselExampleDark" data-bs-slide-to="1"></li>
  371.                         <li data-bs-target="#carouselExampleDark" data-bs-slide-to="2"></li>
  372.                     </ol>
  373.                 </div>
  374.                 <div class="col-6 position-relative">
  375.                     <a class="carousel-control-prev carousel-icon z-index-2" href="#carouselExampleDark" role="button" data-bs-slide="prev">
  376.                         <span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Vorherige</span>
  377.                     </a>
  378.                     <a class="carousel-control-next carousel-icon z-index-2" href="#carouselExampleDark" role="button" data-bs-slide="next">
  379.                         <span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Nächste</span>
  380.                     </a>
  381.                 </div>
  382.             </div>
  383.         </div>
  384.     </div>
  385. </section>
  387. {% endblock %}