From 2d4499b0fd713f3a67bc66a392de489aa45e57c5 Mon Sep 17 00:00:00 2001
From: Bryant Gillespie <hey@bryantgillespie.com>
Date: Thu, 20 Jul 2023 16:27:25 -0400
Subject: [PATCH] Page Builder > Base Components (#22)

* Merge branch 'types/schema-1.0' into nuxt/pageblocks

* update fields and types

* delete sample block

* page and block base components

* catch all route

* Add types to Directus SDK

* base css

* file url utility composable

* badge

* buttons

* card

* divider

* frame

* heading

* icon

* text

* video

* default layout

* fix separator

* note

* Use scoped styles

* Fix global on app.vue usage

* Remove unused styles

* Cleanup

* fix field syntax for new sdk

* fix catch all page route

* fix plugin config

* drop reset.css for now until needed

* app styling fix

* Standardized folder capitalization

* Remove app globals

* Remove outdated files

* Add size comments

* Tweak base badge

* Add global styles

* Add missing text / line height sizes

* Use font sizing vars

* Temp remove invalid styling from buttongroup

* Use variables in button component

* Use vars in global css

* Fix base styles of badge

* Remove comment

* Use nuxt link, fix nested styles

* Update components

* Remove button group

Needs to be rearchitected

* Remove unused import

* Remove props usage in template

* use computed for iframesource

---------

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>
---
 assets/css/global.css       |  39 +++++
 assets/css/main.css         |   1 +
 assets/css/vars.css         | 111 ++++++++----
 components/Base/Badge.vue   | 143 +++++++++++++++
 components/Base/Button.vue  | 341 ++++++++++++++++++++++++++++++++++++
 components/Base/Card.vue    | 123 +++++++++++++
 components/Base/Frame.vue   |  58 ++++++
 components/Base/Heading.vue |  58 ++++--
 components/Base/Icon.vue    |   6 +-
 components/Base/Text.vue    |  23 +++
 components/Base/Video.vue   |  57 ++++++
 11 files changed, 907 insertions(+), 53 deletions(-)
 create mode 100644 assets/css/global.css
 create mode 100644 components/Base/Badge.vue
 create mode 100644 components/Base/Button.vue
 create mode 100644 components/Base/Card.vue
 create mode 100644 components/Base/Frame.vue
 create mode 100644 components/Base/Text.vue
 create mode 100644 components/Base/Video.vue

diff --git a/assets/css/global.css b/assets/css/global.css
new file mode 100644
index 00000000..7286eceb
--- /dev/null
+++ b/assets/css/global.css
@@ -0,0 +1,39 @@
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+body {
+	margin: 0;
+	font-family: var(--family-body);
+	font-size: var(--font-size-base);
+	line-height: var(--line-height-base);
+	-webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+	display: block;
+	max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+	font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	overflow-wrap: break-word;
+}
diff --git a/assets/css/main.css b/assets/css/main.css
index c4bbcd44..bfb50aef 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -1,2 +1,3 @@
 @import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@300;500;700&family=Poppins:wght@400;600;700&family=Material+Symbols+Outlined:opsz,wght@20..48,100..700&display=swap');
 @import url('vars.css');
+@import url('global.css');
diff --git a/assets/css/vars.css b/assets/css/vars.css
index 835ea609..c9c5ea86 100644
--- a/assets/css/vars.css
+++ b/assets/css/vars.css
@@ -9,7 +9,7 @@
 	--white: #ffffff;
 	--black: #000000;
 
-	--bg-opacity: 1;
+	--bg-opacity: 100%;
 
 	--primary: var(--purple-400);
 	--secondary: var(--pink-200);
@@ -19,7 +19,7 @@
 
 	--gray-50: #f9fafb;
 	--gray-100: #f4f5f7;
-	--gray-200: #e5e7eb; /* rgba(229, 231, 235, 1) */
+	--gray-200: #e5e7eb;
 	--gray-300: #d2d6dc;
 	--gray-400: #9fa6b2;
 	--gray-500: #6b7280;
@@ -83,39 +83,67 @@
 	--red-800: #a32f4a;
 	--red-900: #802442;
 
+	/* Text sizes */
+	--font-size-xs: 0.75rem; /* 12px */
+	--font-size-sm: 0.875rem; /* 14px */
+	--font-size-base: 1rem; /* 16px */
+	--font-size-lg: 1.125rem; /* 18px */
+	--font-size-xl: 1.25rem; /* 20px */
+	--font-size-2xl: 1.5rem; /* 24px */
+	--font-size-3xl: 1.875rem; /* 30px */
+	--font-size-4xl: 2.25rem; /* 36px */
+	--font-size-5xl: 3rem; /* 48px */
+	--font-size-6xl: 3.75rem; /* 60px */
+	--font-size-7xl: 4.5rem; /* 72px */
+	--font-size-8xl: 6rem; /* 96px */
+	--font-size-9xl: 8rem; /* 128px */
+	--line-height-xs: 1rem; /* 16px */
+	--line-height-sm: 1.25rem; /* 20px */
+	--line-height-base: 1.5rem; /* 24px */
+	--line-height-lg: 1.75rem; /* 28px */
+	--line-height-xl: 1.75rem; /* 28px */
+	--line-height-2xl: 2rem; /* 32px */
+	--line-height-3xl: 2.25rem; /* 36px */
+	--line-height-4xl: 2.5rem; /* 40px */
+	--line-height-5xl: 1;
+	--line-height-6xl: 1;
+	--line-height-7xl: 1;
+	--line-height-8xl: 1;
+	--line-height-9xl: 1;
+
 	/* Spacing Scale */
 	--space-0: 0;
 	--space-px: 1px;
-	--space-05: 0.125rem;
-	--space-1: 0.25rem;
-	--space-2: 0.5rem;
-	--space-3: 0.75rem;
-	--space-4: 1rem;
-	--space-5: 1.25rem;
-	--space-6: 1.5rem;
-	--space-7: 1.75rem;
-	--space-8: 2rem;
-	--space-9: 2.25rem;
-	--space-10: 2.5rem;
-	--space-11: 2.75rem;
-	--space-12: 3rem;
-	--space-14: 3.5rem;
-	--space-16: 4rem;
-	--space-20: 5rem;
-	--space-24: 6rem;
-	--space-28: 7rem;
-	--space-32: 8rem;
-	--space-36: 9rem;
-	--space-40: 10rem;
-	--space-44: 11rem;
-	--space-48: 12rem;
-	--space-52: 13rem;
-	--space-56: 14rem;
-	--space-60: 15rem;
-	--space-64: 16rem;
-	--space-72: 18rem;
-	--space-80: 20rem;
-	--space-96: 24rem;
+	--space-05: 0.125rem; /* 2px */
+	--space-1: 0.25rem; /* 4px */
+	--space-2: 0.5rem; /* 8px */
+	--space-3: 0.75rem; /* 12px */
+	--space-4: 1rem; /* 16px */
+	--space-5: 1.25rem; /* 20px */
+	--space-6: 1.5rem; /* 24px */
+	--space-7: 1.75rem; /* 28px */
+	--space-8: 2rem; /* 32px */
+	--space-9: 2.25rem; /* 36px */
+	--space-10: 2.5rem; /* 40px */
+	--space-11: 2.75rem; /* 44px */
+	--space-12: 3rem; /* 48px */
+	--space-14: 3.5rem; /* 56px */
+	--space-16: 4rem; /* 64px */
+	--space-20: 5rem; /* 80px */
+	--space-24: 6rem; /* 96px  */
+	--space-28: 7rem; /* 112px */
+	--space-32: 8rem; /* 128px */
+	--space-36: 9rem; /* 144px */
+	--space-40: 10rem; /* 160px */
+	--space-44: 11rem; /* 176px */
+	--space-48: 12rem; /* 192px */
+	--space-52: 13rem; /* 208px */
+	--space-56: 14rem; /* 224px */
+	--space-60: 15rem; /* 240px */
+	--space-64: 16rem; /* 256px */
+	--space-72: 18rem; /* 288px */
+	--space-80: 20rem; /* 320px */
+	--space-96: 24rem; /* 384px */
 
 	/* Border Radius */
 	--rounded-none: 0;
@@ -127,4 +155,23 @@
 	--rounded-2xl: 1rem;
 	--rounded-3xl: 1.5rem;
 	--rounded-full: 9999px;
+
+	/* Transitions */
+	--ease-linear: linear;
+	--ease-in: cubic-bezier(0.4, 0, 1, 1);
+	--ease-out: cubic-bezier(0, 0, 0.2, 1);
+	--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+
+	--duration-0: 0s;
+	--duration-75: 75ms;
+	--duration-100: 100ms;
+	--duration-150: 150ms;
+	--duration-200: 200ms;
+	--duration-300: 300ms;
+	--duration-500: 500ms;
+	--duration-700: 700ms;
+	--duration-1000: 1000ms;
+
+	/* Shadows */
+	--shadow-base: 0px 1.875rem 3.75rem -1.875rem rgba(0, 0, 0, 0.05), 0px 0.125rem 0.25rem 0px rgba(0, 0, 0, 0.05);
 }
