digimedialoop/dml_frontend
digimedialoop/dml_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

opti img home

Browse Source
This commit is contained in:
Sabrina Hennrich 2025-05-19 21:36:21 +02:00
parent b895e6073a
commit 6382aa05de
11 changed files with 242 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/AccessabilityBox.vue
View File

@ -78,9 +78,9 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
const open = ref(false)
import { useMainStore } from '@/stores/main' import { useMainStore } from '@/stores/main'
const open = ref(false)
const mainStore = useMainStore() const mainStore = useMainStore()
const screenWidth = computed(() => mainStore.screenWidth) const screenWidth = computed(() => mainStore.screenWidth)

2
components/Accordion.vue
View File

@ -15,7 +15,7 @@
<!-- Toggle-Icon (2 Striche) --> <!-- Toggle-Icon (2 Striche) -->
<span class="accordion-toggle" :class="{ open: openIndex === i }"> <span class="accordion-toggle" :class="{ open: openIndex === i }">
<span></span><span></span> <span/><span/>
</span> </span>
</button> </button>

2
components/Breadcrumbs.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<nav class="breadcrumbs" aria-label="Breadcrumb" v-if="breadcrumbs && breadcrumbs.length"> <nav v-if="breadcrumbs && breadcrumbs.length" class="breadcrumbs" aria-label="Breadcrumb">
<ul> <ul>
<router-link to="/"> <router-link to="/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">

42
components/ContactForm.vue
View File

@ -8,22 +8,22 @@
role="dialog" role="dialog"
> >
<svg <svg
@click="toggleContactBubble"
id="controlIcon" id="controlIcon"
tabindex="0" tabindex="0"
role="button" role="button"
aria-label="Toggle contact form" aria-label="Toggle contact form"
@click="toggleContactBubble"
> >
<use :xlink:href="`/assets/icons/collection.svg#${isContactBubbleOpen ? 'times' : 'talk'}`"></use> <use :xlink:href="`/assets/icons/collection.svg#${isContactBubbleOpen ? 'times' : 'talk'}`"/>
</svg> </svg>
<div <div
class="contactContainer" v-show="isContactBubbleOpen"
v-show="isContactBubbleOpen" class="contactContainer"
role="form" role="form"
aria-labelledby="contactTitle" aria-labelledby="contactTitle"
> >
<div class="row left m-2"> <div class="row left m-2">
<div class="col-md-6" id="hintBox"> <div id="hintBox" class="col-md-6">
<NuxtImg <NuxtImg
v-if="screenWidth <= 768" v-if="screenWidth <= 768"
class="mobileAspBox" class="mobileAspBox"
@ -35,11 +35,11 @@
<h2 id="contactTitle">{{ $t('contactForm.yourcontact2us') }}</h2> <h2 id="contactTitle">{{ $t('contactForm.yourcontact2us') }}</h2>
<p class="my-4"> <p class="my-4">
<svg aria-hidden="true"> <svg aria-hidden="true">
<use xlink:href="/assets/icons/collection.svg#phone"></use> <use xlink:href="/assets/icons/collection.svg#phone"/>
</svg> </svg>
<span>{{ companyinfo.phone }}</span> <span>{{ companyinfo.phone }}</span>
</p> </p>
<div class="pt-3" v-if="screenWidth > 768"> <div v-if="screenWidth > 768" class="pt-3">
<h3>{{ $t('contactForm.ourOffice') }}</h3> <h3>{{ $t('contactForm.ourOffice') }}</h3>
<p class="address"> <p class="address">
{{ companyinfo.company }}<br>{{ companyinfo.street }} <br>{{ companyinfo.postalcode }} {{ companyinfo.city }} {{ companyinfo.company }}<br>{{ companyinfo.street }} <br>{{ companyinfo.postalcode }} {{ companyinfo.city }}
@ -60,12 +60,12 @@
<label for="name">{{ $t('contactForm.name') }}</label> <label for="name">{{ $t('contactForm.name') }}</label>
<input <input
id="name" id="name"
v-model="form.name"
type="text" type="text"
name="name" name="name"
v-model="form.name"
@blur="validateName"
aria-required="true" aria-required="true"
autocomplete="name" autocomplete="name"
@blur="validateName"
> >
<span v-if="errors.name" class="error">{{ errors.name }}</span> <span v-if="errors.name" class="error">{{ errors.name }}</span>
</div> </div>
@ -74,11 +74,11 @@
<label for="email">{{ $t('contactForm.email') }}</label> <label for="email">{{ $t('contactForm.email') }}</label>
<input <input
id="email" id="email"
v-model="form.email"
type="email" type="email"
name="email" name="email"
v-model="form.email"
@blur="validateEmail"
autocomplete="email" autocomplete="email"
@blur="validateEmail"
> >
<span v-if="errors.email" class="error">{{ errors.email }}</span> <span v-if="errors.email" class="error">{{ errors.email }}</span>
</div> </div>
@ -87,11 +87,11 @@
<label for="phone">{{ $t('contactForm.phone') }}</label> <label for="phone">{{ $t('contactForm.phone') }}</label>
<input <input
id="phone" id="phone"
v-model="form.phone"
type="tel" type="tel"
name="phone" name="phone"
v-model="form.phone"
@blur="validatePhone"
autocomplete="tel" autocomplete="tel"
@blur="validatePhone"
> >
<span v-if="errors.phone" class="error">{{ errors.phone }}</span> <span v-if="errors.phone" class="error">{{ errors.phone }}</span>
</div> </div>
@ -100,10 +100,10 @@
<label for="message">{{ $t('contactForm.message') }}</label> <label for="message">{{ $t('contactForm.message') }}</label>
<textarea <textarea
id="message" id="message"
v-model="form.message"
name="message" name="message"
class="mt-4" class="mt-4"
v-model="form.message" />
></textarea>
</div> </div>
<p class="smallText"> <p class="smallText">
@ -121,8 +121,8 @@
<button <button
type="submit" type="submit"
:aria-label="$t('contactForm.sendMessage')" :aria-label="$t('contactForm.sendMessage')"
@click="submitForm"
class="pinkBtn" class="pinkBtn"
@click="submitForm"
> >
{{ $t('contactForm.sendMessage') }} {{ $t('contactForm.sendMessage') }}
</button> </button>

