@sociallane/elements 1.0.0

package/widgets/blog-grid/templates/partials/card.php

@@ -0,0 +1,73 @@
+<?php
+/**
+ * Template Partial: Blog Grid – single article card
+ *
+ * Expects $card (single post data) and $view['classes'] in scope.
+ * Card: image with category tag overlay, date (calendar icon), title, excerpt, read-more link.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) || empty( $card ) || empty( $view ) ) {
+	return;
+}
+
+$elements_path = defined( 'SOCIALLANE_ELEMENTS_PATH' ) ? SOCIALLANE_ELEMENTS_PATH . 'elements' : dirname( __DIR__, 2 ) . '/elements';
+$classes       = $view['classes'] ?? [];
+?>
+
+<?php // ===== BLOG GRID CARD START ===== ?>
+
+<article class="<?php echo esc_attr( $classes['card'] ?? '' ); ?> flex flex-col transition-shadow duration-300 hover:shadow-lg">
+	<?php if ( ! empty( $card['show_image'] ) && ! empty( $card['image']['src'] ) ) : ?>
+		<a href="<?php echo esc_url( $card['url'] ); ?>" class="block relative aspect-[4/3] overflow-hidden focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-800 rounded-t-xl focus:outline-none">
+			<?php
+			$image         = $card['image'];
+			$image['class'] = 'w-full h-full object-cover';
+			include $elements_path . '/image/templates/render.php';
+			?>
+			<?php if ( ! empty( $card['show_category'] ) && $card['category'] !== '' ) : ?>
+				<span class="absolute top-4 left-4 px-3 py-1.5 rounded-full text-sm font-medium <?php echo esc_attr( ( $classes['tag_bg'] ?? '' ) . ' ' . ( $classes['tag_text'] ?? '' ) ); ?>">
+					<?php echo esc_html( $card['category'] ); ?>
+				</span>
+			<?php endif; ?>
+		</a>
+	<?php endif; ?>
+
+	<div class="p-5 md:p-6 flex flex-col flex-1">
+		<?php if ( empty( $card['show_image'] ) && ! empty( $card['show_category'] ) && $card['category'] !== '' ) : ?>
+			<span class="inline-flex w-fit px-3 py-1.5 rounded-full text-sm font-medium mb-3 <?php echo esc_attr( ( $classes['tag_bg'] ?? '' ) . ' ' . ( $classes['tag_text'] ?? '' ) ); ?>">
+				<?php echo esc_html( $card['category'] ); ?>
+			</span>
+		<?php endif; ?>
+		<?php if ( ! empty( $card['show_date'] ) && ! empty( $card['date'] ) ) : ?>
+			<time datetime="<?php echo esc_attr( $card['date_iso'] ); ?>" class="<?php echo esc_attr( $classes['meta'] ?? '' ); ?> text-sm flex items-center gap-2 mb-3">
+				<svg class="w-4 h-4 shrink-0" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
+				</svg>
+				<?php echo esc_html( $card['date'] ); ?>
+			</time>
+		<?php endif; ?>
+
+		<h3 class="<?php echo esc_attr( $classes['card_title'] ?? '' ); ?> text-lg md:text-xl font-bold font-heading leading-tight mb-2">
+			<a href="<?php echo esc_url( $card['url'] ); ?>" class="text-inherit no-underline hover:underline focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-inset rounded focus:outline-none">
+				<?php echo $card['title']; ?>
+			</a>
+		</h3>
+
+		<?php if ( ! empty( $card['show_excerpt'] ) && $card['excerpt'] !== '' ) : ?>
+			<div class="<?php echo esc_attr( $classes['excerpt'] ?? '' ); ?> text-sm md:text-base leading-relaxed flex-1 mb-4">
+				<?php echo $card['excerpt']; ?>
+			</div>
+		<?php endif; ?>
+
+		<a href="<?php echo esc_url( $card['url'] ); ?>" class="<?php echo esc_attr( $classes['read_more'] ?? '' ); ?> inline-flex items-center gap-1.5 text-sm font-medium no-underline hover:underline focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-inset rounded focus:outline-none self-start">
+			<?php echo esc_html( $card['read_more'] ); ?>
+			<svg class="w-4 h-4 shrink-0" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+			</svg>
+		</a>
+	</div>
+</article>
+
+<?php // ===== BLOG GRID CARD END ===== ?>

package/widgets/blog-grid/templates/wrapper.php

@@ -0,0 +1,89 @@
+<?php
+/**
+ * Template: Blog Grid Wrapper
+ *
+ * AVAILABLE DATA ($view):
+ * - posts (array of card data: title, url, date, category, excerpt, image, show_*)
+ * - show_heading, heading, heading_tag
+ * - show_subtitle, subtitle
+ * - show_cta, cta (button data)
+ * - grid_class, 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 );
+$headline_attrs = sociallane_headline_animation_attrs( $anim );
+$posts          = $view['posts'];
+$classes        = $view['classes'] ?? [];
+$section_id     = 'blog-grid-' . $view['widget_id'];
+$has_heading    = ( ! empty( $view['show_heading'] ) && $view['heading'] !== '' )
+	|| ( ! empty( $view['show_subtitle'] ) && $view['subtitle'] !== '' );
+?>
+
+<?php // ========== BLOG GRID START ========== ?>
+
+<section
+	class="<?php echo esc_attr( $classes['section'] ?? '' ); ?> py-12 md:py-16 lg:py-20"
+	<?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">
+		<?php // ----- Section Header (centered) ----- ?>
+		<header class="text-center max-w-3xl mx-auto mb-10 md:mb-12 lg:mb-14">
+			<?php if ( ! empty( $view['show_heading'] ) && $view['heading'] !== '' ) : ?>
+				<<?php echo $view['heading_tag']; ?>
+					id="<?php echo esc_attr( $section_id ); ?>"
+					class="<?php echo esc_attr( $classes['headline'] ?? '' ); ?> text-2xl md:text-3xl lg:text-4xl font-bold font-heading leading-tight mb-4"
+					<?php echo ! empty( $headline_attrs ) ? ' ' . $headline_attrs : ''; ?>
+				>
+					<?php echo $view['heading']; ?>
+				</<?php echo $view['heading_tag']; ?>>
+			<?php endif; ?>
+			<?php if ( ! empty( $view['show_subtitle'] ) && $view['subtitle'] !== '' ) : ?>
+				<p class="<?php echo esc_attr( $classes['subtitle'] ?? '' ); ?> text-base md:text-lg leading-relaxed">
+					<?php echo $view['subtitle']; ?>
+				</p>
+			<?php endif; ?>
+		</header>
+
+		<?php // ----- Cards Grid ----- ?>
+		<?php if ( empty( $posts ) ) : ?>
+			<p class="<?php echo esc_attr( $classes['excerpt'] ?? '' ); ?> text-center"><?php esc_html_e( 'No posts found.', 'sociallane-elements' ); ?></p>
+		<?php else : ?>
+			<?php $stagger_attrs = sociallane_stagger_attrs( $anim ); ?>
+			<div class="grid <?php echo esc_attr( $view['grid_class'] ); ?> gap-6 lg:gap-8" <?php echo $stagger_attrs ? ' ' . $stagger_attrs : ''; ?>>
+				<?php foreach ( $posts as $card ) : ?>
+					<?php include __DIR__ . '/partials/card.php'; ?>
+				<?php endforeach; ?>
+			</div>
+
+			<?php // ----- CTA Button (centered below cards) ----- ?>
+			<?php if ( ! empty( $view['show_cta'] ) && $view['cta'] ) : ?>
+				<div class="flex justify-center mt-10 md:mt-12 lg:mt-14">
+					<?php
+					$elements_path = defined( 'SOCIALLANE_ELEMENTS_PATH' ) ? SOCIALLANE_ELEMENTS_PATH . 'elements' : dirname( __DIR__, 2 ) . '/elements';
+					$button        = $view['cta'];
+					// Add arrow icon for CTA
+					if ( empty( $button['icon'] ) ) {
+						$button['icon'] = [ 'value' => 'eicon-chevron-right', 'library' => 'eicons' ];
+						$button['icon_position'] = 'right';
+					}
+					include $elements_path . '/button/templates/render.php';
+					?>
+				</div>
+			<?php endif; ?>
+		<?php endif; ?>
+	</div>
+</section>
+
+<?php // ========== BLOG GRID END ========== ?>

package/widgets/card-hover-reveal/card-hover-reveal.php

@@ -0,0 +1,329 @@
+<?php
+/**
+ * Widget: Card Hover Reveal
+ *
+ * Repeatable cards: each has image; on hover a backdrop-blur bar fades up
+ * with title, optional description, and CTA. Uses GSAP for bar and content animation.
+ *
+ * @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;
+}
+
+/**
+ * Card Hover Reveal Widget
+ */
+class Card_Hover_Reveal extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'card-hover-reveal';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Card Hover Reveal', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-gallery-grid';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-cards' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'card', 'hover', 'reveal', 'image', 'blur', 'overlay', 'grid' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_header_section();
+		$this->register_cards_section();
+		$this->register_layout_section();
+		$this->register_animation_controls( true, true );
+	}
+
+	private function register_header_section(): void {
+		$this->start_controls_section(
+			'section_header',
+			[
+				'label' => esc_html__( 'Header', '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__( 'Greep van onze specialisten', 'sociallane-elements' ),
+				'label_block' => true,
+				'condition'   => [ 'show_headline' => 'yes' ],
+			]
+		);
+		$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' ],
+				'condition' => [ 'show_headline' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'show_header_cta',
+			[
+				'label'   => esc_html__( 'Show header button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'header_cta_text',
+			[
+				'label'     => esc_html__( 'Button text', 'sociallane-elements' ),
+				'type'      => Controls_Manager::TEXT,
+				'default'   => esc_html__( 'Leer ons team kennen →', 'sociallane-elements' ),
+				'condition' => [ 'show_header_cta' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'header_cta_url',
+			[
+				'label'     => esc_html__( 'Button URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [ 'show_header_cta' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_cards_section(): void {
+		$this->start_controls_section(
+			'section_cards',
+			[
+				'label' => esc_html__( 'Cards', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$repeater = new Repeater();
+
+		$repeater->add_control(
+			'image',
+			[
+				'label'   => esc_html__( '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(
+			'link',
+			[
+				'label' => esc_html__( 'Link (optional)', 'sociallane-elements' ),
+				'type'  => Controls_Manager::URL,
+			]
+		);
+		$repeater->add_control(
+			'show_title',
+			[
+				'label'   => esc_html__( 'Show Title', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$repeater->add_control(
+			'title',
+			[
+				'label'       => esc_html__( 'Title', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+				'label_block' => true,
+				'condition'   => [ 'show_title' => 'yes' ],
+			]
+		);
+		$repeater->add_control(
+			'title_tag',
+			[
+				'label'     => esc_html__( 'Title Tag', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'h3',
+				'options'   => [ 'h2' => 'H2', 'h3' => 'H3', 'h4' => 'H4' ],
+				'condition' => [ 'show_title' => 'yes' ],
+			]
+		);
+		$repeater->add_control(
+			'subtitle',
+			[
+				'label'       => esc_html__( 'Subtitle', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'label_block' => true,
+			]
+		);
+		$repeater->add_control(
+			'show_description',
+			[
+				'label'   => esc_html__( 'Show Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$repeater->add_control(
+			'description',
+			[
+				'label'     => esc_html__( 'Description (WYSIWYG)', 'sociallane-elements' ),
+				'type'      => Controls_Manager::WYSIWYG,
+				'default'   => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'condition' => [ 'show_description' => 'yes' ],
+			]
+		);
+		$repeater->add_control(
+			'show_cta',
+			[
+				'label'   => esc_html__( 'Show Button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => '',
+			]
+		);
+		$repeater->add_control(
+			'cta_text',
+			[
+				'label'     => esc_html__( 'Button Text', 'sociallane-elements' ),
+				'type'      => Controls_Manager::TEXT,
+				'default'   => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'condition' => [ 'show_cta' => 'yes' ],
+			]
+		);
+		$repeater->add_control(
+			'cta_url',
+			[
+				'label'     => esc_html__( 'Button URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [ 'show_cta' => 'yes' ],
+			]
+		);
+		$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' ],
+				'condition' => [ 'show_cta' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'cards',
+			[
+				'label'       => esc_html__( 'Cards', 'sociallane-elements' ),
+				'type'        => Controls_Manager::REPEATER,
+				'fields'      => $repeater->get_controls(),
+				'default'     => [
+					[
+						'image'          => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
+						'title'          => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+						'title_tag'      => 'h3',
+						'show_description' => 'yes',
+						'description'    => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+					],
+					[
+						'image'          => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
+						'title'          => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+						'title_tag'      => 'h3',
+						'show_description' => 'yes',
+						'description'    => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+					],
+					[
+						'image'          => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
+						'title'          => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+						'title_tag'      => 'h3',
+						'show_description' => 'yes',
+						'description'    => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+					],
+				],
+				'title_field' => '{{{ title }}}',
+			]
+		);
+
+		$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(
+			'aspect_ratio',
+			[
+				'label'   => esc_html__( 'Card Aspect Ratio', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => '3/4',
+				'options' => [
+					'16/9' => esc_html__( '16:9', 'sociallane-elements' ),
+					'4/3'  => esc_html__( '4:3', 'sociallane-elements' ),
+					'3/2'  => esc_html__( '3:2', 'sociallane-elements' ),
+					'1/1'  => esc_html__( '1:1', 'sociallane-elements' ),
+					'3/4'  => esc_html__( '3:4 (portrait)', 'sociallane-elements' ),
+				],
+			]
+		);
+
+		$this->add_control(
+			'columns',
+			[
+				'label'   => esc_html__( 'Columns', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => '3',
+				'options' => [
+					'2' => esc_html__( '2', 'sociallane-elements' ),
+					'3' => esc_html__( '3', 'sociallane-elements' ),
+				],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_card_hover_reveal_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

package/widgets/card-hover-reveal/data/view.php

@@ -0,0 +1,141 @@
+<?php
+/**
+ * Data Preparation: Card Hover Reveal
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for Card Hover Reveal widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID
+ * @return array Template-ready data
+ */
+function prepare_card_hover_reveal_view( array $settings, string $widget_id ): array {
+	// Header: title left, CTA right (light gray button with arrow).
+	$show_headline   = sociallane_show_field( $settings, 'show_headline' );
+	$headline        = $show_headline ? esc_html( $settings['headline'] ?? '' ) : '';
+	$headline_tag    = sociallane_validate_heading_tag( $settings, 'headline_tag', 'h2' );
+	$show_header_cta = sociallane_show_field( $settings, 'show_header_cta' );
+	$header_cta_text = $show_header_cta ? trim( $settings['header_cta_text'] ?? '' ) : '';
+	$header_cta_url  = is_array( $settings['header_cta_url'] ?? null ) ? $settings['header_cta_url'] : [];
+	$header_cta_href = isset( $header_cta_url['url'] ) && $header_cta_url['url'] !== '' ? esc_url( $header_cta_url['url'] ) : '';
+	$header_cta_attrs = [];
+	if ( $header_cta_href && ! empty( $header_cta_url['is_external'] ) ) {
+		$header_cta_attrs[] = 'target="_blank"';
+		$header_cta_attrs[] = 'rel="noopener noreferrer"';
+	}
+	if ( $header_cta_href && ! empty( $header_cta_url['nofollow'] ) ) {
+		$header_cta_attrs[] = 'rel="nofollow"';
+	}
+
+	$cards = [];
+	$raw_cards = $settings['cards'] ?? [];
+
+	foreach ( $raw_cards as $index => $item ) {
+		$item = is_array( $item ) ? $item : (array) $item;
+		$image = sociallane_prepare_image_data(
+			isset( $item['image'] ) && is_array( $item['image'] ) ? $item['image'] : [],
+			[
+				'alt'        => $item['image_alt'] ?? '',
+				'sizes'      => '(max-width: 768px) 100vw, 33vw',
+				'loading'    => $index < 3 ? 'eager' : 'lazy',
+				'image_size' => 'full',
+			]
+		);
+
+		$show_title   = sociallane_show_field( $item, 'show_title' );
+		$show_desc    = sociallane_show_field( $item, 'show_description' );
+		$show_cta     = sociallane_show_field( $item, 'show_cta' );
+
+		$title     = $show_title ? esc_html( $item['title'] ?? '' ) : '';
+		$title_tag = sociallane_validate_heading_tag( $item, 'title_tag', 'h3' );
+		$subtitle = esc_html( $item['subtitle'] ?? '' );
+		$description = $show_desc ? wp_kses_post( $item['description'] ?? '' ) : '';
+
+		$cta = null;
+		if ( $show_cta && ! empty( trim( $item['cta_text'] ?? '' ) ) && function_exists( 'sociallane_prepare_button_data' ) ) {
+			$cta = sociallane_prepare_button_data(
+				$item['cta_text'] ?? '',
+				$item['cta_url'] ?? [],
+				[ 'preset' => $item['cta_style'] ?? 'primary' ]
+			);
+		}
+
+		$link     = is_array( $item['link'] ?? null ) ? $item['link'] : [];
+		$link_url = ! empty( $link['url'] ) ? esc_url( $link['url'] ) : '';
+		$link_attrs = [];
+		if ( ! empty( $link['is_external'] ) ) {
+			$link_attrs[] = 'target="_blank"';
+			$link_attrs[] = 'rel="noopener noreferrer"';
+		}
+		if ( ! empty( $link['nofollow'] ) ) {
+			$link_attrs[] = 'rel="nofollow"';
+		}
+
+		$cards[] = [
+			'image'           => $image,
+			'show_title'      => $show_title,
+			'title'           => $title,
+			'title_tag'       => $title_tag,
+			'subtitle'        => $subtitle,
+			'show_description' => $show_desc,
+			'description'     => $description,
+			'show_cta'        => $show_cta,
+			'cta'             => $cta,
+			'link_url'        => $link_url,
+			'link_attrs'      => implode( ' ', $link_attrs ),
+		];
+	}
+
+	$aspect_ratio = $settings['aspect_ratio'] ?? '16/9';
+	$aspect_class = 'aspect-video';
+	if ( $aspect_ratio === '4/3' ) {
+		$aspect_class = 'aspect-[4/3]';
+	} elseif ( $aspect_ratio === '3/2' ) {
+		$aspect_class = 'aspect-[3/2]';
+	} elseif ( $aspect_ratio === '1/1' ) {
+		$aspect_class = 'aspect-square';
+	} elseif ( $aspect_ratio === '3/4' ) {
+		$aspect_class = 'aspect-[3/4]';
+	}
+
+	$columns   = in_array( $settings['columns'] ?? '3', [ '2', '3' ], true ) ? $settings['columns'] : '3';
+	$grid_class = $columns === '2'
+		? 'grid-cols-1 sm:grid-cols-2'
+		: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3';
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
+
+	// Image: dark overlay with gradient (darker at bottom), white name + role.
+	$classes = [
+		'section'     => 'bg-white dark:bg-neutral-900',
+		'headline'    => 'text-neutral-900 dark:text-white',
+		'header_cta'  => 'inline-flex items-center gap-2 px-4 py-2.5 rounded-lg bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white font-medium hover:bg-neutral-200 dark:hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 transition-colors',
+		'bar_bg'      => 'bg-zinc-900/60 border-t border-white-100/10 dark:bg-zinc-900/70 dark:border-white-100/10 backdrop-blur-sm',
+		'title'       => 'text-white font-bold',
+		'description' => 'text-white/90',
+		'cta_focus'   => 'focus:ring-white focus:ring-offset-2 focus:ring-offset-neutral-900 dark:focus:ring-offset-neutral-950',
+	];
+
+	return [
+		'show_headline'    => $show_headline,
+		'headline'         => $headline,
+		'headline_tag'     => $headline_tag,
+		'show_header_cta'  => $show_header_cta && $header_cta_text !== '' && $header_cta_href !== '',
+		'header_cta_text'  => esc_html( $header_cta_text ),
+		'header_cta_href'  => $header_cta_href,
+		'header_cta_attrs' => implode( ' ', $header_cta_attrs ),
+		'cards'            => $cards,
+		'aspect_class'     => $aspect_class,
+		'grid_class'       => $grid_class,
+		'classes'          => $classes,
+		'widget_id'        => $widget_id,
+		'animation'        => $animation,
+	];
+}