chore(deps): update dependency @vercel/node to v3.0.20

Merge pull request #18 from LoredDev/10-frontend-form-control
feat(frontend): form html and css fim do hiatus
2024-02-25 09:35:25 +00:00 · 2023-12-26 19:02:56 -03:00 · 2023-12-07 18:33:04 -03:00 · 2023-12-06 09:35:07 -03:00 · 2023-12-01 14:20:15 -03:00 · 2023-12-01 12:42:25 -03:00
31 changed files with 1407 additions and 1055 deletions
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -2,5 +2,5 @@
 . "$(dirname -- "$0")/_/husky.sh"
 pnpm dlx commitlint --edit ${1}
-pnpm dlx lint-staged
+pnpm run lint:fix
--- a/.lintstagedrc
+++ b/.lintstagedrc
@@ -1,4 +0,0 @@
 {
 	"gitDir": "./.git",
 	"*": "eslint --fix"
 }
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,14 +1,6 @@
 import { configs, defineConfig, presets } from '@eslegant/js';
 export default defineConfig([
 	{
 		ignores: [
 			'**/*.svg.js',
 			'**/*/test.*',
 			'**/*.{woff,woff2,ttf}',
 			'**/*/package.json',
 		],
 	},
 	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 	...presets.strict,
 	configs.environments.node.strict.default,
--- a/index.html
+++ b/index.html
@@ -5,14 +5,84 @@
 	<title></title>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<link href="src/css/style.css" rel="stylesheet">
 	<!-- auto-refresh in dev -->
-	<!-- <script type="text/javascript" src="https://livejs.com/live.js"></script> -->
+	<script type="text/javascript" src="https://livejs.com/live.js"></script>
 	<script type="module" src="./packages/banners/src/index.js"></script>
 </head>
 <body>
-	<a href="packages/banners/test.html">Test</a>
+	<div class="container">
-	<h1> Hello, world </h1>
+		<div class="banner">
 		</div>
 		<div class="centralize-verticaly">
 			<div class="options">
 				<h1>Lored's Markdown</h1>
 				<form class="options-grid-container">
 					<input class="txt-input" type="text" id="title" name="banner-title" placeholder="Title">
 					<input class="txt-input" type="text" id="subtitle" name="banner-subtitle" placeholder="Subtitle">
 					<input class="txt-input" type="url" id="icon" name="icon" placeholder="Icon name or link">
 					<input class="txt-input" type="url" id="bg-img-link" name="bg-img-link" placeholder="Background Image link">
 					<div class="style-layout">
 						<label for="layout">Layout</label>
 						<select class="txt-input" name="layout" id="layout">
 							<option value="horizontal">Horizontal</option>
 							<option value="vertical">Vertical</option>
 						</select>
 						<div class="center-txt-vertically">
 							<input type="checkbox" id="rtl" name="rtl">
 							<label for="rtl">Right-to-left</label>
 						</div>
 					</div>
 					<div class="style-layout">
 						<label for="bg-color">Background</label>
 						<input type="color" id="bg-color" name="bg-color">
 					</div>
 					<div class="repo-wrapper">
 						<label for="repo-url">Repo-Info</label>
 						<input class="txt-input span-all" type="url" name="repo-url" id="repo-url" placeholder="Repository url">
 						<div class="list-of-items">
 							<label for="show-info">Show info:</label>
 							<div class="center-txt-vertically">
 								<input type="checkbox" id="issues" value="issues" name="show-info">
 								<label for="issues">Issues</label><br>
 							</div>
 							<div class="center-txt-vertically">
 								<input type="checkbox" id="prs" value="prs" name="show-info">
 								<label for="prs">Pull requests</label><br>
 							</div>
 							<div class="center-txt-vertically">
 								<input type="checkbox" id="contributors" value="contributors" name="show-info">
 								<label for="contributors">Contributors</label><br>
 							</div>
 							<br>
 						</div>
 					</div>
 					<div class="list-of-items">
 						<label for="deco">Event decoration:</label>
 						<div class="center-txt-vertically">
 							<input type="radio" id="halloween" value="halloween" name="deco">
 							<label for="halloween">Halloween</label><br>
 						</div>
 						<div class="center-txt-vertically">
 							<input type="radio" id="christmas" value="christmas" name="deco">
 						<label for="christmas">Christmas</label><br>
 						</div>
 						<div class="center-txt-vertically">
 							<input type="radio" id="easter" value="easter" name="deco">
 						<label for="easter">Easter</label><br>
 						</div>
 						<div class="center-txt-vertically">
 							<input type="radio" id="pride" value="pride" name="deco">
 							<label for="pride">Pride month</label><br>
 						</div>
 					</div>
 				</form>
 			</div>
 		</div>
 	</div>
 </body>
 </html>
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -16,6 +16,8 @@
 		"./**/*.test.js",
 		"./src/**/*.js",
 		"./api/**/*.js",
 		"./packages/*/src/**/*.js",
 		"./packages/*/scripts/**/*.js",
 		"./commitlint.config.cjs",
 		"./eslint.config.js"
 	],
--- a/package.json
+++ b/package.json
@@ -20,7 +20,6 @@
 		"@commitlint/config-conventional": "^18.4.3",
 		"@commitlint/types": "^18.4.3",
 		"@vercel/node": "^3.0.11",
 		"cal-sans": "^1.0.1",
 		"eslint": "^8.54.0",
 		"husky": "^8.0.0",
 		"turbo": "^1.10.16",
--- a/packages/banners/.lintstagedrc
+++ b/packages/banners/.lintstagedrc
@@ -1,4 +0,0 @@
 {
 	"gitDir": "../../.git",
 	"*": "eslint --fix"
 }
--- a/packages/banners/jsconfig.json
+++ b/packages/banners/jsconfig.json
@@ -1,7 +1,3 @@
 {
-	"extends": "../../jsconfig.json",
+	"extends": "../../jsconfig.json"
 	"include": [
 		"./src/**/*",
 		"./scripts/**/*.js"
 	]
 }
--- a/packages/banners/package.json
+++ b/packages/banners/package.json
@@ -16,9 +16,5 @@
 		"@types/node": "^20.10.0",
 		"eslint": "^8.54.0",
 		"linkedom": "^0.16.4"
 	},
 	"dependencies": {
 		"cal-sans": "^1.0.1",
 		"opentype.js": "^1.3.4"
 	}
 }
--- a/packages/banners/scripts/inkscape-convert.js
+++ b/packages/banners/scripts/inkscape-convert.js
@@ -83,9 +83,6 @@ for (const p of paths) {
 	const file = await fs.readFile(p);
 	const svg = covert(file.toString());
 	const fileContent = `/* eslint-disable */\nconst svg = \`${svg}\`;\nexport default svg;`;
 	await fs.writeFile(p.replaceAll('.inkscape.svg', '.svg.js'), fileContent);
 	await fs.writeFile(p.replaceAll('.inkscape.svg', '.svg'), svg);
 	// eslint-disable-next-line no-console
 	console.log(`File ${p.replace(process.cwd(), '')} converted!`);
--- a/packages/banners/src/index.d.ts
+++ b/packages/banners/src/index.d.ts
@@ -1,42 +0,0 @@
 import type { BuiltinLayouts, DeepReadonly } from './types';
 type BannerObject = DeepReadonly<{
 	background?: [string, string] | {
 		color?: string,
 		image?: string,
 	} | string,
 	icon?: string,
 	layout?: {
 		rtl: boolean,
 		type: BuiltinLayouts,
 	} | string,
 	lib?: {
 		document: Document,
 		fetch?: ((
 			info: RequestInfo | URL,
 			init?: RequestInit
 		) => Promise<Response>) | undefined,
 	},
 	repository?: {
 		contributors?: boolean,
 		issues?: boolean,
 		pullRequests?: boolean,
 		starts?: boolean,
 		url: string,
 	} | string,
 	subtitle?: string,
 	textColor?: {
 		icon?: string,
 		subtitle?: string,
 		title: string,
 	} | string,
 	title: string,
 }>;
 declare class Banner {
 	public constructor(banner: BannerObject);
 	public toString(): string;
 }
 export { Banner, type BannerObject };
--- a/packages/banners/src/index.js
+++ b/packages/banners/src/index.js
@@ -1,270 +1,2 @@
-/**
+// eslint-disable-next-line no-console
- * @typedef {import('./index.js').BannerObject} BannerObject
+console.log('Hello world from the package!');
 */
 import opentype from 'opentype.js';
 // eslint-disable-next-line import/no-unassigned-import
 import 'cal-sans';
 import getLocalLayout from './layouts.js';
 import { isValidIcon } from './utils.js';
 /**
 * @param {Readonly<string>} string - The string to be converted.
 * @param {Document} document - The document API to be used.
 * @returns {Element} - The DOM of the string.
 */
 function stringToHtml(string, document) {
 	const tmp = document.createElement('template');
 	tmp.innerHTML = string;
 	/** @type {Element} */
 	const dom = tmp.children[0];
 	return dom;
 }
 /**
 * @param {Element} element - The element to be converted to string.
 * @param {Document} document - The document API to be used.
 * @returns {string} - The resulting string.
 */
 function htmlToString(element, document) {
 	const tmp = document.createElement('template');
 	tmp.appendChild(element);
 	return tmp.innerHTML;
 }
 /**
 * @typedef {{
 * modify(query: string, callback: (el: Element | null) => T): T,
 * asyncModify(query: string, callback: (el: Element | null) => Promise<T>): Promise<T>,
 * }} DOMHelper
 * @param {Element} element - The element to be manipulated.
 * @returns {DOMHelper}
 */
 function domHelper(element) {
 	return {
 		/**
 		 * @template T
 		 * @param {string} query - The query selector to find the element.
 		 * @param {(el: Element | null) => Promise<T>} callback - Callback to modify the element.
 		 * @returns {Promise<T>} - The return value of the callback.
 		 * @throws {Error} - Throws if the element is not found.
 		 */
 		async asyncModify(query, callback) {
 			const el = element.querySelector(query);
 			return callback(el);
 		},
 		/**
 		 * @template T
 		 * @param {string} query - The query selector to find the element.
 		 * @param {(el: Element | null) => T} callback - Callback to modify the element.
 		 * @returns {T} - The return value of the callback.
 		 * @throws {Error} - Throws if the element is not found.
 		 */
 		modify(query, callback) {
 			const el = element.querySelector(query);
 			return callback(el);
 		},
 	};
 }
 /**
 * @typedef {{
 * getTranslate(): [number, number],
 * getFontSize(): { value: number, type: string },
 * }} RegexHelper
 * @param {Readonly<string>} string - The string to get values from.
 * @returns {RegexHelper}
 */
 function regexHelper(string) {
 	// TODO (@guz013) [>=1.0.0]: Prevent possible ReDoS attacks.
 	/* eslint-disable security/detect-unsafe-regex */
 	return {
 		/**
 		 * Gets the value from `font-size` of a style string.
 		 * Returns 0px if none is found.
 		 *
 		 * @returns {{value: number, type: string}}
 		 */
 		getFontSize() {
 			if (!string.includes('font-size'))
 				return { type: 'px', value: 0 };
 			const fontSizeRegex = /font-size:(?:[^;]+)/gu;
 			const match = string.match(fontSizeRegex)?.[0].split(':')[1];
 			const type = [...match ?? '']
 				.filter(l => !'1234567890.'.includes(l))
 				.join('');
 			if (match) return { type, value: Number.parseFloat(match) };
 			return { type: 'px', value: 0 };
 		},
 		/**
 		 * Gets the `translate` x,y values from a transform string.
 		 * Returns [0,0] if none is found.
 		 *
 		 * @returns {[number, number]}
 		 */
 		getTranslate() {
 			if (!string.includes('translate')) return [0, 0];
 			const translateRegex = /translate\((?:[^,]+),(?:[^)]+)\)/gu;
 			const match = [...(string.match(translateRegex)?.[0] ?? '')]
 				.filter(l => Number.parseFloat(l));
 			return [
 				Number.parseFloat(match[0] ?? '0'),
 				Number.parseFloat(match[1] ?? '0'),
 			];
 		},
 	};
 	/* eslint-enable */
 }
 // eslint-disable-next-line max-len
 /* eslint-disable @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access */
 /**
 * @param {Element} el - The tspan element.
 * @param {Document} doc - The document object.
 * @returns {Promise<void>}
 */
 async function textToPath(el, doc) {
 	const fontFile = await fetch(
 		import.meta.resolve('/packages/banners/static/CalSans-SemiBold.ttf'),
 	);
 	const x = Number(el.getAttribute('x') ?? 0);
 	const y = Number(el.getAttribute('y') ?? 0);
 	const overlay = stringToHtml('<g data-banner-class="overlay"></g>', doc);
 	const styles = el.getAttribute('style');
 	const size = regexHelper(styles ?? '').getFontSize();
 	const font = opentype.parse(await fontFile.arrayBuffer());
 	const path = font.getPath(el.innerHTML, 0, 0, size.value);
 	const bbox = path.getBoundingBox();
 	const svg = path.toSVG(2);
 	overlay.innerHTML += `<g fill="#ff0000" transform="translate(${x - (bbox.x2 / 2)}, ${y})">${svg}</g>`;
 	el.parentElement?.parentElement?.appendChild(overlay);
 }
 /* eslint-enable */
 /**
 * @param {BannerObject} object - The Banner Object to be generated from.
 * @returns {Promise<string>} - The SVG of the banner.
 */
 async function banner(object) {
 	/** @type {Document} */
 	// @ts-expect-error because Document is not compatible with Readonly<Document>
 	const doc = object.lib?.document ?? globalThis.document;
 	/** @type {(info: URL | RequestInfo, init?: RequestInit) => Promise<Response>} */
 	// @ts-expect-error because fetch is Readonly in Banner object;
 	const lFetch = object.lib?.fetch ?? globalThis.fetch;
 	/** @type {Readonly<string>} */
 	const layoutSvg = await getLocalLayout('vertical', true);
 	const dom = stringToHtml(layoutSvg, doc);
 	const helper = domHelper(dom);
 	await helper.asyncModify('[data-banner-class="icon"]', async (el) => {
 		if (!el || !object.icon || !isValidIcon(object.icon)) return;
 		const [iconSet, iconName] = object.icon.split(':');
 		const res = await lFetch(`https://api.iconify.design/${iconSet}/${iconName}.svg`);
 		const resSvg = stringToHtml(await res.text(), doc);
 		resSvg.setAttribute('x', '22');
 		resSvg.setAttribute('y', '33');
 		resSvg.setAttribute('width', '13');
 		resSvg.setAttribute('height', '13');
 		if (resSvg.children[0].getAttribute('fill') === 'currentColor')
 			resSvg.children[0].setAttribute('fill', '#000000');
 		// eslint-disable-next-line require-atomic-updates
 		el.innerHTML = htmlToString(resSvg, doc);
 	});
 	await helper.asyncModify(
 		'[data-banner-class="title"] > tspan',
 		async (el) => {
 			if (!el) return;
 			el.innerHTML = object.title;
 			if (!object.subtitle) {
 				const transform = el.parentElement?.getAttribute('transform');
 				const coords = regexHelper(transform ?? '').getTranslate();
 				coords[1] += 3;
 				el.parentElement?.setAttribute('transform', `${transform ?? ''} translate(${coords.join(',')})`);
 				const styles = el.getAttribute('style');
 				const size = regexHelper(styles ?? '').getFontSize();
 				el.setAttribute('style', `${styles};font-size:${size.value + 2}${size.type};`);
 			}
 			await textToPath(el, doc);
 		},
 	);
 	await helper.asyncModify(
 		'[data-banner-class="subtitle"] > tspan',
 		async (el) => {
 			if (!el) return;
 			el.innerHTML = object.subtitle ?? '';
 			await textToPath(el, doc);
 		},
 	);
 	helper.modify(
 		'[data-banner-class="solid-color"]',
 		(el) => {
 			if (
 				!el ||
 				!object.background ||
 				!(typeof object.background === 'string') ||
 				!object.background.toString().startsWith('#')
 			) return;
 			const styles = el.getAttribute('style');
 			el.setAttribute('style', `${styles};fill:${object.background};`);
 		},
 	);
 	return htmlToString(dom, doc);
 }
 /**
 * Test function.
 */
 async function test() {
 	const testBanner = await banner({
 		background: '#ffff00',
 		icon: 'solar:4k-bold',
 		lib: {
 			// @ts-expect-error because Document is not DeepReadonly<Document>
 			document: new Document(),
 			fetch,
 		},
 		subtitle: 'this is a test with icon',
 		title: 'Hello, world',
 	});
 	const body = globalThis.document.getElementsByTagName('body')[0];
 	body.innerHTML += `${testBanner}`;
 }
 await test();
 export default banner;
