Initial commit to github

2025-08-22 15:40:01 -05:00
commit e8efdbeb34
230 changed files with 32213 additions and 0 deletions
--- a/views/blocks/accordion/accordion.css
+++ b/views/blocks/accordion/accordion.css
@@ -0,0 +1,68 @@
+/* Accordion block styles */
+
+.accordion {
+  border-radius: 0.25rem;
+  border: 1px solid var(--color-dark);
+  width: 100%;
+
+  details.accBody {
+    border-bottom: 1px solid var(--color-dark);
+    max-height: 3.7rem;
+    overflow: hidden;
+    padding: 1rem;
+    transition: 0.75s max-height ease-in-out;
+    transition-behavior: allow-discrete;
+
+    &:last-of-type { border: none; }
+
+    summary.accHeader {
+      cursor: pointer;
+      list-style-type: none;
+      padding-right: 2rem;
+      position: relative;
+
+      &::-webkit-details-marker { display: none; }
+
+      h2 {
+        color: var(--color-dark);
+        cursor: pointer;
+        font-size: 1.25rem;
+        font-weight: 500;
+        margin: 0;
+      }
+
+      svg.marker {
+        color: var(--color-dark);
+        fill: var(--color-dark);
+        height: 1rem;
+        position: absolute;
+        right: 0;
+        top: 0.25rem;
+        width: 1.25rem;
+      }
+    }
+
+    div.accContent {
+      margin-top: 1rem;
+    }
+
+    &[open] {
+      background-color: var(--color-dark);
+      border-color: var(--color-light);
+      color: var(--color-light);
+      max-height: 20rem;
+      transition: 0.75s max-height ease-in-out;
+      transition-behavior: allow-discrete;
+
+      summary.accHeader {
+        h2 { color: var(--color-light); }
+
+        svg.marker {
+          color: var(--color-light);
+          fill: var(--color-light);
+          transform: rotate(45deg);
+        }
+      }
+    }
+  }
+}
--- a/views/blocks/accordion/accordion.php
+++ b/views/blocks/accordion/accordion.php
@@ -0,0 +1,51 @@
+<?php
+/**
+ * Block Name: Accordion
+ *
+ * This is the template that renders the Accordion block.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+$open     = get_field( 'open' );
+$group    = get_field( 'group_items' );
+$accItems = get_field( 'accordion_items' );
+
+if ( $accItems ) :
+	$classes = 'accordion';
+
+	if ( ! $is_preview ) {
+		$wrapper = get_block_wrapper_attributes(
+			array( 'class' => $classes )
+		);
+	} else {
+		$wrapper = 'class="' . $classes . '"';
+	}
+	?>
+
+	<section <?php echo wp_kses_post( $wrapper ); ?>>
+	<?php foreach ( $accItems as $index => $item ) : ?>
+		<?php
+		$itemID = 'accordion-' . ( $index + 1 );
+		$isOpen = ( $index === 0 && $open ) ? 'open' : '';
+		?>
+		<details <?php echo esc_attr( $group ) ? 'name="' . esc_attr( $group ) . '"' : ''; ?> <?php echo esc_attr( $isOpen ); ?> class="accBody">
+		<summary class="accHeader">
+			<h2><?php echo esc_html( $item['title'] ); ?></h2>
+
+			<svg xmlns="http://www.w3.org/2000/svg" class="marker" fill="none" height="1rem" width="1rem" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" aria-labelledby="<?php echo esc_attr( $itemID ); ?>-title <?php echo esc_attr( $itemID ); ?>-desc">
+			<title id="<?php echo esc_attr( $itemID ); ?>-title">Open icon</title>
+			<desc id="<?php echo esc_attr( $itemID ); ?>-desc">icon that represents the state of the summary</desc>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
+			</svg>
+		</summary>
+
+		<div id="<?php echo esc_attr( $itemID ); ?>" class="accContent">
+			<?php echo wp_kses_post( $item['content'] ); ?>
+		</div>
+		</details>
+	<?php endforeach; ?>
+	</section>
+<?php endif; ?>
--- a/views/blocks/accordion/block.json
+++ b/views/blocks/accordion/block.json
@@ -0,0 +1,27 @@
+{
+  "name": "acf/accordion",
+  "title": "Accordion",
+  "description": "Accordion block built with details and summary elements.",
+  "style": [
+    "file:./accordion.css"
+  ],
+  "category": "vdi-block",
+  "icon": "block-default",
+  "keywords": [
+    "accordion",
+    "faq"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "accordion.php"
+  },
+  "supports": {
+    "align": true,
+    "anchor": false,
+    "color": true,
+    "html": true,
+    "jsx": true,
+    "mode": true,
+    "multiple": true
+  }
+}
--- a/views/blocks/boilerplate/block.json
+++ b/views/blocks/boilerplate/block.json
@@ -0,0 +1,26 @@
+{
+  "name": "acf/boilerplate",
+  "title": "Block Boilerplate",
+  "description": "Boilerplate code to create ACF blocks.",
+  "style": [
+    "file:./boiilerplate.css"
+  ],
+  "category": "vdi-block",
+  "icon": "block-default",
+  "keywords": [
+    "boilerplate"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "boilerplate.php"
+  },
+  "supports": {
+    "align": false,
+    "anchor": false,
+    "color": false,
+    "html": false,
+    "jsx": false,
+    "mode": false,
+    "multiple": false
+  }
+}
--- a/views/blocks/boilerplate/boilerplate.css
+++ b/views/blocks/boilerplate/boilerplate.css
--- a/views/blocks/boilerplate/boilerplate.php
+++ b/views/blocks/boilerplate/boilerplate.php
@@ -0,0 +1,27 @@
+<?php
+/**
+ * Block Name: Boilerplate
+ *
+ * This is the template for building your own custom blocks.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+$classes = 'boilerplate';
+
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes(
+		array(
+			'class' => $classes,
+		)
+	);
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+?>
+
+<section <?php echo esc_attr( $wrapper ); ?>>
+	<!-- Your block code will go here -->
+</section>
--- a/views/blocks/button/block.json
+++ b/views/blocks/button/block.json
@@ -0,0 +1,24 @@
+{
+  "name": "acf/button",
+  "title": "Button (VDI)",
+  "description": "A button.",
+  "category": "vdi-block",
+  "icon": "button",
+  "keywords": [
+    "button"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "button.php"
+  },
+  "supports": {
+    "align": false,
+    "anchor": false,
+    "color": false,
+    "html": false,
+    "jsx": false,
+    "mode": true,
+    "multiple": true
+  },
+  "parent": [ "acf/buttons" ]
+}
--- a/views/blocks/button/button.php
+++ b/views/blocks/button/button.php
@@ -0,0 +1,51 @@
+<?php
+/**
+ * Button block
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Retrieve ACF fields
+$element  = get_field( 'element' ) ? get_field( 'element' ) : 'a';
+$btnLink  = get_field( 'link' );
+$url      = $btnLink['url'] ? $btnLink['url'] : '';
+$target   = $btnLink['target'] ? $btnLink['target'] : '';
+$btnTitle = $btnLink['title'] ? $btnLink['title'] : 'Button';
+$color    = get_field( 'color' );
+$variant  = get_field( 'variant' );
+$size     = get_field( 'size' );
+$width    = get_field( 'width' );
+
+// Handle admin preview
+if ( is_admin() && $url ) {
+	$url = '#';
+}
+
+// Set wrapper classes
+$classes = 'button text-center';
+
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes(
+		array( 'class' => $classes )
+	);
+
+	$wrapper = str_replace( 'class="', '', $wrapper );
+	$wrapper = str_replace( '"', '', $wrapper );
+} else {
+	$wrapper = $classes;
+}
+?>
+
+<x-button
+	btnClasses="<?php echo esc_attr( $wrapper ); ?>"
+	element="<?php echo esc_attr( $element ); ?>"
+	url="<?php echo esc_url( $url ); ?>"
+	target="<?php echo esc_attr( $target ); ?>"
+	title="<?php echo esc_attr( $btnTitle ); ?>"
+	color="<?php echo esc_attr( $color ); ?>"
+	variant="<?php echo esc_attr( $variant ); ?>"
+	size="<?php echo esc_attr( $size ); ?>"
+	width="<?php echo esc_attr( $width ); ?>"
+></x-button>
--- a/views/blocks/buttons/block.json
+++ b/views/blocks/buttons/block.json
@@ -0,0 +1,24 @@
+{
+  "name": "acf/buttons",
+  "title": "Buttons (VDI)",
+  "description": "A button or group of buttons.",
+  "allowedBlocks": [ "acf/button" ],
+  "category": "vdi-block",
+  "icon": "button",
+  "keywords": [
+    "buttons"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "buttons.php"
+  },
+  "supports": {
+    "align": false,
+    "anchor": true,
+    "color": false,
+    "html": true,
+    "jsx": true,
+    "mode": false,
+    "multiple": true
+  }
+}
--- a/views/blocks/buttons/buttons.php
+++ b/views/blocks/buttons/buttons.php
@@ -0,0 +1,27 @@
+<?php
+/**
+ * Block Name: Buttons
+ *
+ * This is the template that renders the Buttons block.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+$ibClasses = 'flex flex-wrap gap-4 w-full justify-center sm:justify-start';
+
+$classes = 'align-with-content my-[1.2em]';
+
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes(
+		array( 'class' => $classes )
+	);
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+?>
+
+<div id="<?php echo esc_attr( $block['id'] ); ?>" <?php echo esc_attr( $wrapper ); ?>>
+	<InnerBlocks className="<?php echo esc_attr( $ibClasses ); ?>" />
+</div>
--- a/views/blocks/grid-cell/block.json
+++ b/views/blocks/grid-cell/block.json
@@ -0,0 +1,27 @@
+{
+  "name": "acf/grid-cell",
+  "title": "Grid Cell (VDI)",
+  "description": "Custom grid cell block.",
+  "style": [
+    "file:./grid-cell.css"
+  ],
+  "category": "vdi-block",
+  "icon": "grid-view",
+  "keywords": [
+    "grid"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "grid-cell.php"
+  },
+  "supports": {
+    "align": false,
+    "anchor": false,
+    "color": true,
+    "html": false,
+    "jsx": true,
+    "mode": true,
+    "multiple": true
+  },
+  "parent": [ "acf/grid" ]
+}
--- a/views/blocks/grid-cell/grid-cell.css
+++ b/views/blocks/grid-cell/grid-cell.css
--- a/views/blocks/grid-cell/grid-cell.php
+++ b/views/blocks/grid-cell/grid-cell.php
@@ -0,0 +1,48 @@
+<?php
+/**
+ * Block Name: Grid Cell
+ *
+ * This is the template that displays the Grid Cell block.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Initialize variables
+$className = ! empty( $block['className'] ) ? $block['className'] : '';
+
+$span    = get_field( 'col_span' );
+$spanBPs = get_field( 'col_span_breakpoints' );
+
+$className .= $className . ' grid-cell px-4 py-2';
+
+$gridClasses = '';
+
+// Add column span classes
+if ( $span && $span !== 'auto' ) {
+	$gridClasses .= ' col-span-' . $span;
+}
+
+// Add breakpoint-specific column span classes
+if ( $spanBPs ) {
+	foreach ( $spanBPs as $bp ) {
+		$gridClasses .= ' ' . $bp . ':col-span-' . get_field( 'col_span_' . $bp );
+	}
+}
+
+// Combine all classes
+$className .= ' ' . trim( $gridClasses );
+
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes(
+		array( 'class' => trim( $className ) )
+	);
+} else {
+	$wrapper = '';
+}
+?>
+
+<div <?php echo wp_kses_post( $wrapper ); ?>>
+	<InnerBlocks className="" />
+</div>
--- a/views/blocks/grid/block.json
+++ b/views/blocks/grid/block.json
@@ -0,0 +1,27 @@
+{
+  "name": "acf/grid",
+  "title": "Grid Block (VDI)",
+  "description": "Custom grid block.",
+  "style": [
+    "file:./grid.css"
+  ],
+  "allowedBlocks": [ "acf/grid-cell" ],
+  "category": "vdi-block",
+  "icon": "grid-view",
+  "keywords": [
+    "grid"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "grid.php"
+  },
+  "supports": {
+    "align": false,
+    "anchor": true,
+    "color": false,
+    "html": false,
+    "jsx": true,
+    "mode": true,
+    "multiple": true
+  }
+}
--- a/views/blocks/grid/grid.css
+++ b/views/blocks/grid/grid.css
--- a/views/blocks/grid/grid.php
+++ b/views/blocks/grid/grid.php
@@ -0,0 +1,47 @@
+<?php
+/**
+ * Block Name: Grid
+ *
+ * This is the template that displays the grid block.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+$allowedBlocks  = array( 'acf/grid-cell' );
+$default_blocks = array(
+	array( 'acf/gric-cell' ),
+);
+
+// Initialize variables
+$anchor    = ! empty( $block['anchor'] ) ? $block['anchor'] : 'grid-' . $block['id'];
+$className = ! empty( $block['className'] ) ? $block['className'] : '';
+$colBPs    = get_field( 'columns_breakpoints' );
+$gapX      = get_field( 'gap_x' );
+$gapY      = get_field( 'gap_y' );
+
+$gridClasses = 'grid grid-cols-' . get_field( 'columns' );
+
+// Add breakpoint-specific column classes
+if ( $colBPs ) {
+	foreach ( $colBPs as $bp ) {
+		$gridClasses .= ' ' . $bp . ':grid-cols-' . get_field( 'columns_' . $bp );
+	}
+}
+
+// Add gap classes
+if ( $gapX ) {
+	$gridClasses .= ' gap-x-' . $gapX;
+}
+if ( $gapY ) {
+	$gridClasses .= ' gap-y-' . $gapY;
+}
+
+// Combine all classes
+$classes = trim( $className . ' ' . $gridClasses );
+?>
+
+<div id="<?php echo esc_attr( $anchor ); ?>">
+	<InnerBlocks className="<?php echo esc_attr( $classes ); ?>" />
+</div>
--- a/views/blocks/homepage-hero/block.json
+++ b/views/blocks/homepage-hero/block.json
@@ -0,0 +1,28 @@
+{
+  "name": "acf/homepage-hero",
+  "title": "Homepage Hero",
+  "description": "Hero block for home page.",
+  "style": [
+    "file:./homepage-hero.css"
+  ],
+  "category": "vdi-block",
+  "icon": "block-default",
+  "keywords": [
+    "homepage-hero",
+    "hero",
+    "home"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "homepage-hero.php"
+  },
+  "supports": {
+    "align": true,
+    "anchor": true,
+    "color": false,
+    "html": true,
+    "jsx": true,
+    "mode": true,
+    "multiple": false
+  }
+}
--- a/views/blocks/homepage-hero/homepage-hero.css
+++ b/views/blocks/homepage-hero/homepage-hero.css
--- a/views/blocks/homepage-hero/homepage-hero.php
+++ b/views/blocks/homepage-hero/homepage-hero.php
@@ -0,0 +1,75 @@
+<?php
+/**
+ * Block Name: Homepage Hero
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Retrieve ACF fields
+$heading = get_field( 'heading' );
+$intro   = get_field( 'intro' );
+$ctas    = get_field( 'calls_to_action' );
+
+$classes = 'homepage-hero mx-break-out bg-black bg-cover bg-no-repeat text-light py-12 lg:py-16 overflow-hidden';
+
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes(
+		array(
+			'class' => $classes,
+		)
+	);
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+?>
+
+<section <?php echo wp_kses_post( $wrapper ); ?>>
+	<div class="container content-wrapper">
+	<div class="max-w-lg sm:text-center lg:text-left lg:items-center ml-0">
+		<?php if ( ! empty( $heading ) ) : ?>
+		<h1 class="text-4xl lg:text-5xl font-bold leading-tight mb-4">
+			<?php echo esc_html( $heading ); ?>
+		</h1>
+		<?php endif; ?>
+
+		<?php if ( ! empty( $intro ) ) : ?>
+		<div class="mt-3 text-base text-light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl with:max-w-full">
+			<?php echo wp_kses_post( $intro ); ?>
+		</div>
+		<?php endif; ?>
+
+		<?php if ( ! empty( $ctas ) ) : ?>
+		<div class="reset mt-4 sm:mt-6 flex flex-wrap justify-center lg:justify-start gap-2">
+			<?php foreach ( $ctas as $index => $cta ) : ?>
+				<?php
+				$ctaLink   = $cta['link'];
+				$ctaURL    = $ctaLink['url'] ?? '#';
+				$ctaTarget = $ctaLink['target'] ?? '_self';
+				$ctaTitle  = $ctaLink['title'] ?? '';
+
+				// Handle admin preview
+				if ( is_admin() && $ctaURL ) {
+					$ctaURL = '#';
+				}
+				?>
+				<x-button
+					btnclasses="button text-center min-w-32"
+					element="a"
+					url="<?php echo esc_url( $ctaURL ); ?>"
+					target="<?php echo esc_attr( $ctaTarget ); ?>"
+					title="<?php echo esc_attr( $ctaTitle ); ?>"
+					<?php if ( $index === 0 ) { ?>
+						color="primary"
+					<?php } else { ?>
+						color="primary" variant="outline"
+					<?php } ?>
+					width="small"
+				></x-button>
+			<?php endforeach; ?>
+		</div>
+		<?php endif; ?>
+	</div>
+	</div>
+</section>
--- a/views/blocks/media-text-innerblocks/block.json
+++ b/views/blocks/media-text-innerblocks/block.json
@@ -0,0 +1,31 @@
+{
+  "name": "acf/media-text-innerblocks",
+  "title": "Media with Text Block - InnerBlocks Variant",
+  "description": "2 column content with image and optional calls-to-action",
+  "style": [
+    "file:./media-text-innerblocks.css"
+  ],
+  "category": "vdi-block",
+  "icon": "screenoptions",
+  "keywords": [
+    "media",
+    "media-text",
+    "image",
+    "video",
+    "text",
+    "columns"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "media-text-innerblocks.php"
+  },
+  "supports": {
+    "align": true,
+    "anchor": true,
+    "color": true,
+    "html": true,
+    "jsx": true,
+    "mode": true,
+    "multiple": true
+  }
+}
--- a/views/blocks/media-text-innerblocks/media-text-innerblocks.css
+++ b/views/blocks/media-text-innerblocks/media-text-innerblocks.css
--- a/views/blocks/media-text-innerblocks/media-text-innerblocks.php
+++ b/views/blocks/media-text-innerblocks/media-text-innerblocks.php
@@ -0,0 +1,57 @@
+<?php
+/**
+ * Block Name: Media Text Inner Blocks
+ *
+ * This is the template that displays the media text inner blocks.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Retrieve ACF fields
+$bgColor   = get_field( 'background_color' ) ? get_field( 'background_color' ) : '#c5c5c5';
+$isDark    = get_field( 'is_dark' ) ? get_field( 'is_dark' ) : false;
+$mediaLeft = get_field( 'media_on_left' ) ? get_field( 'media_on_left' ) : false;
+$vidBlock  = get_field( 'video' ) ? get_field( 'video' ) : '';
+$imgBlock  = get_field( 'image' ) ? get_field( 'image' ) : array(
+	'url' => '',
+	'alt' => '',
+);
+
+// Set classes and styles
+$style      = "background-color: $bgColor;";
+$clsMedia   = $mediaLeft ? 'order-first' : 'order-last';
+$clsContent = $mediaLeft ? 'order-last pr-8' : 'order-first pl-8';
+$classes    = 'media-cols grid grid-cols-1 lg:grid-cols-2 gap-8 items-center mb-8 p-0';
+
+if ( $isDark ) {
+	$classes .= ' dark text-light';
+}
+
+// Set wrapper attributes
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes( array( 'class' => $classes ) );
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+
+// if the video block contains an iframe, add the role="presentation" attribute
+if ( $vidBlock && strpos( $vidBlock, '<iframe' ) !== false ) {
+	$vidBlock = str_replace( '<iframe', '<iframe role="presentation"', $vidBlock );
+}
+?>
+
+<div <?php echo wp_kses_post( $wrapper ); ?> style="<?php echo esc_attr( $style ); ?>">
+	<div class="<?php echo esc_attr( $mediaClass ); ?> <?php echo $vidBlock ? 'aspect-video' : ''; ?>">
+	<?php if ( $vidBlock ) : ?>
+		<?php echo wp_kses( $vidBlock, escEmbeds() ); ?>
+	<?php else : ?>
+		<img src="<?php echo esc_url( $imgBlock['url'] ); ?>" alt="<?php echo esc_attr( $imgBlock['alt'] ); ?>" class="">
+	<?php endif; ?>
+	</div>
+
+	<div class="content-wrapper text-balance <?php echo esc_attr( $contentClass ); ?>">
+		<InnerBlocks />
+	</div>
+</div>
--- a/views/blocks/media-text/block.json
+++ b/views/blocks/media-text/block.json
@@ -0,0 +1,31 @@
+{
+  "name": "acf/media-text",
+  "title": "Media With Text Block",
+  "description": "2 column content with image and optional calls-to-action",
+  "style": [
+    "file:./media-text.css"
+  ],
+  "category": "vdi-block",
+  "icon": "screenoptions",
+  "keywords": [
+    "media",
+    "media-text",
+    "image",
+    "video",
+    "text",
+    "columns"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "media-text.php"
+  },
+  "supports": {
+    "align": true,
+    "anchor": true,
+    "color": true,
+    "html": true,
+    "jsx": true,
+    "mode": true,
+    "multiple": true
+  }
+}
--- a/views/blocks/media-text/media-text.css
+++ b/views/blocks/media-text/media-text.css
--- a/views/blocks/media-text/media-text.php
+++ b/views/blocks/media-text/media-text.php
@@ -0,0 +1,104 @@
+<?php
+/**
+ * Block Name: Media With Text
+ *
+ * This is the template that displays the Media With Text block.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Retrieve ACF fields
+$bgColor   = get_field( 'background_color' ) ? get_field( 'background_color' ) : '#c5c5c5';
+$isDark    = get_field( 'is_dark' ) ? get_field( 'is_dark' ) : false;
+$mediaLeft = get_field( 'media_on_left' ) ? get_field( 'media_on_left' ) : false;
+$vidBlock  = get_field( 'video' ) ? get_field( 'video' ) : '';
+$imgBlock  = get_field( 'image' ) ? get_field( 'image' ) : array(
+	'url' => '',
+	'alt' => '',
+);
+$heading   = get_field( 'heading' ) ? get_field( 'heading' ) : '';
+$subHead   = get_field( 'subheading' ) ? get_field( 'subheading' ) : '';
+$content   = get_field( 'content' ) ? get_field( 'content' ) : '';
+$ctas      = get_field( 'calls_to_action' ) ? get_field( 'calls_to_action' ) : array();
+
+// Set classes and styles
+$style        = "background-color: $bgColor;";
+$mediaClass   = $mediaLeft ? 'order-first' : 'order-last';
+$contentClass = $mediaLeft ? 'order-last pr-8' : 'order-first pl-8';
+$classes      = 'media-cols grid grid-cols-1 lg:grid-cols-2 gap-8 items-center mb-8 p-0';
+
+if ( $isDark ) {
+	$classes .= ' dark text-white';
+}
+
+// Set wrapper attributes
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes( array( 'class' => $classes ) );
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+
+// if the video block contains an iframe, add the role="presentation" attribute
+if ( $vidBlock && strpos( $vidBlock, '<iframe' ) !== false ) {
+	$vidBlock = str_replace( '<iframe', '<iframe role="presentation"', $vidBlock );
+}
+?>
+
+<div <?php echo wp_kses_post( $wrapper ); ?> style="<?php echo esc_attr( $style ); ?>">
+	<div class="<?php echo esc_attr( $mediaClass ); ?> <?php echo $vidBlock ? 'aspect-video' : ''; ?>">
+	<?php if ( $vidBlock ) : ?>
+		<?php echo wp_kses( $vidBlock, escEmbeds() ); ?>
+	<?php else : ?>
+		<img src="<?php echo esc_url( $imgBlock['url'] ); ?>" alt="<?php echo esc_attr( $imgBlock['alt'] ); ?>" class="">
+	<?php endif; ?>
+	</div>
+
+	<div class="content-wrapper text-balance <?php echo esc_attr( $contentClass ); ?>">
+	<?php if ( ! empty( $heading ) ) : ?>
+		<h2 class=""><?php echo esc_html( $heading ); ?></h2>
+	<?php endif; ?>
+
+	<?php if ( ! empty( $subHeading ) ) : ?>
+		<h3 class=""><?php echo esc_html( $subHeading ); ?></h3>
+	<?php endif; ?>
+
+	<?php if ( ! empty( $content ) ) : ?>
+		<div><?php echo wp_kses_post( $content ); ?></div>
+	<?php endif; ?>
+
+	<?php if ( ! empty( $ctas ) ) : ?>
+		<div class="reset flex flex-wrap justify-center lg:justify-start gap-2">
+		<?php foreach ( $ctas as $cta ) : ?>
+			<?php
+			$ctaLink    = $cta['link'];
+			$ctaUrl     = $ctaLink['url'] ?? '#';
+			$ctaTarget  = $ctaLink['target'] ?? '_self';
+			$ctaTitle   = $ctaLink['title'] ?? '';
+			$ctaColor   = $cta['color'] ?? '';
+			$ctaVariant = $cta['variant'] ?? '';
+			$ctaSize    = $cta['size'] ?? '';
+			$ctaWidth   = $cta['width'] ?? '';
+
+					// Handle admin preview
+			if ( is_admin() && $ctaURL ) {
+				$ctaURL = '#';
+			}
+			?>
+					<x-button
+						btnclasses="button text-center"
+						element="a"
+						url="<?php echo esc_url( $ctaURL ); ?>"
+						target="<?php echo esc_attr( $ctaTarget ); ?>"
+						title="<?php echo esc_attr( $ctaTitle ); ?>"
+						color="<?php echo esc_attr( $ctaColor ); ?>"
+						variant="<?php echo esc_attr( $ctaVariant ); ?>"
+						size="<?php echo esc_attr( $ctaSize ); ?>"
+						width="<?php echo esc_attr( $ctaWidth ); ?>"
+					></x-button>
+		<?php endforeach; ?>
+		</div>
+	<?php endif; ?>
+	</div>
+</div>
--- a/views/blocks/page-children/block.json
+++ b/views/blocks/page-children/block.json
@@ -0,0 +1,26 @@
+{
+  "name": "acf/page-children",
+  "title": "Page Children",
+  "description": "Block to display children of curent page.",
+  "style": [
+    "file:./page-children.css"
+  ],
+  "category": "vdi-block",
+  "icon": "block-default",
+  "keywords": [
+    "page-children"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "page-children.php"
+  },
+  "supports": {
+    "align": false,
+    "anchor": false,
+    "color": false,
+    "html": false,
+    "jsx": false,
+    "mode": false,
+    "multiple": false
+  }
+}
--- a/views/blocks/page-children/page-children.css
+++ b/views/blocks/page-children/page-children.css
--- a/views/blocks/page-children/page-children.php
+++ b/views/blocks/page-children/page-children.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * Page Children block
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Retrieve the current page ID and its children
+$currentPageId       = get_the_ID();
+$currentPageChildren = get_pages( array( 'child_of' => $currentPageId ) );
+
+// Set classes
+$classes = 'page-children';
+
+// Set wrapper attributes
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes( array( 'class' => $classes ) );
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+?>
+
+<?php if ( ! empty( $currentPageChildren ) ) : ?>
+	<section id="page-children" <?php echo wp_kses_post( $wrapper ); ?>>
+	<ul>
+		<?php foreach ( $currentPageChildren as $child ) : ?>
+		<li class="page-child">
+			<a href="<?php echo esc_url( get_permalink( $child->ID ) ); ?>">
+			<?php echo esc_html( $child->post_title ); ?>
+			</a>
+		</li>
+		<?php endforeach; ?>
+	</ul>
+	</section>
+<?php endif; ?>
--- a/views/blocks/section/block.json
+++ b/views/blocks/section/block.json
@@ -0,0 +1,27 @@
+{
+  "name": "acf/section",
+  "title": "Section",
+  "description": "Content section",
+  "style": [
+    "file:./section.css"
+  ],
+  "category": "vdi-block",
+  "icon": "align-wide",
+  "keywords": [
+    "setion",
+    "content"
+  ],
+  "acf": {
+    "mode": "preview",
+    "renderTemplate": "section.php"
+  },
+  "supports": {
+    "align": true,
+    "anchor": true,
+    "color": true,
+    "html": true,
+    "jsx": true,
+    "mode": true,
+    "multiple": true
+  }
+}
--- a/views/blocks/section/section.css
+++ b/views/blocks/section/section.css
--- a/views/blocks/section/section.php
+++ b/views/blocks/section/section.php
@@ -0,0 +1,86 @@
+<?php
+/**
+ * Block Name: Section
+ *
+ * This is the template that displays the section block.
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Retrieve ACF fields
+$contentWidth = get_field( 'content_width' );
+$isDark       = get_field( 'is_dark' );
+$fontColor    = get_field( 'font_color' );
+$bgColor      = get_field( 'background_color' );
+$bgImage      = get_field( 'background_image' );
+$ovlColor     = get_field( 'overlay_color' );
+$ovlImage     = get_field( 'overlay_image' );
+$ovlOpacity   = get_field( 'overlay_opacity' ) ? get_field( 'overlay_opacity' ) / 100 : 1;
+
+// Set classes
+$classes = 'section';
+
+if ( $contentWidth === 'full' ) {
+	$classes .= ' mx-break-out';
+}
+if ( $isDark ) {
+	$classes .= ' dark text-light';
+}
+if ( $bgColor || $bgImage ) {
+	$classes .= ' has-background bg-no-repeat';
+}
+if ( $ovlColor || $ovlImage ) {
+	$classes .= ' has-overlay';
+}
+if ( $fontColor ) {
+	$classes .= ' has-font-color';
+}
+
+// Set styles
+$styles = '';
+
+if ( $bgColor ) {
+	$styles .= "background-color: $bgColor;";
+}
+if ( $bgImage ) {
+	$styles .= ' background-image: url(' . esc_url( $bgImage['url'] ) . ');';
+}
+if ( $fontColor ) {
+	$styles .= " color: $fontColor;";
+}
+
+// Set overlay styles
+$overlayStyles = '';
+
+if ( $ovlColor ) {
+	$overlayStyles .= "background-color: $ovlColor;";
+}
+if ( $ovlImage ) {
+	$overlayStyles .= ' background-image: url(' . esc_url( $ovlImage['url'] ) . ');';
+}
+
+$overlayStyles .= " opacity: $ovlOpacity;";
+
+// Set wrapper attributes
+if ( ! $is_preview ) {
+	$wrapper = get_block_wrapper_attributes( array( 'class' => $classes ) );
+} else {
+	$wrapper = 'class="' . $classes . '"';
+}
+?>
+
+<section <?php echo wp_kses_post( $wrapper ); ?> style="<?php echo esc_attr( $styles ); ?>">
+	<?php if ( $ovlColor || $ovlImage ) : ?>
+		<div aria-hidden="true" class="section-overlay absolute inset-0 bg-center bg-cover bg-no-repeat" style="<?php echo esc_attr( $overlayStyles ); ?>"></div>
+	<?php endif; ?>
+
+	<?php if ( $contentWidth === 'full' ) : ?>
+		<InnerBlocks />
+	<?php else : ?>
+		<div class="container content-wrapper">
+			<InnerBlocks />
+		</div>
+	<?php endif; ?>
+</section>
--- a/views/components/menu-items/has-children.php
+++ b/views/components/menu-items/has-children.php
@@ -0,0 +1,68 @@
+<?php
+/**
+ * Main Navigation - Menu Item with children
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
+ */
+
+namespace BasicWP;
+
+// Variables available:
+// $item from parent template
+// $nestedNavItems, $hasChildren, $currentPage from MenuItems component
+
+// Generate item classes
+$itemClasses = array(
+	'menu-vdi__item',
+	'menu-vdi__item--parent',
+	'menu-vdi__item--' . str_replace( ' ', ' -', strtolower( $item->title ) ),
+);
+if ( ! empty( $item->classes ) ) {
+	$itemClasses = array_merge( $itemClasses, $item->classes );
+}
+
+// Generate toggle classes
+$toggleClasses = array( 'menu-vdi__toggle' );
+if ( ! empty( $item->classes ) ) {
+	$toggleClasses = array_merge( $toggleClasses, $item->classes );
+}
+?>
+
+<li id="menuVdiItem<?php echo esc_attr( $item->ID ); ?>" class="<?php echo esc_attr( implode( ' ', $itemClasses ) ); ?>">
+	<button aria-expanded="false" class="<?php echo esc_attr( implode( ' ', $toggleClasses ) ); ?>">
+	<?php echo esc_html( $item->title ); ?>
+	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+		<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+	</svg>
+	</button>
+
+	<ul class="menu-vdi__submenu">
+	<?php foreach ( $nestedNavItems( $item ) as $child ) : ?>
+		<?php if ( $hasChildren( $child ) ) : ?>
+		<li id="menuVdiItem<?php echo esc_attr( $child->ID ); ?>">
+			<span class="menu-vdi__item menu-vdi__item--child <?php echo ! empty( $item->classes ) ? esc_attr( implode( ' ', $item->classes ) ) : ''; ?>">
+			<?php echo esc_html( $child->title ); ?>
+			</span>
+
+			<ul>
+			<?php foreach ( $nestedNavItems( $child ) as $grandChild ) : ?>
+				<li id="menuVdiItem<?php echo esc_attr( $grandChild->ID ); ?>" class="menu-vdi__item menu-vdi__item--grandchild <?php echo ! empty( $item->classes ) ? esc_attr( implode( ' ', $item->classes ) ) : ''; ?>">
+				<a href="<?php echo esc_url( $grandChild->url ); ?>" aria-current="<?php echo esc_attr( $currentPage( $grandChild ) ); ?>"
+					<?php echo isset( $grandChild->target ) ? esc_attr( "target='$grandChild->target'" ) : ''; ?> class="sub-menu-item">
+					<?php echo esc_html( $grandChild->title ); ?>
+				</a>
+				</li>
+			<?php endforeach; ?>
+			</ul>
+		</li>
+		<?php else : ?>
+		<li id="menuVdiItem<?php echo esc_attr( $child->ID ); ?>" class="menu-vdi__item menu-vdi__item--child <?php echo ! empty( $item->classes ) ? esc_attr( implode( ' ', $item->classes ) ) : ''; ?>">
+			<a href="<?php echo esc_url( $child->url ); ?>" class="sub-menu-item">
+			<?php echo esc_html( $child->title ); ?>
+			</a>
+		</li>
+		<?php endif; ?>
+	<?php endforeach; ?>
+	</ul>
+</li>
--- a/views/components/menu-items/index.php
+++ b/views/components/menu-items/index.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * Main Navigation - Menu Items outer list
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
+ */
+
+namespace BasicWP;
+
+// Variables available from MenuItems component:
+// $topLevelNavItems, $hasChildren, $nestedNavItems, $currentPage, $location
+
+if ( $location === 'main_navigation' ) {
+	$menuID = 'menu-container';
+} else {
+	$menuID = 'menu-container-aux';
+}
+?>
+
+<ul id="<?php echo esc_attr( $menuID ); ?>" class="menu-vdi">
+	<li class="menu-item menu-item--search px-4 lg:hidden">
+		<?php get_template_part( 'views/forms/search' ); ?>
+	</li>
+
+	<?php foreach ( $topLevelNavItems as $item ) : ?>
+		<?php if ( $hasChildren( $item ) ) : ?>
+			<?php include __DIR__ . '/has-children.php'; ?>
+		<?php else : ?>
+			<?php include __DIR__ . '/single.php'; ?>
+		<?php endif; ?>
+	<?php endforeach; ?>
+</ul>
--- a/views/components/menu-items/single.php
+++ b/views/components/menu-items/single.php
@@ -0,0 +1,32 @@
+<?php
+/**
+ * Main Navigation - Menu Item without children
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
+ */
+
+namespace BasicWP;
+
+// Variables available:
+// $item from parent template
+// $currentPage from MenuItems component
+
+// Generate classes
+$itemClasses = array(
+	'menu-vdi__item',
+	'menu-vdi__item--single',
+	'menu-vdi__item--' . str_replace( ' ', '-', strtolower( $item->title ) ),
+);
+
+if ( ! empty( $item->classes ) ) {
+	$itemClasses = array_merge( $itemClasses, $item->classes );
+}
+?>
+
+<li id="menuVdiItem<?php echo esc_attr( $item->ID ); ?>" class="<?php echo esc_attr( implode( ' ', $itemClasses ) ); ?>">
+	<a href="<?php echo esc_url( $item->url ); ?>" aria-current="<?php echo esc_attr( $currentPage( $item ) ); ?>"
+	<?php echo isset( $item->target ) ? esc_attr( "target='$item->target'" ) : ''; ?> class="menu-vdi__link">
+	<?php echo esc_html( $item->title ); ?>
+	</a>
+</li>
--- a/views/components/nav-aux.php
+++ b/views/components/nav-aux.php
@@ -0,0 +1,39 @@
+<?php
+/**
+ * Main Navigation - Auxiliary
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation-aux.html
+ */
+
+namespace BasicWP;
+
+// Init Variables
+global $wp, $views;
+
+$menus = get_nav_menu_locations();
+
+if ( isset( $menus['aux_navigation'] ) ) {
+	$navItems = wp_get_nav_menu_items( $menus['aux_navigation'] );
+}
+
+$currentPageURL = home_url( $wp->request ) . '/';
+?>
+
+<div class="nav-aux__container hidden lg:block bg-dark w-full h-12 py-2">
+	<div class="container flex items-center justify-end gap-x-4 gap-y-0 flex-wrap">
+		<nav class="nav-aux" role="navigation" aria-label="Auxiliary">
+			<?php
+			if ( has_nav_menu( 'aux_navigation' ) ) {
+				// Initialize and render menu items
+				$menuItems = new MenuItems( 'aux_navigation' );
+				$menuItems->render();
+			}
+			?>
+		</nav>
+
+		<?php get_template_part( 'views/partials/social-media' ); ?>
+
+		<?php get_template_part( 'views/forms/search' ); ?>
+	</div>
+</div>
--- a/views/components/nav-main.php
+++ b/views/components/nav-main.php
@@ -0,0 +1,24 @@
+<?php
+/**
+ * Main Navigation Component
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
+ */
+
+namespace BasicWP;
+
+global $views;
+?>
+
+<nav class="nav-main" role="navigation" aria-label="Main">
+	<?php require_once __DIR__ . '/nav-main__toggle.php'; ?>
+
+	<?php
+	if ( has_nav_menu( 'main_navigation' ) ) {
+		// Initialize and render menu items
+		$menuItems = new MenuItems( 'main_navigation' );
+		$menuItems->render();
+	}
+	?>
+</nav>
--- a/views/components/nav-main__toggle.php
+++ b/views/components/nav-main__toggle.php
@@ -0,0 +1,46 @@
+<?php
+/**
+ * Main Navigation - Toggle Button
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/navigation/
+ */
+
+namespace BasicWP;
+
+// Init Variables
+$navIcon = isset( get_field( 'header', 'option' )['nav_icon'] ) ? get_field( 'header', 'option' )['nav_icon'] : '';
+
+// Generate toggle classes
+$toggleClasses = array( 'nav-main__toggle' );
+if ( $navIcon ) {
+	$toggleClasses[] = 'custom-icon';
+}
+?>
+
+<button
+	id="navMainToggle"
+	aria-label="Menu"
+	aria-expanded="false"
+	class="<?php echo esc_attr( implode( ' ', $toggleClasses ) ); ?>"
+>
+	<?php if ( $navIcon ) : ?>
+		<?php echo wp_get_attachment_image( $navIcon, 'full' ); ?>
+	<?php else : ?>
+		<!-- Hamburger Icon -->
+		<span class="nav-toggle-icon nav-toggle-hamburger">
+			<svg class="text-black fill-black" viewBox="0 0 100 80" width="40" height="40">
+				<rect y="0"  width="100" height="15"></rect>
+				<rect y="30" width="100" height="15"></rect>
+				<rect y="60" width="100" height="15"></rect>
+			</svg>
+		</span>
+		<!-- X Icon -->
+		<span class="nav-toggle-icon nav-toggle-x">
+			<svg class="text-black fill-black" viewBox="0 0 100 80" width="40" height="40">
+				<line x1="20" y1="20" x2="80" y2="60" stroke="black" stroke-width="15" stroke-linecap="round" />
+				<line x1="80" y1="20" x2="20" y2="60" stroke="black" stroke-width="15" stroke-linecap="round" />
+			</svg>
+		</span>
+	<?php endif; ?>
+</button>
--- a/views/forms/search.php
+++ b/views/forms/search.php
@@ -0,0 +1,29 @@
+<?php
+/**
+ * Global Search Form
+ *
+ * Please review documentation upon first use, and, as-needed:
+ * https://docs.vincentdevelopment.ca/docs/starter-v3-enhancements/search-global.html
+ */
+
+namespace BasicWP;
+
+?>
+
+<search role="search">
+  <form method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" class="global-search-form relative flex justify-start max-w-full w-full">
+    <label for="globalSearch">
+      <svg role="img" aria-labelledby="globalSearchLabel" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="absolute w-4 top-2 left-2 fill-primary-700">
+        <title id="globalSearchLabel"><?php echo esc_attr_x( 'Search', 'search-label', 'basicwp' ); ?></title>
+
+        <path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/>
+      </svg>
+    </label>
+
+    <input id="globalSearch" type="search" placeholder="" value="<?php echo esc_attr( get_search_query() ); ?>" name="s" class="md:min-w-[25ch] w-full md:w-[18em] max-w-full text-sm p-1 pl-7 border-2 border-primary-700 rounded-l focus-visible:ring-2 ring-primary-700 !outline-default">
+
+    <button type="submit" class="bg-primary rounded-r py-0 px-3 height-full text-sm text-white focus-visible:ring-2 ring-primary-700 !outline-default cursor-default">
+      <?php echo esc_attr_x( 'Search', 'search-submit', 'basicwp' ); ?>
+    </button>
+  </form>
+</search>
--- a/views/icons/facebook.php
+++ b/views/icons/facebook.php
@@ -0,0 +1 @@
+<i class="icon-facebook"></i>
--- a/views/icons/heart.php
+++ b/views/icons/heart.php
@@ -0,0 +1,3 @@
+<svg width="37.293" height="31.181" viewBox="0 0 37.293 31.181">
+  <path id="Path_70" data-name="Path 70" d="M392.883,725.41s12.524-6.616,16.37-15.1c2.074-4.575,2.126-12.873-4.471-13.955-8.061-1.321-11.9,8.771-11.9,8.771s-3.838-10.092-11.9-8.771c-6.6,1.082-6.545,9.38-4.472,13.955C380.358,718.794,392.883,725.41,392.883,725.41Z" transform="translate(-374.236 -695.229)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+</svg>
--- a/views/icons/instagram.php
+++ b/views/icons/instagram.php
@@ -0,0 +1 @@
+<i class="icon-instagram"></i>
--- a/views/icons/linkedin.php
+++ b/views/icons/linkedin.php
@@ -0,0 +1 @@
+<i class="icon-linkedin"></i>
--- a/views/icons/menu.php
+++ b/views/icons/menu.php
@@ -0,0 +1 @@
+<i class="fas fa-bars menu-hamburger-1"></i>
--- a/views/icons/pinterest.php
+++ b/views/icons/pinterest.php
@@ -0,0 +1 @@
+<i class="icon-pinterest"></i>
--- a/views/icons/search.php
+++ b/views/icons/search.php
@@ -0,0 +1,6 @@
+<svg width="29.683" height="31.696" viewBox="0 0 29.683 31.696">
+  <g id="Group_34" data-name="Group 34" transform="translate(-256.083 -695.182)">
+    <circle id="Ellipse_5" data-name="Ellipse 5" cx="12.181" cy="12.181" r="12.181" transform="translate(257.083 696.182)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+    <line id="Line_8" data-name="Line 8" x2="7.542" y2="7.542" transform="translate(276.809 717.922)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+  </g>
+</svg>
--- a/views/icons/shop.php
+++ b/views/icons/shop.php
@@ -0,0 +1 @@
+<i class="icon-shop"></i>
--- a/views/icons/shopping-basket.php
+++ b/views/icons/shopping-basket.php
@@ -0,0 +1,7 @@
+<svg width="37.014" height="33.477" viewBox="0 0 37.014 33.477">
+  <g id="Group_35" data-name="Group 35" transform="translate(-421.973 -692.933)">
+    <line id="Line_9" data-name="Line 9" x2="35.014" transform="translate(422.973 708.142)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
+    <path id="Path_71" data-name="Path 71" d="M424.559,711.237l3.274,12.082a2.832,2.832,0,0,0,2.733,2.091h19.828a2.832,2.832,0,0,0,2.733-2.091l3.274-12.082" fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" />
+    <path id="Path_72" data-name="Path 72" d="M429.982,704.431a10.5,10.5,0,1,1,21,0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+  </g>
+</svg>
--- a/views/icons/twitter-.php
+++ b/views/icons/twitter-.php
@@ -0,0 +1 @@
+<i class="icon-twitter"></i>
--- a/views/icons/twitter.php
+++ b/views/icons/twitter.php
@@ -0,0 +1 @@
+<i class="icon-x"></i>
--- a/views/icons/user.php
+++ b/views/icons/user.php
@@ -0,0 +1,6 @@
+<svg width="32.186" height="33.65" viewBox="0 0 32.186 33.65">
+  <g id="Group_36" data-name="Group 36" transform="translate(-302.929 -693.143)">
+    <path id="Path_73" data-name="Path 73" d="M303.929,725.793a15.093,15.093,0,1,1,30.186,0" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+    <circle id="Ellipse_6" data-name="Ellipse 6" cx="6.826" cy="6.826" r="6.826" transform="translate(312.196 694.143)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
+  </g>
+</svg>
--- a/views/icons/youtube.php
+++ b/views/icons/youtube.php
@@ -0,0 +1 @@
+<i class="icon-youtube"></i>
--- a/views/partials/page-hero.php
+++ b/views/partials/page-hero.php
@@ -0,0 +1,56 @@
+<?php
+/**
+ * Page Hero Partial
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+// Set variables
+$bgColor = get_field( 'background_color' );
+$isDark  = get_field( 'is_dark' );
+$heading = get_field( 'heading' );
+$intro   = get_field( 'intro' );
+
+// Fallback for heading
+if ( ! $heading ) {
+	$heading = getTheTitle();
+}
+
+// Additional logic for dark mode (if needed)
+if ( is_home() || is_single() || is_archive() || is_search() || is_404() ) {
+	$isDark = true;
+}
+?>
+
+<div class="bg-cover bg-no-repeat mb-12 py-12 lg:py-16 bg-dark text-light overflow-hidden <?php echo $isDark ? 'dark' : ''; ?>" <?php echo $bgColor ? 'style="background-color: ' . esc_attr( $bgColor ) . '"' : ''; ?>>
+
+	<div class="container mx-auto">
+		<div id="breadcrumbs">
+			<?php Breadcrumbs::render(); ?>
+		</div>
+
+		<div class="sm:text-center lg:items-start lg:text-left content-wrapper">
+			<?php
+			// Heading
+			if ( apply_filters( 'include_page_title_in_hero', true ) ) {
+				echo '<h1 class="mx-auto text-center text-light font-normal text-4xl sm:text-5xl lg:text-6xl xl:text-7xl">';
+				echo wp_kses_post( $heading );
+				echo '</h1>';
+			} else {
+				echo '<span class="mx-auto block text-center text-light font-normal text-4xl sm:text-5xl lg:text-6xl xl:text-7xl">';
+				echo wp_kses_post( $heading );
+				echo '</span>';
+			}
+
+			// Intro
+			if ( $intro ) {
+				echo '<p class="mt-3 text-base text-light sm:mt-5 sm:text-xl lg:text-lg xl:text-xl text-center">';
+				echo wp_kses_post( $intro );
+				echo '</p>';
+			}
+			?>
+		</div>
+	</div>
+</div>
--- a/views/partials/social-media.php
+++ b/views/partials/social-media.php
@@ -0,0 +1,39 @@
+<?php
+/**
+ * Social Media Links Partial
+ *
+ * @package BasicWP
+ */
+
+namespace BasicWP;
+
+$classes = $args['classes'] ?? '';
+$circle  = $args['circle'] ?? '';
+
+// Define social media sites and their URLs
+$sites = array(
+	'facebook'  => getFieldValue( 'social_media.facebook' ) ? getFieldValue( 'social_media.facebook' ) : '',
+	'twitter'   => getFieldValue( 'social_media.twitter' ) ? getFieldValue( 'social_media.twitter' ) : '',
+	'pinterest' => getFieldValue( 'social_media.pinterest' ) ? getFieldValue( 'social_media.pinterest' ) : '',
+	'instagram' => getFieldValue( 'social_media.instagram' ) ? getFieldValue( 'social_media.instagram' ) : '',
+	'youtube'   => getFieldValue( 'social_media.youtube' ) ? getFieldValue( 'social_media.youtube' ) : '',
+	'linkedin'  => getFieldValue( 'social_media.linkedin' ) ? getFieldValue( 'social_media.linkedin' ) : '',
+);
+
+// Add circle class if the circle option is enabled
+if ( $circle ) {
+	$classes .= ' circular-icon';
+}
+
+// Loop through the social media sites and output links
+foreach ( $sites as $name => $url ) {
+	if ( $url ) {
+		?>
+	<a href="<?php echo esc_url( $url ); ?>" class="<?php echo esc_attr( $classes ); ?>">
+		<?php get_template_part( 'views/icons/' . $name ); ?>
+		<span class="sr-only bg-white text-black">Visit our <?php echo esc_html( $name ); ?> page</span>
+	</a>
+		<?php
+	}
+}
+?>
				`@@ -0,0 +1 @@`
				`<i class="fas fa-bars menu-hamburger-1"></i>`