254 lines
7.4 KiB
Vue
254 lines
7.4 KiB
Vue
<template>
|
||
<div class="homePage">
|
||
<HeroBox
|
||
image="/uploads/bg_technologie_d24f950ccf.webp"
|
||
:aria-label="$t('pages.services.hero.ariaLabel')"
|
||
:dark-background="true"
|
||
>
|
||
<h1>High-Performance-Webseiten</h1>
|
||
<h2>die Ihre Zielgruppe begeistern</h2>
|
||
<h3>Schnell, effizient und leistungsstark</h3>
|
||
<p>Wir nutzen modernste Technologien wie Nuxt 3 + Strapi in Headless-Architektur, um Webseiten zu entwickeln, die zukunftssicher, schnell und flexibel sind.</p>
|
||
<NuxtLinkLocale to="references" class="btn whiteBtn">Unsere Referenzen</NuxtLinkLocale>
|
||
</HeroBox>
|
||
|
||
<section class="whatWeDo">
|
||
|
||
<NuxtImg
|
||
src="/uploads/laechelnde_Dame_a393baf878.webp"
|
||
provider="strapi"
|
||
class="rightImg"
|
||
/>
|
||
<div class="content">
|
||
<h2>Webseiten für Mensch und Maschine</h2>
|
||
<h3>Design das Menschen begeistert mit Struktur die Maschinen verstehen</h3>
|
||
<p>Wir entwickeln performante, barrierefreie Webseiten mit klarer Struktur,
|
||
die Nutzer überzeugen und von Suchmaschinen wie Google oder Bing, sowie KI-Systemen optimal verstanden werden.</p>
|
||
<p>Dabei setzen wir auf moderne Standards, erfüllen rechtliche Anforderungen wie Barrierefreiheit und Datenschutz
|
||
und sorgen mit zukunftsfähiger Technologie dafür, dass Ihre Webseite auf dem neuesten Stand ist.</p>
|
||
|
||
|
||
</div>
|
||
<NuxtImg
|
||
src="/uploads/energy_1_e15df59b8a.webp"
|
||
provider="strapi"
|
||
class="leftImg"
|
||
/>
|
||
</section>
|
||
|
||
<ServicesTeaser />
|
||
|
||
|
||
<!-- <section class="explainBox" :aria-label="$t('pages.services.explain.ariaLabel')">
|
||
<NuxtImg
|
||
src="/uploads/Human_Maschine_BG_5c91e9100f.webp"
|
||
provider="strapi"
|
||
format="webp"
|
||
sizes="100vw"
|
||
class="background-image"
|
||
alt="AI and human"
|
||
aria-hidden="true"
|
||
/>
|
||
<div class="container-15 content">
|
||
<h2>{{ $t('pages.services.explain.headline1') }}</h2>
|
||
<h3>{{ $t('pages.services.explain.headline2') }}</h3>
|
||
|
||
<p>{{ $t('pages.services.explain.paragraph') }}</p>
|
||
<ul class="check">
|
||
<li>{{ $t('pages.services.explain.bullet1') }}</li>
|
||
<li>{{ $t('pages.services.explain.bullet2') }}</li>
|
||
<li>{{ $t('pages.services.explain.bullet3') }}</li>
|
||
<li>{{ $t('pages.services.explain.bullet4') }}</li>
|
||
<li>{{ $t('pages.services.explain.bullet5') }}</li>
|
||
</ul>
|
||
<NuxtLinkLocale class="btn" to="services-cms">Erfahren Sie mehr zu Headless CMS</NuxtLinkLocale>
|
||
</div>
|
||
|
||
</section> -->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<section class="compBox">
|
||
<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 pb-5 content">
|
||
<h2>Webseiten für Schulen und Bildungseinrichtungen</h2>
|
||
<div class="row d-flex align-items-center">
|
||
<div class="col-md-6">
|
||
|
||
<h3>Barrierefreiheit nach BITV 2.0 und WCAG 2.1 – gesetzeskonform und nutzerfreundlich</h3>
|
||
<p>Unsere Lösungen für Schulen sind klar strukturiert und barrierefrei – so finden Schüler, Eltern und Lehrer schnell und unkompliziert alle wichtigen Informationen. Ein moderner Internetauftritt, der den Alltag erleichtert und Ihre Kommunikation stärkt.</p>
|
||
</div>
|
||
<div class="col-md-6 mt-5 pt-4 pb-4">
|
||
<ImageComparisonSlider
|
||
before-image="/uploads/Image_Comp_BSK_Before_1ae2a67e1b.png"
|
||
after-image="/uploads/BSK_After_9de7feda0b.webp"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<p class="btnArea">
|
||
<NuxtLinkLocale class="btn mintBtn" to="sectors-schools">Infos über Schul-Homepages</NuxtLinkLocale>
|
||
<NuxtLinkLocale class="btn mintBtn" to="sectors-schools">Projekt: Berchenschule Konstanz</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>
|
||
|
||
<CallToActionBox
|
||
:headline="$t('pages.home.finalCall.title')"
|
||
|
||
:button-text="$t('pages.home.finalCall.button')"
|
||
/>
|
||
|
||
<MarqueeBanner :items="logoItems" :logo-height="60" :title="$t('pages.home.marqueeBanner.title')" :greyscale="true" />
|
||
<FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" />
|
||
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script setup>
|
||
import { useMainStore } from '@/stores/main';
|
||
import { storeToRefs } from 'pinia';
|
||
|
||
const mainStore = useMainStore();
|
||
const { customers } = storeToRefs(mainStore);
|
||
const toggleContactBubble = () => mainStore.toggleContactBubble();
|
||
|
||
|
||
|
||
|
||
const logoItems = computed(() => {
|
||
return customers.value.map(customer => ({
|
||
text: customer.company || '',
|
||
image: {
|
||
url: customer.logo?.url || '',
|
||
alternativeText: customer.logo?.alternativeText || customer.company || ''
|
||
}
|
||
}))
|
||
})
|
||
</script>
|
||
|
||
|
||
<style lang="sass">
|
||
.homePage
|
||
.whatWeDo
|
||
position: relative
|
||
overflow-x: hidden
|
||
|
||
.rightImg, .leftImg
|
||
height: 100%
|
||
max-height: 500px
|
||
position: absolute
|
||
top: 0
|
||
aspect-ratio: 1 / 1
|
||
|
||
.rightImg
|
||
right: 0
|
||
transform: translateX(50%)
|
||
|
||
.leftImg
|
||
left: 0
|
||
transform: translateX(-25%)
|
||
|
||
.content
|
||
position: relative
|
||
z-index: 1
|
||
width: 65%
|
||
margin: 3rem 15% 2rem 20%
|
||
text-align: center
|
||
padding: 2rem 5%
|
||
border-radius: 1rem
|
||
@media(max-width: $breakPointMD)
|
||
width: 90%
|
||
margin: 3rem 5% 3rem 5%
|
||
background-color: rgba(255,255,255,.8)
|
||
|
||
h2
|
||
font-size: clamp(1.2rem, .7rem + 2vw, 2rem)
|
||
font-family: 'Comfortaa'
|
||
h3
|
||
font-family: 'Mainfont-Bold'
|
||
font-size: 1.3rem
|
||
p
|
||
font-size: 1.1rem
|
||
|
||
|
||
|
||
|
||
.explainBox
|
||
position: relative
|
||
overflow: hidden
|
||
min-height: 400px
|
||
margin: 2vh 0 8vh 0
|
||
padding: 8vh 0
|
||
|
||
.background-image
|
||
position: absolute
|
||
top: 0
|
||
left: 0
|
||
width: 100%
|
||
height: auto
|
||
object-fit: contain
|
||
object-position: center center
|
||
z-index: 0
|
||
pointer-events: none
|
||
|
||
.content
|
||
position: relative
|
||
z-index: 1
|
||
padding-left: 10%
|
||
h2
|
||
font-size: clamp(1.2rem, .7rem + 2vw, 2rem)
|
||
font-family: 'Comfortaa'
|
||
h3
|
||
font-family: 'Mainfont-Bold'
|
||
font-size: 1.2rem
|
||
|
||
.firstTeaser
|
||
h2
|
||
font-size: 1.6rem
|
||
line-height: 2.4rem
|
||
.subLine
|
||
color: adjust-color($darkgrey, $lightness: 20%)
|
||
font-size: 80%
|
||
.pinkFont
|
||
color: darken($pink, 10%)
|
||
.imgRight
|
||
float: right
|
||
max-width: 50%
|
||
.homeImageTop
|
||
margin: 4.5rem 0 8vh 3rem !important
|
||
|
||
.compBox
|
||
background-image: url(https://strapi.digimedialoop.de/uploads/watercolor_da8a37ce48.webp)
|
||
background-size: cover
|
||
background-repeat: no-repeat
|
||
padding: 6rem 0 6rem 0
|
||
.content
|
||
background-color: rgba(255,255,255,.7)
|
||
padding: 2rem 5%
|
||
margin-top: 2rem
|
||
margin-bottom: 2rem
|
||
border-radius: 1rem
|
||
transform: rotate(-1deg)
|
||
.btnArea
|
||
a
|
||
margin-right: 1rem
|
||
font-family: 'Mainfont-Bold'
|
||
h2
|
||
font-family: 'Comfortaa-Bold'
|
||
h3
|
||
line-height: 1.5
|
||
p
|
||
padding-right: 1rem
|
||
</style>
|