--- a/packages/banners/src/layouts.js
+++ b/packages/banners/src/layouts.js
@@ -1,30 +0,0 @@
 /**
 * Imports a local layout from the static folder.
 *
 * @param {import('./types.d.ts').BuiltinLayouts} layout - The banner layout.
 * @param {boolean} [rtl] - Is the layout right-to-left?
 * @returns {Promise<string>} - The SVG string of the layout file.
 */
 async function getLocalLayout(layout, rtl = false) {
 	let layoutFile;
 	/* eslint-disable import/no-relative-parent-imports */
 	switch (layout) {
 		case 'vertical': {
 			layoutFile = await import('../static/vertical.svg.js');
 			break;
 		}
 		default: {
 			if (rtl) {
 				layoutFile = await import('../static/horizontal-rtl.svg.js');
 				break;
 			}
 			layoutFile = await import('../static/horizontal.svg.js');
 			break;
 		}
 	}
 	/* eslint-enable */
 	return layoutFile.default;
 }
 export default getLocalLayout;
--- a/packages/banners/src/types.d.ts
+++ b/packages/banners/src/types.d.ts
@@ -1,30 +0,0 @@
 type primitive = boolean | null | number | string | undefined;
 /* eslint-disable no-use-before-define */
 /**
 * Makes all property of a object readonly.
 *
 * @package
 * @see https://github.com/microsoft/Typescript/issues/13923#issue-comment-372258196
 * @author Dean177
 */
 type DeepReadonly<T> =
 	T extends primitive ? T :
 		T extends (infer U)[] ? DeepReadonlyArray<U> :
 			DeepReadonlyObject<T>;
 /* eslint-enable */
 type DeepReadonlyArray<T> = readonly DeepReadonly<T>[];
 type DeepReadonlyObject<T> = {
 	readonly [P in keyof T]: DeepReadonly<T[P]>
 };
 /**
 * Built-in banner layouts.
 *
 * @package
 */
 type BuiltinLayouts = 'horizontal' | 'vertical';
 export type { BuiltinLayouts, DeepReadonly };
--- a/packages/banners/src/utils.js
+++ b/packages/banners/src/utils.js
@@ -1,39 +0,0 @@
 /**
 * Checks if a given string is a URL.
 *
 * @param {Readonly<string>} string - The string to be checked.
 * @returns {boolean}
 */
 function isURL(string) {
 	try {
 		const url = new URL(string);
 		return url.protocol === 'http' || url.protocol === 'https';
 	}
 	catch {
 		return false;
 	}
 }
 /**
 * Checks if a given string is a valid Iconify's icon name.
 *
 * @param {string} string - The string to be checked.
 * @returns {boolean}
 */
 function isValidIcon(string) {
 	if (string.includes('--')) return false;
 	// eslint-disable-next-line no-secrets/no-secrets
 	const VALID_CHARS = 'abcdefghijklmnopqrstuvwxyz1234567890-:';
 	if ([...string].some(l => !VALID_CHARS.includes(l)))
 		return false;
 	if (!string.includes(':')) return false;
 	return true;
 }
 export { isURL, isValidIcon };
--- a/packages/banners/static/CalSans-SemiBold.ttf
+++ b/packages/banners/static/CalSans-SemiBold.ttf
--- a/packages/banners/static/CalSans-SemiBold.woff
+++ b/packages/banners/static/CalSans-SemiBold.woff
--- a/packages/banners/static/CalSans-SemiBold.woff2
+++ b/packages/banners/static/CalSans-SemiBold.woff2
--- a/packages/banners/static/design.inkscape.svg
+++ b/packages/banners/static/design.inkscape.svg
@@ -9,7 +9,7 @@
   id="svg1"
   xml:space="preserve"
   sodipodi:docname="design.inkscape.svg"
-   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   inkscape:version="1.3.1 (91b66b0783, 2023-11-16, custom)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:xlink="http://www.w3.org/1999/xlink"
@@ -25,12 +25,12 @@
     inkscape:deskcolor="#505050"
     inkscape:document-units="mm"
     inkscape:zoom="1.1011145"
-     inkscape:cx="156.20537"
+     inkscape:cx="155.75129"
     inkscape:cy="-119.42446"
-     inkscape:window-width="2560"
+     inkscape:window-width="2540"
-     inkscape:window-height="1011"
+     inkscape:window-height="1023"
     inkscape:window-x="0"
-     inkscape:window-y="32"
+     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer2"
     showgrid="false"
@@ -41,10 +41,7 @@
       height="48.491169"
       id="page18"
       margin="0"
-       bleed="0"
+       bleed="0" /><inkscape:page
       inkscape:export-filename="horizontal-rtl.inkscape.svg"
       inkscape:export-xdpi="96"
       inkscape:export-ydpi="96" /><inkscape:page
       x="0"
       y="-115.57619"
       width="162.68883"
