@sociallane/elements 1.0.0

package/packages/widgets/content-block/data/view.php

@@ -0,0 +1,103 @@
+<?php
+/**
+ * Data Preparation: Content Block
+ *
+ * Transforms raw Elementor settings into clean, template-ready data.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for Content Block widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID for accessibility
+ * @return array Template-ready data
+ */
+function prepare_content_block_view( array $settings, string $widget_id ): array {
+	$fields     = sociallane_extract_fields( $settings, [ 'eyebrow' => [ 'default_show' => 'no' ] ] );
+	$show_image = sociallane_show_field( $settings, 'show_image', 'no' );
+	$show_cta   = sociallane_show_field( $settings, 'show_cta', 'no' );
+
+	$blocks = sociallane_process_repeater( $settings['content_blocks'] ?? [], function ( $block ) {
+		$show_title   = ( $block['show_title'] ?? 'yes' ) === 'yes';
+		$show_content = ( $block['show_content'] ?? 'yes' ) === 'yes';
+		return [
+			'show_title'   => $show_title,
+			'title'        => $show_title ? esc_html( $block['title'] ?? '' ) : '',
+			'title_tag'    => sociallane_validate_option( $block['title_tag'] ?? 'h2', [ 'h1', 'h2', 'h3' ], 'h2' ),
+			'show_content' => $show_content,
+			'content'      => $show_content ? wp_kses_post( $block['content'] ?? '' ) : '',
+		];
+	} );
+
+	if ( empty( $blocks ) ) {
+		$blocks = [ [ 'show_title' => true, 'title' => '', 'title_tag' => 'h2', 'show_content' => true, 'content' => '' ] ];
+	}
+
+	$image = sociallane_prepare_image_data(
+		$settings['image'] ?? [],
+		[
+			'alt'     => $settings['image_alt'] ?? '',
+			'sizes'   => '(max-width: 768px) 100vw, 50vw',
+			'loading' => 'lazy',
+		]
+	);
+
+	$cta = $show_cta
+		? sociallane_prepare_button_data(
+			$settings['cta_text'] ?? '',
+			$settings['cta_url'] ?? []
+		)
+		: null;
+
+	$content_align  = in_array( $settings['content_align'] ?? 'left', [ 'left', 'center', 'right' ], true )
+		? $settings['content_align']
+		: 'left';
+	$image_position = $settings['image_position'] ?? 'right';
+
+	$has_side_image = $content_align !== 'center'
+		&& $show_image
+		&& ! empty( $image['src'] )
+		&& $image_position !== 'top';
+	$order = sociallane_content_order( $settings, 'content_align' );
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true ] );
+
+	$classes = [
+		'section' => 'bg-neutral-100 text-blue-chill-950 dark:bg-zinc-900',
+		'text'    => 'text-blue-chill-950 dark:text-neutral-200',
+		'subtext' => 'text-blue-chill-950 dark:text-neutral-200',
+		'eyebrow' => 'text-blue-chill-950 dark:text-primary-light',
+	];
+
+	// First block title id for aria-labelledby (used when any block has a title)
+	$first_title_id = '';
+	foreach ( $blocks as $b ) {
+		if ( $b['show_title'] && $b['title'] !== '' ) {
+			$first_title_id = 'content-block-' . $widget_id;
+			break;
+		}
+	}
+
+	return array_merge( $fields, [
+		'blocks'         => $blocks,
+		'first_title_id' => $first_title_id,
+		'show_image'     => $show_image,
+		'show_cta'       => $show_cta,
+		'image'          => $image,
+		'cta'            => $cta,
+		'content_align'  => $content_align,
+		'image_position' => $image_position,
+		'content_order'  => $order['content_order'],
+		'media_order'    => $order['media_order'],
+		'has_side_image' => $has_side_image,
+		'classes'        => $classes,
+		'widget_id'      => $widget_id,
+		'animation'      => $animation,
+	] );
+}

package/packages/widgets/content-block/package.json

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

package/packages/widgets/content-block/templates/partials/content.php

