magazin improvement

components/SideBarNaviSlider.vue

@@ -50,7 +50,7 @@ const props = defineProps({
     letter-spacing: .05rem
     top: 40vh
     right: -80px  // Startposition außerhalb des Bildschirms
-    padding: 1.2rem .8rem 1.6rem .8rem
+    padding: 1.2rem .4rem 1.6rem .3rem
     writing-mode: vertical-lr
     transform: rotate(180deg)
     border-bottom-right-radius: 1rem

i18n/locales/de.json

@@ -266,9 +266,10 @@
             }
         },
         "magazin": {
-            "title": "Wissenswertes rund ums Thema Webseite",
+            "title": "Wissenswertes für digitale Entscheider",
-            "teaser1": "In unserem Wissensbereich zeigen wir, worauf es bei Suchmaschinen-Optimierung, Barrierefreiheit, Webdesign, Webperformance und Online-Marketing ankommt.",
+            "title2": "Webdesign und Webentwicklung, SEO, Performance & AI",
-            "teaser2": "Entdecken Sie aktuelle Trends und praxisnahe Tipps, um Ihre Online-Präsenz gezielt zu stärken.",
+            "teaser1": "In unserem Fachmagazin erfahren Sie, wie moderne Webseiten aufgebaut sein müssen, um technisch, inhaltlich und strategisch zu überzeugen. Themen wie KI-gestütztes SEO (AI-SEO), nachhaltige Webentwicklung, Barrierefreiheit, Ladezeit-Optimierung, User Experience und Headless CMS zeigen, worauf es heute im Webdesign wirklich ankommt.",
+            "teaser2": "Entdecken Sie praxisnahe Insights und zukunftsorientierte Lösungen für mehr Sichtbarkeit, Effizienz und Erfolg im digitalen Raum.",
             "readmore": "Artikel lesen"
         },
         "article": {

pages/article/[link].vue

@@ -177,10 +177,10 @@
       margin-bottom: 1.5rem
       line-height: 2.2rem
     .img_detail
-      width: 100%
+      width: 90%
       max-width: 350px
       float: right
-      margin: 0 0 2rem 2rem
+      margin: 0 5% 2rem 10%
       border-radius: 1rem
       //filter: grayscale(100%)
     .articleBox
@@ -189,6 +189,7 @@
       align-items: flex-start
       .content
         line-height: 140%
+        hyphens: auto
         h2, h3, h4
           margin: 2rem auto .8rem auto
         h2

pages/magazin/index.vue

@@ -2,9 +2,13 @@
   <div class="knowledgeBox topSpace">
     <section class="teaserBox">
       <div class="container">
-        <h1>{{ $t('pages.magazin.title') }}</h1>
+        <h1>Wissenswertes für digitale Entscheider</h1>
-        <p>{{ $t('pages.magazin.teaser1') }}</p>
+        <h2>Webdesign und Webentwicklung, SEO, Performance & AI</h2>
-        <p>{{ $t('pages.magazin.teaser2') }}</p>
+        <p>In unserem Fachmagazin erfahren Sie, wie moderne Webseiten aufgebaut sein müssen, 
+          um technisch, inhaltlich und strategisch zu überzeugen. 
+          Themen wie <b>KI-gestütztes SEO (AI-SEO)</b>, <b>nachhaltige Webentwicklung</b>, <b>Barrierefreiheit</b>, 
+          <b>Ladezeit-Optimierung</b>, <b>User Experience</b> und <b>Headless CMS</b> zeigen, worauf es heute im Webdesign wirklich ankommt.</p>
+        <p>Entdecken Sie <b>praxisnahe Insights und zukunftsorientierte Lösungen</b> für mehr Sichtbarkeit, Effizienz und Erfolg im digitalen Raum.</p>
       </div>
     </section>
 
@@ -28,8 +32,9 @@
             />
             <div class="overlay">
               <h2>{{ article.header }}</h2>
-              <button class="mintBtn">{{ $t('pages.magazin.readmore') }}</button>
+              
             </div>
+            <button class="mintBtn">{{ $t('pages.magazin.readmore') }}</button>
           </div>
         </NuxtLinkLocale>
 
@@ -92,8 +97,8 @@ watch(articles, (newVal) => {
 
     .grid
         display: grid
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))
+        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr))
-        gap: 1rem
+        gap: 2rem
         justify-content: start
         width: 100%
         max-width: 100%
@@ -101,16 +106,18 @@ watch(articles, (newVal) => {
 
     .article
         width: 100%
-        max-width: 450px
+        max-width: 500px
         border: 1px solid $beige
         background: linear-gradient(to bottom right, white, $lightgrey)
         border-radius: 1rem
-        transition: .8s
+        transition: .5s
         position: relative
         display: flex
         flex-direction: column
         align-items: flex-start
         overflow: hidden
+        &:hover
+              transform: scale(1.08)
 
         .article-link
           position: relative
@@ -121,43 +128,56 @@ watch(articles, (newVal) => {
         .image-wrapper
           position: relative
           width: 100%
-          height: 220px
+          height: 280px
+          border: 1px solid $lightgrey
 
           .article-image
             width: 100%
-            height: 450px
+            height: 500px
             object-fit: cover
             border-top-left-radius: 1rem
             border-top-right-radius: 1rem
+            opacity: .6
+
+          button
+            position: absolute
+            bottom: .6rem
+            right: 0rem
+            border: 1px solid darken($primaryColor, 30%)
+            font-size: 1rem
+            box-shadow: 1px 1px 4px 2px rgba(black, .2)
+            background-color: darken($primaryColor, 15%)
+            letter-spacing: .05rem
 
 
           .overlay
             position: absolute
             top: 0
             left: 0
-            width: 100%
+            width: calc(100% - 4rem)
-            height: 100%
+            height: calc(100% - 6rem)
-            background-color: rgba(0, 0, 0, 0.7)
+            background-color: rgba(255, 255, 255, 0.98)
+            margin: 1.5rem 3.5rem 4rem 1rem
             display: flex
             flex-direction: column
             align-items: center
             justify-content: center
             padding: 1rem
-            border-top-left-radius: 1rem
+            //border-top-left-radius: 1rem
-            border-top-right-radius: 1rem
+            //border-top-right-radius: 1rem
+            border-radius: .5rem
             text-align: center
-            transition: .5s
+            transition: .3s
-            &:hover
+            box-shadow: 2px 2px 5px 3px rgba(black, .6)
-              background-color: rgba(255, 255, 255, 0.8)
+            
-              h2
-                color: black
 
             h2
-              color: white
+              color: black
               font-size: 1.1rem
-              line-height: 130%
+              line-height: 140%
               font-family: 'Mainfont-Bold'
               margin-bottom: 0.5rem
+              margin-top: 0.5rem
 
             .mintBtn
               background-color: $primaryColor