From ab5384364aec1c6fc6714b80d7d366ca6034dc23 Mon Sep 17 00:00:00 2001
From: Sabrina Hennrich <sabrina@digimedialoop.de>
Date: Tue, 8 Jul 2025 10:58:46 +0200
Subject: [PATCH] text change improvement

---
 pages/index.vue           | 345 ++++++++++++++++++--------------------
 pages/webagency/index.vue |  15 +-
 2 files changed, 170 insertions(+), 190 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 4a1b423..7f3cc7b 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -17,8 +17,18 @@
       <span class="loopHeader" v-html="getHtmlBySection('home_loopHeader').value"></span>
       <div class="content">
         <div class="column">
-        <span v-html="getHtmlBySection('home_loopInput').value"></span>
-      </div>
+          <h4 @click="toggleSection('input')" :class="{ open: openSections.input }">
+            Input
+            <span>︾</span>
+          </h4>
+          <transition
+            @before-enter="beforeEnter"
+            @enter="enter"
+            @leave="leave"
+          >
+            <div v-show="openSections.input" class="sliding-box" v-html="getHtmlBySection('home_loopInput').value" />
+          </transition>
+        </div>
       <div class="column">
         <NuxtImg
           src="/uploads/Loop_83b4311dd0.webp"
@@ -28,7 +38,18 @@
         />
       </div>
       <div class="column">
-        <span v-html="getHtmlBySection('home_loopOutput').value"></span>
+        <h4 @click="toggleSection('output')" :class="{ open: openSections.output }">
+          Output
+          <span>︾</span>
+        </h4>
+        <transition
+          @before-enter="beforeEnter"
+          @enter="enter"
+          @leave="leave"
+        >
+          <div v-show="openSections.output" class="sliding-box" v-html="getHtmlBySection('home_loopOutput').value" />
+        </transition>
+
       </div>
       </div>
       
@@ -170,58 +191,145 @@ const logoItems = computed(() => {
     }
   }))
 })
+
+const openSections = ref({
+  input: false,
+  output: false
+})
+
+const toggleSection = (key) => {
+  openSections.value[key] = !openSections.value[key]
+}
+function beforeEnter(el) {
+  el.style.height = '0'
+  el.style.opacity = '0'
+  el.style.overflow = 'hidden'
+}
+
+function enter(el) {
+  const height = el.scrollHeight
+  el.style.transition = 'height 0.4s ease, opacity 0.4s ease'
+  requestAnimationFrame(() => {
+    el.style.height = height + 'px'
+    el.style.opacity = '1'
+  })
+
+  el.addEventListener('transitionend', () => {
+    el.style.height = 'auto'
+    el.style.overflow = 'visible'
+  }, { once: true })
+}
+
+function leave(el) {
+  el.style.height = el.scrollHeight + 'px'
+  el.style.opacity = '1'
+  el.style.overflow = 'hidden'
+  requestAnimationFrame(() => {
+    el.style.transition = 'height 0.4s ease, opacity 0.4s ease'
+    el.style.height = '0'
+    el.style.opacity = '0'
+  })
+}
+
 </script>
 
 <style lang="sass">
+@keyframes bounce-fade
+  0%
+    transform: translateY(0)
+    opacity: 1
+  50%
+    transform: translateY(5px)
+    opacity: 0
+  51%
+    transform: translateY(-5px)
+    opacity: 0
+  100%
+    transform: translateY(0)
+    opacity: 1
+
+.slide-fade-enter-active, .slide-fade-leave-active
+  transition: all 0.3s ease
+  overflow: hidden
+
+.slide-fade-enter-from, .slide-fade-leave-to
+  max-height: 0
+  opacity: 0
+  transform: translateY(-10px)
+
+.slide-fade-enter-to, .slide-fade-leave-from
+  max-height: 500px
+  opacity: 1
+  transform: translateY(0)
+
 .homePage
 
   .dmlLoop
     width: 80%
     margin: 3rem 10%
-    h2
-      font-size: clamp(1.8rem, .9rem + 2vw, 2.4rem)
-      margin-bottom: 0
-      margin-top: -.5rem
-    h3
-      font-size: clamp(1.4rem, .7rem + 2vw, 2rem)
-      margin: 0 0 1rem 0
-    h4
-      font-size: clamp(1.2rem, .5rem + 2vw, 1.6rem)
-      margin: .5rem 0 1.5rem 0
-    p
-      margin-top: 1rem
+    .loopHeader
+      text-align: center
+
+      h2
+        font-size: clamp(1.8rem, .9rem + 2vw, 2rem)
+        margin-bottom: 0
+        margin-top: -.5rem
+
+      h3
+        font-size: clamp(1.2rem, .5rem + 2vw, 1.6rem)
+        margin: 0 0 1rem 0
+
+      h4
+        font-size: clamp(1.2rem, .5rem + 2vw, 1.6rem)
+        margin: .5rem 0 1.5rem 0
+
+      p
+        margin-top: 1rem
+
     .content
       display: flex
       flex-direction: row
       gap: 2rem
       margin: 3rem 0
