@sociallane/elements 1.0.0

package/packages/widgets/cta-banner/templates/wrapper.php

@@ -0,0 +1,131 @@
+<?php
+/**
+ * Template: CTA Banner Wrapper
+ *
+ * Full-width banner with background image and lower CTA block: dark overlay,
+ * centered headline, description, and contact (phone | email) with icons.
+ *
+ * AVAILABLE DATA ($view): show_headline, show_description, show_phone, show_email,
+ * show_cta, headline, headline_tag, description, image, phone, email, cta,
+ * min_height, overlay_height, classes, widget_id, animation
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) ) {
+	return;
+}
+
+$anim          = $view['animation'] ?? [];
+$section_attrs = sociallane_section_animation_attrs( $anim );
+$section_id    = 'cta-banner-' . $view['widget_id'];
+$elements_path = SOCIALLANE_ELEMENTS_PATH . 'elements';
+
+$has_headline   = $view['show_headline'] && $view['headline'] !== '';
+$has_description = $view['show_description'] && $view['description'] !== '';
+$has_contact   = ! empty( $view['phone'] ) || ! empty( $view['email'] );
+$has_cta       = ! empty( $view['cta'] );
+$has_heading   = $has_headline || $has_description;
+?>
+
+<?php // ========== CTA BANNER START ========== ?>
+
+<section
+	class="cta-banner relative flex flex-col overflow-hidden"
+	style="min-height: <?php echo esc_attr( $view['min_height'] ); ?>; height: <?php echo esc_attr( $view['min_height'] ); ?>;"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	<?php if ( $has_heading ) : ?>aria-labelledby="<?php echo esc_attr( $section_id ); ?>"<?php endif; ?>
+>
+	<?php /* Background image */ ?>
+	<?php if ( ! empty( $view['image']['src'] ) ) : ?>
+		<div class="absolute inset-0" aria-hidden="true">
+			<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="absolute inset-0 w-full h-full object-cover"
+			/>
+		</div>
+	<?php endif; ?>
+
+	<?php /* CTA block: lower portion, solid dark overlay (height as % of section) */ ?>
+	<div
+		class="cta-banner__overlay max-w-6xl mx-auto absolute bottom-0 left-0 right-0 z-10 flex items-center justify-center px-4 sm:px-6 lg:px-8 py-12 md:py-16 lg:py-20 <?php echo esc_attr( $view['classes']['overlay'] ); ?>"
+		style="height: <?php echo esc_attr( $view['overlay_height'] ); ?>%; min-height: 12rem;"
+	>
+		<div class="container mx-auto w-full text-center max-w-4xl">
+			<header class="mb-6 md:mb-8" id="<?php echo esc_attr( $section_id ); ?>">
+				<?php if ( $has_headline ) : ?>
+					<<?php echo $view['headline_tag']; ?>
+						class="<?php echo esc_attr( $view['classes']['headline'] ); ?> text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold font-heading leading-tight"
+					>
+						<?php echo $view['headline']; ?>
+					</<?php echo $view['headline_tag']; ?>>
+				<?php endif; ?>
+				<?php if ( $has_description ) : ?>
+					<p class="<?php echo esc_attr( $view['classes']['description'] ); ?> mt-4 text-base md:text-lg lg:text-xl leading-relaxed">
+						<?php echo $view['description']; ?>
+					</p>
+				<?php endif; ?>
+			</header>
+
+			<?php /* Contact: phone | email with icons */ ?>
+			<?php if ( $has_contact ) : ?>
+				<div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-base md:text-lg">
+					<?php if ( ! empty( $view['phone'] ) ) : ?>
+						<a
+							href="<?php echo esc_url( $view['phone']['url'] ); ?>"
+							class="<?php echo esc_attr( $view['classes']['contact'] ); ?> inline-flex items-center gap-2 hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-blue-chill-900 dark:focus:ring-offset-blue-chill-950 rounded transition-opacity"
+							aria-label="<?php echo esc_attr( sprintf( /* translators: phone number */ __( 'Call %s', 'sociallane-elements' ), $view['phone']['label'] ) ); ?>"
+						>
+							<svg class="w-5 h-5 shrink-0 <?php echo esc_attr( $view['classes']['icon'] ); ?>" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+								<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
+							</svg>
+							<span><?php echo $view['phone']['label']; ?></span>
+						</a>
+					<?php endif; ?>
+
+					<?php if ( ! empty( $view['phone'] ) && ! empty( $view['email'] ) ) : ?>
+						<span class="<?php echo esc_attr( $view['classes']['separator'] ); ?> hidden sm:inline" aria-hidden="true">|</span>
+					<?php endif; ?>
+
+					<?php if ( ! empty( $view['email'] ) ) : ?>
+						<a
+							href="<?php echo esc_url( $view['email']['url'] ); ?>"
+							class="<?php echo esc_attr( $view['classes']['contact'] ); ?> inline-flex items-center gap-2 hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-blue-chill-900 dark:focus:ring-offset-blue-chill-950 rounded transition-opacity"
+							aria-label="<?php echo esc_attr( sprintf( /* translators: email address */ __( 'Email %s', 'sociallane-elements' ), $view['email']['label'] ) ); ?>"
+						>
+							<svg class="w-5 h-5 shrink-0 <?php echo esc_attr( $view['classes']['icon'] ); ?>" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
+								<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
+								<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
+							</svg>
+							<span><?php echo $view['email']['label']; ?></span>
+						</a>
+					<?php endif; ?>
+				</div>
+			<?php endif; ?>
+
+			<?php /* Optional CTA button */ ?>
+			<?php if ( $has_cta && ! empty( $view['cta'] ) ) : ?>
+				<div class="mt-8">
+					<?php
+					$button = $view['cta'];
+					$button['class'] = ( $button['class'] ?? '' ) . ' ' . ( $view['classes']['cta_focus'] ?? '' );
+					include $elements_path . '/button/templates/render.php';
+					?>
+				</div>
+			<?php endif; ?>
+		</div>
+	</div>
+</section>
+
+<?php // ========== CTA BANNER END ========== ?>

