performance

composables/usePageMeta.ts

@@ -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()

i18n/locales/de.json

@@ -54,9 +54,9 @@
             "h3": "Höchste Performanz - schnell, effizient und zukunftssicher!"
         },
         "solution": {
-            "title": "Webseiten, die mehr können: Performance, Freiheit & KI-Power",
+            "title": "Performance, KI-Kompatibilität & Barrierefreiheit",
-            "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.",
+            "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, 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.",
+            "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": {

layouts/default.vue

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

nuxt.config.ts

@@ -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: {

pages/index.vue

@@ -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"
+              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>      
       </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"
+    <section class="canDo" aria-labelledby="canDo-section-title">
-                    />
+      <div class="container">
-                    <h3>{{ $t('home.canDo.item4.title') }}</h3>
+        <h2 id="canDo-section-title" class="text-center">
-                    <p>{{ $t('home.canDo.item4.text') }}</p>
+          {{ $t('home.canDo.title') }}
-                  </div>
+        </h2>
-                </div>
+
-              </div>
+        <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
+      margin-left: 30%
-      width: 80%
+    p
-      margin: 0 2rem 1rem 0   
+      margin-left: 30%
-      max-width: 300px
+    button
-      float: left  
+      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
+.canDoGrid
-    flex-wrap: wrap
+  display: grid
-    height: 100%
+  gap: 2rem
-    align-items: stretch
+  justify-content: center
-  .innerBox
+  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      
+  .canDoItem
-      .imageBox
+    width: 100%
-        margin: 2rem auto          
-        width: 100%
-        max-width: 280px
-        aspect-ratio: 5 / 4
-        object-fit: cover
-        border-radius: 1rem
-        display: block
     
-        // Individuelle Formen für jedes Bild
+    .imageBox
-        &:nth-child(1) 
+      margin: 2rem auto
-          border-radius: $loopShape1
+      width: 100%
-        &:nth-child(2) 
+      max-width: 180px
-          border-radius: $loopShape2
+      aspect-ratio: 5 / 4
-        &:nth-child(3) 
+      object-fit: cover
-          border-radius: $loopShape3
+      border-radius: 1rem
-        &:nth-child(4) 
+      display: block
-          border-radius: $loopShape4
+
+      &: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>