@sociallane/elements 1.0.0

package/packages/widgets/hero-overlay-single/templates/wrapper.php

@@ -0,0 +1,225 @@
+<?php
+/**
+ * Template: Hero Overlay Wrapper
+ *
+ * Full-width hero with background image(s), dark overlay, left-aligned content.
+ * Supports multiple slides via repeater; nav arrows in backdrop bar (far right).
+ *
+ * AVAILABLE DATA ($view): slides, is_slider, show_nav_arrows, autoplay, autoplay_delay,
+ * anchor_button, min_height, classes, widget_id, animation
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) || empty( $view['slides'] ) ) {
+	return;
+}
+
+$anim           = $view['animation'] ?? [];
+$section_attrs  = sociallane_section_animation_attrs( $anim );
+$headline_attrs = sociallane_headline_animation_attrs( $anim );
+$hero_id        = 'hero-overlay-' . $view['widget_id'];
+$slider_id      = 'hero-overlay-slider-' . $view['widget_id'];
+$elements_path  = SOCIALLANE_ELEMENTS_PATH . 'elements';
+$slides         = $view['slides'];
+$is_slider      = ! empty( $view['is_slider'] );
+$show_nav       = ! empty( $view['show_nav_arrows'] );
+$has_any_cta    = false;
+foreach ( $slides as $s ) {
+	if ( ! empty( $s['cta'] ) ) {
+		$has_any_cta = true;
+		break;
+	}
+}
+?>
+
+<?php // ========== HERO OVERLAY START ========== ?>
+
+<section
+	class="hero-overlay relative flex flex-col min-h-[50vh] overflow-hidden"
+	style="min-height: <?php echo esc_attr( $view['min_height'] ); ?>;"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	aria-labelledby="<?php echo esc_attr( $hero_id ); ?>"
+	<?php if ( $is_slider ) : ?>
+		id="<?php echo esc_attr( $slider_id ); ?>"
+		data-hero-overlay-slider
+		data-autoplay="<?php echo $view['autoplay'] ? '1' : '0'; ?>"
+		data-autoplay-delay="<?php echo esc_attr( (string) $view['autoplay_delay'] ); ?>"
+	<?php endif; ?>
+>
+	<?php /* Slide track: one slide visible at a time */ ?>
+	<?php foreach ( $slides as $index => $slide ) : ?>
+		<?php
+		$slide_class = 'hero-overlay__slide absolute inset-0 flex flex-col';
+		if ( $is_slider ) {
+			$slide_class .= ' hero-overlay__slide--hidden';
+			if ( $index === 0 ) {
+				$slide_class .= ' hero-overlay__slide--active';
+			}
+		}
+		?>
+		<div
+			class="<?php echo esc_attr( $slide_class ); ?>"
+			data-slide-index="<?php echo (int) $index; ?>"
+			role="group"
+			aria-roledescription="slide"
+			aria-label="<?php echo esc_attr( sprintf( /* translators: slide number */ __( 'Slide %d of %d', 'sociallane-elements' ), $index + 1, count( $slides ) ) ); ?>"
+		>
+			<?php /* Background image */ ?>
+			<?php if ( ! empty( $slide['image']['src'] ) ) : ?>
+				<div class="absolute inset-0" aria-hidden="true">
+					<img
+						src="<?php echo esc_url( $slide['image']['src'] ); ?>"
+						alt="<?php echo esc_attr( $slide['image']['alt'] ); ?>"
+						<?php if ( ! empty( $slide['image']['srcset'] ) ) : ?>srcset="<?php echo esc_attr( $slide['image']['srcset'] ); ?>"<?php endif; ?>
+						<?php if ( ! empty( $slide['image']['sizes'] ) ) : ?>sizes="<?php echo esc_attr( $slide['image']['sizes'] ); ?>"<?php endif; ?>
+						<?php if ( ! empty( $slide['image']['width'] ) ) : ?>width="<?php echo esc_attr( $slide['image']['width'] ); ?>"<?php endif; ?>
+						<?php if ( ! empty( $slide['image']['height'] ) ) : ?>height="<?php echo esc_attr( $slide['image']['height'] ); ?>"<?php endif; ?>
+						loading="<?php echo esc_attr( $slide['image']['loading'] ); ?>"
+						decoding="async"
+						class="absolute inset-0 w-full h-full object-cover"
+					/>
+				</div>
+			<?php endif; ?>
+
+			<?php /* Dark overlay */ ?>
+			<div class="absolute inset-0 <?php echo esc_attr( $view['classes']['overlay'] ); ?>" aria-hidden="true"></div>
+
+			<?php /* Content: left-aligned in container, vertically centered */ ?>
+			<div class="relative z-10 flex-1 flex items-center w-full mx-auto px-4 sm:px-6 lg:px-8">
+				<div class="container mx-auto w-full">
+					<div class="max-w-3xl text-left">
+						<?php if ( $slide['eyebrow'] !== '' ) : ?>
+							<p class="<?php echo esc_attr( $view['classes']['eyebrow'] ); ?> text-sm font-semibold uppercase tracking-wider mb-3">
+								<?php echo $slide['eyebrow']; ?>
+							</p>
+						<?php endif; ?>
+						<?php if ( $slide['headline'] !== '' ) : ?>
+							<<?php echo $slide['headline_tag']; ?>
+								id="<?php echo $index === 0 ? esc_attr( $hero_id ) : ''; ?>"
+								class="<?php echo esc_attr( $view['classes']['headline'] ); ?> text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold font-heading leading-tight"
+								<?php echo $headline_attrs ? ' ' . $headline_attrs : ''; ?>
+							>
+								<?php echo $slide['headline']; ?>
+							</<?php echo $slide['headline_tag']; ?>>
+						<?php endif; ?>
+					</div>
+				</div>
+			</div>
+		</div>
+	<?php endforeach; ?>
+
+	<?php /* Bottom bar: frosted glass, CTA (teal + arrow) left, anchor (outline + down arrow) right, nav arrows far right */ ?>
+	<div class="hero-overlay__bar absolute bottom-0 left-0 right-0 z-10 min-h-18 flex items-center px-4 sm:px-6 lg:px-8 <?php echo esc_attr( $view['classes']['bar_bg'] ?? '' ); ?>">
+		<div class="container mx-auto w-full flex items-center justify-between gap-4 py-8">
+			<?php /* CTA + anchor: same container (max-w-3xl), CTA left, anchor right */ ?>
+			<div class="max-w-full min-w-0 flex items-center justify-between gap-4 w-full">
+				<?php /* Primary CTA: teal pill, right arrow after text */ ?>
+				<div class="min-w-0">
+					<?php if ( $has_any_cta ) : ?>
+						<?php foreach ( $slides as $index => $slide ) : ?>
+							<?php if ( ! empty( $slide['cta'] ) ) : ?>
+								<div
+									class="hero-overlay__cta-wrap <?php echo $is_slider ? ( $index === 0 ? '' : ' hidden' ) : ''; ?>"
+									data-slide-index="<?php echo (int) $index; ?>"
+								>
+									<a
+										href="<?php echo esc_url( $slide['cta']['url'] ?? '#' ); ?>"
+										class="<?php echo esc_attr( $view['classes']['cta_bar'] ?? '' ); ?>"
+										<?php echo ! empty( $slide['cta']['attrs'] ) ? ' ' . $slide['cta']['attrs'] : ''; ?>
+									>
+										<span><?php echo $slide['cta']['text']; ?></span>
+										<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
+											<path d="M5 12h14M19 12l-4-4M19 12l-4 4"/>
+										</svg>
+									</a>
+								</div>
+							<?php endif; ?>
+						<?php endforeach; ?>
+					<?php endif; ?>
+				</div>
+				<?php if ( ! empty( $view['anchor_button'] ) ) : ?>
+					<a
+						href="<?php echo $view['anchor_button']['url']; ?>"
+						class="<?php echo esc_attr( $view['classes']['anchor_btn'] ?? '' ); ?>"
+						aria-label="<?php echo esc_attr( $view['anchor_button']['text'] ); ?>"
+					>
+						<span><?php echo $view['anchor_button']['text']; ?></span>
+						<svg class="w-5 h-5 shrink-0" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true">
+							<path d="M12 5v14M19 12l-7 7-7-7"/>
+						</svg>
+					</a>
+				<?php endif; ?>
+			</div>
+
+			<?php /* Nav arrows: far right */ ?>
+			<?php if ( $show_nav ) : ?>
+				<div class="flex items-center gap-1 shrink-0 ml-auto" role="group" aria-label="<?php esc_attr_e( 'Slider navigation', 'sociallane-elements' ); ?>">
+					<button
+						type="button"
+						class="hero-overlay__prev <?php echo esc_attr( $view['classes']['nav_btn'] ); ?>"
+						aria-label="<?php esc_attr_e( 'Previous slide', 'sociallane-elements' ); ?>"
+					>
+						<svg class="w-8 h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 32 24" aria-hidden="true">
+							<path d="M30 12H2M2 12l6-6M2 12l6 6"/>
+						</svg>
+					</button>
+					<button
+						type="button"
+						class="hero-overlay__next <?php echo esc_attr( $view['classes']['nav_btn'] ); ?>"
+						aria-label="<?php esc_attr_e( 'Next slide', 'sociallane-elements' ); ?>"
+					>
+						<svg class="w-8 h-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 32 24" aria-hidden="true">
+							<path d="M2 12h28M30 12l-6-6M30 12l-6 6"/>
+						</svg>
+					</button>
+				</div>
+			<?php endif; ?>
+		</div>
+	</div>
+</section>
+
+<?php if ( $is_slider ) : ?>
+<script>
+(function() {
+	var section = document.getElementById('<?php echo esc_js( $slider_id ); ?>');
+	if (!section) return;
+	var slides = section.querySelectorAll('.hero-overlay__slide');
+	var ctaWraps = section.querySelectorAll('.hero-overlay__cta-wrap');
+	var prev = section.querySelector('.hero-overlay__prev');
+	var next = section.querySelector('.hero-overlay__next');
+	var total = slides.length;
+	if (total <= 1) return;
+	var current = 0;
+	var autoplay = section.getAttribute('data-autoplay') === '1';
+	var delay = parseInt(section.getAttribute('data-autoplay-delay') || '5', 10) * 1000;
+	var timer = null;
+
+	function goTo(index) {
+		current = (index + total) % total;
+		slides.forEach(function(s, i) {
+			s.classList.toggle('hero-overlay__slide--active', i === current);
+			s.classList.toggle('hero-overlay__slide--hidden', i !== current);
+		});
+		ctaWraps.forEach(function(w) {
+			var idx = parseInt(w.getAttribute('data-slide-index') || '0', 10);
+			w.classList.toggle('hidden', idx !== current);
+		});
+		if (autoplay) {
+			clearInterval(timer);
+			timer = setInterval(function() { goTo(current + 1); }, delay);
+		}
+	}
+
+	if (prev) prev.addEventListener('click', function() { goTo(current - 1); });
+	if (next) next.addEventListener('click', function() { goTo(current + 1); });
+	if (autoplay) timer = setInterval(function() { goTo(current + 1); }, delay);
+})();
+</script>
+<?php endif; ?>
+
+<?php // ========== HERO OVERLAY END ========== ?>

