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

performance

Browse Source
This commit is contained in:
Sabrina Hennrich 2025-05-20 21:20:26 +02:00
parent 5771bb7cdd
commit 0a8b75750a
6 changed files with 135 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/videos/speed.mp4 Normal file
View File

Binary file not shown.

2
composables/usePageMeta.ts
View File

@ -20,7 +20,7 @@ export function usePageMeta () {
const metaTitle = page.SEO?.pageTitle ?? 'digimedialoop'
const metaDescription = page.SEO?.seoDescription ?? 'Webdesign und Webentwicklung'
const metaImage = page.SEO?.seoImage?.url ?? 'https://strapi.digimedialoop.de/uploads/DML_Logo_grey_2024_c51210b70c.svg'
const metaImage = page.SEO?.seoImage?.url ?? 'https://strapi.digimedialoop.de/uploads/DML_Logo_Info_c4011028f9.png'
// Canonical URL
const config = useRuntimeConfig()

6
i18n/locales/de.json
View File

@ -54,9 +54,9 @@
"h3": "Höchste Performanz - schnell, effizient und zukunftssicher!"
},
"solution": {
"title": "Webseiten, die mehr können: Performance, Freiheit & KI-Power",
"teaser": "Wir entwickeln maßgeschneiderte Webseiten mit JAMstack-Technologie, die perfekt auf Ihr Business abgestimmt sind und als leistungsstarkes Marketing- und Vertriebsinstrument für Ihren Erfolg sorgen.",
"text": "Durch die klare Trennung von Inhalt und Technik, unter Verwendung eines headless Content-Management-Systems, entstehen wartungsfreundliche, suchmaschinenoptimierte Lösungen, die nicht nur langfristig skalierbar sind, sondern auch Ihrem Marketing-Team die Arbeit erleichtern. Inhalte lassen sich ohne technische Hürden pflegen, neue Funktionen flexibel integrieren – ganz ohne Plugin-Chaos oder Eingriffe ins Live-System. Dank sauberer semantischer Struktur sind unsere Lösungen zudem optimal auf AI-gestützte Suchsysteme vorbereitet und ermöglichen die einfache Integration in KI-gestützte Operator-Workflows.",
"title": "Performance, KI-Kompatibilität & Barrierefreiheit",
"teaser": "Wir entwickeln maßgeschneiderte Webseiten auf Basis moderner JAMstack-Technologie, die perfekt auf Ihre Anforderungen abgestimmt sind.",
"text": "Durch die klare Trennung von Inhalt und Technik, unter Verwendung eines headless Content-Management-Systems wie Strapi, entstehen wartungsfreundliche, suchmaschinenoptimierte Lösungen, die nicht nur langfristig skalierbar sind, sondern auch Ihrem Team die Arbeit erleichtern. Inhalte lassen sich so ohne technische Hürden pflegen und neue Funktionen flexibel integrieren. Ganz ohne Plugin-Chaos oder Eingriffe ins Live-System. Dank sauberer semantischer Struktur sind unsere Lösungen zudem optimal auf AI-gestützte Suchsysteme vorbereitet und ermöglichen die einfache Integration in KI-gestützte Operator-Workflows.",
"buttonText": "Erfahren Sie mehr über Headless CMS"
},
"invitation": {

2
layouts/default.vue
View File

@ -165,7 +165,7 @@ main
&::before
content: ''
width: 12vw
height: 95%
height: 80%
min-height: 400px
max-height: 600px
background-color: rgba($primaryColor, .7)

3
nuxt.config.ts
View File

@ -24,10 +24,9 @@ export default defineNuxtConfig({
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
],
charset: 'utf-16',
viewport: 'width=device-width, initial-scale=1, maximum-scale=1',
viewport: 'width=device-width, initial-scale=1, maximum-scale=5',
}
},
viewport: 'width=device-width, initial-scale=1, maximum-scale=5',
compatibilityDate: '2024-11-01',
devtools: { enabled: true },
vite: {

265
pages/index.vue
View File

@ -3,7 +3,7 @@
<section class="heroBox" aria-labelledby="hero-heading">
<NuxtImg
provider="strapi"
src="/uploads/DML_Home_hero_f0916b5608.png"
src="/uploads/DML_Home_Hero_4f27bc7f8e.webp"
class="hero-bg"
format="webp"
sizes="100vw"
@ -26,27 +26,16 @@
</section>
<section aria-labelledby="solution-title">
<div class="container-10 webStrategy">
<NuxtImg
provider="strapi"
class="imgFloatLeft"
src="/uploads/web_wireframe_Strategie_0bae802a68.png"
alt="Wireframe Web Strategie"
width="300"
:modifiers="{ format: 'webp' }"
sizes="300px"
loading="lazy"
/>
<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>
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">
@ -71,94 +60,45 @@ class="pinkBtn" role="button"
<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">
<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 mb-5">
<div class="innerBox">
<div class="canDoItem">
<NuxtImg
provider="strapi"
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 class="col-md-6 mb-5">
<div class="innerBox">
<div class="canDoItem">
<NuxtImg
provider="strapi"
src="/uploads/Kundenbindung_45d45ef3fc.png"
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 class="col-xl-6">
<div class="row">
<div class="col-md-6 mb-5">
<div class="innerBox">
<div class="canDoItem" role="group" aria-labelledby="cando-title">
<NuxtImg
provider="strapi"
src="/uploads/Screen_Shot_Tool_20250228133408_beb2a11980.png"
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 class="col-md-6 mb-5">
<div class="innerBox">
<div class="canDoItem">
<NuxtImg
provider="strapi"
src="/uploads/Screen_Shot_Tool_20250228133812_0a20d4320e.png"
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>
<section class="canDo" aria-labelledby="canDo-section-title">
<div class="container">
<h2 id="canDo-section-title" class="text-center">
{{ $t('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"/>
@ -229,6 +169,32 @@ const logoItems = computed(() => {
}
}))
})
const canDoItems = [
{
img: '/uploads/website_Erfolg_Marketing_3c36a43ba5.png',
alt: 'Website Erfolg Marketing',
title: 'home.canDo.item1.title',
text: 'home.canDo.item1.text',
},
{
img: '/uploads/Kundenbindung_45d45ef3fc.png',
alt: 'Kundenbindung Strategie',
title: 'home.canDo.item2.title',
text: 'home.canDo.item2.text',
},
{
img: '/uploads/Screen_Shot_Tool_20250228133408_beb2a11980.png',
alt: 'Screen Tool Beispiel 1',
title: 'home.canDo.item3.title',
text: 'home.canDo.item3.text',
},
{
img: '/uploads/Screen_Shot_Tool_20250228133812_0a20d4320e.png',
alt: 'Screen Tool Beispiel 2',
title: 'home.canDo.item4.title',
text: 'home.canDo.item4.text',
},
];
</script>
@ -316,14 +282,33 @@ const logoItems = computed(() => {
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%
img
width: 80%
margin: 0 2rem 1rem 0
max-width: 300px
float: left
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
@ -363,50 +348,61 @@ const logoItems = computed(() => {
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)
.row
display: flex
flex-wrap: wrap
height: 100%
align-items: stretch
.innerBox
.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%
margin: 0 5%
display: flex
flex-direction: column
align-items: center
justify-content: flex-start
background-image: linear-gradient(to bottom right, transparent , white )
background-image: linear-gradient(to bottom right, transparent , white)
box-shadow: 3px 3px 8px 1px $lightgrey
border-bottom-right-radius: 1rem
padding: 0 5% 1rem 5%
padding: 2rem
border-right: 1px solid lighten($beige, 0%)
border-bottom: 1px solid lighten($beige, 0%)
height: 100%
.canDoItem
.imageBox
margin: 2rem auto
width: 100%
max-width: 280px
aspect-ratio: 5 / 4
object-fit: cover
border-radius: 1rem
display: block
.canDoItem
width: 100%
// Individuelle Formen für jedes Bild
&:nth-child(1)
border-radius: $loopShape1
&:nth-child(2)
border-radius: $loopShape2
&:nth-child(3)
border-radius: $loopShape3
&:nth-child(4)
border-radius: $loopShape4
.imageBox
margin: 2rem 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
@ -416,15 +412,10 @@ const logoItems = computed(() => {
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>