From af01505f86d944152f52b8abd2d31bcc885869f8 Mon Sep 17 00:00:00 2001
From: Sabrina Hennrich <sabrina@digimedialoop.de>
Date: Wed, 4 Jun 2025 14:36:46 +0200
Subject: [PATCH] school page

---
 components/HeroBox.vue             |  23 +++-
 components/template/PageHeader.vue |  17 ++-
 i18n/i18n-pages.ts                 |   8 ++
 i18n/locales/de.json               |  12 ++
 pages/sectors/schools/index.vue    | 208 +++++++++++++++++++++++++++++
 pages/services/seo/index.vue       |  18 ++-
 6 files changed, 274 insertions(+), 12 deletions(-)
 create mode 100644 pages/sectors/schools/index.vue

diff --git a/components/HeroBox.vue b/components/HeroBox.vue
index 844cf86..fd22621 100644
--- a/components/HeroBox.vue
+++ b/components/HeroBox.vue
@@ -1,6 +1,6 @@
 // components/HeroBox.vue
 <template>
-  <section ref="heroBoxRef" class="heroBox" :aria-label="ariaLabel">
+  <section ref="heroBoxRef" class="heroBox" :class="{ 'dark': darkBackground, 'light': !darkBackground }" :aria-label="ariaLabel">
     <NuxtImg
       provider="strapi"
       :src="image"
