@sociallane/elements 1.0.0

package/packages/widgets/hero-centered-image/hero-centered-image.php

@@ -0,0 +1,297 @@
+<?php
+/**
+ * Widget: Hero Centered Image
+ *
+ * A full-width hero with optional announcement banner, centered headline,
+ * description, and CTAs on a dark blurred background image.
+ *
+ * @package SocialLane_Elements
+ * @since   1.0.0
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+// Prevent direct access
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Hero Centered Image Widget
+ */
+class Hero_Centered_Image extends Widget_Base {
+
+	use Animation_Controls;
+
+	/*
+	|--------------------------------------------------------------------------
+	| Widget Identity
+	|--------------------------------------------------------------------------
+	*/
+
+	public function get_name(): string {
+		return 'hero-centered-image';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Hero Centered Image', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-image-cover';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-heroes' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'hero', 'centered', 'image', 'banner', 'headline', 'cta', 'announcement' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_announcement_section();
+		$this->register_content_section();
+		$this->register_background_section();
+		$this->register_animation_controls( true );
+	}
+
+	private function register_announcement_section(): void {
+		$this->start_controls_section(
+			'section_announcement',
+			[
+				'label' => esc_html__( 'Announcement', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_announcement',
+			[
+				'label'   => esc_html__( 'Show announcement banner', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'announcement_text',
+			[
+				'label'       => esc_html__( 'Announcement text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+				'condition'   => [ 'show_announcement' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'announcement_link_text',
+			[
+				'label'       => esc_html__( 'Link text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'condition'   => [ 'show_announcement' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'announcement_url',
+			[
+				'label'     => esc_html__( 'Link URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [ 'show_announcement' => 'yes' ],
+			]
+		);
+
+		$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,
+				'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'   => function_exists( 'sociallane_get_button_preset_options' ) ? sociallane_get_button_preset_options() : [ 'primary' => 'Primary' ],
+				'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'   => function_exists( 'sociallane_get_button_preset_options' ) ? sociallane_get_button_preset_options() : [ 'ghost' => 'Ghost' ],
+				'condition' => [ 'show_cta_secondary' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	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(
+			'show_background',
+			[
+				'label'   => esc_html__( 'Show background image', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'background_image',
+			[
+				'label'     => esc_html__( 'Background image', 'sociallane-elements' ),
+				'type'      => Controls_Manager::MEDIA,
+				'default'   => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
+				'condition' => [ 'show_background' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'background_image_alt',
+			[
+				'label'       => esc_html__( 'Image Alt Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'description' => esc_html__( 'For decorative background, leave empty.', 'sociallane-elements' ),
+				'condition'   => [ 'show_background' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	/*
+	|--------------------------------------------------------------------------
+	| Render
+	|--------------------------------------------------------------------------
+	*/
+
+	protected function render(): void {
+		// 1. Get raw settings
+		$settings = $this->get_settings_for_display();
+
+		// 2. Prepare view data
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_hero_centered_image_view( $settings, $this->get_id() );
+
+		// 3. Render template
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

package/packages/widgets/hero-centered-image/package.json

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

package/packages/widgets/hero-centered-image/templates/wrapper.php

@@ -0,0 +1,123 @@
+<?php
+/**
+ * Template: Hero Centered Image Wrapper
+ *
+ * Full-width hero with optional announcement banner, centered content,
+ * and dark blurred background image.
+ *
+ * AVAILABLE DATA ($view):
+ * - show_announcement, announcement_text, announcement_link_text, announcement_href, announcement_attrs
+ * - show_headline, show_description, show_cta_primary, show_cta_secondary
+ * - headline, headline_tag, description, cta_primary, cta_secondary
+ * - show_background, background, widget_id
+ *
+ * @package SocialLane_Elements
+ * @since   1.0.0
+ */
+
+// Prevent direct access
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+// Ensure $view exists
+if ( empty( $view ) ) {
+	return;
+}
+
+$anim          = $view['animation'] ?? [];
+$section_attrs = sociallane_section_animation_attrs( $anim );
+$headline_attrs = sociallane_headline_animation_attrs( $anim );
+$hero_id      = 'hero-centered-image-' . $view['widget_id'];
+$has_heading  = $view['show_headline'] && $view['headline'] !== '';
+$elements_path = defined( 'SOCIALLANE_ELEMENTS_PATH' ) ? SOCIALLANE_ELEMENTS_PATH . 'elements' : dirname( __DIR__, 2 ) . '/elements';
+$header = [
+	'use_wrapper'       => false,
+	'headline_attrs'    => $headline_attrs,
+	'show_headline'     => $view['show_headline'] && $view['headline'] !== '',
+	'headline'          => $view['headline'] ?? '',
+	'headline_tag'      => $view['headline_tag'] ?? 'h1',
+	'headline_class'    => '',
+	'headline_extras'   => 'text-4xl sm:text-5xl md:text-6xl font-bold font-heading leading-tight text-white dark:text-white',
+	'headline_id'       => $hero_id,
+	'show_description'  => $view['show_description'] && $view['description'] !== '',
+	'description'       => $view['description'] ?? '',
+	'description_class' => '',
+	'description_extras'=> 'mt-6 text-lg md:text-xl text-neutral-300 dark:text-neutral-300 leading-relaxed',
+];
+?>
+
+<?php // ========== HERO CENTERED IMAGE START ========== ?>
+
+<section
+	class="relative min-h-screen flex flex-col overflow-hidden"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	<?php if ( $has_heading ) : ?>aria-labelledby="<?php echo esc_attr( $hero_id ); ?>"<?php endif; ?>
+>
+	<?php /* Background: full-bleed image with blur and dark overlay */ ?>
+	<?php if ( $view['show_background'] && ! empty( $view['background']['src'] ) ) : ?>
+		<div class="absolute inset-0" aria-hidden="true">
+			<img
+				src="<?php echo esc_url( $view['background']['src'] ); ?>"
+				alt="<?php echo esc_attr( $view['background']['alt'] ); ?>"
+				<?php if ( ! empty( $view['background']['srcset'] ) ) : ?>srcset="<?php echo esc_attr( $view['background']['srcset'] ); ?>"<?php endif; ?>
+				<?php if ( ! empty( $view['background']['sizes'] ) ) : ?>sizes="<?php echo esc_attr( $view['background']['sizes'] ); ?>"<?php endif; ?>
+				<?php if ( ! empty( $view['background']['width'] ) ) : ?>width="<?php echo esc_attr( $view['background']['width'] ); ?>"<?php endif; ?>
+				<?php if ( ! empty( $view['background']['height'] ) ) : ?>height="<?php echo esc_attr( $view['background']['height'] ); ?>"<?php endif; ?>
+				loading="<?php echo esc_attr( $view['background']['loading'] ); ?>"
+				decoding="async"
+				fetchpriority="high"
+				class="absolute inset-0 w-full h-full object-cover blur-sm scale-105"
+			/>
+			<?php /* Dark overlay for contrast */ ?>
+			<div class="absolute inset-0 bg-neutral-900/80 dark:bg-neutral-950/85" aria-hidden="true"></div>
+		</div>
+	<?php else : ?>
+		<div class="absolute inset-0 bg-neutral-900 dark:bg-neutral-950" aria-hidden="true"></div>
+	<?php endif; ?>
+
+	<div class="relative z-10 flex flex-col min-h-screen">
+		<?php /* Hero content (centered) */ ?>
+		<div class="flex-1 flex flex-col justify-center container mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24 lg:py-32">
+			<div class="max-w-3xl mx-auto text-center">
+				<?php /* Announcement banner */ ?>
+				<?php if ( $view['show_announcement'] && ( $view['announcement_text'] !== '' || $view['announcement_link_text'] !== '' ) ) : ?>
+					<div class="mb-8">
+						<div class="inline-flex items-center gap-x-2 rounded-full bg-white/90 dark:bg-neutral-100 px-4 py-2 text-sm text-neutral-900 dark:text-neutral-900">
+							<span><?php echo $view['announcement_text']; ?></span>
+							<?php if ( $view['announcement_link_text'] !== '' ) : ?>
+								<a
+									href="<?php echo esc_url( $view['announcement_href'] ); ?>"
+									<?php echo $view['announcement_attrs']; ?>
+									class="font-semibold text-blue-chill-600 dark:text-blue-chill-600 hover:text-blue-chill-700 dark:hover:text-blue-chill-700 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-100 rounded inline-flex items-center gap-1 transition-colors"
+								><?php echo esc_html( $view['announcement_link_text'] ); ?>
+									<svg class="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
+									</svg>
+								</a>
+							<?php endif; ?>
+						</div>
+					</div>
+				<?php endif; ?>
+
+				<?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-neutral-900 dark:focus:ring-offset-neutral-950',
+					'secondary_extras'=> 'text-white dark:text-white focus:ring-white focus:ring-offset-neutral-900 dark:focus:ring-offset-neutral-950',
+					'elements_path'   => $elements_path,
+				];
+				include $elements_path . '/cta-group/templates/render.php';
+				?>
+			</div>
+		</div>
+	</div>
+</section>
+
+<?php // ========== HERO CENTERED IMAGE END ========== ?>

package/packages/widgets/hero-collage/data/view.php

@@ -0,0 +1,108 @@
+<?php
+/**
+ * Data Preparation: Hero Collage
+ *
+ * Transforms raw Elementor settings into clean, template-ready data.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for Hero Collage widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID for accessibility
+ * @return array Template-ready data
+ */
+function prepare_hero_collage_view( array $settings, string $widget_id ): array {
+	$fields       = sociallane_extract_fields( $settings, [
+		'headline'   => [],
+		'description' => [ 'show_key' => 'show_description' ],
+	] );
+	$show_cta_primary   = sociallane_show_field( $settings, 'show_cta_primary' );
+	$show_cta_secondary = sociallane_show_field( $settings, 'show_cta_secondary' );
+	$headline_tag = sociallane_validate_heading_tag( $settings, 'headline_tag', 'h1' );
+
+	$primary_preset  = function_exists( 'sociallane_parse_button_preset' ) ? sociallane_parse_button_preset( $settings['cta_primary_style'] ?? 'primary' ) : [ 'variant' => 'primary', 'size' => 'md' ];
+	$secondary_preset = function_exists( 'sociallane_parse_button_preset' ) ? sociallane_parse_button_preset( $settings['cta_secondary_style'] ?? 'ghost' ) : [ 'variant' => 'ghost', 'size' => 'md' ];
+	$cta_primary = $show_cta_primary
+		? sociallane_prepare_button_data(
+			$settings['cta_primary_text'] ?? '',
+			$settings['cta_primary_url'] ?? [],
+			[ 'variant' => $primary_preset['variant'], 'size' => $primary_preset['size'] ]
+		)
+		: null;
+	$cta_secondary = $show_cta_secondary
+		? sociallane_prepare_button_data(
+			$settings['cta_secondary_text'] ?? '',
+			$settings['cta_secondary_url'] ?? [],
+			[ 'variant' => $secondary_preset['variant'], 'size' => $secondary_preset['size'] ]
+		)
+		: null;
+
+	$content_position = sociallane_validate_option( $settings['content_position'] ?? 'left', [ 'left', 'right' ], 'left' );
+	$content_order = $content_position === 'right' ? 'lg:order-2' : 'lg:order-1';
+	$media_order   = $content_position === 'right' ? 'lg:order-1' : 'lg:order-2';
+
+	// Collage: 5 slots with grid placement (fixed positions for layered look)
+	$placements = [
+		1 => 'col-start-2 col-span-2 row-start-1',
+		2 => 'col-start-2 col-span-2 row-start-2',
+		3 => 'col-start-3 row-start-3',
+		4 => 'col-span-2 row-start-3',
+		5 => 'col-start-1 row-span-2 row-start-1',
+	];
+	$collage = [];
+	for ( $i = 1; $i <= 5; $i++ ) {
+		$img = $settings[ 'collage_image_' . $i ] ?? [];
+		$src = esc_url( $img['url'] ?? '' );
+		$id  = $img['id'] ?? 0;
+		$item = [
+			'src'       => $src,
+			'alt'       => esc_attr( $settings[ 'collage_alt_' . $i ] ?? '' ),
+			'id'        => $id,
+			'srcset'    => $id ? ( wp_get_attachment_image_srcset( $id, 'large' ) ?: '' ) : '',
+			'sizes'     => '(max-width: 1024px) 100vw, 50vw',
+			'width'     => '',
+			'height'    => '',
+			'loading'   => $i <= 2 ? 'eager' : 'lazy',
+			'placement' => $placements[ $i ],
+		];
+		if ( $id ) {
+			$meta = wp_get_attachment_metadata( $id );
+			if ( $meta ) {
+				$item['width']  = $meta['width'] ?? '';
+				$item['height'] = $meta['height'] ?? '';
+			}
+		}
+		$collage[] = $item;
+	}
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true ] );
+
+	// Light/dark: dual classes for Nav theme switcher (mandatory)
+	$classes = [
+		'section' => 'bg-neutral-100 dark:bg-zinc-900',
+		'headline'   => 'text-zinc-900 dark:text-neutral-100',
+		'description'    => 'text-zinc-900 dark:text-neutral-100',
+	];
+
+	return array_merge( $fields, [
+		'show_cta_primary'  => $show_cta_primary,
+		'show_cta_secondary'=> $show_cta_secondary,
+		'headline_tag'      => $headline_tag,
+		'cta_primary'       => $cta_primary,
+		'cta_secondary'     => $cta_secondary,
+		'content_order'     => $content_order,
+		'media_order'       => $media_order,
+		'collage'           => $collage,
+		'classes'          => $classes,
+		'widget_id'         => $widget_id,
+		'animation'         => $animation,
+	] );
+}
+

package/packages/widgets/hero-collage/hero-collage.php

@@ -0,0 +1,151 @@
+<?php
+/**
+ * Widget: Hero Collage
+ *
+ * A hero section with split layout: headline, description, and CTAs on one side,
+ * and a dynamic image collage (5 images) on the other. Dark background with grid overlay.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use SocialLane\Elements\Traits\Common_Controls;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Hero Collage Widget
+ */
+class Hero_Collage extends Widget_Base {
+
+	use Common_Controls;
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'hero-collage';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Hero Collage', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-gallery-grid';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-heroes' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'hero', 'collage', 'split', 'banner', 'grid' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_layout_section();
+		$this->register_content_section();
+		$this->register_cta_section();
+		$this->register_collage_section();
+		$this->register_animation_controls( true );
+	}
+
+	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_position',
+			[
+				'label'   => esc_html__( 'Content Position', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'left',
+				'options' => [
+					'left'  => esc_html__( 'Left', 'sociallane-elements' ),
+					'right' => esc_html__( 'Right', '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->register_headline_controls( 'h1', [ 'placeholder' => esc_html__( "We're changing the way people connect", 'sociallane-elements' ) ] );
+		$this->register_description_controls( [
+			'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_cta_section(): void {
+		$this->start_controls_section(
+			'section_cta',
+			[
+				'label' => esc_html__( 'Call to Action', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+		$this->register_dual_cta_controls( [
+			'primary_style'   => 'primary',
+			'secondary_style' => 'ghost',
+		] );
+		$this->end_controls_section();
+	}
+
+	private function register_collage_section(): void {
+		$this->start_controls_section(
+			'section_collage',
+			[
+				'label' => esc_html__( 'Collage', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$placeholder = [ 'url' => \Elementor\Utils::get_placeholder_image_src() ];
+		for ( $i = 1; $i <= 5; $i++ ) {
+			$this->add_control(
+				'collage_image_' . $i,
+				[
+					'label'   => sprintf( /* translators: 1: image number */ esc_html__( 'Image %d', 'sociallane-elements' ), $i ),
+					'type'    => Controls_Manager::MEDIA,
+					'default' => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
+				]
+			);
+			$this->add_control(
+				'collage_alt_' . $i,
+				[
+					'label'       => sprintf( /* translators: 1: image number */ esc_html__( 'Image %d Alt Text', 'sociallane-elements' ), $i ),
+					'type'        => Controls_Manager::TEXT,
+					'description' => esc_html__( 'Required for accessibility.', 'sociallane-elements' ),
+				]
+			);
+		}
+
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_hero_collage_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}