feat: extract shop from mp/shop — initial libreshop/shop

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.

components/Hero.vue

@@ -0,0 +1,119 @@
+<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>