dml_frontend/components/ServicesTeaser.vue

<template>
    <section class="services">
      <div class="textBox">
        <h2>Unsere Kernkompetenzen für Ihren Erfolg im Web</h2>
        <h3>Vier starke Säulen für Ihre Website</h3>
      <p v-show="false"><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>
      
      <div class="serviceBoxes">
        <NuxtLinkLocale
          v-for="(service, index) in services"
          :key="index"
          :to="service.link"
          class="service"
        >
          <NuxtImg
            provider="strapi"
            :src="service.backgroundImage"
            alt=""
            class="service-bg"
            aria-hidden="true"
          />
          <div class="overlay"></div>
          <div class="serviceContent">
            <svg>
              <use :xlink:href="`/assets/icons/collection.svg#${service.icon}`" />
            </svg>
            <h3>{{ service.title }}</h3>
            <p>{{ service.description }}</p>
            <span class="link">{{ service.linktext }}</span>
          </div>
        </NuxtLinkLocale>
          </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',
    icon: 'accessibility'
  },
  {
    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',
    icon: 'search'
  },
  {
    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',
    icon: 'database'
  },
  {
    title: 'KI-Kompatibilität im Web',
    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',
    icon: 'ai'
  },
]
</script>

<style lang="sass">
.services
    width: 80%
    margin: 4rem auto // zentriert den Container
  
    .textBox
      text-align: center
      h2
        margin: 1rem auto 1rem auto
      h3
        font-size: 1.6rem
        font-family: 'Comfortaa-Bold'
    .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
        text-decoration: none
  
        &: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

        svg
          width: 2.5rem
          height: 2.5rem
          float: left
          margin: 0 1.3rem 1rem 0
          fill: white
    
        h3
          margin: 0 0 0.5rem 0
          font-size: 1.25rem
          font-weight: 700
          min-height: 3.5rem      
    
        p
          margin: 0 0 1rem 0
          font-size: 1rem
          line-height: 1.3
    
        .link
          color: black
          background-color: white
          padding: .5rem 1.25rem
          margin: 1.5rem auto
          border-radius: 1rem            
          text-decoration: none
          font-family: 'Mainfont-Bold'
          font-size: 90%
          text-transform: uppercase
          &:hover
            transform: scale(1.05)
</style>