432 lines
12 KiB
Vue
432 lines
12 KiB
Vue
<template>
|
|
<div class="homePage">
|
|
<section class="heroBox" aria-labelledby="hero-heading">
|
|
<NuxtImg
|
|
provider="strapi"
|
|
src="/uploads/large_DML_Home_Hero_4f27bc7f8e.webp"
|
|
class="hero-bg"
|
|
sizes="sm:100vw md:100vw lg:100vw"
|
|
alt=""
|
|
aria-hidden="true"
|
|
priority
|
|
loading="eager"
|
|
preload
|
|
fetchpriority="high"
|
|
/>
|
|
<div class="container-10">
|
|
<h1 id="hero-heading">{{ $t('pages.home.heroBox.h1') }}</h1>
|
|
<h2>{{ $t('pages.home.heroBox.h2') }}</h2>
|
|
<h3>{{ $t('pages.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" aria-hidden="true">
|
|
<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 aria-labelledby="solution-title">
|
|
<div class="container-10 webStrategy">
|
|
<h2 id="solution-title">{{ $t('pages.home.solution.title') }}</h2>
|
|
<h3>{{ $t('pages.home.solution.teaser') }}</h3>
|
|
<p>{{ $t('pages.home.solution.text') }}</p>
|
|
<button
|
|
class="mintBtn"
|
|
role="button"
|
|
aria-describedby="solution-title"
|
|
aria-label="headless CMS Info" @click="navigateToArticle">
|
|
{{ $t('pages.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" aria-hidden="true">
|
|
<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">
|
|
<div class="row">
|
|
<div class="col-md-4"/>
|
|
<div class="col-md-8 pt-5 pb-5">
|
|
<h2 id="invitation-title">{{ $t('pages.home.invitation.title') }}</h2>
|
|
<h3>{{ $t('pages.home.invitation.teaser') }}</h3>
|
|
<button
|
|
class="pinkBtn" role="button"
|
|
aria-describedby="invitation-title"
|
|
aria-label="Kontaktformular öffnen"
|
|
@click.prevent="toggleContactBubble">{{ $t('pages.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" aria-hidden="true">
|
|
<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="canDo" aria-labelledby="canDo-section-title">
|
|
<div class="container">
|
|
<h2 id="canDo-section-title" class="text-center">
|
|
{{ $t('pages.home.canDo.title') }}
|
|
</h2>
|
|
|
|
<div class="canDoGrid">
|
|
<div
|
|
v-for="(item, index) in canDoItems"
|
|
:key="index"
|
|
class="canDoBox"
|
|
>
|
|
<div
|
|
class="canDoItem"
|
|
:role="index === 2 ? 'group' : null"
|
|
:aria-labelledby="index === 2 ? 'cando-title' : null"
|
|
>
|
|
<NuxtImg
|
|
provider="strapi"
|
|
:src="item.img"
|
|
format="webp"
|
|
:modifiers="{ quality: 80 }"
|
|
sizes="xs:280px sm:300px md:350px"
|
|
class="imageBox"
|
|
loading="lazy"
|
|
:alt="item.alt"
|
|
/>
|
|
<h3 :id="index === 2 ? 'cando-title' : null">
|
|
{{ $t(item.title) }}
|
|
</h3>
|
|
<p>{{ $t(item.text) }}</p>
|
|
</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"/>
|
|
</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')" />
|
|
<FAQArea page-link="/" :headline="$t('pages.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 || ''
|
|
}
|
|
}))
|
|
})
|
|
const canDoItems = [
|
|
{
|
|
img: '/uploads/website_Erfolg_Marketing_3c36a43ba5.png',
|
|
alt: 'Website Erfolg Marketing',
|
|
title: 'pages.home.canDo.item1.title',
|
|
text: 'pages.home.canDo.item1.text',
|
|
},
|
|
{
|
|
img: '/uploads/Kundenbindung_45d45ef3fc.png',
|
|
alt: 'Kundenbindung Strategie',
|
|
title: 'pages.home.canDo.item2.title',
|
|
text: 'pages.home.canDo.item2.text',
|
|
},
|
|
{
|
|
img: '/uploads/Screen_Shot_Tool_20250228133408_beb2a11980.png',
|
|
alt: 'Screen Tool Beispiel 1',
|
|
title: 'pages.home.canDo.item3.title',
|
|
text: 'pages.home.canDo.item3.text',
|
|
},
|
|
{
|
|
img: '/uploads/Screen_Shot_Tool_20250228133812_0a20d4320e.png',
|
|
alt: 'Screen Tool Beispiel 2',
|
|
title: 'pages.home.canDo.item4.title',
|
|
text: 'pages.home.canDo.item4.text',
|
|
},
|
|
];
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="sass">
|
|
.homePage
|
|
|
|
.heroBox
|
|
position: relative
|
|
min-height: 35rem
|
|
height: 70vh
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
overflow: hidden
|
|
|
|
.hero-bg
|
|
position: absolute
|
|
inset: 0
|
|
width: 100%
|
|
height: 100%
|
|
object-fit: cover
|
|
object-position: center bottom
|
|
z-index: 0
|
|
|
|
.container-10, h1, h2, h3
|
|
position: relative
|
|
z-index: 1
|
|
|
|
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%
|
|
font-family: 'Comfortaa'
|
|
@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 + 2vw, 1.8rem)
|
|
line-height: 150%
|
|
font-family: 'Comfortaa'
|
|
margin-left: 30%
|
|
h3
|
|
font-size: clamp(1.1rem, .75rem + 1vw, 1.25rem)
|
|
line-height: 150%
|
|
margin-left: 30%
|
|
p
|
|
margin-left: 30%
|
|
button
|
|
margin-left: 30%
|
|
&::after
|
|
content: ''
|
|
position: absolute
|
|
top: 5%
|
|
left: -36vw
|
|
width: 60vw
|
|
height: 90%
|
|
min-height: 550px
|
|
max-height: 800px
|
|
background-image: url('https://strapi.digimedialoop.de/uploads/Net_f1020a2216.png')
|
|
background-repeat: no-repeat
|
|
background-position: center right
|
|
background-size: cover
|
|
border-radius: 42% 49% 52% 48% / 53% 38% 62% 47%
|
|
animation: bubble-wobble 25s infinite ease alternate, gradient-animation 70s infinite alternate ease-in-out
|
|
box-shadow: $innerShadow
|
|
@media(max-width: $breakPointMD)
|
|
right: -50vw
|
|
|
|
.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
|
|
h2
|
|
font-size: clamp(1.6rem, 1rem + 2vw, 1.8rem)
|
|
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
|
|
h2
|
|
font-family: 'Comfortaa'
|
|
h3
|
|
line-height: 1.5
|
|
p
|
|
padding-right: 1rem
|
|
|
|
|
|
.canDo
|
|
margin: 12vh 0
|
|
h2
|
|
margin-bottom: 3.5rem
|
|
font-size: clamp(1.6rem, 1rem + 2vw, 1.8rem)
|
|
.canDoGrid
|
|
display: grid
|
|
gap: 2rem
|
|
justify-content: center
|
|
align-items: stretch
|
|
grid-template-columns: 1fr // Default: 1 Spalte
|
|
|
|
@media (min-width: $breakPointMD)
|
|
grid-template-columns: repeat(2, 1fr)
|
|
|
|
@media (min-width: $breakPointXL)
|
|
grid-template-columns: repeat(4, 1fr)
|
|
|
|
.canDoBox
|
|
width: 100%
|
|
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: 1rem 1.5rem
|
|
border-right: 1px solid lighten($beige, 0%)
|
|
border-bottom: 1px solid lighten($beige, 0%)
|
|
height: 100%
|
|
|
|
.canDoItem
|
|
width: 100%
|
|
|
|
.imageBox
|
|
margin: 0rem auto 1rem auto
|
|
width: 100%
|
|
max-width: 180px
|
|
aspect-ratio: 5 / 4
|
|
object-fit: cover
|
|
border-radius: 1rem
|
|
display: block
|
|
|
|
&:nth-child(1)
|
|
border-radius: $loopShape1
|
|
&:nth-child(2)
|
|
border-radius: $loopShape2
|
|
&:nth-child(3)
|
|
border-radius: $loopShape3
|
|
&:nth-child(4)
|
|
border-radius: $loopShape4
|
|
|
|
h3
|
|
font-size: 1.2rem
|
|
line-height: 1.5rem
|
|
text-align: center
|
|
font-family: 'Mainfont-Bold'
|
|
color: darken($pink, 10%)
|
|
text-transform: uppercase
|
|
margin-bottom: .5rem
|
|
|
|
p
|
|
font-size: .9rem
|
|
text-align: left !important
|
|
|
|
|
|
|
|
</style>
|