diversen

frontend/src/views/Home.vue

@@ -1,46 +1,70 @@
 <template>
   <div class="home">
     <div class="hero">
-      <h1>🚲 Welkom bij Fiets Service Centrum</h1>
-      <p>Professionele fietsreparatie en onderhoudsdiensten</p>
+      <h1>{{ content.home_hero_title || 'Welkom bij Fiets Service Centrum' }}</h1>
+      <p>{{ content.home_hero_subtitle || 'Professionele fietsreparatie en onderhoudsdiensten' }}</p>
     </div>
-    
+
     <div class="features">
       <div class="feature-card">
-        <h3>🔧 Deskundige Reparaties</h3>
-        <p>Professionele fietsmonteurs met jarenlange ervaring</p>
+        <h3>{{ content.home_feature_1_title || '🔧 Deskundige Reparaties' }}</h3>
+        <p>{{ content.home_feature_1_text || 'Professionele fietsmonteurs met jarenlange ervaring' }}</p>
       </div>
-      
+
       <div class="feature-card">
-        <h3>⚡ Snelle Service</h3>
-        <p>Snelle doorlooptijden voor de meeste reparaties</p>
+        <h3>{{ content.home_feature_2_title || '⚡ Snelle Service' }}</h3>
+        <p>{{ content.home_feature_2_text || 'Snelle doorlooptijden voor de meeste reparaties' }}</p>
       </div>
-      
+
       <div class="feature-card">
-        <h3>💰 Eerlijke Prijzen</h3>
-        <p>Concurrerende tarieven zonder verborgen kosten</p>
+        <h3>{{ content.home_feature_3_title || '💰 Eerlijke Prijzen' }}</h3>
+        <p>{{ content.home_feature_3_text || 'Concurrerende tarieven zonder verborgen kosten' }}</p>
       </div>
-      
+
       <div class="feature-card">
-        <h3>📅 Eenvoudig Boeken</h3>
-        <p>Eenvoudig online boekingssysteem</p>
+        <h3>{{ content.home_feature_4_title || '📅 Eenvoudig Boeken' }}</h3>
+        <p>{{ content.home_feature_4_text || '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>
+      <h2>{{ content.home_cta_title || 'Klaar om je fiets te laten repareren?' }}</h2>
+      <p>{{ content.home_cta_subtitle || '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>
+        <router-link to="/booking" class="cta-button">{{ content.home_cta_button_1_text || 'Nu Service Boeken' }}</router-link>
+        <router-link to="/pricelist" class="cta-button secondary">{{ content.home_cta_button_2_text || '💰 Prijslijst Bekijken' }}</router-link>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import { ref, onMounted } from 'vue'
+
 export default {
-  name: 'Home'
+  name: 'Home',
+  setup() {
+    const content = ref({})
+
+    const fetchContent = async () => {
+      try {
+        const response = await fetch('/api/public/page-content')
+        if (response.ok) {
+          content.value = await response.json()
+        }
+      } catch (error) {
+        console.error('Failed to fetch page content:', error)
+      }
+    }
+
+    onMounted(() => {
+      fetchContent()
+    })
+
+    return {
+      content
+    }
+  }
 }
 </script>
 
@@ -50,11 +74,12 @@ export default {
 }
 
 .hero {
-  background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
+  background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
   color: white;
   padding: 4rem 2rem;
   border-radius: 15px;
   margin-bottom: 3rem;
+  box-shadow: 0 4px 20px rgba(44, 95, 93, 0.3);
 }
 
 .hero h1 {
@@ -87,30 +112,31 @@ export default {
 }
 
 .feature-card h3 {
-  color: #2c3e50;
+  color: var(--primary-color);
   margin-bottom: 1rem;
   font-size: 1.3rem;
 }
 
 .feature-card p {
-  color: #666;
+  color: var(--text-gray);
   line-height: 1.6;
 }
 
 .cta {
-  background: #f8f9fa;
+  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
   padding: 3rem 2rem;
   border-radius: 15px;
-  border: 2px dashed #3498db;
+  border: 3px solid var(--primary-color);
+  box-shadow: 0 4px 20px rgba(44, 95, 93, 0.15);
 }
 
 .cta h2 {
-  color: #2c3e50;
+  color: var(--primary-color);
   margin-bottom: 1rem;
 }
 
 .cta p {
-  color: #666;
+  color: var(--text-gray);
   font-size: 1.1rem;
   margin-bottom: 2rem;
 }
@@ -123,25 +149,30 @@ export default {
 
 .cta-button {
   display: inline-block;
-  background: #3498db;
+  background: var(--primary-color);
   color: white;
   padding: 1rem 2rem;
   text-decoration: none;
   border-radius: 10px;
   font-size: 1.1rem;
   font-weight: bold;
-  transition: background-color 0.3s ease;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 10px rgba(44, 95, 93, 0.3);
 }
 
 .cta-button:hover {
-  background: #2980b9;
+  background: var(--primary-dark);
+  transform: translateY(-2px);
+  box-shadow: 0 6px 15px rgba(44, 95, 93, 0.4);
 }
 
 .cta-button.secondary {
-  background: #e74c3c;
+  background: var(--secondary-color);
+  box-shadow: 0 4px 10px rgba(139, 111, 71, 0.3);
 }
 
 .cta-button.secondary:hover {
-  background: #c0392b;
+  background: var(--secondary-dark);
+  box-shadow: 0 6px 15px rgba(139, 111, 71, 0.4);
 }
 </style>