452 lines
13 KiB
Vue
452 lines
13 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">
|
||
<span v-html="getHtmlBySection('home_loopInput').value"></span>
|
||
</div>
|
||
<div class="column">
|
||
<NuxtImg
|
||
src="/uploads/Loop_83b4311dd0.webp"
|
||
provider="strapi"
|
||
class="loopImg"
|
||
alt="Mensch"
|
||
/>
|
||
</div>
|
||
<div class="column">
|
||
<span v-html="getHtmlBySection('home_loopOutput').value"></span>
|
||
</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" :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 || ''
|
||
}
|
||
}))
|
||
})
|
||
</script>
|
||
|
||
<style lang="sass">
|
||
.homePage
|
||
|
||
.dmlLoop
|
||
width: 80%
|
||
margin: 3rem 10%
|
||
h2
|
||
font-size: clamp(1.8rem, .9rem + 2vw, 2.4rem)
|
||
margin-bottom: 0
|
||
margin-top: -.5rem
|
||
h3
|
||
font-size: clamp(1.4rem, .7rem + 2vw, 2rem)
|
||
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)
|
||
// nur für 1 und 3 box
|
||
// child(1) border rights offen und child(3) border left offen
|
||
&:nth-child(1), &:nth-child(3)
|
||
//border-top: 1px solid #effbf7
|
||
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
|
||
h4
|
||
margin: 0
|
||
padding: .8rem 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
|
||
|
||
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: $breakPointMD)
|
||
width: 90%
|
||
margin: 3rem 5% 3rem 5%
|
||
background-color: rgba(255,255,255,.8)
|
||
|
||
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(1rem, .5rem + 2vw, 1.2rem)
|
||
|
||
|
||
|
||
|
||
.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: cover
|
||
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
|
||
|
||
.sectionSolutions
|
||
background-image: linear-gradient(to bottom right, $beige, white, $beige)
|
||
min-height: 200px
|
||
margin: 6rem 0
|
||
padding: 6rem 0 7rem 0
|
||
position: relative
|
||
overflow: hidden
|
||
|
||
h2
|
||
font-size: 1.8rem
|
||
.sectorsBox
|
||
display: flex
|
||
gap: 5%
|
||
justify-content: space-arround
|
||
flex-wrap: wrap
|
||
|
||
.sector
|
||
position: relative
|
||
flex: 1 1 30%
|
||
background: #f9f9f9
|
||
padding: 1rem
|
||
border-radius: 1rem
|
||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05)
|
||
transition: transform 0.3s ease
|
||
border-radius: 1rem
|
||
max-width: 450px
|
||
margin-bottom: 2rem
|
||
|
||
.bgImage
|
||
position: absolute
|
||
inset: 0
|
||
width: 100%
|
||
height: 100%
|
||
object-fit: cover
|
||
object-position: center
|
||
z-index: 0
|
||
border-radius: 1rem
|
||
|
||
.contentBox
|
||
position: relative
|
||
z-index: 2
|
||
background-image: linear-gradient(to top, rgba(white, .9), rgba(white, .7))
|
||
width: 100%
|
||
padding: 2rem
|
||
border-radius: 1rem
|
||
transform: rotate(-1deg)
|
||
|
||
.image-comparison-container
|
||
text-align: center
|
||
width: 80%
|
||
max-width: 300px
|
||
margin: 0 auto 2rem auto
|
||
|
||
h3
|
||
font-size: 1.25rem
|
||
margin: 1rem 0 0.5rem
|
||
z-index: 3
|
||
hyphens: auto
|
||
|
||
p
|
||
font-size: 1rem
|
||
color: #333
|
||
margin-bottom: 1.5rem
|
||
min-height: 4.5rem
|
||
z-index: 3
|
||
|
||
.btn
|
||
text-transform: none
|
||
hyphens: auto
|
||
font-size: 1.1rem
|
||
font-family: 'Mainfont-Bold'
|
||
|
||
@media screen and (max-width: $breakPointMD)
|
||
flex-direction: column
|
||
.sector
|
||
flex: 1 1 100%
|
||
max-width: 100%
|
||
padding: 1rem
|
||
.btn
|
||
font-size: 1.05rem
|
||
|
||
|
||
|
||
.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>
|