302 lines
6.9 KiB
Vue
302 lines
6.9 KiB
Vue
<template>
|
|
<div class="home">
|
|
<div class="hero">
|
|
<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>{{ 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>{{ 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>{{ 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>{{ content.home_feature_4_title || '📅 Eenvoudig Boeken' }}</h3>
|
|
<p>{{ content.home_feature_4_text || 'Eenvoudig online boekingssysteem' }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cta">
|
|
<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">{{ 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 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>
|
|
|
|
<script>
|
|
import { ref, onMounted } from 'vue'
|
|
|
|
export default {
|
|
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>
|
|
|
|
<style scoped>
|
|
.home {
|
|
text-align: center;
|
|
}
|
|
|
|
.hero {
|
|
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 {
|
|
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: var(--primary-color);
|
|
margin-bottom: 1rem;
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.feature-card p {
|
|
color: var(--text-gray);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.cta {
|
|
background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
|
|
padding: 3rem 2rem;
|
|
border-radius: 15px;
|
|
border: 3px solid var(--primary-color);
|
|
box-shadow: 0 4px 20px rgba(44, 95, 93, 0.15);
|
|
}
|
|
|
|
.cta h2 {
|
|
color: var(--primary-color);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.cta p {
|
|
color: var(--text-gray);
|
|
font-size: 1.1rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
gap: 1rem;
|
|
justify-content: center;
|
|
}
|
|
|
|
.cta-button {
|
|
display: inline-block;
|
|
background: var(--primary-color);
|
|
color: white;
|
|
padding: 1rem 2rem;
|
|
text-decoration: none;
|
|
border-radius: 10px;
|
|
font-size: 1.1rem;
|
|
font-weight: bold;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 10px rgba(44, 95, 93, 0.3);
|
|
}
|
|
|
|
.cta-button:hover {
|
|
background: var(--primary-dark);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 15px rgba(44, 95, 93, 0.4);
|
|
}
|
|
|
|
.cta-button.secondary {
|
|
background: var(--secondary-color);
|
|
box-shadow: 0 4px 10px rgba(139, 111, 71, 0.3);
|
|
}
|
|
|
|
.cta-button.secondary:hover {
|
|
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>
|