+
       .column
         padding: 0
         border-radius: .5rem
         min-width: 280px
         width: calc((100% / 3) - 2rem)
-        // nur für 1 und 3 box
-        // child(1) border rights offen und child(3) border left offen
+
         &:nth-child(1), &:nth-child(3)
-          //border-top: 1px solid #effbf7
           border-bottom: 1px solid #effbf7
+
         &:nth-child(1)
           border-left: 1px solid #effbf7
+
           h4
             background-image: linear-gradient(to right, #effbf7, white)
+
         &:nth-child(3)
           border-right: 1px solid #effbf7
+
           h4
             background-image: linear-gradient(to right, white, #effbf7)
+
         &:nth-child(2)
           display: flex
           align-items: center
-          justify-content: center        
+          justify-content: center
+
+          img
+            margin: 22% auto
+
+        &.sliding-box
+          padding: .5rem 1rem
+          font-size: .9rem
+          transition: all 0.4s ease
+
         h4
           margin: 0
-          padding: .8rem 2rem 
+          padding: .8rem 2rem .2rem 2rem
           color: $darkgrey
-          
           border-top-left-radius: .5rem
           border-top-right-radius: .5rem
           font-family: 'Mainfont-Bold'
@@ -229,12 +337,29 @@ const logoItems = computed(() => {
           text-transform: uppercase
           text-align: center
           letter-spacing: .05rem
+          cursor: pointer
+          margin-top: 8rem
+          transition: .5s ease-in-out
+
+          span
+            display: block
+            animation: bounce-fade 1.5s infinite ease-in-out
+            color: $darkgrey
+            transition: transform 0.3s ease
+
+          &.open
+            margin-top: 0
+            span
+              animation: none
+              transform: rotate(180deg)
 
         p
           padding: .5rem 1rem
           font-size: .9rem
+
         ul
           margin-left: 2vw
+
           li
             padding: .3rem 0
 
@@ -244,14 +369,14 @@ const logoItems = computed(() => {
           object-fit: cover
           object-position: center center
 
-
     @media screen and (max-width: $breakPointLG)
       .content
         flex-direction: column
+
         .column
           width: 90%
           min-width: 90%
-  
+
   .whatWeDo
     position: relative
     overflow-x: hidden
@@ -264,188 +389,38 @@ const logoItems = computed(() => {
       position: absolute
       top: 0
       aspect-ratio: 1 / 1
-      
+
     .rightImg
       right: 0
       transform: translateX(50%)
-      
+
     .leftImg
       left: 0
       transform: translateX(-25%)
-    
+
     .content
       position: relative
       z-index: 1
       width: 65%
       margin: 3rem 15% 2rem 20%
-      text-align: center      
+      text-align: center
       padding: 2rem 5%
       border-radius: 1rem
+
       @media(max-width: $breakPointLG)
         width: 90%
-        margin: 3rem 5% 3rem 5%
-        background-color: rgba(255,255,255,.8)
+        margin: 3rem 5%
+        background-color: rgba(255,255,255,.95)
 
       h2
-        font-size: clamp(1.5rem, .7rem + 2vw, 2rem)  
-        font-family: 'Comfortaa' 
+        font-size: clamp(1.5rem, .7rem + 2vw, 2rem)
+        font-family: 'Comfortaa'
+
       h3
         font-family: 'Mainfont-Bold'
         font-size: clamp(1.2rem, .9rem + 2vw, 1.6rem)
+
       p
         font-size: clamp(1.1rem, .5rem + 2vw, 1.2rem)
-
-  
-      
-
-  .explainBox
-    position: relative
-    overflow: hidden
-    min-height: 400px
-    margin: 2vh 0 8vh 0
-    padding: 8vh 0
-
-    .background-image
-      position: absolute
-      top: 0
-      left: 0
-      width: 100%
-      height: auto
-      object-fit: cover
-      object-position: center center
-      z-index: 0
-      pointer-events: none
-      
-
-    .content
-      position: relative
-      z-index: 1
-      padding-left: 10%  
-      h2
-        font-size: clamp(1.2rem, .7rem + 2vw, 2rem)  
-        font-family: 'Comfortaa' 
-      h3
-        font-family: 'Mainfont-Bold'
-        font-size: 1.2rem  
-
-.firstTeaser
-  h2
-    font-size: 1.6rem
-    line-height: 2.4rem
-.subLine
-  color: adjust-color($darkgrey, $lightness: 20%)
-  font-size: 80%
-.pinkFont
-  color: darken($pink, 10%)
-.imgRight
-  float: right
-  max-width: 50%
-.homeImageTop
-  margin: 4.5rem 0 8vh 3rem !important
-
-.sectionSolutions
-  background-image: linear-gradient(to bottom right, $beige, white, $beige)
-  min-height: 200px
-  margin: 6rem 0
-  padding: 6rem 0 7rem 0
-  position: relative
-  overflow: hidden
-
-  h2
-    font-size: 1.8rem
-  .sectorsBox
-    display: flex
-    gap: 5%
-    justify-content: space-arround
-    flex-wrap: wrap
-
-    .sector
-      position: relative
-      flex: 1 1 30%
-      background: #f9f9f9
-      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: 450px
-      margin-bottom: 2rem
-
-      .bgImage
-        position: absolute
-        inset: 0
-        width: 100%
-        height: 100%
-        object-fit: cover
-        object-position: center
-        z-index: 0
-        border-radius: 1rem
-        
-      .contentBox
-        position: relative
-        z-index: 2  
-        background-image: linear-gradient(to top, rgba(white, .9), rgba(white, .7))
-        width: 100%
-        padding: 2rem
-        border-radius: 1rem
-        transform: rotate(-1deg)
-
-        .image-comparison-container  
-          text-align: center
-          width: 80%
-          max-width: 300px
-          margin: 0 auto 2rem auto
-
-        h3
-          font-size: 1.25rem
-          margin: 1rem 0 0.5rem
-          z-index: 3
-          hyphens: auto
-
-        p
-          font-size: 1rem
-          color: #333
-          margin-bottom: 1.5rem
-          min-height: 4.5rem
-          z-index: 3
-        
-        .btn
-          text-transform: none
-          hyphens: auto
-          font-size: 1.1rem
-          font-family: 'Mainfont-Bold'
-
-    @media screen and (max-width: $breakPointMD)
-      flex-direction: column
-      .sector
-        flex: 1 1 100%
-        max-width: 100%
-        padding: 1rem
-        .btn
-          font-size: 1.05rem
-
-
-
-.compBox
-  background-image: url(https://strapi.digimedialoop.de/uploads/watercolor_da8a37ce48.webp) 
-  background-size: cover
-  background-repeat: no-repeat
-  padding: 6rem 0 6rem 0
-  .content
-    background-color: rgba(255,255,255,.7)
-    padding: 2rem 5%
-    margin-top: 2rem
-    margin-bottom: 2rem
-    border-radius: 1rem
-    transform: rotate(-1deg)
-    .btnArea
-      a
-        margin-right: 1rem 
-        font-family: 'Mainfont-Bold'
-    h2
-      font-family: 'Comfortaa-Bold'
-    h3
-      line-height: 1.5
-    p
-      padding-right: 1rem
 </style>
+
diff --git a/pages/webagency/index.vue b/pages/webagency/index.vue
index 065122f..59528ba 100644
--- a/pages/webagency/index.vue
+++ b/pages/webagency/index.vue
@@ -3,11 +3,7 @@
     <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')" />
+          <div v-html="getHtmlBySection('webagent_hero').value"></div>
           <button
             class="my-4 btn pinkBtn"
             role="button"
@@ -123,6 +119,9 @@ const designerLink = i18nPages.designer?.[locale.value] || '/designer'
 
 const mainStore = useMainStore();
 const { companyinfo } = storeToRefs(mainStore);
+
+const { getHtmlBySection } = usePageContentRenderer()
+
 const toggleContactBubble = () => mainStore.toggleContactBubble();
 
 const profileImageUrl = computed(() => companyinfo.value?.profileImage?.data?.attributes?.url || null);
@@ -135,6 +134,12 @@ const navigateTo = useRouter().push;
   position: relative
   overflow-x: hidden
   overflow-y: hidden
+  h1
+    font-size: clamp(2rem, 1rem + 2vw, 2.5rem)
+    margin-bottom: .5rem
+  h2
+    font-size: clamp(1.5rem, 1rem + 1vw, 2rem)
+    margin-top: 0
   &::after
       content: ''
       position: absolute