4
components/FAQArea.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<section class="faq" id="faq"> <section id="faq" class="faq">
<h3>{{ headline }}</h3> <h3>{{ headline }}</h3>
<Accordion v-if="accordionItems.length" :items="accordionItems" /> <Accordion v-if="accordionItems.length" :items="accordionItems" />
<p v-else>Lade Daten...</p> <p v-else>Lade Daten...</p>
@ -9,7 +9,7 @@
<h4> Noch Fragen? </h4> <h4> Noch Fragen? </h4>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<button @click.prevent="toggleContactBubble" role="button" class="pinkBtn"> <button role="button" class="pinkBtn" @click.prevent="toggleContactBubble">
{{ button }} {{ button }}
</button> </button>
</div> </div>

52
components/ImageComparisonSlider.vue
View File

@ -1,28 +1,42 @@
<template> <template>
<div class="image-comparison-container"> <div class="image-comparison-container">
<!-- "Vorher"-Bild liegt unten --> <!-- „Vorher“-Bild liegt unten -->
<img class="before-image" :src="beforeImage" alt="Vorher-Bild"> <NuxtImg
class="before-image"
<!-- "Nachher"-Bild oben, wird durch die Breite beschnitten --> provider="strapi"
<div class="after-image-container" :style="{ width: sliderValue + '%' }"> :src="beforeImage"
<img class="after-image" :src="afterImage" alt="Nachher-Bild"> alt="Vorher-Bild"
</div> format="webp"
loading="lazy"
<!-- Der Slider --> />
<input type="range" min="0" max="100" v-model="sliderValue" class="slider">
<!-- „Nachher“-Bild oben, Breite = Slider-Wert -->
<!-- Die vertikale Trennlinie --> <div class="after-image-container" :style="{ width: sliderValue + '%' }">
<div class="slider-line" :style="{ left: sliderValue + '%' }"></div> <NuxtImg
class="after-image"
provider="strapi"
:src="afterImage"
alt="Nachher-Bild"
format="webp"
loading="lazy"
/>
</div> </div>
</template>
<!-- Slider -->
<input v-model="sliderValue" type="range" min="0" max="100" class="slider" />
<!-- Vertikale Trennlinie -->
<div class="slider-line" :style="{ left: sliderValue + '%' }" />
</div>
</template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
const props = defineProps({ defineProps({
beforeImage: String, beforeImage: { type: String, required: true },
afterImage: String afterImage: { type: String, required: true }
}) })
const sliderValue = ref(60) // Startposition in der Mitte const sliderValue = ref(60) // Startposition in der Mitte
</script> </script>

