273 lines
8.7 KiB
Vue
273 lines
8.7 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 btn pinkBtn"
|
||
role="button"
|
||
aria-label="Kontaktformular öffnen"
|
||
@click.prevent="toggleContactBubble"
|
||
>
|
||
{{ $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"
|
||
/>
|
||
</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="btn pinkBtn mt-4"
|
||
role="button"
|
||
aria-label="Kontaktformular öffnen"
|
||
@click.prevent="toggleContactBubble"
|
||
>
|
||
{{ $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="btn mintBtn"
|
||
role="button"
|
||
aria-label="Zum Angebot für Kreative"
|
||
@click.prevent="navigateTo(designerLink)"
|
||
>
|
||
{{ $t('pages.webagency.grafiker.button') }}
|
||
</button>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</template>
|
||
|
||
|
||
<script setup>
|
||
definePageMeta({
|
||
sitemap: {
|
||
lastmod: '2025-06-23', // ISO 8601 – oder dynamisch generieren
|
||
changefreq: 'monthly', // optional
|
||
priority: 0.8 // optional
|
||
}
|
||
})
|
||
|
||
import { storeToRefs } from "pinia";
|
||
import { useMainStore } from "@/stores/main";
|
||
import { computed } from "vue";
|
||
import { useRouter } from "nuxt/app";
|
||
|
||
import { i18nPages } from '@/i18n/i18n-pages'
|
||
import { useI18n } from 'vue-i18n'
|
||
const { locale } = useI18n()
|
||
const designerLink = i18nPages.designer?.[locale.value] || '/designer'
|
||
|
||
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/ammersee_3738cd4e53.webp')
|
||
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
|
||
img
|
||
animation: bubble-wobble 25s infinite ease alternate
|
||
@media(max-width: $breakPointSM)
|
||
width: 80vw
|
||
margin-left: -5vw
|
||
margin-bottom: 5vw
|
||
float: none
|
||
height: 70vw
|
||
max-height: 400px
|
||
clip-path: none
|
||
img
|
||
border-radius: $loopShape
|
||
margin-left: 5vw
|
||
.teamContainer
|
||
width: 100%
|
||
padding-left: calc(2vw + 5vw)
|
||
@media(max-width: $breakPointSM)
|
||
padding-left: 0
|
||
margin-top: 6vh
|
||
h2
|
||
color: darken($lightgrey, 30%)
|
||
font-size: .9rem
|
||
margin-bottom: 1rem
|
||
h3
|
||
font-size: 2rem
|
||
margin-bottom: .1rem
|
||
margin-top: 1rem
|
||
p
|
||
font-size: 1.2rem
|
||
|
||
.smallFont
|
||
font-size: 1.2rem
|
||
font-family: 'Mainfont-Bold'
|
||
.smaller
|
||
font-size: 1rem
|
||
.quotation
|
||
background-color: $lightgrey
|
||
padding: 2.5rem 4rem 2rem 6rem
|
||
border-radius: 1rem
|
||
font-size: 1.2rem
|
||
position: relative
|
||
margin-top: 2rem
|
||
p
|
||
font-size: 1.2rem
|
||
@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
|
||
.supheadlineMint
|
||
color: darken($primaryColor, 10%)
|
||
</style> |