webagency
This commit is contained in:
parent
34b6501b7d
commit
95ecf79b92
@ -52,56 +52,86 @@
|
|||||||
"faqsDefault": "Häufig gestellte Fragen (FAQs)",
|
"faqsDefault": "Häufig gestellte Fragen (FAQs)",
|
||||||
"btnDefault": "Sprechen Sie uns gerne an!"
|
"btnDefault": "Sprechen Sie uns gerne an!"
|
||||||
},
|
},
|
||||||
"home": {
|
"pages": {
|
||||||
"heroBox": {
|
"home": {
|
||||||
"h1": "Ihre Agentur für individuelles Webdesign und professionelle Webentwicklung",
|
"heroBox": {
|
||||||
"h2": "Modulare Webseiten mit modernsten Technologien",
|
"h1": "Ihre Agentur für individuelles Webdesign und professionelle Webentwicklung",
|
||||||
"h3": "Höchste Performanz - schnell, effizient und zukunftssicher!"
|
"h2": "Modulare Webseiten mit modernsten Technologien",
|
||||||
},
|
"h3": "Höchste Performanz - schnell, effizient und zukunftssicher!"
|
||||||
"solution": {
|
|
||||||
"title": "Performance, KI-Kompatibilität & Barrierefreiheit",
|
|
||||||
"teaser": "Wir entwickeln maßgeschneiderte Webseiten auf Basis moderner JAMstack-Technologie, die perfekt auf Ihre Anforderungen abgestimmt sind.",
|
|
||||||
"text": "Durch die klare Trennung von Inhalt und Technik, unter Verwendung eines headless Content-Management-Systems wie Strapi, entstehen wartungsfreundliche, suchmaschinenoptimierte Lösungen, die nicht nur langfristig skalierbar sind, sondern auch Ihrem Team die Arbeit erleichtern. Inhalte lassen sich so ohne technische Hürden pflegen und neue Funktionen flexibel integrieren. Ganz ohne Plugin-Chaos oder Eingriffe ins Live-System. Dank sauberer semantischer Struktur sind unsere Lösungen zudem optimal auf AI-gestützte Suchsysteme vorbereitet und ermöglichen die einfache Integration in KI-gestützte Operator-Workflows.",
|
|
||||||
"buttonText": "Erfahren Sie mehr über Headless CMS"
|
|
||||||
},
|
|
||||||
"invitation": {
|
|
||||||
"title": "Ist Ihre Webseite bereit für die Zukunft?",
|
|
||||||
"teaser": "Wir zeigen Ihnen, wie Sie Ihre digitale Präsenz optimieren, Ihre Zielgruppe effektiv erreichen und langfristig von unseren skalierbaren, wartungsfreundlichen Lösungen profitieren können. Während einer kostenlosen Erstberatung erfahren Sie genau, welche Schritte notwendig sind, um Ihre Webseite in ein leistungsstarkes Marketing-Tool zu verwandeln.",
|
|
||||||
"button": "Kostenlose Erstberatung anfordern!"
|
|
||||||
},
|
|
||||||
"canDo": {
|
|
||||||
"title": "Nutzen auch Sie künftig das volle Potenzial Ihrer Webseite!",
|
|
||||||
"item1": {
|
|
||||||
"title": "Neukunden gewinnen und Umsatz steigern",
|
|
||||||
"text": "Machen Sie aus Besuchern zahlende Kunden! Mit einer klaren Strategie, überzeugendem Design und optimierter Nutzerführung wird Ihre Website zur Lead-Maschine."
|
|
||||||
},
|
},
|
||||||
"item2": {
|
"solution": {
|
||||||
"title": "Kunden und Mitglieder binden",
|
"title": "Performance, KI-Kompatibilität & Barrierefreiheit",
|
||||||
"text": "Stärken Sie die Beziehung zu Ihren Kunden! Mit wertvollen Inhalten, exklusiven Angeboten und interaktiven Funktionen bleibt Ihre Zielgruppe aktiv und engagiert."
|
"teaser": "Wir entwickeln maßgeschneiderte Webseiten auf Basis moderner JAMstack-Technologie, die perfekt auf Ihre Anforderungen abgestimmt sind.",
|
||||||
|
"text": "Durch die klare Trennung von Inhalt und Technik, unter Verwendung eines headless Content-Management-Systems wie Strapi, entstehen wartungsfreundliche, suchmaschinenoptimierte Lösungen, die nicht nur langfristig skalierbar sind, sondern auch Ihrem Team die Arbeit erleichtern. Inhalte lassen sich so ohne technische Hürden pflegen und neue Funktionen flexibel integrieren. Ganz ohne Plugin-Chaos oder Eingriffe ins Live-System. Dank sauberer semantischer Struktur sind unsere Lösungen zudem optimal auf AI-gestützte Suchsysteme vorbereitet und ermöglichen die einfache Integration in KI-gestützte Operator-Workflows.",
|
||||||
|
"buttonText": "Erfahren Sie mehr über Headless CMS"
|
||||||
},
|
},
|
||||||
"item3": {
|
"invitation": {
|
||||||
"title": "Mitarbeiter finden und begeistern",
|
"title": "Ist Ihre Webseite bereit für die Zukunft?",
|
||||||
"text": "Gewinnen Sie die richtigen Talente! Eine authentische Karriereseite mit klaren Benefits macht Ihr Unternehmen für Bewerber unwiderstehlich."
|
"teaser": "Wir zeigen Ihnen, wie Sie Ihre digitale Präsenz optimieren, Ihre Zielgruppe effektiv erreichen und langfristig von unseren skalierbaren, wartungsfreundlichen Lösungen profitieren können. Während einer kostenlosen Erstberatung erfahren Sie genau, welche Schritte notwendig sind, um Ihre Webseite in ein leistungsstarkes Marketing-Tool zu verwandeln.",
|
||||||
|
"button": "Kostenlose Erstberatung anfordern!"
|
||||||
},
|
},
|
||||||
"item4": {
|
"canDo": {
|
||||||
"title": "Verwaltungs-Aufwand reduzieren",
|
"title": "Nutzen auch Sie künftig das volle Potenzial Ihrer Webseite!",
|
||||||
"text": "Weniger Rückfragen – mehr Effizienz! Durch klare Informationen und digitale Prozesse auf Ihrer Website sparen Sie Zeit, Kosten und entlasten Ihr Team."
|
"item1": {
|
||||||
|
"title": "Neukunden gewinnen und Umsatz steigern",
|
||||||
|
"text": "Machen Sie aus Besuchern zahlende Kunden! Mit einer klaren Strategie, überzeugendem Design und optimierter Nutzerführung wird Ihre Website zur Lead-Maschine."
|
||||||
|
},
|
||||||
|
"item2": {
|
||||||
|
"title": "Kunden und Mitglieder binden",
|
||||||
|
"text": "Stärken Sie die Beziehung zu Ihren Kunden! Mit wertvollen Inhalten, exklusiven Angeboten und interaktiven Funktionen bleibt Ihre Zielgruppe aktiv und engagiert."
|
||||||
|
},
|
||||||
|
"item3": {
|
||||||
|
"title": "Mitarbeiter finden und begeistern",
|
||||||
|
"text": "Gewinnen Sie die richtigen Talente! Eine authentische Karriereseite mit klaren Benefits macht Ihr Unternehmen für Bewerber unwiderstehlich."
|
||||||
|
},
|
||||||
|
"item4": {
|
||||||
|
"title": "Verwaltungs-Aufwand reduzieren",
|
||||||
|
"text": "Weniger Rückfragen – mehr Effizienz! Durch klare Informationen und digitale Prozesse auf Ihrer Website sparen Sie Zeit, Kosten und entlasten Ihr Team."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"compBox": {
|
||||||
|
"title": "\"Design ist die Kunst, Funktion und Ästhetik zu vereinen\"",
|
||||||
|
"subtitle": "Mit diesem Anspruch starten wir in den Relaunch-Prozess unserer Kunden.",
|
||||||
|
"text": "Wir legen besonderen Wert auf ein aufgeräumtes Design, das den mentalen Modellen der Nutzer entspricht – so finden die Besucher immer genau das, was sie suchen, an der Stelle, wo sie es erwarten."
|
||||||
|
},
|
||||||
|
"finalCall": {
|
||||||
|
"title": "Gemeinsam bringen wir Ihr Business auf das nächste Level!",
|
||||||
|
"button": "Kontaktieren Sie uns!"
|
||||||
|
},
|
||||||
|
"marqueeBanner": {
|
||||||
|
"title": "Diese Unternehmen vertrauen uns"
|
||||||
|
},
|
||||||
|
"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"
|
||||||
}
|
}
|
||||||
},
|
|
||||||
"compBox": {
|
|
||||||
"title": "\"Design ist die Kunst, Funktion und Ästhetik zu vereinen\"",
|
|
||||||
"subtitle": "Mit diesem Anspruch starten wir in den Relaunch-Prozess unserer Kunden.",
|
|
||||||
"text": "Wir legen besonderen Wert auf ein aufgeräumtes Design, das den mentalen Modellen der Nutzer entspricht – so finden die Besucher immer genau das, was sie suchen, an der Stelle, wo sie es erwarten."
|
|
||||||
},
|
|
||||||
"finalCall": {
|
|
||||||
"title": "Gemeinsam bringen wir Ihr Business auf das nächste Level!",
|
|
||||||
"button": "Kontaktieren Sie uns!"
|
|
||||||
},
|
|
||||||
"marqueeBanner": {
|
|
||||||
"title": "Diese Unternehmen vertrauen uns"
|
|
||||||
},
|
|
||||||
"faqArea": {
|
|
||||||
"headline": "Hier finden Sie Antworten auf häufig gestellte Fragen (FAQs) rund ums Thema Website-Erstellung mit digimedialoop"
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,18 +1,6 @@
|
|||||||
import { defineNuxtConfig } from 'nuxt/config'
|
import { defineNuxtConfig } from 'nuxt/config'
|
||||||
import { i18nPages } from './i18n/i18n-pages'
|
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({
|
export default defineNuxtConfig({
|
||||||
app: {
|
app: {
|
||||||
head: {
|
head: {
|
||||||
@ -94,7 +82,7 @@ export default defineNuxtConfig({
|
|||||||
{ code: 'tr', name: 'Türkçe', file: 'tr.json' }
|
{ code: 'tr', name: 'Türkçe', file: 'tr.json' }
|
||||||
],
|
],
|
||||||
customRoutes: 'config',
|
customRoutes: 'config',
|
||||||
pages: flattenPages(i18nPages),
|
pages: i18nPages,
|
||||||
bundle: {
|
bundle: {
|
||||||
optimizeTranslationDirective: false
|
optimizeTranslationDirective: false
|
||||||
}
|
}
|
||||||
|
|||||||
@ -14,9 +14,9 @@
|
|||||||
fetchpriority="high"
|
fetchpriority="high"
|
||||||
/>
|
/>
|
||||||
<div class="container-10">
|
<div class="container-10">
|
||||||
<h1 id="hero-heading">{{ $t('home.heroBox.h1') }}</h1>
|
<h1 id="hero-heading">{{ $t('pages.home.heroBox.h1') }}</h1>
|
||||||
<h2>{{ $t('home.heroBox.h2') }}</h2>
|
<h2>{{ $t('pages.home.heroBox.h2') }}</h2>
|
||||||
<h3>{{ $t('home.heroBox.h3') }}</h3>
|
<h3>{{ $t('pages.home.heroBox.h3') }}</h3>
|
||||||
</div>
|
</div>
|
||||||
<!-- Nach dem Container: Spiegelwelle unten -->
|
<!-- 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">
|
<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">
|
<section aria-labelledby="solution-title">
|
||||||
<div class="container-10 webStrategy">
|
<div class="container-10 webStrategy">
|
||||||
<h2 id="solution-title">{{ $t('home.solution.title') }}</h2>
|
<h2 id="solution-title">{{ $t('pages.home.solution.title') }}</h2>
|
||||||
<h3>{{ $t('home.solution.teaser') }}</h3>
|
<h3>{{ $t('pages.home.solution.teaser') }}</h3>
|
||||||
<p>{{ $t('home.solution.text') }}</p>
|
<p>{{ $t('pages.home.solution.text') }}</p>
|
||||||
<button
|
<button
|
||||||
class="mintBtn"
|
class="mintBtn"
|
||||||
role="button"
|
role="button"
|
||||||
aria-describedby="solution-title"
|
aria-describedby="solution-title"
|
||||||
aria-label="headless CMS Info" @click="navigateToArticle">
|
aria-label="headless CMS Info" @click="navigateToArticle">
|
||||||
{{ $t('home.solution.buttonText') }}
|
{{ $t('pages.home.solution.buttonText') }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -49,13 +49,13 @@
|
|||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-md-4"/>
|
<div class="col-md-4"/>
|
||||||
<div class="col-md-8 pt-5 pb-5">
|
<div class="col-md-8 pt-5 pb-5">
|
||||||
<h2 id="invitation-title">{{ $t('home.invitation.title') }}</h2>
|
<h2 id="invitation-title">{{ $t('pages.home.invitation.title') }}</h2>
|
||||||
<h3>{{ $t('home.invitation.teaser') }}</h3>
|
<h3>{{ $t('pages.home.invitation.teaser') }}</h3>
|
||||||
<button
|
<button
|
||||||
class="pinkBtn" role="button"
|
class="pinkBtn" role="button"
|
||||||
aria-describedby="invitation-title"
|
aria-describedby="invitation-title"
|
||||||
aria-label="Kontaktformular öffnen"
|
aria-label="Kontaktformular öffnen"
|
||||||
@click.prevent="toggleContactBubble">{{ $t('home.invitation.button') }}</button>
|
@click.prevent="toggleContactBubble">{{ $t('pages.home.invitation.button') }}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -68,7 +68,7 @@ class="pinkBtn" role="button"
|
|||||||
<section class="canDo" aria-labelledby="canDo-section-title">
|
<section class="canDo" aria-labelledby="canDo-section-title">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h2 id="canDo-section-title" class="text-center">
|
<h2 id="canDo-section-title" class="text-center">
|
||||||
{{ $t('home.canDo.title') }}
|
{{ $t('pages.home.canDo.title') }}
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<div class="canDoGrid">
|
<div class="canDoGrid">
|
||||||
@ -110,9 +110,9 @@ class="pinkBtn" role="button"
|
|||||||
<div class="container-10 pb-5">
|
<div class="container-10 pb-5">
|
||||||
<div class="row d-flex align-items-center">
|
<div class="row d-flex align-items-center">
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<h2>{{ $t('home.compBox.title') }}</h2>
|
<h2>{{ $t('pages.home.compBox.title') }}</h2>
|
||||||
<h3>{{ $t('home.compBox.subtitle') }}</h3>
|
<h3>{{ $t('pages.home.compBox.subtitle') }}</h3>
|
||||||
<p>{{ $t('home.compBox.text') }}</p>
|
<p>{{ $t('pages.home.compBox.text') }}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 mt-5 pt-4 pb-4">
|
<div class="col-md-6 mt-5 pt-4 pb-4">
|
||||||
<ImageComparisonSlider
|
<ImageComparisonSlider
|
||||||
@ -130,16 +130,16 @@ class="pinkBtn" role="button"
|
|||||||
|
|
||||||
<section>
|
<section>
|
||||||
<div class="container-10 text-center py-5">
|
<div class="container-10 text-center py-5">
|
||||||
<h3>{{ $t('home.finalCall.title') }}</h3>
|
<h3>{{ $t('pages.home.finalCall.title') }}</h3>
|
||||||
<button
|
<button
|
||||||
class="pinkBtn mt-3"
|
class="pinkBtn mt-3"
|
||||||
role="button"
|
role="button"
|
||||||
:aria-label="$t('home.finalCall.button')"
|
:aria-label="$t('pages.home.finalCall.button')"
|
||||||
@click.prevent="toggleContactBubble">{{ $t('home.finalCall.button') }}</button>
|
@click.prevent="toggleContactBubble">{{ $t('pages.home.finalCall.button') }}</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
<MarqueeBanner :items="logoItems" :logo-height="60" :title="$t('home.marqueeBanner.title')" />
|
<MarqueeBanner :items="logoItems" :logo-height="60" :title="$t('pages.home.marqueeBanner.title')" />
|
||||||
<FAQArea page-link="/" :headline="$t('home.faqArea.headline')" />
|
<FAQArea page-link="/" :headline="$t('pages.home.faqArea.headline')" />
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -179,26 +179,26 @@ const canDoItems = [
|
|||||||
{
|
{
|
||||||
img: '/uploads/website_Erfolg_Marketing_3c36a43ba5.png',
|
img: '/uploads/website_Erfolg_Marketing_3c36a43ba5.png',
|
||||||
alt: 'Website Erfolg Marketing',
|
alt: 'Website Erfolg Marketing',
|
||||||
title: 'home.canDo.item1.title',
|
title: 'pages.home.canDo.item1.title',
|
||||||
text: 'home.canDo.item1.text',
|
text: 'pages.home.canDo.item1.text',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
img: '/uploads/Kundenbindung_45d45ef3fc.png',
|
img: '/uploads/Kundenbindung_45d45ef3fc.png',
|
||||||
alt: 'Kundenbindung Strategie',
|
alt: 'Kundenbindung Strategie',
|
||||||
title: 'home.canDo.item2.title',
|
title: 'pages.home.canDo.item2.title',
|
||||||
text: 'home.canDo.item2.text',
|
text: 'pages.home.canDo.item2.text',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
img: '/uploads/Screen_Shot_Tool_20250228133408_beb2a11980.png',
|
img: '/uploads/Screen_Shot_Tool_20250228133408_beb2a11980.png',
|
||||||
alt: 'Screen Tool Beispiel 1',
|
alt: 'Screen Tool Beispiel 1',
|
||||||
title: 'home.canDo.item3.title',
|
title: 'pages.home.canDo.item3.title',
|
||||||
text: 'home.canDo.item3.text',
|
text: 'pages.home.canDo.item3.text',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
img: '/uploads/Screen_Shot_Tool_20250228133812_0a20d4320e.png',
|
img: '/uploads/Screen_Shot_Tool_20250228133812_0a20d4320e.png',
|
||||||
alt: 'Screen Tool Beispiel 2',
|
alt: 'Screen Tool Beispiel 2',
|
||||||
title: 'home.canDo.item4.title',
|
title: 'pages.home.canDo.item4.title',
|
||||||
text: 'home.canDo.item4.text',
|
text: 'pages.home.canDo.item4.text',
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@ -1,18 +1,251 @@
|
|||||||
<template>
|
<template>
|
||||||
<section>
|
<div>
|
||||||
<div class="container-10">
|
<section class="webagentur">
|
||||||
<h1>{{ $t('webagency') }}</h1>
|
<div class="container">
|
||||||
</div>
|
<div class="contentBox topSpace">
|
||||||
</section>
|
<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>
|
</template>
|
||||||
|
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
definePageMeta({
|
import { storeToRefs } from "pinia";
|
||||||
layout: 'default'
|
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>
|
</script>
|
||||||
|
|
||||||
<style lang="sass">
|
<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
|
||||||
|
|
||||||
</style>
|
.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