Rough in blockcta

components/Base/Block.vue

@@ -16,6 +16,7 @@ const components: Record<BlockType, ReturnType<typeof resolveComponent>> = {
 	block_columns: resolveComponent('BlockColumns'),
 	block_featuregrid: 'div',
 	block_hero_form: resolveComponent('BlockHeroForm'),
+	block_cta: resolveComponent('BlockCta'),
 	block_hero_rotator: resolveComponent('BlockHeroRotator'),
 	block_logocloud: resolveComponent('BlockLogoCloud'),
 	block_media: resolveComponent('BlockMedia'),

components/Base/Panel.vue

@@ -32,15 +32,20 @@ defineProps<BasePanelProps>();
 <style lang="scss" scoped>
 .base-panel-container {
 	container-type: inline-size;
+	height: 100%;
+	border-radius: var(--rounded-lg);
+	background: linear-gradient(172deg, rgba(228, 234, 241, 0.25) 0%, rgba(228, 234, 241, 0) 100%);
+	border: 1px solid color-mix(in srgb, transparent, var(--gray-400) 40%);
+	backdrop-filter: blur(4px);
 }
 
 .base-panel {
-	border-radius: var(--rounded-lg);
-	background: linear-gradient(172deg, rgba(228, 234, 241, 0.25) 0%, rgba(228, 234, 241, 0) 100%);
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
 	gap: var(--space-7);
 	padding: var(--space-7);
-	border: 1px solid color-mix(in srgb, transparent, var(--gray-400) 40%);
-	backdrop-filter: blur(4px);
 
 	@container (width > 35rem) {
 		gap: var(--space-10);

components/Block/Cta.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { BlockProps } from './types';
+
+const { $directus, $readItem } = useNuxtApp();
+
+const props = defineProps<BlockProps>();
+
+const { data: comp } = useAsyncData(props.uuid, () =>
+	$directus.request(
+		$readItem('block_cta', props.uuid, {
+			fields: ['id', 'heading', 'icon', 'subheading', 'button'],
+		})
+	)
+);
+</script>
+
+<template>
+	<BasePanel v-if="comp">
+		<template #header>
+			<BaseDirectusImage v-if="comp.icon" class="icon" height="25" :uuid="comp.icon" alt="" />
+		</template>
+
+		<BaseHeading v-if="comp.heading" size="small" :content="comp.heading" />
+		<BaseText v-if="comp.subheading" :content="comp.subheading" />
+
+		<template #footer>
+			<BlockButton v-if="comp.button" :uuid="comp.button" />
+		</template>
+	</BasePanel>
+</template>
+
+<style lang="scss" scoped>
+
+</style>

types/schema/blocks/block-cta.ts

@@ -0,0 +1,10 @@
+import type { File } from '../system/index.js';
+import type { BlockButton } from './block-button.js';
+
+export interface BlockCta {
+	id: string;
+	icon: string | File | null;
+	heading: string | null;
+	subheading: string | null;
+	button: string | BlockButton | null;
+}

types/schema/blocks/block.ts

@@ -3,6 +3,7 @@ import type { BlockButton } from './block-button.js';
 import type { BlockCardGroup } from './block-card-group.js';
 import type { BlockCard } from './block-card.js';
 import type { BlockColumns } from './block-columns.js';
+import type { BlockCta } from './block-cta.js';
 import type { BlockFeatureGrid } from './block-feature-grid.js';
 import type { BlockHeader } from './block-header.js';
 import type { BlockHeroForm } from './block-hero-form.js';
@@ -16,40 +17,42 @@ import type { BlockShowcase } from './block-showcase.js';
 import type { BlockTestimonialSlider } from './block-testimonial-slider.js';
 
 export type BlockType =
-	| 'block_button'
 	| 'block_button_group'
-	| 'block_card'
+	| 'block_button'
 	| 'block_card_group'
+	| 'block_card'
 	| 'block_columns'
+	| 'block_cta'
 	| 'block_featuregrid'
+	| 'block_header'
 	| 'block_hero_form'
 	| 'block_hero_rotator'
 	| 'block_logocloud'
 	| 'block_media'
-	| 'block_header'
-	| 'block_richtext'
 	| 'block_metrics'
+	| 'block_quote'
+	| 'block_richtext'
 	| 'block_separator'
 	| 'block_separator'
 	| 'block_showcase'
-	| 'block_quote'
 	| 'block_testimonial_slider';
 
 export type Block =
 	| BlockButton
 	| BlockButtonGroup
-	| BlockCardGroup
 	| BlockCard
+	| BlockCardGroup
 	| BlockColumns
+	| BlockCta
 	| BlockFeatureGrid
+	| BlockHeader
+	| BlockHeader
 	| BlockHeroForm
 	| BlockHeroRotator
-	| BlockHeader
-	| BlockMetrics
 	| BlockLogoCloud
 	| BlockMedia
-	| BlockHeader
+	| BlockMetrics
+	| BlockQuote
 	| BlockSeparator
 	| BlockShowcase
-	| BlockTestimonialSlider
-	| BlockQuote;
+	| BlockTestimonialSlider;

types/schema/blocks/index.ts

@@ -3,6 +3,7 @@ export type * from './block-button.js';
 export type * from './block-card-group.js';
 export type * from './block-card.js';
 export type * from './block-columns.js';
+export type * from './block-cta.js';
 export type * from './block-feature-grid.js';
 export type * from './block-header.js';
 export type * from './block-hero-form.js';

types/schema/schema.ts

@@ -6,6 +6,7 @@ import type {
 	BlockCardGroup,
 	BlockCardGroupBlockCard,
 	BlockColumns,
+	BlockCta,
 	BlockFeatureGrid,
 	BlockHeader,
 	BlockHeroForm,
@@ -44,25 +45,26 @@ export interface Schema {
 	videos: Video[];
 
 	// Blocks
-	block_button: BlockButton[];
-	block_button_group: BlockButtonGroup[];
 	block_button_group_block_button: BlockButtonGroupBlockButton[];
-	block_card_group: BlockCardGroup[];
+	block_button_group: BlockButtonGroup[];
+	block_button: BlockButton[];
 	block_card_group_block_card: BlockCardGroupBlockCard[];
+	block_card_group: BlockCardGroup[];
 	block_card: BlockCard[];
 	block_columns: BlockColumns[];
+	block_cta: BlockCta[];
 	block_featuregrid: BlockFeatureGrid[];
+	block_header: BlockHeader[];
 	block_hero_form: BlockHeroForm[];
-	block_logocloud: BlockLogoCloud[];
 	block_logocloud_logo: BlockLogoCloudLogo[];
+	block_logocloud: BlockLogoCloud[];
 	block_media: BlockMedia[];
-	block_header: BlockHeader[];
+	block_metrics: BlockMetrics[];
+	block_quote: BlockQuote[];
 	block_richtext: BlockRichText[];
 	block_separator: BlockSeparator[];
 	block_showcase: BlockShowcase[];
 	block_testimonial_slider: BlockTestimonialSlider[];
-	block_quote: BlockQuote[];
-	block_metrics: BlockMetrics[];
 
 	// Meta
 	globals: Globals;