Init commit

2025-08-27 09:17:56 +02:00
commit aee2d81e26
109 changed files with 18826 additions and 0 deletions
@@ -0,0 +1,147 @@
+<template>
+  <div class="home">
+    <div class="hero">
+      <h1>🚲 Welkom bij Fiets Service Centrum</h1>
+      <p>Professionele fietsreparatie en onderhoudsdiensten</p>
+    </div>
+    
+    <div class="features">
+      <div class="feature-card">
+        <h3>🔧 Deskundige Reparaties</h3>
+        <p>Professionele fietsmonteurs met jarenlange ervaring</p>
+      </div>
+      
+      <div class="feature-card">
+        <h3>⚡ Snelle Service</h3>
+        <p>Snelle doorlooptijden voor de meeste reparaties</p>
+      </div>
+      
+      <div class="feature-card">
+        <h3>💰 Eerlijke Prijzen</h3>
+        <p>Concurrerende tarieven zonder verborgen kosten</p>
+      </div>
+      
+      <div class="feature-card">
+        <h3>📅 Eenvoudig Boeken</h3>
+        <p>Eenvoudig online boekingssysteem</p>
+      </div>
+    </div>
+    
+    <div class="cta">
+      <h2>Klaar om je fiets te laten repareren?</h2>
+      <p>Boek je afspraak online en krijg je fiets weer in topconditie.</p>
+      <div class="cta-buttons">
+        <router-link to="/booking" class="cta-button">Nu Service Boeken</router-link>
+        <router-link to="/pricelist" class="cta-button secondary">💰 Prijslijst Bekijken</router-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Home'
+}
+</script>
+
+<style scoped>
+.home {
+  text-align: center;
+}
+
+.hero {
+  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+  color: white;
+  padding: 4rem 2rem;
+  border-radius: 15px;
+  margin-bottom: 3rem;
+}
+
+.hero h1 {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.hero p {
+  font-size: 1.2rem;
+  opacity: 0.9;
+}
+
+.features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  margin-bottom: 3rem;
+}
+
+.feature-card {
+  background: white;
+  padding: 2rem;
+  border-radius: 10px;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+  transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+  transform: translateY(-5px);
+}
+
+.feature-card h3 {
+  color: #2c3e50;
+  margin-bottom: 1rem;
+  font-size: 1.3rem;
+}
+
+.feature-card p {
+  color: #666;
+  line-height: 1.6;
+}
+
+.cta {
+  background: #f8f9fa;
+  padding: 3rem 2rem;
+  border-radius: 15px;
+  border: 2px dashed #3498db;
+}
+
+.cta h2 {
+  color: #2c3e50;
+  margin-bottom: 1rem;
+}
+
+.cta p {
+  color: #666;
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+}
+
+.cta-buttons {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.cta-button {
+  display: inline-block;
+  background: #3498db;
+  color: white;
+  padding: 1rem 2rem;
+  text-decoration: none;
+  border-radius: 10px;
+  font-size: 1.1rem;
+  font-weight: bold;
+  transition: background-color 0.3s ease;
+}
+
+.cta-button:hover {
+  background: #2980b9;
+}
+
+.cta-button.secondary {
+  background: #e74c3c;
+}
+
+.cta-button.secondary:hover {
+  background: #c0392b;
+}
+</style>