serviceBox home change
This commit is contained in:
parent
51cb3a9726
commit
b12ae0f00b
@ -26,7 +26,7 @@
|
||||
|
||||
<style scoped lang="sass">
|
||||
.ctaBox
|
||||
margin: 5vh 10%
|
||||
margin: 8rem 10%
|
||||
text-align: center
|
||||
h3
|
||||
font-size: clamp(1.4rem, .8rem + 2vw, 1.8rem)
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
<div class="box pb-5">
|
||||
<div class="box">
|
||||
<div class="container">
|
||||
<h2 class="pt-4 pb-3">{{ title }}</h2>
|
||||
|
||||
@ -123,26 +123,30 @@ const props = defineProps({
|
||||
<style lang="sass" scoped>
|
||||
.banner-wrapper
|
||||
position: relative
|
||||
margin: 3rem auto 6rem auto
|
||||
svg
|
||||
margin: 0 0 -3px 0
|
||||
@media(max-width: $breakPointSM)
|
||||
svg
|
||||
margin: 0
|
||||
margin: 0
|
||||
|
||||
|
||||
.box
|
||||
background-color: $beige
|
||||
width: 100%
|
||||
min-height: 50px
|
||||
margin-top: -20px
|
||||
margin: -20px auto 0 auto
|
||||
padding: 3rem 0
|
||||
display: block
|
||||
position: relative
|
||||
|
||||
h2
|
||||
color: #333
|
||||
font-size: 1.2rem
|
||||
font-family: 'Mainfont-Bold'
|
||||
padding-top: 0rem
|
||||
|
||||
.marquee
|
||||
overflow: hidden
|
||||
width: 100%
|
||||
padding: 3rem auto
|
||||
|
||||
.marquee-track
|
||||
display: flex
|
||||
|
||||
@ -7,25 +7,29 @@
|
||||
</div>
|
||||
|
||||
<div class="serviceBoxes">
|
||||
<div
|
||||
v-for="(service, index) in services"
|
||||
:key="index"
|
||||
class="service"
|
||||
>
|
||||
<NuxtImg
|
||||
provider="strapi"
|
||||
:src="service.backgroundImage"
|
||||
alt=""
|
||||
class="service-bg"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div class="overlay"></div>
|
||||
<div class="serviceContent">
|
||||
<h3>{{ service.title }}</h3>
|
||||
<p>{{ service.description }}</p>
|
||||
<NuxtLinkLocale :to="service.link" class="link">{{ service.linktext }}</NuxtLinkLocale>
|
||||
</div>
|
||||
</div>
|
||||
<NuxtLinkLocale
|
||||
v-for="(service, index) in services"
|
||||
:key="index"
|
||||
:to="service.link"
|
||||
class="service"
|
||||
>
|
||||
<NuxtImg
|
||||
provider="strapi"
|
||||
:src="service.backgroundImage"
|
||||
alt=""
|
||||
class="service-bg"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<div class="overlay"></div>
|
||||
<div class="serviceContent">
|
||||
<svg>
|
||||
<use :xlink:href="`/assets/icons/collection.svg#${service.icon}`" />
|
||||
</svg>
|
||||
<h3>{{ service.title }}</h3>
|
||||
<p>{{ service.description }}</p>
|
||||
<span class="link">{{ service.linktext }}</span>
|
||||
</div>
|
||||
</NuxtLinkLocale>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@ -37,28 +41,32 @@ const services = [
|
||||
description: 'Webseiten, die für alle zugänglich sind. Barrierefrei, nutzerfreundlich und technisch modern gestaltet für optimale Bedienbarkeit und bessere Reichweite.',
|
||||
link: 'services-accessibility',
|
||||
linktext: 'Mehr erfahren',
|
||||
backgroundImage: '/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp'
|
||||
backgroundImage: '/uploads/DML_Service_Header_Accessibility_de8f72f0c1.webp',
|
||||
icon: 'accessibility'
|
||||
},
|
||||
{
|
||||
title: 'Suchmaschinen-Optimierung',
|
||||
description: 'Mit technischer SEO sorgen wir für bessere Sichtbarkeit in Google & Co. Schnelle, strukturierte Webseiten, die Besucher anziehen und überzeugen.',
|
||||
link: 'services-seo',
|
||||
linktext: 'Mehr erfahren',
|
||||
backgroundImage: '/uploads/DML_Service_Header_SEO_b11ae8940a.webp'
|
||||
backgroundImage: '/uploads/DML_Service_Header_SEO_b11ae8940a.webp',
|
||||
icon: 'search'
|
||||
},
|
||||
{
|
||||
title: 'Headless CMS',
|
||||
description: 'Flexibles Content-Management mit modernem Headless CMS. Schnelle Webseiten, einfache Pflege und volle Kontrolle über Inhalte und Design.',
|
||||
link: 'services-cms',
|
||||
linktext: 'Mehr erfahren',
|
||||
backgroundImage: '/uploads/DML_Service_Header_CMS_a438599970.webp'
|
||||
backgroundImage: '/uploads/DML_Service_Header_CMS_a438599970.webp',
|
||||
icon: 'database'
|
||||
},
|
||||
{
|
||||
title: 'KI-Kompatibilität',
|
||||
title: 'KI-Kompatibilität im Web',
|
||||
description: 'Webseiten, die mit Künstlicher Intelligenz zusammenarbeiten. Zukunftssicher, smart optimiert und bereit für automatisierte Prozesse und Personalisierung.',
|
||||
link: 'services-ai',
|
||||
linktext: 'Mehr erfahren',
|
||||
backgroundImage: '/uploads/DML_Service_Header_AI_639dd0d7b1.webp'
|
||||
backgroundImage: '/uploads/DML_Service_Header_AI_639dd0d7b1.webp',
|
||||
icon: 'ai'
|
||||
},
|
||||
]
|
||||
</script>
|
||||
@ -94,6 +102,7 @@ const services = [
|
||||
border-radius: 8px
|
||||
cursor: pointer
|
||||
transition: transform 0.3s ease
|
||||
text-decoration: none
|
||||
|
||||
&:hover
|
||||
transform: translateY(-5px)
|
||||
@ -118,11 +127,19 @@ const services = [
|
||||
position: relative
|
||||
padding: 1.5rem
|
||||
z-index: 2
|
||||
|
||||
svg
|
||||
width: 2.5rem
|
||||
height: 2.5rem
|
||||
float: left
|
||||
margin: 0 1.3rem 1rem 0
|
||||
fill: white
|
||||
|
||||
h3
|
||||
margin: 0 0 0.5rem 0
|
||||
font-size: 1.25rem
|
||||
font-weight: 700
|
||||
min-height: 3.5rem
|
||||
|
||||
p
|
||||
margin: 0 0 1rem 0
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
|
||||
<ServicesTeaser />
|
||||
|
||||
<section class="sectionSolutions">
|
||||
<!-- <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"/>
|
||||
</svg>
|
||||
@ -89,7 +89,7 @@
|
||||
<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>
|
||||
</section> -->
|
||||
|
||||
|
||||
|
||||
|
||||
@ -38,8 +38,16 @@
|
||||
<symbol id="accessibility" viewBox="0 0 512 512">
|
||||
<path d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm161.5-86.1c-12.2-5.2-26.3 .4-31.5 12.6s.4 26.3 12.6 31.5l11.9 5.1c17.3 7.4 35.2 12.9 53.6 16.3l0 50.1c0 4.3-.7 8.6-2.1 12.6l-28.7 86.1c-4.2 12.6 2.6 26.2 15.2 30.4s26.2-2.6 30.4-15.2l24.4-73.2c1.3-3.8 4.8-6.4 8.8-6.4s7.6 2.6 8.8 6.4l24.4 73.2c4.2 12.6 17.8 19.4 30.4 15.2s19.4-17.8 15.2-30.4l-28.7-86.1c-1.4-4.1-2.1-8.3-2.1-12.6l0-50.1c18.4-3.5 36.3-8.9 53.6-16.3l11.9-5.1c12.2-5.2 17.8-19.3 12.6-31.5s-19.3-17.8-31.5-12.6L338.7 175c-26.1 11.2-54.2 17-82.7 17s-56.5-5.8-82.7-17l-11.9-5.1zM256 160a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/>
|
||||
</symbol>
|
||||
<symbol viewBox="0 0 15 15" id="radix-icons-accessibility">
|
||||
<path fill="currentColor" fill-rule="evenodd" d="M.877 7.5a6.623 6.623 0 1 1 13.246 0a6.623 6.623 0 0 1-13.246 0M7.5 1.827a5.673 5.673 0 1 0 0 11.346a5.673 5.673 0 0 0 0-11.346M7.125 9c-.055.127-.793 2.96-.793 2.96a.5.5 0 1 1-.966-.26s.88-2.827.88-3.43V6.801l-1.958-.525a.5.5 0 1 1 .258-.966s1.654.563 2.3.563h1.309c.645 0 2.298-.563 2.298-.563a.5.5 0 1 1 .26.966l-1.966.527V8.27c0 .603.88 3.427.88 3.427a.5.5 0 0 1-.966.259S7.92 9.127 7.869 9c-.05-.127-.219-.127-.219-.127h-.307s-.173 0-.218.127M7.5 5.12a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25" clip-rule="evenodd"></path>
|
||||
<symbol id="search" viewBox="0 0 512 512">
|
||||
<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
|
||||
</symbol>
|
||||
|
||||
<symbol id="database" viewBox="0 0 448 512">
|
||||
<path d="M448 80l0 48c0 44.2-100.3 80-224 80S0 172.2 0 128L0 80C0 35.8 100.3 0 224 0S448 35.8 448 80zM393.2 214.7c20.8-7.4 39.9-16.9 54.8-28.6L448 288c0 44.2-100.3 80-224 80S0 332.2 0 288L0 186.1c14.9 11.8 34 21.2 54.8 28.6C99.7 230.7 159.5 240 224 240s124.3-9.3 169.2-25.3zM0 346.1c14.9 11.8 34 21.2 54.8 28.6C99.7 390.7 159.5 400 224 400s124.3-9.3 169.2-25.3c20.8-7.4 39.9-16.9 54.8-28.6l0 85.9c0 44.2-100.3 80-224 80S0 476.2 0 432l0-85.9z"/>
|
||||
</symbol>
|
||||
<symbol id="ai" viewBox="0 0 640 512">
|
||||
<path d="M320 0c17.7 0 32 14.3 32 32l0 64 120 0c39.8 0 72 32.2 72 72l0 272c0 39.8-32.2 72-72 72l-304 0c-39.8 0-72-32.2-72-72l0-272c0-39.8 32.2-72 72-72l120 0 0-64c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16l32 0c8.8 0 16-7.2 16-16s-7.2-16-16-16l-32 0zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224l16 0 0 192-16 0c-26.5 0-48-21.5-48-48l0-96c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48l0 96c0 26.5-21.5 48-48 48l-16 0 0-192 16 0z"/>
|
||||
</symbol>
|
||||
<symbol id="radix-icons-accessibility" viewBox="0 0 15 15" >
|
||||
<path fill="currentColor" fill-rule="evenodd" d="M.877 7.5a6.623 6.623 0 1 1 13.246 0a6.623 6.623 0 0 1-13.246 0M7.5 1.827a5.673 5.673 0 1 0 0 11.346a5.673 5.673 0 0 0 0-11.346M7.125 9c-.055.127-.793 2.96-.793 2.96a.5.5 0 1 1-.966-.26s.88-2.827.88-3.43V6.801l-1.958-.525a.5.5 0 1 1 .258-.966s1.654.563 2.3.563h1.309c.645 0 2.298-.563 2.298-.563a.5.5 0 1 1 .26.966l-1.966.527V8.27c0 .603.88 3.427.88 3.427a.5.5 0 0 1-.966.259S7.92 9.127 7.869 9c-.05-.127-.219-.127-.219-.127h-.307s-.173 0-.218.127M7.5 5.12a1.125 1.125 0 1 0 0-2.25a1.125 1.125 0 0 0 0 2.25" clip-rule="evenodd"></path>
|
||||
</symbol>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.7 KiB After Width: | Height: | Size: 7.2 KiB |
Loading…
x
Reference in New Issue
Block a user