--- a/packages/banners/static/horizontal-rtl.inkscape.svg
+++ b/packages/banners/static/horizontal-rtl.inkscape.svg
@@ -1,81 +1,233 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg width="162.68884mm" height="42.772182mm" viewBox="0 0 162.68884 42.772182" version="1.1" id="svg1"
+<svg
-	xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
+   width="162.68884mm"
-	xmlns:svg="http://www.w3.org/2000/svg">
+   height="42.772182mm"
-	<defs id="defs1">
+   viewBox="0 0 162.68884 42.772182"
-		<linearGradient id="linearGradient55">
+   version="1.1"
-			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
+   id="svg1"
-			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
+   xml:space="preserve"
-		</linearGradient>
+   sodipodi:docname="design.inkscape.svg"
-		<linearGradient id="linearGradient14">
+   inkscape:version="1.3.1 (91b66b0783, 2023-11-16, custom)"
-			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-		</linearGradient>
+   xmlns:xlink="http://www.w3.org/1999/xlink"
-		<linearGradient id="linearGradient82-2">
+   xmlns="http://www.w3.org/2000/svg"
-			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
-			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
+     id="namedview1"
-			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
+     pagecolor="#505050"
-			<stop style="stop-color:#00ffff;stop-opacity:1;" offset="0.59760052" id="stop107" />
+     bordercolor="#eeeeee"
-			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
+     borderopacity="1"
-			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
+     inkscape:showpageshadow="0"
-		</linearGradient>
+     inkscape:pageopacity="0"
-		<mask maskUnits="userSpaceOnUse" id="mask2">
+     inkscape:pagecheckerboard="0"
-			<path id="path2"
+     inkscape:deskcolor="#505050"
-				style="display:inline;opacity:1;fill:url(#linearGradient3);stroke-width:0.303146;paint-order:fill markers stroke"
+     inkscape:document-units="mm"
-				d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" />
+     inkscape:zoom="1.1011145"
-		</mask>
+     inkscape:cx="155.75129"
-		<linearGradient xlink:href="#linearGradient14" id="linearGradient3" gradientUnits="userSpaceOnUse"
+     inkscape:cy="-119.42446"
-			gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515" y1="45.720142" x2="165.80252"
+     inkscape:window-width="2540"
-			y2="15.906352" />
+     inkscape:window-height="1023"
-		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient10" gradientUnits="userSpaceOnUse"
+     inkscape:window-x="0"
-			gradientTransform="translate(-7.92313,-22.037966)" x1="18.784613" y1="57.455349" x2="159.75043"
+     inkscape:window-y="0"
-			y2="57.455349" />
+     inkscape:window-maximized="1"
-		<linearGradient xlink:href="#linearGradient55" id="linearGradient11" gradientUnits="userSpaceOnUse"
+     inkscape:current-layer="layer2"
-			gradientTransform="matrix(-1,0,0,0.78569196,170.61192,-7.6495857)" x1="12.732515" y1="45.720142"
+     showgrid="false"
-			x2="165.80252" y2="15.906352" />
+     inkscape:export-bgcolor="#ffffff00"><inkscape:page
-		<filter style="color-interpolation-filters:sRGB" id="filter56" x="-0.031419723" y="-0.15732742"
+       x="0"
-			width="1.0628394" height="1.3991792">
+       y="5.1822312e-08"
-			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)"
+       width="162.68884"
-				id="feFlood55" />
+       height="42.772182"
-			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur55" />
+       id="page20"
-			<feOffset result="offset" in="blur" dx="0.000000" dy="2.583867" id="feOffset55" />
+       margin="0"
-			<feComposite result="comp1" operator="in" in="flood" in2="offset" id="feComposite55" />
+       bleed="0"
-			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite56" />
+       inkscape:export-filename="horizontal.inkscape.svg"
-		</filter>
+       inkscape:export-xdpi="318.59933"
-	</defs>
+       inkscape:export-ydpi="318.59933" /></sodipodi:namedview><defs
-	<path id="path56"
+     id="defs1"><linearGradient
-		style="display:inline;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)"
+       id="linearGradient55"
-		d="m 8.5244,4.809412 h 145.64001 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.058115 -1.65689,3.715005 -3.715,3.715005 H 8.5244 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715005 V 8.524412 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
+       inkscape:collect="always"
-	<path id="path3" style="fill:url(#linearGradient10);stroke-width:0.0784105;paint-order:fill markers stroke"
+       inkscape:label="background-gradient"><stop
-		d="m 12.34934,34.306982 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34934 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
+         style="stop-color:#ffffff;stop-opacity:1;"
-	<path id="path4" style="display:inline;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke"
+         offset="0.30320638"
-		d="M 154.1129,4.886402 H 8.57589 c -2.05665,0 -3.71237,1.652718 -3.71237,3.705644 v 23.081198 c 0,2.052926 1.65572,3.705643 3.71237,3.705643 H 154.1129 c 2.05665,0 3.71237,-1.652717 3.71237,-3.705643 V 8.592046 c 0,-2.052926 -1.65572,-3.705644 -3.71237,-3.705644 z" />
+         id="stop54" /><stop
-	<image width="134.7771" height="89.851387" preserveAspectRatio="none"
+         style="stop-color:#ffffff;stop-opacity:0;"
-		xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="image4" x="60.238495"
+         offset="1"
-		y="-3.5220199" mask="url(#mask2)" transform="matrix(-1,0,0,1,170.61192,-19.396681)"
+         id="stop55" /></linearGradient><linearGradient
-		style="image-rendering:optimizeSpeed" />
+       id="linearGradient14"
-	<path id="path6"
+       inkscape:collect="always"
-		style="display:inline;fill:url(#linearGradient11);stroke-width:0.303146;paint-order:fill markers stroke"
+       inkscape:label="background-image-mask-gradient"><stop
-		d="M 154.1644,4.847907 H 8.52439 c -2.05811,0 -3.715,1.65689 -3.715,3.715 v 23.139475 c 0,2.05811 1.65689,3.715 3.715,3.715 H 154.1644 c 2.05811,0 3.715,-1.65689 3.715,-3.715 V 8.562907 c 0,-2.05811 -1.65689,-3.715 -3.715,-3.715 z" />
+         style="stop-color:#000000;stop-opacity:1;"
-	<path id="path7" style="display:inline;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke"
+         offset="0.30320638"
-		d="M 154.16441,4.809412 H 8.5244 c -2.05811,0 -3.715,1.65689 -3.715,3.715 v 23.139475 c 0,2.05811 1.65689,3.715 3.715,3.715 h 145.64001 c 2.05811,0 3.715,-1.65689 3.715,-3.715 V 8.524412 c 0,-2.05811 -1.65689,-3.715 -3.715,-3.715 z" />
+         id="stop14" /><stop
-	<text xml:space="preserve"
+         style="stop-color:#ffffff;stop-opacity:1;"
-		style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke"
+         offset="1"
-		inkscape:label="subtitle" x="132.04556" y="24.535566" id="text7">
+         id="stop15" /></linearGradient><linearGradient
-		<tspan id="tspan7"
+       id="linearGradient82-2"
-			style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.133036"
+       inkscape:label="color-stripe-gradient"><stop
-			x="132.04556" y="24.535566">Subtitle placeholder</tspan>
+         style="stop-color:#ff0000;stop-opacity:1;"
-	</text>
+         offset="0"
-	<text xml:space="preserve"
+         id="stop104" /><stop
-		style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke"
+         style="stop-color:#ffff00;stop-opacity:1;"
-		inkscape:label="title" x=" 132.00441" y="19.122091" id="text8">
+         offset="0.18269952"
-		<tspan id="tspan8"
+         id="stop105" /><stop
-			style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.194064"
+         style="stop-color:#00ff00;stop-opacity:1;"
-			x="132.00441" y="19.122091">Title placeholder</tspan>
+         offset="0.39030838"
-	</text>
+         id="stop106" /><stop
-	<path fill="currentColor"
+         style="stop-color:#00ffff;stop-opacity:1;"
-		d="m 138.47176,14.808605 c -0.23588,0.06157 -0.38734,0.148721 -0.50554,0.264214 -0.16616,0.16342 -0.27456,0.392234 -0.33394,0.82424 -0.061,0.445075 -0.0622,1.034514 -0.0622,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.19395,-0.03922 V 14.80861 Z m 0.9016,7.238362 h 6.91313 v -4.269908 c 0,-0.845486 -10e-4,-1.434925 -0.0622,-1.88 -0.0593,-0.432006 -0.1678,-0.660808 -0.33394,-0.82424 -0.16678,-0.162884 -0.39988,-0.269115 -0.84113,-0.326862 -0.45434,-0.05992 -1.05576,-0.061 -1.91868,-0.061 h -2.40461 c -0.54586,0 -0.98714,0 -1.35267,0.01585 z m 0.75178,0.883071 h -0.66244 c -0.58835,0 -0.79373,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.92448,0.837858 c 0.008,0.208103 0.0235,0.391689 0.0457,0.555118 0.0593,0.432006 0.16781,0.660808 0.33395,0.82424 0.16678,0.162884 0.39985,0.269115 0.84113,0.326862 0.45433,0.05992 1.05576,0.061 1.91868,0.061 h 2.40461 c 0.86292,0 1.46488,-0.001 1.91868,-0.06047 0.44125,-0.0583 0.67497,-0.164512 0.84113,-0.327408 0.16616,-0.163419 0.27456,-0.392233 0.33394,-0.824235 0.05,-0.362818 0.0599,-0.822603 0.0616,-1.438194 h -3.7562 v 1.638125 c 0,0.162349 0,0.243512 -0.0572,0.276199 -0.0572,0.03269 -0.13507,-0.0039 -0.29091,-0.07627 l -0.74633,-0.347551 c -0.0533,-0.02452 -0.0795,-0.0365 -0.10789,-0.0365 -0.0284,0 -0.0546,0.01194 -0.10788,0.0365 l -0.74634,0.347566 c -0.15628,0.07245 -0.23425,0.108958 -0.29145,0.07626 -0.0566,-0.03268 -0.0566,-0.114397 -0.0566,-0.276199 z"
+         offset="0.59760052"
-		id="path8" style="stroke-width:0.544769" />
+         id="stop107" /><stop
-</svg>
+         style="stop-color:#0000ff;stop-opacity:1;"
         offset="0.79487675"
         id="stop108" /><stop
         style="stop-color:#ff00ff;stop-opacity:1;"
         offset="1"
         id="stop109" /></linearGradient><mask
       maskUnits="userSpaceOnUse"
       id="mask2"><path
         id="path2"
         style="display:inline;opacity:1;fill:url(#linearGradient3);stroke-width:0.303146;paint-order:fill markers stroke"
         inkscape:label="mask"
         d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" /></mask><linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient14"
       id="linearGradient3"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)"
       x1="12.732515"
       y1="45.720142"
       x2="165.80252"
       y2="15.906352" /><linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient82-2"
       id="linearGradient10"
       gradientUnits="userSpaceOnUse"
       gradientTransform="translate(309.94657,46.282782)"
       x1="18.784613"
       y1="57.455349"
       x2="159.75043"
       y2="57.455349" /><linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient55"
       id="linearGradient11"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(1,0,0,0.78569196,0.91790394,-0.86860867)"
       x1="12.732515"
       y1="45.720142"
       x2="165.80252"
       y2="15.906352" /><filter
       style="color-interpolation-filters:sRGB"
       inkscape:label="Drop Shadow"
       id="filter56"
       x="-0.031419724"
       y="-0.15732744"
       width="1.0628394"
       height="1.3991793"><feFlood
         result="flood"
         in="SourceGraphic"
         flood-opacity="0.200000"
         flood-color="rgb(0,0,0)"
         id="feFlood55" /><feGaussianBlur
         result="blur"
         in="SourceGraphic"
         stdDeviation="2.003924"
         id="feGaussianBlur55" /><feOffset
         result="offset"
         in="blur"
         dx="0.000000"
         dy="2.583867"
         id="feOffset55" /><feComposite
         result="comp1"
         operator="in"
         in="flood"
         in2="offset"
         id="feComposite55" /><feComposite
         result="comp2"
         operator="over"
         in="SourceGraphic"
         in2="comp1"
         id="feComposite56" /></filter></defs><g
     inkscape:groupmode="layer"
     id="layer2"
     inkscape:label="horizontal-rtl"
     inkscape:highlight-color="#3645a9"
     inkscape:export-filename="./horizontal-rtl.inkscape.svg"
     inkscape:export-xdpi="318.5993"
     inkscape:export-ydpi="318.5993"
     transform="translate(-317.8697,-68.320748)"><path
       id="path56"
       style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)"
       inkscape:label="shadow"
       d="m 326.3941,73.13016 h 145.64001 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.058115 -1.65689,3.715005 -3.715,3.715005 H 326.3941 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715005 V 76.84516 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" /><path
       id="path3"
       style="fill:url(#linearGradient10);stroke-width:0.0784105;paint-order:fill markers stroke"
       inkscape:label="color-stripe"
       d="m 330.21904,102.62773 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 h -137.9901 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" /><g
       id="g7"
       inkscape:label="background"
       transform="matrix(-1,0,0,1,489.39952,61.539771)"><path
         id="path4"
         style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke"
         inkscape:label="fallback"
         d="M 17.416924,11.667379 H 162.95393 c 2.05665,0 3.71237,1.652718 3.71237,3.705644 v 23.081198 c 0,2.052926 -1.65572,3.705643 -3.71237,3.705643 H 17.416924 c -2.056654,0 -3.712372,-1.652717 -3.712372,-3.705643 V 15.373023 c 0,-2.052926 1.655718,-3.705644 3.712372,-3.705644 z" /><g
         id="g4"
         inkscape:label="image"><image
           width="134.7771"
           height="89.851387"
           preserveAspectRatio="none"
           xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg"
           id="image4"
           x="60.238495"
           y="-3.5220199"
           inkscape:label="embed"
           mask="url(#mask2)"
           transform="translate(0.91790394,-12.615704)"
           style="image-rendering:optimizeSpeed"
           inkscape:svg-dpi="1"
           inkscape:export-filename="horizontal.svg"
           inkscape:export-xdpi="96"
           inkscape:export-ydpi="96" /></g><path
         id="path6"
         style="display:inline;opacity:1;fill:url(#linearGradient11);stroke-width:0.303146;paint-order:fill markers stroke"
         inkscape:label="gradient"
         d="M 17.365419,11.628884 H 163.00543 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365419 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.343884 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" /><path
         id="path7"
         style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke"
         inkscape:label="solid-color"
         d="M 17.365414,11.590389 H 163.00542 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365414 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.305389 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" /></g><g
       id="g9"
       inkscape:label="content"
       transform="matrix(-1,0,0,1,488.48162,48.924067)"><text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke"
         x="-38.566364"
         y="43.932247"
         id="text7"
         inkscape:label="subtitle"
         transform="scale(-1,1)"><tspan
           sodipodi:role="line"
           id="tspan7"
           style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.133036"
           x="-38.566364"
           y="43.932247">Subtitle placeholder</tspan></text><text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke"
         x="-38.607517"
         y="38.518772"
         id="text8"
         inkscape:label="title"
         transform="scale(-1,1)"><tspan
           sodipodi:role="line"
           id="tspan8"
           style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.194064"
           x="-38.607517"
           y="38.518772">Title placeholder</tspan></text><g
         id="g8"
         inkscape:label="icon"
         transform="matrix(-1,0,0,1,57.367258,0)"><path
           fill="currentColor"
           d="m 25.227101,34.205286 c -0.235876,0.06157 -0.387336,0.148721 -0.505541,0.264214 -0.166159,0.16342 -0.274563,0.392234 -0.333944,0.82424 -0.06095,0.445075 -0.06219,1.034514 -0.06219,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.193956,-0.03922 v -7.274315 z m 0.901602,7.238362 h 6.913129 V 37.17374 c 0,-0.845486 -10e-4,-1.434925 -0.06219,-1.88 -0.05929,-0.432006 -0.167805,-0.660808 -0.333943,-0.82424 -0.166777,-0.162884 -0.399875,-0.269115 -0.841133,-0.326862 -0.454332,-0.05992 -1.055759,-0.061 -1.918675,-0.061 h -2.404613 c -0.545855,0 -0.987134,0 -1.352664,0.01585 z m 0.751773,0.883071 h -0.662432 c -0.588352,0 -0.793735,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.924479,0.837858 c 0.0083,0.208103 0.02347,0.391689 0.04572,0.555118 0.05929,0.432006 0.167806,0.660808 0.333945,0.82424 0.166776,0.162884 0.399853,0.269115 0.841132,0.326862 0.454333,0.05992 1.055759,0.061 1.918675,0.061 h 2.404613 c 0.862917,0 1.464878,-10e-4 1.918676,-0.06047 0.441258,-0.0583 0.674973,-0.164512 0.841132,-0.327408 0.166159,-0.163419 0.274564,-0.392233 0.333945,-0.824235 0.05003,-0.362818 0.05992,-0.822603 0.06157,-1.438194 h -3.756205 v 1.638125 c 0,0.162349 0,0.243512 -0.05724,0.276199 -0.05724,0.03269 -0.135068,-0.0039 -0.290912,-0.07627 L 28.19057,43.817203 c -0.05334,-0.02452 -0.07948,-0.0365 -0.107886,-0.0365 -0.02842,0 -0.05456,0.01194 -0.107885,0.0365 l -0.746338,0.347566 c -0.156276,0.07245 -0.234249,0.108958 -0.291447,0.07626 -0.05662,-0.03268 -0.05662,-0.114397 -0.05662,-0.276199 z"
           id="path8"
           style="stroke-width:0.544769"
           inkscape:label="icon-svg" /></g></g></g></svg>
--- a/packages/banners/static/horizontal-rtl.svg
+++ b/packages/banners/static/horizontal-rtl.svg
--- a/packages/banners/static/horizontal-rtl.svg.js
+++ b/packages/banners/static/horizontal-rtl.svg.js
@@ -1,48 +0,0 @@
 /* eslint-disable */
 const svg = `<svg width="162.68884mm" height="42.772182mm" viewBox="0 0 162.68884 42.772182" version="1.1" id="svg1" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 	<defs id="defs1">
 		<linearGradient id="linearGradient55">
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
 			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
 		</linearGradient>
 		<linearGradient id="linearGradient14">
 			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
 		</linearGradient>
 		<linearGradient id="linearGradient82-2">
 			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
 			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
 			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
 			<stop style="stop-color:#00ffff;stop-opacity:1;" offset="0.59760052" id="stop107" />
 			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
 			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
 		</linearGradient>
 		<mask maskUnits="userSpaceOnUse" id="mask2">
 			<path id="path2" style="display:inline;opacity:1;fill:url(#linearGradient3);stroke-width:0.303146;paint-order:fill markers stroke" d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" />
 		</mask>
 		<linearGradient xlink:href="#linearGradient14" id="linearGradient3" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" />
 		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient10" gradientUnits="userSpaceOnUse" gradientTransform="translate(-7.92313,-22.037966)" x1="18.784613" y1="57.455349" x2="159.75043" y2="57.455349" />
 		<linearGradient xlink:href="#linearGradient55" id="linearGradient11" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1,0,0,0.78569196,170.61192,-7.6495857)" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" />
 		<filter style="color-interpolation-filters:sRGB" id="filter56" x="-0.031419723" y="-0.15732742" width="1.0628394" height="1.3991792">
 			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)" id="feFlood55" />
 			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur55" />
 			<feOffset result="offset" in="blur" dx="0.000000" dy="2.583867" id="feOffset55" />
 			<feComposite result="comp1" operator="in" in="flood" in2="offset" id="feComposite55" />
 			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite56" />
 		</filter>
 	</defs>
 	<path id="path56" style="display:inline;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)" d="m 8.5244,4.809412 h 145.64001 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.058115 -1.65689,3.715005 -3.715,3.715005 H 8.5244 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715005 V 8.524412 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
 	<path id="path3" style="fill:url(#linearGradient10);stroke-width:0.0784105;paint-order:fill markers stroke" d="m 12.34934,34.306982 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34934 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
 	<path id="path4" style="display:inline;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke" d="M 154.1129,4.886402 H 8.57589 c -2.05665,0 -3.71237,1.652718 -3.71237,3.705644 v 23.081198 c 0,2.052926 1.65572,3.705643 3.71237,3.705643 H 154.1129 c 2.05665,0 3.71237,-1.652717 3.71237,-3.705643 V 8.592046 c 0,-2.052926 -1.65572,-3.705644 -3.71237,-3.705644 z" />
 	<image width="134.7771" height="89.851387" preserveAspectRatio="none" xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="image4" x="60.238495" y="-3.5220199" mask="url(#mask2)" transform="matrix(-1,0,0,1,170.61192,-19.396681)" style="image-rendering:optimizeSpeed" />
 	<path id="path6" style="display:inline;fill:url(#linearGradient11);stroke-width:0.303146;paint-order:fill markers stroke" d="M 154.1644,4.847907 H 8.52439 c -2.05811,0 -3.715,1.65689 -3.715,3.715 v 23.139475 c 0,2.05811 1.65689,3.715 3.715,3.715 H 154.1644 c 2.05811,0 3.715,-1.65689 3.715,-3.715 V 8.562907 c 0,-2.05811 -1.65689,-3.715 -3.715,-3.715 z" />
 	<path id="path7" style="display:inline;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke" d="M 154.16441,4.809412 H 8.5244 c -2.05811,0 -3.715,1.65689 -3.715,3.715 v 23.139475 c 0,2.05811 1.65689,3.715 3.715,3.715 h 145.64001 c 2.05811,0 3.715,-1.65689 3.715,-3.715 V 8.524412 c 0,-2.05811 -1.65689,-3.715 -3.715,-3.715 z" />
 	<text data-banner-class="subtitle" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke" x="132.04556" y="24.535566" id="text7">
 		<tspan id="tspan7" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.133036" x="132.04556" y="24.535566">Subtitle placeholder</tspan>
 	</text>
 	<text data-banner-class="title" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke" x=" 132.00441" y="19.122091" id="text8">
 		<tspan id="tspan8" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:end;text-anchor:end;fill:#000000;fill-opacity:1;stroke-width:0.194064" x="132.00441" y="19.122091">Title placeholder</tspan>
 	</text>
 	<path fill="currentColor" d="m 138.47176,14.808605 c -0.23588,0.06157 -0.38734,0.148721 -0.50554,0.264214 -0.16616,0.16342 -0.27456,0.392234 -0.33394,0.82424 -0.061,0.445075 -0.0622,1.034514 -0.0622,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.19395,-0.03922 V 14.80861 Z m 0.9016,7.238362 h 6.91313 v -4.269908 c 0,-0.845486 -10e-4,-1.434925 -0.0622,-1.88 -0.0593,-0.432006 -0.1678,-0.660808 -0.33394,-0.82424 -0.16678,-0.162884 -0.39988,-0.269115 -0.84113,-0.326862 -0.45434,-0.05992 -1.05576,-0.061 -1.91868,-0.061 h -2.40461 c -0.54586,0 -0.98714,0 -1.35267,0.01585 z m 0.75178,0.883071 h -0.66244 c -0.58835,0 -0.79373,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.92448,0.837858 c 0.008,0.208103 0.0235,0.391689 0.0457,0.555118 0.0593,0.432006 0.16781,0.660808 0.33395,0.82424 0.16678,0.162884 0.39985,0.269115 0.84113,0.326862 0.45433,0.05992 1.05576,0.061 1.91868,0.061 h 2.40461 c 0.86292,0 1.46488,-0.001 1.91868,-0.06047 0.44125,-0.0583 0.67497,-0.164512 0.84113,-0.327408 0.16616,-0.163419 0.27456,-0.392233 0.33394,-0.824235 0.05,-0.362818 0.0599,-0.822603 0.0616,-1.438194 h -3.7562 v 1.638125 c 0,0.162349 0,0.243512 -0.0572,0.276199 -0.0572,0.03269 -0.13507,-0.0039 -0.29091,-0.07627 l -0.74633,-0.347551 c -0.0533,-0.02452 -0.0795,-0.0365 -0.10789,-0.0365 -0.0284,0 -0.0546,0.01194 -0.10788,0.0365 l -0.74634,0.347566 c -0.15628,0.07245 -0.23425,0.108958 -0.29145,0.07626 -0.0566,-0.03268 -0.0566,-0.114397 -0.0566,-0.276199 z" id="path8" style="stroke-width:0.544769" />
 </svg>`;
 export default svg;