diff --git a/components/Base/Badge.vue b/components/Base/Badge.vue
new file mode 100644
index 00000000..af7a9d8d
--- /dev/null
+++ b/components/Base/Badge.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+export interface BaseBadgeProps {
+	/**
+	 * Size of the badge. Controls both font size and icon size.
+	 * @values small, medium, large
+	 */
+	size?: 'small' | 'medium' | 'large';
+
+	/**
+	 * Color of the badge.
+	 * @values primary, white, danger
+	 */
+	color?: 'primary' | 'gray';
+
+	/**
+	 * Whether the badge should be displayed in all caps.
+	 */
+	caps?: boolean;
+
+	/**
+	 * Whether the badge should have a border.
+	 */
+	border?: boolean;
+
+	/**
+	 * Label of the badge.
+	 */
+	label?: string;
+
+	/**
+	 * URL to navigate to when the badge is clicked.
+	 */
+	href?: string;
+
+	/**
+	 * Target of the link.
+	 * @values _blank, _self, _parent, _top
+	 */
+	target?: '_blank' | '_self' | '_parent' | '_top';
+
+	/**
+	 * Aria label for the badge if using as a link.
+	 */
+	ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<BaseBadgeProps>(), {
+	size: 'medium',
+	color: 'primary',
+});
+
+const as = computed(() => {
+	if (props.href) {
+		return 'NuxtLink';
+	} else {
+		return 'span';
+	}
+});
+
+const badgeProps = computed(() => {
+	if (props.href) {
+		return {
+			href: props.href,
+			target: props.target,
+			...(props.ariaLabel && { 'aria-label': props.ariaLabel }),
+		};
+	} else {
+		return {};
+	}
+});
+</script>
+
+<template>
+	<component
+		:is="as"
+		class="base-badge"
+		:class="[
+			`badge-${props.color}`,
+			`badge-${props.size}`,
+			{
+				caps: props.caps,
+				border: props.border,
+			},
+		]"
+		v-bind="badgeProps"
+	>
+		<slot>{{ label }}</slot>
+	</component>
+</template>
+
+<style scoped>
+/* Base */
+.base-badge {
+	display: inline-flex;
+	align-items: center;
+	text-decoration: none;
+	border-radius: var(--rounded-full);
+	font-weight: 600;
+	font-family: var(--family-display);
+}
+
+/* Colors */
+.badge-primary {
+	background-color: var(--purple-50);
+	color: var(--purple-600);
+	border-color: var(--purple-300);
+}
+
+.badge-gray {
+	background-color: var(--gray-50);
+	color: var(--gray-600);
+	border-color: var(--gray-300);
+}
+
+/* Sizes */
+.badge-small {
+	font-size: var(--font-size-xs);
+	line-height: var(--line-height-xs);
+	padding: var(--space-05) var(--space-2);
+}
+
+.badge-medium {
+	font-size: var(--font-size-sm);
+	line-height: var(--line-height-sm);
+	padding: var(--space-1) var(--space-3);
+}
+
+.badge-large {
+	font-size: var(--font-size-md);
+	line-height: var(--line-height-md);
+	padding: var(--space-2) var(--space-4);
+}
+
+/* Props */
+.border {
+	border-width: 1px;
+	border-style: solid;
+}
+
+.caps {
+	text-transform: uppercase;
+}
+</style>
diff --git a/components/Base/Button.vue b/components/Base/Button.vue
new file mode 100644
index 00000000..60e32786
--- /dev/null
+++ b/components/Base/Button.vue
@@ -0,0 +1,341 @@
+<script setup lang="ts">
+export interface BaseButtonProps {
+	/**
+	 * Name of the Material Symbol to use.
+	 * @see https://fonts.google.com/icons for all available icons
+	 */
+	icon?: string;
+
+	/**
+	 * Leading icon name. Overrides `icon` if both are provided.
+	 */
+	leadingIcon?: string;
+
+	/**
+	 * Trailing icon name. Overrides `icon` if both are provided.
+	 */
+	trailingIcon?: string;
+
+	/**
+	 * Whether the icon should be placed before the label.
+	 */
+	leading?: boolean;
+
+	/**
+	 * Whether the icon should be placed after the label.
+	 */
+	trailing?: boolean;
+
+	/**
+	 * Size of the button. Controls both font size and icon size.
+	 * @values small, medium, large
+	 */
+	size?: 'small' | 'medium' | 'large';
+
+	/**
+	 * Type of the button.
+	 * @values button, submit, reset
+	 */
+	type?: 'button' | 'submit' | 'reset';
+
+	/**
+	 * Color of the button.
+	 * @values primary, secondary, gray, white, danger
+	 */
+	color?: 'primary' | 'secondary' | 'gray' | 'white' | 'danger';
+
+	/**
+	 * Variant of the button.
+	 * @values solid, frosted, gradient
+	 */
+	variant?: 'solid' | 'frosted' | 'gradient';
+
+	/**
+	 * Label of the button.
+	 */
+	label?: string;
+
+	/**
+	 * URL to navigate to when the button is clicked.
+	 */
+	href?: string;
+
+	/**
+	 * Target of the link.
+	 * @values _blank, _self, _parent, _top
+	 */
+	target?: '_blank' | '_self' | '_parent' | '_top';
+
+	/**
+	 * Whether the button is in a loading state.
+	 */
+	loading?: boolean;
+
+	/**
+	 * Whether the button is disabled.
+	 */
+	disabled?: boolean;
+
+	/**
+	 * Whether the button should pulse.
+	 */
+	pulse?: boolean;
+
+	/**
+	 * Aria label for the button.
+	 */
+	ariaLabel?: string;
+}
+
+const props = withDefaults(defineProps<BaseButtonProps>(), {
+	size: 'medium',
+	type: 'button',
+	loading: false,
+	disabled: false,
+	pulse: false,
+});
+
+const loadingIcon = 'sync';
+
+const as = computed(() => {
+	if (props.href) {
+		return 'NuxtLink';
+	} else {
+		return 'button';
+	}
+});
+
+const buttonProps = computed(() => {
+	if (props.href) {
+		return {
+			href: props.href,
+			target: props.target,
+		};
+	} else {
+		return { disabled: props.disabled || props.loading, type: props.type };
+	}
+});
+
+const isLeading = computed(() => {
+	return (
+		(props.icon && props.leading) ||
+		(props.icon && !props.trailing) ||
+		(props.loading && !props.trailing) ||
+		props.leadingIcon
+	);
+});
+
+const isTrailing = computed(() => {
+	return (props.icon && props.trailing) || (props.loading && props.trailing) || props.trailingIcon;
+});
+
+const isIconOnly = computed(() => {
+	return props.icon && !props.label;
+});
+
+const leadingIconName = computed(() => {
+	if (props.loading) {
+		return loadingIcon;
+	}
+
+	return props.leadingIcon || props.icon;
+});
+
+const trailingIconName = computed(() => {
+	if (props.loading && !isLeading.value) {
+		return loadingIcon;
+	}
+
+	return props.trailingIcon || props.icon;
+});
+</script>
+
+<template>
+	<component
+		:is="as"
+		:aria-label="ariaLabel"
+		:class="[
+			'btn-base',
+			`btn-${props.size}`,
+			`btn-${props.color}`,
+			props.variant,
+			{ pulse: props.pulse },
+			{ 'icon-only': isIconOnly },
+		]"
+		v-bind="buttonProps"
+	>
+		<slot name="leading" :disabled="disabled" :loading="loading">
+			<BaseIcon
+				v-if="isLeading && leadingIconName"
+				:name="leadingIconName"
+				aria-hidden="true"
+				:class="[
+					{
+						'animate-spin': props.loading,
+					},
+					'hover-move',
+				]"
+				:size="size"
+			/>
+		</slot>
+		<slot>
+			<span v-if="label">
+				{{ label }}
+			</span>
+		</slot>
+
+		<slot name="trailing" :disabled="disabled" :loading="loading">
+			<BaseIcon
+				v-if="isTrailing && trailingIconName"
+				class="trailing-icon"
+				:name="trailingIconName"
+				aria-hidden="true"
+				:size="size"
+			/>
+		</slot>
+	</component>
+</template>
+
+<style scoped>
+.btn-base {
+	font-family: var(--family-body);
+	display: inline-flex;
+	align-items: center;
+	border: none;
+	cursor: pointer;
+	text-decoration: none;
+	border-radius: var(--rounded-full);
+	font-weight: 600;
+}
+
+.btn-base:disabled {
+	opacity: 0.8;
+	cursor: not-allowed;
+}
+
+.trailing-icon {
+	transition: transform var(--duration-200) var(--ease-in-out);
+}
+
+.btn-base:hover .trailing-icon {
+	transform: translateX(var(--space-1));
+}
+
+.frosted {
+	--bg-opacity: 50%;
+
+	border-width: 1px;
+	border-style: solid;
+	box-shadow: var(--shadow-base);
+	backdrop-filter: blur(2px);
+}
+
+.gradient {
+	--bg-opacity: 100%;
+
+	background: var(--purple-pink, linear-gradient(168deg, var(--purple-400) 0%, var(--purple-300) 100%));
+	color: var(--white);
+}
+
+.btn-primary {
+	background-color: color-mix(in srgb, transparent, var(--purple-400) var(--bg-opacity));
+	color: var(--white);
+	border-color: var(--purple-400);
+}
+
+.btn-secondary {
+	background-color: color-mix(in srgb, transparent, var(--pink-200) var(--bg-opacity));
+	border-color: color-mix(in srgb, transparent, var(--pink-200) var(--bg-opacity));
+	color: var(--gray-900);
+}
+
+.btn-secondary.frosted {
+	color: var(--gray-800);
+}
+
+.btn-gray {
+	background-color: color-mix(in srgb, transparent, var(--gray-200) var(--bg-opacity));
+	border-color: color-mix(in srgb, transparent, var(--gray-200) var(--bg-opacity));
+	color: var(--gray-900);
+}
+
+.btn-white {
+	background-color: color-mix(in srgb, transparent, var(--white) var(--bg-opacity));
+	border-color: color-mix(in srgb, transparent, var(--white) var(--bg-opacity));
+	color: var(--primary);
+}
+
+.btn-danger {
+	background: color-mix(in srgb, transparent, var(--red-500) var(--bg-opacity));
+	border-color: color-mix(in srgb, transparent, var(--red-500) var(--bg-opacity));
+	color: var(--white);
+}
+
+.btn-small {
+	font-size: var(--text-md);
+	padding: var(--space-2) var(--space-4);
+	column-gap: var(--space-2);
+}
+
+.btn-small.icon-only {
+	padding: var(--space-2);
+}
+
+.btn-medium {
+	font-size: var(--text-lg);
+	padding: var(--space-3) var(--space-6);
+	column-gap: var(--space-3);
+}
+
+.btn-medium.icon-only {
+	padding: var(--space-3);
+}
+
+.btn-large {
+	font-size: var(--text-2xl);
+	padding: var(--space-4) var(--space-8);
+	column-gap: var(--space-4);
+}
+
+.btn-large.icon-only {
+	padding: var(--space-4);
+}
+
+.pulse {
+	box-shadow: 0 0 0 var(--space-2) color-mix(in srgb, transparent, var(--purple-400) 20%);
+
+	animation-name: pulsing;
+	animation-duration: 3s;
+	animation-iteration-count: infinite;
+	animation-timing-function: var(--ease-in-out);
+}
+
+/** Can't use CSS variables inside of keyframes as they can't interpolate in animation */
+@keyframes pulsing {
+	0% {
+		box-shadow: 0 0 0 8px rgba(102, 68, 255, 0.2);
+	}
+
+	50% {
+		box-shadow: 0 0 0 6px rgba(102, 68, 255, 0.3);
+	}
+
+	100% {
+		box-shadow: 0 0 0 8px rgba(102, 68, 255, 0.2);
+	}
+}
+
+.animate-spin {
+	animation: spin var(--duration-1000) var(--ease-linear) infinite;
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+</style>
diff --git a/components/Base/Card.vue b/components/Base/Card.vue
new file mode 100644
index 00000000..601631e4
--- /dev/null
+++ b/components/Base/Card.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { BaseBadgeProps } from '~~/components/Base/Badge.vue';
+
+export interface BaseCardProps {
+	/**
+	 * The title of the card.
+	 */
+	title: string;
+
+	/**
+	 * The description of the card.
+	 */
+	desc?: string;
+
+	/**
+	 * The tag of the card.
+	 */
+	tag?: BaseBadgeProps;
+
+	/**
+	 * The image of the card.
+	 */
+	img?: string;
+
+	/**
+	 * The url of the card.
+	 */
+	href?: string;
+
+	/**
+	 * The author of the card.
+	 */
+	author?: string;
+
+	/**
+	 * The date of the card.
+	 */
+	date?: string;
+}
+
+defineProps<BaseCardProps>();
+</script>
+
+<template>
+	<div class="base-card">
+		<NuxtLink :href="href">
+			<div class="image">
+				<img :src="img" :alt="title" loading="lazy" />
+			</div>
+			<div class="content">
+				<div>
+					<BaseBadge v-bind="tag" />
+				</div>
+				<h3 class="heading">{{ title }}</h3>
+				<p v-if="desc" class="description">{{ desc }}</p>
+				<div v-if="author" class="author">
+					<span>{{ author }}</span>
+					&nbsp;
+					<span>•</span>
+					&nbsp;
+					<span class="date">{{ date }}</span>
+				</div>
+			</div>
+		</NuxtLink>
+	</div>
+</template>
+
+<style scoped>
+.base-card {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+.base-card * + * {
+	margin-top: 8px;
+}
+
+.content {
+	flex-grow: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.image {
+	width: 100%;
+	border-radius: var(--rounded-lg);
+	aspect-ratio: 16 / 9;
+	overflow: hidden;
+}
+
+.image img {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	object-position: center center;
+	transition: scale var(--duration-150) var(--ease-out);
+}
+
+.heading {
+	font-size: var(--font-size-xl);
+	line-height: var(--line-height-xl);
+	font-weight: 600;
+	margin-top: var(--space-3);
+}
+
+.description {
+	color: var(--gray-500);
+}
+
+.author {
+	color: var(--gray-500);
+}
+
+.base-card:hover .heading {
+	text-decoration: underline;
+}
+
+.base-card:hover .image img {
+	scale: 1.05;
+}
+</style>
diff --git a/components/Base/Frame.vue b/components/Base/Frame.vue
new file mode 100644
index 00000000..66564844
--- /dev/null
+++ b/components/Base/Frame.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+export interface BaseFrame {
+	/**
+	 * The aspect ratio of the frame.
+	 */
+	aspect?: '16-9' | '4-3' | '1-1';
+
+	/**
+	 * The alignment of the frame.
+	 */
+	align?: 'start' | 'center' | 'end';
+
+	/**
+	 * The background color of the frame.
+	 */
+	color?: 'white' | 'gray';
+
+	/**
+	 * The style of the frame.
+	 */
+	variant?: 'solid' | 'frosted';
+}
+
+defineProps<BaseFrame>();
+</script>
+
+<template>
+	<div :class="[`aspect-${aspect}`, 'base-frame']">
+		<slot />
+	</div>
+</template>
+
+<style scoped>
+.base-frame {
+	display: flex;
+	overflow: hidden;
+	width: 100%;
+	background: rgba(255, 255, 255, 0.2);
+	border-radius: var(--rounded-lg);
+
+	box-shadow: var(--shadow-base);
+	backdrop-filter: blur(2px);
+
+	padding: var(--space-4);
+}
+
+.aspect-16-9 {
+	aspect-ratio: 16 / 9;
+}
+
+.aspect-4-3 {
+	aspect-ratio: 4 / 3;
+}
+
+.aspect-1-1 {
+	aspect-ratio: 1 / 1;
+}
+</style>
diff --git a/components/Base/Heading.vue b/components/Base/Heading.vue
index 60fb73ae..28f8036b 100644
--- a/components/Base/Heading.vue
+++ b/components/Base/Heading.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { computed, toRefs, unref } from 'vue';
-
 export interface BaseHeadingProps {
 	size?: 'title' | 'large' | 'medium' | 'small';
 	tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'strong';
 	icon?: string;
 	align?: 'start' | 'center' | 'end';
+	font?: 'display' | 'body';
 }
 
 const props = withDefaults(defineProps<BaseHeadingProps>(), {
+	font: 'display',
 	size: 'large',
 	tag: 'h2',
 	align: 'start',
@@ -24,53 +24,77 @@ const iconSize = computed(() => {
 </script>
 
 <template>
-	<component :is="tag" class="base-heading" :class="size">
+	<component
+		:is="tag"
+		:class="[
+			'base-heading',
+			size,
+			{
+				display: font === 'display',
+				body: font === 'body',
+			},
+		]"
+	>
 		<BaseIcon v-if="icon && size !== 'title'" :name="icon" :size="iconSize" :weight="700" />
 		<slot />
 	</component>
 </template>
 
 <style scoped>
-.base-heading {
+.display {
 	font-family: var(--family-display);
+}
+
+.body {
+	font-family: var(--family-body);
+}
+
+.base-heading {
 	color: currentColor;
-	font-weight: 600;
+	font-weight: 700;
 	margin: 0;
 	text-align: v-bind(align);
 }
 
-.base-icon {
+.base-heading :deep(em) {
+	font-style: normal;
+	background: linear-gradient(88deg, var(--purple-300) 0%, var(--pink-200) 100%);
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+}
+
+.base-heading .base-icon {
 	vertical-align: middle;
 }
 
 .title {
-	font-size: 96px;
-	line-height: 96px;
+	font-size: var(--font-size-8xl);
+	line-height: var(--line-height-8xl);
 }
 
 .large {
-	font-size: 40px;
-	line-height: 48px;
+	font-size: var(--font-size-5xl);
+	line-height: var(--line-height-5xl);
 }
 
 .medium {
-	font-size: 24px;
-	line-height: 32px;
+	font-size: var(--font-size-2xl);
+	line-height: var(--line-height-2xl);
 }
 
 .medium .base-icon {
 	vertical-align: -4px;
-	margin-right: 4px;
+	margin-right: var(--space-1);
 }
 
 .small {
-	font-size: 14px;
-	line-height: 26px;
-	text-transform: uppercase;
+	font-size: var(--font-size-base);
+	line-height: var(--line-height-base);
 }
 
 .small .base-icon {
 	vertical-align: -2px;
-	margin-right: 2px;
+	margin-right: var(--space-05);
 }
 </style>
diff --git a/components/Base/Icon.vue b/components/Base/Icon.vue
index f37f3c4c..ab49699b 100644
--- a/components/Base/Icon.vue
+++ b/components/Base/Icon.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, unref } from 'vue';
-
 export interface BaseIconProps {
 	/**
 	 * Name of the Material Symbol to use.
@@ -23,7 +21,7 @@ export interface BaseIconProps {
 
 const props = withDefaults(defineProps<BaseIconProps>(), {
 	size: 'medium',
-	weight: 500,
+	weight: 400,
 });
 
 const opticalSize = computed(() => {
@@ -47,7 +45,7 @@ const fontSize = computed(() => unref(opticalSize) + 'px');
 
 <style scoped>
 .base-icon {
-	--base-icon-color: var(--foreground);
+	--base-icon-color: var(--black);
 
 	color: var(--base-icon-color);
 	font-family: 'Material Symbols Outlined';
diff --git a/components/Base/Text.vue b/components/Base/Text.vue
new file mode 100644
index 00000000..0720c2f1
--- /dev/null
+++ b/components/Base/Text.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+export interface BaseTextProps {
+	/**
+	 * The alignment of the text.
+	 */
+	align?: 'start' | 'center' | 'end';
+}
+
+defineProps<BaseTextProps>();
+</script>
+
+<template>
+	<div class="base-text"><slot /></div>
+</template>
+
+<style scoped>
+.base-text {
+	font-family: var(--family-body);
+	color: var(--gray-500);
+
+	/* TODO: Add styling for all base elements */
+}
+</style>
diff --git a/components/Base/Video.vue b/components/Base/Video.vue
new file mode 100644
index 00000000..869a5588
--- /dev/null
+++ b/components/Base/Video.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+export interface BaseVideoProps {
+	/**
+	 * The title of the video.
+	 */
+	title: string;
+
+	/**
+	 * The url of the video.
+	 */
+	url: string;
+}
+
+const props = defineProps<BaseVideoProps>();
+
+const iframeSrc = computed(() => {
+	const { url } = props;
+
+	if (props.url.includes('youtube.com')) {
+		return `https://www.youtube.com/embed/${url.split('v=')[1]}`;
+	}
+
+	if (url.includes('youtu.be')) {
+		return `https://www.youtube.com/embed/${url.split('be/')[1]}`;
+	}
+
+	if (url.includes('vimeo.com')) {
+		return `https://player.vimeo.com/video/${url.split('vimeo.com/')[1]}`;
+	}
+
+	if (url.includes('loom.com')) {
+		return `https://www.loom.com/embed/${url.split('loom.com/share/')[1]}`;
+	}
+
+	return null;
+});
+</script>
+
+<template>
+	<iframe
+		v-if="iframeSrc"
+		class="base-video"
+		loading="lazy"
+		:src="iframeSrc"
+		frameborder="0"
+		allow="autoplay; fullscreen; picture-in-picture"
+		allowfullscreen
+		:title="title"
+	/>
+</template>
+
+<style scoped>
+.base-video {
+	width: 100%;
+	aspect-ratio: 16 / 9;
+}
+</style>