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

console false in prod

Browse Source
This commit is contained in:
Sabrina Hennrich 2025-05-21 09:41:36 +02:00
parent 0f8b1ebaad
commit 34b6501b7d
4 changed files with 89 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
components/FAQArea.vue
View File

@ -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,22 +19,29 @@
<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)
}))
)
@ -42,6 +49,8 @@ const toggleContactBubble = () => mainStore.toggleContactBubble()
</script>
<style lang="sass">
.faq
width: 80%

5
i18n/locales/de.json
View File

@ -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",

8
nuxt.config.ts
View File

@ -39,6 +39,14 @@ export default defineNuxtConfig({
`
}
}
},
build: {
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
}
},
modules: [

117
pages/index.vue
View File

@ -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%
h3
font-size: 1.2rem
line-height: 1.5rem
text-align: center
font-family: 'Mainfont-Bold'
color: darken($pink, 10%)
text-transform: uppercase
.imageBox
margin: 0rem auto 1rem auto
width: 100%
max-width: 180px
aspect-ratio: 5 / 4
object-fit: cover
border-radius: 1rem
display: block
p
font-size: .9rem
text-align: left !important
&:nth-child(1)
border-radius: $loopShape1
&:nth-child(2)
border-radius: $loopShape2
&:nth-child(3)
border-radius: $loopShape3
&:nth-child(4)
border-radius: $loopShape4
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