--- a/packages/banners/static/horizontal.inkscape.svg
+++ b/packages/banners/static/horizontal.inkscape.svg
@@ -2,29 +2,32 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 <svg width="162.68883mm" height="42.772179mm" viewBox="0 0 162.68882 42.772178" version="1.1" id="svg1"
-	xml:space="preserve" sodipodi:docname="horizontal.inkscape.svg" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+	xml:space="preserve" sodipodi:docname="design.inkscape.svg"
-	inkscape:export-filename="horizontal.inkscape.svg" inkscape:export-xdpi="96" inkscape:export-ydpi="96"
+	inkscape:version="1.3.1 (91b66b0783, 2023-11-16, custom)"
 	xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
 	xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink"
 	xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 	<sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1"
 		inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#505050"
-		inkscape:document-units="mm" inkscape:zoom="2.2965073" inkscape:cx="210.31939" inkscape:cy="116.48123"
+		inkscape:document-units="mm" inkscape:zoom="1.1011145" inkscape:cx="155.75129" inkscape:cy="-119.42446"
-		inkscape:window-width="2560" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="32"
+		inkscape:window-width="2540" inkscape:window-height="1023" inkscape:window-x="0" inkscape:window-y="0"
-		inkscape:window-maximized="1" inkscape:current-layer="svg1" />
+		inkscape:window-maximized="1" inkscape:current-layer="layer2" showgrid="false"
 		inkscape:export-bgcolor="#ffffff00">
 		<inkscape:page x="0" y="0" width="162.68883" height="42.772179" id="page19" margin="0" bleed="0" />
 	</sodipodi:namedview>
 	<defs id="defs1">
-		<linearGradient id="linearGradient55">
+		<linearGradient id="linearGradient55" inkscape:collect="always" inkscape:label="background-gradient">
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
 			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
 		</linearGradient>
-		<linearGradient id="linearGradient14">
+		<linearGradient id="linearGradient14" inkscape:collect="always" inkscape:label="background-image-mask-gradient">
 			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
 		</linearGradient>
-		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient5" x1="18.784613" y1="57.455349"
+		<linearGradient inkscape:collect="always" xlink:href="#linearGradient82-2" id="linearGradient5" x1="18.784613"
-			x2="159.75043" y2="57.455349" gradientUnits="userSpaceOnUse"
+			y1="57.455349" x2="159.75043" y2="57.455349" gradientUnits="userSpaceOnUse"
-			gradientTransform="translate(-7.92311,-22.037977)" />
+			gradientTransform="translate(310.57446,-12.675088)" />
-		<linearGradient id="linearGradient82-2">
+		<linearGradient id="linearGradient82-2" inkscape:label="color-stripe-gradient">
 			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
 			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
 			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
@@ -32,19 +35,20 @@
 			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
 			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
 		</linearGradient>
-		<linearGradient xlink:href="#linearGradient55" id="linearGradient15" x1="12.732515" y1="45.720142"
+		<linearGradient inkscape:collect="always" xlink:href="#linearGradient55" id="linearGradient15" x1="12.732515"
-			x2="165.80252" y2="15.906352" gradientUnits="userSpaceOnUse"
+			y1="45.720142" x2="165.80252" y2="15.906352" gradientUnits="userSpaceOnUse"
-			gradientTransform="matrix(1,0,0,0.78569196,-7.92312,-7.6495972)" />
+			gradientTransform="matrix(1,0,0,0.78569196,0.91790394,-0.86860867)" />
 		<mask maskUnits="userSpaceOnUse" id="mask17">
 			<path id="path18"
 				style="display:inline;opacity:1;fill:url(#linearGradient18);stroke-width:0.303146;paint-order:fill markers stroke"
 				inkscape:label="mask"
 				d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" />
 		</mask>
-		<linearGradient xlink:href="#linearGradient14" id="linearGradient18" gradientUnits="userSpaceOnUse"
+		<linearGradient inkscape:collect="always" xlink:href="#linearGradient14" id="linearGradient18"
-			gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515" y1="45.720142" x2="165.80252"
+			gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515"
-			y2="15.906352" />
+			y1="45.720142" x2="165.80252" y2="15.906352" />
-		<filter style="color-interpolation-filters:sRGB" id="filter56" x="-0.031419724" y="-0.15732745"
+		<filter style="color-interpolation-filters:sRGB" inkscape:label="Drop Shadow" id="filter56" x="-0.031419724"
-			width="1.0628394" height="1.3991793">
+			y="-0.15732744" width="1.0628394" height="1.3991793">
 			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)"
 				id="feFlood55" />
 			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur55" />
@@ -53,39 +57,60 @@
 			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite56" />
 		</filter>
 	</defs>
-	<path id="path20"
+	<g inkscape:label="horizontal" inkscape:groupmode="layer" id="layer1"
-		style="display:inline;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)"
+		inkscape:export-filename="horizontal.inkscape.svg" inkscape:export-xdpi="318.59933"
-		d="M 8.524394,4.8094005 H 154.1644 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.663876 c 0,2.05811 -1.65689,3.714999 -3.715,3.714999 H 8.524394 c -2.05811,0 -3.715,-1.656889 -3.715,-3.715 V 8.5244005 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
+		inkscape:export-ydpi="318.59933" transform="translate(-318.49757,-9.3628894)">
-	<path id="color-stripe" style="fill:url(#linearGradient5);stroke-width:0.0784105;paint-order:fill markers stroke"
+		<path id="path20"
-		d="m 12.34935,34.30697 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34935 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
+			style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)"
-	<path id="fallback" style="display:inline;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke"
+			inkscape:label="shadow"
-		d="m 8.5759,4.8863906 h 145.53701 c 2.05665,0 3.71237,1.652718 3.71237,3.705644 V 31.673233 c 0,2.052926 -1.65572,3.705643 -3.71237,3.705643 H 8.5759 c -2.05665,0 -3.71237,-1.652717 -3.71237,-3.705643 V 8.5920346 c 0,-2.052926 1.65572,-3.705644 3.71237,-3.705644 z" />
+			d="M 17.365414,11.590389 H 163.00542 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365414 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.305389 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z"
-	<image width="134.7771" height="89.851387" preserveAspectRatio="none"
+			transform="translate(309.65655,2.5819009)" />
-		xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="embed" x="60.238495"
+		<path id="color-stripe"
-		y="-3.5220199" mask="url(#mask17)" transform="translate(-7.92312,-19.396692)"
+			style="fill:url(#linearGradient5);stroke-width:0.0784105;paint-order:fill markers stroke"
-		style="image-rendering:optimizeSpeed" />
+			inkscape:label="color-stripe"
-	<path id="gradient"
+			d="m 330.84692,43.669859 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 h -137.9901 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
-		style="display:inline;fill:url(#linearGradient15);stroke-width:0.303146;paint-order:fill markers stroke"
+		<g id="background" inkscape:label="background" transform="translate(309.65655,2.5819009)">
-		d="m 8.5244,4.8478956 h 145.64001 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.702371 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 8.5244 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 8.5628956 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z"
+			<path id="fallback"
-		inkscape:label="gradient" />
+				style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke"
-	<path id="solid-color" style="display:inline;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke"
+				inkscape:label="fallback"
-		d="M 8.52439,4.8094006 H 154.1644 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.663876 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 8.52439 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 8.5244006 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
+				d="M 17.416924,11.667379 H 162.95393 c 2.05665,0 3.71237,1.652718 3.71237,3.705644 v 23.081198 c 0,2.052926 -1.65572,3.705643 -3.71237,3.705643 H 17.416924 c -2.056654,0 -3.712372,-1.652717 -3.712372,-3.705643 V 15.373023 c 0,-2.052926 1.655718,-3.705644 3.712372,-3.705644 z" />
-	<text xml:space="preserve"
+			<g id="image" inkscape:label="image">
-		style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke"
+				<image width="134.7771" height="89.851387" preserveAspectRatio="none"
-		x="30.573963" y="24.535555" id="subtitle" inkscape:label="subtitle">
+					xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="embed"
-		<title id="title12">subtitle</title>
+					x="60.238495" y="-3.5220199" inkscape:label="embed" mask="url(#mask17)"
-		<tspan id="tspan4"
+					transform="translate(0.91790394,-12.615704)" style="image-rendering:optimizeSpeed"
-			style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036"
+					inkscape:svg-dpi="1" inkscape:export-filename="horizontal.svg" inkscape:export-xdpi="96"
-			x="30.573963" y="24.535555">Subtitle placeholder</tspan>
+					inkscape:export-ydpi="96" />
-	</text>
+			</g>
-	<text xml:space="preserve"
+			<path id="gradient"
-		style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke"
+				style="display:inline;opacity:1;fill:url(#linearGradient15);stroke-width:0.303146;paint-order:fill markers stroke"
-		x="30.532825" y="19.122078" id="title" inkscape:label="title">
+				inkscape:label="gradient"
-		<tspan id="tspan3"
+				d="M 17.365419,11.628884 H 163.00543 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365419 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.343884 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
-			style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064"
+			<path id="solid-color"
-			x="30.532825" y="19.122078">Title placeholder</tspan>
+				style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke"
-	</text>
+				inkscape:label="solid-color"
-	<path fill="currentColor"
+				d="M 17.365414,11.590389 H 163.00542 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365414 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.305389 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
-		d="m 17.30398,14.808594 c -0.23588,0.06157 -0.38733,0.148721 -0.50554,0.264214 -0.16616,0.16342 -0.27456,0.392234 -0.33394,0.82424 -0.0609,0.445075 -0.0622,1.034514 -0.0622,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.19395,-0.03922 v -7.274315 z m 0.9016,7.238362 h 6.91313 v -4.269908 c 0,-0.845486 -0.001,-1.434925 -0.0622,-1.88 -0.0593,-0.432006 -0.1678,-0.660808 -0.33394,-0.82424 -0.16678,-0.162884 -0.39988,-0.269115 -0.84113,-0.326862 -0.45434,-0.05992 -1.05576,-0.061 -1.91868,-0.061 h -2.40461 c -0.54586,0 -0.98714,0 -1.35267,0.01585 z m 0.75178,0.883071 h -0.66244 c -0.58835,0 -0.79373,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.92448,0.837858 c 0.008,0.208103 0.0235,0.391689 0.0457,0.555118 0.0593,0.432006 0.16781,0.660808 0.33395,0.82424 0.16678,0.162884 0.39985,0.269115 0.84113,0.326862 0.45434,0.05992 1.05576,0.061 1.91868,0.061 h 2.40461 c 0.86292,0 1.46488,-10e-4 1.91868,-0.06047 0.44125,-0.0583 0.67497,-0.164512 0.84113,-0.327408 0.16616,-0.163419 0.27456,-0.392233 0.33394,-0.824235 0.05,-0.362818 0.0599,-0.822603 0.0616,-1.438194 h -3.7562 v 1.638125 c 0,0.162349 0,0.243512 -0.0572,0.276199 -0.0572,0.03269 -0.13507,-0.0039 -0.29091,-0.07627 l -0.74638,-0.347551 c -0.0533,-0.02452 -0.0795,-0.0365 -0.10789,-0.0365 -0.0284,0 -0.0546,0.01194 -0.10788,0.0365 l -0.74634,0.347566 c -0.15628,0.07245 -0.23425,0.108958 -0.29145,0.07626 -0.0566,-0.03268 -0.0566,-0.114397 -0.0566,-0.276199 z"
+		</g>
-		id="icon-svg" style="stroke-width:0.544769" />
+		<g id="content" inkscape:label="content" transform="translate(310.57445,-10.033803)">
 			<title id="title11">content</title><text xml:space="preserve"
 				style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke"
 				x="38.497089" y="43.932247" id="subtitle" inkscape:label="subtitle">
 				<title id="title12">subtitle</title>
 				<tspan sodipodi:role="line" id="tspan4"
 					style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036"
 					x="38.497089" y="43.932247">Subtitle placeholder</tspan>
 			</text><text xml:space="preserve"
 				style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke"
 				x="38.455933" y="38.518772" id="title" inkscape:label="title">
 				<tspan sodipodi:role="line" id="tspan3"
 					style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064"
 					x="38.455933" y="38.518772">Title placeholder</tspan>
 			</text>
 			<g id="icon" inkscape:label="icon">
 				<path fill="currentColor"
 					d="m 25.227101,34.205286 c -0.235876,0.06157 -0.387336,0.148721 -0.505541,0.264214 -0.166159,0.16342 -0.274563,0.392234 -0.333944,0.82424 -0.06095,0.445075 -0.06219,1.034514 -0.06219,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.193956,-0.03922 v -7.274315 z m 0.901602,7.238362 h 6.913129 V 37.17374 c 0,-0.845486 -10e-4,-1.434925 -0.06219,-1.88 -0.05929,-0.432006 -0.167805,-0.660808 -0.333943,-0.82424 -0.166777,-0.162884 -0.399875,-0.269115 -0.841133,-0.326862 -0.454332,-0.05992 -1.055759,-0.061 -1.918675,-0.061 h -2.404613 c -0.545855,0 -0.987134,0 -1.352664,0.01585 z m 0.751773,0.883071 h -0.662432 c -0.588352,0 -0.793735,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.924479,0.837858 c 0.0083,0.208103 0.02347,0.391689 0.04572,0.555118 0.05929,0.432006 0.167806,0.660808 0.333945,0.82424 0.166776,0.162884 0.399853,0.269115 0.841132,0.326862 0.454333,0.05992 1.055759,0.061 1.918675,0.061 h 2.404613 c 0.862917,0 1.464878,-10e-4 1.918676,-0.06047 0.441258,-0.0583 0.674973,-0.164512 0.841132,-0.327408 0.166159,-0.163419 0.274564,-0.392233 0.333945,-0.824235 0.05003,-0.362818 0.05992,-0.822603 0.06157,-1.438194 h -3.756205 v 1.638125 c 0,0.162349 0,0.243512 -0.05724,0.276199 -0.05724,0.03269 -0.135068,-0.0039 -0.290912,-0.07627 L 28.19057,43.817203 c -0.05334,-0.02452 -0.07948,-0.0365 -0.107886,-0.0365 -0.02842,0 -0.05456,0.01194 -0.107885,0.0365 l -0.746338,0.347566 c -0.156276,0.07245 -0.234249,0.108958 -0.291447,0.07626 -0.05662,-0.03268 -0.05662,-0.114397 -0.05662,-0.276199 z"
 					id="icon-svg" style="stroke-width:0.544769" inkscape:label="icon-svg" />
 			</g>
 		</g>
 	</g>
 </svg>
