44107c0734
Some checks failed
Build and publish / build (push) Failing after 19s
Source moved verbatim from mp/shop/ on 2026-04-29; mp was the first concrete adapter consuming the libreshop toolkit. Builds and publishes git.librete.ch/libreshop/shop on every main / v* push via the standard .gitea/workflows/build.yml shared across libreshop components.
120 lines
2.9 KiB
Vue
120 lines
2.9 KiB
Vue
<template>
|
|
<section class="w-full bg-gray-950 text-white overflow-hidden pt-0 h-min-[22rem] h-[48vh] lg:h-[60vh] relative">
|
|
<div class="h-min-[22rem] h-[48vh] lg:h-[60vh] bg-cover bg-center shadow-xl" :style="`background-image: url('${slide04Url}')`">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-black/0 to-black/60"></div>
|
|
|
|
<div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/100 to-black/0 bg-opacity-60 py-6 pb-4 lg:py-8">
|
|
<div class="container mx-auto px-6 lg:px-12 text-center relative">
|
|
<div class="hero-carousel">
|
|
<div class="hero-slide">
|
|
<div class="w-full px-6 text-center">
|
|
<h3 class="font-bebas text-2xl lg:text-3xl leading-none mb-1">100% Recyceltes Altpapier</h3>
|
|
<hr class="w-20 h-1 border-red-600 border-t-[3px] mx-auto mb-2" />
|
|
<p class="block lg:w-2/3 mx-auto text-sm lg:text-md leading-tight tracking-wide">
|
|
Umweltfreundliche Materialien für eine nachhaltige Zukunft
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="hero-slide">
|
|
<div class="w-full px-6 text-center">
|
|
<h3 class="font-bebas text-2xl lg:text-3xl leading-none mb-1">Hergestellt in Deutschland</h3>
|
|
<hr class="w-20 h-1 border-red-600 border-t-[3px] mx-auto mb-2" />
|
|
<p class="block lg:w-2/3 mx-auto text-sm lg:text-md leading-tight tracking-wide">
|
|
Qualität und Tradition aus lokaler Produktion
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="hero-slide">
|
|
<div class="w-full px-6 text-center">
|
|
<h3 class="font-bebas text-2xl lg:text-3xl leading-none mb-1">Höchste Qualität</h3>
|
|
<hr class="w-20 h-1 border-red-600 border-t-[3px] mx-auto mb-2" />
|
|
<p class="block lg:w-2/3 mx-auto text-sm lg:text-md leading-tight tracking-wide">
|
|
Premium-Produkte für anspruchsvolle Anwendungen
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import slide04Url from "~/assets/landingpage/04.jpg";
|
|
</script>
|
|
|
|
<style scoped>
|
|
.hero-carousel {
|
|
position: relative;
|
|
min-height: 4.5rem;
|
|
}
|
|
|
|
.hero-slide {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0;
|
|
animation: hero-fade 9.6s infinite;
|
|
}
|
|
|
|
.hero-slide:nth-child(1) {
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.hero-slide:nth-child(2) {
|
|
animation-delay: 3.2s;
|
|
}
|
|
|
|
.hero-slide:nth-child(3) {
|
|
animation-delay: 6.4s;
|
|
}
|
|
|
|
@keyframes hero-fade {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
5% {
|
|
opacity: 1;
|
|
}
|
|
28% {
|
|
opacity: 1;
|
|
}
|
|
33.33% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 990px) {
|
|
.hero-carousel {
|
|
display: flex;
|
|
gap: 2.5rem;
|
|
min-height: auto;
|
|
}
|
|
|
|
.hero-slide {
|
|
position: static;
|
|
opacity: 1;
|
|
animation: none;
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hero-carousel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
min-height: auto;
|
|
}
|
|
|
|
.hero-slide {
|
|
position: static;
|
|
opacity: 1;
|
|
animation: none;
|
|
}
|
|
}
|
|
</style>
|