40
components/MarqueeBanner.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="banner-wrapper"> <div class="banner-wrapper">
<!-- Obere Welle als SVG --> <!-- Obere Welle -->
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 500 20" viewBox="0 0 500 20"
@ -11,7 +11,7 @@
<g clip-path="url(#_clipPath_5kVoellZ93LI5Lc2i2b27JZsraaBm0XM)"> <g clip-path="url(#_clipPath_5kVoellZ93LI5Lc2i2b27JZsraaBm0XM)">
<path <path
id="wave" id="wave"
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 " 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="#EEEBE5" fill="#EEEBE5"
/> />
</g> </g>
@ -22,23 +22,28 @@
<h2 class="pt-4 pb-3">{{ title }}</h2> <h2 class="pt-4 pb-3">{{ title }}</h2>
<div class="marquee marquee--hover-pause mt-5"> <div class="marquee marquee--hover-pause mt-5">
<!-- Haupt-Liste -->
<ul class="marquee__content"> <ul class="marquee__content">
<li v-for="(item, index) in items" :key="index"> <li v-for="(item, index) in items" :key="index">
<NuxtLink v-if="item.link" :to="item.link" class="custLogoLink"> <NuxtLink v-if="item.link" :to="item.link" class="custLogoLink">
<NuxtImg <NuxtImg
:src="cmsUrl + item.logo.url" provider="strapi"
alt="item.logo.alternativeText || 'Logo'" :src="item.logo.url"
:alt="item.logo.alternativeText || 'Logo'"
width="250" width="250"
format="webp" format="webp"
loading="lazy"
class="custLogo" class="custLogo"
/> />
</NuxtLink> </NuxtLink>
<NuxtImg <NuxtImg
v-else v-else
:src="cmsUrl + item.logo.url" provider="strapi"
alt="item.logo.alternativeText || 'Logo'" :src="item.logo.url"
:alt="item.logo.alternativeText || 'Logo'"
width="250" width="250"
format="webp" format="webp"
loading="lazy"
class="custLogo" class="custLogo"
/> />
</li> </li>
@ -46,22 +51,26 @@
<!-- Duplizierte Liste für Endlos-Scroll --> <!-- Duplizierte Liste für Endlos-Scroll -->
<ul class="marquee__content duplicate" aria-hidden="true"> <ul class="marquee__content duplicate" aria-hidden="true">
<li v-for="(item, index) in items" :key="'dup-'+index"> <li v-for="(item, index) in items" :key="'dup-' + index">
<NuxtLink v-if="item.link" :to="item.link" class="custLogoLink"> <NuxtLink v-if="item.link" :to="item.link" class="custLogoLink">
<NuxtImg <NuxtImg
:src="cmsUrl + item.logo.url" provider="strapi"
alt="item.logo.alternativeText || 'Logo'" :src="item.logo.url"
:alt="item.logo.alternativeText || 'Logo'"
width="250" width="250"
format="webp" format="webp"
loading="lazy"
class="custLogo" class="custLogo"
/> />
</NuxtLink> </NuxtLink>
<NuxtImg <NuxtImg
v-else v-else
:src="cmsUrl + item.logo.url" provider="strapi"
alt="item.logo.alternativeText || 'Logo'" :src="item.logo.url"
:alt="item.logo.alternativeText || 'Logo'"
width="250" width="250"
format="webp" format="webp"
loading="lazy"
class="custLogo" class="custLogo"
/> />
</li> </li>
@ -70,7 +79,7 @@
</div> </div>
</div> </div>
<!-- Wellen am unteren Rand --> <!-- Untere Wellen -->
<div class="waveBox"> <div class="waveBox">
<div id="waver"> <div id="waver">
<div class="waveWrapper waveAnimation"> <div class="waveWrapper waveAnimation">
@ -78,19 +87,19 @@
<div <div
class="wave waveTop" class="wave waveTop"
:style="{ backgroundImage: `url('${cmsUrl}/uploads/wave_top_8fe067e598.svg')` }" :style="{ backgroundImage: `url('${cmsUrl}/uploads/wave_top_8fe067e598.svg')` }"
></div> />
</div> </div>
<div class="waveWrapperInner bgMiddle"> <div class="waveWrapperInner bgMiddle">
<div <div
class="wave waveMiddle" class="wave waveMiddle"
:style="{ backgroundImage: `url('${cmsUrl}/uploads/wave_middle_24d8a84a35.svg')` }" :style="{ backgroundImage: `url('${cmsUrl}/uploads/wave_middle_24d8a84a35.svg')` }"
></div> />
</div> </div>
<div class="waveWrapperInner bgBottom"> <div class="waveWrapperInner bgBottom">
<div <div
class="wave waveBottom" class="wave waveBottom"
:style="{ backgroundImage: `url('${cmsUrl}/uploads/wave_bottom_6fc8184efb.svg')` }" :style="{ backgroundImage: `url('${cmsUrl}/uploads/wave_bottom_6fc8184efb.svg')` }"
></div> />
</div> </div>
</div> </div>
</div> </div>
@ -100,6 +109,7 @@
</template> </template>
<script setup> <script setup>
import { computed } from 'vue' import { computed } from 'vue'