package/packages/widgets/cta-notify/cta-notify.php

@@ -0,0 +1,135 @@
+<?php
+/**
+ * Widget: CTA Notify
+ *
+ * Centered “Get notified” CTA: dark card with subtle purple glow, headline,
+ * description, and inline email form (Gravity Forms shortcode). Form styling
+ * via .sl-cta-notify-form Tailwind overrides.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * CTA Notify Widget
+ */
+class Cta_Notify extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'cta-notify';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'CTA Notify', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-bell';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-forms' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'cta', 'notify', 'launch', 'email', 'gravity forms', 'signup' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_content_section();
+		$this->register_animation_controls();
+	}
+
+	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,
+				'default'     => esc_html__( "Get notified when we're launching", 'sociallane-elements' ),
+				'label_block' => true,
+			]
+		);
+
+		$this->add_control(
+			'headline_tag',
+			[
+				'label'   => esc_html__( 'Headline Tag', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'h2',
+				'options' => [
+					'h1' => 'H1',
+					'h2' => 'H2',
+					'h3' => 'H3',
+				],
+			]
+		);
+
+		$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__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'form_shortcode',
+			[
+				'label'       => esc_html__( 'Gravity Forms Shortcode', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXTAREA,
+				'default'     => '[gravityform id="1" title="false" description="false"]',
+				'placeholder' => '[gravityform id="1" title="false" description="false"]',
+				'description' => esc_html__( 'Use a form with email + submit (e.g. one email field). Example: [gravityform id="1" title="false" description="false"]', 'sociallane-elements' ),
+				'label_block' => true,
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_cta_notify_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

package/packages/widgets/cta-notify/data/view.php

@@ -0,0 +1,48 @@
+<?php
+/**
+ * Data Preparation: CTA Notify
+ *
+ * Transforms raw Elementor settings into clean, template-ready data.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for CTA Notify widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID for accessibility
+ * @return array Template-ready data
+ */
+function prepare_cta_notify_view( array $settings, string $widget_id ): array {
+	$fields       = sociallane_extract_fields( $settings, [
+		'headline'   => [],
+		'description' => [ 'show_key' => 'show_description' ],
+	] );
+	$headline_tag = sociallane_validate_heading_tag( $settings, 'headline_tag', 'h2' );
+
+	$form_shortcode = trim( $settings['form_shortcode'] ?? '' );
+
+	$animation = sociallane_animation_view_data( $settings );
+
+	// Card: Tailwind-only dark card with purple glow (before: gradient)
+	$classes = [
+		'section'     => 'bg-neutral-100 dark:bg-neutral-950',
+		'card'        => 'relative overflow-hidden rounded-xl p-8 md:p-10 lg:p-12 text-center bg-neutral-700 border border-neutral-700 before:content-[""] before:absolute before:inset-x-0 before:bottom-0 before:h-3/4 before:bg-gradient-to-t before:from-neutral-500/25 before:to-transparent before:pointer-events-none',
+		'card_inner'  => 'relative z-10',
+		'headline'    => 'text-white',
+		'description'=> 'text-neutral-400',
+	];
+
+	return array_merge( $fields, [
+		'headline_tag'   => $headline_tag,
+		'form_shortcode' => $form_shortcode,
+		'classes'        => $classes,
+		'widget_id'      => $widget_id,
+		'animation'      => $animation,
+	] );
+}

package/packages/widgets/cta-notify/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@sociallane/widget-cta-notify",
+  "version": "1.0.0",
+  "private": true,
+  "description": "SocialLane Elements widget: cta-notify",
+  "peerDependencies": {
+    "@sociallane/core": "^1.0.0"
+  },
+  "scripts": {
+    "build": "echo \"No widget-specific build\""
+  }
+}

package/packages/widgets/cta-notify/templates/wrapper.php

@@ -0,0 +1,69 @@
+<?php
+/**
+ * Template: CTA Notify Wrapper
+ *
+ * Centered dark card with purple glow, headline, description, and inline form.
+ *
+ * AVAILABLE DATA ($view):
+ * - show_headline, show_description
+ * - headline, headline_tag, description, form_shortcode
+ * - classes, widget_id
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) ) {
+	return;
+}
+
+$anim          = $view['animation'] ?? [];
+$section_attrs = sociallane_section_animation_attrs( $anim );
+$section_id  = 'cta-notify-' . $view['widget_id'];
+$has_heading = ( $view['show_headline'] && ! empty( $view['headline'] ) ) || ( $view['show_description'] && ! empty( $view['description'] ) );
+$has_form    = ! empty( $view['form_shortcode'] );
+?>
+
+<?php // ========== CTA NOTIFY START ========== ?>
+
+<section
+	class="<?php echo esc_attr( $view['classes']['section'] ); ?> py-16 md:py-20 lg:py-24"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	<?php if ( $has_heading ) : ?>aria-labelledby="<?php echo esc_attr( $section_id ); ?>"<?php endif; ?>
+>
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="max-w-4xl mx-auto">
+			<div class="<?php echo esc_attr( $view['classes']['card'] ); ?>">
+				<div class="<?php echo esc_attr( $view['classes']['card_inner'] ); ?>">
+				<?php if ( $has_heading ) : ?>
+					<header class="mb-6 md:mb-8" id="<?php echo esc_attr( $section_id ); ?>">
+						<?php if ( $view['show_headline'] && ! empty( $view['headline'] ) ) : ?>
+							<<?php echo $view['headline_tag']; ?>
+								class="<?php echo esc_attr( $view['classes']['headline'] ); ?> text-2xl sm:text-3xl md:text-4xl font-bold font-heading leading-tight"
+							>
+								<?php echo $view['headline']; ?>
+							</<?php echo $view['headline_tag']; ?>>
+						<?php endif; ?>
+						<?php if ( $view['show_description'] && ! empty( $view['description'] ) ) : ?>
+							<p class="<?php echo esc_attr( $view['classes']['description'] ); ?> mt-4 text-base md:text-lg leading-relaxed">
+								<?php echo $view['description']; ?>
+							</p>
+						<?php endif; ?>
+					</header>
+				<?php endif; ?>
+
+				<?php if ( $has_form ) : ?>
+					<div class="sl-cta-notify-form mt-8">
+						<?php echo do_shortcode( $view['form_shortcode'] ); ?>
+					</div>
+				<?php endif; ?>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
+
+<?php // ========== CTA NOTIFY END ========== ?>

package/packages/widgets/cta-split/cta-split.php

@@ -0,0 +1,246 @@
+<?php
+/**
+ * Widget: CTA Split
+ *
+ * Two-column section: left = dark slate panel (headline, description, phone | email);
+ * right = full-height image. No overlay on image. Teal contact icons and text.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * CTA Split Widget
+ */
+class Cta_Split extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'cta-split';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'CTA Split', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-call-to-action';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-forms' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'cta', 'split', 'contact', 'phone', 'email', 'call to action' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_content_section();
+		$this->register_contact_section();
+		$this->register_image_section();
+		$this->register_layout_section();
+		$this->register_animation_controls( true, false );
+	}
+
+	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,
+				'default'     => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+				'placeholder' => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+				'label_block' => true,
+			]
+		);
+
+		$this->add_control(
+			'headline_tag',
+			[
+				'label'   => esc_html__( 'Headline Tag', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'h2',
+				'options' => [
+					'h1' => 'H1',
+					'h2' => 'H2',
+					'h3' => 'H3',
+				],
+			]
+		);
+
+		$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__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' ),
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_contact_section(): void {
+		$this->start_controls_section(
+			'section_contact',
+			[
+				'label' => esc_html__( 'Contact', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_phone',
+			[
+				'label'   => esc_html__( 'Show Phone', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'phone',
+			[
+				'label'       => esc_html__( 'Phone Number', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => '+31 (0)70 413 1100',
+				'label_block' => true,
+			]
+		);
+
+		$this->add_control(
+			'phone_url',
+			[
+				'label'       => esc_html__( 'Phone Link (optional)', 'sociallane-elements' ),
+				'type'        => Controls_Manager::URL,
+				'description' => esc_html__( 'Leave empty to use tel: from number', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'show_email',
+			[
+				'label'   => esc_html__( 'Show Email', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'email',
+			[
+				'label'       => esc_html__( 'Email Address', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => 'info@example.com',
+				'label_block' => true,
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_image_section(): void {
+		$this->start_controls_section(
+			'section_image',
+			[
+				'label' => esc_html__( 'Image', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'image',
+			[
+				'label'   => esc_html__( 'Image', 'sociallane-elements' ),
+				'type'    => Controls_Manager::MEDIA,
+				'default' => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
+			]
+		);
+
+		$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' ),
+				'label_block' => true,
+			]
+		);
+
+		$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(
+			'min_height',
+			[
+				'label'   => esc_html__( 'Minimum Section Height', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => '60vh',
+				'options' => [
+					'40vh'  => esc_html__( '40vh', 'sociallane-elements' ),
+					'50vh'  => esc_html__( '50vh', 'sociallane-elements' ),
+					'60vh'  => esc_html__( '60vh', 'sociallane-elements' ),
+					'70vh'  => esc_html__( '70vh', 'sociallane-elements' ),
+					'80vh'  => esc_html__( '80vh', 'sociallane-elements' ),
+					'90vh'  => esc_html__( '90vh', 'sociallane-elements' ),
+					'100vh' => esc_html__( '100vh', 'sociallane-elements' ),
+				],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_cta_split_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}