feat: Statischer One-Pager für sonith.de
Kompletter Relaunch als statische Website: - index.html: One-Pager mit Hero, Leistungen, USPs, Team, Kontakt - impressum.html + datenschutz.html: Separate Unterseiten - TailwindCSS via CDN, Custom Styles, Scroll-Animationen - Mobile Menu, Scroll-Spy, Fade-in Animationen - Farbschema: Dunkel-modern mit Sonith-Gelb (#DEDC1B) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
commit
dc51be2da1
13
.gitignore
vendored
Normal file
13
.gitignore
vendored
Normal file
@ -0,0 +1,13 @@
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Editor
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
.vscode/
|
||||
.idea/
|
||||
|
||||
# Misc
|
||||
*.log
|
||||
56
CLAUDE.md
Normal file
56
CLAUDE.md
Normal file
@ -0,0 +1,56 @@
|
||||
# CLAUDE.md — sonith.de Website
|
||||
|
||||
> Projektspezifische Anweisungen für Claude Code.
|
||||
|
||||
## Projekt
|
||||
|
||||
**sonith.de** — Statischer One-Pager für die Sonith GmbH (MSP / Managed Service Provider).
|
||||
|
||||
- **Repository**: https://gitea.sonith.de/techadmin/sonith-website
|
||||
- **Stack**: Pures HTML + CSS + JS, TailwindCSS via CDN
|
||||
- **Deployment**: Statische Dateien auf eigenem Server (Nginx)
|
||||
|
||||
## Projektstruktur
|
||||
|
||||
```
|
||||
sonith-website/
|
||||
├── CLAUDE.md # Diese Datei
|
||||
├── index.html # One-Pager Hauptseite
|
||||
├── impressum.html # Impressum (separate Seite)
|
||||
├── datenschutz.html # Datenschutzerklärung (separate Seite)
|
||||
├── css/
|
||||
│ └── style.css # Custom Styles (Animationen, Feintuning)
|
||||
├── js/
|
||||
│ └── main.js # Mobile Menu, Smooth Scroll, Scroll-Spy
|
||||
├── img/
|
||||
│ ├── logo.png # Sonith Logo (wird später ersetzt)
|
||||
│ └── team/ # Team-Fotos (Platzhalter SVGs)
|
||||
├── .gitignore
|
||||
└── README.md
|
||||
```
|
||||
|
||||
## Farbschema
|
||||
|
||||
- **Primär/Akzent**: #DEDC1B (Sonith Gelb-Grün)
|
||||
- **Dunkel**: #0f172a / #1e293b (Hintergründe)
|
||||
- **Text hell**: #f1f5f9
|
||||
- **Text dunkel**: #1e293b
|
||||
- **Grau**: #64748b (Subtexte)
|
||||
|
||||
Grundstimmung: Dunkel-modern mit Sonith-Gelb als Akzent.
|
||||
|
||||
## Konventionen
|
||||
|
||||
- Keine Build-Tools, kein Node.js — alles statisch
|
||||
- TailwindCSS ausschließlich via CDN
|
||||
- Inhalte auf Deutsch
|
||||
- SVG-Icons inline im HTML
|
||||
- Responsive, Mobile-first
|
||||
|
||||
## Deployment
|
||||
|
||||
Statische Dateien direkt auf Nginx ausliefern. Kein Build-Step notwendig.
|
||||
|
||||
---
|
||||
|
||||
*Zuletzt aktualisiert: März 2026 — v1.0.0*
|
||||
40
README.md
Normal file
40
README.md
Normal file
@ -0,0 +1,40 @@
|
||||
# sonith.de — Website
|
||||
|
||||
Statischer One-Pager für [sonith.de](https://sonith.de).
|
||||
|
||||
## Stack
|
||||
|
||||
- HTML + CSS + JavaScript
|
||||
- TailwindCSS (CDN)
|
||||
- Kein Build-Step notwendig
|
||||
|
||||
## Lokal testen
|
||||
|
||||
`index.html` im Browser öffnen — fertig.
|
||||
|
||||
Oder mit einem lokalen Server:
|
||||
|
||||
```bash
|
||||
python3 -m http.server 8080
|
||||
```
|
||||
|
||||
Dann [http://localhost:8080](http://localhost:8080) aufrufen.
|
||||
|
||||
## Deployment
|
||||
|
||||
Statische Dateien auf den Webserver kopieren (Nginx/Apache).
|
||||
|
||||
## Struktur
|
||||
|
||||
| Datei | Beschreibung |
|
||||
|---|---|
|
||||
| `index.html` | Hauptseite (One-Pager) |
|
||||
| `impressum.html` | Impressum |
|
||||
| `datenschutz.html` | Datenschutzerklärung |
|
||||
| `css/style.css` | Custom Styles |
|
||||
| `js/main.js` | Mobile Menu, Scroll-Spy, Animationen |
|
||||
| `img/` | Bilder und Platzhalter |
|
||||
|
||||
## Lizenz
|
||||
|
||||
Proprietär — sonith UG (haftungsbeschränkt)
|
||||
125
css/style.css
Normal file
125
css/style.css
Normal file
@ -0,0 +1,125 @@
|
||||
/* ============================================================
|
||||
sonith.de — Custom Styles
|
||||
============================================================ */
|
||||
|
||||
/* Smooth scrolling offset for fixed nav */
|
||||
html {
|
||||
scroll-padding-top: 5rem;
|
||||
}
|
||||
|
||||
/* ---- Navbar ---- */
|
||||
#navbar {
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
#navbar.scrolled {
|
||||
background: rgba(15, 23, 42, 0.95);
|
||||
box-shadow: 0 1px 0 rgba(100, 116, 139, 0.1);
|
||||
}
|
||||
|
||||
/* Active nav link */
|
||||
.nav-link.active {
|
||||
color: #DEDC1B;
|
||||
}
|
||||
|
||||
/* ---- Fade-in Animation ---- */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
|
||||
}
|
||||
|
||||
.fade-in.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Staggered children */
|
||||
.fade-in:nth-child(2) { transition-delay: 0.1s; }
|
||||
.fade-in:nth-child(3) { transition-delay: 0.2s; }
|
||||
.fade-in:nth-child(4) { transition-delay: 0.3s; }
|
||||
|
||||
/* ---- Service Cards ---- */
|
||||
.service-card {
|
||||
opacity: 0;
|
||||
transform: translateY(24px);
|
||||
transition: opacity 0.5s ease-out, transform 0.5s ease-out,
|
||||
border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.service-card.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.service-card:nth-child(1) { transition-delay: 0.0s; }
|
||||
.service-card:nth-child(2) { transition-delay: 0.08s; }
|
||||
.service-card:nth-child(3) { transition-delay: 0.16s; }
|
||||
.service-card:nth-child(4) { transition-delay: 0.24s; }
|
||||
.service-card:nth-child(5) { transition-delay: 0.32s; }
|
||||
.service-card:nth-child(6) { transition-delay: 0.40s; }
|
||||
|
||||
.service-card:hover {
|
||||
box-shadow: 0 0 24px rgba(222, 220, 27, 0.06);
|
||||
}
|
||||
|
||||
/* ---- USP Cards ---- */
|
||||
.usp-card {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.usp-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* ---- Team Cards ---- */
|
||||
.team-card {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.team-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* ---- Contact Cards ---- */
|
||||
.contact-card {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-card:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* ---- Selection Color ---- */
|
||||
::selection {
|
||||
background: rgba(222, 220, 27, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ---- Scrollbar ---- */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: #0f172a;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: #334155;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: #475569;
|
||||
}
|
||||
|
||||
/* ---- Focus Styles ---- */
|
||||
a:focus-visible,
|
||||
button:focus-visible {
|
||||
outline: 2px solid #DEDC1B;
|
||||
outline-offset: 2px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
183
datenschutz.html
Normal file
183
datenschutz.html
Normal file
@ -0,0 +1,183 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Datenschutz — sonith</title>
|
||||
<meta name="robots" content="noindex">
|
||||
<link rel="icon" type="image/png" href="img/logo.png">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'sonith': { DEFAULT: '#DEDC1B', dark: '#c5c318', light: '#e8e64d' },
|
||||
'dark': { DEFAULT: '#0f172a', light: '#1e293b', lighter: '#334155' },
|
||||
},
|
||||
fontFamily: { sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'] },
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<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@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body class="bg-dark text-slate-200 font-sans antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 bg-dark/95 backdrop-blur-md border-b border-slate-700/50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16 lg:h-20">
|
||||
<a href="index.html" class="flex items-center gap-3">
|
||||
<span class="text-2xl font-extrabold text-white">son<span class="text-sonith">i</span>th</span>
|
||||
</a>
|
||||
<a href="index.html" class="text-sm font-medium text-slate-300 hover:text-sonith transition-colors">← Zurück zur Startseite</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Content -->
|
||||
<main class="pt-32 pb-24">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-3xl sm:text-4xl font-extrabold text-white mb-8">Datenschutzerklärung</h1>
|
||||
|
||||
<div class="space-y-6 text-slate-300 leading-relaxed">
|
||||
|
||||
<h2 class="text-xl font-bold text-white mt-8">1. Datenschutz auf einen Blick</h2>
|
||||
|
||||
<h3 class="text-lg font-semibold text-white mt-6">Allgemeine Hinweise</h3>
|
||||
<p>
|
||||
Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.
|
||||
</p>
|
||||
|
||||
<h3 class="text-lg font-semibold text-white mt-6">Datenerfassung auf dieser Website</h3>
|
||||
<p>
|
||||
<strong class="text-white">Wer ist verantwortlich für die Datenerfassung auf dieser Website?</strong><br>
|
||||
Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem Abschnitt „Hinweis zur verantwortlichen Stelle" in dieser Datenschutzerklärung entnehmen.
|
||||
</p>
|
||||
<p>
|
||||
<strong class="text-white">Wie erfassen wir Ihre Daten?</strong><br>
|
||||
Ihre Daten werden zum einen dadurch erhoben, dass Sie uns diese mitteilen (z. B. per E-Mail oder Telefon). Andere Daten werden automatisch oder nach Ihrer Einwilligung beim Besuch der Website durch unsere IT-Systeme erfasst. Das sind vor allem technische Daten (z. B. Internetbrowser, Betriebssystem oder Uhrzeit des Seitenaufrufs).
|
||||
</p>
|
||||
<p>
|
||||
<strong class="text-white">Wofür nutzen wir Ihre Daten?</strong><br>
|
||||
Die Daten werden erhoben, um eine fehlerfreie Bereitstellung der Website zu gewährleisten.
|
||||
</p>
|
||||
<p>
|
||||
<strong class="text-white">Welche Rechte haben Sie bezüglich Ihrer Daten?</strong><br>
|
||||
Sie haben jederzeit das Recht, unentgeltlich Auskunft über Herkunft, Empfänger und Zweck Ihrer gespeicherten personenbezogenen Daten zu erhalten. Sie haben außerdem ein Recht, die Berichtigung oder Löschung dieser Daten zu verlangen. Wenn Sie eine Einwilligung zur Datenverarbeitung erteilt haben, können Sie diese jederzeit für die Zukunft widerrufen. Hierzu sowie zu weiteren Fragen zum Thema Datenschutz können Sie sich jederzeit an uns wenden.
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-bold text-white mt-8">2. Hosting</h2>
|
||||
<p>
|
||||
Wir hosten die Inhalte unserer Website auf eigenen Servern in Deutschland. Beim Besuch unserer Website erfasst der Webserver automatisch Logdateien (Server-Logfiles). Diese enthalten:
|
||||
</p>
|
||||
<ul class="list-disc list-inside space-y-1 ml-4">
|
||||
<li>Browsertyp und Browserversion</li>
|
||||
<li>Verwendetes Betriebssystem</li>
|
||||
<li>Referrer URL</li>
|
||||
<li>Hostname des zugreifenden Rechners</li>
|
||||
<li>Uhrzeit der Serveranfrage</li>
|
||||
<li>IP-Adresse</li>
|
||||
</ul>
|
||||
<p>
|
||||
Diese Daten werden nicht mit anderen Datenquellen zusammengeführt. Die Erfassung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO.
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-bold text-white mt-8">3. Allgemeine Hinweise und Pflichtinformationen</h2>
|
||||
|
||||
<h3 class="text-lg font-semibold text-white mt-6">Datenschutz</h3>
|
||||
<p>
|
||||
Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend den gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
|
||||
</p>
|
||||
|
||||
<h3 class="text-lg font-semibold text-white mt-6">Hinweis zur verantwortlichen Stelle</h3>
|
||||
<p>
|
||||
Die verantwortliche Stelle für die Datenverarbeitung auf dieser Website ist:
|
||||
</p>
|
||||
<p>
|
||||
sonith UG (haftungsbeschränkt)<br>
|
||||
Kleinheubacher Str. 7<br>
|
||||
63924 Rüdenau<br><br>
|
||||
Telefon: 0931 30 69 90 90<br>
|
||||
E-Mail: <a href="mailto:mail@sonith.de" class="text-sonith hover:underline">mail@sonith.de</a>
|
||||
</p>
|
||||
|
||||
<h3 class="text-lg font-semibold text-white mt-6">Speicherdauer</h3>
|
||||
<p>
|
||||
Soweit innerhalb dieser Datenschutzerklärung keine speziellere Speicherdauer genannt wurde, verbleiben Ihre personenbezogenen Daten bei uns, bis der Zweck für die Datenverarbeitung entfällt. Wenn Sie ein berechtigtes Löschersuchen geltend machen oder eine Einwilligung zur Datenverarbeitung widerrufen, werden Ihre Daten gelöscht, sofern wir keine anderen rechtlich zulässigen Gründe für die Speicherung Ihrer personenbezogenen Daten haben.
|
||||
</p>
|
||||
|
||||
<h3 class="text-lg font-semibold text-white mt-6">Widerruf Ihrer Einwilligung zur Datenverarbeitung</h3>
|
||||
<p>
|
||||
Viele Datenverarbeitungsvorgänge sind nur mit Ihrer ausdrücklichen Einwilligung möglich. Sie können eine bereits erteilte Einwilligung jederzeit widerrufen. Die Rechtmäßigkeit der bis zum Widerruf erfolgten Datenverarbeitung bleibt vom Widerruf unberührt.
|
||||
</p>
|
||||
|
||||
<h3 class="text-lg font-semibold text-white mt-6">Beschwerderecht bei der zuständigen Aufsichtsbehörde</h3>
|
||||
<p>
|
||||
Im Falle von Verstößen gegen die DSGVO steht den Betroffenen ein Beschwerderecht bei einer Aufsichtsbehörde zu. Die zuständige Aufsichtsbehörde ist:<br><br>
|
||||
Bayerisches Landesamt für Datenschutzaufsicht (BayLDA)<br>
|
||||
Promenade 18<br>
|
||||
91522 Ansbach
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-bold text-white mt-8">4. Datenerfassung auf dieser Website</h2>
|
||||
|
||||
<h3 class="text-lg font-semibold text-white mt-6">Server-Log-Dateien</h3>
|
||||
<p>
|
||||
Der Provider der Seiten erhebt und speichert automatisch Informationen in sogenannten Server-Log-Dateien, die Ihr Browser automatisch an uns übermittelt (siehe Abschnitt „Hosting").
|
||||
</p>
|
||||
<p>
|
||||
Eine Zusammenführung dieser Daten mit anderen Datenquellen wird nicht vorgenommen.
|
||||
</p>
|
||||
|
||||
<h3 class="text-lg font-semibold text-white mt-6">Anfrage per E-Mail oder Telefon</h3>
|
||||
<p>
|
||||
Wenn Sie uns per E-Mail oder Telefon kontaktieren, wird Ihre Anfrage inklusive aller daraus hervorgehenden personenbezogenen Daten (Name, Anfrage) zum Zwecke der Bearbeitung Ihres Anliegens bei uns gespeichert und verarbeitet. Diese Daten geben wir nicht ohne Ihre Einwilligung weiter.
|
||||
</p>
|
||||
<p>
|
||||
Die Verarbeitung dieser Daten erfolgt auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO, sofern Ihre Anfrage mit der Erfüllung eines Vertrags zusammenhängt oder zur Durchführung vorvertraglicher Maßnahmen erforderlich ist. In allen übrigen Fällen beruht die Verarbeitung auf unserem berechtigten Interesse an der effektiven Bearbeitung der an uns gerichteten Anfragen (Art. 6 Abs. 1 lit. f DSGVO).
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-bold text-white mt-8">5. Externe Dienste</h2>
|
||||
|
||||
<h3 class="text-lg font-semibold text-white mt-6">Google Fonts (CDN)</h3>
|
||||
<p>
|
||||
Diese Seite nutzt zur einheitlichen Darstellung von Schriftarten sogenannte Google Fonts, die von Google bereitgestellt werden. Beim Aufruf einer Seite lädt Ihr Browser die benötigten Fonts in Ihren Browsercache, um Texte und Schriftarten korrekt anzuzeigen. Zu diesem Zweck muss der von Ihnen verwendete Browser Verbindung zu den Servern von Google aufnehmen. Hierdurch erlangt Google Kenntnis darüber, dass über Ihre IP-Adresse diese Website aufgerufen wurde.
|
||||
</p>
|
||||
<p>
|
||||
Die Nutzung von Google Fonts erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO. Weitere Informationen zu Google Fonts finden Sie unter
|
||||
<a href="https://developers.google.com/fonts/faq" target="_blank" rel="noopener" class="text-sonith hover:underline">https://developers.google.com/fonts/faq</a>
|
||||
und in der Datenschutzerklärung von Google:
|
||||
<a href="https://policies.google.com/privacy" target="_blank" rel="noopener" class="text-sonith hover:underline">https://policies.google.com/privacy</a>.
|
||||
</p>
|
||||
|
||||
<h3 class="text-lg font-semibold text-white mt-6">Tailwind CSS (CDN)</h3>
|
||||
<p>
|
||||
Diese Website nutzt das CSS-Framework Tailwind CSS, das über ein Content Delivery Network (CDN) eingebunden wird. Beim Aufruf unserer Seite wird eine Verbindung zu den Servern des CDN-Anbieters hergestellt. Dabei wird Ihre IP-Adresse an den CDN-Anbieter übermittelt. Dies erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO.
|
||||
</p>
|
||||
|
||||
<p class="text-slate-500 text-sm mt-12 pt-8 border-t border-slate-700/50">
|
||||
Stand: März 2026
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-8 bg-dark-light border-t border-slate-700/50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<p class="text-slate-500 text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="impressum.html" class="text-slate-500 text-sm hover:text-sonith transition-colors">Impressum</a>
|
||||
<a href="datenschutz.html" class="text-sonith text-sm">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
5
img/team/placeholder-1.svg
Normal file
5
img/team/placeholder-1.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="#334155"/>
|
||||
<circle cx="128" cy="100" r="40" fill="#475569"/>
|
||||
<ellipse cx="128" cy="210" rx="65" ry="50" fill="#475569"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
5
img/team/placeholder-2.svg
Normal file
5
img/team/placeholder-2.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="#334155"/>
|
||||
<circle cx="128" cy="100" r="40" fill="#475569"/>
|
||||
<ellipse cx="128" cy="210" rx="65" ry="50" fill="#475569"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
5
img/team/placeholder-3.svg
Normal file
5
img/team/placeholder-3.svg
Normal file
@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256">
|
||||
<rect width="256" height="256" fill="#334155"/>
|
||||
<circle cx="128" cy="100" r="40" fill="#475569"/>
|
||||
<ellipse cx="128" cy="210" rx="65" ry="50" fill="#475569"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 259 B |
112
impressum.html
Normal file
112
impressum.html
Normal file
@ -0,0 +1,112 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Impressum — sonith</title>
|
||||
<meta name="robots" content="noindex">
|
||||
<link rel="icon" type="image/png" href="img/logo.png">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'sonith': { DEFAULT: '#DEDC1B', dark: '#c5c318', light: '#e8e64d' },
|
||||
'dark': { DEFAULT: '#0f172a', light: '#1e293b', lighter: '#334155' },
|
||||
},
|
||||
fontFamily: { sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'] },
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<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@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body class="bg-dark text-slate-200 font-sans antialiased">
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="fixed top-0 left-0 right-0 z-50 bg-dark/95 backdrop-blur-md border-b border-slate-700/50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16 lg:h-20">
|
||||
<a href="index.html" class="flex items-center gap-3">
|
||||
<span class="text-2xl font-extrabold text-white">son<span class="text-sonith">i</span>th</span>
|
||||
</a>
|
||||
<a href="index.html" class="text-sm font-medium text-slate-300 hover:text-sonith transition-colors">← Zurück zur Startseite</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Content -->
|
||||
<main class="pt-32 pb-24">
|
||||
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<h1 class="text-3xl sm:text-4xl font-extrabold text-white mb-8">Impressum</h1>
|
||||
|
||||
<div class="prose prose-invert prose-slate max-w-none space-y-6 text-slate-300 leading-relaxed">
|
||||
<h2 class="text-xl font-bold text-white mt-8">Angaben gemäß § 5 TMG</h2>
|
||||
<p>
|
||||
sonith UG (haftungsbeschränkt)<br>
|
||||
Kleinheubacher Str. 7<br>
|
||||
63924 Rüdenau
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-bold text-white mt-8">Vertreten durch</h2>
|
||||
<p>
|
||||
<!-- Name des Geschäftsführers hier eintragen -->
|
||||
Geschäftsführer: [Name eintragen]
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-bold text-white mt-8">Kontakt</h2>
|
||||
<p>
|
||||
Telefon: 0931 30 69 90 90<br>
|
||||
E-Mail: <a href="mailto:mail@sonith.de" class="text-sonith hover:underline">mail@sonith.de</a>
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-bold text-white mt-8">Registereintrag</h2>
|
||||
<p>
|
||||
Eintragung im Handelsregister.<br>
|
||||
Registergericht: [Amtsgericht eintragen]<br>
|
||||
Registernummer: [HRB-Nummer eintragen]
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-bold text-white mt-8">Umsatzsteuer-ID</h2>
|
||||
<p>
|
||||
Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br>
|
||||
[USt-IdNr. eintragen]
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-bold text-white mt-8">Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h2>
|
||||
<p>
|
||||
[Name eintragen]<br>
|
||||
Kleinheubacher Str. 7<br>
|
||||
63924 Rüdenau
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-bold text-white mt-8">Streitschlichtung</h2>
|
||||
<p>
|
||||
Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit:
|
||||
<a href="https://ec.europa.eu/consumers/odr/" target="_blank" rel="noopener" class="text-sonith hover:underline">https://ec.europa.eu/consumers/odr/</a>.
|
||||
</p>
|
||||
<p>
|
||||
Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="py-8 bg-dark-light border-t border-slate-700/50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<p class="text-slate-500 text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="impressum.html" class="text-sonith text-sm">Impressum</a>
|
||||
<a href="datenschutz.html" class="text-slate-500 text-sm hover:text-sonith transition-colors">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
416
index.html
Normal file
416
index.html
Normal file
@ -0,0 +1,416 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de" class="scroll-smooth">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>sonith — IT-Lösungen. Sicher verwaltet.</title>
|
||||
<meta name="description" content="Sonith ist Ihr Managed Service Provider aus Rüdenau — proaktive IT-Betreuung, eigenes Rechenzentrum, persönlicher Ansprechpartner.">
|
||||
<meta name="keywords" content="MSP, Managed Service Provider, IT-Dienstleister, Managed Backup, Hosting, Nextcloud, Netzwerk, ERP, Rüdenau, Unterfranken">
|
||||
<meta name="author" content="sonith UG (haftungsbeschränkt)">
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="sonith — IT-Lösungen. Sicher verwaltet.">
|
||||
<meta property="og:description" content="Ihr Managed Service Provider — proaktive IT-Betreuung, eigenes Rechenzentrum, persönlicher Ansprechpartner.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://sonith.de">
|
||||
<meta property="og:locale" content="de_DE">
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" href="img/logo.png">
|
||||
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
'sonith': {
|
||||
DEFAULT: '#DEDC1B',
|
||||
dark: '#c5c318',
|
||||
light: '#e8e64d',
|
||||
},
|
||||
'dark': {
|
||||
DEFAULT: '#0f172a',
|
||||
light: '#1e293b',
|
||||
lighter: '#334155',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Inter Font -->
|
||||
<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@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Custom Styles -->
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
</head>
|
||||
<body class="bg-dark text-slate-200 font-sans antialiased">
|
||||
|
||||
<!-- ============================================================
|
||||
NAVIGATION
|
||||
============================================================ -->
|
||||
<nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16 lg:h-20">
|
||||
<!-- Logo -->
|
||||
<a href="#hero" class="flex items-center gap-3 shrink-0">
|
||||
<span class="text-2xl font-extrabold text-white">son<span class="text-sonith">i</span>th</span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Menu -->
|
||||
<div class="hidden lg:flex items-center gap-8">
|
||||
<a href="#leistungen" class="nav-link text-sm font-medium text-slate-300 hover:text-sonith transition-colors">Leistungen</a>
|
||||
<a href="#warum-sonith" class="nav-link text-sm font-medium text-slate-300 hover:text-sonith transition-colors">Warum sonith</a>
|
||||
<a href="#team" class="nav-link text-sm font-medium text-slate-300 hover:text-sonith transition-colors">Team</a>
|
||||
<a href="#kontakt" class="nav-link text-sm font-medium text-slate-300 hover:text-sonith transition-colors">Kontakt</a>
|
||||
<a href="https://helpdesk.sonith.de" target="_blank" rel="noopener"
|
||||
class="inline-flex items-center gap-2 px-5 py-2.5 bg-sonith text-dark font-semibold text-sm rounded-lg hover:bg-sonith-light transition-colors">
|
||||
<!-- External Link Icon -->
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
|
||||
</svg>
|
||||
Helpdesk
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<button id="mobile-menu-btn" class="lg:hidden p-2 text-slate-300 hover:text-white" aria-label="Menü öffnen">
|
||||
<svg id="menu-icon-open" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"/>
|
||||
</svg>
|
||||
<svg id="menu-icon-close" class="w-6 h-6 hidden" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div id="mobile-menu" class="lg:hidden hidden bg-dark-light/95 backdrop-blur-md border-t border-slate-700/50">
|
||||
<div class="px-4 py-4 space-y-1">
|
||||
<a href="#leistungen" class="mobile-nav-link block px-4 py-3 text-slate-300 hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Leistungen</a>
|
||||
<a href="#warum-sonith" class="mobile-nav-link block px-4 py-3 text-slate-300 hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Warum sonith</a>
|
||||
<a href="#team" class="mobile-nav-link block px-4 py-3 text-slate-300 hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Team</a>
|
||||
<a href="#kontakt" class="mobile-nav-link block px-4 py-3 text-slate-300 hover:text-sonith hover:bg-dark/50 rounded-lg transition-colors">Kontakt</a>
|
||||
<a href="https://helpdesk.sonith.de" target="_blank" rel="noopener"
|
||||
class="block px-4 py-3 text-sonith font-semibold hover:bg-dark/50 rounded-lg transition-colors">Helpdesk</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- ============================================================
|
||||
HERO
|
||||
============================================================ -->
|
||||
<section id="hero" class="relative min-h-screen flex items-center overflow-hidden">
|
||||
<!-- Background Pattern -->
|
||||
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_rgba(222,220,27,0.08)_0%,_transparent_60%)]"></div>
|
||||
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_rgba(222,220,27,0.04)_0%,_transparent_50%)]"></div>
|
||||
|
||||
<!-- Grid Pattern Overlay -->
|
||||
<div class="absolute inset-0 opacity-[0.03]" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
|
||||
|
||||
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-32">
|
||||
<div class="max-w-3xl">
|
||||
<div class="fade-in">
|
||||
<p class="text-sonith font-semibold text-sm tracking-widest uppercase mb-4">Managed Service Provider</p>
|
||||
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white leading-tight">
|
||||
IT-Lösungen.<br>
|
||||
<span class="text-sonith">Sicher verwaltet.</span>
|
||||
</h1>
|
||||
<p class="mt-6 text-lg sm:text-xl text-slate-400 leading-relaxed max-w-2xl">
|
||||
Wir sind Ihr Managed Service Provider — proaktive IT-Betreuung, eigene Infrastruktur, persönlicher Ansprechpartner.
|
||||
</p>
|
||||
<div class="mt-10 flex flex-col sm:flex-row gap-4">
|
||||
<a href="#kontakt"
|
||||
class="inline-flex items-center justify-center px-8 py-4 bg-sonith text-dark font-bold rounded-lg hover:bg-sonith-light transition-all hover:shadow-lg hover:shadow-sonith/20 text-center">
|
||||
Kontakt aufnehmen
|
||||
</a>
|
||||
<a href="https://helpdesk.sonith.de" target="_blank" rel="noopener"
|
||||
class="inline-flex items-center justify-center gap-2 px-8 py-4 border-2 border-slate-600 text-slate-200 font-semibold rounded-lg hover:border-sonith hover:text-sonith transition-all text-center">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"/>
|
||||
</svg>
|
||||
Zum Helpdesk
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scroll Indicator -->
|
||||
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
|
||||
<svg class="w-6 h-6 text-slate-500" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================================
|
||||
LEISTUNGEN
|
||||
============================================================ -->
|
||||
<section id="leistungen" class="py-24 lg:py-32 bg-dark-light">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center max-w-3xl mx-auto mb-16 fade-in">
|
||||
<p class="text-sonith font-semibold text-sm tracking-widest uppercase mb-3">Was wir tun</p>
|
||||
<h2 class="text-3xl sm:text-4xl font-extrabold text-white">Unsere Leistungen</h2>
|
||||
<p class="mt-4 text-slate-400 text-lg">IT-Infrastruktur aus einer Hand — von der Planung bis zum laufenden Betrieb.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8">
|
||||
<!-- Managed Services -->
|
||||
<div class="service-card group bg-dark rounded-xl p-8 border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
|
||||
<div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
|
||||
<svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">Managed Services</h3>
|
||||
<p class="text-slate-400 leading-relaxed">Proaktive IT-Betreuung: Monitoring, Patch-Management, Wartung — bevor Probleme entstehen.</p>
|
||||
</div>
|
||||
|
||||
<!-- Managed Backup -->
|
||||
<div class="service-card group bg-dark rounded-xl p-8 border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
|
||||
<div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
|
||||
<svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">Managed Backup</h3>
|
||||
<p class="text-slate-400 leading-relaxed">Automatische Datensicherung in unser eigenes Rechenzentrum. Backup as a Service — DSGVO-konform, in Deutschland gehostet.</p>
|
||||
</div>
|
||||
|
||||
<!-- Hosting -->
|
||||
<div class="service-card group bg-dark rounded-xl p-8 border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
|
||||
<div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
|
||||
<svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 01-3-3m3 3a3 3 0 100 6h13.5a3 3 0 100-6m-16.5-3a3 3 0 013-3h13.5a3 3 0 013 3m-19.5 0a4.5 4.5 0 01.9-2.7L5.737 5.1a3.375 3.375 0 012.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 01.9 2.7m0 0a3 3 0 01-3 3m0 3h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008zm-3 6h.008v.008h-.008v-.008zm0-6h.008v.008h-.008v-.008z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">Hosting</h3>
|
||||
<p class="text-slate-400 leading-relaxed">Webhosting, E-Mail und Applikationen auf unserer eigenen Infrastruktur. Persönlicher Support statt Ticket-Warteschlange.</p>
|
||||
</div>
|
||||
|
||||
<!-- Nextcloud -->
|
||||
<div class="service-card group bg-dark rounded-xl p-8 border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
|
||||
<div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
|
||||
<svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 004.5 4.5H18a3.75 3.75 0 001.332-7.257 3 3 0 00-3.758-3.848 5.25 5.25 0 00-10.233 2.33A4.502 4.502 0 002.25 15z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">Nextcloud</h3>
|
||||
<p class="text-slate-400 leading-relaxed">Ihre private Cloud — Dateien, Kalender, Kontakte. Von uns gehostet und gewartet. Die sichere Alternative zu US-Cloud-Diensten.</p>
|
||||
</div>
|
||||
|
||||
<!-- Netzwerk & Infrastruktur -->
|
||||
<div class="service-card group bg-dark rounded-xl p-8 border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
|
||||
<div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
|
||||
<svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.288 15.038a5.25 5.25 0 017.424 0M5.106 11.856c3.807-3.808 9.98-3.808 13.788 0M1.924 8.674c5.565-5.565 14.587-5.565 20.152 0M12.53 18.22l-.53.53-.53-.53a.75.75 0 011.06 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">Netzwerk & Infrastruktur</h3>
|
||||
<p class="text-slate-400 leading-relaxed">Von der Bürovernetzung bis zur standortübergreifenden Infrastruktur. VPN, Firewall, WLAN — sicher und maßgeschneidert.</p>
|
||||
</div>
|
||||
|
||||
<!-- ERP-Systeme -->
|
||||
<div class="service-card group bg-dark rounded-xl p-8 border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
|
||||
<div class="w-12 h-12 rounded-lg bg-sonith/10 flex items-center justify-center mb-6 group-hover:bg-sonith/20 transition-colors">
|
||||
<svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-white mb-3">ERP-Systeme</h3>
|
||||
<p class="text-slate-400 leading-relaxed">Einführung und Betreuung von Open-Source-ERP. Kaufmännische Prozesse digitalisiert und integriert.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================================
|
||||
WARUM SONITH
|
||||
============================================================ -->
|
||||
<section id="warum-sonith" class="py-24 lg:py-32 bg-dark">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center max-w-3xl mx-auto mb-16 fade-in">
|
||||
<p class="text-sonith font-semibold text-sm tracking-widest uppercase mb-3">Unsere Stärken</p>
|
||||
<h2 class="text-3xl sm:text-4xl font-extrabold text-white">Warum sonith?</h2>
|
||||
<p class="mt-4 text-slate-400 text-lg">Was uns von anderen IT-Dienstleistern unterscheidet.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<!-- Eigenes Rechenzentrum -->
|
||||
<div class="usp-card text-center fade-in">
|
||||
<div class="w-16 h-16 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-5">
|
||||
<svg class="w-8 h-8 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white mb-2">Eigenes Rechenzentrum</h3>
|
||||
<p class="text-slate-400 text-sm leading-relaxed">Ihre Daten bleiben in Deutschland, auf unserer Hardware.</p>
|
||||
</div>
|
||||
|
||||
<!-- Proaktiv -->
|
||||
<div class="usp-card text-center fade-in">
|
||||
<div class="w-16 h-16 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-5">
|
||||
<svg class="w-8 h-8 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white mb-2">Proaktiv statt reaktiv</h3>
|
||||
<p class="text-slate-400 text-sm leading-relaxed">Wir beheben Probleme, bevor Sie sie bemerken.</p>
|
||||
</div>
|
||||
|
||||
<!-- Persönlich -->
|
||||
<div class="usp-card text-center fade-in">
|
||||
<div class="w-16 h-16 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-5">
|
||||
<svg class="w-8 h-8 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white mb-2">Persönlicher Ansprechpartner</h3>
|
||||
<p class="text-slate-400 text-sm leading-relaxed">Kein Callcenter. Sie erreichen uns direkt.</p>
|
||||
</div>
|
||||
|
||||
<!-- Sicherheit -->
|
||||
<div class="usp-card text-center fade-in">
|
||||
<div class="w-16 h-16 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-5">
|
||||
<svg class="w-8 h-8 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white mb-2">Sicherheit als Standard</h3>
|
||||
<p class="text-slate-400 text-sm leading-relaxed">Verschlüsselung, Backups, VPN — bei uns selbstverständlich.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================================
|
||||
TEAM
|
||||
============================================================ -->
|
||||
<section id="team" class="py-24 lg:py-32 bg-dark-light">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center max-w-3xl mx-auto mb-16 fade-in">
|
||||
<p class="text-sonith font-semibold text-sm tracking-widest uppercase mb-3">Wer wir sind</p>
|
||||
<h2 class="text-3xl sm:text-4xl font-extrabold text-white">Unser Team</h2>
|
||||
<p class="mt-4 text-slate-400 text-lg">Kurze Wege, direkte Kommunikation — bei uns kennen Sie Ihren Ansprechpartner.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid sm:grid-cols-3 gap-8 max-w-4xl mx-auto">
|
||||
<!-- Team Member 1 -->
|
||||
<div class="team-card text-center fade-in">
|
||||
<div class="w-32 h-32 rounded-full bg-dark-lighter mx-auto mb-5 overflow-hidden border-2 border-slate-600/50">
|
||||
<img src="img/team/placeholder-1.svg" alt="Teammitglied" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white">Max Mustermann</h3>
|
||||
<p class="text-sonith text-sm font-medium">Geschäftsführung</p>
|
||||
</div>
|
||||
|
||||
<!-- Team Member 2 -->
|
||||
<div class="team-card text-center fade-in">
|
||||
<div class="w-32 h-32 rounded-full bg-dark-lighter mx-auto mb-5 overflow-hidden border-2 border-slate-600/50">
|
||||
<img src="img/team/placeholder-2.svg" alt="Teammitglied" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white">Erika Musterfrau</h3>
|
||||
<p class="text-sonith text-sm font-medium">Systemadministration</p>
|
||||
</div>
|
||||
|
||||
<!-- Team Member 3 -->
|
||||
<div class="team-card text-center fade-in">
|
||||
<div class="w-32 h-32 rounded-full bg-dark-lighter mx-auto mb-5 overflow-hidden border-2 border-slate-600/50">
|
||||
<img src="img/team/placeholder-3.svg" alt="Teammitglied" class="w-full h-full object-cover">
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-white">Alex Beispiel</h3>
|
||||
<p class="text-sonith text-sm font-medium">IT-Support</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================================
|
||||
KONTAKT
|
||||
============================================================ -->
|
||||
<section id="kontakt" class="py-24 lg:py-32 bg-dark">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="text-center max-w-3xl mx-auto mb-16 fade-in">
|
||||
<p class="text-sonith font-semibold text-sm tracking-widest uppercase mb-3">Sprechen Sie uns an</p>
|
||||
<h2 class="text-3xl sm:text-4xl font-extrabold text-white">Kontakt</h2>
|
||||
<p class="mt-4 text-slate-400 text-lg">Wir freuen uns auf Ihre Anfrage.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-5xl mx-auto">
|
||||
<!-- Telefon -->
|
||||
<a href="tel:+4993130699090" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
|
||||
<div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-sonith/20 transition-colors">
|
||||
<svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-sm font-semibold text-white mb-1">Telefon</h3>
|
||||
<p class="text-slate-400 text-sm">0931 30 69 90 90</p>
|
||||
</a>
|
||||
|
||||
<!-- E-Mail -->
|
||||
<a href="mailto:mail@sonith.de" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
|
||||
<div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-sonith/20 transition-colors">
|
||||
<svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-sm font-semibold text-white mb-1">E-Mail</h3>
|
||||
<p class="text-slate-400 text-sm">mail@sonith.de</p>
|
||||
</a>
|
||||
|
||||
<!-- Adresse -->
|
||||
<div class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-slate-700/50">
|
||||
<div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-sm font-semibold text-white mb-1">Adresse</h3>
|
||||
<p class="text-slate-400 text-sm">Kleinheubacher Str. 7<br>63924 Rüdenau</p>
|
||||
</div>
|
||||
|
||||
<!-- Remote-Support -->
|
||||
<a href="https://helpdesk.sonith.de" target="_blank" rel="noopener" class="contact-card group bg-dark-light rounded-xl p-6 text-center border border-slate-700/50 hover:border-sonith/30 transition-all duration-300">
|
||||
<div class="w-12 h-12 rounded-full bg-sonith/10 flex items-center justify-center mx-auto mb-4 group-hover:bg-sonith/20 transition-colors">
|
||||
<svg class="w-6 h-6 text-sonith" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25A2.25 2.25 0 015.25 3h13.5A2.25 2.25 0 0121 5.25z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-sm font-semibold text-white mb-1">Helpdesk</h3>
|
||||
<p class="text-slate-400 text-sm">Support-Ticket erstellen</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============================================================
|
||||
FOOTER
|
||||
============================================================ -->
|
||||
<footer class="py-8 bg-dark-light border-t border-slate-700/50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<p class="text-slate-500 text-sm">© 2026 sonith UG (haftungsbeschränkt)</p>
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="impressum.html" class="text-slate-500 text-sm hover:text-sonith transition-colors">Impressum</a>
|
||||
<a href="datenschutz.html" class="text-slate-500 text-sm hover:text-sonith transition-colors">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- JavaScript -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
96
js/main.js
Normal file
96
js/main.js
Normal file
@ -0,0 +1,96 @@
|
||||
/* ============================================================
|
||||
sonith.de — Main JavaScript
|
||||
============================================================ */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initMobileMenu();
|
||||
initScrollSpy();
|
||||
initNavbarScroll();
|
||||
initFadeIn();
|
||||
});
|
||||
|
||||
/* ---- Mobile Menu ---- */
|
||||
function initMobileMenu() {
|
||||
const btn = document.getElementById('mobile-menu-btn');
|
||||
const menu = document.getElementById('mobile-menu');
|
||||
const iconOpen = document.getElementById('menu-icon-open');
|
||||
const iconClose = document.getElementById('menu-icon-close');
|
||||
|
||||
if (!btn || !menu) return;
|
||||
|
||||
btn.addEventListener('click', () => {
|
||||
const isOpen = !menu.classList.contains('hidden');
|
||||
menu.classList.toggle('hidden');
|
||||
iconOpen.classList.toggle('hidden');
|
||||
iconClose.classList.toggle('hidden');
|
||||
btn.setAttribute('aria-label', isOpen ? 'Menü öffnen' : 'Menü schließen');
|
||||
});
|
||||
|
||||
// Menü schließen bei Klick auf Link
|
||||
menu.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
menu.classList.add('hidden');
|
||||
iconOpen.classList.remove('hidden');
|
||||
iconClose.classList.add('hidden');
|
||||
btn.setAttribute('aria-label', 'Menü öffnen');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/* ---- Scroll Spy (aktiver Menüpunkt) ---- */
|
||||
function initScrollSpy() {
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
const navLinks = document.querySelectorAll('.nav-link');
|
||||
|
||||
if (!sections.length || !navLinks.length) return;
|
||||
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const id = entry.target.getAttribute('id');
|
||||
navLinks.forEach(link => {
|
||||
link.classList.toggle('active', link.getAttribute('href') === `#${id}`);
|
||||
});
|
||||
}
|
||||
});
|
||||
}, {
|
||||
rootMargin: '-20% 0px -60% 0px',
|
||||
threshold: 0
|
||||
});
|
||||
|
||||
sections.forEach(section => observer.observe(section));
|
||||
}
|
||||
|
||||
/* ---- Navbar Background on Scroll ---- */
|
||||
function initNavbarScroll() {
|
||||
const navbar = document.getElementById('navbar');
|
||||
if (!navbar) return;
|
||||
|
||||
const update = () => {
|
||||
navbar.classList.toggle('scrolled', window.scrollY > 50);
|
||||
};
|
||||
|
||||
window.addEventListener('scroll', update, { passive: true });
|
||||
update();
|
||||
}
|
||||
|
||||
/* ---- Fade-in on Scroll ---- */
|
||||
function initFadeIn() {
|
||||
const elements = document.querySelectorAll('.fade-in, .service-card');
|
||||
|
||||
if (!elements.length) return;
|
||||
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -40px 0px'
|
||||
});
|
||||
|
||||
elements.forEach(el => observer.observe(el));
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user