392 lines
15 KiB
Vue
392 lines
15 KiB
Vue
<template>
|
||
<div class="cmsPage">
|
||
<HeroBox
|
||
image="/uploads/DML_Service_Header_CMS_a438599970.webp"
|
||
:aria-label="$t('pages.services.cms.hero.ariaLabel')"
|
||
: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
|
||
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({
|
||
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> |