@@ -0,0 +1,52 @@
+<?php
+/**
+ * Template Partial: Content Block – text content (multiple blocks)
+ *
+ * Expects $view in scope (blocks, first_title_id, show_eyebrow, eyebrow, show_cta, cta, classes, widget_id).
+ * Uses $headline_attrs for first title when present.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) || empty( $view ) ) {
+	return;
+}
+
+$elements_path   = SOCIALLANE_ELEMENTS_PATH . 'elements';
+$blocks         = $view['blocks'] ?? [];
+$first_title_id = $view['first_title_id'] ?? '';
+$headline_attrs  = isset( $headline_attrs ) ? $headline_attrs : '';
+$first_title_done = false;
+?>
+
+<?php if ( ! empty( $view['show_eyebrow'] ) && $view['eyebrow'] !== '' ) : ?>
+	<p class="<?php echo esc_attr( $view['classes']['eyebrow'] ); ?> text-sm font-semibold uppercase tracking-wider mb-3">
+		<?php echo $view['eyebrow']; ?>
+	</p>
+<?php endif; ?>
+
+<?php foreach ( $blocks as $index => $block ) : ?>
+	<?php if ( $block['show_title'] && $block['title'] !== '' ) : ?>
+		<<?php echo $block['title_tag']; ?>
+			<?php echo ( $first_title_id !== '' && ! $first_title_done ) ? ' id="' . esc_attr( $first_title_id ) . '"' : ''; ?>
+			class="<?php echo esc_attr( $view['classes']['text'] ); ?> text-2xl sm:text-3xl md:text-4xl font-bold font-heading leading-tight<?php echo $first_title_done ? ' mt-6' : ''; ?>"
+			<?php echo ( ! $first_title_done && $headline_attrs ) ? ' ' . $headline_attrs : ''; ?>
+		>
+			<?php echo $block['title']; ?>
+		</<?php echo $block['title_tag']; ?>>
+		<?php $first_title_done = true; ?>
+	<?php endif; ?>
+
+	<?php if ( $block['show_content'] && $block['content'] !== '' ) : ?>
+		<div class="<?php echo esc_attr( $view['classes']['subtext'] ); ?> mt-4 text-base md:text-lg leading-relaxed">
+			<?php echo $block['content']; ?>
+		</div>
+	<?php endif; ?>
+<?php endforeach; ?>
+
+<?php if ( ! empty( $view['show_cta'] ) && $view['cta'] ) : ?>
+	<div class="mt-6">
+		<?php $button = $view['cta']; ?>
+		<?php include $elements_path . '/button/templates/render.php'; ?>
+	</div>
+<?php endif; ?>

package/packages/widgets/content-block/templates/wrapper.php

@@ -0,0 +1,73 @@
+<?php
+/**
+ * Template: Content Block Wrapper
+ *
+ * AVAILABLE DATA ($view):
+ * - show_eyebrow, eyebrow, blocks (array of title + content), first_title_id
+ * - show_image, image, show_cta, cta
+ * - content_align, image_position, content_order, media_order, has_side_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 );
+$elements_path  = SOCIALLANE_ELEMENTS_PATH . 'elements';
+?>
+
+<section
+	class="<?php echo esc_attr( $view['classes']['section'] ); ?> py-12 md:py-16 lg:py-20"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	<?php if ( $view['first_title_id'] !== '' ) : ?>aria-labelledby="<?php echo esc_attr( $view['first_title_id'] ); ?>"<?php endif; ?>
+>
+	<div class="container mx-auto max-w-8xl w-full px-4 sm:px-6 lg:px-8">
+		<?php if ( $view['has_side_image'] ) : ?>
+			<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-stretch">
+				<div class="<?php echo esc_attr( $view['content_order'] ); ?> flex flex-col min-h-0">
+					<?php require __DIR__ . '/partials/content.php'; ?>
+				</div>
+				<div class="<?php echo esc_attr( $view['media_order'] ); ?> min-h-[240px] lg:min-h-0">
+					<div class="h-full w-full rounded-xl overflow-hidden bg-neutral-200 dark:bg-neutral-700">
+						<?php
+						$image          = $view['image'];
+						$image['class']  = 'w-full h-full object-cover rounded-xl';
+						include $elements_path . '/image/templates/render.php';
+						?>
+					</div>
+				</div>
+			</div>
+		<?php elseif ( $view['content_align'] === 'center' ) : ?>
+			<div class="max-w-3xl mx-auto flex flex-col items-center text-center">
+				<?php require __DIR__ . '/partials/content.php'; ?>
+				<?php if ( ! empty( $view['show_image'] ) && ! empty( $view['image']['src'] ) ) : ?>
+					<?php
+					$image         = $view['image'];
+					$image['class'] = 'w-full h-auto rounded-xl mt-8';
+					include $elements_path . '/image/templates/render.php';
+					?>
+				<?php endif; ?>
+			</div>
+		<?php else : ?>
+			<div class="max-w-3xl mx-auto">
+				<?php if ( ! empty( $view['show_image'] ) && ! empty( $view['image']['src'] ) && $view['image_position'] === 'top' ) : ?>
+					<?php
+					$image         = $view['image'];
+					$image['class'] = 'w-full h-auto rounded-xl mb-8';
+					include $elements_path . '/image/templates/render.php';
+					?>
+				<?php endif; ?>
+				<?php require __DIR__ . '/partials/content.php'; ?>
+			</div>
+		<?php endif; ?>
+	</div>
+</section>

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

@@ -0,0 +1,300 @@
+<?php
+/**
+ * Widget: CTA Banner
+ *
+ * Full-width banner with background image and lower CTA block: dark overlay,
+ * centered headline, description, and contact info (phone + email with icons).
+ *
+ * @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 Banner Widget
+ */
+class Cta_Banner extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'cta-banner';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'CTA Banner', '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', 'banner', 'call to action', 'contact', 'phone', 'email', 'overlay' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_background_section();
+		$this->register_content_section();
+		$this->register_contact_section();
+		$this->register_cta_section();
+		$this->register_layout_section();
+		$this->register_animation_controls();
+	}
+
+	private function register_background_section(): void {
+		$this->start_controls_section(
+			'section_background',
+			[
+				'label' => esc_html__( 'Background', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'image',
+			[
+				'label'   => esc_html__( 'Background 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->add_control(
+			'min_height',
+			[
+				'label'   => esc_html__( 'Minimum Height', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => '60vh',
+				'options' => [
+					'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();
+	}
+
+	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_cta_section(): void {
+		$this->start_controls_section(
+			'section_cta',
+			[
+				'label' => esc_html__( 'Button', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_cta',
+			[
+				'label'   => esc_html__( 'Show Button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'no',
+			]
+		);
+
+		$this->add_control(
+			'cta_text',
+			[
+				'label'       => esc_html__( 'Button Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'cta_url',
+			[
+				'label' => esc_html__( 'Button URL', 'sociallane-elements' ),
+				'type'  => Controls_Manager::URL,
+			]
+		);
+
+		$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(
+			'overlay_height',
+			[
+				'label'   => esc_html__( 'CTA Block Height', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => '45',
+				'options' => [
+					'40' => esc_html__( '40%', 'sociallane-elements' ),
+					'45' => esc_html__( '45%', 'sociallane-elements' ),
+					'50' => esc_html__( '50%', 'sociallane-elements' ),
+					'55' => esc_html__( '55%', 'sociallane-elements' ),
+					'60' => esc_html__( '60%', '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_banner_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

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

@@ -0,0 +1,96 @@
+<?php
+/**
+ * Data Preparation: CTA Banner
+ *
+ * Transforms raw Elementor settings into clean, template-ready data.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for CTA Banner widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID for accessibility
+ * @return array Template-ready data
+ */
+function prepare_cta_banner_view( array $settings, string $widget_id ): array {
+	$fields       = sociallane_extract_fields( $settings, [
+		'headline'   => [],
+		'description' => [ 'show_key' => 'show_description' ],
+	] );
+	$show_phone   = sociallane_show_field( $settings, 'show_phone' );
+	$show_email   = sociallane_show_field( $settings, 'show_email' );
+	$show_cta     = sociallane_show_field( $settings, 'show_cta', 'no' );
+	$headline_tag = sociallane_validate_heading_tag( $settings, 'headline_tag', 'h2' );
+
+	$image = sociallane_prepare_image_data(
+		$settings['image'] ?? [],
+		[
+			'alt'     => $settings['image_alt'] ?? '',
+			'sizes'   => '100vw',
+			'loading' => 'eager',
+			'image_size' => 'full',
+		]
+	);
+
+	$phone_raw = $show_phone ? trim( $settings['phone'] ?? '' ) : '';
+	$phone_url = $settings['phone_url']['url'] ?? '';
+	if ( $phone_raw && ! $phone_url ) {
+		$phone_url = 'tel:' . preg_replace( '/\s+/', '', $phone_raw );
+	}
+	$phone = $phone_raw ? [
+		'label' => esc_html( $phone_raw ),
+		'url'   => esc_url( $phone_url ?: 'tel:' . preg_replace( '/\s+/', '', $phone_raw ) ),
+	] : null;
+
+	$email_raw = $show_email ? trim( $settings['email'] ?? '' ) : '';
+	$email     = $email_raw ? [
+		'label' => esc_html( $email_raw ),
+		'url'   => 'mailto:' . sanitize_email( $email_raw ),
+	] : null;
+
+	$cta = $show_cta && function_exists( 'sociallane_prepare_button_data' )
+		? sociallane_prepare_button_data(
+			$settings['cta_text'] ?? '',
+			$settings['cta_url'] ?? [],
+			[ 'variant' => 'primary', 'size' => 'lg', 'preset' => 'primary' ]
+		)
+		: null;
+
+	$min_height    = $settings['min_height'] ?? '60vh';
+	$overlay_height = (string) ( $settings['overlay_height'] ?? '45' );
+
+	$animation = sociallane_animation_view_data( $settings );
+
+	// Dark slate overlay (matches design: #313D4D feel), white text, teal/cyan icons
+	$classes = [
+		'overlay'     => 'bg-blue-chill-900 dark:bg-blue-chill-950',
+		'headline'    => 'text-white dark:text-white',
+		'description' => 'text-white/90 dark:text-neutral-200',
+		'contact'     => 'text-white dark:text-white',
+		'icon'        => 'text-blue-chill-300 dark:text-blue-chill-400',
+		'separator'   => 'text-white/50 dark:text-neutral-400',
+		'cta_focus'   => 'focus:ring-white focus:ring-offset-blue-chill-900 dark:focus:ring-offset-blue-chill-950',
+	];
+
+	return array_merge( $fields, [
+		'show_phone'     => $show_phone,
+		'show_email'     => $show_email,
+		'show_cta'       => $show_cta,
+		'headline_tag'   => $headline_tag,
+		'image'          => $image,
+		'phone'          => $phone,
+		'email'          => $email,
+		'cta'            => $cta,
+		'min_height'     => $min_height,
+		'overlay_height' => $overlay_height,
+		'classes'        => $classes,
+		'widget_id'      => $widget_id,
+		'animation'      => $animation,
+	] );
+}

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

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