From 95ecf79b9242d17117fc517714f54dc6313808ce Mon Sep 17 00:00:00 2001 From: Sabrina Hennrich Date: Wed, 21 May 2025 15:37:31 +0200 Subject: [PATCH] webagency --- i18n/locales/de.json | 124 +++++++++++------- nuxt.config.ts | 14 +-- pages/index.vue | 54 ++++---- pages/webagency/index.vue | 255 ++++++++++++++++++++++++++++++++++++-- 4 files changed, 349 insertions(+), 98 deletions(-) diff --git a/i18n/locales/de.json b/i18n/locales/de.json index 5b88814..e1e5aee 100644 --- a/i18n/locales/de.json +++ b/i18n/locales/de.json @@ -52,56 +52,86 @@ "faqsDefault": "Häufig gestellte Fragen (FAQs)", "btnDefault": "Sprechen Sie uns gerne an!" }, - "home": { - "heroBox": { - "h1": "Ihre Agentur für individuelles Webdesign und professionelle Webentwicklung", - "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." + "pages": { + "home": { + "heroBox": { + "h1": "Ihre Agentur für individuelles Webdesign und professionelle Webentwicklung", + "h2": "Modulare Webseiten mit modernsten Technologien", + "h3": "Höchste Performanz - schnell, effizient und zukunftssicher!" }, - "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." + "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" }, - "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." + "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!" }, - "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." + "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": { + "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" } - } + + } + } diff --git a/nuxt.config.ts b/nuxt.config.ts index 0d59d0b..c0c8414 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -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>) { - const result: Record = {} - 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 } diff --git a/pages/index.vue b/pages/index.vue index f6f0067..95c65db 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -14,9 +14,9 @@ fetchpriority="high" />
-

{{ $t('home.heroBox.h1') }}

-

{{ $t('home.heroBox.h2') }}

-

{{ $t('home.heroBox.h3') }}

+

{{ $t('pages.home.heroBox.h1') }}

+

{{ $t('pages.home.heroBox.h2') }}

+

{{ $t('pages.home.heroBox.h3') }}

-

{{ $t('home.solution.title') }}

-

{{ $t('home.solution.teaser') }}

-

{{ $t('home.solution.text') }}

+

{{ $t('pages.home.solution.title') }}

+

{{ $t('pages.home.solution.teaser') }}

+

{{ $t('pages.home.solution.text') }}

@@ -49,13 +49,13 @@
-

{{ $t('home.invitation.title') }}

-

{{ $t('home.invitation.teaser') }}

+

{{ $t('pages.home.invitation.title') }}

+

{{ $t('pages.home.invitation.teaser') }}

+ @click.prevent="toggleContactBubble">{{ $t('pages.home.invitation.button') }}
@@ -68,7 +68,7 @@ class="pinkBtn" role="button"

- {{ $t('home.canDo.title') }} + {{ $t('pages.home.canDo.title') }}

@@ -110,9 +110,9 @@ class="pinkBtn" role="button"
-

{{ $t('home.compBox.title') }}

-

{{ $t('home.compBox.subtitle') }}

-

{{ $t('home.compBox.text') }}

+

{{ $t('pages.home.compBox.title') }}

+

{{ $t('pages.home.compBox.subtitle') }}

+

{{ $t('pages.home.compBox.text') }}

-

{{ $t('home.finalCall.title') }}

+

{{ $t('pages.home.finalCall.title') }}

+ :aria-label="$t('pages.home.finalCall.button')" + @click.prevent="toggleContactBubble">{{ $t('pages.home.finalCall.button') }}
- - + + @@ -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', }, ]; diff --git a/pages/webagency/index.vue b/pages/webagency/index.vue index 2ef05d1..84a870f 100644 --- a/pages/webagency/index.vue +++ b/pages/webagency/index.vue @@ -1,18 +1,251 @@ + \ No newline at end of file +.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 + \ No newline at end of file