dml_frontend/pages/index.vue

<template>
  <div class="homePage">
    <HeroBox
      image="/uploads/bg_technologie_d24f950ccf.webp"
      :aria-label="$t('pages.services.hero.ariaLabel')"
      :content="{
        headline1: 'pages.services.hero.headline1',
        headline2: 'pages.services.hero.headline2',
        headline3: 'pages.services.hero.headline3'
      }"
      :dark-background="true"
    /> 

    <section class="explainBox" :aria-label="$t('pages.services.explain.ariaLabel')">
        <NuxtImg
        src="/uploads/Human_Maschine_BG_5c91e9100f.webp"
        provider="strapi"
        format="webp"
        sizes="100vw"
        class="background-image"
        alt="AI and human"
        aria-hidden="true"
      />
      <div class="container-15 content">
        <h2>{{ $t('pages.services.explain.headline1') }}</h2>
        <h3>{{ $t('pages.services.explain.headline2') }}</h3>
       
        <p>{{ $t('pages.services.explain.paragraph') }}</p>
        <ul class="check">
          <li>{{ $t('pages.services.explain.bullet1') }}</li>
          <li>{{ $t('pages.services.explain.bullet2') }}</li>
          <li>{{ $t('pages.services.explain.bullet3') }}</li>
          <li>{{ $t('pages.services.explain.bullet4') }}</li>
          <li>{{ $t('pages.services.explain.bullet5') }}</li>
        </ul>
        <NuxtLinkLocale class="btn" to="services-cms">Erfahren Sie mehr zu Headless CMS</NuxtLinkLocale>
      </div>
      
    </section>  


    
    

    


    <section class="compBox">
      <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 pb-5">
        <div class="row d-flex align-items-center">
          <div class="col-md-6">
            <h2>{{ $t('pages.home.compBox.title') }}</h2>
            <h3>{{ $t('pages.home.compBox.subtitle') }}</h3>
            <p>{{ $t('pages.home.compBox.text') }}</p>
          </div>
          <div class="col-md-6 mt-5 pt-4 pb-4">
            <ImageComparisonSlider 
              before-image="/uploads/Image_Comp_BSK_Before_1ae2a67e1b.png" 
              after-image="/uploads/BSK_After_9de7feda0b.webp" 
            />
          </div>
        </div>
      </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>
      <div class="container-10 text-center py-5">
        <h3>{{ $t('pages.home.finalCall.title') }}</h3>
        <button
class="pinkBtn mt-3" 
                role="button"
                :aria-label="$t('pages.home.finalCall.button')"
                @click.prevent="toggleContactBubble">{{ $t('pages.home.finalCall.button') }}</button>
      </div>
    </section>
    <MarqueeBanner :items="logoItems" :logo-height="60" :title="$t('pages.home.marqueeBanner.title')" :greyscale="true" />
    <FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" />

  </div>
</template>


<script setup>
import { useMainStore } from '@/stores/main';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { useRuntimeConfig, navigateTo } from '#app'
import { useLocalePath } from '#i18n'

const localePath = useLocalePath()

const mainStore = useMainStore();
const { customers } = storeToRefs(mainStore);
const toggleContactBubble = () => mainStore.toggleContactBubble();

const screenWidth = computed(() => mainStore.screenWidth);
const waveHeight = computed(() => (screenWidth.value / 25).toFixed(0));

const logoItems = computed(() => {
  return customers.value.map(customer => ({
    text: customer.company || '',
    image: {
      url: customer.logo?.url || '',
      alternativeText: customer.logo?.alternativeText || customer.company || ''
    }
  }))
})
</script>


<style lang="sass">
.homePage
  .explainBox
    position: relative
    overflow: hidden
    min-height: 400px
    margin: 2vh 0 8vh 0
    padding: 8vh 0

    .background-image
      position: absolute
      top: 0
      left: 0
      width: 100%
      height: auto
      object-fit: contain
      object-position: center center
      z-index: 0
      pointer-events: none

    .content
      position: relative
      z-index: 1
      padding-left: 10%  
      h2
        font-size: clamp(1.2rem, .7rem + 2vw, 2rem)  
        font-family: 'Comfortaa' 
      h3
        font-family: 'Mainfont-Bold'
        font-size: 1.2rem  

.firstTeaser
  h2
    font-size: 1.6rem
    line-height: 2.4rem
.subLine
  color: adjust-color($darkgrey, $lightness: 20%)
  font-size: 80%
.pinkFont
  color: darken($pink, 10%)
.imgRight
  float: right
  max-width: 50%
.homeImageTop
  margin: 4.5rem 0 8vh 3rem !important

.compBox
  background-image: url(https://strapi.digimedialoop.de/uploads/bubbles_DM_Lmint_trans_08ddb0a921.webp) //linear-gradient(to bottom left, white, #FEDEE8, white)
  background-size: cover
  background-repeat: no-repeat
  padding: 5rem 0 3rem 0
  h2
    font-family: 'Comfortaa'
  h3
    line-height: 1.5
  p
    padding-right: 1rem
</style>