Merge branch 'tag-var-1-nobg' of https://github.com/B2Bitcoin/B2Bitco…

…inBootik into tag-var-1-nobg

src/lib/components/TagWidget.svelte

@@ -11,6 +11,7 @@
 	import TagWidgetVariation6 from './TagWidget/TagWidgetVariation6.svelte';
 	import TagWidgetVariation1CtAless from './TagWidget/TagWidgetVariation1CTAless.svelte';
 	import TagWidgetVariation4Reverse from './TagWidget/TagWidgetVariation4Reverse.svelte';
+	import TagWidgetVariation1noBG from './TagWidget/TagWidgetVariation1noBG.svelte';
 
 	let className = '';
 	export { className as class };
@@ -30,6 +31,10 @@
 			component: TagWidgetVariation1CtAless,
 			pictureType: 'full'
 		},
+		'var-1-noBG': {
+			component: TagWidgetVariation1noBG,
+			pictureType: 'full'
+		},
 		'var-2': {
 			component: TagWidgetVariation2,
 			pictureType: 'wide'

src/lib/components/TagWidget/TagWidgetVariation1noBG.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+	import type { Tag } from '$lib/types/Tag';
+	import type { Picture } from '$lib/types/Picture';
+	import PictureComponent from '../Picture.svelte';
+	import VariationFourTemplateWidget from './TagWidgetVariation4.svelte';
+
+	let className = '';
+	export { className as class };
+
+	export let tag: Pick<
+		Tag,
+		'_id' | 'name' | 'title' | 'subtitle' | 'content' | 'shortContent' | 'cta'
+	>;
+	export let picture: Picture | undefined;
+	export let avatar: Picture | undefined;
+</script>
+
+<div class="hidden sm:inline">
+	<div class="flex mt-12 mb-12">
+		<div class="mx-auto tagWidget flex rounded sm:gap-2 {className}">
+			<div class="flex flex-col text-end w-[50%] m-2">
+				<h2 class="text-6xl body-title pb-2 uppercase">{tag.title}</h2>
+				<h2 class="text-md md:text-xl">
+					{tag.content}
+				</h2>
+				<div class="flex text-centern justify-between mt-auto">
+					{#each tag.cta as cta}
+						<div class="btn tagWidget-cta text-xl text-center w-auto p-1">
+							<a class="tagWidget-hyperlink" href={cta.href}>{cta.label}</a>
+						</div>
+					{/each}
+				</div>
+			</div>
+
+			<div class="flex w-[50%] mb-2">
+				<PictureComponent {picture} class="w-auto h-full object-cover" />
+			</div>
+		</div>
+	</div>
+</div>
+
+<svelte:component
+	this={VariationFourTemplateWidget}
+	{tag}
+	picture={avatar}
+	class="{className} sm:hidden"
+/>