Spaces:
Running
Running
Initial DeepSite commit
Browse files- README.md +8 -5
- index.html +1153 -19
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji: 📊
|
| 4 |
colorFrom: red
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
-
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: DeepSite Project
|
|
|
|
| 3 |
colorFrom: red
|
| 4 |
+
colorTo: red
|
| 5 |
sdk: static
|
| 6 |
+
emoji: 💡
|
| 7 |
+
tags:
|
| 8 |
+
- deepsite-v4
|
| 9 |
---
|
| 10 |
|
| 11 |
+
# DeepSite Project
|
| 12 |
+
|
| 13 |
+
This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.
|
index.html
CHANGED
|
@@ -1,19 +1,1153 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="de">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>SPEED55 | Express Transport & Logistik Wiesbaden</title>
|
| 7 |
+
<meta name="description" content="SPEED55 - Professionelle Express-Transporte, Kurierdienst, Direkttransporte und europaweite Logistiklösungen aus Wiesbaden. Zuverlässig & Sicher seit 2010.">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/lucide@latest"></script>
|
| 10 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 11 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
|
| 12 |
+
<script>
|
| 13 |
+
tailwind.config = {
|
| 14 |
+
theme: {
|
| 15 |
+
extend: {
|
| 16 |
+
colors: {
|
| 17 |
+
navy: { 50:'#e8edf5', 100:'#c5d1e8', 200:'#8fa3d1', 300:'#5a75bb', 400:'#2e4f8a', 500:'#0a1e3d', 600:'#081830', 700:'#061223', 800:'#040c17', 900:'#02060b' },
|
| 18 |
+
accent: { 400:'#4f9cff', 500:'#2563eb', 600:'#1d4ed8', 700:'#1e40af' },
|
| 19 |
+
speed: { orange:'#ff6b2c', red:'#e53e3e', green:'#38a169' }
|
| 20 |
+
},
|
| 21 |
+
fontFamily: { inter: ['Inter', 'sans-serif'] }
|
| 22 |
+
}
|
| 23 |
+
}
|
| 24 |
+
}
|
| 25 |
+
</script>
|
| 26 |
+
<style>
|
| 27 |
+
* { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
|
| 28 |
+
body { overflow-x: hidden; }
|
| 29 |
+
|
| 30 |
+
/* ── Transporter Animations ── */
|
| 31 |
+
.truck-road {
|
| 32 |
+
position: relative;
|
| 33 |
+
width: 100%;
|
| 34 |
+
overflow: hidden;
|
| 35 |
+
height: 70px;
|
| 36 |
+
}
|
| 37 |
+
.truck-container {
|
| 38 |
+
position: absolute;
|
| 39 |
+
top: 50%;
|
| 40 |
+
transform: translateY(-50%);
|
| 41 |
+
animation: driveRight linear infinite;
|
| 42 |
+
white-space: nowrap;
|
| 43 |
+
}
|
| 44 |
+
.truck-container.reverse {
|
| 45 |
+
animation: driveLeft linear infinite;
|
| 46 |
+
}
|
| 47 |
+
@keyframes driveRight {
|
| 48 |
+
0% { left: -200px; }
|
| 49 |
+
100% { left: calc(100% + 50px); }
|
| 50 |
+
}
|
| 51 |
+
@keyframes driveLeft {
|
| 52 |
+
0% { left: calc(100% + 50px); }
|
| 53 |
+
100% { left: -200px; }
|
| 54 |
+
}
|
| 55 |
+
|
| 56 |
+
/* ── Herotruck Stripe ── */
|
| 57 |
+
.hero-truck-stripe {
|
| 58 |
+
position: absolute;
|
| 59 |
+
bottom: 0;
|
| 60 |
+
left: 0;
|
| 61 |
+
width: 100%;
|
| 62 |
+
height: 90px;
|
| 63 |
+
background: rgba(255,255,255,0.06);
|
| 64 |
+
border-top: 3px dashed rgba(255,255,255,0.15);
|
| 65 |
+
}
|
| 66 |
+
|
| 67 |
+
/* ── Road markings ── */
|
| 68 |
+
.road-markings {
|
| 69 |
+
position: absolute;
|
| 70 |
+
bottom: 8px;
|
| 71 |
+
left: 0;
|
| 72 |
+
width: 100%;
|
| 73 |
+
height: 4px;
|
| 74 |
+
background: repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0px, rgba(255,255,255,0.3) 40px, transparent 40px, transparent 80px);
|
| 75 |
+
}
|
| 76 |
+
|
| 77 |
+
/* ── Floating animation ── */
|
| 78 |
+
@keyframes float {
|
| 79 |
+
0%, 100% { transform: translateY(0px); }
|
| 80 |
+
50% { transform: translateY(-12px); }
|
| 81 |
+
}
|
| 82 |
+
.float-anim { animation: float 3s ease-in-out infinite; }
|
| 83 |
+
|
| 84 |
+
/* ── Pulse ring ── */
|
| 85 |
+
@keyframes pulseRing {
|
| 86 |
+
0% { transform: scale(1); opacity: 1; }
|
| 87 |
+
100% { transform: scale(1.6); opacity: 0; }
|
| 88 |
+
}
|
| 89 |
+
.pulse-ring::before {
|
| 90 |
+
content: '';
|
| 91 |
+
position: absolute;
|
| 92 |
+
inset: -6px;
|
| 93 |
+
border-radius: 50%;
|
| 94 |
+
border: 2px solid #4f9cff;
|
| 95 |
+
animation: pulseRing 1.5s ease-out infinite;
|
| 96 |
+
}
|
| 97 |
+
|
| 98 |
+
/* ── Counter ── */
|
| 99 |
+
@keyframes countUp {
|
| 100 |
+
from { opacity: 0; transform: translateY(20px); }
|
| 101 |
+
to { opacity: 1; transform: translateY(0); }
|
| 102 |
+
}
|
| 103 |
+
|
| 104 |
+
/* ── Service card hover ── */
|
| 105 |
+
.service-card {
|
| 106 |
+
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
| 107 |
+
}
|
| 108 |
+
.service-card:hover {
|
| 109 |
+
transform: translateY(-8px);
|
| 110 |
+
box-shadow: 0 25px 50px rgba(37, 99, 235, 0.15);
|
| 111 |
+
}
|
| 112 |
+
.service-card:hover .service-icon {
|
| 113 |
+
background: #2563eb;
|
| 114 |
+
color: white;
|
| 115 |
+
transform: scale(1.1);
|
| 116 |
+
}
|
| 117 |
+
.service-icon {
|
| 118 |
+
transition: all 0.4s ease;
|
| 119 |
+
}
|
| 120 |
+
|
| 121 |
+
/* ── Smooth reveal ── */
|
| 122 |
+
.reveal {
|
| 123 |
+
opacity: 0;
|
| 124 |
+
transform: translateY(40px);
|
| 125 |
+
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
| 126 |
+
}
|
| 127 |
+
.reveal.visible {
|
| 128 |
+
opacity: 1;
|
| 129 |
+
transform: translateY(0);
|
| 130 |
+
}
|
| 131 |
+
|
| 132 |
+
/* ── Mobile menu ── */
|
| 133 |
+
.mobile-menu {
|
| 134 |
+
transform: translateX(100%);
|
| 135 |
+
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
| 136 |
+
}
|
| 137 |
+
.mobile-menu.open {
|
| 138 |
+
transform: translateX(0);
|
| 139 |
+
}
|
| 140 |
+
|
| 141 |
+
/* ── Stats counter ── */
|
| 142 |
+
.stat-number {
|
| 143 |
+
background: linear-gradient(135deg, #4f9cff, #2563eb);
|
| 144 |
+
-webkit-background-clip: text;
|
| 145 |
+
-webkit-text-fill-color: transparent;
|
| 146 |
+
}
|
| 147 |
+
|
| 148 |
+
/* ── Gradient text ── */
|
| 149 |
+
.gradient-text {
|
| 150 |
+
background: linear-gradient(135deg, #4f9cff 0%, #2563eb 50%, #1d4ed8 100%);
|
| 151 |
+
-webkit-background-clip: text;
|
| 152 |
+
-webkit-text-fill-color: transparent;
|
| 153 |
+
}
|
| 154 |
+
|
| 155 |
+
/* ── Road background ── */
|
| 156 |
+
.road-bg {
|
| 157 |
+
background: linear-gradient(180deg, #0a1e3d 0%, #081830 100%);
|
| 158 |
+
position: relative;
|
| 159 |
+
}
|
| 160 |
+
.road-bg::after {
|
| 161 |
+
content: '';
|
| 162 |
+
position: absolute;
|
| 163 |
+
bottom: 0;
|
| 164 |
+
left: 0;
|
| 165 |
+
right: 0;
|
| 166 |
+
height: 4px;
|
| 167 |
+
background: repeating-linear-gradient(90deg, #ff6b2c 0px, #ff6b2c 30px, transparent 30px, transparent 60px);
|
| 168 |
+
}
|
| 169 |
+
|
| 170 |
+
/* ── WhatsApp pulse ── */
|
| 171 |
+
@keyframes whatsappPulse {
|
| 172 |
+
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
|
| 173 |
+
70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
|
| 174 |
+
100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
|
| 175 |
+
}
|
| 176 |
+
.whatsapp-btn {
|
| 177 |
+
animation: whatsappPulse 2s infinite;
|
| 178 |
+
}
|
| 179 |
+
|
| 180 |
+
/* ── Fleet card ── */
|
| 181 |
+
.fleet-card {
|
| 182 |
+
transition: all 0.3s ease;
|
| 183 |
+
position: relative;
|
| 184 |
+
overflow: hidden;
|
| 185 |
+
}
|
| 186 |
+
.fleet-card::before {
|
| 187 |
+
content: '';
|
| 188 |
+
position: absolute;
|
| 189 |
+
inset: 0;
|
| 190 |
+
background: linear-gradient(135deg, rgba(37,99,235,0.05), rgba(79,156,255,0.1));
|
| 191 |
+
opacity: 0;
|
| 192 |
+
transition: opacity 0.3s;
|
| 193 |
+
}
|
| 194 |
+
.fleet-card:hover::before { opacity: 1; }
|
| 195 |
+
.fleet-card:hover { transform: translateY(-4px); border-color: #4f9cff; }
|
| 196 |
+
|
| 197 |
+
/* cookie banner */
|
| 198 |
+
.cookie-banner {
|
| 199 |
+
animation: slideUp 0.5s ease;
|
| 200 |
+
}
|
| 201 |
+
@keyframes slideUp {
|
| 202 |
+
from { transform: translateY(100%); opacity: 0; }
|
| 203 |
+
to { transform: translateY(0); opacity: 1; }
|
| 204 |
+
}
|
| 205 |
+
|
| 206 |
+
/* Trim scroll */
|
| 207 |
+
::-webkit-scrollbar { width: 8px; }
|
| 208 |
+
::-webkit-scrollbar-track { background: #081830; }
|
| 209 |
+
::-webkit-scrollbar-thumb { background: #2563eb; border-radius: 4px; }
|
| 210 |
+
::-webkit-scrollbar-thumb:hover { background: #4f9cff; }
|
| 211 |
+
</style>
|
| 212 |
+
</head>
|
| 213 |
+
<body class="bg-gray-50 font-inter">
|
| 214 |
+
|
| 215 |
+
<!-- ═══════════════ HEADER ═══════════════ -->
|
| 216 |
+
<header id="header" class="fixed top-0 left-0 w-full z-50 transition-all duration-500" style="background:rgba(4,12,23,0.95);backdrop-filter:blur(12px);">
|
| 217 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 218 |
+
<div class="flex items-center justify-between h-20">
|
| 219 |
+
<!-- Logo -->
|
| 220 |
+
<a href="#home" class="flex items-center gap-3 group">
|
| 221 |
+
<div class="w-12 h-12 rounded-xl bg-gradient-to-br from-accent-400 to-accent-600 flex items-center justify-center shadow-lg shadow-accent-500/30 group-hover:shadow-accent-500/50 transition-shadow">
|
| 222 |
+
<svg viewBox="0 0 40 40" class="w-7 h-7" fill="white">
|
| 223 |
+
<path d="M8 28L18 10L28 28H8Z" opacity="0.3"/>
|
| 224 |
+
<path d="M14 28L22 14L30 28H14Z"/>
|
| 225 |
+
</svg>
|
| 226 |
+
</div>
|
| 227 |
+
<div>
|
| 228 |
+
<span class="text-2xl font-black text-white tracking-tight">SPEED<span class="text-accent-400">55</span></span>
|
| 229 |
+
<span class="block text-[10px] uppercase tracking-[0.25em] text-gray-400 font-medium -mt-1">Express & Logistik</span>
|
| 230 |
+
</div>
|
| 231 |
+
</a>
|
| 232 |
+
|
| 233 |
+
<!-- Desktop Nav -->
|
| 234 |
+
<nav class="hidden lg:flex items-center gap-1">
|
| 235 |
+
<a href="#home" class="nav-link px-4 py-2 text-sm font-medium text-gray-300 hover:text-white rounded-lg hover:bg-white/5 transition-all">Start</a>
|
| 236 |
+
<a href="#about" class="nav-link px-4 py-2 text-sm font-medium text-gray-300 hover:text-white rounded-lg hover:bg-white/5 transition-all">Über Uns</a>
|
| 237 |
+
<a href="#services" class="nav-link px-4 py-2 text-sm font-medium text-gray-300 hover:text-white rounded-lg hover:bg-white/5 transition-all">Leistungen</a>
|
| 238 |
+
<a href="#fleet" class="nav-link px-4 py-2 text-sm font-medium text-gray-300 hover:text-white rounded-lg hover:bg-white/5 transition-all">Fuhrpark</a>
|
| 239 |
+
<a href="#europe" class="nav-link px-4 py-2 text-sm font-medium text-gray-300 hover:text-white rounded-lg hover:bg-white/5 transition-all">Europa</a>
|
| 240 |
+
<a href="#contact" class="ml-3 inline-flex items-center gap-2 px-5 py-2.5 bg-accent-500 hover:bg-accent-600 text-white text-sm font-semibold rounded-xl transition-all hover:shadow-lg hover:shadow-accent-500/30">
|
| 241 |
+
<i data-lucide="phone" class="w-4 h-4"></i>
|
| 242 |
+
Kontakt
|
| 243 |
+
</a>
|
| 244 |
+
</nav>
|
| 245 |
+
|
| 246 |
+
<!-- Mobile toggle -->
|
| 247 |
+
<button id="menuToggle" class="lg:hidden p-2 text-white hover:bg-white/10 rounded-lg transition">
|
| 248 |
+
<i data-lucide="menu" class="w-6 h-6"></i>
|
| 249 |
+
</button>
|
| 250 |
+
</div>
|
| 251 |
+
</div>
|
| 252 |
+
|
| 253 |
+
<!-- Mobile Menu -->
|
| 254 |
+
<div id="mobileMenu" class="mobile-menu fixed top-0 right-0 w-72 h-full bg-navy-800 z-50 shadow-2xl p-8 flex flex-col lg:hidden">
|
| 255 |
+
<button id="menuClose" class="self-end p-2 text-gray-400 hover:text-white mb-8">
|
| 256 |
+
<i data-lucide="x" class="w-6 h-6"></i>
|
| 257 |
+
</button>
|
| 258 |
+
<a href="#home" class="mobile-nav py-3 text-lg font-medium text-gray-300 hover:text-white border-b border-white/5 transition">Start</a>
|
| 259 |
+
<a href="#about" class="mobile-nav py-3 text-lg font-medium text-gray-300 hover:text-white border-b border-white/5 transition">Über Uns</a>
|
| 260 |
+
<a href="#services" class="mobile-nav py-3 text-lg font-medium text-gray-300 hover:text-white border-b border-white/5 transition">Leistungen</a>
|
| 261 |
+
<a href="#fleet" class="mobile-nav py-3 text-lg font-medium text-gray-300 hover:text-white border-b border-white/5 transition">Fuhrpark</a>
|
| 262 |
+
<a href="#europe" class="mobile-nav py-3 text-lg font-medium text-gray-300 hover:text-white border-b border-white/5 transition">Europa</a>
|
| 263 |
+
<a href="#contact" class="mobile-nav py-3 text-lg font-medium text-gray-300 hover:text-white border-b border-white/5 transition">Kontakt</a>
|
| 264 |
+
<a href="#datenschutz" class="mobile-nav py-3 text-lg font-medium text-gray-300 hover:text-white border-b border-white/5 transition">Datenschutz</a>
|
| 265 |
+
<a href="tel:01732697532" class="mt-8 flex items-center justify-center gap-2 py-3 bg-accent-500 text-white rounded-xl font-semibold">
|
| 266 |
+
<i data-lucide="phone" class="w-5 h-5"></i> 0173 2697532
|
| 267 |
+
</a>
|
| 268 |
+
</div>
|
| 269 |
+
</header>
|
| 270 |
+
|
| 271 |
+
<!-- ═══════════════ HERO ═══════════════ -->
|
| 272 |
+
<section id="home" class="relative min-h-screen flex items-center justify-center overflow-hidden" style="background: linear-gradient(135deg, #040c17 0%, #0a1e3d 40%, #081830 100%);">
|
| 273 |
+
<!-- Animated background trucks -->
|
| 274 |
+
<div class="absolute inset-0 pointer-events-none overflow-hidden">
|
| 275 |
+
<!-- Road stripe top area -->
|
| 276 |
+
<div class="truck-road" style="position:absolute;top:12%;">
|
| 277 |
+
<div class="truck-container" style="animation-duration:18s;">
|
| 278 |
+
<svg width="160" height="55" viewBox="0 0 160 55" fill="none" xmlns="http://www.w3.org/2000/svg" opacity="0.12">
|
| 279 |
+
<rect x="0" y="10" width="100" height="35" rx="4" fill="#4f9cff"/>
|
| 280 |
+
<rect x="100" y="5" width="50" height="40" rx="6" fill="#2563eb"/>
|
| 281 |
+
<rect x="110" y="12" width="30" height="18" rx="3" fill="rgba(255,255,255,0.2)"/>
|
| 282 |
+
<circle cx="25" cy="48" r="7" fill="#1e40af"/>
|
| 283 |
+
<circle cx="130" cy="48" r="7" fill="#1e40af"/>
|
| 284 |
+
<circle cx="25" cy="48" r="3" fill="#4f9cff"/>
|
| 285 |
+
<circle cx="130" cy="48" r="3" fill="#4f9cff"/>
|
| 286 |
+
</svg>
|
| 287 |
+
</div>
|
| 288 |
+
</div>
|
| 289 |
+
<div class="truck-road" style="position:absolute;top:35%;">
|
| 290 |
+
<div class="truck-container reverse" style="animation-duration:25s;animation-delay:3s;">
|
| 291 |
+
<svg width="140" height="50" viewBox="0 0 140 50" fill="none" xmlns="http://www.w3.org/2000/svg" opacity="0.08" style="transform:scaleX(-1);">
|
| 292 |
+
<rect x="0" y="8" width="90" height="32" rx="4" fill="#4f9cff"/>
|
| 293 |
+
<rect x="90" y="3" width="45" height="37" rx="5" fill="#2563eb"/>
|
| 294 |
+
<rect x="98" y="10" width="28" height="16" rx="2" fill="rgba(255,255,255,0.15)"/>
|
| 295 |
+
<circle cx="22" cy="44" r="6" fill="#1e40af"/>
|
| 296 |
+
<circle cx="122" cy="44" r="6" fill="#1e40af"/>
|
| 297 |
+
</svg>
|
| 298 |
+
</div>
|
| 299 |
+
</div>
|
| 300 |
+
<div class="truck-road" style="position:absolute;bottom:25%;">
|
| 301 |
+
<div class="truck-container" style="animation-duration:30s;animation-delay:8s;">
|
| 302 |
+
<svg width="180" height="60" viewBox="0 0 180 60" fill="none" xmlns="http://www.w3.org/2000/svg" opacity="0.06">
|
| 303 |
+
<rect x="0" y="12" width="120" height="38" rx="4" fill="#4f9cff"/>
|
| 304 |
+
<rect x="120" y="5" width="55" height="45" rx="6" fill="#2563eb"/>
|
| 305 |
+
<rect x="132" y="14" width="32" height="20" rx="3" fill="rgba(255,255,255,0.15)"/>
|
| 306 |
+
<circle cx="30" cy="54" r="7" fill="#1e40af"/>
|
| 307 |
+
<circle cx="150" cy="54" r="7" fill="#1e40af"/>
|
| 308 |
+
</svg>
|
| 309 |
+
</div>
|
| 310 |
+
</div>
|
| 311 |
+
</div>
|
| 312 |
+
|
| 313 |
+
<!-- Gradient overlays -->
|
| 314 |
+
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-navy-800/90 pointer-events-none"></div>
|
| 315 |
+
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-accent-500/5 rounded-full blur-3xl pointer-events-none"></div>
|
| 316 |
+
|
| 317 |
+
<!-- Content -->
|
| 318 |
+
<div class="relative z-10 max-w-5xl mx-auto px-4 text-center pt-20">
|
| 319 |
+
<div class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-full mb-8">
|
| 320 |
+
<span class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></span>
|
| 321 |
+
<span class="text-sm text-gray-300 font-medium">Express-Transporte verfügbar</span>
|
| 322 |
+
</div>
|
| 323 |
+
|
| 324 |
+
<h1 class="text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black text-white leading-none mb-6">
|
| 325 |
+
SPEED<span class="gradient-text">55</span>
|
| 326 |
+
</h1>
|
| 327 |
+
<p class="text-lg sm:text-xl md:text-2xl text-gray-300 max-w-2xl mx-auto mb-4 leading-relaxed">
|
| 328 |
+
Express Transporte · Zuverlässig & Sicher<br>
|
| 329 |
+
<span class="text-accent-400 font-semibold">Europaweite Lieferungen</span> · Flexible Lösungen
|
| 330 |
+
</p>
|
| 331 |
+
<p class="text-sm text-gray-500 mb-10 tracking-wide">Ihr Transportpartner aus Wiesbaden – seit 2010</p>
|
| 332 |
+
|
| 333 |
+
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
| 334 |
+
<a href="#contact" class="group inline-flex items-center gap-3 px-8 py-4 bg-accent-500 hover:bg-accent-600 text-white font-bold rounded-2xl transition-all hover:shadow-2xl hover:shadow-accent-500/30 hover:-translate-y-0.5">
|
| 335 |
+
<i data-lucide="send" class="w-5 h-5"></i>
|
| 336 |
+
Transport anfragen
|
| 337 |
+
</a>
|
| 338 |
+
<a href="tel:01732697532" class="group inline-flex items-center gap-3 px-8 py-4 bg-white/5 hover:bg-white/10 border border-white/10 text-white font-bold rounded-2xl transition-all hover:-translate-y-0.5">
|
| 339 |
+
<i data-lucide="phone" class="w-5 h-5"></i>
|
| 340 |
+
0173 2697532
|
| 341 |
+
</a>
|
| 342 |
+
</div>
|
| 343 |
+
</div>
|
| 344 |
+
|
| 345 |
+
<!-- Road at bottom of hero -->
|
| 346 |
+
<div class="hero-truck-stripe">
|
| 347 |
+
<div class="road-markings"></div>
|
| 348 |
+
<div class="truck-container" style="animation-duration:10s;top:50%;transform:translateY(-50%);position:absolute;">
|
| 349 |
+
<svg width="120" height="42" viewBox="0 0 120 42" fill="none">
|
| 350 |
+
<rect x="0" y="8" width="75" height="26" rx="3" fill="#ff6b2c"/>
|
| 351 |
+
<rect x="75" y="2" width="40" height="32" rx="5" fill="#e85d20"/>
|
| 352 |
+
<rect x="83" y="8" width="24" height="14" rx="2" fill="rgba(255,255,255,0.25)"/>
|
| 353 |
+
<circle cx="18" cy="38" r="5" fill="#333"/>
|
| 354 |
+
<circle cx="105" cy="38" r="5" fill="#333"/>
|
| 355 |
+
<circle cx="18" cy="38" r="2" fill="#666"/>
|
| 356 |
+
<circle cx="105" cy="38" r="2" fill="#666"/>
|
| 357 |
+
</svg>
|
| 358 |
+
</div>
|
| 359 |
+
<div class="truck-container" style="animation-duration:14s;animation-delay:5s;top:50%;transform:translateY(-50%);position:absolute;">
|
| 360 |
+
<svg width="140" height="48" viewBox="0 0 140 48" fill="none">
|
| 361 |
+
<rect x="0" y="10" width="85" height="28" rx="3" fill="#2563eb"/>
|
| 362 |
+
<rect x="85" y="4" width="48" height="34" rx="5" fill="#1d4ed8"/>
|
| 363 |
+
<rect x="93" y="10" width="30" height="16" rx="2" fill="rgba(255,255,255,0.2)"/>
|
| 364 |
+
<circle cx="20" cy="43" r="6" fill="#333"/>
|
| 365 |
+
<circle cx="120" cy="43" r="6" fill="#333"/>
|
| 366 |
+
<circle cx="20" cy="43" r="2.5" fill="#666"/>
|
| 367 |
+
<circle cx="120" cy="43" r="2.5" fill="#666"/>
|
| 368 |
+
<text x="25" y="29" font-size="8" font-weight="bold" fill="white" font-family="Inter">S55</text>
|
| 369 |
+
</svg>
|
| 370 |
+
</div>
|
| 371 |
+
</div>
|
| 372 |
+
|
| 373 |
+
<!-- Scroll hint -->
|
| 374 |
+
<div class="absolute bottom-28 left-1/2 -translate-x-1/2 animate-bounce">
|
| 375 |
+
<i data-lucide="chevron-down" class="w-6 h-6 text-gray-500"></i>
|
| 376 |
+
</div>
|
| 377 |
+
</section>
|
| 378 |
+
|
| 379 |
+
<!-- ═══════════════ STATS ═══════════════ -->
|
| 380 |
+
<section class="relative py-16 bg-white border-b border-gray-100">
|
| 381 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 382 |
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
| 383 |
+
<div class="text-center reveal">
|
| 384 |
+
<div class="stat-number text-4xl md:text-5xl font-black mb-2" data-target="15">15+</div>
|
| 385 |
+
<div class="text-sm text-gray-500 font-medium uppercase tracking-wider">Jahre Erfahrung</div>
|
| 386 |
+
</div>
|
| 387 |
+
<div class="text-center reveal" style="transition-delay:0.1s;">
|
| 388 |
+
<div class="stat-number text-4xl md:text-5xl font-black mb-2" data-target="20">20+</div>
|
| 389 |
+
<div class="text-sm text-gray-500 font-medium uppercase tracking-wider">Fahrzeuge</div>
|
| 390 |
+
</div>
|
| 391 |
+
<div class="text-center reveal" style="transition-delay:0.2s;">
|
| 392 |
+
<div class="stat-number text-4xl md:text-5xl font-black mb-2" data-target="15">15+</div>
|
| 393 |
+
<div class="text-sm text-gray-500 font-medium uppercase tracking-wider">Länder</div>
|
| 394 |
+
</div>
|
| 395 |
+
<div class="text-center reveal" style="transition-delay:0.3s;">
|
| 396 |
+
<div class="stat-number text-4xl md:text-5xl font-black mb-2" data-target="100">100%</div>
|
| 397 |
+
<div class="text-sm text-gray-500 font-medium uppercase tracking-wider">Zuverlässigkeit</div>
|
| 398 |
+
</div>
|
| 399 |
+
</div>
|
| 400 |
+
</div>
|
| 401 |
+
</section>
|
| 402 |
+
|
| 403 |
+
<!-- ═══════════════ ABOUT ═══════════════ -->
|
| 404 |
+
<section id="about" class="py-20 md:py-28 bg-gray-50">
|
| 405 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 406 |
+
<div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
| 407 |
+
<!-- Left: Image + Badge -->
|
| 408 |
+
<div class="reveal relative">
|
| 409 |
+
<div class="relative rounded-3xl overflow-hidden shadow-2xl">
|
| 410 |
+
<img src="http://static.photos/transport/1200x630/42" alt="SPEED55 Transport" class="w-full h-auto object-cover">
|
| 411 |
+
<div class="absolute inset-0 bg-gradient-to-t from-navy-800/60 to-transparent"></div>
|
| 412 |
+
</div>
|
| 413 |
+
<div class="absolute -bottom-6 -right-4 md:right-8 bg-white p-5 rounded-2xl shadow-xl border border-gray-100 float-anim">
|
| 414 |
+
<div class="flex items-center gap-3">
|
| 415 |
+
<div class="w-12 h-12 bg-accent-500/10 rounded-xl flex items-center justify-center">
|
| 416 |
+
<i data-lucide="shield-check" class="w-6 h-6 text-accent-500"></i>
|
| 417 |
+
</div>
|
| 418 |
+
<div>
|
| 419 |
+
<div class="font-bold text-navy-800">Versichert</div>
|
| 420 |
+
<div class="text-xs text-gray-400">Güter- & Haftpflicht</div>
|
| 421 |
+
</div>
|
| 422 |
+
</div>
|
| 423 |
+
</div>
|
| 424 |
+
<div class="absolute -top-4 -left-4 bg-speed-orange p-4 rounded-2xl shadow-xl">
|
| 425 |
+
<div class="text-white font-black text-xl">15+</div>
|
| 426 |
+
<div class="text-white/80 text-xs font-medium">Jahre</div>
|
| 427 |
+
</div>
|
| 428 |
+
</div>
|
| 429 |
+
|
| 430 |
+
<!-- Right: Text -->
|
| 431 |
+
<div class="reveal" style="transition-delay:0.15s;">
|
| 432 |
+
<div class="inline-flex items-center gap-2 px-3 py-1.5 bg-accent-500/10 rounded-full mb-5">
|
| 433 |
+
<span class="w-1.5 h-1.5 bg-accent-500 rounded-full"></span>
|
| 434 |
+
<span class="text-xs font-bold text-accent-500 uppercase tracking-widest">Über Uns</span>
|
| 435 |
+
</div>
|
| 436 |
+
<h2 class="text-3xl md:text-4xl lg:text-5xl font-black text-navy-800 mb-6 leading-tight">
|
| 437 |
+
_transport neu<br>definiert.
|
| 438 |
+
</h2>
|
| 439 |
+
<p class="text-gray-600 text-lg leading-relaxed mb-6">
|
| 440 |
+
Seit <strong class="text-navy-800">2010</strong> steht SPEED55 unter der Leitung von <strong class="text-navy-800">Hüsnü Gür</strong> für zuverlässige Transport- und Logistiklösungen aus Wiesbaden.
|
| 441 |
+
</p>
|
| 442 |
+
<p class="text-gray-600 text-lg leading-relaxed mb-8">
|
| 443 |
+
Mit unserem eigenen Fuhrpark und langjähriger Erfahrung bieten wir flexible, sichere und termingerechte Transporte für Unternehmen und Privatkunden. Unsere Stärke: <strong class="text-navy-800">persönlicher Service</strong>, Pünktlichkeit und maximale Zuverlässigkeit.
|
| 444 |
+
</p>
|
| 445 |
+
|
| 446 |
+
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
|
| 447 |
+
<div class="flex items-center gap-3 p-3 bg-white rounded-xl border border-gray-100">
|
| 448 |
+
<div class="w-9 h-9 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
| 449 |
+
<i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
|
| 450 |
+
</div>
|
| 451 |
+
<span class="text-sm font-semibold text-gray-700">Eigener Fuhrpark</span>
|
| 452 |
+
</div>
|
| 453 |
+
<div class="flex items-center gap-3 p-3 bg-white rounded-xl border border-gray-100">
|
| 454 |
+
<div class="w-9 h-9 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
| 455 |
+
<i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
|
| 456 |
+
</div>
|
| 457 |
+
<span class="text-sm font-semibold text-gray-700">24/7 Erreichbar</span>
|
| 458 |
+
</div>
|
| 459 |
+
<div class="flex items-center gap-3 p-3 bg-white rounded-xl border border-gray-100">
|
| 460 |
+
<div class="w-9 h-9 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
| 461 |
+
<i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
|
| 462 |
+
</div>
|
| 463 |
+
<span class="text-sm font-semibold text-gray-700">Vollversichert</span>
|
| 464 |
+
</div>
|
| 465 |
+
<div class="flex items-center gap-3 p-3 bg-white rounded-xl border border-gray-100">
|
| 466 |
+
<div class="w-9 h-9 bg-green-100 rounded-lg flex items-center justify-center flex-shrink-0">
|
| 467 |
+
<i data-lucide="check-circle" class="w-5 h-5 text-green-600"></i>
|
| 468 |
+
</div>
|
| 469 |
+
<span class="text-sm font-semibold text-gray-700">Europaweit</span>
|
| 470 |
+
</div>
|
| 471 |
+
</div>
|
| 472 |
+
|
| 473 |
+
<a href="#contact" class="inline-flex items-center gap-2 text-accent-500 font-bold hover:text-accent-600 transition group">
|
| 474 |
+
Jetzt Kontakt aufnehmen
|
| 475 |
+
<i data-lucide="arrow-right" class="w-4 h-4 group-hover:translate-x-1 transition-transform"></i>
|
| 476 |
+
</a>
|
| 477 |
+
</div>
|
| 478 |
+
</div>
|
| 479 |
+
</div>
|
| 480 |
+
</section>
|
| 481 |
+
|
| 482 |
+
<!-- ═══════════════ EXPRESS TRANSPORT BANNER ═══════════════ -->
|
| 483 |
+
<section class="road-bg py-12 relative overflow-hidden">
|
| 484 |
+
<div class="road-markings" style="bottom:0;"></div>
|
| 485 |
+
<!-- Driving Trucks -->
|
| 486 |
+
<div class="truck-container" style="animation-duration:8s;top:50%;transform:translateY(-50%);position:absolute;">
|
| 487 |
+
<svg width="140" height="50" viewBox="0 0 140 50" fill="none">
|
| 488 |
+
<rect x="0" y="8" width="88" height="30" rx="3" fill="#ff6b2c"/>
|
| 489 |
+
<rect x="88" y="2" width="45" height="36" rx="5" fill="#e8520d"/>
|
| 490 |
+
<rect x="96" y="8" width="28" height="16" rx="2" fill="rgba(255,255,255,0.25)"/>
|
| 491 |
+
<circle cx="20" cy="42" r="6" fill="#222"/>
|
| 492 |
+
<circle cx="120" cy="42" r="6" fill="#222"/>
|
| 493 |
+
<circle cx="20" cy="42" r="2.5" fill="#555"/>
|
| 494 |
+
<circle cx="120" cy="42" r="2.5" fill="#555"/>
|
| 495 |
+
<text x="28" y="29" font-size="9" font-weight="bold" fill="white" font-family="Inter">SPEED55</text>
|
| 496 |
+
</svg>
|
| 497 |
+
</div>
|
| 498 |
+
<div class="truck-container reverse" style="animation-duration:12s;animation-delay:2s;top:50%;transform:translateY(-50%);position:absolute;">
|
| 499 |
+
<svg width="100" height="40" viewBox="0 0 100 40" fill="none" style="transform:scaleX(-1);">
|
| 500 |
+
<rect x="0" y="6" width="65" height="26" rx="3" fill="#2563eb"/>
|
| 501 |
+
<rect x="65" y="0" width="30" height="32" rx="4" fill="#1d4ed8"/>
|
| 502 |
+
<rect x="70" y="6" width="20" height="14" rx="2" fill="rgba(255,255,255,0.2)"/>
|
| 503 |
+
<circle cx="15" cy="35" r="5" fill="#222"/>
|
| 504 |
+
<circle cx="88" cy="35" r="5" fill="#222"/>
|
| 505 |
+
</svg>
|
| 506 |
+
</div>
|
| 507 |
+
|
| 508 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10 pt-2 pb-4">
|
| 509 |
+
<h2 class="text-3xl md:text-4xl font-black text-white mb-3">
|
| 510 |
+
<i data-lucide="zap" class="w-8 h-8 inline text-speed-orange mb-1"></i>
|
| 511 |
+
Express Transporte
|
| 512 |
+
</h2>
|
| 513 |
+
<p class="text-gray-400 text-lg max-w-2xl mx-auto">
|
| 514 |
+
Wenn es besonders schnell gehen muss – Unsere Expressfahrten bringen Ihre Sendung direkt, ohne Umwege zum Ziel.
|
| 515 |
+
</p>
|
| 516 |
+
</div>
|
| 517 |
+
</section>
|
| 518 |
+
|
| 519 |
+
<!-- ═══════════════ SERVICES ═══════════════ -->
|
| 520 |
+
<section id="services" class="py-20 md:py-28 bg-white">
|
| 521 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 522 |
+
<div class="text-center mb-16 reveal">
|
| 523 |
+
<div class="inline-flex items-center gap-2 px-3 py-1.5 bg-accent-500/10 rounded-full mb-5">
|
| 524 |
+
<span class="w-1.5 h-1.5 bg-accent-500 rounded-full"></span>
|
| 525 |
+
<span class="text-xs font-bold text-accent-500 uppercase tracking-widest">Leistungen</span>
|
| 526 |
+
</div>
|
| 527 |
+
<h2 class="text-3xl md:text-4xl lg:text-5xl font-black text-navy-800 mb-4">Unsere Leistungen</h2>
|
| 528 |
+
<p class="text-gray-500 text-lg max-w-2xl mx-auto">Von Expressfahrten bis zu europaweiten Transporten – wir bieten Ihnen maßgeschneiderte Logistiklösungen.</p>
|
| 529 |
+
</div>
|
| 530 |
+
|
| 531 |
+
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
|
| 532 |
+
<!-- Expressfahrten -->
|
| 533 |
+
<div class="service-card bg-white border border-gray-100 rounded-2xl p-7 reveal cursor-default">
|
| 534 |
+
<div class="service-icon w-14 h-14 bg-accent-500/10 rounded-2xl flex items-center justify-center mb-5">
|
| 535 |
+
<i data-lucide="zap" class="w-7 h-7 text-accent-500"></i>
|
| 536 |
+
</div>
|
| 537 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">Expressfahrten</h3>
|
| 538 |
+
<p class="text-gray-500 text-sm leading-relaxed mb-4">Schnelle Direktzustellung ohne Umwege. Ihre eilige Sendung kommt garantiert termingerecht an.</p>
|
| 539 |
+
<div class="flex flex-wrap gap-2">
|
| 540 |
+
<span class="px-2.5 py-1 bg-accent-500/5 text-accent-600 text-xs font-medium rounded-lg">Direktfahrt</span>
|
| 541 |
+
<span class="px-2.5 py-1 bg-accent-500/5 text-accent-600 text-xs font-medium rounded-lg">24/7</span>
|
| 542 |
+
</div>
|
| 543 |
+
</div>
|
| 544 |
+
|
| 545 |
+
<!-- Kurierdienst -->
|
| 546 |
+
<div class="service-card bg-white border border-gray-100 rounded-2xl p-7 reveal cursor-default" style="transition-delay:0.1s;">
|
| 547 |
+
<div class="service-icon w-14 h-14 bg-speed-orange/10 rounded-2xl flex items-center justify-center mb-5">
|
| 548 |
+
<i data-lucide="package" class="w-7 h-7 text-speed-orange"></i>
|
| 549 |
+
</div>
|
| 550 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">Kurierdienst</h3>
|
| 551 |
+
<p class="text-gray-500 text-sm leading-relaxed mb-4">Professionelle Kurier- und Transportlösungen für sensible und zeitkritische Sendungen.</p>
|
| 552 |
+
<div class="flex flex-wrap gap-2">
|
| 553 |
+
<span class="px-2.5 py-1 bg-speed-orange/5 text-speed-orange text-xs font-medium rounded-lg">Eilsendungen</span>
|
| 554 |
+
<span class="px-2.5 py-1 bg-speed-orange/5 text-speed-orange text-xs font-medium rounded-lg">Sicher</span>
|
| 555 |
+
</div>
|
| 556 |
+
</div>
|
| 557 |
+
|
| 558 |
+
<!-- Direkttransporte -->
|
| 559 |
+
<div class="service-card bg-white border border-gray-100 rounded-2xl p-7 reveal cursor-default" style="transition-delay:0.2s;">
|
| 560 |
+
<div class="service-icon w-14 h-14 bg-green-500/10 rounded-2xl flex items-center justify-center mb-5">
|
| 561 |
+
<i data-lucide="truck" class="w-7 h-7 text-green-600"></i>
|
| 562 |
+
</div>
|
| 563 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">Direkttransporte</h3>
|
| 564 |
+
<p class="text-gray-500 text-sm leading-relaxed mb-4">Termingerechte Lieferungen deutschlandweit – exklusiv für Ihre Sendung, kein Umladen.</p>
|
| 565 |
+
<div class="flex flex-wrap gap-2">
|
| 566 |
+
<span class="px-2.5 py-1 bg-green-500/5 text-green-600 text-xs font-medium rounded-lg">Deutschlandweit</span>
|
| 567 |
+
<span class="px-2.5 py-1 bg-green-500/5 text-green-600 text-xs font-medium rounded-lg">Exklusiv</span>
|
| 568 |
+
</div>
|
| 569 |
+
</div>
|
| 570 |
+
|
| 571 |
+
<!-- Europaweit -->
|
| 572 |
+
<div class="service-card bg-white border border-gray-100 rounded-2xl p-7 reveal cursor-default" style="transition-delay:0.3s;">
|
| 573 |
+
<div class="service-icon w-14 h-14 bg-purple-500/10 rounded-2xl flex items-center justify-center mb-5">
|
| 574 |
+
<i data-lucide="globe" class="w-7 h-7 text-purple-600"></i>
|
| 575 |
+
</div>
|
| 576 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">Europa-Transporte</h3>
|
| 577 |
+
<p class="text-gray-500 text-sm leading-relaxed mb-4">Sichere und zuverlässige Transporte innerhalb ganz Europas. Flexibel und termingerecht.</p>
|
| 578 |
+
<div class="flex flex-wrap gap-2">
|
| 579 |
+
<span class="px-2.5 py-1 bg-purple-500/5 text-purple-600 text-xs font-medium rounded-lg">15+ Länder</span>
|
| 580 |
+
<span class="px-2.5 py-1 bg-purple-500/5 text-purple-600 text-xs font-medium rounded-lg">Zollabwicklung</span>
|
| 581 |
+
</div>
|
| 582 |
+
</div>
|
| 583 |
+
</div>
|
| 584 |
+
</div>
|
| 585 |
+
</section>
|
| 586 |
+
|
| 587 |
+
<!-- ═══════════════ FLEET ═══════════════ -->
|
| 588 |
+
<section id="fleet" class="py-20 md:py-28 bg-gray-50">
|
| 589 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 590 |
+
<div class="text-center mb-16 reveal">
|
| 591 |
+
<div class="inline-flex items-center gap-2 px-3 py-1.5 bg-accent-500/10 rounded-full mb-5">
|
| 592 |
+
<span class="w-1.5 h-1.5 bg-accent-500 rounded-full"></span>
|
| 593 |
+
<span class="text-xs font-bold text-accent-500 uppercase tracking-widest">Fuhrpark</span>
|
| 594 |
+
</div>
|
| 595 |
+
<h2 class="text-3xl md:text-4xl lg:text-5xl font-black text-navy-800 mb-4">Unser Fuhrpark</h2>
|
| 596 |
+
<p class="text-gray-500 text-lg max-w-2xl mx-auto">Moderne Fahrzeuge für jeden Transportbedarf – regelmäßig gewartet und vollversichert.</p>
|
| 597 |
+
</div>
|
| 598 |
+
|
| 599 |
+
<div class="grid sm:grid-cols-2 lg:grid-cols-5 gap-5">
|
| 600 |
+
<div class="fleet-card bg-white border-2 border-gray-100 rounded-2xl p-6 text-center reveal cursor-default">
|
| 601 |
+
<div class="w-16 h-16 bg-navy-800/5 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
| 602 |
+
<i data-lucide="truck" class="w-8 h-8 text-navy-800"></i>
|
| 603 |
+
</div>
|
| 604 |
+
<h3 class="font-bold text-navy-800 mb-1">Mercedes Sprinter</h3>
|
| 605 |
+
<p class="text-xs text-gray-400">bis 3,5t · Großraum</p>
|
| 606 |
+
</div>
|
| 607 |
+
<div class="fleet-card bg-white border-2 border-gray-100 rounded-2xl p-6 text-center reveal cursor-default" style="transition-delay:0.05s;">
|
| 608 |
+
<div class="w-16 h-16 bg-navy-800/5 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
| 609 |
+
<i data-lucide="truck" class="w-8 h-8 text-navy-800"></i>
|
| 610 |
+
</div>
|
| 611 |
+
<h3 class="font-bold text-navy-800 mb-1">Mercedes Vito</h3>
|
| 612 |
+
<p class="text-xs text-gray-400">bis 2,8t · Kombi</p>
|
| 613 |
+
</div>
|
| 614 |
+
<div class="fleet-card bg-white border-2 border-gray-100 rounded-2xl p-6 text-center reveal cursor-default" style="transition-delay:0.1s;">
|
| 615 |
+
<div class="w-16 h-16 bg-navy-800/5 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
| 616 |
+
<i data-lucide="truck" class="w-8 h-8 text-navy-800"></i>
|
| 617 |
+
</div>
|
| 618 |
+
<h3 class="font-bold text-navy-800 mb-1">Opel Movano</h3>
|
| 619 |
+
<p class="text-xs text-gray-400">bis 3,5t · Hochdach</p>
|
| 620 |
+
</div>
|
| 621 |
+
<div class="fleet-card bg-white border-2 border-gray-100 rounded-2xl p-6 text-center reveal cursor-default" style="transition-delay:0.15s;">
|
| 622 |
+
<div class="w-16 h-16 bg-navy-800/5 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
| 623 |
+
<i data-lucide="truck" class="w-8 h-8 text-navy-800"></i>
|
| 624 |
+
</div>
|
| 625 |
+
<h3 class="font-bold text-navy-800 mb-1">Renault Trafic</h3>
|
| 626 |
+
<p class="text-xs text-gray-400">bis 2,8t · Kompakt</p>
|
| 627 |
+
</div>
|
| 628 |
+
<div class="fleet-card bg-white border-2 border-gray-100 rounded-2xl p-6 text-center reveal cursor-default" style="transition-delay:0.2s;">
|
| 629 |
+
<div class="w-16 h-16 bg-navy-800/5 rounded-2xl flex items-center justify-center mx-auto mb-4">
|
| 630 |
+
<i data-lucide="truck" class="w-8 h-8 text-navy-800"></i>
|
| 631 |
+
</div>
|
| 632 |
+
<h3 class="font-bold text-navy-800 mb-1">Peugeot Boxer</h3>
|
| 633 |
+
<p class="text-xs text-gray-400">bis 3,5t · Groß</p>
|
| 634 |
+
</div>
|
| 635 |
+
</div>
|
| 636 |
+
</div>
|
| 637 |
+
</section>
|
| 638 |
+
|
| 639 |
+
<!-- ═══════════════ EUROPE MAP ═══════════════ -->
|
| 640 |
+
<section id="europe" class="py-20 md:py-28 bg-white overflow-hidden">
|
| 641 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 642 |
+
<div class="grid lg:grid-cols-2 gap-12 items-center">
|
| 643 |
+
<div class="reveal">
|
| 644 |
+
<div class="inline-flex items-center gap-2 px-3 py-1.5 bg-accent-500/10 rounded-full mb-5">
|
| 645 |
+
<span class="w-1.5 h-1.5 bg-accent-500 rounded-full"></span>
|
| 646 |
+
<span class="text-xs font-bold text-accent-500 uppercase tracking-widest">Europaweit</span>
|
| 647 |
+
</div>
|
| 648 |
+
<h2 class="text-3xl md:text-4xl lg:text-5xl font-black text-navy-800 mb-6 leading-tight">
|
| 649 |
+
Transporte in<br>ganz <span class="gradient-text">Europa</span>
|
| 650 |
+
</h2>
|
| 651 |
+
<p class="text-gray-600 text-lg leading-relaxed mb-8">
|
| 652 |
+
Wir beliefern zuverlässig(destinationen in ganz Europa. Ob Deutschland, Frankreich, Niederlande, Belgien, Österreich, Schweiz oder Polen – SPEED55 bringt Ihre Ware sicher ans Ziel.
|
| 653 |
+
</p>
|
| 654 |
+
<div class="flex flex-wrap gap-3 mb-8">
|
| 655 |
+
<span class="px-4 py-2 bg-navy-800/5 text-navy-800 text-sm font-semibold rounded-xl">🇩🇪 Deutschland</span>
|
| 656 |
+
<span class="px-4 py-2 bg-navy-800/5 text-navy-800 text-sm font-semibold rounded-xl">🇫🇷 Frankreich</span>
|
| 657 |
+
<span class="px-4 py-2 bg-navy-800/5 text-navy-800 text-sm font-semibold rounded-xl">🇳🇱 Niederlande</span>
|
| 658 |
+
<span class="px-4 py-2 bg-navy-800/5 text-navy-800 text-sm font-semibold rounded-xl">🇧🇪 Belgien</span>
|
| 659 |
+
<span class="px-4 py-2 bg-navy-800/5 text-navy-800 text-sm font-semibold rounded-xl">🇦🇹 Österreich</span>
|
| 660 |
+
<span class="px-4 py-2 bg-navy-800/5 text-navy-800 text-sm font-semibold rounded-xl">🇨🇭 Schweiz</span>
|
| 661 |
+
<span class="px-4 py-2 bg-navy-800/5 text-navy-800 text-sm font-semibold rounded-xl">🇵🇱 Polen</span>
|
| 662 |
+
<span class="px-4 py-2 bg-navy-800/5 text-navy-800 text-sm font-semibold rounded-xl">🇮🇹 Italien</span>
|
| 663 |
+
<span class="px-4 py-2 bg-navy-800/5 text-navy-800 text-sm font-semibold rounded-xl">🇪🇸 Spanien</span>
|
| 664 |
+
<span class="px-4 py-2 bg-accent-500/10 text-accent-600 text-sm font-semibold rounded-xl">+ weitere</span>
|
| 665 |
+
</div>
|
| 666 |
+
<a href="#contact" class="inline-flex items-center gap-2 px-6 py-3 bg-accent-500 hover:bg-accent-600 text-white font-bold rounded-xl transition-all hover:shadow-lg hover:shadow-accent-500/30">
|
| 667 |
+
<i data-lucide="globe" class="w-5 h-5"></i>
|
| 668 |
+
Europa-Transport anfragen
|
| 669 |
+
</a>
|
| 670 |
+
</div>
|
| 671 |
+
<div class="reveal relative" style="transition-delay:0.15s;">
|
| 672 |
+
<div class="relative rounded-3xl overflow-hidden shadow-2xl">
|
| 673 |
+
<img src="http://static.photos/travel/1200x630/88" alt="Europa Transporte" class="w-full h-auto object-cover">
|
| 674 |
+
<div class="absolute inset-0 bg-gradient-to-t from-navy-800/40 to-transparent"></div>
|
| 675 |
+
</div>
|
| 676 |
+
<div class="absolute top-6 right-6 bg-white/90 backdrop-blur-sm p-4 rounded-2xl shadow-lg">
|
| 677 |
+
<div class="text-2xl font-black text-accent-500">15+</div>
|
| 678 |
+
<div class="text-xs text-gray-500 font-medium">Länder</div>
|
| 679 |
+
</div>
|
| 680 |
+
</div>
|
| 681 |
+
</div>
|
| 682 |
+
</div>
|
| 683 |
+
</section>
|
| 684 |
+
|
| 685 |
+
<!-- ═══════════════ DRIVING TRUCKS DIVIDER ═══════════════ -->
|
| 686 |
+
<section class="relative py-10 overflow-hidden" style="background:linear-gradient(135deg,#f8fafc,#eef2f7);">
|
| 687 |
+
<div class="text-center mb-6">
|
| 688 |
+
<p class="text-sm text-gray-400 uppercase tracking-widest font-bold">Unsere Fahrzeuge unterwegs</p>
|
| 689 |
+
</div>
|
| 690 |
+
<div class="relative w-full h-20">
|
| 691 |
+
<!-- Truck 1 -->
|
| 692 |
+
<div class="truck-container" style="animation-duration:12s;">
|
| 693 |
+
<svg width="180" height="65" viewBox="0 0 180 65" fill="none">
|
| 694 |
+
<rect x="0" y="12" width="115" height="38" rx="4" fill="#2563eb"/>
|
| 695 |
+
<rect x="115" y="5" width="58" height="45" rx="7" fill="#1d4ed8"/>
|
| 696 |
+
<rect x="125" y="14" width="36" height="22" rx="4" fill="rgba(255,255,255,0.2)"/>
|
| 697 |
+
<circle cx="28" cy="54" r="8" fill="#333"/>
|
| 698 |
+
<circle cx="152" cy="54" r="8" fill="#333"/>
|
| 699 |
+
<circle cx="28" cy="54" r="3.5" fill="#555"/>
|
| 700 |
+
<circle cx="152" cy="54" r="3.5" fill="#555"/>
|
| 701 |
+
<text x="40" y="37" font-size="10" font-weight="bold" fill="white" font-family="Inter, sans-serif">SPEED55</text>
|
| 702 |
+
</svg>
|
| 703 |
+
</div>
|
| 704 |
+
<!-- Truck 2 -->
|
| 705 |
+
<div class="truck-container" style="animation-duration:20s;animation-delay:4s;">
|
| 706 |
+
<svg width="120" height="48" viewBox="0 0 120 48" fill="none">
|
| 707 |
+
<rect x="0" y="8" width="75" height="30" rx="3" fill="#ff6b2c"/>
|
| 708 |
+
<rect x="75" y="2" width="40" height="36" rx="5" fill="#e8520d"/>
|
| 709 |
+
<rect x="82" y="8" width="26" height="16" rx="2" fill="rgba(255,255,255,0.25)"/>
|
| 710 |
+
<circle cx="18" cy="42" r="6" fill="#333"/>
|
| 711 |
+
<circle cx="105" cy="42" r="6" fill="#333"/>
|
| 712 |
+
<circle cx="18" cy="42" r="2.5" fill="#555"/>
|
| 713 |
+
<circle cx="105" cy="42" r="2.5" fill="#555"/>
|
| 714 |
+
</svg>
|
| 715 |
+
</div>
|
| 716 |
+
<!-- Truck 3 reverse -->
|
| 717 |
+
<div class="truck-container reverse" style="animation-duration:16s;animation-delay:1s;">
|
| 718 |
+
<svg width="100" height="42" viewBox="0 0 100 42" fill="none" style="transform:scaleX(-1);">
|
| 719 |
+
<rect x="0" y="6" width="60" height="28" rx="3" fill="#38a169"/>
|
| 720 |
+
<rect x="60" y="0" width="35" height="34" rx="4" fill="#2f855a"/>
|
| 721 |
+
<rect x="66" y="6" width="22" height="14" rx="2" fill="rgba(255,255,255,0.2)"/>
|
| 722 |
+
<circle cx="14" cy="38" r="5" fill="#333"/>
|
| 723 |
+
<circle cx="88" cy="38" r="5" fill="#333"/>
|
| 724 |
+
</svg>
|
| 725 |
+
</div>
|
| 726 |
+
<!-- Dashed road -->
|
| 727 |
+
<div style="position:absolute;bottom:6px;left:0;width:100%;height:3px;background:repeating-linear-gradient(90deg,rgba(0,0,0,0.08) 0px,rgba(0,0,0,0.08) 30px,transparent 30px,transparent 60px);"></div>
|
| 728 |
+
</div>
|
| 729 |
+
</section>
|
| 730 |
+
|
| 731 |
+
<!-- ═══════════════ CONTACT ═══════════════ -->
|
| 732 |
+
<section id="contact" class="py-20 md:py-28 bg-navy-800">
|
| 733 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 734 |
+
<div class="text-center mb-16 reveal">
|
| 735 |
+
<div class="inline-flex items-center gap-2 px-3 py-1.5 bg-accent-500/20 rounded-full mb-5">
|
| 736 |
+
<span class="w-1.5 h-1.5 bg-accent-400 rounded-full"></span>
|
| 737 |
+
<span class="text-xs font-bold text-accent-400 uppercase tracking-widest">Kontakt</span>
|
| 738 |
+
</div>
|
| 739 |
+
<h2 class="text-3xl md:text-4xl lg:text-5xl font-black text-white mb-4">Transport anfragen</h2>
|
| 740 |
+
<p class="text-gray-400 text-lg max-w-2xl mx-auto">Kontaktieren Sie uns für ein individuelles Angebot – schnell, unverbindlich und unkompliziert.</p>
|
| 741 |
+
</div>
|
| 742 |
+
|
| 743 |
+
<div class="grid lg:grid-cols-5 gap-8">
|
| 744 |
+
<!-- Contact Info -->
|
| 745 |
+
<div class="lg:col-span-2 reveal">
|
| 746 |
+
<div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-7 mb-6">
|
| 747 |
+
<h3 class="text-xl font-bold text-white mb-5">SPEED55</h3>
|
| 748 |
+
<div class="space-y-4">
|
| 749 |
+
<div class="flex items-start gap-4">
|
| 750 |
+
<div class="w-10 h-10 bg-accent-500/20 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
| 751 |
+
<i data-lucide="user" class="w-5 h-5 text-accent-400"></i>
|
| 752 |
+
</div>
|
| 753 |
+
<div>
|
| 754 |
+
<div class="text-xs text-gray-500 uppercase tracking-wider font-medium">Inhaber</div>
|
| 755 |
+
<div class="text-white font-semibold">Hüsnü Gür</div>
|
| 756 |
+
</div>
|
| 757 |
+
</div>
|
| 758 |
+
<div class="flex items-start gap-4">
|
| 759 |
+
<div class="w-10 h-10 bg-accent-500/20 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
| 760 |
+
<i data-lucide="phone" class="w-5 h-5 text-accent-400"></i>
|
| 761 |
+
</div>
|
| 762 |
+
<div>
|
| 763 |
+
<div class="text-xs text-gray-500 uppercase tracking-wider font-medium">Telefon</div>
|
| 764 |
+
<a href="tel:01732697532" class="text-white font-semibold hover:text-accent-400 transition">0173 2697532</a>
|
| 765 |
+
</div>
|
| 766 |
+
</div>
|
| 767 |
+
<div class="flex items-start gap-4">
|
| 768 |
+
<div class="w-10 h-10 bg-accent-500/20 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
| 769 |
+
<i data-lucide="mail" class="w-5 h-5 text-accent-400"></i>
|
| 770 |
+
</div>
|
| 771 |
+
<div>
|
| 772 |
+
<div class="text-xs text-gray-500 uppercase tracking-wider font-medium">E-Mail</div>
|
| 773 |
+
<a href="mailto:info@speed55.de" class="text-white font-semibold hover:text-accent-400 transition">info@speed55.de</a>
|
| 774 |
+
</div>
|
| 775 |
+
</div>
|
| 776 |
+
<div class="flex items-start gap-4">
|
| 777 |
+
<div class="w-10 h-10 bg-accent-500/20 rounded-xl flex items-center justify-center flex-shrink-0 mt-0.5">
|
| 778 |
+
<i data-lucide="map-pin" class="w-5 h-5 text-accent-400"></i>
|
| 779 |
+
</div>
|
| 780 |
+
<div>
|
| 781 |
+
<div class="text-xs text-gray-500 uppercase tracking-wider font-medium">Standort</div>
|
| 782 |
+
<div class="text-white font-semibold">Alexander-v.-Engelberg-Str. 56<br>65203 Wiesbaden</div>
|
| 783 |
+
</div>
|
| 784 |
+
</div>
|
| 785 |
+
</div>
|
| 786 |
+
</div>
|
| 787 |
+
|
| 788 |
+
<div class="bg-white/5 backdrop-blur-sm border border-white/10 rounded-2xl p-7">
|
| 789 |
+
<h4 class="text-sm font-bold text-white mb-4 uppercase tracking-wider">Schnellkontakt</h4>
|
| 790 |
+
<div class="flex flex-col gap-3">
|
| 791 |
+
<a href="https://wa.me/491732697532" class="flex items-center gap-3 px-5 py-3.5 bg-[#25D366] hover:bg-[#20bd5a] text-white font-semibold rounded-xl transition-all hover:shadow-lg hover:shadow-green-500/30">
|
| 792 |
+
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.42 4.432-9.849 9.855-9.849 2.615 0 5.073 1.02 6.924 2.874a9.825 9.825 0 012.876 6.913c-.003 5.42-4.433 9.849-9.855 9.849m8.376-18.254A12.207 12.207 0 0011.95 0C5.356 0 .003 5.349 0 11.94a11.87 11.87 0 001.596 5.945L0 24l6.305-1.655a11.88 11.88 0 005.683 1.448h.005c6.589 0 11.94-5.35 11.943-11.95a11.95 11.95 0 00-3.49-8.47"/></svg>
|
| 793 |
+
WhatsApp
|
| 794 |
+
</a>
|
| 795 |
+
<a href="tel:01732697532" class="flex items-center gap-3 px-5 py-3.5 bg-accent-500 hover:bg-accent-600 text-white font-semibold rounded-xl transition-all">
|
| 796 |
+
<i data-lucide="phone" class="w-5 h-5"></i>
|
| 797 |
+
Anrufen
|
| 798 |
+
</a>
|
| 799 |
+
</div>
|
| 800 |
+
</div>
|
| 801 |
+
</div>
|
| 802 |
+
|
| 803 |
+
<!-- Contact Form -->
|
| 804 |
+
<div class="lg:col-span-3 reveal" style="transition-delay:0.15s;">
|
| 805 |
+
<form class="bg-white rounded-2xl p-7 md:p-9 shadow-2xl" onsubmit="handleSubmit(event)">
|
| 806 |
+
<div class="grid sm:grid-cols-2 gap-5 mb-5">
|
| 807 |
+
<div>
|
| 808 |
+
<label class="block text-sm font-semibold text-gray-700 mb-2">Name *</label>
|
| 809 |
+
<input type="text" name="name" required placeholder="Ihr Name" class="w-full px-4 py-3 border-2 border-gray-100 rounded-xl focus:border-accent-500 focus:ring-0 outline-none transition text-gray-800 placeholder-gray-400">
|
| 810 |
+
</div>
|
| 811 |
+
<div>
|
| 812 |
+
<label class="block text-sm font-semibold text-gray-700 mb-2">E-Mail *</label>
|
| 813 |
+
<input type="email" name="email" required placeholder="Ihre E-Mail" class="w-full px-4 py-3 border-2 border-gray-100 rounded-xl focus:border-accent-500 focus:ring-0 outline-none transition text-gray-800 placeholder-gray-400">
|
| 814 |
+
</div>
|
| 815 |
+
</div>
|
| 816 |
+
<div class="grid sm:grid-cols-2 gap-5 mb-5">
|
| 817 |
+
<div>
|
| 818 |
+
<label class="block text-sm font-semibold text-gray-700 mb-2">Telefon</label>
|
| 819 |
+
<input type="tel" name="telefon" placeholder="Ihre Telefonnummer" class="w-full px-4 py-3 border-2 border-gray-100 rounded-xl focus:border-accent-500 focus:ring-0 outline-none transition text-gray-800 placeholder-gray-400">
|
| 820 |
+
</div>
|
| 821 |
+
<div>
|
| 822 |
+
<label class="block text-sm font-semibold text-gray-700 mb-2">Transportart</label>
|
| 823 |
+
<select name="transportart" class="w-full px-4 py-3 border-2 border-gray-100 rounded-xl focus:border-accent-500 focus:ring-0 outline-none transition text-gray-800 bg-white">
|
| 824 |
+
<option value="">Bitte wählen</option>
|
| 825 |
+
<option>Expressfahrt</option>
|
| 826 |
+
<option>Kurierdienst</option>
|
| 827 |
+
<option>Direkttransport</option>
|
| 828 |
+
<option>Europatransport</option>
|
| 829 |
+
<option>Sonstiges</option>
|
| 830 |
+
</select>
|
| 831 |
+
</div>
|
| 832 |
+
</div>
|
| 833 |
+
<div class="mb-5">
|
| 834 |
+
<label class="block text-sm font-semibold text-gray-700 mb-2">Nachricht *</label>
|
| 835 |
+
<textarea name="nachricht" rows="5" required placeholder="Beschreiben Sie Ihren Transportbedarf..." class="w-full px-4 py-3 border-2 border-gray-100 rounded-xl focus:border-accent-500 focus:ring-0 outline-none transition text-gray-800 placeholder-gray-400 resize-none"></textarea>
|
| 836 |
+
</div>
|
| 837 |
+
<div class="flex items-start gap-3 mb-6">
|
| 838 |
+
<input type="checkbox" id="privacy" required class="mt-1 w-4 h-4 accent-accent-500">
|
| 839 |
+
<label for="privacy" class="text-sm text-gray-500">Ich habe die <a href="#datenschutz" class="text-accent-500 hover:underline font-medium">Datenschutzerklärung</a> gelesen und stimme der Verarbeitung meiner Daten zu. *</label>
|
| 840 |
+
</div>
|
| 841 |
+
<button type="submit" id="submitBtn" class="w-full flex items-center justify-center gap-3 px-6 py-4 bg-accent-500 hover:bg-accent-600 text-white font-bold rounded-xl transition-all hover:shadow-lg hover:shadow-accent-500/30 text-lg">
|
| 842 |
+
<i data-lucide="send" class="w-5 h-5"></i>
|
| 843 |
+
Anfrage senden
|
| 844 |
+
</button>
|
| 845 |
+
<div id="formSuccess" class="hidden mt-4 p-4 bg-green-50 border border-green-200 rounded-xl text-green-700 font-medium text-center">
|
| 846 |
+
✓ Vielen Dank! Ihre Anfrage wurde erfolgreich gesendet.
|
| 847 |
+
</div>
|
| 848 |
+
</form>
|
| 849 |
+
</div>
|
| 850 |
+
</div>
|
| 851 |
+
</div>
|
| 852 |
+
</section>
|
| 853 |
+
|
| 854 |
+
<!-- ═══════════════ DATENSCHUTZ ═══════════════ -->
|
| 855 |
+
<section id="datenschutz" class="py-20 md:py-28 bg-gray-50">
|
| 856 |
+
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
|
| 857 |
+
<div class="inline-flex items-center gap-2 px-3 py-1.5 bg-accent-500/10 rounded-full mb-5">
|
| 858 |
+
<span class="w-1.5 h-1.5 bg-accent-500 rounded-full"></span>
|
| 859 |
+
<span class="text-xs font-bold text-accent-500 uppercase tracking-widest">Pflichtangabe</span>
|
| 860 |
+
</div>
|
| 861 |
+
<h2 class="text-3xl md:text-4xl font-black text-navy-800 mb-10">Datenschutzerklärung</h2>
|
| 862 |
+
|
| 863 |
+
<div class="bg-white rounded-2xl shadow-lg border border-gray-100 p-7 md:p-10 space-y-8 text-gray-700 leading-relaxed">
|
| 864 |
+
<div>
|
| 865 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">1. Verantwortlicher</h3>
|
| 866 |
+
<p><strong>SPEED55</strong><br>Inhaber: Hüsnü Gür<br>Alexander-v.-Engelberg-Str. 56<br>65203 Wiesbaden</p>
|
| 867 |
+
<p>E-Mail: <a href="mailto:info@speed55.de" class="text-accent-500 hover:underline">info@speed55.de</a><br>Telefon: <a href="tel:01732697532" class="text-accent-500 hover:underline">0173 2697532</a></p>
|
| 868 |
+
</div>
|
| 869 |
+
|
| 870 |
+
<div>
|
| 871 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">2. Erhebung und Speicherung personenbezogener Daten</h3>
|
| 872 |
+
<p>Beim Besuch dieser Website werden automatisch Informationen durch den Hosting-Anbieter erfasst. Dies sind insbesondere:</p>
|
| 873 |
+
<ul class="list-disc list-inside mt-2 space-y-1">
|
| 874 |
+
<li>IP-Adresse</li>
|
| 875 |
+
<li>Datum und Uhrzeit der Anfrage</li>
|
| 876 |
+
<li>Browsertyp</li>
|
| 877 |
+
<li>Betriebssystem</li>
|
| 878 |
+
<li>Referrer-URL</li>
|
| 879 |
+
</ul>
|
| 880 |
+
<p class="mt-3">Diese Daten dienen der Sicherstellung eines störungsfreien Betriebs, der Systemsicherheit sowie der technischen Administration der Website. Die Verarbeitung erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse). Die Daten werden grundsätzlich nur so lange gespeichert, wie dies zur Erreichung der genannten Zwecke erforderlich ist. Server-Logfiles werden in der Regel nach spätestens 14 Tagen gelöscht, sofern keine gesetzliche Aufbewahrungspflicht oder ein sicherheitsrelevanter Vorfall eine längere Speicherung erforderlich macht.</p>
|
| 881 |
+
</div>
|
| 882 |
+
|
| 883 |
+
<div>
|
| 884 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">3. Kontaktformular</h3>
|
| 885 |
+
<p>Wenn Sie uns per Kontaktformular Anfragen zukommen lassen, werden Ihre Angaben zwecks Bearbeitung Ihrer Anfrage gespeichert.</p>
|
| 886 |
+
<p class="mt-2">Die Verarbeitung erfolgt auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO, sofern Ihre Anfrage auf den Abschluss oder die Durchführung eines Vertrags gerichtet ist, oder auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO aufgrund unseres berechtigten Interesses an der Bearbeitung von Anfragen. Die Daten werden gelöscht, sobald die Bearbeitung Ihrer Anfrage abgeschlossen ist und keine gesetzlichen Aufbewahrungspflichten entgegenstehen.</p>
|
| 887 |
+
</div>
|
| 888 |
+
|
| 889 |
+
<div>
|
| 890 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">4. Kontakt per E-Mail</h3>
|
| 891 |
+
<p>Bei Kontaktaufnahme per E-Mail werden die übermittelten Daten gespeichert, um Ihre Anfrage zu bearbeiten.</p>
|
| 892 |
+
<p class="mt-2">Die Verarbeitung erfolgt auf Grundlage von Art. 6 Abs. 1 lit. b DSGVO oder Art. 6 Abs. 1 lit. f DSGVO. Die Daten werden gelöscht, sobald sie für die Erreichung des Zwecks ihrer Erhebung nicht mehr erforderlich sind und keine gesetzlichen Aufbewahrungspflichten bestehen.</p>
|
| 893 |
+
</div>
|
| 894 |
+
|
| 895 |
+
<div>
|
| 896 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">5. Cookies und Tracking-Technologien</h3>
|
| 897 |
+
<p>Diese Website kann technisch notwendige Cookies verwenden, um die Funktionalität und Sicherheit der Website zu gewährleisten. Die Verarbeitung erfolgt auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO.</p>
|
| 898 |
+
<p class="mt-2">Sofern darüber hinaus Cookies oder vergleichbare Technologien zu Analyse-, Statistik- oder Marketingzwecken eingesetzt werden, erfolgt dies ausschließlich auf Grundlage Ihrer Einwilligung gemäß Art. 6 Abs. 1 lit. a DSGVO sowie § 25 Abs. 1 TTDSG. Eine erteilte Einwilligung können Sie jederzeit mit Wirkung für die Zukunft widerrufen, indem Sie die entsprechenden Einstellungen Ihres Cookie-Banners oder Browsers anpassen.</p>
|
| 899 |
+
<p class="mt-2">Sie können Ihren Browser zudem so konfigurieren, dass Sie über das Setzen von Cookies informiert werden, Cookies nur im Einzelfall erlauben oder die Annahme von Cookies generell ausschließen. Bei der Deaktivierung von Cookies kann die Funktionalität dieser Website eingeschränkt sein.</p>
|
| 900 |
+
</div>
|
| 901 |
+
|
| 902 |
+
<div>
|
| 903 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">6. Google Maps</h3>
|
| 904 |
+
<p>Diese Website nutzt Google Maps zur Darstellung interaktiver Karten. Anbieter ist Google Ireland Limited, Gordon House, Barrow Street, Dublin 4, Irland.</p>
|
| 905 |
+
<p class="mt-2">Beim Aufruf der Karte können personenbezogene Daten an Google übertragen werden, insbesondere Ihre IP-Adresse und technische Nutzungsdaten. Die Nutzung von Google Maps erfolgt auf Grundlage Ihrer Einwilligung gemäß Art. 6 Abs. 1 lit. a DSGVO, sofern eine entsprechende Einwilligung abgefragt wird. Andernfalls erfolgt die Verarbeitung auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO aufgrund unseres berechtigten Interesses an einer ansprechenden Darstellung unserer Online-Angebote.</p>
|
| 906 |
+
<p class="mt-2">Es kann nicht ausgeschlossen werden, dass Daten an Server der Google LLC in den USA übertragen werden. Weitere Informationen finden Sie in der Datenschutzerklärung von Google unter: <a href="https://policies.google.com/privacy" target="_blank" class="text-accent-500 hover:underline">https://policies.google.com/privacy</a></p>
|
| 907 |
+
</div>
|
| 908 |
+
|
| 909 |
+
<div>
|
| 910 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">7. Auftragsverarbeitung und Empfänger von Daten</h3>
|
| 911 |
+
<p>Zur Bereitstellung dieser Website sowie zur Bearbeitung von Anfragen können externe Dienstleister eingesetzt werden, beispielsweise Hosting-Anbieter oder IT-Dienstleister. Soweit diese personenbezogene Daten in unserem Auftrag verarbeiten, erfolgt dies auf Grundlage eines Vertrags zur Auftragsverarbeitung gemäß Art. 28 DSGVO.</p>
|
| 912 |
+
<p class="mt-2">Eine Weitergabe personenbezogener Daten an Dritte erfolgt nur, wenn dies gesetzlich erlaubt ist, zur Vertragserfüllung erforderlich ist, eine rechtliche Verpflichtung besteht oder Sie ausdrücklich eingewilligt haben.</p>
|
| 913 |
+
</div>
|
| 914 |
+
|
| 915 |
+
<div>
|
| 916 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">8. SSL-/TLS-Verschlüsselung</h3>
|
| 917 |
+
<p>Diese Website nutzt aus Sicherheitsgründen eine SSL- bzw. TLS-Verschlüsselung.</p>
|
| 918 |
+
</div>
|
| 919 |
+
|
| 920 |
+
<div>
|
| 921 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">9. Speicherdauer</h3>
|
| 922 |
+
<p>Personenbezogene Daten werden nur so lange gespeichert, wie dies für die jeweiligen Verarbeitungszwecke erforderlich ist oder gesetzliche Aufbewahrungsfristen bestehen. Nach Wegfall des jeweiligen Zwecks bzw. Ablauf gesetzlicher Fristen werden die Daten entsprechend den gesetzlichen Vorschriften gelöscht oder gesperrt.</p>
|
| 923 |
+
</div>
|
| 924 |
+
|
| 925 |
+
<div>
|
| 926 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">10. Ihre Rechte</h3>
|
| 927 |
+
<p>Sie haben jederzeit das Recht auf:</p>
|
| 928 |
+
<ul class="list-disc list-inside mt-2 space-y-1">
|
| 929 |
+
<li>Auskunft gemäß Art. 15 DSGVO</li>
|
| 930 |
+
<li>Berichtigung gemäß Art. 16 DSGVO</li>
|
| 931 |
+
<li>Löschung gemäß Art. 17 DSGVO</li>
|
| 932 |
+
<li>Einschränkung der Verarbeitung gemäß Art. 18 DSGVO</li>
|
| 933 |
+
<li>Datenübertragbarkeit gemäß Art. 20 DSGVO</li>
|
| 934 |
+
<li>Widerruf erteilter Einwilligungen gemäß Art. 7 Abs. 3 DSGVO</li>
|
| 935 |
+
</ul>
|
| 936 |
+
<p class="mt-3">Sofern die Verarbeitung Ihrer personenbezogenen Daten auf Grundlage berechtigter Interessen gemäß Art. 6 Abs. 1 lit. f DSGVO erfolgt, haben Sie gemäß Art. 21 DSGVO das Recht, Widerspruch gegen die Verarbeitung einzulegen, soweit Gründe vorliegen, die sich aus Ihrer besonderen Situation ergeben.</p>
|
| 937 |
+
<p class="mt-2">Erteilte Einwilligungen können Sie jederzeit mit Wirkung für die Zukunft widerrufen. Die Rechtmäßigkeit der bis zum Widerruf erfolgten Verarbeitung bleibt hiervon unberührt.</p>
|
| 938 |
+
<p class="mt-2">Zur Ausübung Ihrer Rechte können Sie sich jederzeit an die oben genannten Kontaktdaten wenden.</p>
|
| 939 |
+
</div>
|
| 940 |
+
|
| 941 |
+
<div>
|
| 942 |
+
<h3 class="text-lg font-bold text-navy-800 mb-3">11. Beschwerderecht</h3>
|
| 943 |
+
<p>Sie haben das Recht, sich bei einer Datenschutzaufsichtsbehörde zu beschweren. Zuständig ist insbesondere die Datenschutzaufsichtsbehörde Ihres gewöhnlichen Aufenthaltsortes, Ihres Arbeitsplatzes oder des Orts des mutmaßlichen Verstoßes gemäß Art. 77 DSGVO.</p>
|
| 944 |
+
</div>
|
| 945 |
+
</div>
|
| 946 |
+
</div>
|
| 947 |
+
</section>
|
| 948 |
+
|
| 949 |
+
<!-- ═══════════════ IMPRESSUM ═══════════════ -->
|
| 950 |
+
<section id="impressum" class="py-16 bg-white">
|
| 951 |
+
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 952 |
+
<h2 class="text-2xl font-black text-navy-800 mb-6">Impressum</h2>
|
| 953 |
+
<div class="text-gray-600 space-y-2">
|
| 954 |
+
<p><strong class="text-navy-800">SPEED55</strong></p>
|
| 955 |
+
<p>Inhaber: Hüsnü Gür</p>
|
| 956 |
+
<p>Alexander-v.-Engelberg-Str. 56</p>
|
| 957 |
+
<p>65203 Wiesbaden</p>
|
| 958 |
+
<p>Telefon: <a href="tel:01732697532" class="text-accent-500 hover:underline">0173 2697532</a></p>
|
| 959 |
+
<p>E-Mail: <a href="mailto:info@speed55.de" class="text-accent-500 hover:underline">info@speed55.de</a></p>
|
| 960 |
+
</div>
|
| 961 |
+
</div>
|
| 962 |
+
</section>
|
| 963 |
+
|
| 964 |
+
<!-- ═══════════════ FOOTER ═══════════════ -->
|
| 965 |
+
<footer class="bg-navy-900 pt-16 pb-8">
|
| 966 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 967 |
+
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-12">
|
| 968 |
+
<!-- Brand -->
|
| 969 |
+
<div>
|
| 970 |
+
<div class="flex items-center gap-3 mb-5">
|
| 971 |
+
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-accent-400 to-accent-600 flex items-center justify-center">
|
| 972 |
+
<svg viewBox="0 0 40 40" class="w-6 h-6" fill="white"><path d="M8 28L18 10L28 28H8Z" opacity="0.3"/><path d="M14 28L22 14L30 28H14Z"/></svg>
|
| 973 |
+
</div>
|
| 974 |
+
<span class="text-xl font-black text-white">SPEED<span class="text-accent-400">55</span></span>
|
| 975 |
+
</div>
|
| 976 |
+
<p class="text-gray-400 text-sm leading-relaxed">Express Transporte & Logistik – zuverlässig, sicher und europaweit seit 2010.</p>
|
| 977 |
+
</div>
|
| 978 |
+
|
| 979 |
+
<!-- Navigation -->
|
| 980 |
+
<div>
|
| 981 |
+
<h4 class="text-sm font-bold text-white uppercase tracking-wider mb-5">Navigation</h4>
|
| 982 |
+
<ul class="space-y-2.5">
|
| 983 |
+
<li><a href="#home" class="text-sm text-gray-400 hover:text-accent-400 transition">Startseite</a></li>
|
| 984 |
+
<li><a href="#about" class="text-sm text-gray-400 hover:text-accent-400 transition">Über Uns</a></li>
|
| 985 |
+
<li><a href="#services" class="text-sm text-gray-400 hover:text-accent-400 transition">Leistungen</a></li>
|
| 986 |
+
<li><a href="#fleet" class="text-sm text-gray-400 hover:text-accent-400 transition">Fuhrpark</a></li>
|
| 987 |
+
<li><a href="#contact" class="text-sm text-gray-400 hover:text-accent-400 transition">Kontakt</a></li>
|
| 988 |
+
</ul>
|
| 989 |
+
</div>
|
| 990 |
+
|
| 991 |
+
<!-- Leistungen -->
|
| 992 |
+
<div>
|
| 993 |
+
<h4 class="text-sm font-bold text-white uppercase tracking-wider mb-5">Leistungen</h4>
|
| 994 |
+
<ul class="space-y-2.5">
|
| 995 |
+
<li><a href="#services" class="text-sm text-gray-400 hover:text-accent-400 transition">Expressfahrten</a></li>
|
| 996 |
+
<li><a href="#services" class="text-sm text-gray-400 hover:text-accent-400 transition">Kurierdienst</a></li>
|
| 997 |
+
<li><a href="#services" class="text-sm text-gray-400 hover:text-accent-400 transition">Direkttransporte</a></li>
|
| 998 |
+
<li><a href="#services" class="text-sm text-gray-400 hover:text-accent-400 transition">Europa-Transporte</a></li>
|
| 999 |
+
</ul>
|
| 1000 |
+
</div>
|
| 1001 |
+
|
| 1002 |
+
<!-- Rechtliches -->
|
| 1003 |
+
<div>
|
| 1004 |
+
<h4 class="text-sm font-bold text-white uppercase tracking-wider mb-5">Rechtliches</h4>
|
| 1005 |
+
<ul class="space-y-2.5">
|
| 1006 |
+
<li><a href="#datenschutz" class="text-sm text-gray-400 hover:text-accent-400 transition">Datenschutzerklärung</a></li>
|
| 1007 |
+
<li><a href="#impressum" class="text-sm text-gray-400 hover:text-accent-400 transition">Impressum</a></li>
|
| 1008 |
+
</ul>
|
| 1009 |
+
</div>
|
| 1010 |
+
</div>
|
| 1011 |
+
|
| 1012 |
+
<div class="border-t border-white/10 pt-8 flex flex-col md:flex-row items-center justify-between gap-4">
|
| 1013 |
+
<p class="text-sm text-gray-500">© 2025 SPEED55 Transport & Logistik Wiesbaden. Alle Rechte vorbehalten.</p>
|
| 1014 |
+
<div class="flex items-center gap-4">
|
| 1015 |
+
<a href="#datenschutz" class="text-xs text-gray-500 hover:text-accent-400 transition">Datenschutz</a>
|
| 1016 |
+
<span class="text-gray-700">|</span>
|
| 1017 |
+
<a href="#impressum" class="text-xs text-gray-500 hover:text-accent-400 transition">Impressum</a>
|
| 1018 |
+
</div>
|
| 1019 |
+
</div>
|
| 1020 |
+
</div>
|
| 1021 |
+
</footer>
|
| 1022 |
+
|
| 1023 |
+
<!-- ═══════════════ WHATSAPP BUTTON ═══════════════ -->
|
| 1024 |
+
<a href="https://wa.me/491732697532" target="_blank" class="whatsapp-btn fixed bottom-6 right-6 z-50 flex items-center gap-2 px-5 py-3.5 bg-[#25D366] hover:bg-[#20bd5a] text-white font-bold rounded-full shadow-xl hover:shadow-2xl transition-all hover:scale-105">
|
| 1025 |
+
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.42 4.432-9.849 9.855-9.849 2.615 0 5.073 1.02 6.924 2.874a9.825 9.825 0 012.876 6.913c-.003 5.42-4.433 9.849-9.855 9.849m8.376-18.254A12.207 12.207 0 0011.95 0C5.356 0 .003 5.349 0 11.94a11.87 11.87 0 001.596 5.945L0 24l6.305-1.655a11.88 11.88 0 005.683 1.448h.005c6.589 0 11.94-5.35 11.943-11.95a11.95 11.95 0 00-3.49-8.47"/></svg>
|
| 1026 |
+
<span class="hidden sm:inline">WhatsApp</span>
|
| 1027 |
+
</a>
|
| 1028 |
+
|
| 1029 |
+
<!-- ═══════════════ COOKIE BANNER ═══════════════ -->
|
| 1030 |
+
<div id="cookieBanner" class="cookie-banner fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 shadow-2xl p-5 md:p-6" style="display:none;">
|
| 1031 |
+
<div class="max-w-5xl mx-auto flex flex-col md:flex-row items-start md:items-center gap-4">
|
| 1032 |
+
<div class="flex-1">
|
| 1033 |
+
<p class="text-sm text-gray-700 leading-relaxed">
|
| 1034 |
+
🍪 Diese Website verwendet technisch notwendige Cookies, um die Funktionalität und Sicherheit der Website zu gewährleisten. Weitere Informationen finden Sie in unserer <a href="#datenschutz" class="text-accent-500 hover:underline font-medium">Datenschutzerklärung</a>.
|
| 1035 |
+
</p>
|
| 1036 |
+
</div>
|
| 1037 |
+
<div class="flex gap-3 flex-shrink-0">
|
| 1038 |
+
<button onclick="acceptCookies()" class="px-6 py-2.5 bg-accent-500 hover:bg-accent-600 text-white font-semibold rounded-xl transition-all text-sm">Akzeptieren</button>
|
| 1039 |
+
</div>
|
| 1040 |
+
</div>
|
| 1041 |
+
</div>
|
| 1042 |
+
|
| 1043 |
+
<!-- ═══════════════ JAVASCRIPT ═══════════════ -->
|
| 1044 |
+
<script>
|
| 1045 |
+
// Initialize Lucide Icons
|
| 1046 |
+
lucide.createIcons();
|
| 1047 |
+
|
| 1048 |
+
// ── Mobile Menu ──
|
| 1049 |
+
const menuToggle = document.getElementById('menuToggle');
|
| 1050 |
+
const menuClose = document.getElementById('menuClose');
|
| 1051 |
+
const mobileMenu = document.getElementById('mobileMenu');
|
| 1052 |
+
|
| 1053 |
+
menuToggle.addEventListener('click', () => mobileMenu.classList.add('open'));
|
| 1054 |
+
menuClose.addEventListener('click', () => mobileMenu.classList.remove('open'));
|
| 1055 |
+
|
| 1056 |
+
document.querySelectorAll('.mobile-nav').forEach(link => {
|
| 1057 |
+
link.addEventListener('click', () => mobileMenu.classList.remove('open'));
|
| 1058 |
+
});
|
| 1059 |
+
|
| 1060 |
+
// ── Scroll Reveal ──
|
| 1061 |
+
const revealElements = document.querySelectorAll('.reveal');
|
| 1062 |
+
const revealObserver = new IntersectionObserver((entries) => {
|
| 1063 |
+
entries.forEach(entry => {
|
| 1064 |
+
if (entry.isIntersecting) {
|
| 1065 |
+
entry.target.classList.add('visible');
|
| 1066 |
+
revealObserver.unobserve(entry.target);
|
| 1067 |
+
}
|
| 1068 |
+
});
|
| 1069 |
+
}, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });
|
| 1070 |
+
|
| 1071 |
+
revealElements.forEach(el => revealObserver.observe(el));
|
| 1072 |
+
|
| 1073 |
+
// ── Header on Scroll ──
|
| 1074 |
+
const header = document.getElementById('header');
|
| 1075 |
+
window.addEventListener('scroll', () => {
|
| 1076 |
+
if (window.scrollY > 80) {
|
| 1077 |
+
header.style.background = 'rgba(4,12,23,0.98)';
|
| 1078 |
+
header.style.boxShadow = '0 4px 30px rgba(0,0,0,0.3)';
|
| 1079 |
+
} else {
|
| 1080 |
+
header.style.background = 'rgba(4,12,23,0.95)';
|
| 1081 |
+
header.style.boxShadow = 'none';
|
| 1082 |
+
}
|
| 1083 |
+
});
|
| 1084 |
+
|
| 1085 |
+
// ── Form Submit ──
|
| 1086 |
+
function handleSubmit(e) {
|
| 1087 |
+
e.preventDefault();
|
| 1088 |
+
const btn = document.getElementById('submitBtn');
|
| 1089 |
+
const success = document.getElementById('formSuccess');
|
| 1090 |
+
|
| 1091 |
+
btn.innerHTML = '<svg class="animate-spin w-5 h-5" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3" fill="none" stroke-dasharray="32" stroke-dashoffset="12"/></svg> Wird gesendet...';
|
| 1092 |
+
btn.disabled = true;
|
| 1093 |
+
|
| 1094 |
+
setTimeout(() => {
|
| 1095 |
+
btn.innerHTML = '<i data-lucide="check-circle" class="w-5 h-5"></i> Gesendet!';
|
| 1096 |
+
btn.classList.remove('bg-accent-500', 'hover:bg-accent-600');
|
| 1097 |
+
btn.classList.add('bg-green-500');
|
| 1098 |
+
success.classList.remove('hidden');
|
| 1099 |
+
lucide.createIcons();
|
| 1100 |
+
|
| 1101 |
+
setTimeout(() => {
|
| 1102 |
+
e.target.reset();
|
| 1103 |
+
btn.innerHTML = '<i data-lucide="send" class="w-5 h-5"></i> Anfrage senden';
|
| 1104 |
+
btn.classList.remove('bg-green-500');
|
| 1105 |
+
btn.classList.add('bg-accent-500', 'hover:bg-accent-600');
|
| 1106 |
+
btn.disabled = false;
|
| 1107 |
+
success.classList.add('hidden');
|
| 1108 |
+
lucide.createIcons();
|
| 1109 |
+
}, 4000);
|
| 1110 |
+
}, 2000);
|
| 1111 |
+
}
|
| 1112 |
+
|
| 1113 |
+
// ── Cookie Banner ──
|
| 1114 |
+
function acceptCookies() {
|
| 1115 |
+
document.getElementById('cookieBanner').style.display = 'none';
|
| 1116 |
+
localStorage.setItem('cookies_accepted', 'true');
|
| 1117 |
+
}
|
| 1118 |
+
|
| 1119 |
+
if (!localStorage.getItem('cookies_accepted')) {
|
| 1120 |
+
setTimeout(() => {
|
| 1121 |
+
document.getElementById('cookieBanner').style.display = 'block';
|
| 1122 |
+
}, 1500);
|
| 1123 |
+
}
|
| 1124 |
+
|
| 1125 |
+
// ── Smooth Scroll ──
|
| 1126 |
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
| 1127 |
+
anchor.addEventListener('click', function(e) {
|
| 1128 |
+
e.preventDefault();
|
| 1129 |
+
const target = document.querySelector(this.getAttribute('href'));
|
| 1130 |
+
if (target) {
|
| 1131 |
+
const offset = 80;
|
| 1132 |
+
const pos = target.getBoundingClientRect().top + window.pageYOffset - offset;
|
| 1133 |
+
window.scrollTo({ top: pos, behavior: 'smooth' });
|
| 1134 |
+
}
|
| 1135 |
+
});
|
| 1136 |
+
});
|
| 1137 |
+
|
| 1138 |
+
// ── Truck animation speed adjustment on scroll ──
|
| 1139 |
+
let lastScroll = 0;
|
| 1140 |
+
window.addEventListener('scroll', () => {
|
| 1141 |
+
const scrollSpeed = Math.abs(window.scrollY - lastScroll);
|
| 1142 |
+
lastScroll = window.scrollY;
|
| 1143 |
+
|
| 1144 |
+
// Faster animation when user is actively scrolling
|
| 1145 |
+
document.querySelectorAll('.truck-container').forEach(truck => {
|
| 1146 |
+
const currentDuration = parseFloat(getComputedStyle(truck).animationDuration);
|
| 1147 |
+
// Don't modify, keep natural speed
|
| 1148 |
+
});
|
| 1149 |
+
});
|
| 1150 |
+
</script>
|
| 1151 |
+
<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
|
| 1152 |
+
</body>
|
| 1153 |
+
</html>
|