276 lines
10 KiB
Vue
276 lines
10 KiB
Vue
<template>
|
|
<div class="schoolPage">
|
|
<HeroBox
|
|
image="/uploads/watercolor_da8a37ce48.webp"
|
|
:aria-label="$t('pages.sectors.schools.hero.ariaLabel')"
|
|
overlay-image="/uploads/schul_Stifte_613bf7f7d0.webp"
|
|
overlay-alt-text="Schulmaterial"
|
|
:overlay-width="'32%'"
|
|
:overlay-position="{ top: '32%', right: '0' }"
|
|
>
|
|
<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 möchten sich eine neue Webseite für Ihre Schule oder Ihren Kindergarten erstellen lassen?</h2>
|
|
|
|
<p> Wir entwickeln moderne, barrierefreie Webseiten, die Eltern, Schüler und Mitarbeitende klar informieren und sich ganz einfach pflegen lassen. </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 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 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>
|
|
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.schoolPage
|
|
overflow-X: hidden
|
|
hyphens: auto
|
|
.weKnow
|
|
position: relative
|
|
img
|
|
position: absolute
|
|
top: -5%
|
|
left: -25%
|
|
width: 40%
|
|
margin: 1rem 0 2rem 2rem
|
|
z-index: 4
|
|
.textBox
|
|
z-index: 5
|
|
margin-left: 25%
|
|
max-width: 550px
|
|
width: 45%
|
|
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
|
|
|
|
.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 5%
|
|
background-color: rgba(white, .8)
|
|
margin: 4rem 10%
|
|
transform: rotate(-1deg)
|
|
border: 1px solid $lightgrey
|
|
box-shadow: 2px 2px 10px 2px #EEE
|
|
h2
|
|
font-size: 1.8rem
|
|
|
|
.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> |