--- a/packages/banners/static/horizontal.svg
+++ b/packages/banners/static/horizontal.svg
@@ -1,16 +1,18 @@
-<svg width="162.68883mm" height="42.772179mm" viewBox="0 0 162.68882 42.772178" version="1.1" id="svg1" xml:space="preserve" sodipodi:docname="horizontal.inkscape.svg" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)" inkscape:export-filename="horizontal.inkscape.svg" inkscape:export-xdpi="96" inkscape:export-ydpi="96" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+<svg width="162.68883mm" height="42.772179mm" viewBox="0 0 162.68882 42.772178" version="1.1" id="svg1" xml:space="preserve" sodipodi:docname="design.inkscape.svg" inkscape:version="1.3.1 (91b66b0783, 2023-11-16, custom)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
-	<sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1" inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#505050" inkscape:document-units="mm" inkscape:zoom="2.2965073" inkscape:cx="210.31939" inkscape:cy="116.48123" inkscape:window-width="2560" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="32" inkscape:window-maximized="1" inkscape:current-layer="svg1" />
+	<sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1" inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#505050" inkscape:document-units="mm" inkscape:zoom="1.1011145" inkscape:cx="155.75129" inkscape:cy="-119.42446" inkscape:window-width="2540" inkscape:window-height="1023" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="layer2" showgrid="false" inkscape:export-bgcolor="#ffffff00">
 		<inkscape:page x="0" y="0" width="162.68883" height="42.772179" id="page19" margin="0" bleed="0" />
 	</sodipodi:namedview>
 	<defs id="defs1">
-		<linearGradient id="linearGradient55">
+		<linearGradient data-banner-class="background-gradient" id="linearGradient55">
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
 			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
 		</linearGradient>
-		<linearGradient id="linearGradient14">
+		<linearGradient data-banner-class="background-image-mask-gradient" id="linearGradient14">
 			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
 		</linearGradient>
-		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient5" x1="18.784613" y1="57.455349" x2="159.75043" y2="57.455349" gradientUnits="userSpaceOnUse" gradientTransform="translate(-7.92311,-22.037977)" />
+		<linearGradient inkscape:collect="always" xlink:href="#linearGradient82-2" id="linearGradient5" x1="18.784613" y1="57.455349" x2="159.75043" y2="57.455349" gradientUnits="userSpaceOnUse" gradientTransform="translate(310.57446,-12.675088)" />
-		<linearGradient id="linearGradient82-2">
+		<linearGradient data-banner-class="color-stripe-gradient" id="linearGradient82-2">
 			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
 			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
 			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
@@ -18,12 +20,12 @@
 			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
 			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
 		</linearGradient>
-		<linearGradient xlink:href="#linearGradient55" id="linearGradient15" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-7.92312,-7.6495972)" />
+		<linearGradient inkscape:collect="always" xlink:href="#linearGradient55" id="linearGradient15" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,0.91790394,-0.86860867)" />
 		<mask maskUnits="userSpaceOnUse" id="mask17">
-			<path id="path18" style="display:inline;opacity:1;fill:url(#linearGradient18);stroke-width:0.303146;paint-order:fill markers stroke" d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" />
+			<path data-banner-class="mask" id="path18" style="display:inline;opacity:1;fill:url(#linearGradient18);stroke-width:0.303146;paint-order:fill markers stroke" d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" />
 		</mask>
-		<linearGradient xlink:href="#linearGradient14" id="linearGradient18" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" />
+		<linearGradient inkscape:collect="always" xlink:href="#linearGradient14" id="linearGradient18" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" />
-		<filter style="color-interpolation-filters:sRGB" id="filter56" x="-0.031419724" y="-0.15732745" width="1.0628394" height="1.3991793">
+		<filter data-banner-class="Drop Shadow" style="color-interpolation-filters:sRGB" id="filter56" x="-0.031419724" y="-0.15732744" width="1.0628394" height="1.3991793">
 			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)" id="feFlood55" />
 			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur55" />
 			<feOffset result="offset" in="blur" dx="0.000000" dy="2.583867" id="feOffset55" />
@@ -31,18 +33,27 @@
 			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite56" />
 		</filter>
 	</defs>
-	<path id="path20" style="display:inline;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)" d="M 8.524394,4.8094005 H 154.1644 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.663876 c 0,2.05811 -1.65689,3.714999 -3.715,3.714999 H 8.524394 c -2.05811,0 -3.715,-1.656889 -3.715,-3.715 V 8.5244005 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
+	<g data-banner-class="horizontal" id="layer1" transform="translate(-318.49757,-9.3628894)">
-	<path id="color-stripe" style="fill:url(#linearGradient5);stroke-width:0.0784105;paint-order:fill markers stroke" d="m 12.34935,34.30697 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34935 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
+		<path data-banner-class="shadow" id="path20" style="display:inline;opacity:1;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)" d="M 17.365414,11.590389 H 163.00542 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365414 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.305389 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" transform="translate(309.65655,2.5819009)" />
-	<path id="fallback" style="display:inline;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke" d="m 8.5759,4.8863906 h 145.53701 c 2.05665,0 3.71237,1.652718 3.71237,3.705644 V 31.673233 c 0,2.052926 -1.65572,3.705643 -3.71237,3.705643 H 8.5759 c -2.05665,0 -3.71237,-1.652717 -3.71237,-3.705643 V 8.5920346 c 0,-2.052926 1.65572,-3.705644 3.71237,-3.705644 z" />
+		<path data-banner-class="color-stripe" id="color-stripe" style="fill:url(#linearGradient5);stroke-width:0.0784105;paint-order:fill markers stroke" d="m 330.84692,43.669859 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 h -137.9901 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
-	<image width="134.7771" height="89.851387" preserveAspectRatio="none" xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="embed" x="60.238495" y="-3.5220199" mask="url(#mask17)" transform="translate(-7.92312,-19.396692)" style="image-rendering:optimizeSpeed" />
+		<g data-banner-class="background" id="background" transform="translate(309.65655,2.5819009)">
-	<path data-banner-class="gradient" id="gradient" style="display:inline;fill:url(#linearGradient15);stroke-width:0.303146;paint-order:fill markers stroke" d="m 8.5244,4.8478956 h 145.64001 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.702371 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 8.5244 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 8.5628956 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
+			<path data-banner-class="fallback" id="fallback" style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke" d="M 17.416924,11.667379 H 162.95393 c 2.05665,0 3.71237,1.652718 3.71237,3.705644 v 23.081198 c 0,2.052926 -1.65572,3.705643 -3.71237,3.705643 H 17.416924 c -2.056654,0 -3.712372,-1.652717 -3.712372,-3.705643 V 15.373023 c 0,-2.052926 1.655718,-3.705644 3.712372,-3.705644 z" />
-	<path id="solid-color" style="display:inline;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke" d="M 8.52439,4.8094006 H 154.1644 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.663876 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 8.52439 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 8.5244006 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
+			<g data-banner-class="image" id="image">
-	<text data-banner-class="subtitle" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke" x="30.573963" y="24.535555" id="subtitle">
+				<image data-banner-class="embed" width="134.7771" height="89.851387" preserveAspectRatio="none" xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="embed" x="60.238495" y="-3.5220199" mask="url(#mask17)" transform="translate(0.91790394,-12.615704)" style="image-rendering:optimizeSpeed" />
-		<title id="title12">subtitle</title>
+			</g>
-		<tspan id="tspan4" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036" x="30.573963" y="24.535555">Subtitle placeholder</tspan>
+			<path data-banner-class="gradient" id="gradient" style="display:inline;opacity:1;fill:url(#linearGradient15);stroke-width:0.303146;paint-order:fill markers stroke" d="M 17.365419,11.628884 H 163.00543 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365419 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.343884 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
-	</text>
+			<path data-banner-class="solid-color" id="solid-color" style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke" d="M 17.365414,11.590389 H 163.00542 c 2.05811,0 3.715,1.65689 3.715,3.715 v 23.139475 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 17.365414 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 15.305389 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
-	<text data-banner-class="title" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke" x="30.532825" y="19.122078" id="title">
+		</g>
-		<tspan id="tspan3" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064" x="30.532825" y="19.122078">Title placeholder</tspan>
+		<g data-banner-class="content" id="content" transform="translate(310.57445,-10.033803)">
-	</text>
+			<title id="title11">content</title><text data-banner-class="subtitle" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke" x="38.497089" y="43.932247" id="subtitle">
-	<path fill="currentColor" d="m 17.30398,14.808594 c -0.23588,0.06157 -0.38733,0.148721 -0.50554,0.264214 -0.16616,0.16342 -0.27456,0.392234 -0.33394,0.82424 -0.0609,0.445075 -0.0622,1.034514 -0.0622,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.19395,-0.03922 v -7.274315 z m 0.9016,7.238362 h 6.91313 v -4.269908 c 0,-0.845486 -0.001,-1.434925 -0.0622,-1.88 -0.0593,-0.432006 -0.1678,-0.660808 -0.33394,-0.82424 -0.16678,-0.162884 -0.39988,-0.269115 -0.84113,-0.326862 -0.45434,-0.05992 -1.05576,-0.061 -1.91868,-0.061 h -2.40461 c -0.54586,0 -0.98714,0 -1.35267,0.01585 z m 0.75178,0.883071 h -0.66244 c -0.58835,0 -0.79373,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.92448,0.837858 c 0.008,0.208103 0.0235,0.391689 0.0457,0.555118 0.0593,0.432006 0.16781,0.660808 0.33395,0.82424 0.16678,0.162884 0.39985,0.269115 0.84113,0.326862 0.45434,0.05992 1.05576,0.061 1.91868,0.061 h 2.40461 c 0.86292,0 1.46488,-10e-4 1.91868,-0.06047 0.44125,-0.0583 0.67497,-0.164512 0.84113,-0.327408 0.16616,-0.163419 0.27456,-0.392233 0.33394,-0.824235 0.05,-0.362818 0.0599,-0.822603 0.0616,-1.438194 h -3.7562 v 1.638125 c 0,0.162349 0,0.243512 -0.0572,0.276199 -0.0572,0.03269 -0.13507,-0.0039 -0.29091,-0.07627 l -0.74638,-0.347551 c -0.0533,-0.02452 -0.0795,-0.0365 -0.10789,-0.0365 -0.0284,0 -0.0546,0.01194 -0.10788,0.0365 l -0.74634,0.347566 c -0.15628,0.07245 -0.23425,0.108958 -0.29145,0.07626 -0.0566,-0.03268 -0.0566,-0.114397 -0.0566,-0.276199 z" id="icon-svg" style="stroke-width:0.544769" />
+				<title id="title12">subtitle</title>
 				<tspan sodipodi:role="line" id="tspan4" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036" x="38.497089" y="43.932247">Subtitle placeholder</tspan>
 			</text><text data-banner-class="title" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke" x="38.455933" y="38.518772" id="title">
 				<tspan sodipodi:role="line" id="tspan3" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064" x="38.455933" y="38.518772">Title placeholder</tspan>
 			</text>
 			<g data-banner-class="icon" id="icon">
 				<path data-banner-class="icon-svg" fill="currentColor" d="m 25.227101,34.205286 c -0.235876,0.06157 -0.387336,0.148721 -0.505541,0.264214 -0.166159,0.16342 -0.274563,0.392234 -0.333944,0.82424 -0.06095,0.445075 -0.06219,1.034514 -0.06219,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.193956,-0.03922 v -7.274315 z m 0.901602,7.238362 h 6.913129 V 37.17374 c 0,-0.845486 -10e-4,-1.434925 -0.06219,-1.88 -0.05929,-0.432006 -0.167805,-0.660808 -0.333943,-0.82424 -0.166777,-0.162884 -0.399875,-0.269115 -0.841133,-0.326862 -0.454332,-0.05992 -1.055759,-0.061 -1.918675,-0.061 h -2.404613 c -0.545855,0 -0.987134,0 -1.352664,0.01585 z m 0.751773,0.883071 h -0.662432 c -0.588352,0 -0.793735,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.924479,0.837858 c 0.0083,0.208103 0.02347,0.391689 0.04572,0.555118 0.05929,0.432006 0.167806,0.660808 0.333945,0.82424 0.166776,0.162884 0.399853,0.269115 0.841132,0.326862 0.454333,0.05992 1.055759,0.061 1.918675,0.061 h 2.404613 c 0.862917,0 1.464878,-10e-4 1.918676,-0.06047 0.441258,-0.0583 0.674973,-0.164512 0.841132,-0.327408 0.166159,-0.163419 0.274564,-0.392233 0.333945,-0.824235 0.05003,-0.362818 0.05992,-0.822603 0.06157,-1.438194 h -3.756205 v 1.638125 c 0,0.162349 0,0.243512 -0.05724,0.276199 -0.05724,0.03269 -0.135068,-0.0039 -0.290912,-0.07627 L 28.19057,43.817203 c -0.05334,-0.02452 -0.07948,-0.0365 -0.107886,-0.0365 -0.02842,0 -0.05456,0.01194 -0.107885,0.0365 l -0.746338,0.347566 c -0.156276,0.07245 -0.234249,0.108958 -0.291447,0.07626 -0.05662,-0.03268 -0.05662,-0.114397 -0.05662,-0.276199 z" id="icon-svg" style="stroke-width:0.544769" />
 			</g>
 		</g>
 	</g>
 </svg>
