Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI-Consultant | Maximale Effizienz durch Künstliche Intelligenz</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| light: '#6366f1', | |
| dark: '#818cf8' | |
| }, | |
| dark: { | |
| 800: '#1e293b', | |
| 900: '#0f172a' | |
| } | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| transition: background-color 0.3s, color 0.3s; | |
| } | |
| .gradient-text { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| background-image: linear-gradient(90deg, #6366f1, #8b5cf6); | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%); | |
| } | |
| .card-hover { | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .card-hover: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); | |
| } | |
| .dark .card-hover:hover { | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| background-color: #6366f1; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #818cf8; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-800 dark:bg-dark-900 dark:text-gray-200"> | |
| <!-- Header --> | |
| <header class="sticky top-0 z-50 bg-white/80 dark:bg-dark-900/80 backdrop-blur-md shadow-sm"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-primary-light dark:bg-primary-dark flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <span class="text-xl font-bold">AI<span class="gradient-text">Consult</span></span> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#services" class="font-medium hover:text-primary-light dark:hover:text-primary-dark transition">Leistungen</a> | |
| <a href="#about" class="font-medium hover:text-primary-light dark:hover:text-primary-dark transition">Über mich</a> | |
| <a href="#process" class="font-medium hover:text-primary-light dark:hover:text-primary-dark transition">Prozess</a> | |
| <a href="#contact" class="font-medium hover:text-primary-light dark:hover:text-primary-dark transition">Kontakt</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative inline-block w-12 mr-2 align-middle select-none"> | |
| <input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/> | |
| <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> | |
| </div> | |
| <button class="md:hidden text-gray-600 dark:text-gray-300 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6"> | |
| <span class="gradient-text">KI-Transformation</span><br> | |
| für Ihr Unternehmen | |
| </h1> | |
| <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8"> | |
| Als erfahrener AI-Consultant helfe ich europäischen Unternehmen, das volle Potenzial künstlicher Intelligenz zu erschließen - von der Strategie bis zur Implementierung. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#contact" class="bg-primary-light dark:bg-primary-dark hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300 text-center"> | |
| Kostenlose Beratung | |
| </a> | |
| <a href="#process" class="border border-primary-light dark:border-primary-dark text-primary-light dark:text-primary-dark hover:bg-indigo-50 dark:hover:bg-indigo-900/30 font-medium py-3 px-6 rounded-lg transition duration-300 text-center"> | |
| Unser Ansatz | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="relative"> | |
| <div class="absolute -top-6 -left-6 w-64 h-64 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob"></div> | |
| <div class="absolute -bottom-8 -right-8 w-64 h-64 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000"></div> | |
| <div class="relative bg-white dark:bg-dark-800 rounded-2xl shadow-xl p-1"> | |
| <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="AI Consulting" class="rounded-xl w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trust Badges --> | |
| <section class="py-12 bg-gray-100 dark:bg-dark-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-primary-light dark:text-primary-dark">10+</div> | |
| <div class="text-gray-600 dark:text-gray-300">Jahre Erfahrung</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-primary-light dark:text-primary-dark">50+</div> | |
| <div class="text-gray-600 dark:text-gray-300">Projekte</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-primary-light dark:text-primary-dark">100%</div> | |
| <div class="text-gray-600 dark:text-gray-300">DSGVO-konform</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-primary-light dark:text-primary-dark">DE/EU</div> | |
| <div class="text-gray-600 dark:text-gray-300">Spezialisiert</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services --> | |
| <section id="services" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Meine <span class="gradient-text">Leistungen</span></h2> | |
| <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto"> | |
| Umfassende Beratung und Implementierung für alle Aspekte der künstlichen Intelligenz | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg card-hover"> | |
| <div class="w-14 h-14 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-brain text-primary-light dark:text-primary-dark text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">AI-Strategieentwicklung</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| Individuelle KI-Strategie für Ihr Unternehmen, angepasst an europäische Datenschutzbestimmungen und Marktanforderungen. | |
| </p> | |
| <ul class="space-y-2 text-gray-600 dark:text-gray-300"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Marktanalyse & Potenzialbewertung</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>DSGVO-konforme Konzepte</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Roadmap für KI-Implementierung</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg card-hover"> | |
| <div class="w-14 h-14 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-microchip text-primary-light dark:text-primary-dark text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Technische Implementierung</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| Vollständige Implementierung von KI-Lösungen in Ihre bestehende Infrastruktur mit Fokus auf europäische Cloud-Anbieter. | |
| </p> | |
| <ul class="space-y-2 text-gray-600 dark:text-gray-300"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Custom Machine Learning Modelle</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>On-Premise oder EU-Cloud Lösungen</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Integration in bestehende Systeme</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg card-hover"> | |
| <div class="w-14 h-14 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-6"> | |
| <i class="fas fa-chart-line text-primary-light dark:text-primary-dark text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Optimierung & Skalierung</h3> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| Steigerung der Effizienz bestehender KI-Systeme und Vorbereitung für zukünftiges Wachstum. | |
| </p> | |
| <ul class="space-y-2 text-gray-600 dark:text-gray-300"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Performance-Analyse</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Kostenoptimierung</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Skalierbare Architekturen</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About --> | |
| <section id="about" class="py-20 bg-gray-100 dark:bg-dark-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/3 mb-12 md:mb-0"> | |
| <div class="relative"> | |
| <div class="w-64 h-64 bg-primary-light dark:bg-primary-dark rounded-full mx-auto"></div> | |
| <div class="absolute -bottom-4 -right-4 bg-white dark:bg-dark-900 p-4 rounded-lg shadow-lg"> | |
| <div class="text-2xl font-bold text-primary-light dark:text-primary-dark">10+ Jahre</div> | |
| <div class="text-gray-600 dark:text-gray-300">Erfahrung</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-2/3 md:pl-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Über <span class="gradient-text">mich</span></h2> | |
| <p class="text-lg text-gray-600 dark:text-gray-300 mb-6"> | |
| Als zertifizierter AI-Consultant mit über einem Jahrzehnt Erfahrung in der europäischen Tech-Landschaft helfe ich Unternehmen, die komplexe Welt der künstlichen Intelligenz zu navigieren. | |
| </p> | |
| <p class="text-lg text-gray-600 dark:text-gray-300 mb-8"> | |
| Mein Fokus liegt auf praktischen, umsetzbaren Lösungen, die nicht nur technologisch fortschrittlich, sondern auch wirtschaftlich sinnvoll und rechtlich konform sind - besonders wichtig für deutsche und europäische Unternehmen. | |
| </p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 dark:bg-indigo-900/20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-graduation-cap text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Ausbildung</h4> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| M.Sc. Künstliche Intelligenz, TU München & Certified AI Consultant (EU) | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 dark:bg-purple-900/20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-language text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Sprachen</h4> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| Deutsch (Muttersprache), Englisch (fließend), Französisch (Grundkenntnisse) | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 dark:bg-blue-900/20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-map-marker-alt text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Standort</h4> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| München, Deutschland - Arbeit mit Kunden in ganz Europa | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 dark:bg-green-900/20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-certificate text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Zertifizierungen</h4> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| AWS Certified ML Specialist, Google Cloud AI Engineer, DSGVO-Beauftragter | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Process --> | |
| <section id="process" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Mein <span class="gradient-text">Vorgehen</span></h2> | |
| <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto"> | |
| Ein strukturierter Prozess für maximale Ergebnisse und transparente Zusammenarbeit | |
| </p> | |
| </div> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="hidden md:block absolute left-1/2 h-full w-1 bg-gradient-to-b from-primary-light to-primary-dark dark:from-primary-dark dark:to-primary-light"></div> | |
| <!-- Process Steps --> | |
| <div class="space-y-12 md:space-y-0"> | |
| <!-- Step 1 --> | |
| <div class="relative flex flex-col md:flex-row items-center md:even:flex-row-reverse"> | |
| <div class="flex justify-center md:justify-start md:w-1/2 mb-8 md:mb-0 md:px-12"> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg w-full max-w-md card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-indigo-100 dark:bg-indigo-900/20 text-primary-light dark:text-primary-dark font-bold rounded-full w-10 h-10 flex items-center justify-center mr-4">1</div> | |
| <h3 class="text-xl font-bold">Erstberatung & Analyse</h3> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| Kostenlose Erstberatung zur Analyse Ihrer Anforderungen und Bewertung des KI-Potenzials für Ihr Unternehmen. | |
| </p> | |
| <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700"> | |
| <h4 class="font-semibold mb-2">Ergebnis:</h4> | |
| <ul class="list-disc pl-5 text-gray-600 dark:text-gray-300 space-y-1"> | |
| <li>KI-Potenzialanalyse</li> | |
| <li>Kosten-Nutzen-Bewertung</li> | |
| <li>Empfehlung für nächste Schritte</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex md:w-1/2 md:px-12 justify-center md:justify-start"> | |
| <div class="w-32 h-32 rounded-full bg-indigo-100 dark:bg-indigo-900/20 flex items-center justify-center"> | |
| <i class="fas fa-search text-primary-light dark:text-primary-dark text-4xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="relative flex flex-col md:flex-row items-center md:even:flex-row-reverse"> | |
| <div class="flex justify-center md:justify-start md:w-1/2 mb-8 md:mb-0 md:px-12"> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg w-full max-w-md card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 dark:bg-purple-900/20 text-primary-light dark:text-primary-dark font-bold rounded-full w-10 h-10 flex items-center justify-center mr-4">2</div> | |
| <h3 class="text-xl font-bold">Konzept & Planung</h3> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| Entwicklung eines detaillierten Konzepts mit klarem Projektplan, Zeitrahmen und Budget. | |
| </p> | |
| <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700"> | |
| <h4 class="font-semibold mb-2">Ergebnis:</h4> | |
| <ul class="list-disc pl-5 text-gray-600 dark:text-gray-300 space-y-1"> | |
| <li>Technisches Konzept</li> | |
| <li>Projektplan mit Meilensteinen</li> | |
| <li>DSGVO-konforme Datenstrategie</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex md:w-1/2 md:px-12 justify-center md:justify-start"> | |
| <div class="w-32 h-32 rounded-full bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center"> | |
| <i class="fas fa-project-diagram text-primary-light dark:text-primary-dark text-4xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="relative flex flex-col md:flex-row items-center md:even:flex-row-reverse"> | |
| <div class="flex justify-center md:justify-start md:w-1/2 mb-8 md:mb-0 md:px-12"> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg w-full max-w-md card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-blue-100 dark:bg-blue-900/20 text-primary-light dark:text-primary-dark font-bold rounded-full w-10 h-10 flex items-center justify-center mr-4">3</div> | |
| <h3 class="text-xl font-bold">Umsetzung</h3> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| Agile Implementierung der KI-Lösung mit regelmäßigen Updates und Anpassungsmöglichkeiten. | |
| </p> | |
| <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700"> | |
| <h4 class="font-semibold mb-2">Ergebnis:</h4> | |
| <ul class="list-disc pl-5 text-gray-600 dark:text-gray-300 space-y-1"> | |
| <li>Funktionierende KI-Lösung</li> | |
| <li>Dokumentation & Schulung</li> | |
| <li>Performance-Metriken</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex md:w-1/2 md:px-12 justify-center md:justify-start"> | |
| <div class="w-32 h-32 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center"> | |
| <i class="fas fa-cogs text-primary-light dark:text-primary-dark text-4xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Step 4 --> | |
| <div class="relative flex flex-col md:flex-row items-center md:even:flex-row-reverse"> | |
| <div class="flex justify-center md:justify-start md:w-1/2 mb-8 md:mb-0 md:px-12"> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg w-full max-w-md card-hover"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 dark:bg-green-900/20 text-primary-light dark:text-primary-dark font-bold rounded-full w-10 h-10 flex items-center justify-center mr-4">4</div> | |
| <h3 class="text-xl font-bold">Optimierung & Support</h3> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300"> | |
| Kontinuierliche Verbesserung und Anpassung der Lösung an sich ändernde Anforderungen. | |
| </p> | |
| <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700"> | |
| <h4 class="font-semibold mb-2">Ergebnis:</h4> | |
| <ul class="list-disc pl-5 text-gray-600 dark:text-gray-300 space-y-1"> | |
| <li>Regelmäßige Updates</li> | |
| <li>Performance-Optimierung</li> | |
| <li>Skalierungsoptionen</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex md:w-1/2 md:px-12 justify-center md:justify-start"> | |
| <div class="w-32 h-32 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center"> | |
| <i class="fas fa-chart-line text-primary-light dark:text-primary-dark text-4xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="py-20 bg-gray-100 dark:bg-dark-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Das sagen <span class="gradient-text">Kunden</span></h2> | |
| <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto"> | |
| Erfolgsgeschichten aus verschiedenen Branchen in Deutschland und Europa | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-indigo-100 dark:bg-indigo-900/20 flex items-center justify-center mr-4"> | |
| <i class="fas fa-building text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Michael Bauer</h4> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">CTO, FinTech Startup</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| "Die DSGVO-konforme KI-Lösung hat unser Risikomanagement revolutioniert, ohne dass wir Kompromisse beim Datenschutz eingehen mussten." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center mr-4"> | |
| <i class="fas fa-industry text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Sabine Müller</h4> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">Produktionsleiterin, Maschinenbau</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| "Durch die vorausschauende Wartung konnten wir unsere Ausfallzeiten um 40% reduzieren. Die Integration in unsere bestehenden Systeme war nahtlos." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center mr-4"> | |
| <i class="fas fa-shopping-cart text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Thomas Weber</h4> | |
| <p class="text-gray-500 dark:text-gray-400 text-sm">CEO, E-Commerce</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 dark:text-gray-300 mb-4"> | |
| "Die personalisierten Produktempfehlungen haben unsere Conversion-Rate um 35% gesteigert. Besonders beeindruckt hat mich die schnelle ROI-Erreichung." | |
| </p> | |
| <div class="flex text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact --> | |
| <section id="contact" class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Kontaktieren Sie <span class="gradient-text">mich</span></h2> | |
| <p class="text-lg text-gray-600 dark:text-gray-300 mb-8"> | |
| Bereit, die Möglichkeiten der KI für Ihr Unternehmen zu erkunden? Ich freue mich auf Ihre Nachricht. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-indigo-100 dark:bg-indigo-900/20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-envelope text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">E-Mail</h4> | |
| <a href="mailto:[email protected]" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition">[email protected]</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 dark:bg-purple-900/20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-phone-alt text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Telefon</h4> | |
| <a href="tel:+49123456789" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition">+49 123 456 789</a> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 dark:bg-blue-900/20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-map-marker-alt text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Standort</h4> | |
| <p class="text-gray-600 dark:text-gray-300">München, Deutschland</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 dark:bg-green-900/20 p-3 rounded-lg mr-4"> | |
| <i class="fas fa-clock text-primary-light dark:text-primary-dark text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Verfügbarkeit</h4> | |
| <p class="text-gray-600 dark:text-gray-300">Mo-Fr: 9:00 - 18:00 Uhr</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h4 class="font-bold mb-4">Folgen Sie mir</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-200 dark:bg-dark-700 flex items-center justify-center hover:bg-primary-light dark:hover:bg-primary-dark hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-200 dark:bg-dark-700 flex items-center justify-center hover:bg-primary-light dark:hover:bg-primary-dark hover:text-white transition"> | |
| <i class="fab fa-xing"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-200 dark:bg-dark-700 flex items-center justify-center hover:bg-primary-light dark:hover:bg-primary-dark hover:text-white transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 rounded-full bg-gray-200 dark:bg-dark-700 flex items-center justify-center hover:bg-primary-light dark:hover:bg-primary-dark hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-white dark:bg-dark-800 rounded-xl shadow-lg p-8"> | |
| <h3 class="text-2xl font-bold mb-6">Senden Sie eine Nachricht</h3> | |
| <form> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Name</label> | |
| <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark focus:border-transparent bg-white dark:bg-dark-700"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">E-Mail</label> | |
| <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark focus:border-transparent bg-white dark:bg-dark-700"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="subject" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Betreff</label> | |
| <select id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark focus:border-transparent bg-white dark:bg-dark-700"> | |
| <option value="">Wählen Sie ein Thema</option> | |
| <option value="consulting">KI-Beratung</option> | |
| <option value="implementation">Implementierung</option> | |
| <option value="optimization">Optimierung</option> | |
| <option value="other">Anderes</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Nachricht</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark focus:border-transparent bg-white dark:bg-dark-700"></textarea> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" id="privacy" class="mt-1 mr-2"> | |
| <label for="privacy" class="text-gray-600 dark:text-gray-300 text-sm"> | |
| Ich stimme der Verarbeitung meiner Daten gemäß der <a href="#" class="text-primary-light dark:text-primary-dark hover:underline">Datenschutzerklärung</a> zu. | |
| </label> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-primary-light dark:bg-primary-dark hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300"> | |
| Nachricht senden | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark-800 text-gray-300 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-primary-dark flex items-center justify-center"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <span class="text-xl font-bold">AI<span class="gradient-text">Consult</span></span> | |
| </div> | |
| <p class="max-w-xs"> | |
| Ihr Partner für KI-Lösungen in Deutschland und Europa. DSGVO-konform, effizient und zukunftsorientiert. | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#services" class="hover:text-primary-dark transition">Leistungen</a></li> | |
| <li><a href="#about" class="hover:text-primary-dark transition">Über mich</a></li> | |
| <li><a href="#process" class="hover:text-primary-dark transition">Prozess</a></li> | |
| <li><a href="#contact" class="hover:text-primary-dark transition">Kontakt</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Leistungen</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-primary-dark transition">KI-Strategie</a></li> | |
| <li><a href="#" class="hover:text-primary-dark transition">Implementierung</a></li> | |
| <li><a href="#" class="hover:text-primary-dark transition">Optimierung</a></li> | |
| <li><a href="#" class="hover:text-primary-dark transition">Schulungen</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-white font-bold mb-4">Rechtliches</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-primary-dark transition">Impressum</a></li> | |
| <li><a href="#" class="hover:text-primary-dark transition">Datenschutz</a></li> | |
| <li><a href="#" class="hover:text-primary-dark transition">AGB</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="mb-4 md:mb-0"> | |
| © 2023 AI-Consult. Alle Rechte vorbehalten. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="hover:text-primary-dark transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="hover:text-primary-dark transition"> | |
| <i class="fab fa-xing"></i> | |
| </a> | |
| <a href="#" class="hover:text-primary-dark transition"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| <a href="#" class="hover:text-primary-dark transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Dark mode toggle | |
| const toggle = document.getElementById('toggle'); | |
| const html = document.documentElement; | |
| // Check for saved user preference or system preference | |
| if (localStorage.getItem('darkMode') === 'true' || | |
| (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) { | |
| html.classList.add('dark'); | |
| toggle.checked = true; | |
| } | |
| toggle.addEventListener('change', function() { | |
| if (this.checked) { | |
| html.classList.add('dark'); | |
| localStorage.setItem('darkMode', 'true'); | |
| } else { | |
| html.classList.remove('dark'); | |
| localStorage.setItem('darkMode', 'false'); | |
| } | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| // Mobile menu toggle (placeholder - would need more implementation) | |
| const mobileMenuButton = document.querySelector('.md\\:hidden'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| // In a real implementation, this would toggle a mobile menu | |
| alert('Mobile menu would open here in a full implementation.'); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chiminaca/deepsite-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |