home + services new
This commit is contained in:
parent
49520994a7
commit
fe3c2a6355
@ -27,7 +27,8 @@
|
||||
<style scoped lang="sass">
|
||||
.ctaBox
|
||||
margin: 5vh 10%
|
||||
text-align: center
|
||||
h3
|
||||
font-size: 1.6rem
|
||||
font-size: clamp(1.4rem, .8rem + 2vw, 1.8rem)
|
||||
</style>
|
||||
|
||||
@ -1,6 +1,11 @@
|
||||
// components/HeroBox.vue
|
||||
<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
|
||||
provider="strapi"
|
||||
:src="image"
|
||||
@ -13,7 +18,6 @@
|
||||
preload
|
||||
fetchpriority="high"
|
||||
/>
|
||||
<!-- Optionales Overlay-Bild -->
|
||||
<NuxtImg
|
||||
v-if="overlayImage"
|
||||
provider="strapi"
|
||||
@ -27,10 +31,8 @@
|
||||
}"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div class="container-10 content">
|
||||
<h1>{{ $t(content.headline1) }}</h1>
|
||||
<h2>{{ $t(content.headline2) }}</h2>
|
||||
<h3>{{ $t(content.headline3) }}</h3>
|
||||
<div class="container-10 heroContent">
|
||||
<slot />
|
||||
</div>
|
||||
<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"/>
|
||||
@ -39,17 +41,13 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
// Parallax Overlay-Image
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { useMainStore } from '@/stores/main'
|
||||
const mainStore = useMainStore()
|
||||
|
||||
const props = defineProps({
|
||||
image: String,
|
||||
ariaLabel: String,
|
||||
content: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
overlayImage: {
|
||||
type: String,
|
||||
default: null
|
||||
@ -66,7 +64,6 @@ const props = defineProps({
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
|
||||
overlayPosition: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
@ -75,18 +72,19 @@ const props = defineProps({
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const parallaxY = ref(0)
|
||||
const heroBoxRef = ref(null)
|
||||
let targetY = 0
|
||||
let animationFrame
|
||||
|
||||
const updateParallax = () => {
|
||||
// Ease: Linear interpolation (lerp) zwischen aktuellem Wert und Zielwert
|
||||
parallaxY.value += (targetY - parallaxY.value) * 0.1
|
||||
animationFrame = requestAnimationFrame(updateParallax)
|
||||
}
|
||||
|
||||
const onScroll = () => {
|
||||
targetY = window.scrollY * 0.3 // oder was dir gefällt
|
||||
targetY = window.scrollY * 0.3
|
||||
}
|
||||
|
||||
const updateHeight = () => {
|
||||
@ -95,12 +93,10 @@ const onScroll = () => {
|
||||
mainStore.setDarkHeroBack(props.darkBackground)
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', onScroll, { passive: true })
|
||||
updateParallax()
|
||||
// HeroBoxHeight for Logo
|
||||
|
||||
updateHeight()
|
||||
window.addEventListener('resize', updateHeight)
|
||||
})
|
||||
@ -110,10 +106,10 @@ onUnmounted(() => {
|
||||
cancelAnimationFrame(animationFrame)
|
||||
window.removeEventListener('resize', updateHeight)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
|
||||
<style lang="sass">
|
||||
.heroBox
|
||||
position: relative
|
||||
min-height: 35rem
|
||||
@ -169,7 +165,7 @@ onUnmounted(() => {
|
||||
max-width: 350px
|
||||
object-fit: contain
|
||||
|
||||
.content, h1, h2, h3
|
||||
.heroContent, h1, h2, h3
|
||||
position: relative
|
||||
z-index: 2
|
||||
|
||||
@ -179,20 +175,21 @@ onUnmounted(() => {
|
||||
@media (max-width: 768px)
|
||||
max-width: 100%
|
||||
|
||||
&.dark h1, &.dark h2, &.dark h3
|
||||
&.dark h1, &.dark h2, &.dark h3, &.dark p
|
||||
color: white
|
||||
|
||||
&.light h1, &.light h2, &.light h3
|
||||
&.light h1, &.light h2, &.light h3, , &.light p
|
||||
color: black
|
||||
|
||||
h1
|
||||
margin-top: 3rem
|
||||
font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem)
|
||||
line-height: 140%
|
||||
line-height: 135%
|
||||
margin-bottom: 0
|
||||
font-family: 'Comfortaa'
|
||||
hyphens: auto
|
||||
|
||||
|
||||
h2
|
||||
font-size: clamp(1.2rem, .7rem + 2vw, 2rem)
|
||||
margin: .8rem 0 .8rem 0
|
||||
@ -200,5 +197,15 @@ onUnmounted(() => {
|
||||
|
||||
h3
|
||||
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>
|
||||
135
components/ServicesTeaser.vue
Normal file
135
components/ServicesTeaser.vue
Normal 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>
|
||||
@ -128,6 +128,7 @@ main
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
text-align: center
|
||||
margin-right: 1rem
|
||||
&::before
|
||||
content: ''
|
||||
position: absolute
|
||||
@ -169,6 +170,7 @@ main
|
||||
background-color: white
|
||||
color: $darkgrey
|
||||
border: 1px solid transparent
|
||||
font-family: 'Mainfont-Bold'
|
||||
&:hover
|
||||
background-image: linear-gradient(to top left, $pink, lighten($pink, 5%))
|
||||
color: white
|
||||
|
||||
142
pages/index.vue
142
pages/index.vue
@ -3,15 +3,43 @@
|
||||
<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"
|
||||
/>
|
||||
>
|
||||
<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
|
||||
src="/uploads/Human_Maschine_BG_5c91e9100f.webp"
|
||||
provider="strapi"
|
||||
@ -36,7 +64,7 @@
|
||||
<NuxtLinkLocale class="btn" to="services-cms">Erfahren Sie mehr zu Headless CMS</NuxtLinkLocale>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
</section> -->
|
||||
|
||||
|
||||
|
||||
@ -49,12 +77,13 @@
|
||||
<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="container-10 pb-5 content">
|
||||
<h2>Webseiten für Schulen und Bildungseinrichtungen</h2>
|
||||
<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>
|
||||
|
||||
<h3>Barrierefreiheit nach BITV 2.0 und WCAG 2.1 – gesetzeskonform und nutzerfreundlich</h3>
|
||||
<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 class="col-md-6 mt-5 pt-4 pb-4">
|
||||
<ImageComparisonSlider
|
||||
@ -63,23 +92,22 @@
|
||||
/>
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<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" />
|
||||
<FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" />
|
||||
|
||||
@ -90,18 +118,13 @@ class="pinkBtn mt-3"
|
||||
<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 => ({
|
||||
@ -117,6 +140,50 @@ const logoItems = computed(() => {
|
||||
|
||||
<style lang="sass">
|
||||
.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
|
||||
position: relative
|
||||
overflow: hidden
|
||||
@ -162,12 +229,23 @@ const logoItems = computed(() => {
|
||||
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-image: url(https://strapi.digimedialoop.de/uploads/watercolor_da8a37ce48.webp)
|
||||
background-size: cover
|
||||
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
|
||||
font-family: 'Comfortaa'
|
||||
font-family: 'Comfortaa-Bold'
|
||||
h3
|
||||
line-height: 1.5
|
||||
p
|
||||
|
||||
@ -87,6 +87,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CallToActionBox
|
||||
:headline="$t('pages.references.ctaBox.headline')"
|
||||
:text="$t('pages.references.ctaBox.text')"
|
||||
:button-text="$t('pages.references.ctaBox.button')"
|
||||
/>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
@ -3,16 +3,16 @@
|
||||
<HeroBox
|
||||
image="/uploads/watercolor_da8a37ce48.webp"
|
||||
: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-alt-text="Schulmaterial"
|
||||
:overlay-width="'32%'"
|
||||
: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">
|
||||
<div class="container">
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
<HeroBox
|
||||
image="/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp"
|
||||
: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"
|
||||
/>
|
||||
>
|
||||
<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">
|
||||
|
||||
<div class="container-10">
|
||||
|
||||
@ -3,17 +3,17 @@
|
||||
<HeroBox
|
||||
image="/uploads/DML_Service_Header_AI_639dd0d7b1.webp"
|
||||
: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-alt-text="ki roboter fliegt"
|
||||
:overlay-width="'32%'"
|
||||
:overlay-position="{ top: '28%', right: '3vw' }"
|
||||
: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">
|
||||
<div class="container-10">
|
||||
<NuxtImg
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
<HeroBox
|
||||
image="/uploads/DML_Service_Header_CMS_a438599970.webp"
|
||||
: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"
|
||||
/>
|
||||
>
|
||||
<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">
|
||||
<div class="container-10">
|
||||
<NuxtImg
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="servicesPage">
|
||||
<section class="heroBox_service" aria-labelledby="hero-heading">
|
||||
<!-- <section class="heroBox_service" aria-labelledby="hero-heading">
|
||||
<NuxtImg
|
||||
provider="strapi"
|
||||
src="/uploads/large_DML_Home_Hero_4f27bc7f8e.webp"
|
||||
@ -18,14 +18,25 @@
|
||||
<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> -->
|
||||
|
||||
<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">
|
||||
<h2 id="solution-title">{{ $t('pages.home.solution.title') }}</h2>
|
||||
<h3>{{ $t('pages.home.solution.teaser') }}</h3>
|
||||
@ -38,7 +49,7 @@
|
||||
{{ $t('pages.home.solution.buttonText') }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</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">
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
<HeroBox
|
||||
image="/uploads/DML_Service_Header_SEO_b11ae8940a.webp"
|
||||
: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"
|
||||
/>
|
||||
>
|
||||
<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">
|
||||
<div class="container-10">
|
||||
<h2>Was ist Suchmaschinen-Optimierung? - Ein Überblick</h2>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user