Contact section

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>