new Nav
This commit is contained in:
parent
53a8919070
commit
258f943c4c
313
components/template/NavBar.vue
Normal file
313
components/template/NavBar.vue
Normal file
@ -0,0 +1,313 @@
|
||||
<template>
|
||||
<nav class="mainNav" :class="[
|
||||
isMenuOpen ? 'active' : '',
|
||||
screenWidth < 1350 ? 'mobile-nav' : 'desk-nav',
|
||||
scrollPosition > 50 ? 'scrolled' : ''
|
||||
]">
|
||||
<!-- Burger Icon nur bei Mobile sichtbar -->
|
||||
<div class="burger" @click="toggleMenu" v-if="screenWidth < 1350" :class="{ open: isMenuOpen }">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<ul
|
||||
:class="[
|
||||
screenWidth < 1350 && isMenuOpen ? 'mobile-menu active' :
|
||||
screenWidth < 1350 ? 'mobile-menu' : 'desk-menu']"
|
||||
v-show="screenWidth >= 1350 || isMenuOpen"
|
||||
>
|
||||
<li
|
||||
v-for="link in navigationLinks"
|
||||
:key="link.label"
|
||||
class="nav-item"
|
||||
@mouseenter="screenWidth >= 1350 && link.subNav && showSubNav(link.label)"
|
||||
@mouseleave="screenWidth >= 1350 && link.subNav && hideSubNav(link.label)"
|
||||
|
||||
>
|
||||
<!-- Mit SubNav -->
|
||||
<template v-if="link.subNav">
|
||||
<div @click="screenWidth < 1350 ? toggleMobileSubNav(link.label) : null">
|
||||
{{ $t(link.label) }}
|
||||
<span class="arrow" :class="{ open: (screenWidth < 1350 ? isMobileSubNavOpen : isSubNavOpen) === link.label }"></span>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
v-show="isActiveSubNav(link.label)"
|
||||
class="submenu"
|
||||
:class="{ open: isActiveSubNav(link.label) }"
|
||||
>
|
||||
<li v-for="sublink in link.subNav" :key="sublink.label">
|
||||
<NuxtLinkLocale :to="sublink.routeKey" @click.native="handleMobileClose">
|
||||
{{ $t(sublink.label) }}
|
||||
</NuxtLinkLocale>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<!-- Ohne SubNav -->
|
||||
<template v-else>
|
||||
<NuxtLinkLocale :to="link.routeKey" @click.native="handleMobileClose">
|
||||
{{ $t(link.label) }}
|
||||
</NuxtLinkLocale>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useMainStore } from '@/stores/main'
|
||||
const mainStore = useMainStore()
|
||||
|
||||
const screenWidth = computed(() => mainStore.screenWidth)
|
||||
const scrollPosition = computed(() => mainStore.scrollPosition)
|
||||
|
||||
const isSubNavOpen = ref(null)
|
||||
const isMobileSubNavOpen = ref(null)
|
||||
|
||||
function toggleMobileSubNav(routeKey) {
|
||||
if (screenWidth.value < 1350) {
|
||||
isMobileSubNavOpen.value = isMobileSubNavOpen.value === routeKey ? null : routeKey
|
||||
}
|
||||
}
|
||||
|
||||
function showSubNav(routeKey) {
|
||||
isSubNavOpen.value = routeKey
|
||||
}
|
||||
function hideSubNav(routeKey) {
|
||||
if (isSubNavOpen.value === routeKey) {
|
||||
isSubNavOpen.value = null
|
||||
}
|
||||
}
|
||||
|
||||
function isActiveSubNav(label) {
|
||||
return (screenWidth.value < 1350 ? isMobileSubNavOpen.value : isSubNavOpen.value) === label
|
||||
}
|
||||
|
||||
const isMenuOpen = computed(() => mainStore.menuOpen)
|
||||
const toggleMenu = () => mainStore.toggleMenu()
|
||||
|
||||
const toggleContactBubble = () => mainStore.toggleContactBubble()
|
||||
|
||||
const handleMobileClose = () => {
|
||||
if (screenWidth.value < 1350 && isMenuOpen.value) {
|
||||
toggleMenu()
|
||||
} else {
|
||||
hideSubNav()
|
||||
}
|
||||
}
|
||||
|
||||
const navigationLinks = [
|
||||
{
|
||||
routeKey: 'webagency',
|
||||
label: 'menu.webagency'
|
||||
},
|
||||
{
|
||||
routeKey: '',
|
||||
label: 'menu.services',
|
||||
subNav: [
|
||||
{ routeKey: 'services-cms', label: 'menu.menuCms' },
|
||||
{ routeKey: 'services-seo', label: 'menu.menuSEO' },
|
||||
{ routeKey: 'services-accessibility', label: 'menu.menuAccessibility' },
|
||||
{ routeKey: 'services-ai', label: 'menu.menuAi' }
|
||||
]
|
||||
},
|
||||
{
|
||||
routeKey: '',
|
||||
label: 'menu.sectors',
|
||||
subNav: [
|
||||
{ routeKey: 'sectors-schools', label: 'menu.menuSchools' },
|
||||
{ routeKey: 'sectors-film', label: 'menu.menuFilm' }
|
||||
]
|
||||
},
|
||||
{ routeKey: 'references', label: 'menu.references' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.mainNav
|
||||
position: fixed
|
||||
z-index: 50
|
||||
display: flex
|
||||
justify-content: flex-end
|
||||
width: auto
|
||||
|
||||
&.desk-nav
|
||||
top: 2rem
|
||||
right: 2rem
|
||||
background: rgba(white, .9)
|
||||
border-radius: 1rem
|
||||
transition: .8s
|
||||
&.scrolled
|
||||
top: -.5rem
|
||||
right: -3rem
|
||||
background: transparent
|
||||
|
||||
&.mobile-nav
|
||||
top: 0
|
||||
right: 0
|
||||
background-color: transparent
|
||||
|
||||
|
||||
.burger
|
||||
width: 4rem
|
||||
height: 4rem
|
||||
border-radius: 50%
|
||||
background-color: $darkgrey
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: center
|
||||
flex-direction: column
|
||||
cursor: pointer
|
||||
z-index: 55
|
||||
margin: 2rem 1.5rem
|
||||
|
||||
span
|
||||
display: block
|
||||
width: 25px
|
||||
height: 5px
|
||||
background-color: white
|
||||
margin: 4px 0
|
||||
border-radius: 2rem
|
||||
transition: all 0.3s ease
|
||||
|
||||
&.open
|
||||
background-color: transparent
|
||||
margin: 1.2rem 1rem
|
||||
span
|
||||
height: 3px
|
||||
&:nth-child(1)
|
||||
transform: rotate(45deg) translate(2px, 5px)
|
||||
&:nth-child(2)
|
||||
transform: rotate(-45deg) translate(3px, -6px)
|
||||
|
||||
.nav-item
|
||||
font-family: 'Comfortaa-Bold'
|
||||
text-transform: uppercase
|
||||
color: $darkgrey
|
||||
font-size: 1.1rem
|
||||
cursor: pointer
|
||||
a
|
||||
text-decoration: none
|
||||
color: $darkgrey
|
||||
&:hover
|
||||
transform: scale(1.1)
|
||||
.arrow
|
||||
display: inline-block
|
||||
margin-left: 0.5rem
|
||||
transition: transform 0.8s ease
|
||||
|
||||
&::after
|
||||
content: '\276F'
|
||||
display: inline-block
|
||||
transform: rotate(90deg)
|
||||
|
||||
&.open::after
|
||||
transform: rotate(-90deg)
|
||||
|
||||
.submenu
|
||||
max-height: 0
|
||||
opacity: 0
|
||||
overflow: hidden
|
||||
visibility: hidden
|
||||
transition: max-height 0.5s ease, opacity 0.5s ease
|
||||
&.open
|
||||
max-height: 500px // hoch genug für deinen Content
|
||||
opacity: 1
|
||||
visibility: visible
|
||||
|
||||
li
|
||||
padding: .8rem 1rem .4rem 0
|
||||
font-size: 1rem
|
||||
line-height: 140%
|
||||
position: relative
|
||||
&::before
|
||||
content: ''
|
||||
width: .5rem
|
||||
height: .4rem
|
||||
background-color: rgba($primaryColor, .9)
|
||||
border-radius: $loopShape
|
||||
position: absolute
|
||||
top: 1.2rem
|
||||
left: -1rem
|
||||
border-radius: 20px
|
||||
|
||||
.desk-menu
|
||||
list-style: none
|
||||
display: flex
|
||||
flex-direction: row
|
||||
padding: .2rem 3.5rem
|
||||
|
||||
.nav-item
|
||||
position: relative
|
||||
padding: .5rem 1rem
|
||||
cursor: pointer
|
||||
|
||||
a
|
||||
transition: .5s
|
||||
:hover
|
||||
transform: scale(1.1)
|
||||
|
||||
.submenu
|
||||
position: absolute
|
||||
top: 100%
|
||||
left: -50%
|
||||
width: 200%
|
||||
background-image: linear-gradient(to bottom, rgba(#fff, 0.1) 0%, rgba(#fff, 0.9) 8%, rgba(#fff, .98) 100%)
|
||||
border-bottom-right-radius: 1rem
|
||||
border-bottom-left-radius: 1rem
|
||||
list-style: none
|
||||
padding: 1rem .5rem .5rem 2.5rem
|
||||
box-shadow: 1px 4px 4px rgba(0, 0, 0, 0.1)
|
||||
z-index: 10
|
||||
|
||||
|
||||
.mobile-menu
|
||||
list-style: none
|
||||
padding: 5rem 8%
|
||||
background-color: rgba($darkgrey, .95)
|
||||
width: 6rem
|
||||
display: flex
|
||||
flex-direction: column
|
||||
align-items: flex-start
|
||||
transition: .8s
|
||||
position: fixed
|
||||
top: -1rem
|
||||
right: 0
|
||||
|
||||
&.active
|
||||
width: 80vw
|
||||
max-height: 100vh
|
||||
border-bottom-left-radius: 2rem
|
||||
.nav-item
|
||||
position: relative
|
||||
padding: .5rem 1rem
|
||||
cursor: pointer
|
||||
color: white
|
||||
&::before
|
||||
content: ''
|
||||
width: .7rem
|
||||
height: .5rem
|
||||
background-color: rgba($primaryColor, .9)
|
||||
border-radius: $loopShape
|
||||
position: absolute
|
||||
top: .8rem
|
||||
left: -.4rem
|
||||
border-radius: 20px
|
||||
|
||||
.submenu
|
||||
margin: 1rem 0 .2rem -1.8rem
|
||||
list-style: none
|
||||
a
|
||||
text-transform: none
|
||||
li, a
|
||||
transition: .5s
|
||||
color: white
|
||||
:hover
|
||||
transform: scale(1.1)
|
||||
|
||||
</style>
|
||||
|
||||
436
components/template/NavigationBar.vue
Normal file
436
components/template/NavigationBar.vue
Normal file
@ -0,0 +1,436 @@
|
||||
<template>
|
||||
<div
|
||||
class="navigationBox"
|
||||
:class="[
|
||||
isMenuOpen ? 'menu-active' : '',
|
||||
screenWidth < 1350 ? 'mobile' : 'desk'
|
||||
]"
|
||||
role="navigation"
|
||||
aria-label="Hauptnavigation"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="closer"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label="Navigation schließen"
|
||||
@click="toggleMenu"
|
||||
@keydown.enter="toggleMenu"
|
||||
/>
|
||||
|
||||
<nav
|
||||
v-if="isMenuOpen || screenWidth > 1350"
|
||||
:aria-expanded="screenWidth < 1350 ? 'true' : undefined"
|
||||
@mouseleave="screenWidth >= 1350 && hideSubNav()"
|
||||
>
|
||||
|
||||
<!-- <div class="mobilNavLogo">
|
||||
<NuxtImg
|
||||
v-if="screenWidth < 1350"
|
||||
provider="strapi"
|
||||
src="/uploads/DML_Logo_mint_negative_2024_9257db5430.svg"
|
||||
alt="digimedialoop Logo"
|
||||
width="120"
|
||||
/>
|
||||
</div> -->
|
||||
|
||||
<span
|
||||
v-for="link in navigationLinks"
|
||||
:key="link.routeKey"
|
||||
class="main-nav-item"
|
||||
@mouseenter="screenWidth >= 1350 && showSubNav(link.routeKey)"
|
||||
@mouseleave="screenWidth >= 1350 && hideSubNav(link.routeKey)"
|
||||
>
|
||||
<NuxtLinkLocale
|
||||
:to="link.routeKey"
|
||||
class="main-nav-link"
|
||||
:aria-haspopup="link.subNav && link.subNav.length > 0 ? 'true' : undefined"
|
||||
:aria-expanded="isSubNavOpen === link.routeKey ? 'true' : 'false'"
|
||||
@click="handleMobileClose"
|
||||
>
|
||||
{{ $t(link.label) }}
|
||||
</NuxtLinkLocale>
|
||||
|
||||
<!-- PFEIL FÜR MOBILE UND TOGGLE -->
|
||||
<button
|
||||
v-if="link.subNav && link.subNav.length > 0 && screenWidth < 1350"
|
||||
class="submenu-toggle"
|
||||
@click.prevent="toggleMobileSubNav(link.routeKey)"
|
||||
:aria-expanded="isMobileSubNavOpen === link.routeKey ? 'true' : 'false'"
|
||||
aria-label="Untermenü öffnen/schließen"
|
||||
>
|
||||
<svg
|
||||
:class="{ 'open': isMobileSubNavOpen === link.routeKey }"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="12"
|
||||
height="8"
|
||||
viewBox="0 0 12 8"
|
||||
fill="none"
|
||||
>
|
||||
<path d="M1 1L6 6L11 1" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- SUBNAVIGATION -->
|
||||
<ul
|
||||
v-if="link.subNav && link.subNav.length > 0"
|
||||
v-show="(screenWidth >= 1350 && isSubNavOpen === link.routeKey) || (screenWidth < 1350 && isMobileSubNavOpen === link.routeKey)"
|
||||
class="sub-nav"
|
||||
>
|
||||
<li v-for="subLink in link.subNav" :key="subLink.routeKey" class="sub-nav-item">
|
||||
<NuxtLinkLocale
|
||||
:to="subLink.routeKey"
|
||||
class="sub-nav-link"
|
||||
@click="handleMobileClose"
|
||||
>
|
||||
{{ $t(subLink.label) }}
|
||||
</NuxtLinkLocale>
|
||||
</li>
|
||||
</ul>
|
||||
</span>
|
||||
|
||||
|
||||
<a
|
||||
class="menu_link" href="#"
|
||||
role="button"
|
||||
aria-label="Kontaktformular öffnen"
|
||||
@click="toggleContactBubble"
|
||||
>
|
||||
{{ $t('contact') }}
|
||||
</a>
|
||||
<SettingsPanel v-if="screenWidth < 1350" />
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { useMainStore } from '@/stores/main'
|
||||
const mainStore = useMainStore()
|
||||
|
||||
const screenWidth = computed(() => mainStore.screenWidth)
|
||||
const scrollPosition = computed(() => mainStore.scrollPosition)
|
||||
|
||||
const isSubNavOpen = ref(null) // speichert, welches Submenü auf Desktop offen ist
|
||||
const isMobileSubNavOpen = ref(null) // Trackt, welches Submenü auf Mobile offen ist
|
||||
|
||||
function toggleMobileSubNav(routeKey) {
|
||||
if (screenWidth.value < 1350) {
|
||||
isMobileSubNavOpen.value = isMobileSubNavOpen.value === routeKey ? null : routeKey
|
||||
}
|
||||
}
|
||||
|
||||
// Funktionen zum Öffnen und Schließen der Subnavigation auf Desktop
|
||||
function showSubNav(routeKey) {
|
||||
isSubNavOpen.value = routeKey
|
||||
}
|
||||
function hideSubNav(routeKey) {
|
||||
if (isSubNavOpen.value === routeKey) {
|
||||
isSubNavOpen.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const isMenuOpen = computed(() => mainStore.menuOpen)
|
||||
const toggleMenu = () => mainStore.toggleMenu()
|
||||
|
||||
const toggleContactBubble = () => mainStore.toggleContactBubble()
|
||||
|
||||
const handleMobileClose = () => {
|
||||
if (screenWidth.value < 1350 && isMenuOpen.value) {
|
||||
toggleMenu()
|
||||
} else {
|
||||
hideSubNav()
|
||||
}
|
||||
}
|
||||
|
||||
const navigationLinks = [
|
||||
{
|
||||
routeKey: 'webagency',
|
||||
label: 'webagency'
|
||||
},
|
||||
{
|
||||
routeKey: '',
|
||||
label: 'services',
|
||||
subNav: [
|
||||
{ routeKey: 'services-cms', label: 'menuCms' },
|
||||
{ routeKey: 'services-seo', label: 'menuSEO' },
|
||||
{ routeKey: 'services-accessibility', label: 'menuAccessibility' },
|
||||
{ routeKey: 'services-ai', label: 'menuAi' },
|
||||
]
|
||||
},
|
||||
{
|
||||
routeKey: '',
|
||||
label: 'sectors',
|
||||
subNav: [
|
||||
{ routeKey: 'sectors-schools', label: 'menuSchools' },
|
||||
{ routeKey: 'sectors-film', label: 'menuFilm' }
|
||||
]
|
||||
},
|
||||
{ routeKey: 'references', label: 'references' }
|
||||
]
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.navigationBox
|
||||
position: relative
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: flex-end
|
||||
width: 80%
|
||||
transition: .8s
|
||||
margin-top: 1.2rem // -1rem
|
||||
|
||||
nav
|
||||
display: block
|
||||
z-index: 102
|
||||
//background: linear-gradient(to right, rgba($lightgrey, 0.8), rgba(white, 0.9), rgba(white, 0.9))
|
||||
background: white
|
||||
border: 1px solid adjust-color($beige, $lightness: 5%)
|
||||
padding: 1rem 2rem
|
||||
text-align: center
|
||||
border-radius: 1rem
|
||||
margin: 4.8rem 1rem 0 1rem
|
||||
transition: .8s
|
||||
|
||||
a
|
||||
margin: 0 1.2rem
|
||||
text-decoration: none
|
||||
color: $darkgrey
|
||||
text-transform: uppercase
|
||||
font-family: 'Comfortaa-Bold'
|
||||
font-size: 1.1rem
|
||||
letter-spacing: .05rem
|
||||
transition: .6s
|
||||
display: inline-block
|
||||
|
||||
&:hover
|
||||
transform: scale(1.15)
|
||||
background-image: radial-gradient(rgba(white, .5), rgba(white, .1))
|
||||
box-shadow: 0 0 10px 10px rgba(white, 0.2)
|
||||
border-radius: 10px
|
||||
|
||||
&.desk
|
||||
.sub-nav
|
||||
display: block
|
||||
position: absolute
|
||||
top: 3rem
|
||||
right: 5%
|
||||
background-color: rgba(white, .95)
|
||||
padding: 2rem 2rem 1rem 2rem
|
||||
text-align: left
|
||||
cursor: pointer
|
||||
border-bottom-left-radius: 1rem
|
||||
border-bottom-right-radius: 1rem
|
||||
list-style: none
|
||||
|
||||
.sub-nav-item
|
||||
padding: 0 0 1.5rem 0
|
||||
|
||||
.sub-nav-link
|
||||
position: relative
|
||||
margin-left: 1.2rem
|
||||
|
||||
&::before
|
||||
content: ''
|
||||
width: .5rem
|
||||
height: .4rem
|
||||
background-color: rgba($primaryColor, .9)
|
||||
border-radius: $loopShape
|
||||
position: absolute
|
||||
top: .4rem
|
||||
left: -1.3rem
|
||||
border-radius: 20px
|
||||
|
||||
&:hover
|
||||
transform: scale(1.025)
|
||||
|
||||
&.mobile
|
||||
top: 0
|
||||
|
||||
&.navigationBox
|
||||
display: block
|
||||
position: relative
|
||||
background-color: $darkgrey
|
||||
width: 4rem
|
||||
height: 4rem
|
||||
z-index: 8
|
||||
border-radius: 50%
|
||||
margin-right: 5vw
|
||||
margin-top: 2rem
|
||||
|
||||
.closer
|
||||
position: relative
|
||||
width: 100%
|
||||
height: 4rem
|
||||
|
||||
&::after, &::before
|
||||
position: absolute
|
||||
content: ''
|
||||
width: 2rem
|
||||
z-index: 12
|
||||
height: 5px
|
||||
border-radius: 4px
|
||||
background-color: white
|
||||
right: 75%
|
||||
transform: translateX(100%)
|
||||
transition: .8s
|
||||
|
||||
&::before
|
||||
top: 35%
|
||||
|
||||
&::after
|
||||
top: 55%
|
||||
|
||||
nav
|
||||
display: none
|
||||
background-image: none
|
||||
background: transparent
|
||||
border: none
|
||||
padding-top: 0rem !important
|
||||
|
||||
.submenu-toggle
|
||||
background: none
|
||||
border: none
|
||||
padding: 0 0 0 0.5rem
|
||||
margin-top: -1rem
|
||||
cursor: pointer
|
||||
display: inline-flex
|
||||
align-items: center
|
||||
color: white
|
||||
transition: transform 0.3s ease
|
||||
|
||||
svg
|
||||
transition: transform 0.3s ease
|
||||
|
||||
&.open svg,
|
||||
svg.open
|
||||
transform: rotate(180deg) // Pfeil zeigt nach oben, wenn offen
|
||||
|
||||
.sub-nav
|
||||
overflow: hidden
|
||||
max-height: 0
|
||||
opacity: 0
|
||||
transition: max-height 0.4s ease, opacity 0.4s ease
|
||||
|
||||
&.open
|
||||
max-height: 500px
|
||||
opacity: 1
|
||||
|
||||
.sub-nav
|
||||
list-style: none
|
||||
padding-left: 1.8rem
|
||||
margin: 0
|
||||
|
||||
.sub-nav-item
|
||||
padding-left: 1rem
|
||||
margin-bottom: 0.2rem
|
||||
|
||||
.sub-nav-link
|
||||
color: white
|
||||
font-size: 1rem !important
|
||||
line-height: 1.5rem
|
||||
padding: 0.5rem 1.5rem
|
||||
|
||||
&:hover
|
||||
|
||||
&::before
|
||||
content: ''
|
||||
width: .5rem
|
||||
height: .4rem
|
||||
background-color: rgba($primaryColor, .9)
|
||||
border-radius: $loopShape
|
||||
position: absolute
|
||||
top: 1rem
|
||||
left: 0
|
||||
border-radius: 20px
|
||||
|
||||
.menu_link
|
||||
margin-left: 1.5rem
|
||||
transition: .8s
|
||||
|
||||
&:hover
|
||||
transform: scale(1.06)
|
||||
background-image: radial-gradient(rgba($primaryColor, .1), transparent, transparent)
|
||||
box-shadow: 0 0 0 0 transparent
|
||||
border-radius: 20px
|
||||
|
||||
a, .menu_link
|
||||
display: block
|
||||
color: white
|
||||
text-align: left
|
||||
margin-bottom: .2rem
|
||||
padding: 1rem 2.8rem .5rem 1.2rem
|
||||
position: relative
|
||||
font-size: 1.25rem !important
|
||||
width: auto
|
||||
max-width: 18rem
|
||||
text-transform: uppercase
|
||||
font-family: 'Mainfont-Bold'
|
||||
|
||||
&::before
|
||||
content: ''
|
||||
width: .8rem
|
||||
height: .6rem
|
||||
background-color: rgba($primaryColor, .9)
|
||||
border-radius: $loopShape
|
||||
position: absolute
|
||||
top: 1.5rem
|
||||
left: -.5rem
|
||||
border-radius: 20px
|
||||
|
||||
&:hover
|
||||
transform: scale(1.06)
|
||||
background-image: radial-gradient(rgba($primaryColor, .1), transparent, transparent)
|
||||
box-shadow: 0 0 0 0 transparent
|
||||
border-radius: 20px
|
||||
|
||||
&.menu-active
|
||||
width: 100vw
|
||||
height: 98vh
|
||||
border-radius: 5px
|
||||
margin: 0
|
||||
background-color: rgba($darkgrey, .97)
|
||||
|
||||
.closer
|
||||
&::before, &::after
|
||||
top: 2rem
|
||||
right: 2rem
|
||||
|
||||
&::before
|
||||
transform: rotate(45deg)
|
||||
|
||||
&::after
|
||||
transform: rotate(-45deg)
|
||||
|
||||
nav
|
||||
display: block
|
||||
padding: 10vh 0
|
||||
margin: 0 5vw
|
||||
|
||||
.navigationBox
|
||||
margin-top: .5rem
|
||||
|
||||
nav
|
||||
display: flex
|
||||
margin: 2.5rem 0 0 0
|
||||
padding: 1rem .5rem
|
||||
border-top-right-radius: 0
|
||||
border-top-left-radius: 0
|
||||
border-bottom-left-radius: 50px
|
||||
border-bottom-right-radius: 0
|
||||
background: transparent
|
||||
border: 1px solid transparent
|
||||
|
||||
a
|
||||
font-size: 1rem
|
||||
font-weight: bold
|
||||
margin: 0 .8rem
|
||||
|
||||
&.desk
|
||||
.sub-nav
|
||||
top: 1.5rem
|
||||
right: 2%
|
||||
background-color: transparent
|
||||
background-image: linear-gradient(to bottom, transparent 0%, white 15%)
|
||||
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@ -63,6 +63,14 @@ export const i18nPages = {
|
||||
es: '/sectores/escuelas',
|
||||
tr: '/sektorler/okullar'
|
||||
},
|
||||
'sectors-film': {
|
||||
de: '/branchen/film-und-fernsehen',
|
||||
en: '/sectors/film-and-media',
|
||||
fr: '/secteurs/film-et-medias',
|
||||
it: '/settori/film-e-media',
|
||||
es: '/sectores/cine-y-medios',
|
||||
tr: '/sektorler/film-ve-medya'
|
||||
},
|
||||
references: {
|
||||
de: '/referenzen',
|
||||
en: '/references',
|
||||
|
||||
@ -2,16 +2,19 @@
|
||||
"welcome": "Willkommen",
|
||||
"districtSta": "Landkreis Starnberg",
|
||||
"upperBavaria": "Oberbayern",
|
||||
"webagency": "Webagentur",
|
||||
"services": "Leistungen",
|
||||
"sectors": "Branchen",
|
||||
"menuSchools": "Webseiten für Schulen",
|
||||
"menuAi": "KI-kompatible Webseiten",
|
||||
"menuCms": "Headless Content-Management-System (CMS)",
|
||||
"menuAccessibility": "Barrierefeies Webdesign",
|
||||
"menuSEO": "Suchmaschinen-Optimierung (SEO)",
|
||||
"contact": "Kontakt",
|
||||
"references": "Referenzen",
|
||||
"menu": {
|
||||
"webagency": "Webagentur",
|
||||
"services": "Leistungen",
|
||||
"sectors": "Branchen",
|
||||
"menuCms": "Headless Content-Management-System (CMS)",
|
||||
"menuSEO": "Suchmaschinen-Optimierung (SEO)",
|
||||
"menuAccessibility": "Barrierefreies Webdesign",
|
||||
"menuAi": "KI-kompatible Webseiten",
|
||||
"menuSchools": "Webseiten für Schulen",
|
||||
"menuFilm": "Webauftritte für Film und Fernsehen",
|
||||
"references": "Referenzen",
|
||||
"contact": "Kontakt"
|
||||
},
|
||||
"referenceoverview": "Referenzübersicht",
|
||||
"imprint": "Impressum",
|
||||
"privacy": "Datenschutz",
|
||||
|
||||
@ -65,7 +65,7 @@ main
|
||||
font-size: 1.1rem
|
||||
line-height: 150%
|
||||
|
||||
b, bold, strong
|
||||
b, bold, strong, .bold
|
||||
font-family: 'Mainfont-Bold'
|
||||
|
||||
u
|
||||
|
||||
303
pages/sectors/film/index.vue
Normal file
303
pages/sectors/film/index.vue
Normal file
@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div class="filmPage">
|
||||
<HeroBox
|
||||
image="/uploads/filmhintergrundcollage_a0c4b0e99d.webp"
|
||||
:aria-label="'Hero-Bild für Webseiten in der Filmbranche'"
|
||||
overlay-image="/uploads/scheinwerfe_b884e87a2f.webp"
|
||||
overlay-alt-text="ki roboter fliegt"
|
||||
:overlay-width="'15%'"
|
||||
:overlay-position="{ top: '25%', right: '10vw' }"
|
||||
:dark-background="true"
|
||||
>
|
||||
<h1>Webseiten für die Film- & Fernsehbranche</h1>
|
||||
<h2>Für Schauspieler, Regisseure, Produktionsfirmen und Filmtechnik-Profis</h2>
|
||||
<h3>Einfach zu bedienende Webseiten, die Ihre Arbeit ins richtige Licht rücken</h3>
|
||||
<button class="whiteBtn" role="button" @click.prevent="toggleContactBubble">Erstkontakt – ganz ohne Drehbuch</button>
|
||||
</HeroBox>
|
||||
|
||||
<section class="visibility">
|
||||
<NuxtImg
|
||||
provider="strapi"
|
||||
src="/uploads/musician_704e5a3556.webp"
|
||||
alt="Fans"
|
||||
class="background-image"
|
||||
/>
|
||||
<div class="container-10">
|
||||
<!-- <NuxtImg
|
||||
provider="strapi"
|
||||
src="/uploads/scheinwerfe_b884e87a2f.webp"
|
||||
alt="Licht"
|
||||
class="contentImage"
|
||||
/> -->
|
||||
<div class="textBox">
|
||||
<h2>Sichtbarkeit - nicht nur vor der Kamera</h2>
|
||||
<h3>Ihr Erfolg beginnt mit Ihrer Reichweite im Netz</h3>
|
||||
<p>
|
||||
Wer bei Google & Co. sichtbar ist, bekommt auch die Aufmerksamkeit, die er verdient.
|
||||
<br>Wir sorgen dafür, dass Ihre Webseite technisch
|
||||
top optimiert und inhaltlich präzise auf Ihre Zielgruppe ausgerichtet ist. Damit Casting-Agenten,
|
||||
Produzenten und andere Player der Medienbranche Sie auch online finden.
|
||||
</p>
|
||||
<p>
|
||||
Egal ob Schauspieler, Regisseur oder Tontechniker wir stellen Sie <b>online ins Rampenlicht</b>.
|
||||
</p>
|
||||
<p class="pt-3"><NuxtLinkLocale class="btn" to="services-seo">Erfahren Sie mehr über Suchmaschinen-Optimierung</NuxtLinkLocale></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="references">
|
||||
<div class="spotlight"></div>
|
||||
<div class="spotlight strong"></div>
|
||||
|
||||
<div class="container-10">
|
||||
<h2>Referenzen aus der Filmbranche</h2>
|
||||
<div class="reference-content">
|
||||
<div class="reference-text">
|
||||
<NuxtImg
|
||||
src="/uploads/MBH_Home_3ef5ee1437.png"
|
||||
alt="Webseite von herbX"
|
||||
provider="strapi"
|
||||
class="ref-img"
|
||||
/>
|
||||
<h3><a href="#" target="_blank" rel="noopener noreferrer">Michael Bully Herbig – Schauspieler & Regisseur</a></h3>
|
||||
<p>Ein kreativer Kopf mit großer Reichweite. Wir haben seine Künstlerseite technisch und optisch auf den Punkt gebracht.
|
||||
Modern, dynamisch und benutzerfreundlich.</p>
|
||||
<a href="/projekt/relaunch-kuenstlerseite-von-michael-bully-herbig" class="btn whiteBtn">Zum Projekt</a>
|
||||
</div>
|
||||
<div class="reference-text">
|
||||
<NuxtImg
|
||||
src="/uploads/HBX_Home_692e6e9bc5.png"
|
||||
alt="Webseite von herbX"
|
||||
provider="strapi"
|
||||
class="ref-img"
|
||||
/>
|
||||
<h3><a href="#" target="_blank" rel="noopener noreferrer">Produktionsfirma herbX</a></h3>
|
||||
<p>Professionelle Produktionsfirma mit Anspruch auf Performance und Design. Für herbX haben wir eine Webseite gebaut,
|
||||
die Flexibilität und einfache Content-Pflege ermöglicht.</p>
|
||||
<a href="/projekt/relaunch-herb-x-film-webauftritt" class="btn whiteBtn">Zum Projekt</a>
|
||||
</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="headlessCMS">
|
||||
<div class="container">
|
||||
<NuxtImg
|
||||
src="/uploads/CMS_easy_d0674d59cc.webp"
|
||||
provider="strapi"
|
||||
alt="Headless CMS für Filmbranche"
|
||||
width="500"
|
||||
height="350"
|
||||
/>
|
||||
<div class="textBox">
|
||||
<h2>Pflegeleicht und professionell</h2>
|
||||
<h3>Dank einer individuell anpassbaren und benutzerfreundlichen Verwaltungs-Oberfläche (CMS) für Ihre Texte, Fotos und Videos</h3>
|
||||
|
||||
<p>
|
||||
Ob neue Rollen, Auszeichnungen, Trailer, Pressefotos oder aktuelle Projekte, erfolgreiche Karrieren entwickeln sich weiter. Damit Ihre Webseite das widerspiegelt, richten wir eine benutzerfreundliche Verwaltungsoberfläche ein, mit der Sie Inhalte ganz einfach selbst pflegen können.
|
||||
Diese Oberfläche ist unabhängig vom Design – so bleibt Ihre Seite immer optisch stimmig, selbst wenn Sie Texte, Fotos oder Videos austauschen. Es kann nichts „kaputtgehen“.
|
||||
</p>
|
||||
<p>
|
||||
Auf Wunsch übernehmen wir auch die Pflege für Sie, so dass Ihre Seite immer aktuell bleibt, ohne dass Sie sich selbst darum kümmern müssen.
|
||||
</p>
|
||||
<p class="pt-3"><NuxtLinkLocale class="btn" to="services-cms">Mehr zu unserem Content-Management-System</NuxtLinkLocale></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta">
|
||||
<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>
|
||||
<NuxtImg
|
||||
provider="strapi"
|
||||
src="/uploads/rolle_7efa6a471f.webp"
|
||||
alt="Fans"
|
||||
class="background-image"
|
||||
/>
|
||||
<CallToActionBox
|
||||
headline="Na? – Schon ganz von der Rolle?"
|
||||
text="Dann wird’s Zeit für eine Website mit professioneller Regie und einem Content-Management-System, das keine Szene macht."
|
||||
button-text="Licht, Kamera, Kontakt!"
|
||||
/>
|
||||
<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/film-und-fernsehen"
|
||||
headline="Häufig gestellte Fragen zur Webseite für die Filmbranche"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import { useMainStore } from '@/stores/main'
|
||||
|
||||
const mainStore = useMainStore()
|
||||
|
||||
const toggleContactBubble = () => {
|
||||
mainStore.toggleContactBubble()
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
@keyframes moveSpotlight
|
||||
0%
|
||||
transform: translate(-30%, -30%) rotate(0deg)
|
||||
15%
|
||||
transform: translate(50%, 60%) rotate(5deg)
|
||||
30%
|
||||
transform: translate(0%, 30%) rotate(-3deg)
|
||||
45%
|
||||
transform: translate(70%, -20%) rotate(4deg)
|
||||
60%
|
||||
transform: translate(-20%, 50%) rotate(-5deg)
|
||||
75%
|
||||
transform: translate(30%, 0%) rotate(2deg)
|
||||
90%
|
||||
transform: translate(-10%, -40%) rotate(-4deg)
|
||||
100%
|
||||
transform: translate(20%, 20%) rotate(0deg)
|
||||
|
||||
|
||||
.filmPage
|
||||
overflow-x: hidden
|
||||
|
||||
.visibility
|
||||
align-items: center
|
||||
margin-bottom: 0
|
||||
padding-bottom: 30%
|
||||
.background-image
|
||||
width: 100%
|
||||
height: auto
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: 0
|
||||
.textBox
|
||||
p
|
||||
line-height: 1.6
|
||||
margin-bottom: 1rem
|
||||
.contentImage
|
||||
width: 20%
|
||||
float: right
|
||||
|
||||
.references
|
||||
position: relative
|
||||
overflow: hidden
|
||||
color: white
|
||||
padding: 2rem 0 5rem 0
|
||||
text-align: center
|
||||
background: linear-gradient(to bottom, #000000, #022337)
|
||||
|
||||
margin-top: -5px
|
||||
.spotlight
|
||||
position: absolute
|
||||
top: -50%
|
||||
left: -50%
|
||||
width: 130%
|
||||
height: 130%
|
||||
background: radial-gradient(ellipse 30% 20% at center, rgba(255,245,200,0.4) 0%, rgba(255,245,200,0) 100%)
|
||||
filter: blur(100px) brightness(1.5)
|
||||
mix-blend-mode: screen
|
||||
animation: moveSpotlight 16s ease-in-out infinite alternate
|
||||
pointer-events: none
|
||||
z-index: 1
|
||||
.spotlight.strong
|
||||
background: radial-gradient(ellipse at center, rgba(255,245,200,0.25) 0%, rgba(255,245,200,0) 40%)
|
||||
filter: blur(20px)
|
||||
z-index: 2
|
||||
|
||||
a
|
||||
color: white
|
||||
text-decoration: none
|
||||
font-family: 'Mainfont-Bold'
|
||||
.whiteBtn
|
||||
color: black !important
|
||||
|
||||
h2
|
||||
margin: 3rem auto
|
||||
font-family: 'Comfortaa'
|
||||
text-transform: uppercase
|
||||
letter-spacing: .15rem
|
||||
|
||||
h3, p
|
||||
margin-bottom: 1rem
|
||||
|
||||
.ref-img
|
||||
width: 80%
|
||||
max-width: 300px
|
||||
z-index: 4
|
||||
|
||||
.reference-content
|
||||
display: flex
|
||||
gap: 2rem
|
||||
justify-content: center
|
||||
flex-wrap: nowrap
|
||||
|
||||
.reference-text
|
||||
flex: 1 1 45%
|
||||
text-align: center
|
||||
|
||||
@media (max-width: $breakPointMD)
|
||||
.reference-content
|
||||
flex-direction: column
|
||||
|
||||
.reference-text
|
||||
flex-basis: 100%
|
||||
margin-bottom: 1.5rem
|
||||
|
||||
.headlessCMS
|
||||
padding: 2rem 0 0 0
|
||||
img
|
||||
float: right
|
||||
width: 90%
|
||||
max-width: 300px
|
||||
height: auto
|
||||
margin: 0 0 1rem 1rem
|
||||
|
||||
.cta
|
||||
position: relative
|
||||
overflow: hidden
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: bottom
|
||||
padding: 0 auto 6rem auto
|
||||
text-align: center
|
||||
color: black
|
||||
|
||||
.background-image
|
||||
position: absolute
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
object-fit: cover
|
||||
object-position: bottom center
|
||||
z-index: 0
|
||||
.ctaBox
|
||||
z-index: 1
|
||||
margin-bottom: 30%
|
||||
margin-top: 1rem
|
||||
|
||||
|
||||
@media (max-width: $breakPointMD)
|
||||
section.visibility,
|
||||
section.headlessCMS
|
||||
grid-template-columns: 1fr
|
||||
text-align: center
|
||||
.textBox
|
||||
margin-top: 1rem
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user