webagency
This commit is contained in:
parent
34b6501b7d
commit
95ecf79b92
@ -52,6 +52,7 @@
|
||||
"faqsDefault": "Häufig gestellte Fragen (FAQs)",
|
||||
"btnDefault": "Sprechen Sie uns gerne an!"
|
||||
},
|
||||
"pages": {
|
||||
"home": {
|
||||
"heroBox": {
|
||||
"h1": "Ihre Agentur für individuelles Webdesign und professionelle Webentwicklung",
|
||||
@ -103,5 +104,34 @@
|
||||
"faqArea": {
|
||||
"headline": "Hier finden Sie Antworten auf häufig gestellte Fragen (FAQs) rund ums Thema Website-Erstellung mit digimedialoop"
|
||||
}
|
||||
},
|
||||
"webagency": {
|
||||
"hero": {
|
||||
"title": "Ihre Webagentur für strategische Webentwicklung und funktionales Webdesign in Herrsching am Ammersee",
|
||||
"subtitle": "Wir entwickeln Webseiten, die aus Besuchern Kunden machen!",
|
||||
"text1": "Wir stehen für professionelle, innovative und strategische Weblösungen und kombinieren technisches Know-how mit einem tiefen Verständnis für digitale Kommunikation, um Unternehmen online erfolgreich zu positionieren",
|
||||
"text2": "Unser Ansatz ist immer individuell: Jedes Projekt wird mit Sorgfalt, Weitblick und den neuesten Technologien realisiert. Dabei setzen wir auf eine enge Zusammenarbeit und maßgeschneiderte Lösungen, die zu unseren Kunden passen. Wir begleiten Unternehmen aus unterschiedlichsten Branchen – von kleinen Betrieben bis hin zu größeren Firmen – auf ihrem Weg zu einer erfolgreichen Online-Präsenz.",
|
||||
"text3": "Lassen Sie uns gemeinsam Ihre digitale Präsenz optimieren!",
|
||||
"button": "Ihr Kontakt zu uns!"
|
||||
},
|
||||
"team": {
|
||||
"title": "Ihre Ansprechpartnerin bei digimedialoop",
|
||||
"name": "Sabrina Hennrich",
|
||||
"position": "Beratung | Konzeption | Design | Entwicklung",
|
||||
"text1": "Mit über 20 Jahren Erfahrung im Webdesign ist sie noch immer Webentwicklerin aus purer Leidenschaft!",
|
||||
"text2": "Nach ihrem Abschluss als Betriebswirtin war sie viele Jahre im Marketing tätig, bevor sie ihr Wissen mit einem Psychologie-Studium vertiefte.",
|
||||
"text3": "Diese Kombination aus betriebswirtschaftlichem Know-how, strategischer Marketingerfahrung und psychologischem Verständnis ermöglicht es ihr, digitale Lösungen zu entwickeln, die nicht nur ästhetisch ansprechend, sondern auch zielgruppenwirksam und wirtschaftlich durchdacht sind.",
|
||||
"text4": "Ergänzend dazu ist sie seit 2019 auch Certified Expert User Experience & Usability, was ihr fundierte Kenntnisse in nutzerzentriertem Design und optimaler Usability verleiht.",
|
||||
"quote": "Offenheit, Transparenz und Fairness sind mir bei der Zusammenarbeit mit meinen Kunden und Partnern enorm wichtig. Ich empfehle nur, was mir sinnvoll erscheint und zu meinen Kunden passt. Dafür nehme ich mir gerne die Zeit für eine gründliche Analyse der Bedürfnisse meiner Kunden bzw. die deren Zielgruppe.",
|
||||
"button": "Sprechen Sie mich gerne an!"
|
||||
},
|
||||
"grafiker": {
|
||||
"supheadline": "digimedialoop für Kreative",
|
||||
"title": "Du bist Grafikdesigner oder Mediengestalter?",
|
||||
"button": "Hier unser Angebot für Dich"
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -1,18 +1,6 @@
|
||||
import { defineNuxtConfig } from 'nuxt/config'
|
||||
import { i18nPages } from './i18n/i18n-pages'
|
||||
|
||||
// Hilfsfunktion, um Objekt mit locales auf reine Strings zu mappen
|
||||
function flattenPages(pagesObj: Record<string, Record<string, string>>) {
|
||||
const result: Record<string, string> = {}
|
||||
for (const pageKey in pagesObj) {
|
||||
for (const locale in pagesObj[pageKey]) {
|
||||
// z.B. 'index.de' = '/'
|
||||
result[`${pageKey}.${locale}`] = pagesObj[pageKey][locale]
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
export default defineNuxtConfig({
|
||||
app: {
|
||||
head: {
|
||||
@ -94,7 +82,7 @@ export default defineNuxtConfig({
|
||||
{ code: 'tr', name: 'Türkçe', file: 'tr.json' }
|
||||
],
|
||||
customRoutes: 'config',
|
||||
pages: flattenPages(i18nPages),
|
||||
pages: i18nPages,
|
||||
bundle: {
|
||||
optimizeTranslationDirective: false
|
||||
}
|
||||
|
||||
@ -14,9 +14,9 @@
|
||||
fetchpriority="high"
|
||||
/>
|
||||
<div class="container-10">
|
||||
<h1 id="hero-heading">{{ $t('home.heroBox.h1') }}</h1>
|
||||
<h2>{{ $t('home.heroBox.h2') }}</h2>
|
||||
<h3>{{ $t('home.heroBox.h3') }}</h3>
|
||||
<h1 id="hero-heading">{{ $t('pages.home.heroBox.h1') }}</h1>
|
||||
<h2>{{ $t('pages.home.heroBox.h2') }}</h2>
|
||||
<h3>{{ $t('pages.home.heroBox.h3') }}</h3>
|
||||
</div>
|
||||
<!-- Nach dem Container: Spiegelwelle unten -->
|
||||
<svg class="sectionWave wave-bottom" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20" aria-hidden="true">
|
||||
@ -27,15 +27,15 @@
|
||||
|
||||
<section aria-labelledby="solution-title">
|
||||
<div class="container-10 webStrategy">
|
||||
<h2 id="solution-title">{{ $t('home.solution.title') }}</h2>
|
||||
<h3>{{ $t('home.solution.teaser') }}</h3>
|
||||
<p>{{ $t('home.solution.text') }}</p>
|
||||
<h2 id="solution-title">{{ $t('pages.home.solution.title') }}</h2>
|
||||
<h3>{{ $t('pages.home.solution.teaser') }}</h3>
|
||||
<p>{{ $t('pages.home.solution.text') }}</p>
|
||||
<button
|
||||
class="mintBtn"
|
||||
role="button"
|
||||
aria-describedby="solution-title"
|
||||
aria-label="headless CMS Info" @click="navigateToArticle">
|
||||
{{ $t('home.solution.buttonText') }}
|
||||
{{ $t('pages.home.solution.buttonText') }}
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
@ -49,13 +49,13 @@
|
||||
<div class="row">
|
||||
<div class="col-md-4"/>
|
||||
<div class="col-md-8 pt-5 pb-5">
|
||||
<h2 id="invitation-title">{{ $t('home.invitation.title') }}</h2>
|
||||
<h3>{{ $t('home.invitation.teaser') }}</h3>
|
||||
<h2 id="invitation-title">{{ $t('pages.home.invitation.title') }}</h2>
|
||||
<h3>{{ $t('pages.home.invitation.teaser') }}</h3>
|
||||
<button
|
||||
class="pinkBtn" role="button"
|
||||
aria-describedby="invitation-title"
|
||||
aria-label="Kontaktformular öffnen"
|
||||
@click.prevent="toggleContactBubble">{{ $t('home.invitation.button') }}</button>
|
||||
@click.prevent="toggleContactBubble">{{ $t('pages.home.invitation.button') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -68,7 +68,7 @@ class="pinkBtn" role="button"
|
||||
<section class="canDo" aria-labelledby="canDo-section-title">
|
||||
<div class="container">
|
||||
<h2 id="canDo-section-title" class="text-center">
|
||||
{{ $t('home.canDo.title') }}
|
||||
{{ $t('pages.home.canDo.title') }}
|
||||
</h2>
|
||||
|
||||
<div class="canDoGrid">
|
||||
@ -110,9 +110,9 @@ class="pinkBtn" role="button"
|
||||
<div class="container-10 pb-5">
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="col-md-6">
|
||||
<h2>{{ $t('home.compBox.title') }}</h2>
|
||||
<h3>{{ $t('home.compBox.subtitle') }}</h3>
|
||||
<p>{{ $t('home.compBox.text') }}</p>
|
||||
<h2>{{ $t('pages.home.compBox.title') }}</h2>
|
||||
<h3>{{ $t('pages.home.compBox.subtitle') }}</h3>
|
||||
<p>{{ $t('pages.home.compBox.text') }}</p>
|
||||
</div>
|
||||
<div class="col-md-6 mt-5 pt-4 pb-4">
|
||||
<ImageComparisonSlider
|
||||
@ -130,16 +130,16 @@ class="pinkBtn" role="button"
|
||||
|
||||
<section>
|
||||
<div class="container-10 text-center py-5">
|
||||
<h3>{{ $t('home.finalCall.title') }}</h3>
|
||||
<h3>{{ $t('pages.home.finalCall.title') }}</h3>
|
||||
<button
|
||||
class="pinkBtn mt-3"
|
||||
role="button"
|
||||
:aria-label="$t('home.finalCall.button')"
|
||||
@click.prevent="toggleContactBubble">{{ $t('home.finalCall.button') }}</button>
|
||||
:aria-label="$t('pages.home.finalCall.button')"
|
||||
@click.prevent="toggleContactBubble">{{ $t('pages.home.finalCall.button') }}</button>
|
||||
</div>
|
||||
</section>
|
||||
<MarqueeBanner :items="logoItems" :logo-height="60" :title="$t('home.marqueeBanner.title')" />
|
||||
<FAQArea page-link="/" :headline="$t('home.faqArea.headline')" />
|
||||
<MarqueeBanner :items="logoItems" :logo-height="60" :title="$t('pages.home.marqueeBanner.title')" />
|
||||
<FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@ -179,26 +179,26 @@ const canDoItems = [
|
||||
{
|
||||
img: '/uploads/website_Erfolg_Marketing_3c36a43ba5.png',
|
||||
alt: 'Website Erfolg Marketing',
|
||||
title: 'home.canDo.item1.title',
|
||||
text: 'home.canDo.item1.text',
|
||||
title: 'pages.home.canDo.item1.title',
|
||||
text: 'pages.home.canDo.item1.text',
|
||||
},
|
||||
{
|
||||
img: '/uploads/Kundenbindung_45d45ef3fc.png',
|
||||
alt: 'Kundenbindung Strategie',
|
||||
title: 'home.canDo.item2.title',
|
||||
text: 'home.canDo.item2.text',
|
||||
title: 'pages.home.canDo.item2.title',
|
||||
text: 'pages.home.canDo.item2.text',
|
||||
},
|
||||
{
|
||||
img: '/uploads/Screen_Shot_Tool_20250228133408_beb2a11980.png',
|
||||
alt: 'Screen Tool Beispiel 1',
|
||||
title: 'home.canDo.item3.title',
|
||||
text: 'home.canDo.item3.text',
|
||||
title: 'pages.home.canDo.item3.title',
|
||||
text: 'pages.home.canDo.item3.text',
|
||||
},
|
||||
{
|
||||
img: '/uploads/Screen_Shot_Tool_20250228133812_0a20d4320e.png',
|
||||
alt: 'Screen Tool Beispiel 2',
|
||||
title: 'home.canDo.item4.title',
|
||||
text: 'home.canDo.item4.text',
|
||||
title: 'pages.home.canDo.item4.title',
|
||||
text: 'pages.home.canDo.item4.text',
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
@ -1,18 +1,251 @@
|
||||
<template>
|
||||
<section>
|
||||
<div class="container-10">
|
||||
<h1>{{ $t('webagency') }}</h1>
|
||||
<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>
|
||||
definePageMeta({
|
||||
layout: 'default'
|
||||
})
|
||||
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>
|
||||
Loading…
x
Reference in New Issue
Block a user