--- a/packages/banners/static/horizontal.svg.js
+++ b/packages/banners/static/horizontal.svg.js
@@ -1,50 +0,0 @@
 /* eslint-disable */
 const svg = `<svg width="162.68883mm" height="42.772179mm" viewBox="0 0 162.68882 42.772178" version="1.1" id="svg1" xml:space="preserve" sodipodi:docname="horizontal.inkscape.svg" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)" inkscape:export-filename="horizontal.inkscape.svg" inkscape:export-xdpi="96" inkscape:export-ydpi="96" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 	<sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1" inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#505050" inkscape:document-units="mm" inkscape:zoom="2.2965073" inkscape:cx="210.31939" inkscape:cy="116.48123" inkscape:window-width="2560" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="32" inkscape:window-maximized="1" inkscape:current-layer="svg1" />
 	<defs id="defs1">
 		<linearGradient id="linearGradient55">
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
 			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
 		</linearGradient>
 		<linearGradient id="linearGradient14">
 			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
 		</linearGradient>
 		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient5" x1="18.784613" y1="57.455349" x2="159.75043" y2="57.455349" gradientUnits="userSpaceOnUse" gradientTransform="translate(-7.92311,-22.037977)" />
 		<linearGradient id="linearGradient82-2">
 			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
 			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
 			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
 			<stop style="stop-color:#00ffff;stop-opacity:1;" offset="0.59760052" id="stop107" />
 			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
 			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
 		</linearGradient>
 		<linearGradient xlink:href="#linearGradient55" id="linearGradient15" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-7.92312,-7.6495972)" />
 		<mask maskUnits="userSpaceOnUse" id="mask17">
 			<path id="path18" style="display:inline;opacity:1;fill:url(#linearGradient18);stroke-width:0.303146;paint-order:fill markers stroke" d="M 16.447515,24.244587 H 162.08752 c 2.05812,0 3.71501,1.65689 3.71501,3.715001 v 23.139473 c 0,2.058112 -1.65689,3.715002 -3.71501,3.715002 H 16.447515 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715002 V 27.959588 c 0,-2.058111 1.65689,-3.715001 3.715,-3.715001 z" />
 		</mask>
 		<linearGradient xlink:href="#linearGradient14" id="linearGradient18" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1,0,0,0.78569196,-1e-8,11.747095)" x1="12.732515" y1="45.720142" x2="165.80252" y2="15.906352" />
 		<filter style="color-interpolation-filters:sRGB" id="filter56" x="-0.031419724" y="-0.15732745" width="1.0628394" height="1.3991793">
 			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)" id="feFlood55" />
 			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur55" />
 			<feOffset result="offset" in="blur" dx="0.000000" dy="2.583867" id="feOffset55" />
 			<feComposite result="comp1" operator="in" in="flood" in2="offset" id="feComposite55" />
 			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite56" />
 		</filter>
 	</defs>
 	<path id="path20" style="display:inline;fill:#ffffff;fill-opacity:1;stroke-width:0.303146;paint-order:fill markers stroke;filter:url(#filter56)" d="M 8.524394,4.8094005 H 154.1644 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.663876 c 0,2.05811 -1.65689,3.714999 -3.715,3.714999 H 8.524394 c -2.05811,0 -3.715,-1.656889 -3.715,-3.715 V 8.5244005 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
 	<path id="color-stripe" style="fill:url(#linearGradient5);stroke-width:0.0784105;paint-order:fill markers stroke" d="m 12.34935,34.30697 h 137.9901 c 0.82427,0 1.48786,0.49524 1.48786,1.1104 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34935 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.1104 1.48785,-1.1104 z" />
 	<path id="fallback" style="display:inline;fill:#ffffff;stroke-width:0.302511;paint-order:fill markers stroke" d="m 8.5759,4.8863906 h 145.53701 c 2.05665,0 3.71237,1.652718 3.71237,3.705644 V 31.673233 c 0,2.052926 -1.65572,3.705643 -3.71237,3.705643 H 8.5759 c -2.05665,0 -3.71237,-1.652717 -3.71237,-3.705643 V 8.5920346 c 0,-2.052926 1.65572,-3.705644 3.71237,-3.705644 z" />
 	<image width="134.7771" height="89.851387" preserveAspectRatio="none" xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="embed" x="60.238495" y="-3.5220199" mask="url(#mask17)" transform="translate(-7.92312,-19.396692)" style="image-rendering:optimizeSpeed" />
 	<path data-banner-class="gradient" id="gradient" style="display:inline;fill:url(#linearGradient15);stroke-width:0.303146;paint-order:fill markers stroke" d="m 8.5244,4.8478956 h 145.64001 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.702371 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 8.5244 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 8.5628956 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
 	<path id="solid-color" style="display:inline;fill:#ffffff;stroke-width:0.303146;paint-order:fill markers stroke" d="M 8.52439,4.8094006 H 154.1644 c 2.05811,0 3.715,1.65689 3.715,3.715 V 31.663876 c 0,2.05811 -1.65689,3.715 -3.715,3.715 H 8.52439 c -2.05811,0 -3.715,-1.65689 -3.715,-3.715 V 8.5244006 c 0,-2.05811 1.65689,-3.715 3.715,-3.715 z" />
 	<text data-banner-class="subtitle" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036;paint-order:fill markers stroke" x="30.573963" y="24.535555" id="subtitle">
 		<title id="title12">subtitle</title>
 		<tspan id="tspan4" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:3.4638px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.133036" x="30.573963" y="24.535555">Subtitle placeholder</tspan>
 	</text>
 	<text data-banner-class="title" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064;paint-order:fill markers stroke" x="30.532825" y="19.122078" id="title">
 		<tspan id="tspan3" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:5.05275px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;fill:#000000;fill-opacity:1;stroke-width:0.194064" x="30.532825" y="19.122078">Title placeholder</tspan>
 	</text>
 	<path fill="currentColor" d="m 17.30398,14.808594 c -0.23588,0.06157 -0.38733,0.148721 -0.50554,0.264214 -0.16616,0.16342 -0.27456,0.392234 -0.33394,0.82424 -0.0609,0.445075 -0.0622,1.034514 -0.0622,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.19395,-0.03922 v -7.274315 z m 0.9016,7.238362 h 6.91313 v -4.269908 c 0,-0.845486 -0.001,-1.434925 -0.0622,-1.88 -0.0593,-0.432006 -0.1678,-0.660808 -0.33394,-0.82424 -0.16678,-0.162884 -0.39988,-0.269115 -0.84113,-0.326862 -0.45434,-0.05992 -1.05576,-0.061 -1.91868,-0.061 h -2.40461 c -0.54586,0 -0.98714,0 -1.35267,0.01585 z m 0.75178,0.883071 h -0.66244 c -0.58835,0 -0.79373,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.92448,0.837858 c 0.008,0.208103 0.0235,0.391689 0.0457,0.555118 0.0593,0.432006 0.16781,0.660808 0.33395,0.82424 0.16678,0.162884 0.39985,0.269115 0.84113,0.326862 0.45434,0.05992 1.05576,0.061 1.91868,0.061 h 2.40461 c 0.86292,0 1.46488,-10e-4 1.91868,-0.06047 0.44125,-0.0583 0.67497,-0.164512 0.84113,-0.327408 0.16616,-0.163419 0.27456,-0.392233 0.33394,-0.824235 0.05,-0.362818 0.0599,-0.822603 0.0616,-1.438194 h -3.7562 v 1.638125 c 0,0.162349 0,0.243512 -0.0572,0.276199 -0.0572,0.03269 -0.13507,-0.0039 -0.29091,-0.07627 l -0.74638,-0.347551 c -0.0533,-0.02452 -0.0795,-0.0365 -0.10789,-0.0365 -0.0284,0 -0.0546,0.01194 -0.10788,0.0365 l -0.74634,0.347566 c -0.15628,0.07245 -0.23425,0.108958 -0.29145,0.07626 -0.0566,-0.03268 -0.0566,-0.114397 -0.0566,-0.276199 z" id="icon-svg" style="stroke-width:0.544769" />
 </svg>`;
 export default svg;