52
components/template/PageFooter.vue
View File

@ -23,11 +23,13 @@
<div class="row align-items-end"> <div class="row align-items-end">
<div class="col-lg-4 mb-4"> <div class="col-lg-4 mb-4">
<p> <p>
<img <NuxtImg
provider="strapi"
:src="invertLogoUrl" :src="invertLogoUrl"
:alt="companyinfo?.company" :alt="companyinfo?.company"
class="logo mb-1" class="logo mb-1"
> loading="lazy"
/>
</p> </p>
<p>{{ companyinfo?.contact }}</p> <p>{{ companyinfo?.contact }}</p>
<p>{{ companyinfo?.street }}</p> <p>{{ companyinfo?.street }}</p>
@ -35,7 +37,7 @@
{{ companyinfo?.postalcode }} {{ companyinfo?.postalcode }}
{{ companyinfo?.city }} {{ companyinfo?.city }}
</p> </p>
<p>{{ companyinfo?.district }}</p> <p><i>{{ companyinfo?.district }}</i></p>
<br > <br >
<p v-if="false" class="mb-4"> <p v-if="false" class="mb-4">
<span class="icon"> <span class="icon">
@ -86,14 +88,20 @@
</div> </div>
<div class="col-lg-5 mb-4"> <div class="col-lg-5 mb-4">
<div class="certificates"> <div class="certificates">
<img <NuxtImg
:src="cmsUrl + '/uploads/exali_Siegel_5adfae16cb.jpg'" provider="strapi"
src="/uploads/exali_Siegel_5adfae16cb.jpg"
alt="exali-Versicherungssiegel" alt="exali-Versicherungssiegel"
> format="webp"
<img loading="lazy"
:src="cmsUrl + '/uploads/XDI_zertifikat_162b61f4ad.png'" />
<NuxtImg
provider="strapi"
src="/uploads/XDI_zertifikat_162b61f4ad.png"
alt="XDI-Zertifizierung" alt="XDI-Zertifizierung"
> format="webp"
loading="lazy"
/>
</div> </div>
<p class="mb-3"> <p class="mb-3">
Handcrafted webdesign with passion and Handcrafted webdesign with passion and
@ -105,19 +113,23 @@
</p> </p>
<p class="powered"> <p class="powered">
Powered by Powered by
<img <NuxtImg
:src="cmsUrl + '/uploads/nuxt_Logo_white_1ad151de78.svg'" provider="strapi"
alt="vue logo" src="/uploads/nuxt_Logo_white_1ad151de78.svg"
> alt="Nuxt Logo"
loading="eager"
height="26"
/>
<span class="bigIcon"> <span class="bigIcon">
<svg> <svg><use xlink:href="/assets/icons/collection.svg#plus"/></svg>
<use xlink:href="/assets/icons/collection.svg#plus"/>
</svg>
</span> </span>
<img <NuxtImg
:src="cmsUrl + '/uploads/strapi_logo_071ec5df4d.png'" provider="strapi"
alt="strapi logo" src="/uploads/strapi_logo_071ec5df4d.png"
> alt="Strapi Logo"
loading="eager"
height="26"
/>
</p> </p>
<p class="mt-4"> <p class="mt-4">
&copy; 2018-{{ currentYear }} by {{ companyinfo?.web }} &copy; 2018-{{ currentYear }} by {{ companyinfo?.web }}

