From 34b6501b7dac38d7376544cd03ca6a54bb3b33c7 Mon Sep 17 00:00:00 2001
From: Sabrina Hennrich <sabrina@digimedialoop.de>
Date: Wed, 21 May 2025 09:41:36 +0200
Subject: [PATCH] console false in prod

---
 components/FAQArea.vue |  19 +++++--
 i18n/locales/de.json   |   5 ++
 nuxt.config.ts         |   8 +++
 pages/index.vue        | 117 ++++++++++++++++++++++-------------------
 4 files changed, 89 insertions(+), 60 deletions(-)

diff --git a/components/FAQArea.vue b/components/FAQArea.vue
index 85e8aad..3db59b2 100644
--- a/components/FAQArea.vue
+++ b/components/FAQArea.vue
@@ -2,11 +2,11 @@
   <section id="faq" class="faq">
     <h3>{{ headline }}</h3>
     <Accordion v-if="accordionItems.length" :items="accordionItems" />
-    <p v-else>Lade Daten...</p>
+    <p v-else>Loading...</p>
 
     <div class="row mt-4">
       <div class="col-md-6 mb-3">
-        <h4> Noch Fragen? </h4>
+        <h4> {{ $t('faqBox.questions') }} </h4>
       </div>
       <div class="col-md-6">
         <button role="button" class="pinkBtn" @click.prevent="toggleContactBubble">
@@ -19,28 +19,37 @@
 
 <script setup lang="ts">
 import { computed, defineProps } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useMainStore } from '@/stores/main'
 import { useHtmlConverter } from '~/composables/useHTMLConverter'
+
+const { t } = useI18n()
 const { convertToHTML } = useHtmlConverter()
 
 const props = defineProps({
   pageLink: { type: String, required: true },
-  headline: { type: String, default: "Häufig gestellte Fragen (FAQs)" },
-  button: { type: String, default: "Sprechen Sie uns gerne an!" },
+  headline: { type: String, required: false },
+  button: { type: String, required: false },
 })
 
+// Fallbacks im Setup definieren, falls keine Props übergeben wurden
+const headline = computed(() => props.headline ?? t('faqBox.faqsDefault'))
+const button = computed(() => props.button ?? t('faqBox.btnDefault'))
+
 const mainStore = useMainStore()
 
 const accordionItems = computed(() =>
   mainStore.getFaqsByPageLink(props.pageLink).map(faq => ({
     title: faq.question,
-    html:  convertToHTML(faq.answer)   // <- hier passiert die Umwandlung
+    html:  convertToHTML(faq.answer)
   }))
 )
 
 const toggleContactBubble = () => mainStore.toggleContactBubble()
 </script>
 
+
+
   
   <style lang="sass">
   .faq
diff --git a/i18n/locales/de.json b/i18n/locales/de.json
index f9f45fb..5b88814 100644
--- a/i18n/locales/de.json
+++ b/i18n/locales/de.json
@@ -47,6 +47,11 @@
             "salutation": "Ihr digimedialoop Team"
         }
     },
