303 lines
11 KiB
Vue
303 lines
11 KiB
Vue
<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>
|
||
|