13
components/template/PageHeader.vue
View File

@ -6,7 +6,12 @@
<SettingsPanel v-if="screenWidth >= 1350" /> <SettingsPanel v-if="screenWidth >= 1350" />
<div class="headContent"> <div class="headContent">
<div class="logoBox" role="button" tabindex="0" aria-label="Startseite" @click="navigateTo('/')"> <div class="logoBox" role="button" tabindex="0" aria-label="Startseite" @click="navigateTo('/')">
<img :src="cmsUrl + '/uploads/DML_Logo_grey_2024_c51210b70c.svg'" alt="digimedialoop Logo" > <NuxtImg
provider="strapi"
src="/uploads/DML_Logo_grey_2024_c51210b70c.svg"
alt="digimedialoop Logo"
loading="eager"
/>
</div> </div>
<div <div
class="navigationBox" class="navigationBox"
@ -18,10 +23,10 @@
aria-label="Hauptnavigation" aria-label="Hauptnavigation"
tabindex="0" tabindex="0"
> >
<div class="closer" <div
class="closer"
@click="toggleMenu" @click="toggleMenu"
@keydown.enter="toggleMenu"> @keydown.enter="toggleMenu"/>
</div>
<nav v-if="isMenuOpen || screenWidth > 1350" aria-expanded="true"> <nav v-if="isMenuOpen || screenWidth > 1350" aria-expanded="true">
<NuxtLinkLocale <NuxtLinkLocale
v-for="link in navigationLinks" v-for="link in navigationLinks"

6
nuxt.config.ts
View File

