369 lines
12 KiB
Vue
369 lines
12 KiB
Vue
<template>
|
|
<div class="homePage">
|
|
<section class="heroBox" aria-labelledby="hero-heading">
|
|
<div class="container-10">
|
|
<h1 id="hero-heading">{{ $t('home.heroBox.h1') }}</h1>
|
|
<h2>{{ $t('home.heroBox.h2') }}</h2>
|
|
<h3>{{ $t('home.heroBox.h3') }}</h3>
|
|
</div>
|
|
<!-- Nach dem Container: Spiegelwelle unten -->
|
|
<svg class="sectionWave wave-bottom" style="" 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"></path>
|
|
</svg>
|
|
</section>
|
|
<section aria-labelledby="solution-title">
|
|
<div class="container-10 webStrategy">
|
|
<NuxtImg
|
|
class="imgFloatLeft"
|
|
src="https://strapi.digimedialoop.de/uploads/web_wireframe_Strategie_0bae802a68.png"
|
|
alt="Wireframe Web Strategie"
|
|
width="300"
|
|
format="webp"
|
|
/>
|
|
|
|
<h2 id="solution-title">{{ $t('home.solution.title') }}</h2>
|
|
<h3>{{ $t('home.solution.teaser') }}</h3>
|
|
<p>{{ $t('home.solution.text') }}</p>
|
|
<button class="mintBtn"
|
|
role="button"
|
|
aria-describedby="solution-title"
|
|
aria-label="headless CMS Info" @click="navigateToArticle">{{ $t('home.solution.buttonText') }}</button>
|
|
|
|
|
|
</div>
|
|
</section>
|
|
<section class="targetGroup" aria-labelledby="invitation-title">
|
|
<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"></path>
|
|
</svg>
|
|
<div class="container-10">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
</div>
|
|
<div class="col-md-8 pt-5 pb-5">
|
|
<h2 id="invitation-title">{{ $t('home.invitation.title') }}</h2>
|
|
<h3>{{ $t('home.invitation.teaser') }}</h3>
|
|
<button class="pinkBtn" @click.prevent="toggleContactBubble"
|
|
role="button"
|
|
aria-describedby="invitation-title"
|
|
aria-label="Kontaktformular öffnen">{{ $t('home.invitation.button') }}</button>
|
|
</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"></path>
|
|
</svg>
|
|
</section>
|
|
<section class="canDo">
|
|
<div class="container">
|
|
<h2 class="text-center">{{ $t('home.canDo.title') }}</h2>
|
|
<div class="row mb-5">
|
|
<div class="col-xl-6">
|
|
<div class="row">
|
|
<div class="col-md-6 my-5">
|
|
<div class="innerBox">
|
|
<div class="canDoItem">
|
|
<div class="imageBox" style="background-image: url('https://strapi.digimedialoop.de/uploads/website_Erfolg_Marketing_3c36a43ba5.png');"></div>
|
|
<h3>{{ $t('home.canDo.item1.title') }}</h3>
|
|
<p>{{ $t('home.canDo.item1.text') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 my-5">
|
|
<div class="innerBox">
|
|
<div class="canDoItem">
|
|
<div class="imageBox" style="background-image: url('https://strapi.digimedialoop.de/uploads/Kundenbindung_45d45ef3fc.png');"></div>
|
|
<h3>{{ $t('home.canDo.item2.title') }}</h3>
|
|
<p>{{ $t('home.canDo.item2.text') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xl-6">
|
|
<div class="row">
|
|
<div class="col-md-6 my-5">
|
|
<div class="innerBox">
|
|
<div class="canDoItem" role="group" aria-labelledby="cando-title">
|
|
<div class="imageBox" style="background-image: url('https://strapi.digimedialoop.de/uploads/Screen_Shot_Tool_20250228133408_beb2a11980.png');"></div>
|
|
<h3 id="cando-title">{{ $t('home.canDo.item3.title') }}</h3>
|
|
<p>{{ $t('home.canDo.item3.text') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6 my-5">
|
|
<div class="innerBox">
|
|
<div class="canDoItem">
|
|
<div class="imageBox" style="background-image: url('https://strapi.digimedialoop.de/uploads/Screen_Shot_Tool_20250228133812_0a20d4320e.png');"></div>
|
|
<h3>{{ $t('home.canDo.item4.title') }}</h3>
|
|
<p>{{ $t('home.canDo.item4.text') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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"></path>
|
|
</svg>
|
|
<div class="container-10 pb-5">
|
|
<div class="row d-flex align-items-center">
|
|
<div class="col-md-6">
|
|
<h2>{{ $t('home.compBox.title') }}</h2>
|
|
<h3>{{ $t('home.compBox.subtitle') }}</h3>
|
|
<p>{{ $t('home.compBox.text') }}</p>
|
|
</div>
|
|
<div class="col-md-6 mt-5 pt-4 pb-4">
|
|
<ImageComparisonSlider
|
|
beforeImage="https://strapi.digimedialoop.de/uploads/Image_Comp_BSK_Before_1ae2a67e1b.png"
|
|
afterImage="https://strapi.digimedialoop.de/uploads/Image_Comp_BSK_After_b4358b0e19.png"
|
|
/>
|
|
</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"></path>
|
|
</svg>
|
|
</section>
|
|
<section>
|
|
<div class="container-10 text-center py-5">
|
|
<h3>{{ $t('home.finalCall.title') }}</h3>
|
|
<button class="pinkBtn mt-3"
|
|
@click.prevent="toggleContactBubble"
|
|
role="button"
|
|
:aria-label="$t('home.finalCall.button')">{{ $t('home.finalCall.button') }}</button>
|
|
</div>
|
|
</section>
|
|
<MarqueeBanner :items="logoItems" :logoHeight="60" :title="$t('home.marqueeBanner.title')" />
|
|
<FAQArea pageLink="/" :headline="$t('home.faqArea.headline')" />
|
|
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import { useMainStore } from '@/stores/main';
|
|
import { storeToRefs } from 'pinia';
|
|
import { defineAsyncComponent } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
|
|
|
const runtimeConfig = useRuntimeConfig();
|
|
const cmsUrl = computed(() => runtimeConfig.public.cmsBaseUrl)
|
|
|
|
const mainStore = useMainStore();
|
|
const { customers } = storeToRefs(mainStore);
|
|
const toggleContactBubble = () => mainStore.toggleContactBubble();
|
|
|
|
const navigateToArticle = () => {
|
|
router.push('/wissenswertes/artikel/design-und-inhalt-sauber-getrennt-warum-headless-webdesign-die-beste-wahl-fuer-moderne-unternehmen-ist');
|
|
};
|
|
|
|
const screenWidth = computed(() => mainStore.screenWidth);
|
|
const waveHeight = computed(() => (screenWidth.value / 25).toFixed(0));
|
|
|
|
const logoItems = computed(() => {
|
|
return customers.value.map(customer => ({
|
|
company: customer.company || '',
|
|
logo: {
|
|
url: customer.logo?.url || '',
|
|
alternativeText: customer.company || ''
|
|
}
|
|
}))
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="sass">
|
|
.homePage
|
|
.heroBox
|
|
background-image: url('https://strapi.digimedialoop.de/uploads/DML_Home_hero_f0916b5608.png')
|
|
background-repeat: no-repeat
|
|
background-size: cover
|
|
background-position: right bottom
|
|
min-height: 35rem
|
|
height: 70vh
|
|
max-height: 200vw
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
position: relative
|
|
@media (max-width: $breakPointMD)
|
|
background-position: center bottom
|
|
h1
|
|
margin-top: 3rem
|
|
z-index: 2
|
|
color: mix(black, $pink, 2%)
|
|
font-size: clamp(1rem, .8rem + 1vw, 1.2rem)
|
|
line-height: 1.5
|
|
margin-bottom: 0
|
|
max-width: 70%
|
|
@media (max-width: $breakPointMD)
|
|
max-width: 100%
|
|
h2
|
|
z-index: 2
|
|
font-size: clamp(1.4rem, .8rem + 2vw, 2.4rem)
|
|
line-height: 1.5
|
|
margin-top: 1rem
|
|
max-width: 55%
|
|
@media (max-width: $breakPointMD)
|
|
max-width: 90%
|
|
h3
|
|
max-width: 55%
|
|
line-height: 1.5
|
|
font-size: clamp(1rem, .8rem + 1vw, 1.6rem)
|
|
@media (max-width: $breakPointMD)
|
|
max-width: 90%
|
|
&::after
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
width: 50%
|
|
height: 100%
|
|
background-image: linear-gradient(to right, rgba(white, .3), transparent)
|
|
z-index: 1
|
|
.container
|
|
z-index: 2
|
|
|
|
/* Welle oben */
|
|
.sectionWave.wave-top
|
|
position: absolute
|
|
left: 0
|
|
width: 100%
|
|
z-index: 1
|
|
transform: scaleY(1) scaleX(-1)
|
|
top: -2px
|
|
/* Welle unten */
|
|
.sectionWave.wave-bottom
|
|
position: absolute
|
|
left: 0
|
|
width: 100%
|
|
z-index: 1
|
|
transform: scaleY(-1)
|
|
bottom: -2px
|
|
.webStrategy
|
|
padding: 4rem 0 3.5rem 0
|
|
h2
|
|
font-size: clamp(1.6rem, 1rem + 1vw, 1.8rem)
|
|
line-height: 150%
|
|
h3
|
|
font-size: clamp(1.2rem, .8rem + 1vw, 1.4rem)
|
|
line-height: 150%
|
|
img
|
|
width: 80%
|
|
margin: 0 2rem 1rem 0
|
|
max-width: 300px
|
|
float: left
|
|
.targetGroup
|
|
background-image: url('https://strapi.digimedialoop.de/uploads/smartphone_Contacts_40ae56a178.jpg')
|
|
background-repeat: no-repeat
|
|
background-size: cover
|
|
background-position: center top
|
|
min-height: 70vh
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
position: relative
|
|
padding: 3rem 0
|
|
h3
|
|
font-size: clamp(1.1rem, .8rem + 1vw, 1.2rem)
|
|
line-height: 150%
|
|
.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: linear-gradient(to bottom left, white, #FEDEE8, white)
|
|
padding: 5rem 0 3rem 0
|
|
h3
|
|
line-height: 1.5
|
|
p
|
|
padding-right: 1rem
|
|
.canDo
|
|
margin: 15vh 0
|
|
h2
|
|
margin-bottom: 3.5rem
|
|
.row
|
|
display: flex
|
|
flex-wrap: wrap
|
|
height: 100%
|
|
align-items: stretch
|
|
.innerBox
|
|
width: 90%
|
|
margin: 0 5% 0 5%
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
justify-content: flex-start
|
|
background-image: linear-gradient(to bottom right, transparent , white )
|
|
box-shadow: 3px 3px 8px 1px $lightgrey
|
|
border-bottom-right-radius: 1rem
|
|
padding: 0 2rem 1rem 2rem
|
|
border-right: 1px solid lighten($beige, 0%)
|
|
border-bottom: 1px solid lighten($beige, 0%)
|
|
height: 100%
|
|
|
|
.canDoItem
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
justify-content: flex-start
|
|
text-align: center
|
|
color: black
|
|
height: 100%
|
|
margin-top: .5rem
|
|
|
|
&:nth-child(1) .imageBox
|
|
border-radius: $loopShape1
|
|
&:nth-child(2) .imageBox
|
|
border-radius: $loopShape2
|
|
&:nth-child(3) .imageBox
|
|
border-radius: $loopShape3
|
|
&:nth-child(4) .imageBox
|
|
border-radius: $loopShape4
|
|
|
|
.imageBox
|
|
width: 100%
|
|
max-width: 280px
|
|
padding-bottom: 75% /* 4:3 Verhältnis */
|
|
background-size: cover
|
|
background-position: center
|
|
margin-bottom: 2rem
|
|
|
|
h3
|
|
font-size: 1.2rem
|
|
line-height: 1.5rem
|
|
text-align: center
|
|
font-family: 'Mainfont-Bold'
|
|
color: darken($pink, 10%)
|
|
text-transform: uppercase
|
|
|
|
h4
|
|
font-size: 1.4rem
|
|
line-height: 1.8rem
|
|
margin: 2rem 0
|
|
font-family: 'Mainfont-Bold'
|
|
|
|
p
|
|
font-size: .9rem
|
|
text-align: left !important
|
|
|
|
|
|
</style>
|