Contact section

frontend/src/views/Admin.vue

@@ -285,6 +285,33 @@
             </div>
           </div>
         </div>
+
+        <!-- Contact Section -->
+        <div class="content-section">
+          <h3>Openingspagina - Contact Sectie</h3>
+          <div class="content-form">
+            <div class="form-group">
+              <label>Hoofdtekst (Header)</label>
+              <input type="text" :value="getContentValue('home_contact_title')" @input="updateContentValue('home_contact_title', $event.target.value)" @blur="savePageContent('home_contact_title')" />
+            </div>
+            <div class="form-group">
+              <label>Onderschrift</label>
+              <textarea :value="getContentValue('home_contact_subtitle')" @input="updateContentValue('home_contact_subtitle', $event.target.value)" @blur="savePageContent('home_contact_subtitle')" rows="2"></textarea>
+            </div>
+            <div class="form-group">
+              <label>Telefoonnummer</label>
+              <input type="text" :value="getContentValue('home_contact_phone')" @input="updateContentValue('home_contact_phone', $event.target.value)" @blur="savePageContent('home_contact_phone')" placeholder="+31 6 12345678" />
+            </div>
+            <div class="form-group">
+              <label>E-mailadres</label>
+              <input type="email" :value="getContentValue('home_contact_email')" @input="updateContentValue('home_contact_email', $event.target.value)" @blur="savePageContent('home_contact_email')" placeholder="info@fiet-service.nl" />
+            </div>
+            <div class="form-group">
+              <label>Adres</label>
+              <input type="text" :value="getContentValue('home_contact_address')" @input="updateContentValue('home_contact_address', $event.target.value)" @blur="savePageContent('home_contact_address')" placeholder="Fietsstraat 123, 1234 AB Amsterdam" />
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 

frontend/src/views/Home.vue

@@ -35,6 +35,37 @@
         <router-link to="/pricelist" class="cta-button secondary">{{ content.home_cta_button_2_text || '💰 Prijslijst Bekijken' }}</router-link>
       </div>
     </div>
+
+    <div class="contact-section">
+      <h2>{{ content.home_contact_title || 'Neem Contact Op' }}</h2>
+      <p class="contact-subtitle">{{ content.home_contact_subtitle || 'Heeft u vragen of wilt u meer informatie? Neem gerust contact met ons op!' }}</p>
+
+      <div class="contact-info">
+        <div class="contact-item" v-if="content.home_contact_phone">
+          <div class="contact-icon">📞</div>
+          <div class="contact-details">
+            <h4>Telefoon</h4>
+            <a :href="'tel:' + content.home_contact_phone.replace(/\s/g, '')">{{ content.home_contact_phone }}</a>
+          </div>
+        </div>
+
+        <div class="contact-item" v-if="content.home_contact_email">
+          <div class="contact-icon">📧</div>
+          <div class="contact-details">
+            <h4>Email</h4>
+            <a :href="'mailto:' + content.home_contact_email">{{ content.home_contact_email }}</a>
+          </div>
+        </div>
+
+        <div class="contact-item" v-if="content.home_contact_address">
+          <div class="contact-icon">📍</div>
+          <div class="contact-details">
+            <h4>Adres</h4>
+            <p>{{ content.home_contact_address }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -175,4 +206,96 @@ export default {
   background: var(--secondary-dark);
   box-shadow: 0 6px 15px rgba(139, 111, 71, 0.4);
 }
+
+.contact-section {
+  background: white;
+  padding: 3rem 2rem;
+  border-radius: 15px;
+  margin-top: 3rem;
+  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+}
+
+.contact-section h2 {
+  color: var(--primary-color);
+  margin-bottom: 1rem;
+  font-size: 2rem;
+}
+
+.contact-subtitle {
+  color: var(--text-gray);
+  font-size: 1.1rem;
+  margin-bottom: 2rem;
+}
+
+.contact-info {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.contact-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 1.5rem;
+  background: #f8f9fa;
+  border-radius: 10px;
+  border: 2px solid #e1e8ed;
+  transition: all 0.3s ease;
+}
+
+.contact-item:hover {
+  border-color: var(--primary-color);
+  box-shadow: 0 4px 10px rgba(44, 95, 93, 0.2);
+  transform: translateY(-2px);
+}
+
+.contact-icon {
+  font-size: 2.5rem;
+  flex-shrink: 0;
+}
+
+.contact-details {
+  text-align: left;
+  flex: 1;
+}
+
+.contact-details h4 {
+  color: var(--primary-color);
+  margin: 0 0 0.5rem 0;
+  font-size: 1.1rem;
+}
+
+.contact-details p {
+  color: #2c3e50;
+  margin: 0;
+  line-height: 1.6;
+}
+
+.contact-details a {
+  color: var(--secondary-color);
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.3s ease;
+}
+
+.contact-details a:hover {
+  color: var(--secondary-dark);
+  text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+  .hero h1 {
+    font-size: 2rem;
+  }
+
+  .cta-buttons {
+    flex-direction: column;
+  }
+
+  .contact-info {
+    grid-template-columns: 1fr;
+  }
+}
 </style>

frontend/vite.config.js

@@ -13,7 +13,7 @@ export default defineConfig({
     port: 3000,
     proxy: {
       '/api': {
-        target: 'http://localhost:8001',
+        target: 'http://localhost:8000',
         changeOrigin: true,
       },
     },