|
|
<!DOCTYPE html> |
|
|
<html lang="de"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Cybal - Cybersicherheit Next.js Vorlage</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"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #3949ab 100%); |
|
|
} |
|
|
.hero-image { |
|
|
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80'); |
|
|
background-size: cover; |
|
|
background-position: center; |
|
|
} |
|
|
.feature-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
.glow { |
|
|
box-shadow: 0 0 15px rgba(66, 165, 245, 0.5); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans bg-gray-100"> |
|
|
|
|
|
<nav class="gradient-bg text-white shadow-lg"> |
|
|
<div class="container mx-auto px-4 py-3"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="#" class="flex items-center"> |
|
|
<span class="text-2xl font-bold">CYBAL</span> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex items-center space-x-8"> |
|
|
<a href="#features" class="hover:text-blue-300 transition">Features</a> |
|
|
<a href="#templates" class="hover:text-blue-300 transition">Templates</a> |
|
|
<a href="#about" class="hover:text-blue-300 transition">About</a> |
|
|
<a href="#pricing" class="hover:text-blue-300 transition">Pricing</a> |
|
|
<a href="#contact" class="hover:text-blue-300 transition">Contact</a> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-center space-x-4"> |
|
|
<a href="#" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition">Demo</a> |
|
|
<button class="md:hidden text-white focus:outline-none"> |
|
|
<i class="fas fa-bars text-xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="md:hidden bg-gray-800 text-white hidden" id="mobileMenu"> |
|
|
<div class="container mx-auto px-4 py-2 flex flex-col space-y-2"> |
|
|
<a href="#features" class="block py-2 hover:bg-gray-700 px-2 rounded">Features</a> |
|
|
<a href="#templates" class="block py-2 hover:bg-gray-700 px-2 rounded">Templates</a> |
|
|
<a href="#about" class="block py-2 hover:bg-gray-700 px-2 rounded">About</a> |
|
|
<a href="#pricing" class="block py-2 hover:bg-gray-700 px-2 rounded">Pricing</a> |
|
|
<a href="#contact" class="block py-2 hover:bg-gray-700 px-2 rounded">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="hero-image text-white py-20 md:py-32"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="max-w-3xl mx-auto text-center"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6">Cybersicherheit Next.js Vorlage</h1> |
|
|
<p class="text-xl md:text-2xl mb-8">Schützen Sie Ihre digitale Festung mit Cybal - der ultimativen Cyber Security Next JS-Vorlage</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<a href="#" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md text-lg font-medium transition glow">Jetzt kaufen</a> |
|
|
<a href="#" class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-md text-lg font-medium transition">Live Demo</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="features" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Key Features</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300"> |
|
|
<div class="text-blue-500 mb-4"> |
|
|
<i class="fas fa-shield-alt text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">NextJS 14.1+</h3> |
|
|
<p class="text-gray-600">Modernste Technologie mit "App"-Verzeichnis für optimale Performance und SEO.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300"> |
|
|
<div class="text-blue-500 mb-4"> |
|
|
<i class="fas fa-mobile-alt text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">100% Responsiv</h3> |
|
|
<p class="text-gray-600">Perfekt angepasst für alle Geräte - von Desktop bis Smartphone.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300"> |
|
|
<div class="text-blue-500 mb-4"> |
|
|
<i class="fas fa-search text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">SEO-Optimiert</h3> |
|
|
<p class="text-gray-600">On-Page SEO optimiert für bessere Sichtbarkeit in Suchmaschinen.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300"> |
|
|
<div class="text-blue-500 mb-4"> |
|
|
<i class="fas fa-paint-brush text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">UI-Kit</h3> |
|
|
<p class="text-gray-600">Vollständiges UI-Kit mit vielen vorgefertigten Komponenten für schnelle Anpassungen.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300"> |
|
|
<div class="text-blue-500 mb-4"> |
|
|
<i class="fas fa-map-marked-alt text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Google Maps</h3> |
|
|
<p class="text-gray-600">Integrierte Google Maps für Standortdarstellung und Kontaktinformationen.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300"> |
|
|
<div class="text-blue-500 mb-4"> |
|
|
<i class="fas fa-file-alt text-4xl"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Dokumentation</h3> |
|
|
<p class="text-gray-600">Ausführliche Dokumentation für einfache Installation und Anpassung.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="templates" class="py-16 bg-gray-100"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Template Vorschau</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> |
|
|
<div class="h-48 bg-gray-300 flex items-center justify-center"> |
|
|
<span class="text-gray-500">Homepage 1</span> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Moderne Security</h3> |
|
|
<p class="text-gray-600 mb-4">Cleaner Look mit Fokus auf Cybersicherheitsdienstleistungen.</p> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-700 font-medium">Vorschau ansehen →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> |
|
|
<div class="h-48 bg-gray-300 flex items-center justify-center"> |
|
|
<span class="text-gray-500">Homepage 2</span> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Überwachung</h3> |
|
|
<p class="text-gray-600 mb-4">Spezialisiert auf CCTV und physische Sicherheitssysteme.</p> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-700 font-medium">Vorschau ansehen →</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300"> |
|
|
<div class="h-48 bg-gray-300 flex items-center justify-center"> |
|
|
<span class="text-gray-500">Homepage 3</span> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-semibold mb-2">Enterprise Security</h3> |
|
|
<p class="text-gray-600 mb-4">Professionelles Design für große Unternehmen.</p> |
|
|
<a href="#" class="text-blue-500 hover:text-blue-700 font-medium">Vorschau ansehen →</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<a href="#" class="inline-block bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md text-lg font-medium transition"> |
|
|
Alle 30+ Templates ansehen |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col lg:flex-row items-center gap-12"> |
|
|
<div class="lg:w-1/2"> |
|
|
<h2 class="text-3xl font-bold mb-6">Über Cybal</h2> |
|
|
<p class="text-gray-600 mb-4"> |
|
|
Cybal ist eine hochmoderne Next.js-Vorlage, speziell für Sicherheitsunternehmen entwickelt. |
|
|
Diese Vorlage kombiniert elegante Designelemente mit erweiterten Funktionen, um sicherzustellen, |
|
|
dass sich Ihre Website von der Konkurrenz abhebt. |
|
|
</p> |
|
|
<p class="text-gray-600 mb-6"> |
|
|
Mit Cybal können Sie Ihr Fachwissen in den Bereichen Kameraüberwachung, Webschutz und |
|
|
Cybersicherheitsmanagement unter Beweis stellen. Die intuitive Benutzeroberfläche ermöglicht es Ihnen, |
|
|
auf einfache Weise atemberaubende Landingpages anzupassen und zu erstellen. |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">NextJS 14.1+</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Bootstrap 5</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">100% Responsiv</span> |
|
|
<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">SEO Optimiert</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="lg:w-1/2"> |
|
|
<div class="bg-gray-200 h-96 rounded-lg flex items-center justify-center"> |
|
|
<span class="text-gray-500">Template Screenshot</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="pricing" class="py-16 bg-gray-100"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Preisgestaltung</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden"> |
|
|
<div class="px-6 py-8"> |
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-2">Standard</h3> |
|
|
<p class="text-gray-600 mb-6">Für kleine Unternehmen und Einzelpersonen</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-gray-800">$49</span> |
|
|
<span class="text-gray-600">/ einmalig</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>1 Domain Lizenz</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Alle Templates</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>6 Monate Support</span> |
|
|
</li> |
|
|
<li class="flex items-center text-gray-400"> |
|
|
<i class="fas fa-times text-red-400 mr-2"></i> |
|
|
<span>Keine Priorität Support</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="block w-full bg-gray-200 hover:bg-gray-300 text-gray-800 text-center py-3 rounded-md font-medium transition"> |
|
|
Auswählen |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-xl overflow-hidden transform scale-105"> |
|
|
<div class="bg-blue-500 text-white text-center py-2"> |
|
|
<span class="font-medium">BELIEBT</span> |
|
|
</div> |
|
|
<div class="px-6 py-8"> |
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-2">Extended</h3> |
|
|
<p class="text-gray-600 mb-6">Für mittelständische Unternehmen</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-gray-800">$99</span> |
|
|
<span class="text-gray-600">/ einmalig</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>3 Domain Lizenzen</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Alle Templates</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>12 Monate Support</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Priorität Support</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="block w-full bg-blue-500 hover:bg-blue-600 text-white text-center py-3 rounded-md font-medium transition glow"> |
|
|
Auswählen |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-lg overflow-hidden"> |
|
|
<div class="px-6 py-8"> |
|
|
<h3 class="text-2xl font-semibold text-gray-800 mb-2">Unlimited</h3> |
|
|
<p class="text-gray-600 mb-6">Für Agenturen und Entwickler</p> |
|
|
<div class="mb-6"> |
|
|
<span class="text-4xl font-bold text-gray-800">$199</span> |
|
|
<span class="text-gray-600">/ einmalig</span> |
|
|
</div> |
|
|
<ul class="space-y-3 mb-8"> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Unbegrenzte Lizenzen</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Alle Templates</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Lifetime Support</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i class="fas fa-check text-green-500 mr-2"></i> |
|
|
<span>Priorität Support</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="block w-full bg-gray-200 hover:bg-gray-300 text-gray-800 text-center py-3 rounded-md font-medium transition"> |
|
|
Auswählen |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-blue-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Was unsere Kunden sagen</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Max Mustermann</h4> |
|
|
<p class="text-gray-600 text-sm">Security Solutions GmbH</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700"> |
|
|
"Die Cybal-Vorlage hat uns geholfen, unseren Online-Auftritt innerhalb von Tagen zu modernisieren. |
|
|
Die Anpassungsmöglichkeiten sind hervorragend und der Support war schnell und hilfreich." |
|
|
</p> |
|
|
<div class="mt-4 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 class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Anna Schmidt</h4> |
|
|
<p class="text-gray-600 text-sm">CyberGuard AG</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700"> |
|
|
"Als IT-Sicherheitsunternehmen brauchen wir eine professionelle Website, die Vertrauen ausstrahlt. |
|
|
Cybal hat genau das geliefert - modern, sicher und leicht zu pflegen." |
|
|
</p> |
|
|
<div class="mt-4 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> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div> |
|
|
<div> |
|
|
<h4 class="font-semibold">Thomas Weber</h4> |
|
|
<p class="text-gray-600 text-sm">SecureNet Solutions</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700"> |
|
|
"Die Vielzahl an vorgefertigten Templates hat uns enorm viel Entwicklungszeit gespart. |
|
|
Besonders die SEO-Optimierung war für uns als Startup entscheidend." |
|
|
</p> |
|
|
<div class="mt-4 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> |
|
|
|
|
|
|
|
|
<section class="gradient-bg text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Bereit für Ihre neue Cybersicherheits-Website?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto"> |
|
|
Starten Sie noch heute mit der Cybal Next.js-Vorlage und präsentieren Sie Ihr Unternehmen professionell im Web. |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center gap-4"> |
|
|
<a href="#" class="bg-white hover:bg-gray-100 text-blue-600 px-8 py-3 rounded-md text-lg font-medium transition">Jetzt kaufen</a> |
|
|
<a href="#" class="bg-transparent hover:bg-blue-700 border-2 border-white text-white px-8 py-3 rounded-md text-lg font-medium transition">Demo ansehen</a> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h2 class="text-3xl font-bold text-center mb-12">Kontakt</h2> |
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-12"> |
|
|
<div class="lg:w-1/2"> |
|
|
<form class="space-y-6"> |
|
|
<div> |
|
|
<label for="name" class="block text-gray-700 font-medium mb-2">Name</label> |
|
|
<input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-gray-700 font-medium mb-2">E-Mail</label> |
|
|
<input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="subject" class="block text-gray-700 font-medium mb-2">Betreff</label> |
|
|
<input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="message" class="block text-gray-700 font-medium mb-2">Nachricht</label> |
|
|
<textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
|
|
</div> |
|
|
<button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md text-lg font-medium transition w-full"> |
|
|
Nachricht senden |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
<div class="lg:w-1/2"> |
|
|
<div class="bg-gray-100 p-6 rounded-lg h-full"> |
|
|
<h3 class="text-xl font-semibold mb-4">Kontaktinformationen</h3> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-map-marker-alt text-blue-500 mt-1 mr-4"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">Adresse</h4> |
|
|
<p class="text-gray-600">Musterstraße 123, 10115 Berlin, Deutschland</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-envelope text-blue-500 mt-1 mr-4"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">E-Mail</h4> |
|
|
<p class="text-gray-600">info@cybal-template.de</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-start"> |
|
|
<i class="fas fa-phone-alt text-blue-500 mt-1 mr-4"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">Telefon</h4> |
|
|
<p class="text-gray-600">+49 30 12345678</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8"> |
|
|
<h3 class="text-xl font-semibold mb-4">Öffnungszeiten</h3> |
|
|
<div class="space-y-2"> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-700">Montag - Freitag</span> |
|
|
<span class="text-gray-600">9:00 - 18:00</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-700">Samstag</span> |
|
|
<span class="text-gray-600">10:00 - 14:00</span> |
|
|
</div> |
|
|
<div class="flex justify-between"> |
|
|
<span class="text-gray-700">Sonntag</span> |
|
|
<span class="text-gray-600">Geschlossen</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-900 text-white pt-12 pb-6"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">CYBAL</h3> |
|
|
<p class="text-gray-400"> |
|
|
Die ultimative Next.js-Vorlage für Cybersicherheitsunternehmen und IT-Security Dienstleister. |
|
|
</p> |
|
|
<div class="flex space-x-4 mt-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Links</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> |
|
|
<li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li> |
|
|
<li><a href="#templates" class="text-gray-400 hover:text-white transition">Templates</a></li> |
|
|
<li><a href="#pricing" class="text-gray-400 hover:text-white transition">Pricing</a></li> |
|
|
<li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Support</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Dokumentation</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Forum</a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition">Ticket System</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-lg font-semibold mb-4">Newsletter</h3> |
|
|
<p class="text-gray-400 mb-4"> |
|
|
Abonnieren Sie unseren Newsletter für Updates und Angebote. |
|
|
</p> |
|
|
<form class="flex"> |
|
|
<input type="email" placeholder="Ihre E-Mail" class="px-4 py-2 rounded-l-md focus:outline-none text-gray-800 w-full"> |
|
|
<button type="submit" class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-r-md transition"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-400 mb-4 md:mb-0"> |
|
|
© 2023 Cybal Template. Alle Rechte vorbehalten. |
|
|
</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition">Impressum</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition">Datenschutz</a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition">AGB</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.querySelector('nav button').addEventListener('click', function() { |
|
|
const menu = document.getElementById('mobileMenu'); |
|
|
menu.classList.toggle('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
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' |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenu = document.getElementById('mobileMenu'); |
|
|
if (!mobileMenu.classList.contains('hidden')) { |
|
|
mobileMenu.classList.add('hidden'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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=CYRAGE/version-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
