commit b89887106d9fec54c4f79fd6a71803a001731be5
Author: 𝓜𝓪𝓬𝓮™ <71522630+theoneandonlymace@users.noreply.github.com>
Date: Thu Apr 2 11:54:46 2026 +0200
Inital commit
diff --git a/BRANDING-GUIDE.md b/BRANDING-GUIDE.md
new file mode 100644
index 0000000..6512f9d
--- /dev/null
+++ b/BRANDING-GUIDE.md
@@ -0,0 +1,100 @@
+# HexaHost Branding Guide
+
+Dieser Guide basiert auf dem bestehenden Design aus `HexaHost-Frontend` und `HexaHost-Backend`.
+Nutze ihn als Standard für neue Projekte, damit Optik, Struktur und Tonalität konsistent bleiben.
+
+## 1) Markenidentität
+
+- Positionierung: Zuverlässiges Hosting mit persönlichem Support aus Deutschland.
+- Tonalität: Klar, direkt, professionell, vertrauensvoll.
+- Bildsprache: Modern, technisch, leicht futuristisch (Glassmorphism + Neon-Akzente).
+
+## 2) Farben
+
+Primäre Farben:
+
+- Hintergrund: `#0d0821`
+- Primary: `#ff51f9`
+- Accent Violet: `#a348ff`
+- Accent Blue: `#3978ff`
+- Highlight: `#f093ff`
+
+Weitere Farben:
+
+- Success: `#32fba2`
+- Warning: `#ffcc00`
+- Error: `#ff4d6d`
+- Text Primary: `#ffffff`
+- Text Secondary: `#cfc9dd`
+
+Designprinzip:
+
+- Dunkler Hintergrund + leuchtende Akzente.
+- Gradient-Buttons für wichtige CTAs.
+- Transparente Karten mit Blur für Tiefe.
+
+## 3) Typografie
+
+- Hauptschrift: `Inter` (Body, Navigation, UI)
+- Logo/Brand: `Russo One` (nur sparsam nutzen)
+- Sekundär: `Source Sans Pro` (optional für Slogans)
+
+Empfohlene Größen:
+
+- H1: `3rem`
+- H2: `2.25rem`
+- H3: `1.5rem`
+- Body: `1rem`
+- Small: `0.875rem`
+
+## 4) Layout und Spacing
+
+- Container-Breite: `1200px`
+- Standard-Abstand horizontal: `1.5rem`
+- Sektionen: `3rem` bis `4rem` vertikales Padding
+- Radius: `0.75rem` bis `1.5rem`
+
+## 5) Komponenten
+
+- Header: Fixiert mit Blur-Hintergrund.
+- Buttons:
+ - Primary: Pink/Violett-Gradient
+ - Secondary: Glas-Look mit Border
+- Cards: `.glass-card` mit Blur, Border und Shadow.
+- Footer: 3-4 Spalten mit Produkt-, Firmen- und Support-Links.
+
+## 6) Inhaltsstruktur (Seiten)
+
+Jede neue Marketing-Seite sollte diese Reihenfolge nutzen:
+
+1. Hero (Claim + CTA)
+2. Leistungs- oder Produktsektion
+3. Vorteilsektion
+4. Vertrauens-/Support-Sektion
+5. Abschließende CTA
+6. Footer
+
+## 7) Text- und CTA-Regeln
+
+- CTAs immer aktiv formulieren:
+ - "Jetzt starten"
+ - "Produkte entdecken"
+ - "Kontakt aufnehmen"
+- Pro Abschnitt ein klares Ziel.
+- Kurze, konkrete Nutzenargumente statt technischer Überladung.
+
+## 8) Technische Standards
+
+- Wiederverwendbare Includes für Header/Footer nutzen.
+- Styles zentral in `assets/css/style.css`.
+- JS nur für Interaktion (Navigation, Accordions, Form-Hinweise).
+- Performance: Preconnect für Fonts/CDN und CSS früh laden.
+
+## 9) Template-Nutzung
+
+Verwende den Ordner `HexaHost-Template-Website` als Startpunkt:
+
+- `public/index.php` als Basisseite
+- `includes/header.php` und `includes/footer.php` für einheitliches Layout
+- `assets/css/style.css` für Designsystem und Komponenten
+
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..abe4576
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,198 @@
+:root {
+ --background-color: #0d0821;
+ --primary-color: #ff51f9;
+ --accent-color-1: #a348ff;
+ --accent-color-2: #3978ff;
+ --highlight-color: #f093ff;
+ --text-primary: #ffffff;
+ --text-secondary: #cfc9dd;
+ --glass-bg: rgba(255, 255, 255, 0.05);
+ --glass-border: rgba(255, 255, 255, 0.12);
+ --radius-lg: 0.75rem;
+ --radius-xl: 1rem;
+ --space-1: 0.5rem;
+ --space-2: 1rem;
+ --space-3: 1.5rem;
+ --space-4: 2rem;
+ --space-5: 3rem;
+}
+
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+
+body {
+ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+ color: var(--text-primary);
+ background: linear-gradient(135deg, #0d0821 0%, #1a1230 100%);
+ line-height: 1.6;
+}
+
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 var(--space-3);
+}
+
+.header {
+ position: sticky;
+ top: 0;
+ z-index: 100;
+ backdrop-filter: blur(16px);
+ background: rgba(13, 8, 33, 0.6);
+ border-bottom: 1px solid var(--glass-border);
+}
+
+.nav-container {
+ min-height: 72px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.brand {
+ font-family: "Russo One", sans-serif;
+ color: var(--text-primary);
+ text-decoration: none;
+ letter-spacing: 0.04em;
+}
+
+.nav-menu {
+ list-style: none;
+ display: flex;
+ gap: var(--space-2);
+}
+
+.nav-link {
+ color: var(--text-primary);
+ text-decoration: none;
+ padding: 0.45rem 0.7rem;
+ border-radius: 0.5rem;
+}
+
+.nav-link:hover,
+.nav-link.active {
+ background: var(--glass-bg);
+}
+
+.hero {
+ padding: var(--space-5) 0;
+}
+
+.hero-grid {
+ display: grid;
+ grid-template-columns: 1.2fr 0.8fr;
+ gap: var(--space-4);
+ align-items: center;
+}
+
+h1 {
+ font-size: clamp(2rem, 4vw, 3rem);
+ line-height: 1.2;
+ margin-bottom: var(--space-2);
+}
+
+h2 {
+ font-size: clamp(1.6rem, 3vw, 2.2rem);
+ margin-bottom: var(--space-3);
+}
+
+h3 {
+ margin-bottom: var(--space-1);
+}
+
+p {
+ color: var(--text-secondary);
+}
+
+.hero-actions {
+ margin-top: var(--space-3);
+ display: flex;
+ gap: var(--space-2);
+ flex-wrap: wrap;
+}
+
+.btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ text-decoration: none;
+ border-radius: var(--radius-lg);
+ padding: 0.75rem 1.1rem;
+ font-weight: 600;
+ border: 1px solid transparent;
+}
+
+.btn-primary {
+ color: var(--text-primary);
+ background: linear-gradient(135deg, var(--primary-color), var(--accent-color-1));
+}
+
+.btn-secondary {
+ color: var(--text-primary);
+ background: var(--glass-bg);
+ border-color: var(--glass-border);
+}
+
+.glass-card {
+ background: var(--glass-bg);
+ border: 1px solid var(--glass-border);
+ border-radius: var(--radius-xl);
+ backdrop-filter: blur(10px);
+ box-shadow: 0 8px 32px rgba(255, 81, 249, 0.15);
+}
+
+.info-card {
+ padding: var(--space-4);
+}
+
+.section {
+ padding: var(--space-5) 0;
+}
+
+.cards {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: var(--space-3);
+}
+
+.card {
+ padding: var(--space-3);
+}
+
+.cta-box {
+ text-align: center;
+ padding: var(--space-4);
+}
+
+.footer {
+ border-top: 1px solid var(--glass-border);
+ background: rgba(0, 0, 0, 0.25);
+ padding: var(--space-4) 0;
+}
+
+.footer-grid {
+ display: grid;
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+ gap: var(--space-3);
+}
+
+.footer ul {
+ list-style: none;
+}
+
+.footer a {
+ color: var(--text-secondary);
+ text-decoration: none;
+}
+
+@media (max-width: 900px) {
+ .hero-grid,
+ .cards,
+ .footer-grid {
+ grid-template-columns: 1fr;
+ }
+}
+
diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..0dff412
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,20 @@
+document.addEventListener("DOMContentLoaded", () => {
+ const links = document.querySelectorAll('a[href^="#"]');
+ links.forEach((link) => {
+ link.addEventListener("click", (event) => {
+ const targetId = link.getAttribute("href");
+ if (!targetId || targetId === "#") {
+ return;
+ }
+
+ const target = document.querySelector(targetId);
+ if (!target) {
+ return;
+ }
+
+ event.preventDefault();
+ target.scrollIntoView({ behavior: "smooth", block: "start" });
+ });
+ });
+});
+
diff --git a/includes/footer.php b/includes/footer.php
new file mode 100644
index 0000000..442ae07
--- /dev/null
+++ b/includes/footer.php
@@ -0,0 +1,29 @@
+
+
+
+
+