@sociallane/elements 1.0.0

package/widgets/hero-stacked-image/hero-stacked-image.php

@@ -0,0 +1,248 @@
+<?php
+/**
+ * Widget: Hero Stacked Image
+ *
+ * A hero with centered headline, description, and two CTAs on a dark gradient background,
+ * with a full-width stacked image below (e.g. dashboard or app screenshot).
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Hero Stacked Image Widget
+ */
+class Hero_Stacked_Image extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'hero-stacked-image';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Hero Stacked Image', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-image-box';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-heroes' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'hero', 'stacked', 'image', 'banner', 'headline', 'cta' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_content_section();
+		$this->register_image_section();
+		$this->register_animation_controls( true );
+	}
+
+	private function register_content_section(): void {
+		$this->start_controls_section(
+			'section_content',
+			[
+				'label' => esc_html__( 'Content', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_headline',
+			[
+				'label'   => esc_html__( 'Show Headline', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'headline',
+			[
+				'label'       => esc_html__( 'Headline', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+				'condition'   => [ 'show_headline' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'headline_tag',
+			[
+				'label'     => esc_html__( 'Headline Tag', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'h1',
+				'options'   => [ 'h1' => 'H1', 'h2' => 'H2', 'h3' => 'H3' ],
+				'condition' => [ 'show_headline' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'show_description',
+			[
+				'label'   => esc_html__( 'Show Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'description',
+			[
+				'label'       => esc_html__( 'Description', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXTAREA,
+				'placeholder' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'sociallane-elements' ),
+				'rows'        => 3,
+				'condition'   => [ 'show_description' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'show_cta_primary',
+			[
+				'label'   => esc_html__( 'Show primary button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'cta_primary_text',
+			[
+				'label'       => esc_html__( 'Primary button text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'condition'   => [ 'show_cta_primary' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'cta_primary_url',
+			[
+				'label'     => esc_html__( 'Primary button URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [ 'show_cta_primary' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'cta_primary_style',
+			[
+				'label'     => esc_html__( 'Primary button style', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'primary',
+				'options'   => sociallane_get_button_preset_options(),
+				'condition' => [ 'show_cta_primary' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'show_cta_secondary',
+			[
+				'label'   => esc_html__( 'Show secondary button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'cta_secondary_text',
+			[
+				'label'       => esc_html__( 'Secondary button text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'condition'   => [ 'show_cta_secondary' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'cta_secondary_url',
+			[
+				'label'     => esc_html__( 'Secondary button URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [ 'show_cta_secondary' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'cta_secondary_style',
+			[
+				'label'     => esc_html__( 'Secondary button style', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'ghost',
+				'options'   => sociallane_get_button_preset_options(),
+				'condition' => [ 'show_cta_secondary' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_image_section(): void {
+		$this->start_controls_section(
+			'section_image',
+			[
+				'label' => esc_html__( 'Stacked Media', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'video_url',
+			[
+				'label'       => esc_html__( 'Video URL', 'sociallane-elements' ),
+				'type'        => Controls_Manager::URL,
+				'placeholder' => esc_html__( 'https://…', 'sociallane-elements' ),
+				'description' => esc_html__( 'YouTube, Vimeo, or direct link to a video file (.mp4, .webm). When set, shows thumbnail with play button. Leave empty to use the image below.', 'sociallane-elements' ),
+			]
+		);
+		$this->add_control(
+			'video_poster',
+			[
+				'label'       => esc_html__( 'Video poster image', 'sociallane-elements' ),
+				'type'        => Controls_Manager::MEDIA,
+				'description' => esc_html__( 'Optional. Used as thumbnail for Vimeo or direct video URLs when no automatic thumbnail is available.', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'show_image',
+			[
+				'label'   => esc_html__( 'Show stacked image', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'image',
+			[
+				'label'     => esc_html__( 'Image', 'sociallane-elements' ),
+				'type'      => Controls_Manager::MEDIA,
+				'default'   => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
+				'condition' => [ 'show_image' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'image_alt',
+			[
+				'label'       => esc_html__( 'Image Alt Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'description' => esc_html__( 'Required for accessibility', 'sociallane-elements' ),
+				'condition'   => [ 'show_image' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_hero_stacked_image_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

package/widgets/hero-stacked-image/templates/wrapper.php

@@ -0,0 +1,176 @@
+<?php
+/**
+ * Template: Hero Stacked Image Wrapper
+ *
+ * Centered hero (headline, description, CTAs) on dark gradient + full-width stacked image below.
+ * AVAILABLE DATA ($view): show_headline, show_description, show_cta_primary, show_cta_secondary,
+ * show_image, headline, headline_tag, description, cta_primary, cta_secondary, has_video, video_type,
+ * video_embed_url, video_src, video_thumbnail, image, classes, widget_id
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) ) {
+	return;
+}
+
+$anim          = $view['animation'] ?? [];
+$section_attrs = sociallane_section_animation_attrs( $anim );
+$headline_attrs = sociallane_headline_animation_attrs( $anim );
+$hero_id     = 'hero-stacked-image-' . $view['widget_id'];
+$has_heading = $view['show_headline'] && $view['headline'] !== '';
+$has_video   = ! empty( $view['has_video'] ) && ! empty( $view['video_type'] );
+$video_type  = $view['video_type'] ?? '';
+$has_image   = ! $has_video && $view['show_image'] && ! empty( $view['image']['src'] );
+$has_media   = $has_video || $has_image;
+$header = [
+	'headline_attrs'    => $headline_attrs,
+	'use_wrapper'       => false,
+	'show_headline'     => $view['show_headline'] && $view['headline'] !== '',
+	'headline'          => $view['headline'] ?? '',
+	'headline_tag'      => $view['headline_tag'] ?? 'h1',
+	'headline_class'    => $view['classes']['headline'] ?? '',
+	'headline_extras'   => 'text-3xl sm:text-4xl md:text-5xl font-bold font-heading leading-tight',
+	'headline_id'       => $hero_id,
+	'show_description'  => $view['show_description'] && $view['description'] !== '',
+	'description'       => $view['description'] ?? '',
+	'description_class' => $view['classes']['description'] ?? '',
+	'description_extras'=> 'mt-6 text-lg md:text-xl leading-relaxed',
+];
+$elements_path = SOCIALLANE_ELEMENTS_PATH . 'elements';
+?>
+
+<?php // ========== HERO STACKED IMAGE START ========== ?>
+
+<section
+	class="relative flex flex-col bg-neutral-100 text-zinc-900 dark:bg-zinc-900 dark:text-neutral-300<?php echo $has_media ? '' : ' min-h-screen'; ?>"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	<?php if ( $has_heading ) : ?>aria-labelledby="<?php echo esc_attr( $hero_id ); ?>"<?php endif; ?>
+>
+	<?php /* Subtle glow behind hero content */ ?>
+	<div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+		<div class="absolute left-1/2 top-1/3 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-blue-chill-600/20 dark:bg-blue-chill-500/10 rounded blur-3xl"></div>
+	</div>
+
+	<div class="container relative z-10 mx-auto <?php echo $has_media ? 'px-4 sm:px-6 lg:px-8 pt-16 md:pt-24 lg:pt-32 pb-0' : 'flex-1 flex flex-col justify-center px-4 sm:px-6 lg:px-8 pt-4 md:pt-12 lg:pt-32 md:pb-24'; ?>">
+		<div class="max-w-3xl mx-auto text-center">
+			<?php include $elements_path . '/section-header/templates/render.php'; ?>
+
+			<?php
+			$cta_group = [
+				'show_primary'    => $view['show_cta_primary'] && $view['cta_primary'],
+				'primary'         => $view['cta_primary'] ?? null,
+				'show_secondary'  => $view['show_cta_secondary'] && $view['cta_secondary'],
+				'secondary'       => $view['cta_secondary'] ?? null,
+				'class'           => 'mt-10 flex flex-col sm:flex-row items-center justify-center gap-4',
+				'primary_extras'  => 'focus:ring-white focus:ring-offset-blue-chill-900 dark:focus:ring-offset-blue-chill-900',
+				'secondary_extras'=> 'focus:ring-white focus:ring-offset-blue-chill-900 dark:focus:ring-offset-blue-chill-900',
+				'elements_path'   => $elements_path,
+			];
+			include $elements_path . '/cta-group/templates/render.php';
+			?>
+		</div>
+	</div>
+
+	<?php if ( $has_media ) : ?>
+		<?php /* Media: container width, directly below hero content */ ?>
+		<div class="container relative z-10 mx-auto rounded-xl w-full px-4 sm:px-6 lg:px-8 pt-8 md:pt-10 pb-8 md:pb-12 max-h-[50vh]">
+			<div class="w-full h-full max-h-[50vh] rounded-xl">
+				<?php if ( $has_video ) : ?>
+					<?php
+					$block_id   = 'hero-stacked-video-' . $view['widget_id'];
+					$thumb_url  = $view['video_thumbnail'];
+					$is_embed   = ( $video_type === 'youtube' || $video_type === 'vimeo' );
+					$is_native  = ( $video_type === 'native' );
+					?>
+					<div id="<?php echo esc_attr( $block_id ); ?>" class="relative aspect-video w-full max-h-[50vh] bg-neutral-900" data-video-type="<?php echo esc_attr( $video_type ); ?>">
+						<div class="hero-stacked-video-thumb absolute inset-0">
+							<?php if ( $thumb_url !== '' ) : ?>
+								<img
+									src="<?php echo esc_url( $thumb_url ); ?>"
+									alt=""
+									class="w-full h-full object-cover"
+									loading="lazy"
+									decoding="async"
+								/>
+							<?php else : ?>
+								<div class="w-full h-fit bg-neutral-800" aria-hidden="true"></div>
+							<?php endif; ?>
+							<button
+								type="button"
+								class="hero-stacked-video-play absolute inset-0 flex items-center justify-center w-full bg-black/20 hover:bg-black/30 transition-colors focus:outline-none focus:ring-2 focus:ring-white focus:ring-inset"
+								aria-label="<?php esc_attr_e( 'Play video', 'sociallane-elements' ); ?>"
+								<?php if ( $is_embed ) : ?>data-embed-url="<?php echo esc_attr( $view['video_embed_url'] ); ?>"<?php endif; ?>
+								<?php if ( $is_native ) : ?>data-video-src="<?php echo esc_attr( $view['video_src'] ); ?>"<?php endif; ?>
+							>
+								<span class="w-16 h-16 md:w-20 md:h-20 rounded-full bg-white/95 flex items-center justify-center shadow-lg flex-shrink-0" aria-hidden="true">
+									<svg class="w-6 h-6 md:w-8 md:h-8 text-neutral-900 ml-1" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+										<path d="M8 5v14l11-7L8 5z"/>
+									</svg>
+								</span>
+							</button>
+						</div>
+						<?php if ( $is_embed ) : ?>
+							<div class="hero-stacked-video-embed hidden absolute inset-0 w-full h-full">
+								<iframe class="w-full h-full" title="<?php esc_attr_e( 'Video player', 'sociallane-elements' ); ?>" src="" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+							</div>
+						<?php endif; ?>
+						<?php if ( $is_native && ! empty( $view['video_src'] ) ) : ?>
+							<div class="hero-stacked-video-native hidden absolute inset-0 w-full h-full">
+								<video class="w-full h-full object-cover" src="<?php echo esc_url( $view['video_src'] ); ?>" controls playsinline></video>
+							</div>
+						<?php endif; ?>
+					</div>
+					<script>
+					(function() {
+						var block = document.getElementById('<?php echo esc_js( $block_id ); ?>');
+						if (!block) return;
+						var playBtn = block.querySelector('.hero-stacked-video-play');
+						var thumb = block.querySelector('.hero-stacked-video-thumb');
+						var type = block.getAttribute('data-video-type');
+						if (!playBtn || !thumb) return;
+						playBtn.addEventListener('click', function() {
+							if (type === 'youtube' || type === 'vimeo') {
+								var embedWrap = block.querySelector('.hero-stacked-video-embed');
+								var iframe = block.querySelector('iframe');
+								var url = playBtn.getAttribute('data-embed-url');
+								if (url && iframe) {
+									iframe.src = url;
+									thumb.classList.add('hidden');
+									if (embedWrap) embedWrap.classList.remove('hidden');
+								}
+							} else if (type === 'native') {
+								var nativeWrap = block.querySelector('.hero-stacked-video-native');
+								var video = block.querySelector('video');
+								if (video && nativeWrap) {
+									thumb.classList.add('hidden');
+									nativeWrap.classList.remove('hidden');
+									video.play();
+								}
+							}
+						});
+					})();
+					</script>
+				<?php else : ?>
+					<img
+						src="<?php echo esc_url( $view['image']['src'] ); ?>"
+						alt="<?php echo esc_attr( $view['image']['alt'] ); ?>"
+						<?php if ( ! empty( $view['image']['srcset'] ) ) : ?>srcset="<?php echo esc_attr( $view['image']['srcset'] ); ?>"<?php endif; ?>
+						<?php if ( ! empty( $view['image']['sizes'] ) ) : ?>sizes="<?php echo esc_attr( $view['image']['sizes'] ); ?>"<?php endif; ?>
+						<?php if ( ! empty( $view['image']['width'] ) ) : ?>width="<?php echo esc_attr( $view['image']['width'] ); ?>"<?php endif; ?>
+						<?php if ( ! empty( $view['image']['height'] ) ) : ?>height="<?php echo esc_attr( $view['image']['height'] ); ?>"<?php endif; ?>
+						loading="<?php echo esc_attr( $view['image']['loading'] ); ?>"
+						decoding="async"
+						class="w-full max-h-[50vh] rounded-2xl block max-w-full object-cover object-bottom"
+					/>
+				<?php endif; ?>
+			</div>
+		</div>
+	<?php endif; ?>
+</section>
+
+<?php // ========== HERO STACKED IMAGE END ========== ?>

package/widgets/intro-pattern/data/view.php

@@ -0,0 +1,73 @@
+<?php
+/**
+ * Data Preparation: Intro Pattern
+ *
+ * Builds template-ready $view with headline, description, layout, and
+ * theme classes (light + dark). Pattern background classes are defined here.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for Intro Pattern widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID
+ * @return array Template-ready data
+ */
+function prepare_intro_pattern_view( array $settings, string $widget_id ): array {
+	$show_headline    = ( $settings['show_headline'] ?? 'yes' ) === 'yes';
+	$show_description = ( $settings['show_description'] ?? 'yes' ) === 'yes';
+	$show_pattern     = ( $settings['show_pattern'] ?? 'yes' ) === 'yes';
+
+	$headline = $show_headline ? wp_kses_post( $settings['headline'] ?? '' ) : '';
+	$description = $show_description ? wp_kses_post( $settings['description'] ?? '' ) : '';
+
+	$headline_tag = in_array( $settings['headline_tag'] ?? 'h1', [ 'h1', 'h2', 'h3' ], true )
+		? $settings['headline_tag']
+		: 'h1';
+
+	$content_width = $settings['content_width'] ?? 'medium';
+	$width_classes = [
+		'narrow' => 'max-w-2xl',
+		'medium' => 'max-w-3xl',
+		'wide'   => 'max-w-4xl',
+		'full'   => 'max-w-full',
+	];
+	$content_width_class = $width_classes[ $content_width ] ?? $width_classes['medium'];
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true ] );
+
+	/*
+	|--------------------------------------------------------------------------
+	| Theme Classes (light + dark)
+	|--------------------------------------------------------------------------
+	*/
+	$classes = [
+		'section'     => 'bg-white dark:bg-neutral-900',
+		'headline'    => 'text-neutral-900 dark:text-white',
+		'description' => 'text-neutral-600 dark:text-neutral-300',
+		'pattern'     => 'sl-bg-pattern-intro',
+	];
+
+	// Pattern is optional; when hidden we don't add the pattern class
+	if ( ! $show_pattern ) {
+		$classes['pattern'] = '';
+	}
+
+	return [
+		'show_headline'       => $show_headline,
+		'show_description'    => $show_description,
+		'headline'            => $headline,
+		'description'         => $description,
+		'headline_tag'        => $headline_tag,
+		'content_width_class' => $content_width_class,
+		'classes'             => $classes,
+		'widget_id'           => $widget_id,
+		'animation'           => $animation,
+	];
+}

package/widgets/intro-pattern/intro-pattern.php

@@ -0,0 +1,161 @@
+<?php
+/**
+ * Widget: Intro Pattern
+ *
+ * Hero-style intro with a large display headline, supporting paragraph, and
+ * a subtle repeating geometric (slanted rounded-rect) background pattern.
+ * Left-aligned; optional show/hide for headline and description.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Intro Pattern Widget
+ */
+class Intro_Pattern extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'intro-pattern';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Intro Pattern', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-heading';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-heroes' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'intro', 'hero', 'headline', 'pattern', 'studio', 'about' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_content_section();
+		$this->register_layout_section();
+		$this->register_animation_controls( true );
+	}
+
+	private function register_content_section(): void {
+		$this->start_controls_section(
+			'section_content',
+			[
+				'label' => esc_html__( 'Content', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_headline',
+			[
+				'label'   => esc_html__( 'Show headline', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'headline',
+			[
+				'label'       => esc_html__( 'Headline', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXTAREA,
+				'default'     => esc_html__( 'Award-winning development studio based in Denmark.', 'sociallane-elements' ),
+				'rows'        => 3,
+				'condition'   => [ 'show_headline' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'headline_tag',
+			[
+				'label'     => esc_html__( 'Headline tag', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'h1',
+				'options'   => [
+					'h1' => 'H1',
+					'h2' => 'H2',
+					'h3' => 'H3',
+				],
+				'condition' => [ 'show_headline' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'show_description',
+			[
+				'label'   => esc_html__( 'Show description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'description',
+			[
+				'label'       => esc_html__( 'Description', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXTAREA,
+				'default'     => esc_html__( "We are a development studio working at the intersection of design and technology. It's a really busy intersection though - a lot of our staff have been involved in hit and runs.", 'sociallane-elements' ),
+				'rows'        => 4,
+				'condition'   => [ 'show_description' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'show_pattern',
+			[
+				'label'   => esc_html__( 'Show background pattern', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_layout_section(): void {
+		$this->start_controls_section(
+			'section_layout',
+			[
+				'label' => esc_html__( 'Layout', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'content_width',
+			[
+				'label'   => esc_html__( 'Content width', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'medium',
+				'options' => [
+					'narrow'  => esc_html__( 'Narrow', 'sociallane-elements' ),
+					'medium'  => esc_html__( 'Medium', 'sociallane-elements' ),
+					'wide'    => esc_html__( 'Wide', 'sociallane-elements' ),
+					'full'    => esc_html__( 'Full', 'sociallane-elements' ),
+				],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_intro_pattern_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}