feat(selection): lock single-option boxes, drop the about link

Recovered work in progress that sat uncommitted since 2026-05: a
SelectionBox renders as a plain div instead of a NuxtLink when locked,
so a variant with only one choice reads as decided rather than
clickable, and it reports aria-checked in that state. useProductContent
gained the content lookups the details and index pages now use, the
cookie banner says Schließen instead of Akzeptieren, the Über uns
header entry is gone, and ProductCard's hover shadow no longer relies
on a short-circuit that could yield a non-array.

pages/index.vue

@@ -49,23 +49,32 @@
 			</section>
 		</template>
 
-		<!-- CTA Section -->
-		<section class="py-16 bg-gray-900 text-white">
-			<div class="container mx-auto px-6 text-center">
-				<h3 class="text-3xl lg:text-4xl font-bebas mb-4">Premium Notizbücher für kreative Köpfe</h3>
-				<p class="text-lg opacity-80 max-w-2xl mx-auto mb-8">
-					Erfahre wie unsere handgefertigten Notizbücher aus recyceltem Papier hergestellt werden
-				</p>
-				<NuxtLink
-					to="/notebooks"
-					class="inline-block px-8 py-3 rounded-full font-medium bg-white text-gray-900 hover:bg-gray-200 transition-all duration-200"
-					@click="trackEvent('start-page-cta-clicked')"
-				>
-					Jetzt entdecken
+		<!-- Promo bands for standalone products (e.g. Journaling Booklet) -->
+		<section
+			v-for="promo in promoCovers"
+			:key="promo.id"
+			class="py-16 lg:py-24 bg-gradient-to-br from-violet-50 via-white to-rose-50"
+		>
+			<div class="container mx-auto px-6 flex flex-col-reverse lg:flex-row items-center gap-10 lg:gap-16">
+				<div class="lg:w-1/2">
+					<p class="text-sm uppercase tracking-widest opacity-60 mb-3">Neu im Sortiment</p>
+					<Heading :level="2" html-tag="h2">{{ promo.name }}</Heading>
+					<p v-if="promo.details" class="mt-4 text-lg leading-relaxed opacity-80 xl:w-5/6" v-html="promo.details" />
+					<NuxtLink
+						:to="`/details/${promo.productSlug}`"
+						class="mt-8 inline-block px-8 py-3 rounded-full font-medium bg-gray-900 text-white hover:bg-gray-700 transition-all duration-200"
+						@click="trackEvent('promo-cta-clicked', { product: promo.productSlug })"
+					>
+						{{ promo.name }} entdecken
+					</NuxtLink>
+				</div>
+				<NuxtLink :to="`/details/${promo.productSlug}`" class="lg:w-1/2 block">
+					<img v-if="promo.image" :src="promo.image" :alt="promo.name" loading="lazy" class="w-full rounded-lg shadow-xl" />
 				</NuxtLink>
 			</div>
 		</section>
 
+
 		<!-- Testimonials (hidden for now)
 		<section v-if="testimonials?.length > 0" class="px-6 lg:container mx-auto mt-20 mb-32">
 			<div class="text-center mb-10">
@@ -99,8 +108,11 @@ const shopApi = useShopApi();
 const { data: coversData } = await useAsyncData("landing-covers", async () => {
 	try {
 		const { data } = await shopApi.getProductCovers();
+		// Standalone covers (e.g. Journaling Booklet) are excluded from the landing
+		// grid — they get a dedicated promo placement / direct link, not a row here.
+		const sellable = data.filter((cover: any) => !cover.attributes?.standalone);
 		const covers = await Promise.all(
-			data.map(async (cover: any) => {
+			sellable.map(async (cover: any) => {
 				const productsResponse = await shopApi.getCheapestProducts(cover.id, 1, 10);
 				return {
 					id: cover.id,
@@ -122,6 +134,36 @@ const { data: coversData } = await useAsyncData("landing-covers", async () => {
 
 const covers = computed(() => coversData.value ?? []);
 
+// Standalone covers (e.g. Journaling Booklet) → dedicated promo band with a
+// direct link to the first product of that category. Link resolves by SLUG
+// (never hardcoded ids — prod ids differ from dev).
+const { data: promoData } = await useAsyncData("landing-promos", async () => {
+	try {
+		const { data } = await shopApi.getProductCovers();
+		const standalone = data.filter((c: any) => c.attributes?.standalone);
+		const promos = await Promise.all(
+			standalone.map(async (cover: any) => {
+				const productsResponse = await shopApi.getCheapestProducts(cover.id, 1, 1);
+				const first = productsResponse?.data?.[0] as any;
+				const img = first?.images?.images?.[0];
+				return {
+					id: cover.id,
+					name: first?.name ?? cover.attributes?.name,
+					details: cover.attributes?.copyText?.details,
+					sort: cover.attributes?.sort ?? 0,
+					productSlug: first?.slug,
+					image: img?.formats?.medium?.url ?? img?.formats?.small?.url ?? img?.url
+				};
+			})
+		);
+		return promos.filter((p) => p.productSlug).sort((a, b) => a.sort - b.sort);
+	} catch (error) {
+		console.error("Error fetching promos:", error);
+		return [];
+	}
+});
+const promoCovers = computed(() => promoData.value ?? []);
+
 // Testimonials
 const testimonials: Testimonial[] = [
 	{