330 lines
12 KiB
Vue
330 lines
12 KiB
Vue
<template>
|
||
<div class="schoolPage">
|
||
<HeroBox
|
||
image="/uploads/watercolor_da8a37ce48.webp"
|
||
:aria-label="$t('pages.sectors.schools.hero.ariaLabel')"
|
||
>
|
||
<h1>{{ $t('pages.sectors.schools.hero.headline1') }}</h1>
|
||
<h2>{{ $t('pages.sectors.schools.hero.headline2') }}</h2>
|
||
<h3>{{ $t('pages.sectors.schools.hero.headline3') }}</h3>
|
||
</HeroBox>
|
||
|
||
|
||
<section class="weKnow">
|
||
<div class="container-10">
|
||
<NuxtImg
|
||
src="/uploads/water_dot_c2b934736e.webp"
|
||
provider="strapi"
|
||
alt=""
|
||
/>
|
||
<div class="textBox">
|
||
<h2>Sie benötigen eine neue Webseite für Ihre Schule oder Ihren Kindergarten?</h2>
|
||
|
||
<p> <b>Dann sind Sie hier goldrichtig!</b> Denn wir erstellen moderne, barrierefreie Webseiten, die Eltern, Schüler und Mitarbeitende klar informieren und sich ganz einfach pflegen lassen. </p>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section class="forWhom">
|
||
<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="container-20">
|
||
<h2>Unsere Weblösungen richten sich unter anderem an folgende Bildungseinrichtungen:</h2>
|
||
<ul class="check">
|
||
<li>Grundschulen</li>
|
||
<li>weiterführende Schulen (z. B. Gymnasien, Realschulen, Mittelschulen, Gesamtschule)</li>
|
||
<li>Förderschulen</li>
|
||
<li>Berufsschulen und Berufsfachschulen</li>
|
||
<li>Kindergärten und Kitas</li>
|
||
<li>Horte und Ganztagseinrichtungen</li>
|
||
<li>Volkshochschulen</li>
|
||
<li>Musikschulen</li>
|
||
<li>Familienzentren</li>
|
||
<li>Bildungsträger und Akademien</li>
|
||
</ul>
|
||
</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="articleBox container-5">
|
||
<h3>Wissenswertes rund um die Webseite für Bildungseinrichtungen</h3>
|
||
<ArticleCarousel :articles="recommendedArticles" />
|
||
</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>Schon gewusst? - Barrierefreiheit ist für Bildungseinrichtungen in Deutschland Pflicht!</h2>
|
||
<p>
|
||
Wir erstellen Ihre Schulhomepage von Beginn an nach den <b>Anforderungen der Barrierefreiheit (BITV 2.0)</b> und sorgen dafür, dass Ihre Seite auch dann barrierefrei bleibt, wenn Inhalte später von Ihnen oder dem Kollegium selbst eingepflegt werden.
|
||
</p>
|
||
<p>
|
||
Wir nehmen Barrierefreiheit nicht nur ernst, wir machen sie praktisch und umsetzbar. 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="cmsAdmin">
|
||
<div class="container-10">
|
||
<NuxtImg
|
||
src="/uploads/schulverwaltung_4405a91768.png"
|
||
provider="strapi"
|
||
width="80%"
|
||
/>
|
||
<div class="textBox">
|
||
<h2>Inhalte pflegen ganz ohne Webdesign-Kenntnisse?</h2>
|
||
<p>
|
||
Na klar! Wir setzen auf eine <b>intuitive Verwaltungsoberfläche</b>, mit der Sie Inhalte ganz einfach selbst pflegen können:
|
||
</p>
|
||
<ul class="check">
|
||
<li>Termine eintragen</li>
|
||
<li>Artikel veröffentlichen</li>
|
||
<li>Formulare, Downloads und Infos bereitstellen</li>
|
||
<li>Speisepläne hochladen</li>
|
||
<li>Bilder austauschen</li>
|
||
</ul>
|
||
<p class="noArea">
|
||
Kein WordPress! — Keine ständigen Updates! — Keine Plugins! — Kein Design-Chaos!
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<section class="reference">
|
||
<NuxtImg
|
||
provider="strapi"
|
||
src="/uploads/watercolor_da8a37ce48.webp"
|
||
alt=""
|
||
class="reference-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="container-10">
|
||
|
||
<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">
|
||
<h2>Die Stadt Konstanz setzt bereits auf unsere Expertise</h2>
|
||
<p>
|
||
Die Berchenschule in Konstanz hat uns 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>
|
||
beauftragt.</p>
|
||
<p>
|
||
<b>Das Ergebnis:</b> Eine moderne, barrierefreie und benutzerfreundliche Webseite. Sie erleichtert die Kommunikation, spart Zeit und funktioniert!
|
||
</p>
|
||
<h3>Dürfen wir auch Sie unterstützen?</h3>
|
||
<button
|
||
class="my-4 btn pinkBtn"
|
||
role="button"
|
||
aria-label="Kontaktformular öffnen"
|
||
@click.prevent="toggleContactBubble"
|
||
>
|
||
Kontaktieren Sie uns!
|
||
</button>
|
||
</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>
|
||
|
||
<FAQArea
|
||
page-link="/branchen/schulhomepage"
|
||
headline="Fragen und Antworten zur Schulhomepage"
|
||
/>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { useMainStore } from '@/stores/main'
|
||
import { storeToRefs } from 'pinia'
|
||
const mainStore = useMainStore()
|
||
const { getArticlesByCategoryIds } = storeToRefs(mainStore)
|
||
|
||
const recommendedArticles = computed(() => {
|
||
return getArticlesByCategoryIds.value([5])
|
||
})
|
||
</script>
|
||
|
||
<style lang="sass">
|
||
.schoolPage
|
||
overflow-X: hidden
|
||
hyphens: auto
|
||
.weKnow
|
||
position: relative
|
||
padding-top: 2rem
|
||
padding-bottom: 2rem
|
||
img
|
||
position: absolute
|
||
top: -5%
|
||
left: -25%
|
||
width: 40%
|
||
margin: 1rem 0 2rem 2rem
|
||
z-index: 4
|
||
.textBox
|
||
z-index: 5
|
||
margin-left: 20%
|
||
max-width: 700px
|
||
width: 55%
|
||
h2
|
||
font-size: 1.8rem
|
||
p
|
||
font-size: 1.2rem
|
||
@media(max-width: $breakPointMD)
|
||
width: 80%
|
||
|
||
h4
|
||
font-family: 'Mainfont'
|
||
line-height: 140%
|
||
font-size: 1.3rem
|
||
|
||
.forWhom
|
||
margin: 3rem auto
|
||
padding-top: 4rem
|
||
padding-bottom: 4rem
|
||
|
||
.articleBox
|
||
margin-top: 5rem
|
||
margin-bottom: 6rem
|
||
h3
|
||
text-align: center
|
||
|
||
|
||
.accessibility
|
||
position: relative
|
||
padding: 4rem 0
|
||
overflow: hidden
|
||
|
||
.paper
|
||
padding: 1rem 5%
|
||
background-color: rgba(white, .8)
|
||
margin: 1rem 10%
|
||
transform: rotate(-1deg)
|
||
border: 1px solid $lightgrey
|
||
box-shadow: 2px 2px 10px 2px #EEE
|
||
h2
|
||
font-size: 1.8rem
|
||
.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
|
||
.cmsAdmin
|
||
text-align: center
|
||
.textBox
|
||
margin: 2rem auto
|
||
max-width: 800px
|
||
h2
|
||
margin: 1rem auto 1rem auto
|
||
ul
|
||
display: inline-block
|
||
text-align: left
|
||
padding: 0
|
||
margin: 1rem auto
|
||
li
|
||
|
||
.noArea
|
||
font-style: italic
|
||
background-image: radial-gradient(ellipse at center, $lightgrey 0%, rgba($lightgrey, 0.8) 30%, rgba($lightgrey, 0.3) 60%, transparent 100%)
|
||
padding: 1rem 1rem
|
||
font-size: 1rem
|
||
border-radius: .5rem
|
||
text-align: center
|
||
|
||
.reference
|
||
margin: 5rem 0
|
||
position: relative
|
||
padding: 5rem 0
|
||
overflow: hidden
|
||
|
||
.reference-bg
|
||
position: absolute
|
||
top: 0
|
||
left: 0
|
||
width: 100%
|
||
height: 100%
|
||
object-fit: cover
|
||
object-position: center
|
||
opacity: 0.15
|
||
z-index: -1
|
||
pointer-events: none
|
||
|
||
.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
|
||
max-width: 500px
|
||
margin: 2rem 15%
|
||
@media(max-width: $breakPointMD)
|
||
margin: 2rem 0
|
||
|
||
|
||
|
||
</style> |