@ -44,9 +44,13 @@ export default defineNuxtConfig({
}], }],
], ],
image: { image: {
debug: true,
strapi: { strapi: {
baseURL: 'https://strapi.digimedialoop.de' baseURL: 'https://strapi.digimedialoop.de'
} },
domains: ['strapi.digimedialoop.de'],
format: ['webp'],
quality: 80
}, },
runtimeConfig: { runtimeConfig: {
public: { public: {

190
pages/index.vue
View File

@ -20,7 +20,7 @@
</div> </div>
<!-- Nach dem Container: Spiegelwelle unten --> <!-- Nach dem Container: Spiegelwelle unten -->
<svg class="sectionWave wave-bottom" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20"> <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> <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> </svg>
</section> </section>
<section aria-labelledby="solution-title"> <section aria-labelledby="solution-title">
@ -38,7 +38,8 @@
<h2 id="solution-title">{{ $t('home.solution.title') }}</h2> <h2 id="solution-title">{{ $t('home.solution.title') }}</h2>
<h3>{{ $t('home.solution.teaser') }}</h3> <h3>{{ $t('home.solution.teaser') }}</h3>
<p>{{ $t('home.solution.text') }}</p> <p>{{ $t('home.solution.text') }}</p>
<button class="mintBtn" <button
class="mintBtn"
role="button" role="button"
aria-describedby="solution-title" aria-describedby="solution-title"
aria-label="headless CMS Info" @click="navigateToArticle">{{ $t('home.solution.buttonText') }}</button> aria-label="headless CMS Info" @click="navigateToArticle">{{ $t('home.solution.buttonText') }}</button>
@ -48,81 +49,117 @@
</section> </section>
<section class="targetGroup" aria-labelledby="invitation-title"> <section class="targetGroup" aria-labelledby="invitation-title">
<svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20"> <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> <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> </svg>
<div class="container-10"> <div class="container-10">
<div class="row"> <div class="row">
<div class="col-md-4"> <div class="col-md-4"/>
</div>
<div class="col-md-8 pt-5 pb-5"> <div class="col-md-8 pt-5 pb-5">
<h2 id="invitation-title">{{ $t('home.invitation.title') }}</h2> <h2 id="invitation-title">{{ $t('home.invitation.title') }}</h2>
<h3>{{ $t('home.invitation.teaser') }}</h3> <h3>{{ $t('home.invitation.teaser') }}</h3>
<button class="pinkBtn" @click.prevent="toggleContactBubble" <button
role="button" class="pinkBtn" role="button"
aria-describedby="invitation-title" aria-describedby="invitation-title"
aria-label="Kontaktformular öffnen">{{ $t('home.invitation.button') }}</button> aria-label="Kontaktformular öffnen"
@click.prevent="toggleContactBubble">{{ $t('home.invitation.button') }}</button>
</div> </div>
</div> </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"> <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> <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> </svg>
</section> </section>
<section class="canDo"> <section class="canDo">
<div class="container"> <div class="container">
<h2 class="text-center">{{ $t('home.canDo.title') }}</h2> <h2 class="text-center">{{ $t('home.canDo.title') }}</h2>
<div class="row mb-5"> <div class="row mb-5">
<div class="col-xl-6"> <div class="col-xl-6">
<div class="row"> <div class="row">
<div class="col-md-6 my-5"> <div class="col-md-6 my-5">
<div class="innerBox"> <div class="innerBox">
<div class="canDoItem"> <div class="canDoItem">
<div class="imageBox" style="background-image: url('https://strapi.digimedialoop.de/uploads/website_Erfolg_Marketing_3c36a43ba5.png');"></div> <NuxtImg
<h3>{{ $t('home.canDo.item1.title') }}</h3> provider="strapi"
<p>{{ $t('home.canDo.item1.text') }}</p> src="/uploads/website_Erfolg_Marketing_3c36a43ba5.png"
format="webp"
:modifiers="{ quality: 80 }"
sizes="xs:280px sm:300px md:350px"
class="imageBox"
loading="lazy"
alt="Website Erfolg Marketing"
/>
<h3>{{ $t('home.canDo.item1.title') }}</h3>
<p>{{ $t('home.canDo.item1.text') }}</p>
</div>
</div> </div>
</div> </div>
</div> <div class="col-md-6 my-5">
<div class="col-md-6 my-5"> <div class="innerBox">
<div class="innerBox"> <div class="canDoItem">
<div class="canDoItem"> <NuxtImg
<div class="imageBox" style="background-image: url('https://strapi.digimedialoop.de/uploads/Kundenbindung_45d45ef3fc.png');"></div> provider="strapi"
<h3>{{ $t('home.canDo.item2.title') }}</h3> src="/uploads/Kundenbindung_45d45ef3fc.png"
<p>{{ $t('home.canDo.item2.text') }}</p> format="webp"
:modifiers="{ quality: 80 }"
sizes="xs:280px sm:300px md:350px"
class="imageBox"
loading="lazy"
alt="Kundenbindung Strategie"
/>
<h3>{{ $t('home.canDo.item2.title') }}</h3>
<p>{{ $t('home.canDo.item2.text') }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="col-xl-6">
<div class="col-xl-6"> <div class="row">
<div class="row"> <div class="col-md-6 my-5">
<div class="col-md-6 my-5"> <div class="innerBox">
<div class="innerBox"> <div class="canDoItem" role="group" aria-labelledby="cando-title">
<div class="canDoItem" role="group" aria-labelledby="cando-title"> <NuxtImg
<div class="imageBox" style="background-image: url('https://strapi.digimedialoop.de/uploads/Screen_Shot_Tool_20250228133408_beb2a11980.png');"></div> provider="strapi"
<h3 id="cando-title">{{ $t('home.canDo.item3.title') }}</h3> src="/uploads/Screen_Shot_Tool_20250228133408_beb2a11980.png"
<p>{{ $t('home.canDo.item3.text') }}</p> format="webp"
:modifiers="{ quality: 80 }"
sizes="xs:280px sm:300px md:350px"
class="imageBox"
loading="lazy"
alt="Screen Tool Beispiel"
/>
<h3 id="cando-title">{{ $t('home.canDo.item3.title') }}</h3>
<p>{{ $t('home.canDo.item3.text') }}</p>
</div>
</div> </div>
</div> </div>
</div> <div class="col-md-6 my-5">
<div class="col-md-6 my-5"> <div class="innerBox">
<div class="innerBox"> <div class="canDoItem">
<div class="canDoItem"> <NuxtImg
<div class="imageBox" style="background-image: url('https://strapi.digimedialoop.de/uploads/Screen_Shot_Tool_20250228133812_0a20d4320e.png');"></div> provider="strapi"
<h3>{{ $t('home.canDo.item4.title') }}</h3> src="/uploads/Screen_Shot_Tool_20250228133812_0a20d4320e.png"
<p>{{ $t('home.canDo.item4.text') }}</p> format="webp"
:modifiers="{ quality: 80 }"
sizes="xs:280px sm:300px md:350px"
class="imageBox"
alt="Screen Tool Beispiel"
/>
<h3>{{ $t('home.canDo.item4.title') }}</h3>
<p>{{ $t('home.canDo.item4.text') }}</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </section>
</section>
<section class="compBox"> <section class="compBox">
<svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20"> <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> <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> </svg>
<div class="container-10 pb-5"> <div class="container-10 pb-5">
<div class="row d-flex align-items-center"> <div class="row d-flex align-items-center">
@ -133,27 +170,28 @@
</div> </div>
<div class="col-md-6 mt-5 pt-4 pb-4"> <div class="col-md-6 mt-5 pt-4 pb-4">
<ImageComparisonSlider <ImageComparisonSlider
beforeImage="https://strapi.digimedialoop.de/uploads/Image_Comp_BSK_Before_1ae2a67e1b.png" before-image="/uploads/Image_Comp_BSK_Before_1ae2a67e1b.png"
afterImage="https://strapi.digimedialoop.de/uploads/BSK_After_9de7feda0b.webp" after-image="/uploads/BSK_After_9de7feda0b.webp"
/> />
</div> </div>
</div> </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"> <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> <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> </svg>
</section> </section>
<section> <section>
<div class="container-10 text-center py-5"> <div class="container-10 text-center py-5">
<h3>{{ $t('home.finalCall.title') }}</h3> <h3>{{ $t('home.finalCall.title') }}</h3>
<button class="pinkBtn mt-3" <button
@click.prevent="toggleContactBubble" class="pinkBtn mt-3"
role="button" role="button"
:aria-label="$t('home.finalCall.button')">{{ $t('home.finalCall.button') }}</button> :aria-label="$t('home.finalCall.button')"
@click.prevent="toggleContactBubble">{{ $t('home.finalCall.button') }}</button>
</div> </div>
</section> </section>
<MarqueeBanner :items="logoItems" :logoHeight="60" :title="$t('home.marqueeBanner.title')" /> <MarqueeBanner :items="logoItems" :logo-height="60" :title="$t('home.marqueeBanner.title')" />
<FAQArea pageLink="/" :headline="$t('home.faqArea.headline')" /> <FAQArea page-link="/" :headline="$t('home.faqArea.headline')" />
</div> </div>
</template> </template>
@ -341,32 +379,26 @@ const logoItems = computed(() => {
border-bottom: 1px solid lighten($beige, 0%) border-bottom: 1px solid lighten($beige, 0%)
height: 100% height: 100%
.canDoItem .canDoItem
display: flex
flex-direction: column .imageBox
align-items: center margin: 2rem auto
justify-content: flex-start width: 100%
text-align: center max-width: 280px
color: black aspect-ratio: 5 / 4
height: 100% object-fit: cover
margin-top: .5rem border-radius: 1rem
display: block
&:nth-child(1) .imageBox // Individuelle Formen für jedes Bild
border-radius: $loopShape1 &:nth-child(1)
&:nth-child(2) .imageBox border-radius: $loopShape1
border-radius: $loopShape2 &:nth-child(2)
&:nth-child(3) .imageBox border-radius: $loopShape2
border-radius: $loopShape3 &:nth-child(3)
&:nth-child(4) .imageBox border-radius: $loopShape3
border-radius: $loopShape4 &:nth-child(4)
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 h3
font-size: 1.2rem font-size: 1.2rem