package/packages/widgets/hero-overlay-slider/data/view.php

@@ -0,0 +1,118 @@
+<?php
+/**
+ * Data Preparation: Hero Overlay
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for Hero Overlay widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID
+ * @return array Template-ready data
+ */
+function prepare_hero_overlay_slider_view( array $settings, string $widget_id ): array {
+	$raw_slides = $settings['slides'] ?? [];
+	$slides     = sociallane_process_repeater( $raw_slides, function ( $slide, $index ) {
+		$image = sociallane_prepare_image_data(
+			isset( $slide['image'] ) && is_array( $slide['image'] ) ? $slide['image'] : [],
+			[
+				'alt'        => $slide['image_alt'] ?? '',
+				'sizes'      => '100vw',
+				'loading'    => $index === 0 ? 'eager' : 'lazy',
+				'image_size' => 'full',
+			]
+		);
+
+		$cta = null;
+		if ( ! empty( trim( $slide['cta_text'] ?? '' ) ) && function_exists( 'sociallane_prepare_button_data' ) ) {
+			$cta = sociallane_prepare_button_data(
+				$slide['cta_text'] ?? '',
+				$slide['cta_url'] ?? [],
+				[ 'preset' => $slide['cta_style'] ?? 'primary' ]
+			);
+		}
+
+		$headline_tag = sociallane_validate_option( $slide['headline_tag'] ?? 'h1', [ 'h1', 'h2', 'h3' ], 'h1' );
+
+		return [
+			'image'        => $image,
+			'eyebrow'      => esc_html( $slide['eyebrow'] ?? '' ),
+			'headline'     => esc_html( $slide['headline'] ?? '' ),
+			'headline_tag' => $headline_tag,
+			'cta'          => $cta,
+		];
+	} );
+
+	// Ensure at least one slide for backward compatibility
+	if ( empty( $slides ) ) {
+		$slides[] = [
+			'image'        => sociallane_prepare_image_data( [ 'url' => '' ], [ 'alt' => '', 'sizes' => '100vw', 'loading' => 'eager', 'image_size' => 'full' ] ),
+			'eyebrow'      => '',
+			'headline'     => '',
+			'headline_tag' => 'h1',
+			'cta'          => null,
+		];
+	}
+
+	$layout = 'slider';
+	$is_slider = $layout === 'slider' && count( $slides ) > 1;
+	$min_height = $settings['min_height'] ?? '70vh';
+	$show_nav   = $is_slider && sociallane_show_field( $settings, 'show_nav_arrows' );
+	$autoplay    = $is_slider && sociallane_show_field( $settings, 'autoplay' );
+	$autoplay_delay = (int) ( $settings['autoplay_delay'] ?? 5 );
+	if ( $autoplay_delay < 2 ) {
+		$autoplay_delay = 2;
+	}
+
+	// When single layout, only use first slide for display (template will render one slide)
+	$display_slides = $layout === 'single' ? array_slice( $slides, 0, 1 ) : $slides;
+
+	// Anchor button: right-aligned in blur bar, links to #section-id (optional)
+	$show_anchor = sociallane_show_field( $settings, 'show_anchor_button', 'no' );
+	$anchor_text = $show_anchor ? trim( $settings['anchor_text'] ?? '' ) : '';
+	$anchor_link = sociallane_prepare_link_attrs( $settings['anchor_url'] ?? [] );
+	$anchor_href = '#';
+	if ( $show_anchor && ! empty( trim( $anchor_link['url'] ?? '#' ) ) ) {
+		$raw = trim( $anchor_link['url'] );
+		if ( strpos( $raw, '#' ) === 0 ) {
+			$anchor_href = $raw !== '#' ? $raw : '#';
+		} else {
+			$parsed      = wp_parse_url( $raw );
+			$anchor_href = ( isset( $parsed['fragment'] ) && $parsed['fragment'] !== '' ) ? '#' . $parsed['fragment'] : '#' . $raw;
+		}
+	}
+	$anchor_button = ( $show_anchor && $anchor_text !== '' )
+		? [ 'text' => esc_html( $anchor_text ), 'url' => esc_attr( $anchor_href ) ]
+		: null;
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true ] );
+
+	$classes = [
+		'eyebrow'    => 'text-primary dark:text-primary-light',
+		'headline'   => 'text-white dark:text-white',
+		'overlay'    => 'bg-neutral-900/60 dark:bg-neutral-950/70',
+		'bar_bg'     => 'bg-neutral-900/50 dark:bg-neutral-950/60 border-t border-white/5 backdrop-blur-xl',
+		'cta_bar'    => 'inline-flex items-center justify-center gap-2 rounded-full px-6 py-3.5 text-base font-semibold text-white bg-emerald-500 hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-400 focus:ring-offset-2 focus:ring-offset-neutral-900 dark:focus:ring-offset-neutral-950 transition-colors no-underline',
+		'anchor_btn' => 'inline-flex items-center justify-center gap-2 rounded-full px-6 py-3.5 text-base font-semibold text-white bg-transparent border-2 border-white/90 hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-neutral-900 dark:focus:ring-offset-neutral-950 transition-colors no-underline shrink-0',
+		'nav_btn'    => 'text-white hover:text-white/90 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-neutral-900 dark:focus:ring-offset-neutral-950 rounded-full p-2 transition-colors',
+	];
+
+	return [
+		'slides'          => $display_slides,
+		'is_slider'       => $is_slider,
+		'show_nav_arrows' => $show_nav,
+		'autoplay'        => $autoplay,
+		'autoplay_delay'  => $autoplay_delay,
+		'anchor_button'   => $anchor_button,
+		'min_height'     => $min_height,
+		'classes'        => $classes,
+		'widget_id'      => $widget_id,
+		'animation'      => $animation,
+	];
+}

