345 lines
18 KiB
HTML
345 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<base href="https://fjhoah27cmbi6.ok.kimi.link">
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Reifen Späth - Kfz-Meisterbetrieb | Premium Reifen & Felgen in Langenmosen</title>
|
|
<meta name="description" content="Reifen Späth - Ihr Kfz-Meisterbetrieb für Premium Reifen, Felgen und professionellen Reifenservice in Langenmosen. ✓ Top Marken ✓ Meisterqualität ✓ Termin online buchen">
|
|
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600;700&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Animation Libraries -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
|
|
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.19.0/matter.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.7.0/p5.min.js"></script>
|
|
|
|
<!-- Custom Styles -->
|
|
<style>
|
|
:root {
|
|
--primary-dark: #1a1a1a;
|
|
--secondary-silver: #c0c0c0;
|
|
--accent-red: #dc2626;
|
|
--bg-black: #000000;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #000000 100%);
|
|
color: #ffffff;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.font-orbitron { font-family: 'Orbitron', monospace; }
|
|
.font-rajdhani { font-family: 'Rajdhani', sans-serif; }
|
|
|
|
.hero-bg {
|
|
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('resources/hero-felge.jpg');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
.metallic-text {
|
|
background: linear-gradient(45deg, #c0c0c0, #ffffff, #c0c0c0);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.glow-effect {
|
|
box-shadow: 0 0 20px rgba(220, 38, 38, 0.5);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.glow-effect:hover {
|
|
box-shadow: 0 0 30px rgba(220, 38, 38, 0.8);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.card-hover {
|
|
transition: all 0.3s ease;
|
|
border: 1px solid rgba(192, 192, 192, 0.2);
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-5px);
|
|
border-color: var(--accent-red);
|
|
box-shadow: 0 10px 30px rgba(220, 38, 38, 0.3);
|
|
}
|
|
|
|
.typing-animation {
|
|
overflow: hidden;
|
|
border-right: 2px solid var(--accent-red);
|
|
white-space: nowrap;
|
|
animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
|
|
}
|
|
|
|
@keyframes typing {
|
|
from { width: 0 }
|
|
to { width: 100% }
|
|
}
|
|
|
|
@keyframes blink-caret {
|
|
from, to { border-color: transparent }
|
|
50% { border-color: var(--accent-red) }
|
|
}
|
|
|
|
.particle-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.nav-blur {
|
|
backdrop-filter: blur(10px);
|
|
background: rgba(26, 26, 26, 0.9);
|
|
}
|
|
|
|
.scroll-reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: all 0.6s ease;
|
|
}
|
|
|
|
.scroll-reveal.revealed {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Particle Background -->
|
|
<div id="particle-bg" class="particle-bg"></div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="fixed top-0 w-full z-50 nav-blur border-b border-gray-800">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center">
|
|
<div class="font-orbitron text-xl font-bold metallic-text">REIFEN SPÄTH</div>
|
|
<div class="ml-3 text-sm text-gray-400 font-rajdhani">Kfz-Meisterbetrieb</div>
|
|
</div>
|
|
|
|
<div class="hidden md:block">
|
|
<div class="ml-10 flex items-baseline space-x-8">
|
|
<a href="#home" class="text-white hover:text-red-500 transition-colors duration-300 font-rajdhani font-medium">Start</a>
|
|
<a href="produkte.html" class="text-white hover:text-red-500 transition-colors duration-300 font-rajdhani font-medium">Produkte</a>
|
|
<a href="service.html" class="text-white hover:text-red-500 transition-colors duration-300 font-rajdhani font-medium">Service</a>
|
|
<a href="kontakt.html" class="text-white hover:text-red-500 transition-colors duration-300 font-rajdhani font-medium">Kontakt</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:hidden">
|
|
<button id="mobile-menu-btn" class="text-white hover:text-red-500">
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu -->
|
|
<div id="mobile-menu" class="md:hidden hidden bg-black bg-opacity-95">
|
|
<div class="px-2 pt-2 pb-3 space-y-1">
|
|
<a href="#home" class="block px-3 py-2 text-white hover:text-red-500 transition-colors duration-300">Start</a>
|
|
<a href="produkte.html" class="block px-3 py-2 text-white hover:text-red-500 transition-colors duration-300">Produkte</a>
|
|
<a href="service.html" class="block px-3 py-2 text-white hover:text-red-500 transition-colors duration-300">Service</a>
|
|
<a href="kontakt.html" class="block px-3 py-2 text-white hover:text-red-500 transition-colors duration-300">Kontakt</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section id="home" class="hero-bg min-h-screen flex items-center justify-center relative">
|
|
<div class="absolute inset-0 bg-gradient-to-r from-black via-transparent to-black opacity-50"></div>
|
|
|
|
<div class="relative z-10 text-center max-w-4xl mx-auto px-4">
|
|
<h1 class="font-orbitron text-4xl md:text-6xl lg:text-7xl font-black mb-6">
|
|
<span class="metallic-text typing-animation">PREMIUM REIFEN</span><br>
|
|
<span class="text-red-600">& FELGEN</span>
|
|
</h1>
|
|
|
|
<p class="text-xl md:text-2xl text-gray-300 mb-8 font-rajdhani font-light">
|
|
Kfz-Meisterbetrieb seit über 20 Jahren<br>
|
|
Ihr Spezialist für Reifen, Felgen und professionellen Service in Langenmosen
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-6 justify-center items-center">
|
|
<a href="produkte.html" class="bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-lg font-rajdhani font-semibold text-lg glow-effect transition-all duration-300">
|
|
Reifen finden
|
|
</a>
|
|
<a href="service.html" class="border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white px-8 py-4 rounded-lg font-rajdhani font-semibold text-lg transition-all duration-300">
|
|
Termin buchen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroll Indicator -->
|
|
<div class="absolute bottom-8 left-1/2 transform -translate-x-1/2 animate-bounce">
|
|
<div class="w-6 h-10 border-2 border-white rounded-full flex justify-center">
|
|
<div class="w-1 h-3 bg-white rounded-full mt-2 animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About Section -->
|
|
<section class="py-20 bg-gradient-to-b from-gray-900 to-black">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16 scroll-reveal">
|
|
<h2 class="font-orbitron text-3xl md:text-5xl font-bold mb-6 metallic-text">ÜBER UNS</h2>
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto font-rajdhani">
|
|
Als Kfz-Meisterbetrieb stehen wir seit über zwei Jahrzehnten für höchste Qualität und professionellen Service im Bereich Reifen und Felgen. Unsere Meisterwerkstatt bietet Ihnen kompetente Beratung und präzise Ausführung aller Arbeiten.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div class="text-center scroll-reveal card-hover bg-gray-800 bg-opacity-50 p-8 rounded-lg">
|
|
<div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="font-orbitron text-xl font-bold mb-3 metallic-text">Meisterqualität</h3>
|
|
<p class="text-gray-300 font-rajdhani">Als Kfz-Meisterbetrieb garantieren wir höchste Qualitätsstandards und präzise Arbeit nach neuesten Technologien.</p>
|
|
</div>
|
|
|
|
<div class="text-center scroll-reveal card-hover bg-gray-800 bg-opacity-50 p-8 rounded-lg">
|
|
<div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="font-orbitron text-xl font-bold mb-3 metallic-text">Schneller Service</h3>
|
|
<p class="text-gray-300 font-rajdhani">Effiziente Terminvergabe und schnelle Ausführung aller Arbeiten - damit Sie schnell wieder sicher unterwegs sind.</p>
|
|
</div>
|
|
|
|
<div class="text-center scroll-reveal card-hover bg-gray-800 bg-opacity-50 p-8 rounded-lg">
|
|
<div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="font-orbitron text-xl font-bold mb-3 metallic-text">Faire Preise</h3>
|
|
<p class="text-gray-300 font-rajdhani">Transparentere Preisgestaltung und wettbewerbsfähige Angebote - Qualität zum fairen Preis.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Section -->
|
|
<section class="py-20 bg-black">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="text-center mb-16 scroll-reveal">
|
|
<h2 class="font-orbitron text-3xl md:text-5xl font-bold mb-6 metallic-text">UNSERE SERVICES</h2>
|
|
<p class="text-xl text-gray-300 max-w-3xl mx-auto font-rajdhani">
|
|
Von der Beratung bis zur Montage - wir bieten Ihnen alle Services rund um Ihre Reifen und Felgen aus einer Hand.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<div class="scroll-reveal card-hover bg-gray-900 p-6 rounded-lg text-center">
|
|
<img src="https://kimi-web-img.moonshot.cn/img/www.baebeca.de/90680f6c86136388ba6d0854391af683785f106e.jpg" alt="Reifenwechsel" class="w-full h-48 object-cover rounded-lg mb-4">
|
|
<h3 class="font-orbitron text-lg font-bold mb-2 metallic-text">Reifenwechsel</h3>
|
|
<p class="text-gray-400 text-sm font-rajdhani">Professioneller Wechsel Ihrer Reifen mit Auswuchten und Druckkontrolle</p>
|
|
</div>
|
|
|
|
<div class="scroll-reveal card-hover bg-gray-900 p-6 rounded-lg text-center">
|
|
<img src="https://kimi-web-img.moonshot.cn/img/www.baebeca.de/a8f3a2174c0fa02578f3ea737ac23256932f8dc7.jpg" alt="Felgen" class="w-full h-48 object-cover rounded-lg mb-4">
|
|
<h3 class="font-orbitron text-lg font-bold mb-2 metallic-text">Felgen-Service</h3>
|
|
<p class="text-gray-400 text-sm font-rajdhani">Alufelgen, Stahlfelgen und Spezialfelgen - Verkauf, Montage und Reparatur</p>
|
|
</div>
|
|
|
|
<div class="scroll-reveal card-hover bg-gray-900 p-6 rounded-lg text-center">
|
|
<img src="https://kimi-web-img.moonshot.cn/img/kfz-technik-zs.de/6073e4668222dcf357ea8f003b5bac0f5b798083.jpg" alt="Werkstatt" class="w-full h-48 object-cover rounded-lg mb-4">
|
|
<h3 class="font-orbitron text-lg font-bold mb-2 metallic-text">Werkstatt-Service</h3>
|
|
<p class="text-gray-400 text-sm font-rajdhani">Kompletter Kfz-Service mit Meisterqualität - von der Inspektion bis zur Hauptuntersuchung</p>
|
|
</div>
|
|
|
|
<div class="scroll-reveal card-hover bg-gray-900 p-6 rounded-lg text-center">
|
|
<img src="https://kimi-web-img.moonshot.cn/img/static.felgenshop.de/3f45eac72b930d6fd7f1f03a9dabea122bcec79d.jpg" alt="Reifenlager" class="w-full h-48 object-cover rounded-lg mb-4">
|
|
<h3 class="font-orbitron text-lg font-bold mb-2 metallic-text">Reifenlager</h3>
|
|
<p class="text-gray-400 text-sm font-rajdhani">Sichere und klimatisierte Einlagerung Ihrer Reifen - ganzjährig verfügbar</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="py-20 bg-gradient-to-r from-red-900 to-red-700">
|
|
<div class="max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8 scroll-reveal">
|
|
<h2 class="font-orbitron text-3xl md:text-5xl font-bold mb-6 text-white">BEREIT FÜR NEUE REIFEN?</h2>
|
|
<p class="text-xl text-red-100 mb-8 font-rajdhani">
|
|
Vereinbaren Sie jetzt Ihren Termin online oder kontaktieren Sie uns für eine persönliche Beratung. Unser Team steht Ihnen gerne zur Verfügung.
|
|
</p>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-6 justify-center">
|
|
<a href="service.html" class="bg-white text-red-600 px-8 py-4 rounded-lg font-rajdhani font-semibold text-lg hover:bg-gray-100 transition-all duration-300">
|
|
Termin buchen
|
|
</a>
|
|
<a href="tel:+4915568569616" class="border-2 border-white text-white px-8 py-4 rounded-lg font-rajdhani font-semibold text-lg hover:bg-white hover:text-red-600 transition-all duration-300">
|
|
Anrufen: +49 (0)155 68569616
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-black border-t border-gray-800 py-12">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid md:grid-cols-3 gap-8">
|
|
<div>
|
|
<div class="font-orbitron text-xl font-bold metallic-text mb-4">REIFEN SPÄTH</div>
|
|
<p class="text-gray-400 font-rajdhani mb-4">Kfz-Meisterbetrieb</p>
|
|
<p class="text-gray-400 font-rajdhani">Ihr Spezialist für Premium Reifen und Felgen in Langenmosen. Seit über 20 Jahren stehen wir für Qualität und Service.</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-orbitron text-lg font-bold metallic-text mb-4">KONTAKT</h3>
|
|
<div class="space-y-2 text-gray-400 font-rajdhani">
|
|
<p>📍 Sandizeller Straße 10C, 86571 Langenmosen</p>
|
|
<p>📞 +49 (0)155 68569616</p>
|
|
<p>✉ info@reifenspaeth.de</p>
|
|
<p>🌐 www.reifenspaeth.de</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="font-orbitron text-lg font-bold metallic-text mb-4">ÖFFNUNGSZEITEN</h3>
|
|
<div class="space-y-2 text-gray-400 font-rajdhani">
|
|
<p>Mo-Fr: 8:00 - 18:00 Uhr</p>
|
|
<p>Sa: 8:00 - 13:00 Uhr</p>
|
|
<p>Sonntag: Geschlossen</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="border-t border-gray-800 mt-8 pt-8 text-center">
|
|
<div class="flex flex-wrap justify-center space-x-6 text-sm text-gray-400 font-rajdhani mb-4">
|
|
<a href="kontakt.html#impressum" class="hover:text-red-500 transition-colors">Impressum</a>
|
|
<a href="datenschutz.html" class="hover:text-red-500 transition-colors">Datenschutz</a>
|
|
<a href="kontakt.html#agb" class="hover:text-red-500 transition-colors">AGB</a>
|
|
<a href="kontakt.html" class="hover:text-red-500 transition-colors">Kontakt</a>
|
|
</div>
|
|
<p class="text-gray-500 font-rajdhani text-sm">
|
|
© 2024 Reifen Späth Kfz-Meisterbetrieb. Alle Rechte vorbehalten.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- JavaScript -->
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html> |