Dominik Höfling
dc51be2da1
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>
417 lines
30 KiB
HTML
417 lines
30 KiB
HTML
<!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>
|