digimedialoop/dml_frontend
digimedialoop/dml_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design fixing

Browse Source
This commit is contained in:
Sabrina Hennrich 2025-06-27 16:29:10 +02:00
parent 1530772bb8
commit 51cb3a9726
4 changed files with 34 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/HeroBox.vue
View File

@ -196,16 +196,16 @@ onUnmounted(() => {
font-family: 'Comfortaa'
h3
font-size: 1.2rem
font-size: clamp(1rem, .6rem + 2vw, 1.6rem)
margin: .8rem 0 .8rem 0
p
font-size: 1.1rem
font-size: clamp(1rem, .5rem + 2vw, 1.2rem)
margin: .8rem 0 .8rem 0
@media(max-width: $breakPointMD)
h1, h2, h3, p
line-height: 120%
.btn
margin-bottom: 1rem
margin: 1rem auto
</style>

16
components/ServicesTeaser.vue
View File

@ -1,7 +1,11 @@
<template>
<section class="services">
<div class="textBox">
<h2>Unsere Kernkompetenzen für Ihren Erfolg im Web</h2>
<p><b>Vier starke Säulen für Ihre Website:</b> Von barrierefrei über SEO bis hin zu Headless CMS und KI-Kompatibilität. Entdecken Sie, wie unsere spezialisierten Leistungen Ihre digitale Präsenz voranbringen. Einfach, effektiv und auf Ihre Bedürfnisse zugeschnitten.</p>
<h3>Vier starke Säulen für Ihre Website</h3>
<p v-show="false"><b>Vier starke Säulen für Ihre Website:</b> Von barrierefrei über SEO bis hin zu Headless CMS und KI-Kompatibilität. Entdecken Sie, wie unsere spezialisierten Leistungen Ihre digitale Präsenz voranbringen. Einfach, effektiv und auf Ihre Bedürfnisse zugeschnitten.</p>
</div>
<div class="serviceBoxes">
<div
v-for="(service, index) in services"
@ -64,6 +68,13 @@ const services = [
width: 80%
margin: 4rem auto // zentriert den Container
.textBox
text-align: center
h2
margin: 1rem auto 1rem auto
h3
font-size: 1.6rem
font-family: 'Comfortaa-Bold'
.serviceBoxes
margin-top: 2rem
display: flex
@ -122,11 +133,12 @@ const services = [
color: black
background-color: white
padding: .5rem 1.25rem
margin: 1.5rem auto
border-radius: 1rem
text-decoration: none
font-family: 'Mainfont-Bold'
font-size: 90%
text-transform: uppercase
&:hover
color: #ddd
transform: scale(1.05)
</style>

53
pages/index.vue
View File

@ -23,10 +23,10 @@
<div class="content">
<h2>Webseiten für Mensch und Maschine</h2>
<h3>Design das Menschen begeistert mit Struktur die Maschinen verstehen</h3>
<p>Wir entwickeln performante, barrierefreie Webseiten mit klarer Struktur,
<p>Wir entwickeln <b>performante, barrierefreie Webseiten</b> mit <b>klarer Struktur</b>,
die Nutzer überzeugen und von Suchmaschinen wie Google oder Bing, sowie KI-Systemen optimal verstanden werden.</p>
<p>Dabei setzen wir auf moderne Standards, erfüllen rechtliche Anforderungen wie Barrierefreiheit und Datenschutz
und sorgen mit zukunftsfähiger Technologie dafür, dass Ihre Webseite auf dem neuesten Stand ist.</p>
und sorgen mit <b>zukunftsfähiger Technologie</b> dafür, dass Ihre Webseite auf dem neuesten Stand ist.</p>
</div>
@ -40,36 +40,6 @@
<ServicesTeaser />
<!-- <section class="explainBox" :aria-label="$t('pages.services.explain.ariaLabel')">
<NuxtImg
src="/uploads/Human_Maschine_BG_5c91e9100f.webp"
provider="strapi"
format="webp"
sizes="100vw"
class="background-image"
alt="AI and human"
aria-hidden="true"
/>
<div class="container-15 content">
<h2>{{ $t('pages.services.explain.headline1') }}</h2>
<h3>{{ $t('pages.services.explain.headline2') }}</h3>
<p>{{ $t('pages.services.explain.paragraph') }}</p>
<ul class="check">
<li>{{ $t('pages.services.explain.bullet1') }}</li>
<li>{{ $t('pages.services.explain.bullet2') }}</li>
<li>{{ $t('pages.services.explain.bullet3') }}</li>
<li>{{ $t('pages.services.explain.bullet4') }}</li>
<li>{{ $t('pages.services.explain.bullet5') }}</li>
</ul>
<NuxtLinkLocale class="btn" to="services-cms">Erfahren Sie mehr zu Headless CMS</NuxtLinkLocale>
</div>
</section> -->
<section class="sectionSolutions">
<svg class="sectionWave wave-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
<path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
@ -90,9 +60,9 @@
before-image="/uploads/Image_Comp_BSK_Before_1ae2a67e1b.png"
after-image="/uploads/BSK_After_9de7feda0b.webp"
/>
<h3>Webseiten für Schulen und Bildungseinrichtungen</h3>
<h3 v-show="false">Webseiten für Schulen und Bildungseinrichtungen</h3>
<p v-show="false">Wir gestalten barrierefreie, DSGVO-konforme Schulwebseiten mit modernem Content-Management-System und einfacher Pflege durch das Schulpersonal.</p>
<NuxtLinkLocale :to="'sectors-schools'" class="btn">Informationen zu Schulhompages</NuxtLinkLocale>
<NuxtLinkLocale :to="'sectors-schools'" class="btn">Webseiten für Schulen und Bildungseinrichtungen</NuxtLinkLocale>
</div>
</div>
<div class="sector">
@ -108,15 +78,15 @@
before-image="/uploads/herb_X_vorher_Image_5cef5738f9.webp"
after-image="/uploads/herb_X_nachher_Image_e2d2a388ff.webp"
/>
<h3>Webauftritte für die Film- und Fernsehbranche</h3>
<h3 v-show="false">Webauftritte für die Film- und Fernsehbranche</h3>
<p v-show="false">Maßgeschneiderte Weblösungen für Produktionen, Studios und Agenturen. Visuell stark, technisch top und bereit für Awards.</p>
<NuxtLinkLocale :to="'sectors-film'" class="btn">Informationen für die Filmbranche</NuxtLinkLocale>
<NuxtLinkLocale :to="'sectors-film'" class="btn">Webauftritte für die Film- und Fernsehbranche</NuxtLinkLocale>
</div>
</div>
</div>
</div>
<svg class="sectionWave wave-bottom" style="transform: scale(1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
<svg class="sectionWave wave-bottom" style="transform: scale(-1,-1)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 20">
<path d="M 0 0 L 500 0 L 500 14 Q 354.4 -2.8 250 11 Q 145.6 24.8 0 14 L 0 0 Z" fill="#FFF"/>
</svg>
</section>
@ -278,10 +248,13 @@ const logoItems = computed(() => {
.sectionSolutions
background-image: linear-gradient(to bottom right, $beige, white, $beige)
min-height: 200px
padding: 5rem 0 7rem 0
margin: 6rem 0
padding: 6rem 0 7rem 0
position: relative
overflow: hidden
h2
font-size: 1.8rem
.sectorsBox
display: flex
gap: 5%
@ -292,12 +265,12 @@ const logoItems = computed(() => {
position: relative
flex: 1 1 30%
background: #f9f9f9
padding: 2rem
padding: 1rem
border-radius: 1rem
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05)
transition: transform 0.3s ease
border-radius: 1rem
max-width: 350px
max-width: 450px
margin-bottom: 2rem
.bgImage

2
pages/services/cms/index.vue
View File

@ -250,6 +250,8 @@ const timeline = [
.cmsPage
.whatIs
margin: 4rem 0
padding-bottom: 5vw
img
float: right
width: 100%