+    "faqBox": {
+        "questions": "Fragen?",
+        "faqsDefault": "Häufig gestellte Fragen (FAQs)",
+        "btnDefault": "Sprechen Sie uns gerne an!"
+    },
     "home": {
         "heroBox": {
             "h1": "Ihre Agentur für individuelles Webdesign und professionelle Webentwicklung",
diff --git a/nuxt.config.ts b/nuxt.config.ts
index c2e987c..0d59d0b 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -39,6 +39,14 @@ export default defineNuxtConfig({
           `
         }
       }
+    },
+    build: {
+      terserOptions: {
+        compress: {
+          drop_console: true,
+          drop_debugger: true,
+        },
+      },
     }
   },
   modules: [
diff --git a/pages/index.vue b/pages/index.vue
index 582f942..f6f0067 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,7 +3,7 @@
     <section class="heroBox" aria-labelledby="hero-heading">
       <NuxtImg
         provider="strapi"
-        src="/uploads/medium_DML_Home_Hero_4f27bc7f8e.webp"              
+        src="/uploads/large_DML_Home_Hero_4f27bc7f8e.webp"              
         class="hero-bg"
         sizes="sm:100vw md:100vw lg:100vw"
         alt=""                  
@@ -64,6 +64,7 @@ class="pinkBtn" role="button"
       </svg>  
     </section>
     
+
     <section class="canDo" aria-labelledby="canDo-section-title">
       <div class="container">
         <h2 id="canDo-section-title" class="text-center">
@@ -125,6 +126,8 @@ class="pinkBtn" role="button"
             <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>
+
+
     <section>
       <div class="container-10 text-center py-5">
         <h3>{{ $t('home.finalCall.title') }}</h3>
@@ -204,6 +207,7 @@ const canDoItems = [
 
 <style lang="sass">
 .homePage
+
   .heroBox
     position: relative
     min-height: 35rem
@@ -279,6 +283,7 @@ const canDoItems = [
       z-index: 1
       transform: scaleY(-1) 
       bottom: -2px
+  
   .webStrategy
     padding: 4rem 0 3.5rem 0
     h2
@@ -312,6 +317,7 @@ const canDoItems = [
       box-shadow: $innerShadow
       @media(max-width: $breakPointMD)
           right: -50vw
+  
   .targetGroup
     background-image: url('https://strapi.digimedialoop.de/uploads/smartphone_Contacts_40ae56a178.jpg') 
     background-repeat: no-repeat
@@ -328,6 +334,7 @@ const canDoItems = [
     h3
       font-size: clamp(1.1rem, .8rem + 1vw, 1.2rem)
       line-height: 150%
+
 .firstTeaser
   h2
     font-size: 1.6rem
@@ -352,72 +359,72 @@ const canDoItems = [
   p
     padding-right: 1rem
   
+
 .canDo
   margin: 12vh 0
-
   h2
     margin-bottom: 3.5rem
     font-size: clamp(1.6rem, 1rem + 2vw, 1.8rem)
+  .canDoGrid
+    display: grid
+    gap: 2rem
+    justify-content: center
+    align-items: stretch
+    grid-template-columns: 1fr // Default: 1 Spalte
 
-.canDoGrid
-  display: grid
-  gap: 2rem
-  justify-content: center
-  align-items: stretch
-  grid-template-columns: 1fr // Default: 1 Spalte
+    @media (min-width: $breakPointMD) 
+      grid-template-columns: repeat(2, 1fr)
 
-  @media (min-width: $breakPointMD) 
-    grid-template-columns: repeat(2, 1fr)
+    @media (min-width: $breakPointXL) 
+      grid-template-columns: repeat(4, 1fr)
 
-  @media (min-width: $breakPointXL) 
-    grid-template-columns: repeat(4, 1fr)
-
-  .canDoBox
-    width: 100%
-    display: flex
-    flex-direction: column
-    align-items: center
-    justify-content: flex-start
-    background-image: linear-gradient(to bottom right, transparent , white)
-    box-shadow: 3px 3px 8px 1px $lightgrey
-    border-bottom-right-radius: 1rem
-    padding: 2rem
-    border-right: 1px solid lighten($beige, 0%)
-    border-bottom: 1px solid lighten($beige, 0%)
-    height: 100%
-
-  .canDoItem
-    width: 100%
-    
-    .imageBox
-      margin: 2rem auto
+    .canDoBox
       width: 100%
-      max-width: 180px
-      aspect-ratio: 5 / 4
-      object-fit: cover
-      border-radius: 1rem
-      display: block
+      display: flex
+      flex-direction: column
+      align-items: center
+      justify-content: flex-start
+      background-image: linear-gradient(to bottom right, transparent , white)
+      box-shadow: 3px 3px 8px 1px $lightgrey
+      border-bottom-right-radius: 1rem
+      padding: 1rem 1.5rem
+      border-right: 1px solid lighten($beige, 0%)
+      border-bottom: 1px solid lighten($beige, 0%)
+      height: 100%
 
-      &:nth-child(1) 
-        border-radius: $loopShape1
-      &:nth-child(2) 
-        border-radius: $loopShape2
-      &:nth-child(3) 
-        border-radius: $loopShape3
-      &:nth-child(4) 
-        border-radius: $loopShape4
+    .canDoItem
+      width: 100%
+      
+      .imageBox
+        margin: 0rem auto 1rem auto
+        width: 100%
+        max-width: 180px
+        aspect-ratio: 5 / 4
+        object-fit: cover
+        border-radius: 1rem
+        display: block
 
-    h3
-      font-size: 1.2rem
-      line-height: 1.5rem
-      text-align: center
-      font-family: 'Mainfont-Bold'
-      color: darken($pink, 10%)
-      text-transform: uppercase
+        &:nth-child(1) 
+          border-radius: $loopShape1
+        &:nth-child(2) 
+          border-radius: $loopShape2
+        &:nth-child(3) 
+          border-radius: $loopShape3
+        &:nth-child(4) 
+          border-radius: $loopShape4
 
-    p
-      font-size: .9rem
-      text-align: left !important
+      h3
+        font-size: 1.2rem
+        line-height: 1.5rem
+        text-align: center
+        font-family: 'Mainfont-Bold'
+        color: darken($pink, 10%)
+        text-transform: uppercase
+        margin-bottom: .5rem
+
+      p
+        font-size: .9rem
+        text-align: left !important