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

home + services new

Browse Source
This commit is contained in:
Sabrina Hennrich 2025-06-05 13:59:56 +02:00
parent 49520994a7
commit fe3c2a6355
12 changed files with 352 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/CallToActionBox.vue
View File

@ -27,7 +27,8 @@
<style scoped lang="sass"> <style scoped lang="sass">
.ctaBox .ctaBox
margin: 5vh 10% margin: 5vh 10%
text-align: center
h3 h3
font-size: 1.6rem font-size: clamp(1.4rem, .8rem + 2vw, 1.8rem)
</style> </style>

59
components/HeroBox.vue
View File

@ -1,6 +1,11 @@
// components/HeroBox.vue // components/HeroBox.vue
<template> <template>
<section ref="heroBoxRef" class="heroBox" :class="{ 'dark': darkBackground, 'light': !darkBackground }" :aria-label="ariaLabel"> <section
ref="heroBoxRef"
class="heroBox"
:class="{ 'dark': darkBackground, 'light': !darkBackground }"
:aria-label="ariaLabel"
>
<NuxtImg <NuxtImg
provider="strapi" provider="strapi"
:src="image" :src="image"
@ -13,7 +18,6 @@
preload preload
fetchpriority="high" fetchpriority="high"
/> />
<!-- Optionales Overlay-Bild -->
<NuxtImg <NuxtImg
v-if="overlayImage" v-if="overlayImage"
provider="strapi" provider="strapi"
@ -27,10 +31,8 @@
}" }"
aria-hidden="true" aria-hidden="true"
/> />
<div class="container-10 content"> <div class="container-10 heroContent">
<h1>{{ $t(content.headline1) }}</h1> <slot />
<h2>{{ $t(content.headline2) }}</h2>
<h3>{{ $t(content.headline3) }}</h3>
</div> </div>
<svg class="sectionWave wave-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true"> <svg class="sectionWave wave-bottom" 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"/> <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"/>
@ -39,17 +41,13 @@
</template> </template>
<script setup> <script setup>
// Parallax Overlay-Image
import { ref, onMounted, onUnmounted } from 'vue' import { ref, onMounted, onUnmounted } from 'vue'
import { useMainStore } from '@/stores/main' import { useMainStore } from '@/stores/main'
const mainStore = useMainStore() const mainStore = useMainStore()
const props = defineProps({ const props = defineProps({
image: String, image: String,
ariaLabel: String, ariaLabel: String,
content: {
type: Object,
required: true
},
overlayImage: { overlayImage: {
type: String, type: String,
default: null default: null
@ -66,7 +64,6 @@ const props = defineProps({
type: Boolean, type: Boolean,
default: false default: false
}, },
overlayPosition: { overlayPosition: {
type: Object, type: Object,
default: () => ({ default: () => ({
@ -75,32 +72,31 @@ const props = defineProps({
}) })
} }
}) })
const parallaxY = ref(0) const parallaxY = ref(0)
const heroBoxRef = ref(null) const heroBoxRef = ref(null)
let targetY = 0 let targetY = 0
let animationFrame let animationFrame
const updateParallax = () => { const updateParallax = () => {
// Ease: Linear interpolation (lerp) zwischen aktuellem Wert und Zielwert
parallaxY.value += (targetY - parallaxY.value) * 0.1 parallaxY.value += (targetY - parallaxY.value) * 0.1
animationFrame = requestAnimationFrame(updateParallax) animationFrame = requestAnimationFrame(updateParallax)
} }
const onScroll = () => { const onScroll = () => {
targetY = window.scrollY * 0.3 // oder was dir gefällt targetY = window.scrollY * 0.3
} }
const updateHeight = () => { const updateHeight = () => {
if (heroBoxRef.value) { if (heroBoxRef.value) {
mainStore.setHeroBoxHeight(heroBoxRef.value.offsetHeight) mainStore.setHeroBoxHeight(heroBoxRef.value.offsetHeight)
mainStore.setDarkHeroBack(props.darkBackground) mainStore.setDarkHeroBack(props.darkBackground)
} }
} }
onMounted(() => {
onMounted(() => {
window.addEventListener('scroll', onScroll, { passive: true }) window.addEventListener('scroll', onScroll, { passive: true })
updateParallax() updateParallax()
// HeroBoxHeight for Logo
updateHeight() updateHeight()
window.addEventListener('resize', updateHeight) window.addEventListener('resize', updateHeight)
}) })
@ -110,10 +106,10 @@ onUnmounted(() => {
cancelAnimationFrame(animationFrame) cancelAnimationFrame(animationFrame)
window.removeEventListener('resize', updateHeight) window.removeEventListener('resize', updateHeight)
}) })
</script> </script>
<style lang="sass" scoped>
<style lang="sass">
.heroBox .heroBox
position: relative position: relative
min-height: 35rem min-height: 35rem
@ -169,7 +165,7 @@ onUnmounted(() => {
max-width: 350px max-width: 350px
object-fit: contain object-fit: contain
.content, h1, h2, h3 .heroContent, h1, h2, h3
position: relative position: relative
z-index: 2 z-index: 2
@ -179,20 +175,21 @@ onUnmounted(() => {
@media (max-width: 768px) @media (max-width: 768px)
max-width: 100% max-width: 100%
&.dark h1, &.dark h2, &.dark h3 &.dark h1, &.dark h2, &.dark h3, &.dark p
color: white color: white
&.light h1, &.light h2, &.light h3 &.light h1, &.light h2, &.light h3, , &.light p
color: black color: black
h1 h1
margin-top: 3rem margin-top: 3rem
font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem) font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem)
line-height: 140% line-height: 135%
margin-bottom: 0 margin-bottom: 0
font-family: 'Comfortaa' font-family: 'Comfortaa'
hyphens: auto hyphens: auto
h2 h2
font-size: clamp(1.2rem, .7rem + 2vw, 2rem) font-size: clamp(1.2rem, .7rem + 2vw, 2rem)
margin: .8rem 0 .8rem 0 margin: .8rem 0 .8rem 0
@ -200,5 +197,15 @@ onUnmounted(() => {
h3 h3
font-size: 1.2rem font-size: 1.2rem
margin: .8rem 0 .8rem 0
p
font-size: 1.1rem
margin: .8rem 0 .8rem 0
@media(max-width: $breakPointMD)
h1, h2, h3, p
line-height: 120%
.btn
margin-bottom: 1rem
</style> </style>

135
components/ServicesTeaser.vue Normal file
View File

@ -0,0 +1,135 @@
<template>
<section class="services">
<h2>Unsere Kernkompetenzen für Ihren Erfolg im Web</h2>
<p><b>Vier starke Säulen für Ihre Website:</b> Von barrierefrei über SEO bis hin zu Headless CMS und KI-Kompatibilität. Entdecken Sie, wie unsere spezialisierten Leistungen Ihre digitale Präsenz voranbringen. Einfach, effektiv und auf Ihre Bedürfnisse zugeschnitten.</p>
<div class="serviceBoxes">
<div
v-for="(service, index) in services"
:key="index"
class="service"
>
<NuxtImg
provider="strapi"
:src="service.backgroundImage"
alt=""
class="service-bg"
aria-hidden="true"
priority
loading="eager"
fetchpriority="high"
/>
<div class="overlay"></div>
<div class="serviceContent">
<h3>{{ service.title }}</h3>
<p>{{ service.description }}</p>
<NuxtLinkLocale :to="service.link" class="link">{{ service.linktext }}</NuxtLinkLocale>
</div>
</div>
</div>
</section>
</template>
<script setup>
const services = [
{
title: 'Barrierefreie Webseiten',
description: 'Webseiten, die für alle zugänglich sind. Barrierefrei, nutzerfreundlich und technisch modern gestaltet für optimale Bedienbarkeit und bessere Reichweite.',
link: 'services-accessibility',
linktext: 'Mehr erfahren',
backgroundImage: '/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp'
},
{
title: 'Suchmaschinen-Optimierung',
description: 'Mit technischer SEO sorgen wir für bessere Sichtbarkeit in Google & Co. Schnelle, strukturierte Webseiten, die Besucher anziehen und überzeugen.',
link: 'services-seo',
linktext: 'Mehr erfahren',
backgroundImage: '/uploads/DML_Service_Header_SEO_b11ae8940a.webp'
},
{
title: 'Headless CMS',
description: 'Flexibles Content-Management mit modernem Headless CMS. Schnelle Webseiten, einfache Pflege und volle Kontrolle über Inhalte und Design.',
link: 'services-cms',
linktext: 'Mehr erfahren',
backgroundImage: '/uploads/DML_Service_Header_CMS_a438599970.webp'
},
{
title: 'KI-Kompatibilität',
description: 'Webseiten, die mit Künstlicher Intelligenz zusammenarbeiten. Zukunftssicher, smart optimiert und bereit für automatisierte Prozesse und Personalisierung.',
link: 'services-ai',
linktext: 'Mehr erfahren',
backgroundImage: '/uploads/DML_Service_Header_AI_639dd0d7b1.webp'
},
]
</script>
<style lang="sass">
.services
width: 80%
margin: 4rem auto // zentriert den Container
.serviceBoxes
margin-top: 2rem
display: flex
flex-wrap: wrap
justify-content: center
gap: 1rem
.service
flex: 0 1 300px // fixe Breite von 300px, wächst nicht, schrumpft aber bei Bedarf
height: 300px
position: relative
color: white
display: flex
flex-direction: column
justify-content: flex-end
overflow: hidden
border-radius: 8px
cursor: pointer
transition: transform 0.3s ease
&:hover
transform: translateY(-5px)
.service-bg
position: absolute
inset: 0
width: 100%
height: 100%
object-fit: cover
object-position: center
z-index: 0
.overlay
position: absolute
inset: 0
background: linear-gradient(to top right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 75%, rgba(255,255,255,0.2) 100%)
z-index: 1
.serviceContent
position: relative
padding: 1.5rem
z-index: 2
h3
margin: 0 0 0.5rem 0
font-size: 1.25rem
font-weight: 700
p
margin: 0 0 1rem 0
font-size: 1rem
line-height: 1.3
.link
color: black
background-color: white
padding: .5rem 1.25rem
border-radius: 1rem
text-decoration: none
font-family: 'Mainfont-Bold'
font-size: 90%
text-transform: uppercase
&:hover
color: #ddd
</style>

2
layouts/default.vue
View File

@ -128,6 +128,7 @@ main
text-decoration: none text-decoration: none
display: inline-block display: inline-block
text-align: center text-align: center
margin-right: 1rem
&::before &::before
content: '' content: ''
position: absolute position: absolute
@ -169,6 +170,7 @@ main
background-color: white background-color: white
color: $darkgrey color: $darkgrey
border: 1px solid transparent border: 1px solid transparent
font-family: 'Mainfont-Bold'
&:hover &:hover
background-image: linear-gradient(to top left, $pink, lighten($pink, 5%)) background-image: linear-gradient(to top left, $pink, lighten($pink, 5%))
color: white color: white

142
pages/index.vue
View File

@ -3,15 +3,43 @@
<HeroBox <HeroBox
image="/uploads/bg_technologie_d24f950ccf.webp" image="/uploads/bg_technologie_d24f950ccf.webp"
:aria-label="$t('pages.services.hero.ariaLabel')" :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" :dark-background="true"
/> >
<h1>High-Performance-Webseiten</h1>
<h2>die Ihre Zielgruppe begeistern</h2>
<h3>Schnell, effizient und leistungsstark</h3>
<p>Wir nutzen modernste Technologien wie Nuxt 3 + Strapi in Headless-Architektur, um Webseiten zu entwickeln, die zukunftssicher, schnell und flexibel sind.</p>
<NuxtLinkLocale to="references" class="btn whiteBtn">Unsere Referenzen</NuxtLinkLocale>
</HeroBox>
<section class="explainBox" :aria-label="$t('pages.services.explain.ariaLabel')"> <section class="whatWeDo">
<NuxtImg
src="/uploads/laechelnde_Dame_a393baf878.webp"
provider="strapi"
class="rightImg"
/>
<div class="content">
<h2>Webseiten für Mensch und Maschine</h2>
<h3>Design das Menschen begeistert mit Struktur die Maschinen verstehen</h3>
<p>Wir entwickeln performante, barrierefreie Webseiten mit klarer Struktur,
die Nutzer überzeugen und von Suchmaschinen wie Google oder Bing, sowie KI-Systemen optimal verstanden werden.</p>
<p>Dabei setzen wir auf moderne Standards, erfüllen rechtliche Anforderungen wie Barrierefreiheit und Datenschutz
und sorgen mit zukunftsfähiger Technologie dafür, dass Ihre Webseite auf dem neuesten Stand ist.</p>
</div>
<NuxtImg
src="/uploads/energy_1_e15df59b8a.webp"
provider="strapi"
class="leftImg"
/>
</section>
<ServicesTeaser />
<!-- <section class="explainBox" :aria-label="$t('pages.services.explain.ariaLabel')">
<NuxtImg <NuxtImg
src="/uploads/Human_Maschine_BG_5c91e9100f.webp" src="/uploads/Human_Maschine_BG_5c91e9100f.webp"
provider="strapi" provider="strapi"
@ -36,7 +64,7 @@
<NuxtLinkLocale class="btn" to="services-cms">Erfahren Sie mehr zu Headless CMS</NuxtLinkLocale> <NuxtLinkLocale class="btn" to="services-cms">Erfahren Sie mehr zu Headless CMS</NuxtLinkLocale>
</div> </div>
</section> </section> -->
@ -49,12 +77,13 @@
<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 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 content">
<h2>Webseiten für Schulen und Bildungseinrichtungen</h2>
<div class="row d-flex align-items-center"> <div class="row d-flex align-items-center">
<div class="col-md-6"> <div class="col-md-6">
<h2>{{ $t('pages.home.compBox.title') }}</h2>
<h3>{{ $t('pages.home.compBox.subtitle') }}</h3> <h3>Barrierefreiheit nach BITV 2.0 und WCAG 2.1 – gesetzeskonform und nutzerfreundlich</h3>
<p>{{ $t('pages.home.compBox.text') }}</p> <p>Unsere Lösungen für Schulen sind klar strukturiert und barrierefrei – so finden Schüler, Eltern und Lehrer schnell und unkompliziert alle wichtigen Informationen. Ein moderner Internetauftritt, der den Alltag erleichtert und Ihre Kommunikation stärkt.</p>
</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
@ -63,23 +92,22 @@
/> />
</div> </div>
</div> </div>
<p class="btnArea">
<NuxtLinkLocale class="btn mintBtn" to="sectors-schools">Infos über Schul-Homepages</NuxtLinkLocale>
<NuxtLinkLocale class="btn mintBtn" to="sectors-schools">Projekt: Berchenschule Konstanz</NuxtLinkLocale>
</p>
</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 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>
<CallToActionBox
:headline="$t('pages.home.finalCall.title')"
:button-text="$t('pages.home.finalCall.button')"
/>
<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" /> <MarqueeBanner :items="logoItems" :logo-height="60" :title="$t('pages.home.marqueeBanner.title')" :greyscale="true" />
<FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" /> <FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" />
@ -90,18 +118,13 @@ class="pinkBtn mt-3"
<script setup> <script setup>
import { useMainStore } from '@/stores/main'; import { useMainStore } from '@/stores/main';
import { storeToRefs } from 'pinia'; 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 mainStore = useMainStore();
const { customers } = storeToRefs(mainStore); const { customers } = storeToRefs(mainStore);
const toggleContactBubble = () => mainStore.toggleContactBubble(); const toggleContactBubble = () => mainStore.toggleContactBubble();
const screenWidth = computed(() => mainStore.screenWidth);
const waveHeight = computed(() => (screenWidth.value / 25).toFixed(0));
const logoItems = computed(() => { const logoItems = computed(() => {
return customers.value.map(customer => ({ return customers.value.map(customer => ({
@ -117,6 +140,50 @@ const logoItems = computed(() => {
<style lang="sass"> <style lang="sass">
.homePage .homePage
.whatWeDo
position: relative
overflow-x: hidden
.rightImg, .leftImg
height: 100%
max-height: 500px
position: absolute
top: 0
aspect-ratio: 1 / 1
.rightImg
right: 0
transform: translateX(50%)
.leftImg
left: 0
transform: translateX(-25%)
.content
position: relative
z-index: 1
width: 65%
margin: 3rem 15% 2rem 20%
text-align: center
padding: 2rem 5%
border-radius: 1rem
@media(max-width: $breakPointMD)
width: 90%
margin: 3rem 5% 3rem 5%
background-color: rgba(255,255,255,.8)
h2
font-size: clamp(1.2rem, .7rem + 2vw, 2rem)
font-family: 'Comfortaa'
h3
font-family: 'Mainfont-Bold'
font-size: 1.3rem
p
font-size: 1.1rem
.explainBox .explainBox
position: relative position: relative
overflow: hidden overflow: hidden
@ -162,12 +229,23 @@ const logoItems = computed(() => {
margin: 4.5rem 0 8vh 3rem !important margin: 4.5rem 0 8vh 3rem !important
.compBox .compBox
background-image: url(https://strapi.digimedialoop.de/uploads/bubbles_DM_Lmint_trans_08ddb0a921.webp) //linear-gradient(to bottom left, white, #FEDEE8, white) background-image: url(https://strapi.digimedialoop.de/uploads/watercolor_da8a37ce48.webp)
background-size: cover background-size: cover
background-repeat: no-repeat background-repeat: no-repeat
padding: 5rem 0 3rem 0 padding: 6rem 0 6rem 0
.content
background-color: rgba(255,255,255,.7)
padding: 2rem 5%
margin-top: 2rem
margin-bottom: 2rem
border-radius: 1rem
transform: rotate(-1deg)
.btnArea
a
margin-right: 1rem
font-family: 'Mainfont-Bold'
h2 h2
font-family: 'Comfortaa' font-family: 'Comfortaa-Bold'
h3 h3
line-height: 1.5 line-height: 1.5
p p

5
pages/project/[link].vue
View File

@ -87,6 +87,11 @@
</div> </div>
</div> </div>
</div> </div>
<CallToActionBox
:headline="$t('pages.references.ctaBox.headline')"
:text="$t('pages.references.ctaBox.text')"
:button-text="$t('pages.references.ctaBox.button')"
/>
</section> </section>

12
pages/sectors/schools/index.vue
View File

@ -3,16 +3,16 @@
<HeroBox <HeroBox
image="/uploads/watercolor_da8a37ce48.webp" image="/uploads/watercolor_da8a37ce48.webp"
:aria-label="$t('pages.sectors.schools.hero.ariaLabel')" :aria-label="$t('pages.sectors.schools.hero.ariaLabel')"
:content="{
headline1: 'pages.sectors.schools.hero.headline1',
headline2: 'pages.sectors.schools.hero.headline2',
headline3: 'pages.sectors.schools.hero.headline3'
}"
overlay-image="/uploads/schul_Stifte_613bf7f7d0.webp" overlay-image="/uploads/schul_Stifte_613bf7f7d0.webp"
overlay-alt-text="Schulmaterial" overlay-alt-text="Schulmaterial"
:overlay-width="'32%'" :overlay-width="'32%'"
:overlay-position="{ top: '32%', right: '0' }" :overlay-position="{ top: '32%', right: '0' }"
/> >
<h1>{{ $t('pages.sectors.schools.hero.headline1') }}</h1>
<h2>{{ $t('pages.sectors.schools.hero.headline2') }}</h2>
<h3>{{ $t('pages.sectors.schools.hero.headline3') }}</h3>
</HeroBox>
<section class="weKnow"> <section class="weKnow">
<div class="container"> <div class="container">

12
pages/services/accessibility/index.vue
View File

@ -3,13 +3,13 @@
<HeroBox <HeroBox
image="/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp" image="/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp"
:aria-label="$t('pages.services.accessibility.hero.ariaLabel')" :aria-label="$t('pages.services.accessibility.hero.ariaLabel')"
:content="{
headline1: 'pages.services.accessibility.hero.headline1',
headline2: 'pages.services.accessibility.hero.headline2',
headline3: 'pages.services.accessibility.hero.headline3'
}"
:dark-background="true" :dark-background="true"
/> >
<h1>{{ $t('pages.services.accessibility.hero.headline1') }}</h1>
<h2>{{ $t('pages.services.accessibility.hero.headline2') }}</h2>
<h3>{{ $t('pages.services.accessibility.hero.headline3') }}</h3>
</HeroBox>
<section class="targetGroup"> <section class="targetGroup">
<div class="container-10"> <div class="container-10">

12
pages/services/ai/index.vue
View File

@ -3,17 +3,17 @@
<HeroBox <HeroBox
image="/uploads/DML_Service_Header_AI_639dd0d7b1.webp" image="/uploads/DML_Service_Header_AI_639dd0d7b1.webp"
:aria-label="$t('pages.services.ai.hero.ariaLabel')" :aria-label="$t('pages.services.ai.hero.ariaLabel')"
:content="{
headline1: 'pages.services.ai.hero.headline1',
headline2: 'pages.services.ai.hero.headline2',
headline3: 'pages.services.ai.hero.headline3'
}"
overlay-image="/uploads/kirby_fly_3de66b2839.webp" overlay-image="/uploads/kirby_fly_3de66b2839.webp"
overlay-alt-text="ki roboter fliegt" overlay-alt-text="ki roboter fliegt"
:overlay-width="'32%'" :overlay-width="'32%'"
:overlay-position="{ top: '28%', right: '3vw' }" :overlay-position="{ top: '28%', right: '3vw' }"
:dark-background="true" :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"> <section class="whyAI">
<div class="container-10"> <div class="container-10">
<NuxtImg <NuxtImg

12
pages/services/cms/index.vue
View File

@ -3,13 +3,13 @@
<HeroBox <HeroBox
image="/uploads/DML_Service_Header_CMS_a438599970.webp" image="/uploads/DML_Service_Header_CMS_a438599970.webp"
:aria-label="$t('pages.services.cms.hero.ariaLabel')" :aria-label="$t('pages.services.cms.hero.ariaLabel')"
:content="{
headline1: 'pages.services.cms.hero.headline1',
headline2: 'pages.services.cms.hero.headline2',
headline3: 'pages.services.cms.hero.headline3'
}"
:dark-background="true" :dark-background="true"
/> >
<h1>{{ $t('pages.services.cms.hero.headline1') }}</h1>
<h2>{{ $t('pages.services.cms.hero.headline2') }}</h2>
<h3>{{ $t('pages.services.cms.hero.headline3') }}</h3>
</HeroBox>
<section class="whatIs"> <section class="whatIs">
<div class="container-10"> <div class="container-10">
<NuxtImg <NuxtImg

21
pages/services/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="servicesPage"> <div class="servicesPage">
<section class="heroBox_service" aria-labelledby="hero-heading"> <!-- <section class="heroBox_service" aria-labelledby="hero-heading">
<NuxtImg <NuxtImg
provider="strapi" provider="strapi"
src="/uploads/large_DML_Home_Hero_4f27bc7f8e.webp" src="/uploads/large_DML_Home_Hero_4f27bc7f8e.webp"
@ -18,14 +18,25 @@
<h2>{{ $t('pages.home.heroBox.h2') }}</h2> <h2>{{ $t('pages.home.heroBox.h2') }}</h2>
<h3>{{ $t('pages.home.heroBox.h3') }}</h3> <h3>{{ $t('pages.home.heroBox.h3') }}</h3>
</div> </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"> <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"/> <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> -->
<HeroBox
image="/uploads/bubbles_DM_Lmint_trans_08ddb0a921.webp"
:aria-label="$t('pages.services.hero.ariaLabel')"
:dark-background="false"
>
<h1>Webseiten mit Substanz und Strategie</h1>
<h2>Unsere Leistungen verbinden technisches Know-how mit klarer Ausrichtung auf Nutzer, Sichtbarkeit und Zukunftssicherheit</h2>
<h3>Barrierefrei, suchmaschinen-optimiert, mit Headless-Technologie und KI-Kompatibilität – passgenau für Ihr digitales Business</h3>
</HeroBox>
<section aria-labelledby="solution-title"> <ServicesTeaser />
<!-- <section aria-labelledby="solution-title">
<div class="container-10 webStrategy"> <div class="container-10 webStrategy">
<h2 id="solution-title">{{ $t('pages.home.solution.title') }}</h2> <h2 id="solution-title">{{ $t('pages.home.solution.title') }}</h2>
<h3>{{ $t('pages.home.solution.teaser') }}</h3> <h3>{{ $t('pages.home.solution.teaser') }}</h3>
@ -38,7 +49,7 @@
{{ $t('pages.home.solution.buttonText') }} {{ $t('pages.home.solution.buttonText') }}
</button> </button>
</div> </div>
</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" aria-hidden="true"> <svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">

12
pages/services/seo/index.vue
View File

@ -3,13 +3,13 @@
<HeroBox <HeroBox
image="/uploads/DML_Service_Header_SEO_b11ae8940a.webp" image="/uploads/DML_Service_Header_SEO_b11ae8940a.webp"
:aria-label="$t('pages.services.seo.hero.ariaLabel')" :aria-label="$t('pages.services.seo.hero.ariaLabel')"
:content="{
headline1: 'pages.services.seo.hero.headline1',
headline2: 'pages.services.seo.hero.headline2',
headline3: 'pages.services.seo.hero.headline3'
}"
:dark-background="true" :dark-background="true"
/> >
<h1>{{ $t('pages.services.seo.hero.headline1') }}</h1>
<h2>{{ $t('pages.services.seo.hero.headline2') }}</h2>
<h3>{{ $t('pages.services.seo.hero.headline3') }}</h3>
</HeroBox>
<section class="whatIs"> <section class="whatIs">
<div class="container-10"> <div class="container-10">
<h2>Was ist Suchmaschinen-Optimierung? - Ein Überblick</h2> <h2>Was ist Suchmaschinen-Optimierung? - Ein Überblick</h2>