| <!DOCTYPE html> |
| <html lang="de"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PixelPerfect Persuaders | Webdesign Aachen</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <style> |
| .hero-gradient { |
| background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); |
| } |
| .feature-card:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| .cta-pulse { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.7); } |
| 70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } |
| } |
| </style> |
| </head> |
| <body class="font-sans antialiased text-gray-800"> |
| |
| <section class="hero-gradient text-white py-20 relative overflow-hidden"> |
| <div class="absolute inset-0"> |
| <img src="http://static.photos/technology/1920x1080/10" alt="Modernes Webdesign" class="w-full h-full object-cover opacity-20"> |
| </div> |
| <div class="container mx-auto px-6 text-center relative z-10"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Webdesign, das verkauft – nicht nur gut aussieht</h1> |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Deine Website ist mehr als eine digitale Visitenkarte – sie ist dein wichtigster Vertriebsmitarbeiter.</p> |
| <a href="#contact" class="bg-white text-blue-600 font-bold px-8 py-4 rounded-full hover:bg-gray-100 transition inline-block cta-pulse">Jetzt Gespräch vereinbaren</a> |
| </div> |
| </section> |
| |
| <div class="bg-gray-50 py-8"> |
| <div class="container mx-auto px-6"> |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> |
| <div class="flex items-center"> |
| <i data-feather="check-circle" class="text-green-500 mr-2"></i> |
| <span>DSGVO-konform</span> |
| </div> |
| <div class="flex items-center"> |
| <i data-feather="smartphone" class="text-blue-500 mr-2"></i> |
| <span>100% mobiloptimiert</span> |
| </div> |
| <div class="flex items-center"> |
| <i data-feather="zap" class="text-yellow-500 mr-2"></i> |
| <span>Blitzschnell</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <section id="services" class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Websites, die Vertrauen schaffen und Kunden gewinnen</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg border border-gray-100 transition duration-300"> |
| <div class="text-blue-500 mb-4"> |
| <i data-feather="eye" class="w-10 h-10"></i> |
| </div> |
| <img src="http://static.photos/office/640x360/1" alt="Professionelles Webdesign" class="w-full h-48 object-cover rounded-lg mb-4"> |
| <h3 class="text-xl font-bold mb-3">Professioneller Erster Eindruck</h3> |
| <p class="text-gray-600">Wir gestalten Websites, die sofort Vertrauen aufbauen und professionell wirken - vom ersten Klick an.</p> |
| </div> |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg border border-gray-100 transition duration-300"> |
| <div class="text-blue-500 mb-4"> |
| <i data-feather="trending-up" class="w-10 h-10"></i> |
| </div> |
| <img src="http://static.photos/finance/640x360/2" alt="Konversionsoptimierung" class="w-full h-48 object-cover rounded-lg mb-4"> |
| <h3 class="text-xl font-bold mb-3">Konversionsoptimiert</h3> |
| <p class="text-gray-600">Jedes Element ist darauf ausgelegt, Besucher zu Kunden zu machen - klar, fokussiert und überzeugend.</p> |
| </div> |
| <div class="feature-card bg-white p-8 rounded-xl shadow-lg border border-gray-100 transition duration-300"> |
| <div class="text-blue-500 mb-4"> |
| <i data-feather="shield" class="w-10 h-10"></i> |
| </div> |
| <img src="http://static.photos/technology/640x360/3" alt="Technische Umsetzung" class="w-full h-48 object-cover rounded-lg mb-4"> |
| <h3 class="text-xl font-bold mb-3">Technisch einwandfrei</h3> |
| <p class="text-gray-600">Schnelle Ladezeiten, perfekte Mobiloptimierung und DSGVO-Konformität als Standard.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| <section id="about" class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Warum unsere Webseiten funktionieren</h2> |
| <div class="flex justify-center mb-12"> |
| <img src="http://static.photos/workspace/1024x576/4" alt="Webdesign Arbeitsplatz" class="rounded-lg shadow-md w-full max-w-3xl"> |
| </div> |
| <div class="max-w-4xl mx-auto"> |
| <div class="grid md:grid-cols-2 gap-8 mb-8"> |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <h3 class="font-bold text-xl mb-3 flex items-center"> |
| <i data-feather="smartphone" class="text-blue-500 mr-2"></i> |
| Mobil optimiert |
| </h3> |
| <p class="text-gray-600">Für perfekte Darstellung auf jedem Gerät. Über 60% der Besucher kommen von Mobilgeräten - wir optimieren für diese Nutzer.</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-sm"> |
| <h3 class="font-bold text-xl mb-3 flex items-center"> |
| <i data-feather="lock" class="text-blue-500 mr-2"></i> |
| DSGVO-konform |
| </h3> |
| <p class="text-gray-600">Rechtssicher und auf dem neuesten Stand. Keine Abmahnrisiken, sondern klare, juristisch geprüfte Lösungen.</p> |
| </div> |
| </div> |
| <div class="bg-white p-8 rounded-lg shadow-sm"> |
| <h3 class="font-bold text-xl mb-4 flex items-center"> |
| <i data-feather="compass" class="text-blue-500 mr-2"></i> |
| Struktur mit System |
| </h3> |
| <p class="text-gray-600 mb-4">Klare Navigation, schnelle Ladezeiten und intuitives Design. Wir setzen auf WordPress, weil es dir Flexibilität, Performance und volle Kontrolle bietet.</p> |
| <p class="text-gray-600">Du bekommst ein System, das du selbst pflegen kannst – mit technischer Basis, die Google liebt. Keine Blackbox, sondern transparente Technologie, die wächst, wenn dein Business wächst.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Was du bekommst</h2> |
| <div class="max-w-3xl mx-auto"> |
| <ul class="space-y-4"> |
| <li class="flex items-start"> |
| <i data-feather="check-circle" class="text-green-500 mt-1 mr-3 flex-shrink-0"></i> |
| <span class="text-gray-800"><strong>Modernes, schnelles WordPress-Webdesign</strong> - Keine vorgefertigten Templates, sondern individuell für deine Ziele entwickelt</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check-circle" class="text-green-500 mt-1 mr-3 flex-shrink-0"></i> |
| <span class="text-gray-800"><strong>Ein Design, das deine Marke stärkt</strong> - Visuelle Identität, die im Gedächtnis bleibt und Vertrauen schafft</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check-circle" class="text-green-500 mt-1 mr-3 flex-shrink-0"></i> |
| <span class="text-gray-800"><strong>SEO-optimierte Seitenstruktur</strong> - Suchmaschinen lieben unsere Websites genau wie deine Kunden</span> |
| </li> |
| <li class="flex items-start"> |
| <i data-feather="check-circle" class="text-green-500 mt-1 mr-3 flex-shrink-0"></i> |
| <span class="text-gray-800"><strong>Technisch saubere Umsetzung</strong> (responsive, sicher, zukunftsfähig) - Code, der performt und sich mit deinem Business entwickelt</span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </section> |
| |
| <section class="py-16 bg-gray-50"> |
| <div class="container mx-auto px-6"> |
| <h2 class="text-3xl font-bold text-center mb-12">Für wen ist das?</h2> |
| <div class="flex justify-center mb-8"> |
| <img src="http://static.photos/people/640x360/5" alt="Zielgruppe" class="rounded-lg shadow-md"> |
| </div> |
| <div class="max-w-3xl mx-auto text-center"> |
| <p class="text-xl mb-8">Ideal für Selbstständige, Start-ups und kleine Unternehmen, die online Kunden gewinnen wollen – ohne unnötigen Ballast.</p> |
| <p class="text-lg font-medium">Wenn du Ergebnisse statt Spielereien willst, bist du hier richtig.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-16 bg-blue-600 text-white"> |
| <div class="container mx-auto px-6 text-center"> |
| <div class="max-w-2xl mx-auto"> |
| <h2 class="text-3xl font-bold mb-6">Mach den ersten Schritt zu deiner verkaufsstarken Website.</h2> |
| <p class="text-xl mb-8">Lass uns in einem kostenlosen Erstgespräch besprechen, wie wir deine Online-Präsenz auf das nächste Level heben können.</p> |
| <a href="#" class="bg-white text-blue-600 font-bold px-8 py-4 rounded-full hover:bg-gray-100 transition inline-block">Jetzt kostenloses Erstgespräch anfragen</a> |
| </div> |
| </div> |
| </section> |
| <script> |
| feather.replace(); |
| |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const featureCards = document.querySelectorAll('.feature-card'); |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| entry.target.style.opacity = '1'; |
| entry.target.style.transform = 'translateY(0)'; |
| } |
| }); |
| }, { threshold: 0.1 }); |
| |
| featureCards.forEach((card, index) => { |
| card.style.opacity = '0'; |
| card.style.transform = 'translateY(20px)'; |
| card.style.transition = `all 0.3s ease ${index * 0.1}s`; |
| observer.observe(card); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
|
|
