Page Builder > Floating Page

assets/css/main.css

@@ -1,3 +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,[email protected],100..700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Nothing+You+Could+Do&&family=Inter:wght@300;500;700&family=Poppins:wght@400;600;700&family=Material+Symbols+Outlined:opsz,[email protected],100..700&display=swap');
 @import url('vars.css');
 @import url('global.css');

assets/css/vars.css

@@ -2,6 +2,7 @@
 	--family-display: 'Poppins', sans-serif;
 	--family-body: 'Inter', sans-serif;
 	--family-code: 'Fira Code', monospace;
+	--family-signature: 'Nothing You Could Do', cursive;
 
 	--primary: var(--purple-400);
 	--secondary: var(--pink-200);
@@ -152,7 +153,7 @@
 	--rounded-lg: 0.5rem;
 	--rounded-xl: 0.75rem;
 	--rounded-2xl: 1rem;
-	--rounded-3xl: 1.5rem;
+	--rounded-3xl: 1.5rem; /* 24px */
 	--rounded-full: 9999px;
 
 	/* Transitions */
@@ -173,4 +174,5 @@
 
 	/* 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);
+	--shadow-lg: 0px 0.625rem 2.5rem -0.625rem rgba(14, 28, 47, 0.25), 0px 0.125rem 0.25rem 0px rgba(14, 28, 47, 0.05);
 }

components/Block/FloatingPage.vue

@@ -0,0 +1,140 @@
+<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_floating_page', props.uuid, {
+			fields: [
+				'id',
+				'content',
+				'heading',
+				'person_image',
+				'person_name',
+				'person_title',
+				{ button: ['page', 'external_url', 'variant', 'label', 'color', 'pulse', 'type', 'resource'] },
+			],
+		})
+	)
+);
+</script>
+
+<template>
+	<div v-if="comp" class="floating-page">
+		<div class="wrapper">
+			<div v-if="comp.heading" class="heading">
+				<CompHeading :uuid="comp.heading" />
+			</div>
+			<BaseText v-if="comp.content" class="content" :content="comp?.content" />
+			<div class="footer">
+				<div class="person">
+					<BaseDirectusImage
+						v-if="comp?.person_image"
+						width="96"
+						height="96"
+						class="avatar"
+						:uuid="comp?.person_image"
+						:alt="comp?.person_name ?? 'undefined'"
+						loading="lazy"
+					/>
+					<div>
+						<p v-if="comp?.person_name" class="signature">{{ comp?.person_name }}</p>
+						<p v-if="comp?.person_title" class="title">{{ comp?.person_title }}</p>
+					</div>
+				</div>
+				<div v-if="comp?.button">
+					<BaseButton
+						:href="comp.button.external_url ?? comp.button.page ?? ' undefined'"
+						:variant="comp.button.variant"
+						:color="comp.button.color"
+						:pulse="comp.button.pulse"
+						trailing-icon="arrow_forward"
+					>
+						{{ comp.button.label }}
+					</BaseButton>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped lang="scss">
+.floating-page {
+	container-type: inline-size;
+
+	box-shadow: var(--shadow-lg);
+	border-radius: var(--rounded-2xl);
+}
+
+.wrapper {
+	container-type: inline-size;
+
+	> * + * {
+		margin-block-start: var(--space-8);
+	}
+
+	padding-inline: var(--space-8);
+	padding-block: var(--space-8);
+
+	@container (width > 20rem) {
+		padding-inline: var(--space-12);
+		padding-block: var(--space-10);
+	}
+
+	@container (width > 64rem) {
+		padding-inline: var(--space-20);
+		padding-block: var(--space-14);
+	}
+}
+
+.content {
+	font-family: var(--family-display);
+}
+
+.footer {
+	> * + * {
+		margin-block-start: var(--space-8);
+	}
+
+	@container (width > 48rem) {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--space-8);
+		justify-content: space-between;
+		align-items: center;
+
+		> * + * {
+			margin-block-start: 0;
+		}
+	}
+}
+
+.person {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--space-4);
+
+	p {
+		margin: 0;
+	}
+
+	.avatar {
+		border-radius: var(--rounded-full);
+	}
+
+	.signature {
+		font-family: var(--family-signature);
+		font-size: var(--font-size-3xl);
+	}
+
+	.title {
+		font-size: var(--font-size-sm);
+		font-style: italic;
+		color: var(--gray-500);
+		margin-block-start: var(--space-1);
+	}
+}
+</style>

components/PageBuilder.vue

@@ -34,6 +34,7 @@ const components: Record<BlockType, ReturnType<typeof resolveComponent>> = {
 	block_separator: resolveComponent('BlockSeparator'),
 	block_showcase: resolveComponent('BlockShowcase'),
 	block_testimonial_slider: resolveComponent('BlockTestimonialSlider'),
+	block_floating_page: resolveComponent('BlockFloatingPage'),
 };
 </script>
 

types/schema/blocks/block-floating-page.ts

@@ -0,0 +1,13 @@
+import type { File } from '../system/file.js';
+import type { ComponentHeading } from '../components/component-heading.js';
+import type { ComponentButton } from '../components/component-button.js';
+
+export interface BlockFloatingPage {
+	id: string;
+	heading: ComponentHeading | null;
+	content: string | null;
+	button: ComponentButton | null;
+	person_image: File | null;
+	person_name: string | null;
+	person_title: string | null;
+}

types/schema/blocks/block.ts

@@ -9,6 +9,8 @@ import type { BlockPageHeader } from './block-page-header.js';
 import type { BlockSeparator } from './block-separator.js';
 import type { BlockShowcase } from './block-showcase.js';
 import type { BlockTestimonialSlider } from './block-testimonial-slider.js';
+import type { BlockFloatingPage } from './block-floating-page.js';
+import type { BlockRichText } from './block-rich-text.js';
 
 export type BlockType =
 	| 'block_cardgroup'
@@ -22,19 +24,23 @@ export type BlockType =
 	| 'block_pageheader'
 	| 'block_richtext'
 	| 'block_separator'
-	| 'block_separator'
 	| 'block_showcase'
-	| 'block_testimonial_slider';
+	| 'block_cardgroup'
+	| 'block_testimonial_slider'
+	| 'block_richtext'
+	| 'block_floating_page';
 
 export type Block =
 	| BlockColumns
 	| BlockFeatureGrid
 	| BlockHeroForm
 	| BlockHeroHeadline
 	| BlockHeroRotator
+	| BlockTestimonialSlider
+	| BlockFloatingPage
+	| BlockRichText
 	| BlockLogoCloud
 	| BlockMediaFullWidth
 	| BlockPageHeader
 	| BlockSeparator
-	| BlockShowcase
-	| BlockTestimonialSlider;
+	| BlockShowcase;

types/schema/blocks/index.ts

@@ -11,4 +11,5 @@ export type * from './block-rich-text.js';
 export type * from './block-separator.js';
 export type * from './block-showcase.js';
 export type * from './block-testimonial-slider.js';
+export type * from './block-floating-page.js';
 export type * from './block.js';

types/schema/components/component-button.ts

@@ -7,8 +7,8 @@ export interface ComponentButton {
 	sort: number | null;
 	label: string | null;
 	color: 'primary' | 'secondary' | 'gray' | 'white' | 'danger';
-	pulse: boolean;
 	variant: 'solid' | 'frosted' | 'gradient';
+	pulse: boolean;
 	button_group: string | ComponentButtonGroup | null;
 	page: string | Page | null;
 	type: string | null;

types/schema/schema.ts

@@ -12,6 +12,7 @@ import type {
 	BlockSeparator,
 	BlockShowcase,
 	BlockTestimonialSlider,
+	BlockFloatingPage,
 } from './blocks/index.js';
 import type {
 	ComponentButton,
@@ -59,6 +60,7 @@ export interface Schema {
 	block_separator: BlockSeparator[];
 	block_showcase: BlockShowcase[];
 	block_testimonial_slider: BlockTestimonialSlider[];
+	block_floating_page: BlockFloatingPage[];
 
 	// Components
 	comp_button_groups: ComponentButtonGroup[];