serviceBox home change

components/CallToActionBox.vue

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

components/MarqueeBanner.vue

@@ -16,7 +16,7 @@
       </g>
     </svg>
 
-    <div class="box pb-5">
+    <div class="box">
       <div class="container">
         <h2 class="pt-4 pb-3">{{ title }}</h2>
 
@@ -123,26 +123,30 @@ const props = defineProps({
 <style lang="sass" scoped>
 .banner-wrapper
   position: relative
+  margin: 3rem auto 6rem auto
   svg
-    margin: 0 0 -3px 0
+    margin: 0
-  @media(max-width: $breakPointSM)
+
-    svg
-      margin: 0
 
 .box
   background-color: $beige
   width: 100%
   min-height: 50px
-  margin-top: -20px
+  margin: -20px auto 0 auto
+  padding: 3rem 0
+  display: block
+  position: relative
 
   h2
     color: #333
     font-size: 1.2rem
     font-family: 'Mainfont-Bold'
+    padding-top: 0rem
 
 .marquee
   overflow: hidden
   width: 100%
+  padding: 3rem auto
 
 .marquee-track
   display: flex

components/ServicesTeaser.vue

@@ -7,25 +7,29 @@
       </div>
       
       <div class="serviceBoxes">
-            <div
+        <NuxtLinkLocale
-              v-for="(service, index) in services"
+          v-for="(service, index) in services"
-              :key="index"
+          :key="index"
-              class="service"
+          :to="service.link"
-            >
+          class="service"
-              <NuxtImg
+        >
-                provider="strapi"
+          <NuxtImg
-                :src="service.backgroundImage"
+            provider="strapi"
-                alt=""
+            :src="service.backgroundImage"
-                class="service-bg"
+            alt=""
-                aria-hidden="true"
+            class="service-bg"
-              />
+            aria-hidden="true"
-              <div class="overlay"></div>
+          />
-              <div class="serviceContent">
+          <div class="overlay"></div>
-                <h3>{{ service.title }}</h3>
+          <div class="serviceContent">
-                <p>{{ service.description }}</p>
+            <svg>
-                <NuxtLinkLocale :to="service.link" class="link">{{ service.linktext }}</NuxtLinkLocale>
+              <use :xlink:href="`/assets/icons/collection.svg#${service.icon}`" />
-              </div>
+            </svg>
-            </div>
+            <h3>{{ service.title }}</h3>
+            <p>{{ service.description }}</p>
+            <span class="link">{{ service.linktext }}</span>
+          </div>
+        </NuxtLinkLocale>
           </div>
     </section>
 </template>
@@ -37,28 +41,32 @@ const services = [
     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'
+    backgroundImage: '/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp',
+    icon: 'accessibility'
   },
   {
     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'
+    backgroundImage: '/uploads/DML_Service_Header_SEO_b11ae8940a.webp',
+    icon: 'search'
   },
   {
     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'
+    backgroundImage: '/uploads/DML_Service_Header_CMS_a438599970.webp',
+    icon: 'database'
   },
   {
-    title: 'KI-Kompatibilität',
+    title: 'KI-Kompatibilität im Web',
     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'
+    backgroundImage: '/uploads/DML_Service_Header_AI_639dd0d7b1.webp',
+    icon: 'ai'
   },
 ]
 </script>
@@ -94,6 +102,7 @@ const services = [
         border-radius: 8px
         cursor: pointer
         transition: transform 0.3s ease
+        text-decoration: none
   
         &:hover
           transform: translateY(-5px)
@@ -119,10 +128,18 @@ const services = [
         padding: 1.5rem
         z-index: 2
 
+        svg
+          width: 2.5rem
+          height: 2.5rem
+          float: left
+          margin: 0 1.3rem 1rem 0
+          fill: white
+    
         h3
           margin: 0 0 0.5rem 0
           font-size: 1.25rem
           font-weight: 700
+          min-height: 3.5rem      
     
         p
           margin: 0 0 1rem 0

pages/index.vue

@@ -40,7 +40,7 @@
     
     <ServicesTeaser />
     
-    <section class="sectionSolutions">
+    <!-- <section class="sectionSolutions">
       <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> 
@@ -89,7 +89,7 @@
       <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>
+    </section> -->
 
     
 

public/assets/icons/collection.svg

@@ -38,8 +38,16 @@
     <symbol id="accessibility" viewBox="0 0 512 512">
         <path d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm161.5-86.1c-12.2-5.2-26.3 .4-31.5 12.6s.4 26.3 12.6 31.5l11.9 5.1c17.3 7.4 35.2 12.9 53.6 16.3l0 50.1c0 4.3-.7 8.6-2.1 12.6l-28.7 86.1c-4.2 12.6 2.6 26.2 15.2 30.4s26.2-2.6 30.4-15.2l24.4-73.2c1.3-3.8 4.8-6.4 8.8-6.4s7.6 2.6 8.8 6.4l24.4 73.2c4.2 12.6 17.8 19.4 30.4 15.2s19.4-17.8 15.2-30.4l-28.7-86.1c-1.4-4.1-2.1-8.3-2.1-12.6l0-50.1c18.4-3.5 36.3-8.9 53.6-16.3l11.9-5.1c12.2-5.2 17.8-19.3 12.6-31.5s-19.3-17.8-31.5-12.6L338.7 175c-26.1 11.2-54.2 17-82.7 17s-56.5-5.8-82.7-17l-11.9-5.1zM256 160a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/>
      </symbol>
-    <symbol viewBox="0 0 15 15" id="radix-icons-accessibility">
+     <symbol id="search" viewBox="0 0 512 512">
+        <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
+    </symbol>
+    <symbol id="database" viewBox="0 0 448 512">
+        <path d="M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z"/>
+    </symbol>
+    <symbol id="ai" viewBox="0 0 640 512">
+        <path d="M320 0c17.7 0 32 14.3 32 32l0 64 120 0c39.8 0 72 32.2 72 72l0 272c0 39.8-32.2 72-72 72l-304 0c-39.8 0-72-32.2-72-72l0-272c0-39.8 32.2-72 72-72l120 0 0-64c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224l16 0 0 192-16 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-16 0 0-192 16 0z"/>
+    </symbol>
+    <symbol id="radix-icons-accessibility" viewBox="0 0 15 15" >
         <path fill="currentColor" fill-rule="evenodd" d="M.877 7.5a6.623 6.623 0 1 1 13.246 0a6.623 6.623 0 0 1-13.246 0M7.5 1.827a5.673 5.673 0 1 0 0 11.346a5.673 5.673 0 0 0 0-11.346M7.125 9c-.055.127-.793 2.96-.793 2.96a.5.5 0 1 1-.966-.26s.88-2.827.88-3.43V6.801l-1.958-.525a.5.5 0 1 1 .258-.966s1.654.563 2.3.563h1.309c.645 0 2.298-.563 2.298-.563a.5.5 0 1 1 .26.966l-1.966.527V8.27c0 .603.88 3.427.88 3.427a.5.5 0 0 1-.966.259S7.92 9.127 7.869 9c-.05-.127-.219-.127-.219-.127h-.307s-.173 0-.218.127M7.5 5.12a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25" clip-rule="evenodd"></path>
     </symbol>        
-
 </svg>