Optimierung des Kontaktformulars: Entfernen von nicht benötigten Feldern und Verbesserung der Validierungslogik. Anpassung der CSS-Stile für eine bessere Benutzererfahrung.
This commit is contained in:
Samuel Müller
134
public/README-STRUCTURE.md
Normal file
134
public/README-STRUCTURE.md
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
# HexaHost.de - Zentralisierte Header und Footer Struktur
|
||||||
|
|
||||||
|
## Übersicht
|
||||||
|
|
||||||
|
Die Website wurde umstrukturiert, um Header und Footer in zentralen Dateien zu speichern. Dies reduziert Code-Duplikation und macht die Wartung einfacher.
|
||||||
|
|
||||||
|
## Neue Struktur
|
||||||
|
|
||||||
|
### Zentrale Dateien
|
||||||
|
|
||||||
|
- `includes/header.php` - Enthält den HTML-Header mit Navigation
|
||||||
|
- `includes/footer.php` - Enthält den HTML-Footer mit Links und Copyright
|
||||||
|
- `includes/functions.php` - Helper-Funktionen für die Website
|
||||||
|
|
||||||
|
### Konvertierte Seiten
|
||||||
|
|
||||||
|
- `index.php` - Startseite (vorher index.html)
|
||||||
|
- `contact.php` - Kontaktseite (vorher contact.html)
|
||||||
|
- `vpc.php` - Virtual Private Container (vorher vpc.html)
|
||||||
|
- `vps.php` - Virtual Private Server (vorher vps.html)
|
||||||
|
- `webhosting.php` - Webhosting (vorher webhosting.html)
|
||||||
|
- `about.php` - Über uns (vorher about.html)
|
||||||
|
|
||||||
|
## Verwendung
|
||||||
|
|
||||||
|
### Neue Seite erstellen
|
||||||
|
|
||||||
|
1. Erstellen Sie eine neue `.php` Datei
|
||||||
|
2. Fügen Sie die Konfiguration am Anfang hinzu:
|
||||||
|
|
||||||
|
```php
|
||||||
|
<?php
|
||||||
|
require_once 'includes/functions.php';
|
||||||
|
|
||||||
|
// Page configuration
|
||||||
|
$page_title = 'Seitentitel - HexaHost.de';
|
||||||
|
$page_description = 'Seitenbeschreibung für SEO';
|
||||||
|
$current_page = 'seitenname'; // Für aktive Navigation
|
||||||
|
$additional_scripts = ['assets/js/script.js']; // Optional
|
||||||
|
|
||||||
|
// Include header
|
||||||
|
includeHeader($page_title, $page_description, $current_page, $additional_scripts);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- Ihr Seiteninhalt hier -->
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// Include footer
|
||||||
|
includeFooter();
|
||||||
|
?>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Breadcrumbs hinzufügen
|
||||||
|
|
||||||
|
```php
|
||||||
|
<?php
|
||||||
|
generateBreadcrumbs([
|
||||||
|
['title' => 'Home', 'url' => 'index.html'],
|
||||||
|
['title' => 'Produkte', 'url' => 'products.html'],
|
||||||
|
['title' => 'Aktuelle Seite', 'url' => '']
|
||||||
|
]);
|
||||||
|
?>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Vorteile
|
||||||
|
|
||||||
|
1. **Weniger Code-Duplikation** - Header und Footer werden nur einmal gepflegt
|
||||||
|
2. **Einfachere Wartung** - Änderungen müssen nur an einer Stelle gemacht werden
|
||||||
|
3. **Konsistenz** - Alle Seiten haben automatisch den gleichen Header/Footer
|
||||||
|
4. **SEO-Optimierung** - Einfache Anpassung von Meta-Tags pro Seite
|
||||||
|
5. **Aktive Navigation** - Automatische Hervorhebung der aktuellen Seite
|
||||||
|
|
||||||
|
## Migration von HTML zu PHP
|
||||||
|
|
||||||
|
### Vorher (HTML)
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<title>Seitentitel</title>
|
||||||
|
<!-- Meta-Tags, CSS, etc. -->
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<!-- Navigation -->
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<!-- Inhalt -->
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<!-- Footer -->
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Nachher (PHP)
|
||||||
|
```php
|
||||||
|
<?php
|
||||||
|
require_once 'includes/functions.php';
|
||||||
|
includeHeader('Seitentitel', 'Beschreibung', 'seitenname');
|
||||||
|
?>
|
||||||
|
<main>
|
||||||
|
<!-- Inhalt -->
|
||||||
|
</main>
|
||||||
|
<?php includeFooter(); ?>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Nächste Schritte
|
||||||
|
|
||||||
|
1. Weitere HTML-Seiten zu PHP konvertieren
|
||||||
|
2. .htaccess für saubere URLs konfigurieren
|
||||||
|
3. Session-Management für CSRF-Token hinzufügen
|
||||||
|
4. Caching für bessere Performance implementieren
|
||||||
|
|
||||||
|
## Dateien
|
||||||
|
|
||||||
|
- `includes/header.php` - Zentrale Header-Datei
|
||||||
|
- `includes/footer.php` - Zentrale Footer-Datei
|
||||||
|
- `includes/functions.php` - Helper-Funktionen
|
||||||
|
- `index.php` - Startseite (PHP-Version)
|
||||||
|
- `contact.php` - Kontaktseite (PHP-Version)
|
||||||
|
- `vpc.php` - Virtual Private Container (PHP-Version)
|
||||||
|
- `vps.php` - Virtual Private Server (PHP-Version)
|
||||||
|
- `webhosting.php` - Webhosting (PHP-Version)
|
||||||
|
- `about.php` - Über uns (PHP-Version)
|
||||||
|
- `contact.html` - Alte HTML-Version (kann gelöscht werden)
|
||||||
|
- `index.html` - Alte HTML-Version (kann gelöscht werden)
|
||||||
|
- `vpc.html` - Alte HTML-Version (kann gelöscht werden)
|
||||||
|
- `vps.html` - Alte HTML-Version (kann gelöscht werden)
|
||||||
|
- `webhosting.html` - Alte HTML-Version (kann gelöscht werden)
|
||||||
|
- `about.html` - Alte HTML-Version (kann gelöscht werden)
|
||||||
247
public/about.php
Normal file
247
public/about.php
Normal file
@@ -0,0 +1,247 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'includes/functions.php';
|
||||||
|
|
||||||
|
// Page configuration
|
||||||
|
$page_title = 'Über uns - HexaHost.de | Hosting aus Niederbayern';
|
||||||
|
$page_description = 'Erfahren Sie mehr über HexaHost.de - Ihr zuverlässiger Hosting-Partner aus Niederbayern. Moderne Technologie mit persönlichem Service.';
|
||||||
|
$current_page = 'about';
|
||||||
|
|
||||||
|
// Include header
|
||||||
|
includeHeader($page_title, $page_description, $current_page);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- About Hero -->
|
||||||
|
<section class="about-hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="about-hero-content">
|
||||||
|
<?php
|
||||||
|
generateBreadcrumbs([
|
||||||
|
['title' => 'Home', 'url' => 'index.html'],
|
||||||
|
['title' => 'Über uns', 'url' => '']
|
||||||
|
]);
|
||||||
|
?>
|
||||||
|
<h1 class="about-hero-title">
|
||||||
|
Über <span class="highlight">HexaHost.de</span>
|
||||||
|
</h1>
|
||||||
|
<p class="about-hero-description">
|
||||||
|
Wir sind Ihr zuverlässiger Partner für Hosting-Lösungen aus Niederbayern.
|
||||||
|
Mit modernster Technologie und persönlichem Service sorgen wir dafür,
|
||||||
|
dass Ihre Online-Projekte erfolgreich sind.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Company Story -->
|
||||||
|
<section class="company-story">
|
||||||
|
<div class="container">
|
||||||
|
<div class="story-content">
|
||||||
|
<div class="story-text">
|
||||||
|
<h2 class="section-title">Unsere Geschichte</h2>
|
||||||
|
<p>
|
||||||
|
HexaHost.de wurde mit der Vision gegründet, zuverlässiges und preiswertes
|
||||||
|
Hosting direkt aus Deutschland anzubieten. Als regionales Unternehmen aus
|
||||||
|
Niederbayern verstehen wir die Bedürfnisse unserer Kunden und bieten
|
||||||
|
persönlichen Support in deutscher Sprache.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Unsere Expertise liegt in der Bereitstellung moderner Hosting-Lösungen
|
||||||
|
auf Basis von Proxmox-Technologie. Von Virtual Private Containern bis
|
||||||
|
hin zu klassischem Webhosting - wir haben für jeden Bedarf die passende
|
||||||
|
Lösung.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Vertrauen, Zuverlässigkeit und faire Preise sind die Grundpfeiler unseres
|
||||||
|
Unternehmens. Wir setzen auf transparente Kommunikation und ehrliche
|
||||||
|
Beratung, damit Sie die beste Lösung für Ihre Anforderungen erhalten.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="story-visual glass-card">
|
||||||
|
<div class="location-info">
|
||||||
|
<div class="location-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||||
|
<circle cx="12" cy="10" r="3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="location-details">
|
||||||
|
<h3>Standort</h3>
|
||||||
|
<p>Niederbayern, Deutschland</p>
|
||||||
|
<p>Regional verwurzelt, global verfügbar</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Values -->
|
||||||
|
<section class="values">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Unsere Werte</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Das, was uns ausmacht und antreibt
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="values-grid">
|
||||||
|
<div class="value-item glass-card">
|
||||||
|
<div class="value-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Zuverlässigkeit</h3>
|
||||||
|
<p>99.9% Uptime-Garantie und 24/7 Monitoring für maximale Verfügbarkeit Ihrer Services.</p>
|
||||||
|
</div>
|
||||||
|
<div class="value-item glass-card">
|
||||||
|
<div class="value-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2v20M17 7l-5-5-5 5M17 17l-5 5-5-5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Faire Preise</h3>
|
||||||
|
<p>Transparente Preisgestaltung ohne versteckte Kosten und flexible Tarifmodelle.</p>
|
||||||
|
</div>
|
||||||
|
<div class="value-item glass-card">
|
||||||
|
<div class="value-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Persönlicher Support</h3>
|
||||||
|
<p>Direkter Kontakt zu unserem Team aus Niederbayern in deutscher Sprache.</p>
|
||||||
|
</div>
|
||||||
|
<div class="value-item glass-card">
|
||||||
|
<div class="value-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Innovation</h3>
|
||||||
|
<p>Moderne Technologie auf Proxmox-Basis für beste Performance und Skalierbarkeit.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Team -->
|
||||||
|
<section class="team">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Unser Team</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Die Menschen hinter HexaHost.de
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="team-content">
|
||||||
|
<div class="team-text">
|
||||||
|
<p>
|
||||||
|
Unser Team besteht aus erfahrenen IT-Experten mit langjähriger Erfahrung
|
||||||
|
im Bereich Hosting und Server-Management. Wir sind leidenschaftlich
|
||||||
|
daran interessiert, Ihnen die bestmöglichen Hosting-Lösungen zu bieten.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
Als regionales Unternehmen aus Niederbayern kennen wir die lokalen
|
||||||
|
Bedürfnisse und bieten persönlichen Support in deutscher Sprache.
|
||||||
|
Unser Ziel ist es, Ihnen nicht nur technische Lösungen, sondern
|
||||||
|
auch eine echte Partnerschaft zu bieten.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="team-stats glass-card">
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number">5+</span>
|
||||||
|
<span class="stat-label">Jahre Erfahrung</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number">500+</span>
|
||||||
|
<span class="stat-label">Zufriedene Kunden</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number">99.9%</span>
|
||||||
|
<span class="stat-label">Uptime</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number">24/7</span>
|
||||||
|
<span class="stat-label">Support</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Technology -->
|
||||||
|
<section class="technology">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Unsere Technologie</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Moderne Infrastruktur für beste Performance
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="tech-grid">
|
||||||
|
<div class="tech-item glass-card">
|
||||||
|
<div class="tech-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||||||
|
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||||
|
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Proxmox VE</h3>
|
||||||
|
<p>Enterprise-Grade Virtualisierung mit Proxmox Virtual Environment für maximale Effizienz und Sicherheit.</p>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item glass-card">
|
||||||
|
<div class="tech-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2v20M17 7l-5-5-5 5M17 17l-5 5-5-5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>NVMe SSD</h3>
|
||||||
|
<p>Hochperformante NVMe SSD-Speicher für schnellste Ladezeiten und optimale I/O-Performance.</p>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item glass-card">
|
||||||
|
<div class="tech-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>DDoS Protection</h3>
|
||||||
|
<p>Umfassender DDoS-Schutz für maximale Sicherheit und Verfügbarkeit Ihrer Services.</p>
|
||||||
|
</div>
|
||||||
|
<div class="tech-item glass-card">
|
||||||
|
<div class="tech-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||||
|
<polyline points="7.5,4.21 12,6.81 16.5,4.21"/>
|
||||||
|
<polyline points="7.5,19.79 7.5,14.6 3,12"/>
|
||||||
|
<polyline points="21,12 16.5,14.6 16.5,19.79"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Redundante Infrastruktur</h3>
|
||||||
|
<p>Mehrfach redundante Systeme für höchste Verfügbarkeit und Ausfallsicherheit.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA Section -->
|
||||||
|
<section class="cta">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta-content glass-card">
|
||||||
|
<h2>Bereit für die Zusammenarbeit?</h2>
|
||||||
|
<p>Lassen Sie uns gemeinsam Ihre Hosting-Lösung entwickeln</p>
|
||||||
|
<div class="cta-actions">
|
||||||
|
<a href="contact.html" class="btn btn-primary">Kontakt aufnehmen</a>
|
||||||
|
<a href="vpc.php" class="btn btn-secondary">Produkte entdecken</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// Include footer
|
||||||
|
includeFooter();
|
||||||
|
?>
|
||||||
256
public/contact.php
Normal file
256
public/contact.php
Normal file
@@ -0,0 +1,256 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'includes/functions.php';
|
||||||
|
|
||||||
|
// Page configuration
|
||||||
|
$page_title = 'Kontakt - HexaHost.de | Hosting aus Niederbayern';
|
||||||
|
$page_description = 'Kontaktieren Sie HexaHost.de - Ihr Hosting-Partner aus Niederbayern. Persönlicher Support und kompetente Beratung.';
|
||||||
|
$current_page = 'contact';
|
||||||
|
$additional_scripts = ['assets/js/contact.js'];
|
||||||
|
|
||||||
|
// Include header
|
||||||
|
includeHeader($page_title, $page_description, $current_page, $additional_scripts);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- Contact Hero -->
|
||||||
|
<section class="contact-hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="contact-hero-content">
|
||||||
|
<?php
|
||||||
|
generateBreadcrumbs([
|
||||||
|
['title' => 'Home', 'url' => 'index.html'],
|
||||||
|
['title' => 'Kontakt', 'url' => '']
|
||||||
|
]);
|
||||||
|
?>
|
||||||
|
<h1 class="contact-hero-title">
|
||||||
|
Kontakt zu <span class="highlight">HexaHost.de</span>
|
||||||
|
</h1>
|
||||||
|
<p class="contact-hero-description">
|
||||||
|
Haben Sie Fragen zu unseren Hosting-Lösungen? Benötigen Sie Beratung oder
|
||||||
|
Support? Unser Team aus Niederbayern steht Ihnen gerne zur Verfügung.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Options -->
|
||||||
|
<section class="contact-options">
|
||||||
|
<div class="container">
|
||||||
|
<div class="contact-grid">
|
||||||
|
<div class="contact-item glass-card">
|
||||||
|
<div class="contact-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||||
|
<polyline points="22,6 12,13 2,6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>E-Mail</h3>
|
||||||
|
<p>Schreiben Sie uns eine E-Mail - wir antworten schnell und kompetent.</p>
|
||||||
|
<a href="mailto:info@hexahost.de" class="contact-link">info@hexahost.de</a>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item glass-card">
|
||||||
|
<div class="contact-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Telefon</h3>
|
||||||
|
<p>Für dringende Anliegen erreichen Sie uns auch telefonisch.</p>
|
||||||
|
<a href="tel:+4985119999999" class="contact-link">+49 851 1999 9999</a>
|
||||||
|
<p class="contact-hours">Mo-Fr: 9:00-18:00 Uhr</p>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item glass-card">
|
||||||
|
<div class="contact-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Discord</h3>
|
||||||
|
<p>Direkter Support über unseren Discord für schnelle Hilfe.</p>
|
||||||
|
<button class="contact-link chat-btn" onclick="window.open('https://discord.gg/DEIN-EINLADUNGS-LINK', '_blank')">Discord beitreten</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="contact-item glass-card">
|
||||||
|
<div class="contact-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||||
|
<circle cx="12" cy="10" r="3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Unser Standort</h3>
|
||||||
|
<p>HexaHost.de<br>Niederbayern<br>Deutschland</p>
|
||||||
|
<p class="contact-hours">Regional verwurzelt</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Contact Form -->
|
||||||
|
<section class="contact-form-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="form-container">
|
||||||
|
<div class="form-header">
|
||||||
|
<h2 class="section-title">Kontaktformular</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Senden Sie uns eine Nachricht - wir melden uns schnellstmöglich bei Ihnen
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<form class="contact-form glass-card" id="contactForm" action="contact-handler.php" method="POST">
|
||||||
|
<input type="hidden" name="csrf_token" value="<?php echo generateCSRFToken(); ?>">
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="firstName">Vorname *</label>
|
||||||
|
<input type="text" id="firstName" name="firstName" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="lastName">Nachname *</label>
|
||||||
|
<input type="text" id="lastName" name="lastName" required>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-row">
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="email">E-Mail-Adresse *</label>
|
||||||
|
<input type="email" id="email" name="email" required>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="phone">Telefon</label>
|
||||||
|
<input type="tel" id="phone" name="phone">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="company">Unternehmen</label>
|
||||||
|
<input type="text" id="company" name="company">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="subject">Betreff *</label>
|
||||||
|
<select id="subject" name="subject" required>
|
||||||
|
<option value="">Bitte wählen...</option>
|
||||||
|
<option value="allgemeine-anfrage">Allgemeine Anfrage</option>
|
||||||
|
<option value="vpc-anfrage">Virtual Private Container</option>
|
||||||
|
<option value="vps-anfrage">Virtual Private Server</option>
|
||||||
|
<option value="mail-gateway-anfrage">Mail Gateway</option>
|
||||||
|
<option value="webhosting-anfrage">Webhosting</option>
|
||||||
|
<option value="support">Technischer Support</option>
|
||||||
|
<option value="beratung">Persönliche Beratung</option>
|
||||||
|
<option value="migration">Migration/Umzug</option>
|
||||||
|
<option value="sonstiges">Sonstiges</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="message">Ihre Nachricht *</label>
|
||||||
|
<textarea id="message" name="message" rows="6" required placeholder="Beschreiben Sie Ihr Anliegen..."></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="form-group checkbox-group">
|
||||||
|
<label class="checkbox-label">
|
||||||
|
<input type="checkbox" id="privacy" name="privacy" required>
|
||||||
|
Ich habe die <a href="#" target="_blank">Datenschutzerklärung</a> gelesen und stimme der Verarbeitung meiner Daten zu. *
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="form-actions">
|
||||||
|
<button type="submit" class="btn btn-primary">Nachricht senden</button>
|
||||||
|
<button type="reset" class="btn btn-secondary">Formular zurücksetzen</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ Section -->
|
||||||
|
<section class="faq-section">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Häufig gestellte Fragen</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Schnelle Antworten auf die wichtigsten Fragen
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="faq-grid">
|
||||||
|
<div class="faq-item glass-card">
|
||||||
|
<div class="faq-question">
|
||||||
|
<h3>Wie schnell erhalte ich eine Antwort?</h3>
|
||||||
|
<span class="faq-toggle">+</span>
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Wir antworten in der Regel innerhalb von 2-4 Stunden auf E-Mail-Anfragen. Bei dringenden Anliegen nutzen Sie bitte unseren Live Chat oder rufen Sie uns an.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item glass-card">
|
||||||
|
<div class="faq-question">
|
||||||
|
<h3>Bieten Sie kostenlose Beratung an?</h3>
|
||||||
|
<span class="faq-toggle">+</span>
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Ja, unsere Beratung ist völlig kostenfrei und unverbindlich. Wir helfen Ihnen gerne bei der Auswahl der richtigen Hosting-Lösung für Ihre Bedürfnisse.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item glass-card">
|
||||||
|
<div class="faq-question">
|
||||||
|
<h3>Können Sie bei der Migration helfen?</h3>
|
||||||
|
<span class="faq-toggle">+</span>
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Selbstverständlich! Wir unterstützen Sie beim Umzug von Ihrem bisherigen Hosting-Anbieter zu uns. Unser Migrations-Service ist in vielen Fällen kostenlos.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item glass-card">
|
||||||
|
<div class="faq-question">
|
||||||
|
<h3>Gibt es eine Geld-zurück-Garantie?</h3>
|
||||||
|
<span class="faq-toggle">+</span>
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Ja, wir bieten eine 30-Tage Geld-zurück-Garantie. Wenn Sie nicht zufrieden sind, erhalten Sie Ihr Geld ohne Wenn und Aber zurück.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item glass-card">
|
||||||
|
<div class="faq-question">
|
||||||
|
<h3>Wo stehen Ihre Server?</h3>
|
||||||
|
<span class="faq-toggle">+</span>
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Alle unsere Server stehen in deutschen Rechenzentren. Das gewährleistet DSGVO-Konformität und niedrige Latenzzeiten für deutsche Nutzer.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="faq-item glass-card">
|
||||||
|
<div class="faq-question">
|
||||||
|
<h3>Bieten Sie 24/7 Support?</h3>
|
||||||
|
<span class="faq-toggle">+</span>
|
||||||
|
</div>
|
||||||
|
<div class="faq-answer">
|
||||||
|
<p>Unser direkter Support ist Mo-Fr von 9:00-18:00 Uhr verfügbar. Außerhalb dieser Zeiten überwachen automatische Systeme die Infrastruktur und bei kritischen Problemen sind wir auch außerhalb der Geschäftszeiten erreichbar.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Response Time -->
|
||||||
|
<section class="response-time">
|
||||||
|
<div class="container">
|
||||||
|
<div class="response-content glass-card">
|
||||||
|
<div class="response-stats">
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number">< 2h</span>
|
||||||
|
<span class="stat-label">Durchschnittliche Antwortzeit</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number">98%</span>
|
||||||
|
<span class="stat-label">Kundenzufriedenheit</span>
|
||||||
|
</div>
|
||||||
|
<div class="stat-item">
|
||||||
|
<span class="stat-number">24/7</span>
|
||||||
|
<span class="stat-label">Monitoring</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="response-text">
|
||||||
|
<h3>Schnelle Hilfe garantiert</h3>
|
||||||
|
<p>Unser Support-Team ist darauf spezialisiert, Ihnen schnell und effektiv zu helfen. Die meisten Anfragen werden innerhalb von 2 Stunden beantwortet.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// Include footer
|
||||||
|
includeFooter();
|
||||||
|
?>
|
||||||
56
public/includes/footer.php
Normal file
56
public/includes/footer.php
Normal file
@@ -0,0 +1,56 @@
|
|||||||
|
<footer class="footer">
|
||||||
|
<div class="container">
|
||||||
|
<div class="footer-content">
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>HexaHost.de</h4>
|
||||||
|
<p>Zuverlässiges Hosting aus Niederbayern</p>
|
||||||
|
<div class="footer-location">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||||
|
<circle cx="12" cy="10" r="3"/>
|
||||||
|
</svg>
|
||||||
|
<span>Niederbayern, Deutschland</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Produkte</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="vpc.html">Virtual Private Container</a></li>
|
||||||
|
<li><a href="vps.html">Virtual Private Server</a></li>
|
||||||
|
<li><a href="mail-gateway.html">Mail Gateway</a></li>
|
||||||
|
<li><a href="webhosting.html">Webhosting</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Unternehmen</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="about.html">Über uns</a></li>
|
||||||
|
<li><a href="contact.html">Kontakt</a></li>
|
||||||
|
<li><a href="#">Impressum</a></li>
|
||||||
|
<li><a href="#">Datenschutz</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer-section">
|
||||||
|
<h4>Support</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#">Hilfe-Center</a></li>
|
||||||
|
<li><a href="#">Status</a></li>
|
||||||
|
<li><a href="contact.html">Support-Ticket</a></li>
|
||||||
|
<li><a href="#">FAQ</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer-bottom">
|
||||||
|
<p>© 2024 HexaHost.de - Alle Rechte vorbehalten</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="assets/js/main.js"></script>
|
||||||
|
<?php if (isset($additional_scripts)): ?>
|
||||||
|
<?php foreach ($additional_scripts as $script): ?>
|
||||||
|
<script src="<?php echo $script; ?>"></script>
|
||||||
|
<?php endforeach; ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
68
public/includes/functions.php
Normal file
68
public/includes/functions.php
Normal file
@@ -0,0 +1,68 @@
|
|||||||
|
<?php
|
||||||
|
/**
|
||||||
|
* Helper functions for HexaHost.de
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set page configuration and include header
|
||||||
|
*
|
||||||
|
* @param string $page_title The page title
|
||||||
|
* @param string $page_description The page description
|
||||||
|
* @param string $current_page The current page identifier
|
||||||
|
* @param array $additional_scripts Additional scripts to include
|
||||||
|
*/
|
||||||
|
function includeHeader($page_title = '', $page_description = '', $current_page = '', $additional_scripts = []) {
|
||||||
|
global $page_title, $page_description, $current_page, $additional_scripts;
|
||||||
|
|
||||||
|
// Set default values if not provided
|
||||||
|
if (empty($page_title)) {
|
||||||
|
$page_title = 'HexaHost.de - Zuverlässiges Hosting aus Niederbayern';
|
||||||
|
}
|
||||||
|
if (empty($page_description)) {
|
||||||
|
$page_description = 'HexaHost.de - Zuverlässiges und preiswertes Hosting aus Niederbayern. VPS, VPC, Mail Gateway und Webhosting Lösungen.';
|
||||||
|
}
|
||||||
|
|
||||||
|
include 'includes/header.php';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Include footer
|
||||||
|
*/
|
||||||
|
function includeFooter() {
|
||||||
|
include 'includes/footer.php';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate breadcrumb navigation
|
||||||
|
*
|
||||||
|
* @param array $breadcrumbs Array of breadcrumb items [['title' => 'Home', 'url' => 'index.html'], ...]
|
||||||
|
*/
|
||||||
|
function generateBreadcrumbs($breadcrumbs) {
|
||||||
|
echo '<div class="breadcrumb">';
|
||||||
|
$last_index = count($breadcrumbs) - 1;
|
||||||
|
|
||||||
|
foreach ($breadcrumbs as $index => $item) {
|
||||||
|
if ($index === $last_index) {
|
||||||
|
// Last item (current page)
|
||||||
|
echo '<span>' . htmlspecialchars($item['title']) . '</span>';
|
||||||
|
} else {
|
||||||
|
// Link to other pages
|
||||||
|
echo '<a href="' . htmlspecialchars($item['url']) . '">' . htmlspecialchars($item['title']) . '</a>';
|
||||||
|
echo '<span>/</span>';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
echo '</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generate CSRF token for form security
|
||||||
|
*
|
||||||
|
* @return string CSRF token
|
||||||
|
*/
|
||||||
|
function generateCSRFToken() {
|
||||||
|
if (!isset($_SESSION['csrf_token'])) {
|
||||||
|
$_SESSION['csrf_token'] = bin2hex(random_bytes(32));
|
||||||
|
}
|
||||||
|
return $_SESSION['csrf_token'];
|
||||||
|
}
|
||||||
|
?>
|
||||||
45
public/includes/header.php
Normal file
45
public/includes/header.php
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title><?php echo isset($page_title) ? $page_title : 'HexaHost.de - Zuverlässiges Hosting aus Niederbayern'; ?></title>
|
||||||
|
<link rel="stylesheet" href="assets/css/style.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Russo+One&family=Source+Sans+Pro:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||||
|
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||||
|
<meta name="description" content="<?php echo isset($page_description) ? $page_description : 'HexaHost.de - Zuverlässiges und preiswertes Hosting aus Niederbayern. VPS, VPC, Mail Gateway und Webhosting Lösungen.'; ?>">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="header">
|
||||||
|
<nav class="nav">
|
||||||
|
<div class="nav-container">
|
||||||
|
<div class="nav-logo">
|
||||||
|
<a href="index.html">
|
||||||
|
<span class="logo-text">HexaHost</span>
|
||||||
|
<span class="logo-tld">.de</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<ul class="nav-menu">
|
||||||
|
<li><a href="index.html" class="nav-link <?php echo ($current_page === 'home') ? 'active' : ''; ?>">Home</a></li>
|
||||||
|
<li class="nav-dropdown">
|
||||||
|
<a href="#" class="nav-link <?php echo (in_array($current_page, ['vpc', 'vps', 'mail-gateway', 'webhosting'])) ? 'active' : ''; ?>">Produkte</a>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="vpc.php" class="<?php echo ($current_page === 'vpc') ? 'active' : ''; ?>">Virtual Private Container</a></li>
|
||||||
|
<li><a href="vps.php" class="<?php echo ($current_page === 'vps') ? 'active' : ''; ?>">Virtual Private Server</a></li>
|
||||||
|
<li><a href="mail-gateway.php" class="<?php echo ($current_page === 'mail-gateway') ? 'active' : ''; ?>">Mail Gateway</a></li>
|
||||||
|
<li><a href="webhosting.php" class="<?php echo ($current_page === 'webhosting') ? 'active' : ''; ?>">Webhosting</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="about.html" class="nav-link <?php echo ($current_page === 'about') ? 'active' : ''; ?>">Über uns</a></li>
|
||||||
|
<li><a href="contact.html" class="nav-link <?php echo ($current_page === 'contact') ? 'active' : ''; ?>">Kontakt</a></li>
|
||||||
|
</ul>
|
||||||
|
<div class="nav-toggle">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
210
public/index.php
Normal file
210
public/index.php
Normal file
@@ -0,0 +1,210 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'includes/functions.php';
|
||||||
|
|
||||||
|
// Page configuration
|
||||||
|
$page_title = 'HexaHost.de - Zuverlässiges Hosting aus Niederbayern';
|
||||||
|
$page_description = 'HexaHost.de - Zuverlässiges und preiswertes Hosting aus Niederbayern. VPS, VPC, Mail Gateway und Webhosting Lösungen.';
|
||||||
|
$current_page = 'home';
|
||||||
|
|
||||||
|
// Include header
|
||||||
|
includeHeader($page_title, $page_description, $current_page);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- Hero Section -->
|
||||||
|
<section class="hero">
|
||||||
|
<div class="hero-container">
|
||||||
|
<div class="hero-content">
|
||||||
|
<h1 class="hero-title">
|
||||||
|
Zuverlässiges Hosting aus <span class="highlight">Niederbayern</span>
|
||||||
|
</h1>
|
||||||
|
<p class="hero-description">
|
||||||
|
Entdecken Sie unsere preiswerten und zuverlässigen Hosting-Lösungen.
|
||||||
|
Von Virtual Private Servern bis hin zu Webhosting - wir haben die
|
||||||
|
perfekte Lösung für Ihre Bedürfnisse.
|
||||||
|
</p>
|
||||||
|
<div class="hero-actions">
|
||||||
|
<a href="#products" class="btn btn-primary">Produkte entdecken</a>
|
||||||
|
<a href="contact.html" class="btn btn-secondary">Kontakt aufnehmen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-visual">
|
||||||
|
<div class="hero-card glass-card">
|
||||||
|
<div class="server-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||||||
|
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||||
|
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>99.9% Uptime</h3>
|
||||||
|
<p>Zuverlässige Infrastruktur</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Products Section -->
|
||||||
|
<section id="products" class="products">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Unsere Hosting-Lösungen</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Modernste Technologie auf Proxmox-Basis für maximale Performance und Zuverlässigkeit
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="products-grid">
|
||||||
|
<div class="product-card glass-card">
|
||||||
|
<div class="product-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M4 7V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3"/>
|
||||||
|
<path d="M4 7h16"/>
|
||||||
|
<path d="M4 7v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7"/>
|
||||||
|
<circle cx="9" cy="11" r="2"/>
|
||||||
|
<path d="m13 13 4 4"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Virtual Private Container</h3>
|
||||||
|
<p>Leichtgewichtige Container-Lösungen für optimale Ressourcennutzung</p>
|
||||||
|
<ul class="product-features">
|
||||||
|
<li>Proxmox LXC Container</li>
|
||||||
|
<li>SSD Storage</li>
|
||||||
|
<li>DDoS Protection</li>
|
||||||
|
<li>99.9% Uptime</li>
|
||||||
|
</ul>
|
||||||
|
<a href="vpc.html" class="btn btn-primary">Mehr erfahren</a>
|
||||||
|
</div>
|
||||||
|
<div class="product-card glass-card">
|
||||||
|
<div class="product-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||||||
|
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||||
|
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Virtual Private Server</h3>
|
||||||
|
<p>Vollständige Server-Umgebung mit maximaler Kontrolle</p>
|
||||||
|
<ul class="product-features">
|
||||||
|
<li>Dedizierte Ressourcen</li>
|
||||||
|
<li>Root-Zugriff</li>
|
||||||
|
<li>Backup-Service</li>
|
||||||
|
<li>24/7 Monitoring</li>
|
||||||
|
</ul>
|
||||||
|
<a href="vps.html" class="btn btn-primary">Mehr erfahren</a>
|
||||||
|
</div>
|
||||||
|
<div class="product-card glass-card">
|
||||||
|
<div class="product-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||||
|
<polyline points="22,6 12,13 2,6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Mail Gateway</h3>
|
||||||
|
<p>Professionelle E-Mail-Lösungen für Unternehmen</p>
|
||||||
|
<ul class="product-features">
|
||||||
|
<li>Spam & Virus Schutz</li>
|
||||||
|
<li>E-Mail Archivierung</li>
|
||||||
|
<li>Webmail Interface</li>
|
||||||
|
<li>Mobile Sync</li>
|
||||||
|
</ul>
|
||||||
|
<a href="mail-gateway.html" class="btn btn-primary">Mehr erfahren</a>
|
||||||
|
</div>
|
||||||
|
<div class="product-card glass-card">
|
||||||
|
<div class="product-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||||
|
<polyline points="14,2 14,8 20,8"/>
|
||||||
|
<line x1="16" y1="13" x2="8" y2="13"/>
|
||||||
|
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||||
|
<polyline points="10,9 9,9 8,9"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Webhosting</h3>
|
||||||
|
<p>Einfache und zuverlässige Webhosting-Lösungen</p>
|
||||||
|
<ul class="product-features">
|
||||||
|
<li>cPanel/Webmin</li>
|
||||||
|
<li>SSL Zertifikate</li>
|
||||||
|
<li>Automatische Backups</li>
|
||||||
|
<li>PHP & MySQL</li>
|
||||||
|
</ul>
|
||||||
|
<a href="webhosting.html" class="btn btn-primary">Mehr erfahren</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Features Section -->
|
||||||
|
<section class="features">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Warum HexaHost.de?</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Wir bieten Ihnen mehr als nur Hosting - wir bieten Ihnen eine Partnerschaft
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="features-grid">
|
||||||
|
<div class="feature-item glass-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2v20M17 7l-5-5-5 5M17 17l-5 5-5-5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Faire Preise</h3>
|
||||||
|
<p>Transparent kalkulierte Preise ohne versteckte Kosten</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item glass-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 17v6"/>
|
||||||
|
<path d="M3.75 6.75l4.5 4.5"/>
|
||||||
|
<path d="M15.75 15.75l4.5 4.5"/>
|
||||||
|
<path d="M1 12h6"/>
|
||||||
|
<path d="M17 12h6"/>
|
||||||
|
<path d="M3.75 17.25l4.5-4.5"/>
|
||||||
|
<path d="M15.75 8.25l4.5-4.5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Performance</h3>
|
||||||
|
<p>Modernste Hardware und optimierte Konfigurationen für beste Leistung</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item glass-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2v20M17 7l-5-5-5 5M17 17l-5 5-5-5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Faire Preise</h3>
|
||||||
|
<p>Transparent kalkulierte Preise ohne versteckte Kosten</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature-item glass-card">
|
||||||
|
<div class="feature-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Support aus Bayern</h3>
|
||||||
|
<p>Persönlicher Support direkt aus Niederbayern in deutscher Sprache</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA Section -->
|
||||||
|
<section class="cta">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta-content glass-card">
|
||||||
|
<h2>Bereit für zuverlässiges Hosting?</h2>
|
||||||
|
<p>Starten Sie noch heute mit HexaHost und erleben Sie den Unterschied</p>
|
||||||
|
<div class="cta-actions">
|
||||||
|
<a href="contact.html" class="btn btn-primary">Jetzt starten</a>
|
||||||
|
<a href="about.html" class="btn btn-secondary">Mehr über uns</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// Include footer
|
||||||
|
includeFooter();
|
||||||
|
?>
|
||||||
346
public/vpc.php
Normal file
346
public/vpc.php
Normal file
@@ -0,0 +1,346 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'includes/functions.php';
|
||||||
|
|
||||||
|
// Page configuration
|
||||||
|
$page_title = 'Virtual Private Container - Effiziente LXC Container | HexaHost.de';
|
||||||
|
$page_description = 'Virtual Private Container auf Proxmox LXC-Basis. Effiziente und preiswerte Container-Lösungen ab 4,99€/Monat bei HexaHost.de';
|
||||||
|
$current_page = 'vpc';
|
||||||
|
|
||||||
|
// Include header
|
||||||
|
includeHeader($page_title, $page_description, $current_page);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- Product Hero -->
|
||||||
|
<section class="product-hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="product-hero-content">
|
||||||
|
<?php
|
||||||
|
generateBreadcrumbs([
|
||||||
|
['title' => 'Home', 'url' => 'index.html'],
|
||||||
|
['title' => 'Virtual Private Container', 'url' => '']
|
||||||
|
]);
|
||||||
|
?>
|
||||||
|
<h1 class="product-hero-title">
|
||||||
|
Virtual Private Container
|
||||||
|
<span class="highlight">auf Proxmox LXC</span>
|
||||||
|
</h1>
|
||||||
|
<p class="product-hero-description">
|
||||||
|
Erleben Sie die Effizienz von Linux-Containern mit der Zuverlässigkeit
|
||||||
|
von Proxmox. Unsere VPC-Lösungen bieten optimale Performance bei
|
||||||
|
minimalem Ressourcenverbrauch.
|
||||||
|
</p>
|
||||||
|
<div class="product-hero-features">
|
||||||
|
<div class="hero-feature">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
<polyline points="12,6 12,12 16,14"/>
|
||||||
|
</svg>
|
||||||
|
<span>Sofortige Bereitstellung</span>
|
||||||
|
</div>
|
||||||
|
<div class="hero-feature">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
<span>99.9% Uptime</span>
|
||||||
|
</div>
|
||||||
|
<div class="hero-feature">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Maximale Performance</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- VPC Packages -->
|
||||||
|
<section class="packages">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">VPC Pakete</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Wählen Sie das perfekte Container-Paket für Ihre Anforderungen
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="packages-grid">
|
||||||
|
<!-- Starter Package -->
|
||||||
|
<div class="package-card glass-card">
|
||||||
|
<div class="package-header">
|
||||||
|
<h3 class="package-name">VPC Starter</h3>
|
||||||
|
<div class="package-price">
|
||||||
|
<span class="price">4,99€</span>
|
||||||
|
<span class="period">/Monat</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-specs">
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">CPU Kerne:</span>
|
||||||
|
<span class="spec-value">1 vCore</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">RAM:</span>
|
||||||
|
<span class="spec-value">1 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">SSD Speicher:</span>
|
||||||
|
<span class="spec-value">20 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Traffic:</span>
|
||||||
|
<span class="spec-value">1 TB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">IPv4 Adressen:</span>
|
||||||
|
<span class="spec-value">1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-features">
|
||||||
|
<div class="feature">✓ Proxmox LXC Container</div>
|
||||||
|
<div class="feature">✓ Root-Zugriff</div>
|
||||||
|
<div class="feature">✓ SSH-Zugang</div>
|
||||||
|
<div class="feature">✓ Backup inklusive</div>
|
||||||
|
<div class="feature">✓ 24/7 Monitoring</div>
|
||||||
|
</div>
|
||||||
|
<a href="contact.html?package=vpc-starter" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Business Package -->
|
||||||
|
<div class="package-card glass-card featured">
|
||||||
|
<div class="featured-badge">Beliebt</div>
|
||||||
|
<div class="package-header">
|
||||||
|
<h3 class="package-name">VPC Business</h3>
|
||||||
|
<div class="package-price">
|
||||||
|
<span class="price">9,99€</span>
|
||||||
|
<span class="period">/Monat</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-specs">
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">CPU Kerne:</span>
|
||||||
|
<span class="spec-value">2 vCores</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">RAM:</span>
|
||||||
|
<span class="spec-value">4 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">SSD Speicher:</span>
|
||||||
|
<span class="spec-value">80 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Traffic:</span>
|
||||||
|
<span class="spec-value">3 TB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">IPv4 Adressen:</span>
|
||||||
|
<span class="spec-value">1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-features">
|
||||||
|
<div class="feature">✓ Proxmox LXC Container</div>
|
||||||
|
<div class="feature">✓ Root-Zugriff</div>
|
||||||
|
<div class="feature">✓ SSH-Zugang</div>
|
||||||
|
<div class="feature">✓ Tägliches Backup</div>
|
||||||
|
<div class="feature">✓ 24/7 Monitoring</div>
|
||||||
|
<div class="feature">✓ Snapshot-Funktion</div>
|
||||||
|
</div>
|
||||||
|
<a href="contact.html?package=vpc-business" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Professional Package -->
|
||||||
|
<div class="package-card glass-card">
|
||||||
|
<div class="package-header">
|
||||||
|
<h3 class="package-name">VPC Professional</h3>
|
||||||
|
<div class="package-price">
|
||||||
|
<span class="price">19,99€</span>
|
||||||
|
<span class="period">/Monat</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-specs">
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">CPU Kerne:</span>
|
||||||
|
<span class="spec-value">4 vCores</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">RAM:</span>
|
||||||
|
<span class="spec-value">8 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">SSD Speicher:</span>
|
||||||
|
<span class="spec-value">160 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Traffic:</span>
|
||||||
|
<span class="spec-value">5 TB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">IPv4 Adressen:</span>
|
||||||
|
<span class="spec-value">2</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-features">
|
||||||
|
<div class="feature">✓ Proxmox LXC Container</div>
|
||||||
|
<div class="feature">✓ Root-Zugriff</div>
|
||||||
|
<div class="feature">✓ SSH-Zugang</div>
|
||||||
|
<div class="feature">✓ Stündliches Backup</div>
|
||||||
|
<div class="feature">✓ 24/7 Monitoring</div>
|
||||||
|
<div class="feature">✓ Snapshot-Funktion</div>
|
||||||
|
<div class="feature">✓ Priority Support</div>
|
||||||
|
</div>
|
||||||
|
<a href="contact.html?package=vpc-professional" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Enterprise Package -->
|
||||||
|
<div class="package-card glass-card">
|
||||||
|
<div class="package-header">
|
||||||
|
<h3 class="package-name">VPC Enterprise</h3>
|
||||||
|
<div class="package-price">
|
||||||
|
<span class="price">39,99€</span>
|
||||||
|
<span class="period">/Monat</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-specs">
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">CPU Kerne:</span>
|
||||||
|
<span class="spec-value">8 vCores</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">RAM:</span>
|
||||||
|
<span class="spec-value">16 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">SSD Speicher:</span>
|
||||||
|
<span class="spec-value">320 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Traffic:</span>
|
||||||
|
<span class="spec-value">10 TB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">IPv4 Adressen:</span>
|
||||||
|
<span class="spec-value">3</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-features">
|
||||||
|
<div class="feature">✓ Proxmox LXC Container</div>
|
||||||
|
<div class="feature">✓ Root-Zugriff</div>
|
||||||
|
<div class="feature">✓ SSH-Zugang</div>
|
||||||
|
<div class="feature">✓ Stündliches Backup</div>
|
||||||
|
<div class="feature">✓ 24/7 Monitoring</div>
|
||||||
|
<div class="feature">✓ Snapshot-Funktion</div>
|
||||||
|
<div class="feature">✓ Priority Support</div>
|
||||||
|
<div class="feature">✓ Individuelle Konfiguration</div>
|
||||||
|
</div>
|
||||||
|
<a href="contact.html?package=vpc-enterprise" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Technical Details -->
|
||||||
|
<section class="technical-details">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Technische Details</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Erfahren Sie mehr über unsere Container-Technologie
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="details-grid">
|
||||||
|
<div class="detail-card glass-card">
|
||||||
|
<div class="detail-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M4 7V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v3"/>
|
||||||
|
<path d="M4 7h16"/>
|
||||||
|
<path d="M4 7v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Proxmox LXC</h3>
|
||||||
|
<p>Modernste Container-Virtualisierung auf Basis von Linux Containers (LXC) mit Proxmox-Management für maximale Effizienz.</p>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card glass-card">
|
||||||
|
<div class="detail-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="3"/>
|
||||||
|
<path d="M12 1v6m0 6v6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>High Performance</h3>
|
||||||
|
<p>Enterprise-Hardware mit NVMe SSD-Speicher und modernen Intel/AMD Prozessoren für beste Performance.</p>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card glass-card">
|
||||||
|
<div class="detail-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||||
|
<polyline points="7.5,4.21 12,6.81 16.5,4.21"/>
|
||||||
|
<polyline points="7.5,19.79 7.5,14.6 3,12"/>
|
||||||
|
<polyline points="21,12 16.5,14.6 16.5,19.79"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Skalierbarkeit</h3>
|
||||||
|
<p>Einfache Anpassung der Ressourcen je nach Bedarf - CPU, RAM und Speicher können flexibel skaliert werden.</p>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card glass-card">
|
||||||
|
<div class="detail-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Sicherheit</h3>
|
||||||
|
<p>Isolierte Container-Umgebung mit automatischen Sicherheitsupdates und regelmäßigen Backups.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Use Cases -->
|
||||||
|
<section class="use-cases">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Anwendungsbereiche</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Perfekt geeignet für verschiedene Szenarien
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="use-cases-grid">
|
||||||
|
<div class="use-case-item glass-card">
|
||||||
|
<h3>Web-Entwicklung</h3>
|
||||||
|
<p>Ideale Testumgebung für Entwickler mit schneller Bereitstellung und flexibler Konfiguration.</p>
|
||||||
|
</div>
|
||||||
|
<div class="use-case-item glass-card">
|
||||||
|
<h3>Microservices</h3>
|
||||||
|
<p>Effiziente Containerisierung von Microservices mit optimaler Ressourcennutzung.</p>
|
||||||
|
</div>
|
||||||
|
<div class="use-case-item glass-card">
|
||||||
|
<h3>CI/CD Pipelines</h3>
|
||||||
|
<p>Automatisierte Build- und Deployment-Prozesse in isolierten Container-Umgebungen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="use-case-item glass-card">
|
||||||
|
<h3>Backup-Server</h3>
|
||||||
|
<p>Zuverlässige Backup-Lösungen mit redundanter Speicherung und automatischer Überwachung.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA Section -->
|
||||||
|
<section class="cta">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta-content glass-card">
|
||||||
|
<h2>Bereit für Ihren VPC?</h2>
|
||||||
|
<p>Starten Sie noch heute mit einem Virtual Private Container</p>
|
||||||
|
<div class="cta-actions">
|
||||||
|
<a href="contact.html?product=vpc" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
<a href="contact.html" class="btn btn-secondary">Beratung anfordern</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// Include footer
|
||||||
|
includeFooter();
|
||||||
|
?>
|
||||||
350
public/vps.php
Normal file
350
public/vps.php
Normal file
@@ -0,0 +1,350 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'includes/functions.php';
|
||||||
|
|
||||||
|
// Page configuration
|
||||||
|
$page_title = 'Virtual Private Server - KVM Virtualisierung | HexaHost.de';
|
||||||
|
$page_description = 'Virtual Private Server auf Proxmox KVM-Basis. Vollwertige Virtualisierung mit Root-Zugriff ab 9,99€/Monat bei HexaHost.de';
|
||||||
|
$current_page = 'vps';
|
||||||
|
|
||||||
|
// Include header
|
||||||
|
includeHeader($page_title, $page_description, $current_page);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- Product Hero -->
|
||||||
|
<section class="product-hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="product-hero-content">
|
||||||
|
<?php
|
||||||
|
generateBreadcrumbs([
|
||||||
|
['title' => 'Home', 'url' => 'index.html'],
|
||||||
|
['title' => 'Virtual Private Server', 'url' => '']
|
||||||
|
]);
|
||||||
|
?>
|
||||||
|
<h1 class="product-hero-title">
|
||||||
|
Virtual Private Server
|
||||||
|
<span class="highlight">auf Proxmox KVM</span>
|
||||||
|
</h1>
|
||||||
|
<p class="product-hero-description">
|
||||||
|
Maximale Flexibilität und Kontrolle mit vollwertiger KVM-Virtualisierung.
|
||||||
|
Installieren Sie jedes Betriebssystem und genießen Sie vollständigen Root-Zugriff.
|
||||||
|
</p>
|
||||||
|
<div class="product-hero-features">
|
||||||
|
<div class="hero-feature">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||||||
|
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||||
|
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||||
|
</svg>
|
||||||
|
<span>Vollwertiger Server</span>
|
||||||
|
</div>
|
||||||
|
<div class="hero-feature">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||||||
|
<path d="M2 17l10 5 10-5"/>
|
||||||
|
<path d="M2 12l10 5 10-5"/>
|
||||||
|
</svg>
|
||||||
|
<span>Alle Betriebssysteme</span>
|
||||||
|
</div>
|
||||||
|
<div class="hero-feature">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M9 12l2 2 4-4"/>
|
||||||
|
<path d="M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3"/>
|
||||||
|
<path d="M3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3"/>
|
||||||
|
</svg>
|
||||||
|
<span>Root-Zugriff</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- VPS Packages -->
|
||||||
|
<section class="packages">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">VPS Pakete</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Wählen Sie das perfekte VPS-Paket für Ihre Anforderungen
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="packages-grid">
|
||||||
|
<!-- Starter Package -->
|
||||||
|
<div class="package-card glass-card">
|
||||||
|
<div class="package-header">
|
||||||
|
<h3 class="package-name">VPS Starter</h3>
|
||||||
|
<div class="package-price">
|
||||||
|
<span class="price">9,99€</span>
|
||||||
|
<span class="period">/Monat</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-specs">
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">CPU Kerne:</span>
|
||||||
|
<span class="spec-value">1 vCore</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">RAM:</span>
|
||||||
|
<span class="spec-value">2 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">SSD Speicher:</span>
|
||||||
|
<span class="spec-value">40 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Traffic:</span>
|
||||||
|
<span class="spec-value">2 TB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">IPv4 Adressen:</span>
|
||||||
|
<span class="spec-value">1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-features">
|
||||||
|
<div class="feature">✓ Proxmox KVM Virtualisierung</div>
|
||||||
|
<div class="feature">✓ Root-Zugriff</div>
|
||||||
|
<div class="feature">✓ SSH-Zugang</div>
|
||||||
|
<div class="feature">✓ Backup inklusive</div>
|
||||||
|
<div class="feature">✓ 24/7 Monitoring</div>
|
||||||
|
</div>
|
||||||
|
<a href="contact.html?package=vps-starter" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Business Package -->
|
||||||
|
<div class="package-card glass-card featured">
|
||||||
|
<div class="featured-badge">Beliebt</div>
|
||||||
|
<div class="package-header">
|
||||||
|
<h3 class="package-name">VPS Business</h3>
|
||||||
|
<div class="package-price">
|
||||||
|
<span class="price">19,99€</span>
|
||||||
|
<span class="period">/Monat</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-specs">
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">CPU Kerne:</span>
|
||||||
|
<span class="spec-value">2 vCores</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">RAM:</span>
|
||||||
|
<span class="spec-value">4 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">SSD Speicher:</span>
|
||||||
|
<span class="spec-value">80 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Traffic:</span>
|
||||||
|
<span class="spec-value">4 TB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">IPv4 Adressen:</span>
|
||||||
|
<span class="spec-value">1</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-features">
|
||||||
|
<div class="feature">✓ Proxmox KVM Virtualisierung</div>
|
||||||
|
<div class="feature">✓ Root-Zugriff</div>
|
||||||
|
<div class="feature">✓ SSH-Zugang</div>
|
||||||
|
<div class="feature">✓ Tägliches Backup</div>
|
||||||
|
<div class="feature">✓ 24/7 Monitoring</div>
|
||||||
|
<div class="feature">✓ Snapshot-Funktion</div>
|
||||||
|
</div>
|
||||||
|
<a href="contact.html?package=vps-business" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Professional Package -->
|
||||||
|
<div class="package-card glass-card">
|
||||||
|
<div class="package-header">
|
||||||
|
<h3 class="package-name">VPS Professional</h3>
|
||||||
|
<div class="package-price">
|
||||||
|
<span class="price">39,99€</span>
|
||||||
|
<span class="period">/Monat</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-specs">
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">CPU Kerne:</span>
|
||||||
|
<span class="spec-value">4 vCores</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">RAM:</span>
|
||||||
|
<span class="spec-value">8 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">SSD Speicher:</span>
|
||||||
|
<span class="spec-value">160 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Traffic:</span>
|
||||||
|
<span class="spec-value">8 TB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">IPv4 Adressen:</span>
|
||||||
|
<span class="spec-value">2</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-features">
|
||||||
|
<div class="feature">✓ Proxmox KVM Virtualisierung</div>
|
||||||
|
<div class="feature">✓ Root-Zugriff</div>
|
||||||
|
<div class="feature">✓ SSH-Zugang</div>
|
||||||
|
<div class="feature">✓ Stündliches Backup</div>
|
||||||
|
<div class="feature">✓ 24/7 Monitoring</div>
|
||||||
|
<div class="feature">✓ Snapshot-Funktion</div>
|
||||||
|
<div class="feature">✓ Priority Support</div>
|
||||||
|
</div>
|
||||||
|
<a href="contact.html?package=vps-professional" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Enterprise Package -->
|
||||||
|
<div class="package-card glass-card">
|
||||||
|
<div class="package-header">
|
||||||
|
<h3 class="package-name">VPS Enterprise</h3>
|
||||||
|
<div class="package-price">
|
||||||
|
<span class="price">79,99€</span>
|
||||||
|
<span class="period">/Monat</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-specs">
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">CPU Kerne:</span>
|
||||||
|
<span class="spec-value">8 vCores</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">RAM:</span>
|
||||||
|
<span class="spec-value">16 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">SSD Speicher:</span>
|
||||||
|
<span class="spec-value">320 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Traffic:</span>
|
||||||
|
<span class="spec-value">15 TB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">IPv4 Adressen:</span>
|
||||||
|
<span class="spec-value">3</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-features">
|
||||||
|
<div class="feature">✓ Proxmox KVM Virtualisierung</div>
|
||||||
|
<div class="feature">✓ Root-Zugriff</div>
|
||||||
|
<div class="feature">✓ SSH-Zugang</div>
|
||||||
|
<div class="feature">✓ Stündliches Backup</div>
|
||||||
|
<div class="feature">✓ 24/7 Monitoring</div>
|
||||||
|
<div class="feature">✓ Snapshot-Funktion</div>
|
||||||
|
<div class="feature">✓ Priority Support</div>
|
||||||
|
<div class="feature">✓ Individuelle Konfiguration</div>
|
||||||
|
</div>
|
||||||
|
<a href="contact.html?package=vps-enterprise" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Technical Details -->
|
||||||
|
<section class="technical-details">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Technische Details</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Erfahren Sie mehr über unsere KVM-Virtualisierung
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="details-grid">
|
||||||
|
<div class="detail-card glass-card">
|
||||||
|
<div class="detail-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
||||||
|
<line x1="8" y1="21" x2="16" y2="21"/>
|
||||||
|
<line x1="12" y1="17" x2="12" y2="21"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Proxmox KVM</h3>
|
||||||
|
<p>Vollwertige Hardware-Virtualisierung mit Kernel-based Virtual Machine (KVM) für maximale Performance und Kompatibilität.</p>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card glass-card">
|
||||||
|
<div class="detail-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
|
||||||
|
<path d="M2 17l10 5 10-5"/>
|
||||||
|
<path d="M2 12l10 5 10-5"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Alle Betriebssysteme</h3>
|
||||||
|
<p>Installieren Sie Linux, Windows, BSD oder andere Betriebssysteme Ihrer Wahl - volle Flexibilität für Ihre Anwendungen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card glass-card">
|
||||||
|
<div class="detail-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M9 12l2 2 4-4"/>
|
||||||
|
<path d="M21 12c-1 0-3-1-3-3s2-3 3-3 3 1 3 3-2 3-3 3"/>
|
||||||
|
<path d="M3 12c1 0 3-1 3-3s-2-3-3-3-3 1-3 3 2 3 3 3"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Vollständige Kontrolle</h3>
|
||||||
|
<p>Root-Zugriff und vollständige Kontrolle über Ihren Server - installieren Sie Software und konfigurieren Sie alles nach Ihren Wünschen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card glass-card">
|
||||||
|
<div class="detail-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>Enterprise-Hardware</h3>
|
||||||
|
<p>Moderne Server mit Intel/AMD Prozessoren, NVMe SSD-Speicher und redundanter Netzwerk-Anbindung für höchste Zuverlässigkeit.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Use Cases -->
|
||||||
|
<section class="use-cases">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Anwendungsbereiche</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Perfekt geeignet für verschiedene Szenarien
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="use-cases-grid">
|
||||||
|
<div class="use-case-item glass-card">
|
||||||
|
<h3>Web-Server</h3>
|
||||||
|
<p>Hosting von Websites, Web-Anwendungen und APIs mit vollständiger Kontrolle über die Server-Umgebung.</p>
|
||||||
|
</div>
|
||||||
|
<div class="use-case-item glass-card">
|
||||||
|
<h3>Datenbank-Server</h3>
|
||||||
|
<p>Dedizierte Datenbank-Server für MySQL, PostgreSQL, MongoDB oder andere Datenbank-Systeme.</p>
|
||||||
|
</div>
|
||||||
|
<div class="use-case-item glass-card">
|
||||||
|
<h3>Game-Server</h3>
|
||||||
|
<p>Hosting von Game-Servern mit optimierter Performance für Multiplayer-Spiele und Communities.</p>
|
||||||
|
</div>
|
||||||
|
<div class="use-case-item glass-card">
|
||||||
|
<h3>Entwicklungsumgebung</h3>
|
||||||
|
<p>Isolierte Entwicklungsumgebungen für Teams mit vollständiger Kontrolle über Tools und Konfiguration.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA Section -->
|
||||||
|
<section class="cta">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta-content glass-card">
|
||||||
|
<h2>Bereit für Ihren VPS?</h2>
|
||||||
|
<p>Starten Sie noch heute mit einem Virtual Private Server</p>
|
||||||
|
<div class="cta-actions">
|
||||||
|
<a href="contact.html?product=vps" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
<a href="contact.html" class="btn btn-secondary">Beratung anfordern</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// Include footer
|
||||||
|
includeFooter();
|
||||||
|
?>
|
||||||
349
public/webhosting.php
Normal file
349
public/webhosting.php
Normal file
@@ -0,0 +1,349 @@
|
|||||||
|
<?php
|
||||||
|
require_once 'includes/functions.php';
|
||||||
|
|
||||||
|
// Page configuration
|
||||||
|
$page_title = 'Webhosting - Klassisches Hosting für Websites | HexaHost.de';
|
||||||
|
$page_description = 'Webhosting mit PHP, MySQL und SSL-Zertifikaten. Klassisches Hosting für Websites ab 1,99€/Monat bei HexaHost.de';
|
||||||
|
$current_page = 'webhosting';
|
||||||
|
|
||||||
|
// Include header
|
||||||
|
includeHeader($page_title, $page_description, $current_page);
|
||||||
|
?>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<!-- Product Hero -->
|
||||||
|
<section class="product-hero">
|
||||||
|
<div class="container">
|
||||||
|
<div class="product-hero-content">
|
||||||
|
<?php
|
||||||
|
generateBreadcrumbs([
|
||||||
|
['title' => 'Home', 'url' => 'index.html'],
|
||||||
|
['title' => 'Webhosting', 'url' => '']
|
||||||
|
]);
|
||||||
|
?>
|
||||||
|
<h1 class="product-hero-title">
|
||||||
|
Webhosting
|
||||||
|
<span class="highlight">Alles für Ihre Website</span>
|
||||||
|
</h1>
|
||||||
|
<p class="product-hero-description">
|
||||||
|
Klassisches Webhosting mit allem, was Sie für eine erfolgreiche Website benötigen.
|
||||||
|
PHP, MySQL, SSL-Zertifikate und E-Mail-Postfächer - alles inklusive.
|
||||||
|
</p>
|
||||||
|
<div class="product-hero-features">
|
||||||
|
<div class="hero-feature">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<circle cx="12" cy="12" r="10"/>
|
||||||
|
<path d="M2 12h20"/>
|
||||||
|
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
|
||||||
|
</svg>
|
||||||
|
<span>Domain inklusive</span>
|
||||||
|
</div>
|
||||||
|
<div class="hero-feature">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
<span>SSL-Zertifikate</span>
|
||||||
|
</div>
|
||||||
|
<div class="hero-feature">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||||
|
<polyline points="22,6 12,13 2,6"/>
|
||||||
|
</svg>
|
||||||
|
<span>E-Mail inklusive</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Webhosting Packages -->
|
||||||
|
<section class="packages">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Webhosting Pakete</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Von der ersten Website bis zum professionellen Online-Shop
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="packages-grid">
|
||||||
|
<!-- Starter Package -->
|
||||||
|
<div class="package-card glass-card">
|
||||||
|
<div class="package-header">
|
||||||
|
<h3 class="package-name">Webhosting Starter</h3>
|
||||||
|
<div class="package-price">
|
||||||
|
<span class="price">1,99€</span>
|
||||||
|
<span class="period">/Monat</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-specs">
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Webspace:</span>
|
||||||
|
<span class="spec-value">5 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Domains:</span>
|
||||||
|
<span class="spec-value">1</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">E-Mail-Postfächer:</span>
|
||||||
|
<span class="spec-value">5</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Datenbanken:</span>
|
||||||
|
<span class="spec-value">1 MySQL</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Traffic:</span>
|
||||||
|
<span class="spec-value">10 GB</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-features">
|
||||||
|
<div class="feature">✓ cPanel/Webmin</div>
|
||||||
|
<div class="feature">✓ PHP 8.1</div>
|
||||||
|
<div class="feature">✓ SSL-Zertifikat</div>
|
||||||
|
<div class="feature">✓ E-Mail-Postfächer</div>
|
||||||
|
<div class="feature">✓ MySQL Datenbank</div>
|
||||||
|
</div>
|
||||||
|
<a href="contact.html?package=webhosting-starter" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Business Package -->
|
||||||
|
<div class="package-card glass-card featured">
|
||||||
|
<div class="featured-badge">Beliebt</div>
|
||||||
|
<div class="package-header">
|
||||||
|
<h3 class="package-name">Webhosting Business</h3>
|
||||||
|
<div class="package-price">
|
||||||
|
<span class="price">4,99€</span>
|
||||||
|
<span class="period">/Monat</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-specs">
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Webspace:</span>
|
||||||
|
<span class="spec-value">20 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Domains:</span>
|
||||||
|
<span class="spec-value">5</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">E-Mail-Postfächer:</span>
|
||||||
|
<span class="spec-value">25</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Datenbanken:</span>
|
||||||
|
<span class="spec-value">5 MySQL</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Traffic:</span>
|
||||||
|
<span class="spec-value">50 GB</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-features">
|
||||||
|
<div class="feature">✓ cPanel/Webmin</div>
|
||||||
|
<div class="feature">✓ PHP 8.1</div>
|
||||||
|
<div class="feature">✓ SSL-Zertifikat</div>
|
||||||
|
<div class="feature">✓ E-Mail-Postfächer</div>
|
||||||
|
<div class="feature">✓ MySQL Datenbanken</div>
|
||||||
|
<div class="feature">✓ Backup-Service</div>
|
||||||
|
</div>
|
||||||
|
<a href="contact.html?package=webhosting-business" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Professional Package -->
|
||||||
|
<div class="package-card glass-card">
|
||||||
|
<div class="package-header">
|
||||||
|
<h3 class="package-name">Webhosting Professional</h3>
|
||||||
|
<div class="package-price">
|
||||||
|
<span class="price">9,99€</span>
|
||||||
|
<span class="period">/Monat</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-specs">
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Webspace:</span>
|
||||||
|
<span class="spec-value">50 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Domains:</span>
|
||||||
|
<span class="spec-value">Unbegrenzt</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">E-Mail-Postfächer:</span>
|
||||||
|
<span class="spec-value">100</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Datenbanken:</span>
|
||||||
|
<span class="spec-value">Unbegrenzt</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Traffic:</span>
|
||||||
|
<span class="spec-value">200 GB</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-features">
|
||||||
|
<div class="feature">✓ cPanel/Webmin</div>
|
||||||
|
<div class="feature">✓ PHP 8.1</div>
|
||||||
|
<div class="feature">✓ SSL-Zertifikat</div>
|
||||||
|
<div class="feature">✓ E-Mail-Postfächer</div>
|
||||||
|
<div class="feature">✓ MySQL Datenbanken</div>
|
||||||
|
<div class="feature">✓ Backup-Service</div>
|
||||||
|
<div class="feature">✓ Priority Support</div>
|
||||||
|
</div>
|
||||||
|
<a href="contact.html?package=webhosting-professional" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Enterprise Package -->
|
||||||
|
<div class="package-card glass-card">
|
||||||
|
<div class="package-header">
|
||||||
|
<h3 class="package-name">Webhosting Enterprise</h3>
|
||||||
|
<div class="package-price">
|
||||||
|
<span class="price">19,99€</span>
|
||||||
|
<span class="period">/Monat</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-specs">
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Webspace:</span>
|
||||||
|
<span class="spec-value">100 GB</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Domains:</span>
|
||||||
|
<span class="spec-value">Unbegrenzt</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">E-Mail-Postfächer:</span>
|
||||||
|
<span class="spec-value">Unbegrenzt</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Datenbanken:</span>
|
||||||
|
<span class="spec-value">Unbegrenzt</span>
|
||||||
|
</div>
|
||||||
|
<div class="spec-item">
|
||||||
|
<span class="spec-label">Traffic:</span>
|
||||||
|
<span class="spec-value">500 GB</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="package-features">
|
||||||
|
<div class="feature">✓ cPanel/Webmin</div>
|
||||||
|
<div class="feature">✓ PHP 8.1</div>
|
||||||
|
<div class="feature">✓ SSL-Zertifikat</div>
|
||||||
|
<div class="feature">✓ E-Mail-Postfächer</div>
|
||||||
|
<div class="feature">✓ MySQL Datenbanken</div>
|
||||||
|
<div class="feature">✓ Backup-Service</div>
|
||||||
|
<div class="feature">✓ Priority Support</div>
|
||||||
|
<div class="feature">✓ Individuelle Konfiguration</div>
|
||||||
|
</div>
|
||||||
|
<a href="contact.html?package=webhosting-enterprise" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Technical Details -->
|
||||||
|
<section class="technical-details">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Technische Details</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Erfahren Sie mehr über unsere Webhosting-Technologie
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="details-grid">
|
||||||
|
<div class="detail-card glass-card">
|
||||||
|
<div class="detail-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
||||||
|
<polyline points="14,2 14,8 20,8"/>
|
||||||
|
<line x1="16" y1="13" x2="8" y2="13"/>
|
||||||
|
<line x1="16" y1="17" x2="8" y2="17"/>
|
||||||
|
<polyline points="10,9 9,9 8,9"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>cPanel/Webmin</h3>
|
||||||
|
<p>Benutzerfreundliche Verwaltungsoberfläche für einfache Website-Verwaltung und E-Mail-Konfiguration.</p>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card glass-card">
|
||||||
|
<div class="detail-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>SSL-Zertifikate</h3>
|
||||||
|
<p>Automatische SSL-Zertifikate für sichere HTTPS-Verbindungen und bessere Suchmaschinen-Rankings.</p>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card glass-card">
|
||||||
|
<div class="detail-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||||||
|
<polyline points="22,6 12,13 2,6"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>E-Mail-Hosting</h3>
|
||||||
|
<p>Professionelle E-Mail-Lösungen mit Spam-Schutz, Webmail und Mobile-Sync für alle Geräte.</p>
|
||||||
|
</div>
|
||||||
|
<div class="detail-card glass-card">
|
||||||
|
<div class="detail-icon">
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||||
|
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
|
||||||
|
<polyline points="7.5,4.21 12,6.81 16.5,4.21"/>
|
||||||
|
<polyline points="7.5,19.79 7.5,14.6 3,12"/>
|
||||||
|
<polyline points="21,12 16.5,14.6 16.5,19.79"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3>MySQL Datenbanken</h3>
|
||||||
|
<p>Zuverlässige MySQL-Datenbanken für dynamische Websites, Content Management Systeme und Online-Shops.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Use Cases -->
|
||||||
|
<section class="use-cases">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<h2 class="section-title">Anwendungsbereiche</h2>
|
||||||
|
<p class="section-description">
|
||||||
|
Perfekt geeignet für verschiedene Website-Typen
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="use-cases-grid">
|
||||||
|
<div class="use-case-item glass-card">
|
||||||
|
<h3>Private Websites</h3>
|
||||||
|
<p>Persönliche Websites, Blogs und Portfolios mit einfacher Verwaltung und zuverlässiger Performance.</p>
|
||||||
|
</div>
|
||||||
|
<div class="use-case-item glass-card">
|
||||||
|
<h3>Business Websites</h3>
|
||||||
|
<p>Professionelle Unternehmenswebsites mit E-Mail-Hosting und SSL-Zertifikaten für Vertrauen.</p>
|
||||||
|
</div>
|
||||||
|
<div class="use-case-item glass-card">
|
||||||
|
<h3>Online-Shops</h3>
|
||||||
|
<p>E-Commerce-Lösungen mit MySQL-Datenbanken für Produktverwaltung und Bestellabwicklung.</p>
|
||||||
|
</div>
|
||||||
|
<div class="use-case-item glass-card">
|
||||||
|
<h3>Content Management</h3>
|
||||||
|
<p>WordPress, Joomla und andere CMS-Systeme mit optimierter PHP-Umgebung und Datenbanken.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA Section -->
|
||||||
|
<section class="cta">
|
||||||
|
<div class="container">
|
||||||
|
<div class="cta-content glass-card">
|
||||||
|
<h2>Bereit für Ihr Webhosting?</h2>
|
||||||
|
<p>Starten Sie noch heute mit professionellem Webhosting</p>
|
||||||
|
<div class="cta-actions">
|
||||||
|
<a href="contact.html?product=webhosting" class="btn btn-primary">Jetzt bestellen</a>
|
||||||
|
<a href="contact.html" class="btn btn-secondary">Beratung anfordern</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
// Include footer
|
||||||
|
includeFooter();
|
||||||
|
?>
|
||||||
Reference in New Issue
Block a user