372 lines
17 KiB
HTML
372 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<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>
|
||
|
||
<!-- Splide CSS if needed for sliders (you didn’t include slider in given HTML, but keeping) -->
|
||
<link href="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css" rel="stylesheet">
|
||
|
||
<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);
|
||
}
|
||
|
||
/* Additional: ensure images scale responsively */
|
||
img {
|
||
display: block;
|
||
max-width: 100%;
|
||
height: auto;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Particle Background (you may integrate JS for particles) -->
|
||
<div id="particle-bg" class="particle-bg"></div>
|
||
|
||
<!-- Cookie Consent Banner -->
|
||
<div id="cookie-banner" class="fixed bottom-0 inset-x-0 bg-gray-900 text-white px-6 py-4 shadow-lg z-50 hidden">
|
||
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
|
||
<p class="text-sm font-rajdhani">
|
||
Diese Website verwendet Cookies, um Ihnen das bestmögliche Erlebnis zu bieten. Mit der Nutzung stimmen Sie unserer <a href="/datenschutz" class="underline text-red-400 hover:text-red-600">Datenschutzerklärung</a> zu.
|
||
</p>
|
||
<button id="accept-cookies" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded font-semibold text-sm transition">
|
||
OK, verstanden
|
||
</button>
|
||
</div>
|
||
</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="#about" class="text-white hover:text-red-500 transition-colors duration-300 font-rajdhani font-medium">Über Uns</a>
|
||
<a href="#services" class="text-white hover:text-red-500 transition-colors duration-300 font-rajdhani font-medium">Services</a>
|
||
<a href="#contact" 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="#about" class="block px-3 py-2 text-white hover:text-red-500 transition-colors duration-300">Über Uns</a>
|
||
<a href="#services" class="block px-3 py-2 text-white hover:text-red-500 transition-colors duration-300">Services</a>
|
||
<a href="#contact" 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="#services" 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 & Services
|
||
</a>
|
||
<a href="mailto:info@reifenspaeth.de" 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">
|
||
Kontaktieren
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<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 id="about" 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">Transparente Preisgestaltung und wettbewerbsfähige Angebote – Qualität zum fairen Preis.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services Section -->
|
||
<section id="services" 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 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="#contact" 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">
|
||
Kontaktieren
|
||
</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 / Contact Section -->
|
||
<footer id="contact" 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">
|
||
<p class="text-gray-500 font-rajdhani text-sm">
|
||
© 2024 Reifen Späth Kfz‑Meisterbetrieb. Alle Rechte vorbehalten.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- JS for mobile menu toggle & scroll reveal -->
|
||
<script>
|
||
// Mobile menu toggle
|
||
const mobileBtn = document.getElementById('mobile-menu-btn');
|
||
const mobileMenu = document.getElementById('mobile-menu');
|
||
mobileBtn.addEventListener('click', () => {
|
||
mobileMenu.classList.toggle('hidden');
|
||
});
|
||
|
||
// Scroll reveal
|
||
function revealOnScroll() {
|
||
const reveals = document.querySelectorAll('.scroll-reveal');
|
||
for (let el of reveals) {
|
||
const rect = el.getBoundingClientRect();
|
||
if (rect.top < window.innerHeight * 0.85) {
|
||
el.classList.add('revealed');
|
||
}
|
||
}
|
||
}
|
||
window.addEventListener('scroll', revealOnScroll);
|
||
window.addEventListener('load', revealOnScroll);
|
||
|
||
// Cookie Consent Logic
|
||
window.addEventListener('DOMContentLoaded', () => {
|
||
const cookieBanner = document.getElementById('cookie-banner');
|
||
const acceptBtn = document.getElementById('accept-cookies');
|
||
|
||
const consent = localStorage.getItem('cookieConsent');
|
||
if (!consent) {
|
||
cookieBanner.classList.remove('hidden');
|
||
}
|
||
|
||
acceptBtn.addEventListener('click', () => {
|
||
localStorage.setItem('cookieConsent', 'true');
|
||
cookieBanner.classList.add('hidden');
|
||
});
|
||
});
|
||
|
||
// You could initialize any particle JS, anime.js, Splide, etc. here if you have them
|
||
</script>
|
||
</body>
|
||
</html>
|