251 lines
8.2 KiB
Vue
251 lines
8.2 KiB
Vue
<template>
|
|
<div>
|
|
<section class="webagentur">
|
|
<div class="container">
|
|
<div class="contentBox topSpace">
|
|
<h1>{{ $t('pages.webagency.hero.title') }}</h1>
|
|
<h2>{{ $t('pages.webagency.hero.subtitle') }}</h2>
|
|
<p v-html="$t('pages.webagency.hero.text1')" />
|
|
<p v-html="$t('pages.webagency.hero.text2')" />
|
|
<p v-html="$t('pages.webagency.hero.text3')" />
|
|
<button
|
|
class="my-4 pinkBtn"
|
|
@click.prevent="toggleContactBubble"
|
|
role="button"
|
|
aria-label="Kontaktformular öffnen"
|
|
>
|
|
{{ $t('pages.webagency.hero.button') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="team">
|
|
<div class="container">
|
|
<div class="curve-shape" role="img" :aria-label="`Profilbild von ${companyinfo?.name || 'Ansprechpartnerin'}`">
|
|
<NuxtImg
|
|
v-if="profileImageUrl"
|
|
:src="profileImageUrl"
|
|
provider="strapi"
|
|
:alt="`Profilbild von ${companyinfo?.name || 'Ansprechpartnerin'}`"
|
|
sizes="sm:100vw md:50vw lg:30vw"
|
|
format="webp"
|
|
class="rounded-full w-full h-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div class="teamContainer">
|
|
<h2>{{ $t('pages.webagency.team.title') }}</h2>
|
|
<h3>{{ $t('pages.webagency.team.name') }}</h3>
|
|
<p class="smallFont">{{ $t('pages.webagency.team.position') }}</p>
|
|
|
|
<div class="socialBox" aria-label="Social Media Profile">
|
|
<a
|
|
class="socialIcon"
|
|
href="https://www.xing.com/profile/Sabrina_Hennrich2"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Profil auf Xing"
|
|
>
|
|
<svg viewBox="0 0 384 512">
|
|
<path d="M162.7 210c-1.8 3.3-25.2 44.4-70.1 123.5-4.9 8.3-10.8 12.5-17.7 12.5H9.8c-7.7 0-12.1-7.5-8.5-14.4l69-121.3c.2 0 .2-.1 0-.3l-43.9-75.6c-4.3-7.8 .3-14.1 8.5-14.1H100c7.3 0 13.3 4.1 18 12.2l44.7 77.5zM382.6 46.1l-144 253v.3L330.2 466c3.9 7.1 .2 14.1-8.5 14.1h-65.2c-7.6 0-13.6-4-18-12.2l-92.4-168.5c3.3-5.8 51.5-90.8 144.8-255.2 4.6-8.1 10.4-12.2 17.5-12.2h65.7c8 0 12.3 6.7 8.5 14.1z"/>
|
|
</svg>
|
|
</a>
|
|
<a
|
|
class="socialIcon"
|
|
href="https://de.linkedin.com/in/sabrina-hennrich-3022133"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label="Profil auf LinkedIn"
|
|
>
|
|
<svg viewBox="0 0 448 512">
|
|
<path d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z"/>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<p>{{ $t('pages.webagency.team.text1') }}</p>
|
|
<p class="smaller">{{ $t('pages.webagency.team.text2') }}</p>
|
|
<p class="smaller">{{ $t('pages.webagency.team.text3') }}</p>
|
|
<p class="smaller">{{ $t('pages.webagency.team.text4') }}</p>
|
|
|
|
<div class="quotation" role="blockquote" aria-label="Zitat der Ansprechpartnerin">
|
|
<p v-html="$t('pages.webagency.team.quote')" />
|
|
</div>
|
|
|
|
<button
|
|
class="pinkBtn mt-4"
|
|
@click.prevent="toggleContactBubble"
|
|
role="button"
|
|
aria-label="Kontaktformular öffnen"
|
|
>
|
|
{{ $t('pages.webagency.team.button') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grafiker">
|
|
<div class="container">
|
|
<p class="supheadlineMint">{{ $t('pages.webagency.grafiker.supheadline') }}</p>
|
|
<h2>{{ $t('pages.webagency.grafiker.title') }}</h2>
|
|
<button
|
|
class="mintBtn"
|
|
@click.prevent="navigateTo('/webentwicklung-fuer-designer-und-mediengestalter')"
|
|
role="button"
|
|
aria-label="Zum Angebot für Kreative"
|
|
>
|
|
{{ $t('pages.webagency.grafiker.button') }}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import { storeToRefs } from "pinia";
|
|
import { useMainStore } from "@/stores/main";
|
|
import { computed } from "vue";
|
|
import { useRouter } from "nuxt/app";
|
|
|
|
const mainStore = useMainStore();
|
|
const { companyinfo } = storeToRefs(mainStore);
|
|
const toggleContactBubble = () => mainStore.toggleContactBubble();
|
|
|
|
const profileImageUrl = computed(() => companyinfo.value?.profileImage?.data?.attributes?.url || null);
|
|
|
|
const navigateTo = useRouter().push;
|
|
</script>
|
|
|
|
<style lang="sass">
|
|
.webagentur
|
|
position: relative
|
|
overflow-x: hidden
|
|
overflow-y: hidden
|
|
&::after
|
|
content: ''
|
|
position: absolute
|
|
top: 5%
|
|
right: -36vw
|
|
width: 65vw
|
|
height: 90%
|
|
min-height: 550px
|
|
max-height: 800px
|
|
background-image: url('https://strapi.digimedialoop.de/uploads/photo1717674388_9910623c8e.jpeg')
|
|
background-repeat: no-repeat
|
|
background-position: center right
|
|
background-size: cover
|
|
border-radius: 42% 49% 52% 48% / 53% 38% 62% 47%
|
|
animation: bubble-wobble 25s infinite ease alternate, gradient-animation 70s infinite alternate ease-in-out
|
|
box-shadow: $innerShadow
|
|
@media(max-width: $breakPointMD)
|
|
right: -50vw
|
|
.contentBox
|
|
width: 55vw
|
|
@media(max-width: $breakPointMD)
|
|
width: 68vw
|
|
|
|
.team
|
|
margin-top: 10vh
|
|
|
|
.miniBtn
|
|
font-size: .9rem
|
|
padding: .2rem .5rem
|
|
background-color: $lightgrey
|
|
border: none
|
|
text-transform: none
|
|
.socialBox
|
|
display: flex
|
|
justify-content: left
|
|
align-items: center
|
|
gap: 1rem
|
|
margin: 1rem auto
|
|
.socialIcon
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
width: 2.2rem
|
|
height: 1.8rem
|
|
background-color: $beige
|
|
border-radius: $loopShape
|
|
transition: .5s
|
|
cursor: pointer
|
|
&:hover
|
|
background-color: $darkgrey
|
|
transform: scale(1.1)
|
|
svg
|
|
path
|
|
fill: white
|
|
svg
|
|
width: 1rem
|
|
height: 1rem
|
|
path
|
|
fill: $darkgrey
|
|
.curve-shape
|
|
float: left
|
|
shape-outside: ellipse(50% 50%) // Definiert den Textfluss um die Form
|
|
width: 50vw
|
|
height: 60vh
|
|
min-width: 300px // Mindestbreite, damit der Text nicht springt
|
|
min-height: 1px // Wichtig, damit `shape-outside` funktioniert!
|
|
max-height: 500px
|
|
margin-right: 5vw
|
|
margin-left: -35vw
|
|
clip-path: ellipse(50% 50%)
|
|
background-image: var(--background-image)
|
|
background-size: cover
|
|
background-repeat: no-repeat
|
|
border-radius: 50%
|
|
content: ''
|
|
display: block
|
|
@media(max-width: $breakPointSM)
|
|
width: 80vw
|
|
margin-left: -5vw
|
|
margin-bottom: 5vw
|
|
float: none
|
|
height: 70vw
|
|
max-height: 400px
|
|
clip-path: none
|
|
border-radius: $loopShape
|
|
.teamContainer
|
|
width: 100%
|
|
padding-left: calc(2vw + 5vw)
|
|
@media(max-width: $breakPointSM)
|
|
padding-left: 0
|
|
h2
|
|
color: lighten($darkgrey, 40%)
|
|
font-size: 1.2rem
|
|
margin-bottom: 1rem
|
|
h3
|
|
font-size: 2rem
|
|
margin-bottom: .1rem
|
|
margin-top: 1rem
|
|
.smallFont
|
|
font-size: 1.1rem
|
|
font-family: 'Mainfont-Bold'
|
|
.smaller
|
|
font-size: .9rem
|
|
.quotation
|
|
background-color: $lightgrey
|
|
padding: 2.5rem 4rem 2rem 6rem
|
|
border-radius: 1rem
|
|
font-size: 1rem
|
|
position: relative
|
|
margin-top: 2rem
|
|
p
|
|
font-size: 1rem
|
|
@media(max-width: $breakPointMD)
|
|
padding: 5rem 2rem 2rem 2rem
|
|
hyphens: auto
|
|
&::before
|
|
position: absolute
|
|
top: -.5rem
|
|
left: 1rem
|
|
content: '\275E'
|
|
font-size: 5rem
|
|
margin: 0 .5rem 0 0
|
|
color: white
|
|
.grafiker
|
|
padding-top: 5vh
|
|
</style> |