--- a/packages/banners/static/vertical.inkscape.svg
+++ b/packages/banners/static/vertical.inkscape.svg
@@ -1,88 +1,231 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg width="162.68884mm" height="48.491169mm" viewBox="0 0 162.68884 48.491168" version="1.1" id="svg1"
+<svg
-	xml:space="preserve" sodipodi:docname="vertical.inkscape.svg" inkscape:export-filename="vertical.inkscape.svg"
+   width="162.68884mm"
-	inkscape:export-xdpi="96" inkscape:export-ydpi="96" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)"
+   height="48.491169mm"
-	xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 162.68884 48.491168"
-	xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink"
+   version="1.1"
-	xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
+   id="svg1"
-	<sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1"
+   xml:space="preserve"
-		inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#505050"
+   sodipodi:docname="design.inkscape.svg"
-		inkscape:document-units="mm" inkscape:zoom="1.6238757" inkscape:cx="197.05942" inkscape:cy="147.48666"
+   inkscape:version="1.3.1 (91b66b0783, 2023-11-16, custom)"
-		inkscape:window-width="2560" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="32"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-		inkscape:window-maximized="1" inkscape:current-layer="svg1" />
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-	<defs id="defs1">
+   xmlns:xlink="http://www.w3.org/1999/xlink"
-		<linearGradient id="linearGradient55">
+   xmlns="http://www.w3.org/2000/svg"
-			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
-			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
+     id="namedview1"
-		</linearGradient>
+     pagecolor="#505050"
-		<linearGradient id="linearGradient14">
+     bordercolor="#eeeeee"
-			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
+     borderopacity="1"
-			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
+     inkscape:showpageshadow="0"
-		</linearGradient>
+     inkscape:pageopacity="0"
-		<linearGradient id="linearGradient82-2">
+     inkscape:pagecheckerboard="0"
-			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
+     inkscape:deskcolor="#505050"
-			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
+     inkscape:document-units="mm"
-			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
+     inkscape:zoom="1.1011145"
-			<stop style="stop-color:#00ffff;stop-opacity:1;" offset="0.59760052" id="stop107" />
+     inkscape:cx="155.75129"
-			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
+     inkscape:cy="-119.42446"
-			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
+     inkscape:window-width="2540"
-		</linearGradient>
+     inkscape:window-height="1023"
-		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient19" gradientUnits="userSpaceOnUse"
+     inkscape:window-x="0"
-			gradientTransform="translate(-7.92309,-16.357465)" x1="18.784613" y1="57.455349" x2="159.75043"
+     inkscape:window-y="0"
-			y2="57.455349" />
+     inkscape:window-maximized="1"
-		<linearGradient xlink:href="#linearGradient55" id="linearGradient2" x1="90.18544" y1="96.020027" x2="90.18544"
+     inkscape:current-layer="layer2"
-			y2="59.73156" gradientUnits="userSpaceOnUse" gradientTransform="translate(-8.84101,-54.922146)" />
+     showgrid="false"
-		<mask maskUnits="userSpaceOnUse" id="mask13">
+     inkscape:export-bgcolor="#ffffff00"><inkscape:page
-			<path id="path14"
+       x="0"
-				style="opacity:1;fill:url(#linearGradient16);stroke-width:0.342;paint-order:fill markers stroke"
+       y="0"
-				d="M 163.04842,11.667375 H 17.322411 c -2.034292,0 -3.672002,1.637713 -3.672002,3.671999 v 28.944467 c 0,2.034288 1.63771,3.672001 3.672002,3.672001 H 163.04842 c 2.03429,0 3.672,-1.637713 3.672,-3.672001 V 15.339374 c 0,-2.034286 -1.63771,-3.671999 -3.672,-3.671999 z" />
+       width="162.68884"
-		</mask>
+       height="48.491169"
-		<linearGradient xlink:href="#linearGradient14" id="linearGradient16" gradientUnits="userSpaceOnUse"
+       id="page18"
-			gradientTransform="matrix(-1,0,0,1,180.37085,-48.064185)" x1="90.18544" y1="95.033531" x2="90.18544"
+       margin="0"
-			y2="47.599419" />
+       bleed="0" /></sodipodi:namedview><defs
-		<filter style="color-interpolation-filters:sRGB" id="filter63" x="-0.031419723" y="-0.13253295"
+     id="defs1"><linearGradient
-			width="1.0628394" height="1.3362694">
+       id="linearGradient55"
-			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)"
+       inkscape:collect="always"
-				id="feFlood62" />
+       inkscape:label="background-gradient"><stop
-			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur62" />
+         style="stop-color:#ffffff;stop-opacity:1;"
-			<feOffset result="offset" in="blur" dx="0.000000" dy="2.583867" id="feOffset62" />
+         offset="0.30320638"
-			<feComposite result="comp1" operator="in" in="flood" in2="offset" id="feComposite62" />
+         id="stop54" /><stop
-			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite63" />
+         style="stop-color:#ffffff;stop-opacity:0;"
-		</filter>
+         offset="1"
-	</defs>
+         id="stop55" /></linearGradient><linearGradient
-	<path id="path62"
+       id="linearGradient14"
-		style="display:inline;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke;filter:url(#filter63)"
+       inkscape:collect="always"
-		d="m 8.48142,4.809414 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944465 c 0,2.03429 -1.63771,3.672 -3.672,3.672 H 8.48142 c -2.03429,0 -3.672,-1.63771 -3.672,-3.672 V 8.481414 c 0,-2.034288 1.63771,-3.672 3.672,-3.672 z" />
+       inkscape:label="background-image-mask-gradient"><stop
-	<path id="path12" style="fill:url(#linearGradient19);stroke-width:0.0784105;paint-order:fill markers stroke"
+         style="stop-color:#000000;stop-opacity:1;"
-		d="m 12.34937,39.987489 h 137.9901 c 0.82427,0 1.48786,0.49523 1.48786,1.11039 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34937 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.11039 1.48785,-1.11039 z" />
+         offset="0.30320638"
-	<path id="rect12" style="display:inline;fill:#ffffff;stroke-width:0.341536;paint-order:fill markers stroke"
+         id="stop14" /><stop
-		d="m 8.55859,4.833981 h 145.52869 c 2.03154,0 3.66703,1.635495 3.66703,3.667028 v 28.905275 c 0,2.031533 -1.63549,3.667028 -3.66703,3.667028 H 8.55859 c -2.03153,0 -3.66703,-1.635495 -3.66703,-3.667028 V 8.501009 c 0,-2.031533 1.6355,-3.667028 3.66703,-3.667028 z" />
+         style="stop-color:#ffffff;stop-opacity:1;"
-	<image width="153.07002" height="102.04668" preserveAspectRatio="none"
+         offset="1"
-		xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="image13" x="13.650405"
+         id="stop15" /></linearGradient><linearGradient
-		y="-21.211729" mask="url(#mask13)" style="image-rendering:optimizeSpeed"
+       id="linearGradient82-2"
-		transform="matrix(-1,0,0,1,171.52984,-6.857961)" />
+       inkscape:label="color-stripe-gradient"><stop
-	<path id="rect20"
+         style="stop-color:#ff0000;stop-opacity:1;"
-		style="display:inline;fill:url(#linearGradient2);stroke-width:0.342;paint-order:fill markers stroke"
+         offset="0"
-		d="m 8.48142,4.809414 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 8.48142 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 8.481414 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" />
+         id="stop104" /><stop
-	<path id="rect1" style="display:inline;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke"
+         style="stop-color:#ffff00;stop-opacity:1;"
-		d="m 8.48142,4.809414 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 8.48142 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 8.481414 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" />
+         offset="0.18269952"
-	<text xml:space="preserve"
+         id="stop105" /><stop
-		style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.113359;paint-order:fill markers stroke"
+         style="stop-color:#00ff00;stop-opacity:1;"
-		inkscape:label="subtitle" x="81.337044" y="29.823992" id="text15">
+         offset="0.39030838"
-		<tspan id="tspan15"
+         id="stop106" /><stop
-			style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.113359"
+         style="stop-color:#00ffff;stop-opacity:1;"
-			x="81.337044" y="29.823992">Subtitle placeholder</tspan>
+         offset="0.59760052"
-	</text>
+         id="stop107" /><stop
-	<text xml:space="preserve"
+         style="stop-color:#0000ff;stop-opacity:1;"
-		style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.16536;paint-order:fill markers stroke"
+         offset="0.79487675"
-		inkscape:label="title" x="81.322899" y="25.601515" id="text16">
+         id="stop108" /><stop
-		<tspan id="tspan16"
+         style="stop-color:#ff00ff;stop-opacity:1;"
-			style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.16536"
+         offset="1"
-			x="81.322899" y="25.601515">Title placeholder</tspan>
+         id="stop109" /></linearGradient><linearGradient
-	</text>
+       inkscape:collect="always"
-	<path fill="currentColor"
+       xlink:href="#linearGradient82-2"
-		d="m 78.399148,11.080321 c -0.200988,0.05246 -0.330046,0.126724 -0.430767,0.225134 -0.141583,0.139249 -0.233953,0.33422 -0.284551,0.702328 -0.05194,0.379245 -0.05299,0.8815 -0.05299,1.601466 v 3.978142 a 1.9366169,1.9366169 0 0 1 0.602982,-0.275267 1.5271978,1.5271978 0 0 1 0.165268,-0.03342 v -6.19838 z m 0.768247,6.167745 h 5.890617 v -3.638351 c 0,-0.720432 -8.52e-4,-1.222687 -0.05299,-1.601932 -0.05052,-0.368108 -0.142985,-0.563069 -0.28455,-0.702328 -0.142109,-0.138792 -0.34073,-0.22931 -0.716722,-0.278516 -0.387132,-0.05106 -0.899603,-0.05198 -1.634886,-0.05198 h -2.048949 c -0.465119,0 -0.841129,0 -1.152594,0.01351 z m 0.640579,0.752457 h -0.564452 c -0.50133,0 -0.676335,0.0031 -0.810952,0.03852 a 1.1437736,1.1437736 0 0 0 -0.787741,0.713931 c 0.0071,0.177323 0.02,0.333755 0.03896,0.473012 0.05052,0.368108 0.142986,0.563068 0.284551,0.702327 0.142109,0.138792 0.340712,0.229311 0.716722,0.278517 0.387133,0.05106 0.899603,0.05198 1.634886,0.05198 h 2.048949 c 0.735284,0 1.24821,-8.52e-4 1.634887,-0.05153 0.375993,-0.04968 0.575139,-0.140179 0.716722,-0.278981 0.141582,-0.139248 0.233953,-0.334219 0.284551,-0.702324 0.04263,-0.309154 0.05106,-0.700933 0.05246,-1.225472 h -3.20063 v 1.395832 c 0,0.138336 0,0.207494 -0.04877,0.235346 -0.04877,0.02785 -0.11509,-0.0033 -0.247883,-0.06499 l -0.635938,-0.296145 c -0.04545,-0.02089 -0.06772,-0.0311 -0.09193,-0.0311 -0.02422,0 -0.04649,0.01017 -0.09193,0.0311 l -0.635948,0.296158 c -0.133161,0.06173 -0.199601,0.09284 -0.248339,0.06498 -0.04824,-0.02785 -0.04824,-0.09748 -0.04824,-0.235347 z"
+       id="linearGradient19"
-		id="path16" style="stroke-width:0.464193" />
+       gradientUnits="userSpaceOnUse"
-</svg>
+       gradientTransform="translate(309.94661,59.369176)"
       x1="18.784613"
       y1="57.455349"
       x2="159.75043"
       y2="57.455349" /><linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient55"
       id="linearGradient2"
       x1="90.18544"
       y1="96.020027"
       x2="90.18544"
       y2="59.73156"
       gradientUnits="userSpaceOnUse" /><mask
       maskUnits="userSpaceOnUse"
       id="mask13"><path
         id="path14"
         style="opacity:1;fill:url(#linearGradient16);stroke-width:0.342;paint-order:fill markers stroke"
         inkscape:label="mask"
         d="M 163.04842,11.667375 H 17.322411 c -2.034292,0 -3.672002,1.637713 -3.672002,3.671999 v 28.944467 c 0,2.034288 1.63771,3.672001 3.672002,3.672001 H 163.04842 c 2.03429,0 3.672,-1.637713 3.672,-3.672001 V 15.339374 c 0,-2.034286 -1.63771,-3.671999 -3.672,-3.671999 z" /></mask><linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient14"
       id="linearGradient16"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(-1,0,0,1,180.37085,-48.064185)"
       x1="90.18544"
       y1="95.033531"
       x2="90.18544"
       y2="47.599419" /><filter
       style="color-interpolation-filters:sRGB"
       inkscape:label="Drop Shadow"
       id="filter63"
       x="-0.031419723"
       y="-0.13253295"
       width="1.0628394"
       height="1.3362694"><feFlood
         result="flood"
         in="SourceGraphic"
         flood-opacity="0.200000"
         flood-color="rgb(0,0,0)"
         id="feFlood62" /><feGaussianBlur
         result="blur"
         in="SourceGraphic"
         stdDeviation="2.003924"
         id="feGaussianBlur62" /><feOffset
         result="offset"
         in="blur"
         dx="0.000000"
         dy="2.583867"
         id="feOffset62" /><feComposite
         result="comp1"
         operator="in"
         in="flood"
         in2="offset"
         id="feComposite62" /><feComposite
         result="comp2"
         operator="over"
         in="SourceGraphic"
         in2="comp1"
         id="feComposite63" /></filter></defs><g
     inkscape:groupmode="layer"
     id="g19"
     inkscape:label="vertical"
     inkscape:highlight-color="#a99e36"
     transform="translate(-317.8697,-75.726641)"
     inkscape:export-filename="vertical.inkscape.svg"
     inkscape:export-xdpi="318.5993"
     inkscape:export-ydpi="318.5993"><path
       id="path62"
       style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke;filter:url(#filter63)"
       inkscape:label="shadow"
       d="m 326.35112,80.536055 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944465 c 0,2.03429 -1.63771,3.672 -3.672,3.672 H 326.35112 c -2.03429,0 -3.672,-1.63771 -3.672,-3.672 V 84.208055 c 0,-2.034288 1.63771,-3.672 3.672,-3.672 z" /><path
       id="path12"
       style="fill:url(#linearGradient19);stroke-width:0.0784105;paint-order:fill markers stroke"
       inkscape:label="color-stripe"
       d="m 330.21907,115.71413 h 137.9901 c 0.82427,0 1.48786,0.49523 1.48786,1.11039 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 h -137.9901 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.11039 1.48785,-1.11039 z" /><g
       id="g15"
       inkscape:label="background"
       transform="matrix(-1,0,0,1,489.39954,68.86868)"><path
         id="rect12"
         style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.341536;paint-order:fill markers stroke"
         inkscape:label="fallback"
         transform="scale(-1,1)"
         d="m -162.97125,11.691942 h 145.528694 c 2.031534,0 3.667028,1.635495 3.667028,3.667028 v 28.905275 c 0,2.031533 -1.635494,3.667028 -3.667028,3.667028 H -162.97125 c -2.03153,0 -3.66703,-1.635495 -3.66703,-3.667028 V 15.35897 c 0,-2.031533 1.6355,-3.667028 3.66703,-3.667028 z" /><g
         id="g5"
         inkscape:label="image"><image
           width="153.07002"
           height="102.04668"
           preserveAspectRatio="none"
           xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg"
           id="image13"
           x="13.650405"
           y="-21.211729"
           inkscape:label="embed"
           mask="url(#mask13)"
           style="image-rendering:optimizeSpeed"
           inkscape:svg-dpi="1"
           inkscape:export-filename="horizontal.svg"
           inkscape:export-xdpi="96"
           inkscape:export-ydpi="96" /></g><path
         id="rect20"
         style="display:inline;opacity:1;fill:url(#linearGradient2);stroke-width:0.342;paint-order:fill markers stroke"
         inkscape:label="gradient"
         transform="matrix(-1,0,0,1,180.37085,-48.064185)"
         d="m 17.32243,59.73156 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 17.32243 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 63.40356 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" /><path
         id="rect1"
         style="display:inline;opacity:1;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke"
         inkscape:label="solid-color"
         transform="matrix(-1,0,0,1,180.37085,-48.064185)"
         d="m 17.32243,59.73156 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 17.32243 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 63.40356 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" /></g><g
       id="g17"
       inkscape:label="content"
       transform="matrix(-1,0,0,1,461.33439,62.953888)"><text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.113359;paint-order:fill markers stroke"
         x="-62.127644"
         y="42.596745"
         id="text15"
         inkscape:label="subtitle"
         transform="scale(-1,1)"><tspan
           sodipodi:role="line"
           id="tspan15"
           style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.113359"
           x="-62.127644"
           y="42.596745">Subtitle placeholder</tspan></text><text
         xml:space="preserve"
         style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;opacity:1;fill:#000000;fill-opacity:1;stroke-width:0.16536;paint-order:fill markers stroke"
         x="-62.141792"
         y="38.374268"
         id="text16"
         inkscape:label="title"
         transform="scale(-1,1)"><tspan
           sodipodi:role="line"
           id="tspan16"
           style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.16536"
           x="-62.141792"
           y="38.374268">Title placeholder</tspan></text><g
         id="g16"
         inkscape:label="icon"
         transform="matrix(-0.85209125,0,0,0.85209125,86.561334,-5.292951)"><path
           fill="currentColor"
           d="m 25.227101,34.205286 c -0.235876,0.06157 -0.387336,0.148721 -0.505541,0.264214 -0.166159,0.16342 -0.274563,0.392234 -0.333944,0.82424 -0.06095,0.445075 -0.06219,1.034514 -0.06219,1.879454 v 4.66868 a 2.2727811,2.2727811 0 0 1 0.70765,-0.323048 1.7922937,1.7922937 0 0 1 0.193956,-0.03922 v -7.274315 z m 0.901602,7.238362 h 6.913129 V 37.17374 c 0,-0.845486 -10e-4,-1.434925 -0.06219,-1.88 -0.05929,-0.432006 -0.167805,-0.660808 -0.333943,-0.82424 -0.166777,-0.162884 -0.399875,-0.269115 -0.841133,-0.326862 -0.454332,-0.05992 -1.055759,-0.061 -1.918675,-0.061 h -2.404613 c -0.545855,0 -0.987134,0 -1.352664,0.01585 z m 0.751773,0.883071 h -0.662432 c -0.588352,0 -0.793735,0.0036 -0.95172,0.04521 a 1.3423135,1.3423135 0 0 0 -0.924479,0.837858 c 0.0083,0.208103 0.02347,0.391689 0.04572,0.555118 0.05929,0.432006 0.167806,0.660808 0.333945,0.82424 0.166776,0.162884 0.399853,0.269115 0.841132,0.326862 0.454333,0.05992 1.055759,0.061 1.918675,0.061 h 2.404613 c 0.862917,0 1.464878,-10e-4 1.918676,-0.06047 0.441258,-0.0583 0.674973,-0.164512 0.841132,-0.327408 0.166159,-0.163419 0.274564,-0.392233 0.333945,-0.824235 0.05003,-0.362818 0.05992,-0.822603 0.06157,-1.438194 h -3.756205 v 1.638125 c 0,0.162349 0,0.243512 -0.05724,0.276199 -0.05724,0.03269 -0.135068,-0.0039 -0.290912,-0.07627 L 28.19057,43.817203 c -0.05334,-0.02452 -0.07948,-0.0365 -0.107886,-0.0365 -0.02842,0 -0.05456,0.01194 -0.107885,0.0365 l -0.746338,0.347566 c -0.156276,0.07245 -0.234249,0.108958 -0.291447,0.07626 -0.05662,-0.03268 -0.05662,-0.114397 -0.05662,-0.276199 z"
           id="path16"
           style="stroke-width:0.544769"
           inkscape:label="icon-svg" /></g></g></g></svg>
--- a/packages/banners/static/vertical.svg
+++ b/packages/banners/static/vertical.svg
--- a/packages/banners/static/vertical.svg.js
+++ b/packages/banners/static/vertical.svg.js
@@ -1,49 +0,0 @@
 /* eslint-disable */
 const svg = `<svg width="162.68884mm" height="48.491169mm" viewBox="0 0 162.68884 48.491168" version="1.1" id="svg1" xml:space="preserve" sodipodi:docname="vertical.inkscape.svg" inkscape:export-filename="vertical.inkscape.svg" inkscape:export-xdpi="96" inkscape:export-ydpi="96" inkscape:version="1.3.2 (091e20ef0f, 2023-11-25)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 	<sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1" inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#505050" inkscape:document-units="mm" inkscape:zoom="1.6238757" inkscape:cx="197.05942" inkscape:cy="147.48666" inkscape:window-width="2560" inkscape:window-height="1011" inkscape:window-x="0" inkscape:window-y="32" inkscape:window-maximized="1" inkscape:current-layer="svg1" />
 	<defs id="defs1">
 		<linearGradient id="linearGradient55">
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="0.30320638" id="stop54" />
 			<stop style="stop-color:#ffffff;stop-opacity:0;" offset="1" id="stop55" />
 		</linearGradient>
 		<linearGradient id="linearGradient14">
 			<stop style="stop-color:#000000;stop-opacity:1;" offset="0.30320638" id="stop14" />
 			<stop style="stop-color:#ffffff;stop-opacity:1;" offset="1" id="stop15" />
 		</linearGradient>
 		<linearGradient id="linearGradient82-2">
 			<stop style="stop-color:#ff0000;stop-opacity:1;" offset="0" id="stop104" />
 			<stop style="stop-color:#ffff00;stop-opacity:1;" offset="0.18269952" id="stop105" />
 			<stop style="stop-color:#00ff00;stop-opacity:1;" offset="0.39030838" id="stop106" />
 			<stop style="stop-color:#00ffff;stop-opacity:1;" offset="0.59760052" id="stop107" />
 			<stop style="stop-color:#0000ff;stop-opacity:1;" offset="0.79487675" id="stop108" />
 			<stop style="stop-color:#ff00ff;stop-opacity:1;" offset="1" id="stop109" />
 		</linearGradient>
 		<linearGradient xlink:href="#linearGradient82-2" id="linearGradient19" gradientUnits="userSpaceOnUse" gradientTransform="translate(-7.92309,-16.357465)" x1="18.784613" y1="57.455349" x2="159.75043" y2="57.455349" />
 		<linearGradient xlink:href="#linearGradient55" id="linearGradient2" x1="90.18544" y1="96.020027" x2="90.18544" y2="59.73156" gradientUnits="userSpaceOnUse" gradientTransform="translate(-8.84101,-54.922146)" />
 		<mask maskUnits="userSpaceOnUse" id="mask13">
 			<path id="path14" style="opacity:1;fill:url(#linearGradient16);stroke-width:0.342;paint-order:fill markers stroke" d="M 163.04842,11.667375 H 17.322411 c -2.034292,0 -3.672002,1.637713 -3.672002,3.671999 v 28.944467 c 0,2.034288 1.63771,3.672001 3.672002,3.672001 H 163.04842 c 2.03429,0 3.672,-1.637713 3.672,-3.672001 V 15.339374 c 0,-2.034286 -1.63771,-3.671999 -3.672,-3.671999 z" />
 		</mask>
 		<linearGradient xlink:href="#linearGradient14" id="linearGradient16" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1,0,0,1,180.37085,-48.064185)" x1="90.18544" y1="95.033531" x2="90.18544" y2="47.599419" />
 		<filter style="color-interpolation-filters:sRGB" id="filter63" x="-0.031419723" y="-0.13253295" width="1.0628394" height="1.3362694">
 			<feFlood result="flood" in="SourceGraphic" flood-opacity="0.200000" flood-color="rgb(0,0,0)" id="feFlood62" />
 			<feGaussianBlur result="blur" in="SourceGraphic" stdDeviation="2.003924" id="feGaussianBlur62" />
 			<feOffset result="offset" in="blur" dx="0.000000" dy="2.583867" id="feOffset62" />
 			<feComposite result="comp1" operator="in" in="flood" in2="offset" id="feComposite62" />
 			<feComposite result="comp2" operator="over" in="SourceGraphic" in2="comp1" id="feComposite63" />
 		</filter>
 	</defs>
 	<path id="path62" style="display:inline;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke;filter:url(#filter63)" d="m 8.48142,4.809414 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944465 c 0,2.03429 -1.63771,3.672 -3.672,3.672 H 8.48142 c -2.03429,0 -3.672,-1.63771 -3.672,-3.672 V 8.481414 c 0,-2.034288 1.63771,-3.672 3.672,-3.672 z" />
 	<path id="path12" style="fill:url(#linearGradient19);stroke-width:0.0784105;paint-order:fill markers stroke" d="m 12.34937,39.987489 h 137.9901 c 0.82427,0 1.48786,0.49523 1.48786,1.11039 0,0.61516 -0.66359,1.1104 -1.48786,1.1104 H 12.34937 c -0.82427,0 -1.48785,-0.49524 -1.48785,-1.1104 0,-0.61516 0.66358,-1.11039 1.48785,-1.11039 z" />
 	<path id="rect12" style="display:inline;fill:#ffffff;stroke-width:0.341536;paint-order:fill markers stroke" d="m 8.55859,4.833981 h 145.52869 c 2.03154,0 3.66703,1.635495 3.66703,3.667028 v 28.905275 c 0,2.031533 -1.63549,3.667028 -3.66703,3.667028 H 8.55859 c -2.03153,0 -3.66703,-1.635495 -3.66703,-3.667028 V 8.501009 c 0,-2.031533 1.6355,-3.667028 3.66703,-3.667028 z" />
 	<image width="153.07002" height="102.04668" preserveAspectRatio="none" xlink:href="../../../../../Downloads/alexandre-debieve-FO7JIlwjOtU-unsplash.jpg" id="image13" x="13.650405" y="-21.211729" mask="url(#mask13)" style="image-rendering:optimizeSpeed" transform="matrix(-1,0,0,1,171.52984,-6.857961)" />
 	<path id="rect20" style="display:inline;fill:url(#linearGradient2);stroke-width:0.342;paint-order:fill markers stroke" d="m 8.48142,4.809414 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 8.48142 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 8.481414 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" />
 	<path id="rect1" style="display:inline;fill:#ffffff;stroke-width:0.342;paint-order:fill markers stroke" d="m 8.48142,4.809414 h 145.72601 c 2.03429,0 3.672,1.637712 3.672,3.672 v 28.944467 c 0,2.034288 -1.63771,3.672 -3.672,3.672 H 8.48142 c -2.034288,0 -3.672,-1.637712 -3.672,-3.672 V 8.481414 c 0,-2.034288 1.637712,-3.672 3.672,-3.672 z" />
 	<text data-banner-class="subtitle" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.113359;paint-order:fill markers stroke" x="81.337044" y="29.823992" id="text15">
 		<tspan id="tspan15" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:2.95147px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.113359" x="81.337044" y="29.823992">Subtitle placeholder</tspan>
 	</text>
 	<text data-banner-class="title" xml:space="preserve" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.16536;paint-order:fill markers stroke" x="81.322899" y="25.601515" id="text16">
 		<tspan id="tspan16" style="font-style:normal;font-variant:normal;font-weight:600;font-stretch:normal;font-size:4.3054px;font-family:'Cal Sans';-inkscape-font-specification:'Cal Sans, Semi-Bold';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;text-align:center;text-anchor:middle;fill:#000000;fill-opacity:1;stroke-width:0.16536" x="81.322899" y="25.601515">Title placeholder</tspan>
 	</text>
 	<path fill="currentColor" d="m 78.399148,11.080321 c -0.200988,0.05246 -0.330046,0.126724 -0.430767,0.225134 -0.141583,0.139249 -0.233953,0.33422 -0.284551,0.702328 -0.05194,0.379245 -0.05299,0.8815 -0.05299,1.601466 v 3.978142 a 1.9366169,1.9366169 0 0 1 0.602982,-0.275267 1.5271978,1.5271978 0 0 1 0.165268,-0.03342 v -6.19838 z m 0.768247,6.167745 h 5.890617 v -3.638351 c 0,-0.720432 -8.52e-4,-1.222687 -0.05299,-1.601932 -0.05052,-0.368108 -0.142985,-0.563069 -0.28455,-0.702328 -0.142109,-0.138792 -0.34073,-0.22931 -0.716722,-0.278516 -0.387132,-0.05106 -0.899603,-0.05198 -1.634886,-0.05198 h -2.048949 c -0.465119,0 -0.841129,0 -1.152594,0.01351 z m 0.640579,0.752457 h -0.564452 c -0.50133,0 -0.676335,0.0031 -0.810952,0.03852 a 1.1437736,1.1437736 0 0 0 -0.787741,0.713931 c 0.0071,0.177323 0.02,0.333755 0.03896,0.473012 0.05052,0.368108 0.142986,0.563068 0.284551,0.702327 0.142109,0.138792 0.340712,0.229311 0.716722,0.278517 0.387133,0.05106 0.899603,0.05198 1.634886,0.05198 h 2.048949 c 0.735284,0 1.24821,-8.52e-4 1.634887,-0.05153 0.375993,-0.04968 0.575139,-0.140179 0.716722,-0.278981 0.141582,-0.139248 0.233953,-0.334219 0.284551,-0.702324 0.04263,-0.309154 0.05106,-0.700933 0.05246,-1.225472 h -3.20063 v 1.395832 c 0,0.138336 0,0.207494 -0.04877,0.235346 -0.04877,0.02785 -0.11509,-0.0033 -0.247883,-0.06499 l -0.635938,-0.296145 c -0.04545,-0.02089 -0.06772,-0.0311 -0.09193,-0.0311 -0.02422,0 -0.04649,0.01017 -0.09193,0.0311 l -0.635948,0.296158 c -0.133161,0.06173 -0.199601,0.09284 -0.248339,0.06498 -0.04824,-0.02785 -0.04824,-0.09748 -0.04824,-0.235347 z" id="path16" style="stroke-width:0.464193" />
 </svg>`;
 export default svg;
--- a/packages/banners/test.html
+++ b/packages/banners/test.html
@@ -1,13 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<title></title>
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1">
 	<script type="module" src="src/index.js"></script>
 </head>
 <body></body>
 </html>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -0,0 +1,194 @@
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
 :root {
 	--banner-color: #b1b1b1;
 	--banner-bgc: #000;
 	--options-bgc: #0a0a0a;
 	--border-color: #404040;
 	--dark-txt-color: #404040;
 	--light-txt-color: #ffffff;
 }
 html, body {
 	font-family: 'Roboto', sans-serif;
 	height: 100%;
 	margin: 0;
 	padding: 0;
 }
 body {
 	min-height: 100%;
 }
 .container {
 	background-color: var(--banner-bgc);
 	display: grid;
 	height: 100%;
 	grid-template-columns: repeat(2, 50%);
 }
 .banner {
 	background-color: var(--banner-color);
 	height: 100px;
 	width: 300px;
 	align-self: center;
 	justify-self: center;
 	border-radius: 20px;
 	box-shadow: 0px 10px 20px 10px rgb(58, 58, 58);
 	margin: 40px;
 }
 .options {
 	/* background-color: var(--options-bgc); */
 	color: white;
 	padding: 70px;
 	overflow: auto;
 	overflow-x: hidden;
 }
 input::placeholder {
 	color: var(--dark-txt-color);
 	text-shadow: none;
 }
 label {
 	color: var(--dark-txt-color);
 	font-size: 1.5rem;
 	align-self: center;
 }
 h1 {
 	font-size: 2.5rem;
 }
 h1, input {
 	text-shadow: 0 0 5px #fff;
 }
 .txt-input, select, .style-layout > input[type="color"] {
 	background: var(--options-bgc);
 	border: solid 1px var(--border-color);
 	height: 3rem;
 	border-radius: 6px;
 	width: 20rem;
 	padding-left: 1rem;
 	padding-right: 1rem;
 	font-size: 1.5rem;
 	color: var(--light-txt-color);
 	font-weight: 400;
 	transition: all .2s ease-in-out;
 	box-sizing: border-box;
 }
 input:focus, select:focus, .style-layout > input[type="color"]:focus {
 	outline: none !important;
 	border: solid 1px #a3a3a3 ;
 	box-shadow: 0px 0px 0px 4px #3f3f46;
 }
 .options-grid-container {
 	display: grid;
 	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 	align-items: start;
 	row-gap: 30px;
 }
 #layout {
 	color: var(--dark-txt-color);
 }
 input[type="radio"], input[type="checkbox"] {
 	-webkit-appearance: none;
 	appearance: none;
 	margin: 0;
 	background-color: #3c3c3c;
 	font: inherit;
 	color: currentColor;
 	width:2rem;
 	height: 2rem;
 	border-radius: 50%;
 }
 input[type="radio"]:focus, input[type="checkbox"]:focus {
 	border-style: none;
 	box-shadow: none;
 }
 input[type="radio"]:checked, input[type="checkbox"]:checked {
 	background-color: #fff;
 	transition: all .5s ease-out;
 	box-shadow: 0 0 10px 5px rgb(100, 100, 100);
 }
 input[type="radio"]:not(:checked), input[type="checkbox"]:not(:checked) {
 	transition: all .5s ease-out;
 	box-shadow: none;
 }
 .center-txt-vertically {
 	display: flex;
 	align-items: center;
 	gap: 10px;
 }
 .list-of-items {
 	display: grid;
 	align-items: start;
 	justify-content: start;
 	gap: 10px;
 } 
 .span-all {
 	grid-column: 1 / -1;
 }
 #bg-img-link {
 	align-self: center;
 }
 .style-layout, .repo-wrapper {
 	display: grid;
 	gap: 15px;
 }
 .style-layout > input[type="color"] {
 	padding: 0;
 }
