newPages

assets/styles/main.sass

@@ -95,6 +95,24 @@ $innerShadow: inset 0 0 15px rgba(255, 255, 255, 0.5)
       transform: scale(1)
       opacity: 1
 
+@keyframes float
+  0%, 100%
+    transform: scale(1) translate(0, 0)
+    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 5px #f9f9f9
+
+  25%
+    transform: scale(1.025) translate(1px, -3px)
+    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6), 0 0 0 5px #f9f9f9
+
+  50%
+    transform: scale(1.035) translate(3px, -1px)
+    box-shadow: 4px 4px 9px rgba(0, 0, 0, 0.7), 0 0 0 5px #f9f9f9
+
+  75%
+    transform: scale(1.025) translate(1px, 1px)
+    box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.6), 0 0 0 5px #f9f9f9
+
+
 
 body
   overflow-x: hidden  

components/HeroBox.vue

@@ -156,6 +156,7 @@ onUnmounted(() => {
     z-index: 1
     height: auto
     max-height: 100%
+    max-width: 350px
     object-fit: contain
 
   .content, h1, h2, h3

components/template/PageHeader.vue

@@ -145,7 +145,7 @@ const navigationLinks = [
     label: 'services', 
     subNav: [
     { routeKey: 'services-cms', label: 'menuCms' },
-    { routeKey: 'services-seo', label: 'menuSEO' },
+    /* { routeKey: 'services-seo', label: 'menuSEO' }, */
     { routeKey: 'services-accessibility', label: 'menuAccessibility' },
     { routeKey: 'services-ai', label: 'menuAi' },
     ] 
@@ -433,7 +433,7 @@ header
             top: 3rem
             right: 5%
             background-color: rgba(white, .95)
-            padding: 2rem
+            padding: 2rem 2rem 1rem 2rem
             text-align: left
             cursor: pointer
             border-bottom-left-radius: 1rem
@@ -486,6 +486,13 @@ header
             font-size: 1rem
             font-weight: bold
             margin: 0 .8rem
+        &.desk
+          .sub-nav
+            top: 1.5rem
+            right: 2%
+            background-color: transparent
+            background-image: linear-gradient(to bottom, transparent 0%, white 15%)
+            
       .logoBox
         align-items: left
         svg

pages/index.vue

@@ -33,7 +33,7 @@
           <li>{{ $t('pages.services.explain.bullet4') }}</li>
           <li>{{ $t('pages.services.explain.bullet5') }}</li>
         </ul>
-        <button @click="navigateTo(localePath('accessibility'))">Informationen zu barrierefreien Webseiten</button>
+        <NuxtLinkLocale class="btn" to="services-cms">Erfahren Sie mehr zu Headless CMS</NuxtLinkLocale>
       </div>
       
     </section>  

pages/services/accessibility/index.vue

@@ -8,10 +8,6 @@
                 headline2: 'pages.services.accessibility.hero.headline2',
                 headline3: 'pages.services.accessibility.hero.headline3'
             }"
-            overlay-image="/uploads/DML_Access_Key_3ccf07fbb4.webp"
-            overlay-alt-text="barrierefreiheit symbol"
-            :overlay-width="'30%'"
-            :overlay-position="{ bottom: '5%', right: '1vw' }"
             :dark-background="true"
         /> 
         <section class="targetGroup">
@@ -115,10 +111,10 @@ const toggleContactBubble = () => mainStore.toggleContactBubble();
         margin: 8vh 0
     .targetGroup
         img
-            float: left
+            float: right
             width: 30%
-            max-width: 400px
-            margin: 1rem 2rem 2rem 0
+            max-width: 350px
+            margin: 1rem 0 2rem 2rem
     .implementation
         margin: 8vh 0
         padding: 1vh 0 3vh 0

pages/services/ai/index.vue

@@ -145,6 +145,7 @@ definePageMeta({
     color: white
     padding: 12vh 0
     margin: 8vh 0
+    
   .whyAI
     padding: 3% 0
     img
@@ -170,4 +171,9 @@ definePageMeta({
       width: 60%
       transform: translateX(10%)
       overflow: hidden
+      margin-top: 1rem
+    @media (max-width: $breakPointSM)
+      .text
+        p
+          width: 80vw
 </style>

pages/services/cms/index.vue

@@ -10,23 +10,383 @@
             }"
             :dark-background="true"
         /> 
+        <section class="whatIs">
+          <div class="container-10">
+            <NuxtImg
+              src="/uploads/Headless_CMS_c1370c8823.webp"
+              provider="strapi"
+              alt="Traditional vs. Headless CMS"
+            />          
+            <h2>Was ist ein Headless Content-Management-System (CMS)?</h2>
+            <p>Ein Headless CMS ist ein modernes Content-Management-System, das Inhalte unabhängig vom Design verwaltet. Im Gegensatz zu klassischen Systemen wie WordPress oder Joomla ist es nicht an ein festes Frontend gebunden. Inhalte werden über eine API bereitgestellt – und können so überall ausgespielt werden: auf Webseiten, Apps, Smart TVs oder sogar Sprachassistenten.</p>
+            <!-- <h3>Vorteile eines Headless CMS gegenüber herkömmlichen, monolithischen Systemen wie WordPress & Co</h3>
+            <ul class="check">
+              <li><b>Maximale Flexibilität</b> Inhalte können frei gestaltet und an jede Plattform angepasst werden – ohne Design- oder Technologiebeschränkungen.</li>
+              <li><b>Höchste Performance</b> Schnelle Ladezeiten dank moderner Front-End-Technologien wie Nuxt3 und einer sauberen Trennung von Backend und Darstellung.</li>
+              <li><b>Multi-Channel-Fähigkeit</b> Veröffentliche Inhalte gleichzeitig auf Website, App oder anderen digitalen Kanälen – zentral verwaltet, überall verfügbar.</li>
+              <li><b>Mehr Sicherheit</b> Da das CMS keine direkte Verbindung zur öffentlichen Website hat, sinkt die Angriffsfläche deutlich.</li>
+              <li><b>Einfache Skalierbarkeit</b> Egal ob Start-up oder Konzern – Headless CMS wachsen problemlos mit deinen Anforderungen mit.</li>
+              <li><b>API-first Architektur</b> Inhalte werden per Schnittstelle ausgeliefert – das ermöglicht eine schnelle, strukturierte Integration in jede Umgebung.</li>
+              <li><b>Bessere SEO-Möglichkeiten</b> Durch sauberen Code, optimierte Meta-Tags und strukturierte Daten rankt deine Website besser bei Google & Co.</li>
+            </ul> -->
+          </div>
+          
+        </section>
+        
+        <section class="compare">
+          <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">
+            <h2>Wie unterscheiden sich traditionelle von headless Content-Management-Systemen?</h2>
+            
+          </div>
+          <div class="compare-table">
+              <div class="compare-row header">
+                <div>Kriterium</div>
+                <div>Traditionelles CMS</div>
+                <div>Headless CMS</div>
+              </div>
+              <div
+                class="compare-row"
+                v-for="row in rows"
+                :key="row[0]"
+              >
+                <div>{{ row[0] }}</div>
+                <div>{{ row[1] }}</div>
+                <div>{{ row[2] }}</div>
+              </div>
+            </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>
+
+        <section class="evolution">
+          <div class="container-10">
+            <h2>Die Evolution der Webentwicklung und deren Content-Management-Systeme</h2>
+            <div class="timeline">
+              <div class="timeline-item" v-for="item in timeline" :key="item.period">
+                <div class="circle">
+                  <div class="label">
+                    <span class="period">{{ item.period }}</span>                    
+                  </div>
+                </div>
+                <div class="content-box">
+                  <h3>{{ item.era }}</h3>
+                  <p>{{ item.description }}</p>
+                  <h4>Technologien</h4>
+                  <div class="logos">
+                    <NuxtImg v-for="logo in item.logos" :key="logo" :src="logo" alt="logo" provider="strapi"/>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        <section class="howWeDo">
+          <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">
+            <h2>Unsere Lösung für Ihre digitale Zukunft</h2>
+            <p>
+              Für unsere Headless-Projekte setzen wir konsequent auf moderne Technologien: <strong>Nuxt 3</strong> im Frontend und <strong>Strapi</strong> als leistungsfähiges Headless CMS im Backend.
+            </p>
+            <p>
+              Diese Kombination vereint maximale Flexibilität, schnelle Ladezeiten und eine zukunftssichere Architektur.
+            </p> 
+            <p>Inhalte werden einmalig in Strapi gepflegt und lassen sich über eine API auf beliebige Kanäle ausspielen. Ganz egal ob Website, App oder Social Media.
+            </p>
+            <ul class="check">
+              <li><strong>Performance</strong> <br>Nuxt 3 liefert ultraschnelle Seiten mit Server-Rendering oder statischem Output.</li>
+              <li><strong>Freiheit im Design</strong> <br>Keine starren Templates. Das Frontend wird passgenau auf Marken und Nutzerführung abgestimmt.</li>
+              <li><strong>Zentrale Inhaltspflege</strong> <br>Inhalte werden medienneutral in Strapi gepflegt und über Schnittstellen überall verfügbar gemacht.</li>
+              <li><strong>Skalierbarkeit</strong> <br>Die Architektur ist modular erweiterbar, ideal für wachsende Projekte.</li>
+              <li><strong>Modern & wartungsarm</strong> <br>Keine veralteten Plugins oder Sicherheitslücken, sondern moderne APIs, klarer Code und automatisierte Updates.</li>
+            </ul>
+            <p>
+              So entsteht ein digitales Fundament, das nicht nur heute überzeugt, sondern auch morgen noch tragfähig ist.
+            </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="Bereit für eine digitale Transformation?"
+          text="Wir bringen Ihre Webseite auf das nächste Level!"
+          button-text="Sprechen Sie mit uns!"
+        />
+
+        <MarqueeBanner 
+            :items="projectItems" 
+            :logo-height="200" 
+            title="Aus der Praxis: Unsere Projekte mit Headless Architektur" 
+            link="projekt" 
+            aria-label="Headless CMS Projekte"
+            speed="15"
+          />
+
+        <FAQArea
+          page-link="/leistungen/headless-cms"
+          headline="Fragen und Antworten zu Content-Management-Systemen"
+        />
+
     </div>
 </template>
 
 <script setup>
 definePageMeta({
-  alias: [
-    '/leistungen/headless-cms',                   // Deutsch
-    '/services/headless-cms',                     // Englisch
-    '/services/headless-cms',                     // Französisch
-    '/servizi/headless-cms',                      // Italienisch
-    '/servicios/headless-cms',                    // Spanisch
-    '/hizmetler/headless-cms'                     // Türkisch
-  ],
   name: 'services-cms'
 })
+
+import { useMainStore } from '@/stores/main';
+const mainStore = useMainStore();
+const { projects } = storeToRefs(mainStore)
+console.log(projects.value[2])
+const projectItems = computed(() => {
+  return projects.value
+    .filter(project =>
+      project.customer &&
+      project.projectImages.length > 0 &&
+      Array.isArray(project.technologies) &&
+      project.technologies.some(tech => tech.titel === 'Strapi')
+    )
+    .map(project => ({
+      text: project.customer?.company || '',
+      image: {
+        url: project.projectImages[0]?.url || '',
+        alternativeText: project.projectImages[0]?.alternativeText || project.customer?.company || ''
+      },
+      link: '/projekt/' + (project.link || '')
+    }))
+})
+
+
+
+
+const rows = [
+  ['Struktur', 'Frontend & Backend untrennbar gekoppelt', 'Frontend und Backend sind strikt getrennt'],
+  ['Flexibilität im Design', 'Stark vom CMS-Theme und Plugins abhängig', 'Vollständig frei – jedes Frontend möglich'],
+  ['Performance', 'Oft langsam durch Plugins und Overhead', 'Höchste Geschwindigkeit dank API und modernem Frontend'],
+  ['Sicherheit', 'Große Angriffsfläche durch Plugin-Ökosystem', 'Weniger Risiko durch entkoppeltes Backend'],
+  ['Skalierbarkeit', 'Begrenzt durch Systemarchitektur', 'Hervorragend – wächst mit den Anforderungen'],
+  ['Multi-Channel-Fähigkeit', 'Nur eine Website im Fokus', 'Website, App, Voice u. v. m. gleichzeitig bespielbar'],
+  ['Content-Wartung', 'Im Kontext des Layouts', 'Zentral und unabhängig vom Design'],
+  ['SEO-Optimierung', 'Teilweise limitiert durch Themes', 'Technisch ideal umsetzbar mit strukturierten Daten'],
+  ['Entwicklungsfreiheit', 'CMS-zentriert, wenig flexibel', 'Freie Wahl moderner Frameworks wie Nuxt3'],
+  ['Updates & Wartung', 'Viele Plugins & Themes einzeln pflegen', 'Zentrale Pflege des CMS – unabhängig vom Frontend']
+]
+
+const timeline = [
+  {
+    period: '1990 – 2000',
+    era: 'Statische Ära',
+    description: 'Webseiten wurden manuell in HTML geschrieben und per FTP auf Server geladen – ohne CMS, ohne Dynamik.',
+    logos: ['/uploads/Logo_HTML_d35e99cee0.webp']
+  },
+  {
+    period: '2000 – 2010',
+    era: 'Dynamische Ära',
+    description: 'Klassische CMS wie WordPress, TYPO3 oder Joomla dominierten. PHP und MySQL bildeten das Fundament.',
+    logos: [
+      '/uploads/php_1_logo_png_transparent_89dd277d4b.webp',
+      '/uploads/mysql_PNG_3_8ffbd31d8f.webp',
+      '/uploads/Logo_Wordpress_91e875f393.webp',
+      '/uploads/Que_es_Typo3_36452b50a7.webp',
+      '/uploads/Joomla_Logo_wine_b02534a76a.webp',
+      '/uploads/contao_logo_orange_768ca4a997.webp'
+    ]
+  },
+  {
+    period: '2010 – 2016',
+    era: 'API-fähige / Hybrid-CMS-Ära',
+    description: 'Erste Headless-Ansätze mit API-zentrierten Systemen wie Drupal. Parallel gewannen Frontend-Frameworks wie React, AngularJS und VueJS an Bedeutung.',
+    logos: [
+      '/uploads/Drupal_logo_b3af071c6b.webp',
+      '/uploads/react_Logo_b22d0ba7b6.webp',
+      '/uploads/angular_js_logo_png_seeklogo_299138_a34cf0a3a6.webp',
+      '/uploads/vue_Logo_b6d76ec351.webp'
+      
+    ]
+  },
+  {
+    period: '2016 – 2022',
+    era: 'JAMstack / Headless-Ära',
+    description: 'Trennung von Content & Präsentation. Git, Markdown & APIs. Headless CMS + moderne Frontends wie Nuxt & Gatsby setzen sich durch.',
+    logos: [      
+      '/uploads/nuxtjs_80e2fe3ec4.webp',
+      '/uploads/netlify_1e40347dd9.webp',
+      '/uploads/Strapi_vertical_logo_dark_6e414dd744.webp'
+    ]
+  },
+  {
+    period: '2022 – heute',
+    era: 'Edge & AI Ära',
+    description: 'Serverless, AI, globale Edge-Funktionen. Systeme werden intelligenter, performanter – und extrem nutzerzentriert.',
+    logos: [
+    '/uploads/vercel_Logo_601fec4c71.webp' ,
+      '/uploads/chat_GPT_0a7e882c07.webp',
+      '/uploads/Cloudflare_logo_ee9df880dd.webp',
+      '/uploads/nuxt3_logo_1ea432e01c.webp'
+      
+    ]
+  }
+]
+
+
+
 </script>
 
 <style lang="sass">
+.cmsPage
+  .whatIs
+    margin: 4rem 0    
+    img
+      float: right
+      width: 100%
+      max-width: 300px
+      margin: 1rem 0 2rem 2rem
+  .evolution
+    
+    padding: 2rem 0
+  
+    h2
+      margin-bottom: 3rem
+      text-align: center
+  
+    .timeline
+      position: relative
+      margin-left: 2rem
+      padding-left: 0
+      border-left: 10px solid $lightgrey      
+  
+      .timeline-item
+        display: flex
+        align-items: flex-start
+        margin-bottom: 4rem
+        position: relative
+  
+        &:last-child
+          margin-bottom: 0
+  
+        .circle
+          position: absolute
+          left: -5.2rem
+          top: 0
+          width: 10rem
+          height: 7rem
+          background: #37857C
+          border-radius: $loopShape
+          border: 2px solid white
+          display: flex
+          align-items: center
+          justify-content: center
+          color: white
+          text-align: center
+          font-size: 0.8rem
+          font-family: 'Mainfont-Bold'
+          box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)
+  
+          .label
+            display: flex
+            flex-direction: column
+  
+            .period
+              font-weight: bold
+              font-size: 1rem
+              font-family: monospace             
+  
+        .content-box
+          background: white
+          border-radius: 1rem
+          padding: 1.5rem 3rem 2rem 4rem
+          margin-left: 3rem
+          margin-top: 2rem
+          box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2)
+          flex: 1
+  
+          h3
+            text-transform: uppercase
+            color: #2B3E3F
+            font-family: 'Mainfont-Bold'
+            margin: 1rem 0
+          h4
+            color: #37857C
+            font-family: 'Mainfont-Bold'
+            text-transform: uppercase
+            font-size: 1rem
+          p
+            margin: 0 0 1rem 0
+            font-size: 1rem
+  
+          .logos
+            display: flex
+            flex-wrap: wrap
+            gap: 1rem
+  
+            img
+              height: 2rem
+              width: auto
+              filter: grayscale(1)
+              
+    
+  .compare
+    background-image: linear-gradient(to bottom right, #37857C, #2B3E3F)
+    padding: 8% 0
+    color: white
 
+    .compare-table
+      display: flex
+      flex-direction: column
+      width: 100%
+      border-collapse: collapse
+      padding: 0 5vw
+
+    .compare-row
+      display: grid
+      grid-template-columns: 1fr 1fr 1fr
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1)
+
+      div
+        padding: 1rem
+        border-right: 1px solid rgba(255, 255, 255, 0.1)
+        @media(max-width: $breakPointSM)
+          font-size: .8rem
+          hyphens: auto
+
+      div:last-child
+        border-right: none
+
+      div:nth-child(1)
+        background-image: linear-gradient(to right, #2B3E3F, #326863)
+        color: white
+        font-weight: 600
+        font-family: 'Mainfont-Bold'
+        
+
+    .compare-row.header
+      background: rgba(255, 255, 255, 0.1)
+
+      div
+        font-weight: 700
+        font-family: 'Mainfont-Bold'
+  
+  .howWeDo
+    background-image: linear-gradient(to bottom right, #37857C, #2B3E3F)
+    padding: 8% 0
+    color: white
+
+@for $i from 1 through 10
+  $duration: 5s + ($i * 0.2s) // deutlich langsamer
+  $delay: random(800) + ms
+
+  .cmsPage .evolution .timeline .timeline-item:nth-child(#{$i}) .circle
+    background: darken(#37857C, ($i - 1) * 4%)
+    //animation: float #{$duration} ease-in-out infinite
+    //animation-delay: #{$delay}
+      
 </style>