135 lines
4.3 KiB
Vue
135 lines
4.3 KiB
Vue
<template>
|
|
<section class="services">
|
|
<h2>Unsere Kernkompetenzen für Ihren Erfolg im Web</h2>
|
|
<p><b>Vier starke Säulen für Ihre Website:</b> Von barrierefrei über SEO bis hin zu Headless CMS und KI-Kompatibilität. Entdecken Sie, wie unsere spezialisierten Leistungen Ihre digitale Präsenz voranbringen. Einfach, effektiv und auf Ihre Bedürfnisse zugeschnitten.</p>
|
|
<div class="serviceBoxes">
|
|
<div
|
|
v-for="(service, index) in services"
|
|
:key="index"
|
|
class="service"
|
|
>
|
|
<NuxtImg
|
|
provider="strapi"
|
|
:src="service.backgroundImage"
|
|
alt=""
|
|
class="service-bg"
|
|
aria-hidden="true"
|
|
priority
|
|
loading="eager"
|
|
fetchpriority="high"
|
|
/>
|
|
<div class="overlay"></div>
|
|
<div class="serviceContent">
|
|
<h3>{{ service.title }}</h3>
|
|
<p>{{ service.description }}</p>
|
|
<NuxtLinkLocale :to="service.link" class="link">{{ service.linktext }}</NuxtLinkLocale>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
const services = [
|
|
{
|
|
title: 'Barrierefreie Webseiten',
|
|
description: 'Webseiten, die für alle zugänglich sind. Barrierefrei, nutzerfreundlich und technisch modern gestaltet für optimale Bedienbarkeit und bessere Reichweite.',
|
|
link: 'services-accessibility',
|
|
linktext: 'Mehr erfahren',
|
|
backgroundImage: '/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp'
|
|
},
|
|
{
|
|
title: 'Suchmaschinen-Optimierung',
|
|
description: 'Mit technischer SEO sorgen wir für bessere Sichtbarkeit in Google & Co. Schnelle, strukturierte Webseiten, die Besucher anziehen und überzeugen.',
|
|
link: 'services-seo',
|
|
linktext: 'Mehr erfahren',
|
|
backgroundImage: '/uploads/DML_Service_Header_SEO_b11ae8940a.webp'
|
|
},
|
|
{
|
|
title: 'Headless CMS',
|
|
description: 'Flexibles Content-Management mit modernem Headless CMS. Schnelle Webseiten, einfache Pflege und volle Kontrolle über Inhalte und Design.',
|
|
link: 'services-cms',
|
|
linktext: 'Mehr erfahren',
|
|
backgroundImage: '/uploads/DML_Service_Header_CMS_a438599970.webp'
|
|
},
|
|
{
|
|
title: 'KI-Kompatibilität',
|
|
description: 'Webseiten, die mit Künstlicher Intelligenz zusammenarbeiten. Zukunftssicher, smart optimiert und bereit für automatisierte Prozesse und Personalisierung.',
|
|
link: 'services-ai',
|
|
linktext: 'Mehr erfahren',
|
|
backgroundImage: '/uploads/DML_Service_Header_AI_639dd0d7b1.webp'
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.services
|
|
width: 80%
|
|
margin: 4rem auto // zentriert den Container
|
|
|
|
.serviceBoxes
|
|
margin-top: 2rem
|
|
display: flex
|
|
flex-wrap: wrap
|
|
justify-content: center
|
|
gap: 1rem
|
|
|
|
.service
|
|
flex: 0 1 300px // fixe Breite von 300px, wächst nicht, schrumpft aber bei Bedarf
|
|
height: 300px
|
|
position: relative
|
|
color: white
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: flex-end
|
|
overflow: hidden
|
|
border-radius: 8px
|
|
cursor: pointer
|
|
transition: transform 0.3s ease
|
|
|
|
&:hover
|
|
transform: translateY(-5px)
|
|
|
|
|
|
.service-bg
|
|
position: absolute
|
|
inset: 0
|
|
width: 100%
|
|
height: 100%
|
|
object-fit: cover
|
|
object-position: center
|
|
z-index: 0
|
|
|
|
.overlay
|
|
position: absolute
|
|
inset: 0
|
|
background: linear-gradient(to top right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 100%)
|
|
z-index: 1
|
|
|
|
.serviceContent
|
|
position: relative
|
|
padding: 1.5rem
|
|
z-index: 2
|
|
|
|
h3
|
|
margin: 0 0 0.5rem 0
|
|
font-size: 1.25rem
|
|
font-weight: 700
|
|
|
|
p
|
|
margin: 0 0 1rem 0
|
|
font-size: 1rem
|
|
line-height: 1.3
|
|
|
|
.link
|
|
color: black
|
|
background-color: white
|
|
padding: .5rem 1.25rem
|
|
border-radius: 1rem
|
|
text-decoration: none
|
|
font-family: 'Mainfont-Bold'
|
|
font-size: 90%
|
|
text-transform: uppercase
|
|
&:hover
|
|
color: #ddd
|
|
</style> |