temp

apps/web/src/routes/+page.svelte

@@ -8,16 +8,13 @@
 	import { tabindex } from 'frontend/tabindex';
 	import Wunschgutschein from 'components/complete/wunschgutschein.svelte';
 	import MainShowcase from './main_showcase.svelte';
+	import EqualSwap from 'components/layout/equal_swap.svelte';
 </script>
 
 <Meta />
 
 <div>
-	{#if $tabindex === 0}
-		<BlackFridayShowcase />
-	{:else}
-		<MainShowcase />
-	{/if}
+	<EqualSwap components={[BlackFridayShowcase, MainShowcase]} bind:active={$tabindex} />
 	<Tabs
 		tabs={[
 			{

apps/web/src/routes/black_friday_showcase.svelte

@@ -2,7 +2,7 @@
 	import AboformularButton from 'components/elements/interactive/buttons/aboformular_button.svelte';
 </script>
 
-<div class="bg-slate-900 py-8 shade w-full flex flex-col items-center">
+<div class="bg-slate-900 py-8 shade w-full flex flex-col items-center showcase_size h-full">
 	<h1 class="no_gradient text-white text-center glow mb-0">
 		Alles von Sky inklusive Paramount+ und Netflix ab € 40 mtl.*
 	</h1>

apps/web/src/routes/header/header.svelte

@@ -107,7 +107,6 @@
 </div>
 
 <style lang="scss">
-	$top_bar_size: max(min(230px - 11vw, 180px), 100px);
 	.top_header_container {
 		position: absolute;
 		left: 0px;
@@ -122,7 +121,7 @@
 		justify-content: left;
 	}
 	.header_center_alignment {
-		padding-top: calc($top_bar_size / 2 - 35px);
+		padding-top: calc(var(--top_bar_size) / 2 - 35px);
 		display: flex;
 		align-items: center;
 		height: 70px;
@@ -131,7 +130,7 @@
 	.header_blue_bar {
 		background: linear-gradient(to right, #49358d, #027fc7);
 		min-height: 100px;
-		min-height: $top_bar_size;
+		min-height: var(--top_bar_size);
 		min-width: 100vw;
 	}
 	.header_logo {

apps/web/src/routes/showcase_template.svelte

@@ -45,7 +45,7 @@
 	] satisfies priceable_asset_id[];
 </script>
 
-<div class="alignment" style:margin-top={`${top_margin}px`}>
+<div class="alignment showcase_size" style:margin-top={`${top_margin}px`}>
 	<div class="side_alignment">
 		{#if !primary_image && !hide_left}
 			<button class="left_side" on:click={async () => load_form('Showcase_images')}>

packages/components/layout/equal_swap.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+	import { maybe_global } from 'functional-utilities';
+	import { SvelteComponent, onMount, onDestroy } from 'svelte';
+	
+	export let components: (typeof SvelteComponent<{}>)[];
+	export let active = 0;
+
+	let elements: HTMLElement[] = [];
+	let outer_ref: HTMLElement;
+	let resizeObserver: ResizeObserver;
+
+	function recalculate_size() {
+		const { width, height } = elements.reduce(
+			(acc, el) => {
+				const { width, height } = el.getBoundingClientRect();
+				return {
+					width: Math.max(acc.width, width),
+					height: Math.max(acc.height, height)
+				};
+			},
+			{ width: 0, height: 0 }
+		);
+		outer_ref.style.width = `${width}px`;
+		outer_ref.style.height = `${height}px`;
+	}
+
+	function setupListeners() {
+		resizeObserver = new ResizeObserver(() => {
+			recalculate_size();
+		});
+
+		elements.forEach((el) => {
+			resizeObserver.observe(el);
+		});
+
+		maybe_global('window')?.addEventListener('resize', recalculate_size)
+	}
+
+	onMount(() => {
+		setupListeners();
+		recalculate_size();
+	});
+
+	onDestroy(() => {
+		if (resizeObserver) {
+			resizeObserver.disconnect();
+		}
+		maybe_global('window')?.removeEventListener('resize', recalculate_size);
+	});
+</script>
+
+<div class="outer" bind:this={outer_ref}>
+	{#each components as component, i}
+		<div class:active={i === active} class="inner" bind:this={elements[i]}>
+			<svelte:component this={component} />
+		</div>
+	{/each}
+</div>
+
+<style>
+	.outer {
+		position: relative;
+        height: 845px; 
+	}
+	.inner {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		visibility: hidden;
+	}
+	.inner.active {
+		visibility: visible;
+	}
+</style>

packages/config/global.scss

@@ -29,6 +29,11 @@ body {
 
 :root {
 	--block-width: min(1000px, calc(100vw - 70px));
+	--top_bar_size: max(min(230px - 11vw, 180px), 100px);
+}
+
+.showcase_size {
+	min-height: calc(100vh - var(--top_bar_size) - 38px);
 }
 
 $gradient-safezone: 5px;