dml_frontend/pages/services/ai/index.vue

<template>
  <div class="aiPage">
    <HeroBox
      image="/uploads/DML_Service_Header_AI_639dd0d7b1.webp"
      :aria-label="$t('pages.services.ai.hero.ariaLabel')"
      overlay-image="/uploads/kirby_fly_3de66b2839.webp"
      overlay-alt-text="ki roboter fliegt"
      :overlay-width="'32%'"
      :overlay-position="{ top: '28%', right: '3vw' }"
      :dark-background="true"
    >
      <h1>{{ $t('pages.services.ai.hero.headline1') }}</h1>
      <h2>{{ $t('pages.services.ai.hero.headline2') }}</h2>
      <h3>{{ $t('pages.services.ai.hero.headline3') }}</h3>
    </HeroBox>

    <section class="whyAI">
      <div class="container-10">
        <NuxtImg
          provider="strapi"
          src="/uploads/AI_robot_67b96e6a17.webp"
          alt="roboter sitzt auf mouse"
          aria-hidden="true"
        />
        <h2>{{ $t('pages.services.ai.whyAI.headline') }}</h2>
        <p>{{ $t('pages.services.ai.whyAI.text1') }}</p>
        <p>{{ $t('pages.services.ai.whyAI.text2') }}</p>
      </div>
    </section>

    <section class="targetGroup">
      <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
        <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
      </svg> 
      <div class="container-10">
  <h2>{{ $t('pages.services.ai.targetGroup.headline') }}</h2>
  <ul class="check">
    <li>
      <strong>{{ $t('pages.services.ai.targetGroup.point1_headline') }}</strong><br>
      {{ $t('pages.services.ai.targetGroup.point1_description') }}
    </li>
    <li>
      <strong>{{ $t('pages.services.ai.targetGroup.point2_headline') }}</strong><br>
      {{ $t('pages.services.ai.targetGroup.point2_description') }}
    </li>
    <li>
      <strong>{{ $t('pages.services.ai.targetGroup.point3_headline') }}</strong><br>
      {{ $t('pages.services.ai.targetGroup.point3_description') }}
    </li>
    <li>
      <strong>{{ $t('pages.services.ai.targetGroup.point4_headline') }}</strong><br>
      {{ $t('pages.services.ai.targetGroup.point4_description') }}
    </li>
  </ul>
</div>

      <svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
        <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
      </svg> 
    </section>

    <section class="howItWorks">
      <div class="container-10">
        <h2>{{ $t('pages.services.ai.howItWorks.headline') }}</h2>
      </div>
      
      <div class="coderWrap">        
        <div class="text">
          
          <p>{{ $t('pages.services.ai.howItWorks.pretext') }}</p>
          <ul class="check">
            <li>{{ $t('pages.services.ai.howItWorks.point1') }}</li>
            <li>{{ $t('pages.services.ai.howItWorks.point2') }}</li>
            <li>{{ $t('pages.services.ai.howItWorks.point3') }}</li>
            <li>{{ $t('pages.services.ai.howItWorks.point4') }}</li>
            <li>{{ $t('pages.services.ai.howItWorks.point5') }}</li>
            <li>{{ $t('pages.services.ai.howItWorks.point6') }}</li>
          </ul>
          <p>{{ $t('pages.services.ai.howItWorks.posttext') }}</p>
        </div>
        <div class="coderArea">
          <SchemaCoder />
        </div>
      </div>
    </section>

    <section class="howWeDo">
      <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
        <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
      </svg> 
      <div class="container-10">
        <h2>{{ $t('pages.services.ai.howWeDo.headline') }}</h2>
        <p>{{ $t('pages.services.ai.howWeDo.text') }}</p>
        <ul class="check">
          <li>{{ $t('pages.services.ai.howWeDo.point1') }}</li>
          <li>{{ $t('pages.services.ai.howWeDo.point2') }}</li>
          <li>{{ $t('pages.services.ai.howWeDo.point3') }}</li>
          <li>{{ $t('pages.services.ai.howWeDo.point4') }}</li>
          <li>{{ $t('pages.services.ai.howWeDo.point5') }}</li>
        </ul>
        <p class="pt-3"><NuxtLinkLocale class="btn whiteBtn" to="services-cms">Erfahren Sie mehr zu Headless CMS</NuxtLinkLocale></p>
      </div>
      <svg class="sectionWave wave-bottom" style="transform: scale(-1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
        <path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
      </svg> 
    </section>

    <FAQArea
      page-link="/leistungen/ki-kompatible-webseiten"
      :headline="$t('pages.services.ai.faq.headline')"
    />
  </div>
</template>

<script setup>
import { useMainStore } from '@/stores/main'
const mainStore = useMainStore()
definePageMeta({
  alias: [
    '/leistungen/ki-kompatible-webseiten', // Deutsch
    '/services/ai-compatible-websites',    // Englisch
    '/services/sites-compatibles-ia',      // Französisch
    '/servizi/siti-compatibili-ai',        // Italienisch
    '/servicios/sitios-compatibles-ai',    // Spanisch
    '/hizmetler/ai-uyumlu-websiteler'      // Türkisch
  ],
  name: 'services-ai'
})
</script>

<style lang="sass">
.aiPage
  .targetGroup
    background: linear-gradient(90deg, #3A283E 0%, #6A3385 100%);
    color: white
    padding: 12vh 0
    margin: 8vh 0
    li
      line-height: 1.5rem
      margin-bottom: 1.5rem
    strong
      font-size: 110%
      
  .howWeDo
    background: linear-gradient(90deg, #6A3385 0%, #3A283E 100%);
    color: white
    padding: 12vh 0
    margin: 8vh 0
    
  .whyAI
    padding: 3% 0
    img
      width: 30%
      max-width: 280px
      float: left
      margin: 1% 6vw 5% 0
  .howItWorks
    overflow: hidden
    .coderWrap
      display: flex
      align-items: center
      justify-content: flex-start
      padding-left: 10%
      position: relative
    .text
      flex: 0 0 auto
      width: 50%
      margin-left: 2%

    .coderArea
      flex: 0 0 auto
      width: 60%
      transform: translateX(10%)
      overflow: hidden
      margin-top: 1rem
    @media (max-width: $breakPointSM)
      .text
        p
          width: 80vw
</style>