@@ -131,6 +131,8 @@ onUnmounted(() => {
     left: 0
     width: 100%
     height: 100%
+
+  &.dark::after
     background-image: linear-gradient(
       to bottom right,
       rgba(255,255,255,0.4) 0%,
@@ -140,6 +142,14 @@ onUnmounted(() => {
       transparent 100%
     )
 
+  &.light::after
+    background-image: linear-gradient(
+      to bottom right,
+      rgba(0, 0, 0, 0.1) 0%,
+      rgba(255, 255, 255, 0.8) 40%,
+      rgba(255, 255, 255, 1) 100%
+    )
+
   .hero-bg
     position: absolute
     inset: 0
@@ -164,18 +174,24 @@ onUnmounted(() => {
     z-index: 2
 
   h1, h2, h3
-    color: white
-    z-index: 3
     line-height: 1.5
     max-width: 70%
     @media (max-width: 768px)
       max-width: 100%
 
+  &.dark h1, &.dark h2, &.dark h3
+    color: white
+
+  &.light h1, &.light h2, &.light h3
+    color: black
+
   h1
     margin-top: 3rem
     font-size: clamp(2rem, 1.4rem + 3vw, 2.8rem)
+    line-height: 140%
     margin-bottom: 0
     font-family: 'Comfortaa'
+    hyphens: auto
 
   h2
     font-size: clamp(1.2rem, .7rem + 2vw, 2rem)
@@ -184,4 +200,5 @@ onUnmounted(() => {
 
   h3
     font-size: 1.2rem
+
 </style>
\ No newline at end of file
diff --git a/components/template/PageHeader.vue b/components/template/PageHeader.vue
index 61feaea..7cae56e 100644
--- a/components/template/PageHeader.vue
+++ b/components/template/PageHeader.vue
@@ -151,6 +151,13 @@ const navigationLinks = [
     { routeKey: 'services-ai', label: 'menuAi' },
     ] 
   },
+  { 
+    routeKey: '', 
+    label: 'sectors', 
+    subNav: [
+    { routeKey: 'sectors-schools', label: 'menuSchools' }
+    ] 
+  },
   { routeKey: 'references', label: 'references' }
 ]
 
@@ -324,9 +331,9 @@ header
             color: white
             text-align: left
             margin-bottom: .2rem
-            padding: 1rem 2.8rem .5rem
+            padding: 1rem 2.8rem .5rem 1.2rem
             position: relative
-            font-size: 1.4rem !important
+            font-size: 1.25rem !important
             width: auto
             max-width: 18rem
             text-transform: uppercase
@@ -340,7 +347,7 @@ header
               border-radius: $loopShape
               position: absolute
               top: 1.5rem
-              left: 1rem
+              left: -.5rem
               border-radius: 20px
             &:hover
               transform: scale(1.06)
@@ -350,14 +357,14 @@ header
 
         &.menu-active
           width: 100vw
-          height: 80vh
+          height: 98vh
           border-radius: 5px
           margin: 0
           background-color: rgba($darkgrey, .97)
           .closer
             &::before, &::after
               top: 2rem
-              right: 1rem
+              right: 2rem
             &::before    
               transform: rotate(45deg)
             &::after    
diff --git a/i18n/i18n-pages.ts b/i18n/i18n-pages.ts
index 9e19bbf..b0f9296 100644
--- a/i18n/i18n-pages.ts
+++ b/i18n/i18n-pages.ts
@@ -55,6 +55,14 @@ export const i18nPages = {
         es: '/servicios/sitios-compatibles-ai',
         tr: '/hizmetler/ai-uyumlu-websiteler'
       },   
+      'sectors-schools': {
+        de: '/branchen/schulhomepage',
+        en: '/sectors/schools',
+        fr: '/secteurs/ecoles',
+        it: '/settori/scuole',
+        es: '/sectores/escuelas',
+        tr: '/sektorler/okullar'
+      },   
     references: {
         de: '/referenzen',
         en: '/references',
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index 4d4c8bb..d96400c 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -4,6 +4,8 @@
     "upperBavaria": "Oberbayern",
     "webagency": "Webagentur",
     "services": "Leistungen",
+    "sectors": "Branchen",
+    "menuSchools": "Webseiten für Schulen",
     "menuAi": "KI-kompatible Webseiten",
     "menuCms": "Headless Content-Management-System (CMS)",
     "menuAccessibility": "Barrierefeies Webdesign",
@@ -238,6 +240,16 @@
                 }
             }
         },
+        "sectors": {
+            "schools": {
+              "hero": {
+                "ariaLabel": "Webseite für Schulen und Bildungseinrichtungen",
+                "headline1": "Webseiten für Schulen und Bildungseinrichtungen",
+                "headline2": "Moderne, barrierefreie und einfach zu bedienende Webseiten",
+                "headline3": "Für eine bessere Kommunikation mit Schülern, Eltern und Lehrkräften"
+              }
+            }
+        },
         "references": {
             "hero": {
               "h1": "Individuelle Webseiten, die überzeugen",
diff --git a/pages/sectors/schools/index.vue b/pages/sectors/schools/index.vue
new file mode 100644
index 0000000..5bb3825
--- /dev/null
+++ b/pages/sectors/schools/index.vue
@@ -0,0 +1,208 @@
+<template>
+    <div class="schoolPage">
+        <HeroBox
+            image="/uploads/watercolor_da8a37ce48.webp"
+            :aria-label="$t('pages.sectors.schools.hero.ariaLabel')"
+            :content="{
+                headline1: 'pages.sectors.schools.hero.headline1',
+                headline2: 'pages.sectors.schools.hero.headline2',
+                headline3: 'pages.sectors.schools.hero.headline3'
+            }"
+            overlay-image="/uploads/schul_Stifte_613bf7f7d0.webp"
+            overlay-alt-text="Schulmaterial"
+            :overlay-width="'32%'"
+            :overlay-position="{ top: '28%', right: '3vw' }"
+        /> 
+
+        <section class="weKnow"> 
+            <div class="container"> 
+                <NuxtImg
+                    src="/uploads/water_dot_c2b934736e.webp"
+                    provider="strapi"
+                />
+                <div class="textBox">
+                    <h2>Und jetzt auch noch die Schulhomepage?</h2> 
+                <h3>Als Schulleitung oder Lehrer stehen Sie schon jetzt unter enormem Druck?</h3>
+                <p> <u>Lehrermangel</u>, 
+                    steigende <u>bürokratische Aufgaben</u> und immer neue Herausforderungen rauben Zeit und Kraft. 
+                    Und dann soll auch noch die Schulhomepage gepflegt werden? Nun auch noch barrierefrei? Hilfe!</p> 
+                <h4>Wie wäre es, wenn Ihre Webseite so einfach zu bedienen wäre, dass Sie sich wirklich entlastet 
+                    und unterstützt fühlen? </h4>
+                    <p>Mit einer speziell für Schulen entwickelten, einfachen Benutzeroberfläche wird es zum Kinderspiel, 
+                        <b>Termine</b>, <b>Erlebnisberichte</b> oder <b>Neuigkeiten</b> selbst zu veröffentlichen. Und das ganz ohne technische Vorkenntnisse.</p>
+                    
+                    <p>Und falls die Zeit trotzdem knapp ist, übernehmen wir auch das gerne für Sie. 
+                    Wir pflegen Ihre Seite zuverlässig, stehen als Ansprechpartner bereit und arbeiten eng mit Ihnen 
+                    und Ihrem Team zusammen, eben ganz nach Ihren Vorgaben und Bedürfnissen.</p> 
+                </div>
+                
+            </div> 
+        </section>
+
+        <section class="accessibility">
+            <NuxtImg
+                provider="strapi"
+                src="/uploads/watercolor_da8a37ce48.webp"
+                alt=""
+                class="accessibility-bg"
+                sizes="100vw"
+                priority
+            />
+            <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="paper">
+                <h2>Barrierefreiheit ist Pflicht &mdash; doch zum Glück auch unsere Stärke!</h2>
+                <p>
+                Schulen in Deutschland sind gesetzlich verpflichtet, ihre digitalen Angebote barrierefrei zu gestalten, damit alle Menschen, unabhängig von Einschränkungen, gleichberechtigten Zugang zu Informationen erhalten.
+                </p>
+                <p>
+                Wir entwickeln Ihre Schulhomepage von Beginn an nach den geltenden Richtlinien und sorgen mit einem stabilen System dafür, dass Ihre Seite auch dann barrierefrei bleibt, wenn Inhalte später von Ihnen oder dem Kollegium selbst eingepflegt werden.
+                </p>
+                <p>
+                Dabei orientieren wir uns an:
+                </p>
+                <ul class="check">
+                <li><strong>EU-Richtlinie 2016/2102</strong> – für barrierefreie Websites öffentlicher Stellen</li>
+                <li><strong>Barrierefreie-Informationstechnik-Verordnung (BITV 2.0)</strong> – verbindlich für Schulen in Deutschland</li>
+                <li><strong>Web Content Accessibility Guidelines (WCAG) 2.1</strong> – internationaler Standard</li>
+                </ul>
+                <p>
+                Wir nehmen Barrierefreiheit nicht nur ernst, wir machen sie praktisch und umsetzbar.</p> 
+                <p> Für Sie bedeutet das konkret: 
+                    <ul class="check">
+                        <li><b>weniger Risiko</b></li>
+                        <li><b>mehr Inklusion</b></li>
+                        <li><b>bessere Kommunikation</b></li>
+                    </ul>
+                </p>
+                <p class="pt-2"><NuxtLinkLocale class="btn" to="services-accessibility">Erfahren Sie mehr zum Thema barrierefreies Webdesign</NuxtLinkLocale></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>
+
+
+
+        <section class="reference">
+            <div class="container-10">
+                <h2>Vertrauen, das uns ehrt: Die Stadt Konstanz setzt bereits auf unsere Expertise</h2>
+                <div class="reference-content">
+                    <div class="reference-image">
+                        <NuxtImg
+                        provider="strapi"
+                        src="/uploads/Image_Comp_BSK_After_b4358b0e19.png"
+                        alt="Berchenschule Konstanz Webseite"
+                        width="600"
+                        height="400"
+                        />
+                    </div>
+                    <div class="reference-text">
+                        <p>
+                        Die Berchenschule der Stadt Konstanz hat uns bereits 2024 mit der
+                        <a href="https://www.digimedialoop.de/projekt/neugestaltung-schulhomepage-und-corporate-design-berchenschule" target="_blank" rel="noopener noreferrer">
+                            Neugestaltung ihrer Schulhomepage
+                        </a>
+                        und des Corporate Designs beauftragt. Ein Projekt, bei dem wir passgenau auf die individuellen Bedürfnisse der Schule eingegangen sind.
+                        </p>
+                        <p>
+                        Das Ergebnis ist eine moderne, benutzerfreundliche Webseite, die sowohl Schüler, Eltern als auch Lehrkräften den Alltag erleichtert und dadurch die Kommunikation verbessert.
+                        </p>
+                        <h3>Dürfen wir auch Sie entlasten?</h3>
+                        <button
+                            class="my-4 pinkBtn"
+                            role="button"
+                            aria-label="Kontaktformular öffnen"
+                            @click.prevent="toggleContactBubble"
+                        >
+                           Kontaktieren Sie uns!
+                        </button>
+                    </div>
+                </div>                
+            </div>
+        </section>
+
+        <FAQArea
+          page-link="/branchen/schulhomepage"
+          headline="Fragen und Antworten zur Schulhomepage"
+        />
+
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="sass">
+.schoolPage
+    overflow-X: hidden
+    .weKnow
+        position: relative
+        img
+            position: absolute
+            top: -5%
+            left: -25%
+            width: 40%
+            margin: 1rem 0 2rem 2rem
+            z-index: 0
+        .textBox
+            z-index: 1
+            margin-left: 15%
+            
+        h4
+            font-family: 'Mainfont'
+            line-height: 140%
+            font-size: 1.3rem
+          
+    .accessibility
+        position: relative
+        padding: 5rem 0
+        overflow: hidden
+        
+        .accessibility-bg
+            position: absolute
+            top: 0
+            left: 0
+            width: 100%
+            height: 100%
+            object-fit: cover
+            object-position: center
+            opacity: 0.15        // sehr sanft, nicht störend
+            z-index: -1
+            pointer-events: none
+        
+        .paper
+            padding: 2rem 4rem
+            background-color: rgba(white, .8)
+            margin: 4rem 10%
+            transform: rotate(-1deg)
+            border: 1px solid $lightgrey
+            box-shadow: 2px 2px 10px 2px #EEE
+
+            
+    .reference
+        margin: 5rem 0
+        
+        .reference-content
+            display: grid
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))
+            gap: 2rem
+            align-items: center
+        
+            @media (min-width: 1200px)
+                grid-template-columns: 2fr 3fr
+        
+            .reference-image
+                img
+                    width: 100%
+                    height: auto
+        
+            .reference-text
+                h3
+                    margin-top: 1rem
+          
+        
+          
+</style>
\ No newline at end of file
diff --git a/pages/services/seo/index.vue b/pages/services/seo/index.vue
index fda199d..50e2aa8 100644
--- a/pages/services/seo/index.vue
+++ b/pages/services/seo/index.vue
@@ -62,9 +62,13 @@
             <h3><b>Sitemaps</b> &ndash; Der Wegweiser für Suchmaschinen</h3>
             <p>XML-Sitemaps helfen Suchmaschinen dabei, alle relevanten Seiten effizient zu erfassen. In unseren Projekten setzen wir auf automatisierte Generierung direkt aus dem Headless CMS – fehlerfrei, aktuell und ohne doppelten Pflegeaufwand.</p>
 
+            
             <h3><b>Core Web Vitals</b> &ndash; Nutzererfahrung messbar machen</h3>
             <p>Mit Nuxt3 als Frontend-Framework nutzen wir moderne Technologien wie Server-Side Rendering (SSR) und optimiertes Lazy Loading, um die <strong>Core Web Vitals</strong> gezielt zu verbessern. Das Ergebnis: Schnelle, stabile und reaktive Seiten – messbar bessere Rankings und Nutzererlebnisse.</p>
-
+            <NuxtImg 
+              src="/uploads/corewebvitals_893fcd3ff4.webp"
+              provider="strapi"
+            />
             <ul class="check">
               <li><strong>Ladezeit (Largest Contentful Paint)</strong><br>Schnelle Darstellung des Hauptinhalts für den Nutzer.</li>
               <li><strong>Interaktivität (First Input Delay)</strong><br>Direktes Ansprechverhalten bei Nutzeraktionen.</li>
@@ -163,7 +167,7 @@ definePageMeta({
         content: '"'
         position: absolute
         top: 1rem
-        left: 6%
+        left: 4%
         color: #9F4C75
         font-size: 10rem
         font-family: 'Comfortaa-Bold'
@@ -172,14 +176,14 @@ definePageMeta({
         content: '"'
         position: absolute
         bottom: -2rem
-        right: 15%
+        right: 12%
         color: #9F4C75
         font-size: 10rem
         font-family: 'Comfortaa-Bold'
         transform: rotate(20deg)
       @media(max-width: $breakPointMD)
         &::before
-          left: 0
+          left: -2%
   .twoAreas
     padding: 5rem 0
     background: linear-gradient(90deg, #442D36 0%, #9F4C75 100%)
@@ -208,6 +212,12 @@ definePageMeta({
     h3
       color: #442D36
       margin: 2rem auto .5rem
+    img
+      width: 40%
+      max-width: 300px
+      float: right
+      margin: 1rem 0 2rem 2rem
+      filter: grayscale(.5)
 
   .seoAi
     padding: 5rem 0