427 lines
12 KiB
Vue
427 lines
12 KiB
Vue
<template>
|
||
<div class="homePage">
|
||
<HeroBox
|
||
image="/uploads/bg_technologie_d24f950ccf.webp"
|
||
:aria-label="$t('pages.services.hero.ariaLabel')"
|
||
:dark-background="true"
|
||
>
|
||
<div v-html="getHtmlBySection('home_hero').value"></div>
|
||
<!-- <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, robust und flexibel sind.</p> -->
|
||
<NuxtLinkLocale to="references" class="btn whiteBtn">{{ $t('buttons.ourReferences') }}</NuxtLinkLocale>
|
||
</HeroBox>
|
||
|
||
<section class="dmlLoop">
|
||
<span class="loopHeader" v-html="getHtmlBySection('home_loopHeader').value"></span>
|
||
<div class="content">
|
||
<div class="column">
|
||
<h4 @click="toggleSection('input')" :class="{ open: openSections.input }">
|
||
Input
|
||
<span>︾</span>
|
||
</h4>
|
||
<transition
|
||
@before-enter="beforeEnter"
|
||
@enter="enter"
|
||
@leave="leave"
|
||
>
|
||
<div v-show="openSections.input" class="sliding-box" v-html="getHtmlBySection('home_loopInput').value" />
|
||
</transition>
|
||
</div>
|
||
<div class="column">
|
||
<NuxtImg
|
||
src="/uploads/Loop_83b4311dd0.webp"
|
||
provider="strapi"
|
||
class="loopImg"
|
||
alt="Mensch"
|
||
/>
|
||
</div>
|
||
<div class="column">
|
||
<h4 @click="toggleSection('output')" :class="{ open: openSections.output }">
|
||
Output
|
||
<span>︾</span>
|
||
</h4>
|
||
<transition
|
||
@before-enter="beforeEnter"
|
||
@enter="enter"
|
||
@leave="leave"
|
||
>
|
||
<div v-show="openSections.output" class="sliding-box" v-html="getHtmlBySection('home_loopOutput').value" />
|
||
</transition>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</section>
|
||
|
||
|
||
|
||
<section class="whatWeDo">
|
||
<NuxtImg
|
||
src="/uploads/laechelnde_Dame_a393baf878.webp"
|
||
provider="strapi"
|
||
class="rightImg"
|
||
alt="Mensch"
|
||
/>
|
||
<div class="content">
|
||
<div v-html="getHtmlBySection('home_human_machine').value"></div>
|
||
</div>
|
||
<NuxtImg
|
||
src="/uploads/energy_1_e15df59b8a.webp"
|
||
provider="strapi"
|
||
class="leftImg"
|
||
alt="Maschine"
|
||
/>
|
||
</section>
|
||
|
||
<ServicesTeaser />
|
||
|
||
<!-- <section class="sectionSolutions">
|
||
<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 Branchenlösungen mit Vorher-/Nachher-Effekt</h2>
|
||
<div class="sectorsBox">
|
||
<div class="sector">
|
||
<NuxtImg
|
||
provider="strapi"
|
||
src="/uploads/watercolor_da8a37ce48.webp"
|
||
alt=""
|
||
aria-hidden="true"
|
||
class="bgImage"
|
||
/>
|
||
<div class="contentBox">
|
||
<ImageComparisonSlider
|
||
before-image="/uploads/Image_Comp_BSK_Before_1ae2a67e1b.png"
|
||
after-image="/uploads/BSK_After_9de7feda0b.webp"
|
||
/>
|
||
<h3 v-show="false">Webseiten für Schulen und Bildungseinrichtungen</h3>
|
||
<p v-show="false">Wir gestalten barrierefreie, DSGVO-konforme Schulwebseiten mit modernem Content-Management-System und einfacher Pflege durch das Schulpersonal.</p>
|
||
<NuxtLinkLocale :to="'sectors-schools'" class="btn">Webseiten für Schulen und Bildungseinrichtungen</NuxtLinkLocale>
|
||
</div>
|
||
</div>
|
||
<div class="sector">
|
||
<NuxtImg
|
||
provider="strapi"
|
||
src="/uploads/filmhintergrundcollage_a0c4b0e99d.webp"
|
||
alt=""
|
||
aria-hidden="true"
|
||
class="bgImage"
|
||
/>
|
||
<div class="contentBox">
|
||
<ImageComparisonSlider
|
||
before-image="/uploads/herb_X_vorher_Image_5cef5738f9.webp"
|
||
after-image="/uploads/herb_X_nachher_Image_e2d2a388ff.webp"
|
||
/>
|
||
<h3 v-show="false">Webauftritte für die Film- und Fernsehbranche</h3>
|
||
<p v-show="false">Maßgeschneiderte Weblösungen für Produktionen, Studios und Agenturen. Visuell stark, technisch top und bereit für Awards.</p>
|
||
<NuxtLinkLocale :to="'sectors-film'" class="btn">Webauftritte für die Film- und Fernsehbranche</NuxtLinkLocale>
|
||
</div>
|
||
</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="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
|
||
:content="getHtmlBySection('ctaBox_home').value"
|
||
|
||
:button-text="$t('buttons.contactUs')"
|
||
/>
|
||
|
||
<MarqueeBanner :items="logoItems" :logo-height="60" :speed="30" :title="getHtmlBySection('home_company_trustus').value" :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 { getHtmlBySection } = usePageContentRenderer()
|
||
|
||
const logoItems = computed(() => {
|
||
return customers.value.map(customer => ({
|
||
text: customer.company || '',
|
||
image: {
|
||
url: customer.logo?.url || '',
|
||
alternativeText: customer.logo?.alternativeText || customer.company || ''
|
||
}
|
||
}))
|
||
})
|
||
|
||
const openSections = ref({
|
||
input: false,
|
||
output: false
|
||
})
|
||
|
||
const toggleSection = (key) => {
|
||
openSections.value[key] = !openSections.value[key]
|
||
}
|
||
function beforeEnter(el) {
|
||
el.style.height = '0'
|
||
el.style.opacity = '0'
|
||
el.style.overflow = 'hidden'
|
||
}
|
||
|
||
function enter(el) {
|
||
const height = el.scrollHeight
|
||
el.style.transition = 'height 0.4s ease, opacity 0.4s ease'
|
||
requestAnimationFrame(() => {
|
||
el.style.height = height + 'px'
|
||
el.style.opacity = '1'
|
||
})
|
||
|
||
el.addEventListener('transitionend', () => {
|
||
el.style.height = 'auto'
|
||
el.style.overflow = 'visible'
|
||
}, { once: true })
|
||
}
|
||
|
||
function leave(el) {
|
||
el.style.height = el.scrollHeight + 'px'
|
||
el.style.opacity = '1'
|
||
el.style.overflow = 'hidden'
|
||
requestAnimationFrame(() => {
|
||
el.style.transition = 'height 0.4s ease, opacity 0.4s ease'
|
||
el.style.height = '0'
|
||
el.style.opacity = '0'
|
||
})
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="sass">
|
||
@keyframes bounce-fade
|
||
0%
|
||
transform: translateY(0)
|
||
opacity: 1
|
||
50%
|
||
transform: translateY(5px)
|
||
opacity: 0
|
||
51%
|
||
transform: translateY(-5px)
|
||
opacity: 0
|
||
100%
|
||
transform: translateY(0)
|
||
opacity: 1
|
||
|
||
.slide-fade-enter-active, .slide-fade-leave-active
|
||
transition: all 0.3s ease
|
||
overflow: hidden
|
||
|
||
.slide-fade-enter-from, .slide-fade-leave-to
|
||
max-height: 0
|
||
opacity: 0
|
||
transform: translateY(-10px)
|
||
|
||
.slide-fade-enter-to, .slide-fade-leave-from
|
||
max-height: 500px
|
||
opacity: 1
|
||
transform: translateY(0)
|
||
|
||
.homePage
|
||
|
||
.dmlLoop
|
||
width: 80%
|
||
margin: 3rem 10%
|
||
.loopHeader
|
||
text-align: center
|
||
|
||
h2
|
||
font-size: clamp(1.8rem, .9rem + 2vw, 2rem)
|
||
margin-bottom: 0
|
||
margin-top: -.5rem
|
||
|
||
h3
|
||
font-size: clamp(1.2rem, .5rem + 2vw, 1.6rem)
|
||
margin: 0 0 1rem 0
|
||
|
||
h4
|
||
font-size: clamp(1.2rem, .5rem + 2vw, 1.6rem)
|
||
margin: .5rem 0 1.5rem 0
|
||
|
||
p
|
||
margin-top: 1rem
|
||
|
||
.content
|
||
display: flex
|
||
flex-direction: row
|
||
gap: 2rem
|
||
margin: 3rem 0
|
||
|
||
.column
|
||
padding: 0
|
||
border-radius: .5rem
|
||
min-width: 280px
|
||
width: calc((100% / 3) - 2rem)
|
||
|
||
&:nth-child(1), &:nth-child(3)
|
||
border-bottom: 1px solid #effbf7
|
||
|
||
&:nth-child(1)
|
||
border-left: 1px solid #effbf7
|
||
|
||
h4
|
||
background-image: linear-gradient(to right, #effbf7, white)
|
||
|
||
&:nth-child(3)
|
||
border-right: 1px solid #effbf7
|
||
|
||
h4
|
||
background-image: linear-gradient(to right, white, #effbf7)
|
||
|
||
&:nth-child(2)
|
||
display: flex
|
||
align-items: center
|
||
justify-content: center
|
||
|
||
img
|
||
margin: 22% auto
|
||
|
||
&.sliding-box
|
||
padding: .5rem 1rem
|
||
font-size: .9rem
|
||
transition: all 0.4s ease
|
||
|
||
h4
|
||
margin: 0
|
||
padding: .8rem 2rem .2rem 2rem
|
||
color: $darkgrey
|
||
border-top-left-radius: .5rem
|
||
border-top-right-radius: .5rem
|
||
font-family: 'Mainfont-Bold'
|
||
font-size: 1.1rem
|
||
text-transform: uppercase
|
||
text-align: center
|
||
letter-spacing: .05rem
|
||
cursor: pointer
|
||
margin-top: 8rem
|
||
transition: .5s ease-in-out
|
||
|
||
span
|
||
display: block
|
||
animation: bounce-fade 1.5s infinite ease-in-out
|
||
color: $darkgrey
|
||
transition: transform 0.3s ease
|
||
|
||
&.open
|
||
margin-top: 0
|
||
span
|
||
animation: none
|
||
transform: rotate(180deg)
|
||
|
||
p
|
||
padding: .5rem 1rem
|
||
font-size: .9rem
|
||
|
||
ul
|
||
margin-left: 2vw
|
||
|
||
li
|
||
padding: .3rem 0
|
||
|
||
.loopImg
|
||
width: 100%
|
||
height: auto
|
||
object-fit: cover
|
||
object-position: center center
|
||
|
||
@media screen and (max-width: $breakPointLG)
|
||
.content
|
||
flex-direction: column
|
||
|
||
.column
|
||
width: 90%
|
||
min-width: 90%
|
||
|
||
.whatWeDo
|
||
position: relative
|
||
overflow-x: hidden
|
||
min-height: 25vw
|
||
margin: 3rem 0
|
||
|
||
.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: $breakPointLG)
|
||
width: 90%
|
||
margin: 3rem 5%
|
||
background-color: rgba(255,255,255,.95)
|
||
|
||
h2
|
||
font-size: clamp(1.5rem, .7rem + 2vw, 2rem)
|
||
font-family: 'Comfortaa'
|
||
|
||
h3
|
||
font-family: 'Mainfont-Bold'
|
||
font-size: clamp(1.2rem, .9rem + 2vw, 1.6rem)
|
||
|
||
p
|
||
font-size: clamp(1.1rem, .5rem + 2vw, 1.2rem)
|
||
</style>
|
||
|