@media only screen and (max-width: 800px) {
 	.container {
 		grid-template-columns: 100%;
 	}
 	.options-grid-container {
 		justify-items: center;
 	}
 	.options {
 		display: grid;
 		justify-content: center;
 		overflow-x: hidden;
 	}
 }
 .centralize-verticaly {
 	display: grid;
 	align-content: center;
 	background-color: var(--options-bgc);
 	overflow: auto;
 	overflow-x: hidden;
 }
 .repo-wrapper {
 	border: solid 1px var(--dark-txt-color);
 	border-radius: 6px;
 	padding: 1rem;
 	width: 20rem;
 	box-sizing: border-box;
 }
 .repo-wrapper > input {
 	width: 100%;
 }
Author	SHA1	Message	Date
renovate[bot]	1a354d2ab0	chore(deps): update dependency @vercel/node to v3.0.20	2024-02-25 09:35:25 +00:00
sxpphickat	c19f4dd646	Merge pull request #18 from LoredDev/10-frontend-form-control feat(frontend): form html and css fim do hiatus	2023-12-26 19:02:56 -03:00
sxpphickat	31bca044ea	fix(front): 🐛 wrapping repo infos	2023-12-07 18:33:04 -03:00
sxpphickat	9d17f06732	fix(front): 🐛 aligning items better	2023-12-06 09:35:07 -03:00
sxpphickat	edd8c7edd1	fix(front): 🐛 layout and background input sizes	2023-12-01 14:20:15 -03:00
sxpphickat	157cc4bb7d	feat(front): ✨ responsive design	2023-12-01 12:42:25 -03:00
sxpphickat	0ad8ba8ef8	refactor(front): ♻️ change main design	2023-12-01 10:35:17 -03:00
sxpphickat	14a32d750c	feat(front): ✨ style.css base	2023-11-28 21:04:21 -03:00
sxpphickat	71bfabb32f	feat(front): ✨ index.html base	2023-11-28 21:02:43 -03:00