package/packages/widgets/hero-overlay-slider/hero-overlay-slider.php

@@ -0,0 +1,262 @@
+<?php
+/**
+ * Widget: Hero Overlay
+ *
+ * Hero with full-width background image, dark overlay, and left-aligned content
+ * (eyebrow, headline, CTA). Supports multiple slides via repeater; nav arrows in backdrop bar.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Repeater;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Hero Overlay Widget
+ */
+class Hero_Overlay_Slider extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'hero-overlay-slider';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Hero Overlay (Slider)', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-cover-image';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-heroes' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'hero', 'overlay', 'banner', 'headline', 'cta', 'slider', 'carousel' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_slides_section();
+		$this->register_slider_section();
+		$this->register_anchor_section();
+		$this->register_animation_controls( true );
+	}
+
+	private function register_slides_section(): void {
+		$this->start_controls_section(
+			'section_slides',
+			[
+				'label' => esc_html__( 'Slides', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$repeater = new Repeater();
+
+		$repeater->add_control(
+			'image',
+			[
+				'label'   => esc_html__( 'Background Image', 'sociallane-elements' ),
+				'type'    => Controls_Manager::MEDIA,
+				'default' => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
+			]
+		);
+		$repeater->add_control(
+			'image_alt',
+			[
+				'label'       => esc_html__( 'Image Alt Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'description' => esc_html__( 'Required for accessibility', 'sociallane-elements' ),
+			]
+		);
+		$repeater->add_control(
+			'eyebrow',
+			[
+				'label'       => esc_html__( 'Eyebrow', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+			]
+		);
+		$repeater->add_control(
+			'headline',
+			[
+				'label'       => esc_html__( 'Headline', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+			]
+		);
+		$repeater->add_control(
+			'headline_tag',
+			[
+				'label'   => esc_html__( 'Headline Tag', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'h1',
+				'options' => [ 'h1' => 'H1', 'h2' => 'H2', 'h3' => 'H3' ],
+			]
+		);
+		$repeater->add_control(
+			'cta_text',
+			[
+				'label'       => esc_html__( 'Button Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+			]
+		);
+		$repeater->add_control(
+			'cta_url',
+			[
+				'label' => esc_html__( 'Button URL', 'sociallane-elements' ),
+				'type'  => Controls_Manager::URL,
+			]
+		);
+		$repeater->add_control(
+			'cta_style',
+			[
+				'label'   => esc_html__( 'Button Style', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'primary',
+				'options' => function_exists( 'sociallane_get_button_preset_options' ) ? sociallane_get_button_preset_options() : [ 'primary' => 'Primary', 'secondary' => 'Secondary' ],
+			]
+		);
+
+		$this->add_control(
+			'slides',
+			[
+				'label'       => esc_html__( 'Slides', 'sociallane-elements' ),
+				'type'        => Controls_Manager::REPEATER,
+				'fields'      => $repeater->get_controls(),
+				'default'     => [
+					[
+						'image'       => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
+						'eyebrow'     => '',
+						'headline'    => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+						'headline_tag'=> 'h1',
+						'cta_text'    => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+						'cta_style'   => 'primary',
+					],
+				],
+				'title_field' => '{{{ headline }}}',
+			]
+		);
+
+		$this->add_control(
+			'min_height',
+			[
+				'label'   => esc_html__( 'Minimum Height', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => '70vh',
+				'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_slider_section(): void {
+		$this->start_controls_section(
+			'section_slider',
+			[
+				'label' => esc_html__( 'Slider', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_nav_arrows',
+			[
+				'label'   => esc_html__( 'Show navigation arrows', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'autoplay',
+			[
+				'label'   => esc_html__( 'Autoplay', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => '',
+			]
+		);
+		$this->add_control(
+			'autoplay_delay',
+			[
+				'label'   => esc_html__( 'Autoplay delay (seconds)', 'sociallane-elements' ),
+				'type'    => Controls_Manager::NUMBER,
+				'default' => 5,
+				'min'     => 2,
+				'max'     => 30,
+				'condition' => [ 'autoplay' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_anchor_section(): void {
+		$this->start_controls_section(
+			'section_anchor',
+			[
+				'label' => esc_html__( 'Anchor Button', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_anchor_button',
+			[
+				'label'   => esc_html__( 'Show anchor button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => '',
+			]
+		);
+
+		$this->add_control(
+			'anchor_text',
+			[
+				'label'       => esc_html__( 'Button text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Scroll to section', 'sociallane-elements' ),
+				'placeholder' => esc_html__( 'Scroll to section', 'sociallane-elements' ),
+				'condition'   => [ 'show_anchor_button' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'anchor_url',
+			[
+				'label'       => esc_html__( 'Anchor target', 'sociallane-elements' ),
+				'type'        => Controls_Manager::URL,
+				'placeholder' => '#section-id',
+				'description' => esc_html__( 'Use #section-id to scroll to a section (e.g. #contact). Add a CSS ID to the target section in Elementor.', 'sociallane-elements' ),
+				'condition'   => [ 'show_anchor_button' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_hero_overlay_slider_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

package/packages/widgets/hero-overlay-slider/package.json

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