@sociallane/elements 1.0.0

package/packages/widgets/grid-components/data/view.php

@@ -0,0 +1,107 @@
+<?php
+/**
+ * Data Preparation: Component Showcase
+ *
+ * Transforms raw Elementor settings into clean, template-ready data.
+ * Dynamic tags are resolved by Elementor before get_settings_for_display().
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for Component Showcase widget
+ *
+ * @param array  $settings  Raw Elementor settings (dynamic tags already resolved)
+ * @param string $widget_id Unique widget ID for accessibility
+ * @return array Template-ready data
+ */
+function prepare_grid_components_view( array $settings, string $widget_id ): array {
+	$fields       = sociallane_extract_fields( $settings, [ 'headline' => [] ] );
+	$headline_tag = sociallane_validate_heading_tag( $settings, 'headline_tag', 'h2' );
+	$columns      = sociallane_validate_option( $settings['columns'] ?? '4', [ '2', '3', '4' ], '4' );
+	$grid_class   = sociallane_grid_cols( $columns );
+	$placeholder_src = \Elementor\Utils::get_placeholder_image_src();
+
+	$components = sociallane_process_repeater( $settings['components'] ?? [], function ( $item ) use ( $placeholder_src ) {
+		$image_data = $item['image'] ?? [];
+		$img_url    = $image_data['url'] ?? '';
+		$img_id     = $image_data['id'] ?? 0;
+		$link       = sociallane_prepare_link_attrs( $item['link'] ?? [] );
+
+		$image = [
+			'src'     => esc_url( $img_url ?: $placeholder_src ),
+			'alt'     => esc_attr( $item['image_alt'] ?? '' ),
+			'id'      => $img_id,
+			'srcset'  => '',
+			'sizes'   => '(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw',
+			'width'   => '',
+			'height'  => '',
+			'loading' => 'lazy',
+		];
+
+		if ( $img_id ) {
+			$image_meta = wp_get_attachment_metadata( $img_id );
+			if ( $image_meta ) {
+				$image['width']  = $image_meta['width'] ?? '';
+				$image['height'] = $image_meta['height'] ?? '';
+				$image['srcset'] = wp_get_attachment_image_srcset( $img_id, 'medium' ) ?: '';
+			}
+		}
+
+		$show_image  = ( $item['show_image'] ?? 'yes' ) === 'yes';
+		$visual_type = $item['visual_type'] ?? 'image';
+		$icon_slugs  = [
+			'accordion', 'alert', 'avatar', 'badge', 'breadcrumbs', 'button', 'calendar', 'card',
+			'bento-grid-4', 'bento-grid-5', 'bento-grid-6', 'bento-portfolio-4', 'bento-portfolio-5', 'bento-portfolio-6', 'content-block', 'faq-stacked', 'faq-split', 'faq-centered', 'feature-grid', 'feature-list-cta',
+			'footer', 'posts-grid', 'posts-grid-overlay', 'grid-team', 'hero', 'intro-text', 'logo-grid-centered', 'logo-grid-row', 'logo-grid-split', 'navigation',
+			'newsletter', 'pricing-table', 'social-proof',
+		];
+		$icon_slug   = in_array( $item['icon_component'] ?? '', $icon_slugs, true ) ? $item['icon_component'] : 'card';
+
+		$icon_svg = '';
+		if ( $show_image && $visual_type === 'icon' && defined( 'SOCIALLANE_ELEMENTS_PATH' ) ) {
+			$base = SOCIALLANE_ELEMENTS_PATH . 'assets/svgs/';
+			$component_path = $base . 'components/' . $icon_slug . '.svg';
+			$widget_path   = $base . 'widgets/' . $icon_slug . '.svg';
+			if ( is_readable( $component_path ) ) {
+				$icon_svg = (string) file_get_contents( $component_path );
+			} elseif ( is_readable( $widget_path ) ) {
+				$icon_svg = (string) file_get_contents( $widget_path );
+			}
+		}
+
+		return [
+			'title'       => esc_html( $item['title'] ?? '' ),
+			'description' => esc_html( $item['description'] ?? '' ),
+			'show_image'  => $show_image,
+			'visual_type' => $visual_type,
+			'image'       => $image,
+			'icon_svg'    => $icon_svg,
+			'link_url'    => $link['url'],
+			'link_attrs'  => $link['attrs'],
+		];
+	} );
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
+	$classes = [
+		'section'   => 'bg-white dark:bg-neutral-900',
+		'headline'  => 'text-neutral-900 dark:text-white',
+		'card'      => 'bg-neutral-100 dark:bg-neutral-800 rounded-lg overflow-hidden group',
+		'visual'    => 'bg-neutral-200 dark:bg-neutral-700',
+		'title'     => 'text-neutral-900 dark:text-white',
+		'desc'      => 'text-neutral-600 dark:text-neutral-300',
+	];
+
+	return array_merge( $fields, [
+		'headline_tag' => $headline_tag,
+		'grid_class'   => $grid_class,
+		'components'   => $components,
+		'classes'      => $classes,
+		'widget_id'    => $widget_id,
+		'animation'    => $animation,
+	] );
+}

package/packages/widgets/grid-components/grid-components.php

@@ -0,0 +1,323 @@
+<?php
+/**
+ * Widget: Component Showcase
+ *
+ * A grid of component cards with visual, title, description, and link.
+ * For showcasing built components with links to their pages.
+ * Supports Elementor dynamic tags for title, description, image, and URL.
+ *
+ * @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;
+}
+
+/**
+ * Component Showcase Widget
+ */
+class Grid_Components extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'grid-components';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Component Showcase', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-gallery-grid';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-content' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'component', 'showcase', 'grid', 'directory', 'library' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_header_section();
+		$this->register_components_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__( 'Lorem ipsum dolor', 'sociallane-elements' ),
+				'label_block' => true,
+				'dynamic'     => [
+					'active' => 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->end_controls_section();
+	}
+
+	private function register_components_section(): void {
+		$this->start_controls_section(
+			'section_components',
+			[
+				'label' => esc_html__( 'Components', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$repeater = new Repeater();
+
+		$repeater->add_control(
+			'show_image',
+			[
+				'label'   => esc_html__( 'Show Visual', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$repeater->add_control(
+			'visual_type',
+			[
+				'label'     => esc_html__( 'Visual Type', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'icon',
+				'options'   => [
+					'icon'  => esc_html__( 'Built-in Icon', 'sociallane-elements' ),
+					'image' => esc_html__( 'Custom Image', 'sociallane-elements' ),
+				],
+				'condition' => [ 'show_image' => 'yes' ],
+			]
+		);
+
+		$repeater->add_control(
+			'icon_component',
+			[
+				'label'     => esc_html__( 'Icon', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'accordion',
+				'groups'    => [
+					[
+						'label'   => esc_html__( 'Components', 'sociallane-elements' ),
+						'options' => [
+							'accordion'   => esc_html__( 'Accordion', 'sociallane-elements' ),
+							'alert'       => esc_html__( 'Alert', 'sociallane-elements' ),
+							'avatar'      => esc_html__( 'Avatar', 'sociallane-elements' ),
+							'badge'       => esc_html__( 'Badge', 'sociallane-elements' ),
+							'breadcrumbs' => esc_html__( 'Breadcrumbs', 'sociallane-elements' ),
+							'button'      => esc_html__( 'Button', 'sociallane-elements' ),
+							'calendar'    => esc_html__( 'Calendar', 'sociallane-elements' ),
+							'card'        => esc_html__( 'Card', 'sociallane-elements' ),
+						],
+					],
+					[
+						'label'   => esc_html__( 'Widgets', 'sociallane-elements' ),
+						'options' => [
+							'bento-grid-4'     => esc_html__( 'Bento Grid (4 cells)', 'sociallane-elements' ),
+							'bento-grid-5'     => esc_html__( 'Bento Grid (Two Row)', 'sociallane-elements' ),
+							'bento-grid-6'     => esc_html__( 'Bento Grid (Two Column)', 'sociallane-elements' ),
+							'bento-portfolio'  => esc_html__( 'Bento Portfolio', 'sociallane-elements' ),
+							'content-block'    => esc_html__( 'Content Block', 'sociallane-elements' ),
+							'faq-stacked'      => esc_html__( 'FAQ (Stacked)', 'sociallane-elements' ),
+							'faq-split'        => esc_html__( 'FAQ (Split)', 'sociallane-elements' ),
+							'faq-centered'     => esc_html__( 'FAQ (Centered)', 'sociallane-elements' ),
+							'feature-grid'     => esc_html__( 'Feature Grid', 'sociallane-elements' ),
+							'feature-list-cta' => esc_html__( 'Feature List CTA', 'sociallane-elements' ),
+							'footer'           => esc_html__( 'Footer', 'sociallane-elements' ),
+							'posts-grid'        => esc_html__( 'Posts Grid', 'sociallane-elements' ),
+							'posts-grid-overlay' => esc_html__( 'Posts Grid (Overlay)', 'sociallane-elements' ),
+							'grid-team'         => esc_html__( 'Grid Team', 'sociallane-elements' ),
+							'hero'             => esc_html__( 'Hero', 'sociallane-elements' ),
+							'intro-text'       => esc_html__( 'Intro Text', 'sociallane-elements' ),
+							'logo-grid-centered' => esc_html__( 'Logo Grid (Centered)', 'sociallane-elements' ),
+							'logo-grid-row'      => esc_html__( 'Logo Grid (Row)', 'sociallane-elements' ),
+							'logo-grid-split'    => esc_html__( 'Logo Grid (Split)', 'sociallane-elements' ),
+							'navigation'       => esc_html__( 'Navigation', 'sociallane-elements' ),
+							'newsletter'       => esc_html__( 'Newsletter', 'sociallane-elements' ),
+							'pricing-table'    => esc_html__( 'Pricing Table', 'sociallane-elements' ),
+							'social-proof'     => esc_html__( 'Social Proof', 'sociallane-elements' ),
+						],
+					],
+				],
+				'condition' => [
+					'show_image'  => 'yes',
+					'visual_type' => 'icon',
+				],
+			]
+		);
+
+		$repeater->add_control(
+			'image',
+			[
+				'label'     => esc_html__( 'Image', 'sociallane-elements' ),
+				'type'      => Controls_Manager::MEDIA,
+				'condition' => [
+					'show_image'  => 'yes',
+					'visual_type' => 'image',
+				],
+				'default' => [
+					'url' => \Elementor\Utils::get_placeholder_image_src(),
+				],
+				'dynamic' => [
+					'active' => true,
+				],
+			]
+		);
+
+		$repeater->add_control(
+			'image_alt',
+			[
+				'label'       => esc_html__( 'Image Alt Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'description' => esc_html__( 'Required for accessibility', 'sociallane-elements' ),
+				'label_block' => true,
+				'dynamic'     => [ 'active' => true ],
+				'condition'   => [
+					'show_image'  => 'yes',
+					'visual_type' => 'image',
+				],
+			]
+		);
+
+		$repeater->add_control(
+			'title',
+			[
+				'label'       => esc_html__( 'Title', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'label_block' => true,
+				'dynamic'     => [
+					'active' => true,
+				],
+			]
+		);
+
+		$repeater->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' ),
+				'dynamic' => [
+					'active' => true,
+				],
+			]
+		);
+
+		$repeater->add_control(
+			'link',
+			[
+				'label'   => esc_html__( 'Link', 'sociallane-elements' ),
+				'type'    => Controls_Manager::URL,
+				'dynamic' => [
+					'active' => true,
+				],
+			]
+		);
+
+		$placeholder_url = \Elementor\Utils::get_placeholder_image_src();
+		$this->add_control(
+			'components',
+			[
+				'label'       => esc_html__( 'Components', 'sociallane-elements' ),
+				'type'        => Controls_Manager::REPEATER,
+				'fields'      => $repeater->get_controls(),
+				'default'     => [
+					[ 'title' => 'Accordion', 'description' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'visual_type' => 'icon', 'icon_component' => 'accordion' ],
+					[ 'title' => 'Alert', 'description' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'visual_type' => 'icon', 'icon_component' => 'alert' ],
+					[ 'title' => 'Avatar', 'description' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'visual_type' => 'icon', 'icon_component' => 'avatar' ],
+					[ 'title' => 'Badge', 'description' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'visual_type' => 'icon', 'icon_component' => 'badge' ],
+					[ 'title' => 'Breadcrumbs', 'description' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'visual_type' => 'icon', 'icon_component' => 'breadcrumbs' ],
+					[ 'title' => 'Button', 'description' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'visual_type' => 'icon', 'icon_component' => 'button' ],
+					[ 'title' => 'Calendar', 'description' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'visual_type' => 'icon', 'icon_component' => 'calendar' ],
+					[ 'title' => 'Card', 'description' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'visual_type' => 'icon', 'icon_component' => 'card' ],
+				],
+				'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(
+			'columns',
+			[
+				'label'   => esc_html__( 'Columns', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => '4',
+				'options' => [
+					'2' => '2',
+					'3' => '3',
+					'4' => '4',
+				],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_grid_components_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

package/packages/widgets/grid-components/package.json

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

package/packages/widgets/grid-components/templates/partials/component-card.php

@@ -0,0 +1,81 @@
+<?php
+/**
+ * Template Partial: Component Card
+ *
+ * AVAILABLE DATA ($component):
+ * - title, description, image, link_url, link_attrs
+ *
+ * Uses $view['classes'] from parent.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $component ) || empty( $view ) ) {
+	return;
+}
+
+$classes = $view['classes'] ?? [];
+$has_link = ! empty( $component['link_url'] ) && $component['link_url'] !== '#';
+?>
+
+<?php // ----- Component card start ----- ?>
+
+<article class="<?php echo esc_attr( $classes['card'] ?? '' ); ?> h-full flex flex-col">
+	<?php if ( $has_link ) : ?>
+		<a
+			href="<?php echo esc_url( $component['link_url'] ); ?>"
+			<?php echo $component['link_attrs']; ?>
+			class="block flex-1 flex flex-col no-underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:focus:ring-offset-neutral-900 rounded-lg"
+		>
+	<?php endif; ?>
+
+		<?php // Visual / image or icon ?>
+		<?php if ( ! empty( $component['show_image'] ) ) : ?>
+		<div class="<?php echo esc_attr( $classes['visual'] ?? '' ); ?> aspect-video flex items-center justify-center p-4 md:p-6">
+			<?php if ( ( $component['visual_type'] ?? 'image' ) === 'icon' && ! empty( $component['icon_svg'] ) ) : ?>
+				<div class="w-16 h-16 md:w-20 md:h-20 text-neutral-600 dark:text-neutral-400 shrink-0 [&>svg]:w-full [&>svg]:h-full [&>svg]:object-contain" aria-hidden="true">
+					<?php echo $component['icon_svg']; ?>
+				</div>
+			<?php elseif ( ! empty( $component['image']['src'] ) ) : ?>
+				<img
+					src="<?php echo esc_url( $component['image']['src'] ); ?>"
+					alt="<?php echo esc_attr( $component['image']['alt'] ); ?>"
+					<?php if ( ! empty( $component['image']['srcset'] ) ) : ?>srcset="<?php echo esc_attr( $component['image']['srcset'] ); ?>"<?php endif; ?>
+					<?php if ( ! empty( $component['image']['sizes'] ) ) : ?>sizes="<?php echo esc_attr( $component['image']['sizes'] ); ?>"<?php endif; ?>
+					<?php if ( ! empty( $component['image']['width'] ) ) : ?>width="<?php echo esc_attr( $component['image']['width'] ); ?>"<?php endif; ?>
+					<?php if ( ! empty( $component['image']['height'] ) ) : ?>height="<?php echo esc_attr( $component['image']['height'] ); ?>"<?php endif; ?>
+					loading="<?php echo esc_attr( $component['image']['loading'] ?? 'lazy' ); ?>"
+					decoding="async"
+					class="max-w-full max-h-full w-auto h-auto object-contain"
+				/>
+			<?php else : ?>
+				<div class="w-full h-full min-h-[80px] rounded flex items-center justify-center bg-neutral-300/50 dark:bg-neutral-600/50" aria-hidden="true"></div>
+			<?php endif; ?>
+		</div>
+		<?php endif; ?>
+
+		<?php // Title and description ?>
+		<div class="p-4 md:p-6 flex-1 flex flex-col">
+			<?php if ( ! empty( $component['title'] ) ) : ?>
+				<h3 class="<?php echo esc_attr( $classes['title'] ?? '' ); ?> text-lg font-bold font-heading mb-2 group-hover:underline">
+					<?php echo $component['title']; ?>
+				</h3>
+			<?php endif; ?>
+
+			<?php if ( ! empty( $component['description'] ) ) : ?>
+				<p class="<?php echo esc_attr( $classes['desc'] ?? '' ); ?> text-sm leading-relaxed">
+					<?php echo $component['description']; ?>
+				</p>
+			<?php endif; ?>
+		</div>
+
+	<?php if ( $has_link ) : ?>
+		</a>
+	<?php endif; ?>
+</article>
+
+<?php // ----- Component card end ----- ?>

package/packages/widgets/grid-components/templates/wrapper.php

@@ -0,0 +1,55 @@
+<?php
+/**
+ * Template: Component Showcase Wrapper
+ *
+ * AVAILABLE DATA ($view):
+ * - show_headline, headline, headline_tag
+ * - grid_class, components, 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 );
+$section_id = 'components-' . $view['widget_id'];
+?>
+
+<?php // ========== COMPONENT SHOWCASE 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 ( $view['show_headline'] && ! empty( $view['headline'] ) ) : ?>aria-labelledby="<?php echo esc_attr( $section_id ); ?>"<?php endif; ?>
+>
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<?php if ( $view['show_headline'] && ! empty( $view['headline'] ) ) : ?>
+			<header class="mb-12 md:mb-16" id="<?php echo esc_attr( $section_id ); ?>">
+				<<?php echo $view['headline_tag']; ?>
+					class="<?php echo esc_attr( $view['classes']['headline'] ); ?> text-2xl sm:text-3xl font-bold font-heading"
+				>
+					<?php echo $view['headline']; ?>
+				</<?php echo $view['headline_tag']; ?>>
+			</header>
+		<?php endif; ?>
+
+		<?php if ( ! empty( $view['components'] ) ) : ?>
+			<?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 ( $view['components'] as $component ) : ?>
+					<?php include __DIR__ . '/partials/component-card.php'; ?>
+				<?php endforeach; ?>
+			</div>
+		<?php endif; ?>
+	</div>
+</section>
+
+<?php // ========== COMPONENT SHOWCASE END ========== ?>

package/packages/widgets/grid-team/data/view.php

@@ -0,0 +1,67 @@
+<?php
+/**
+ * Data Preparation: Team Grid
+ *
+ * Transforms raw Elementor settings into clean, template-ready data.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for Team Grid widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID for accessibility
+ * @return array Template-ready data
+ */
+function prepare_grid_team_view( array $settings, string $widget_id ): array {
+	$fields       = sociallane_extract_fields( $settings, [
+		'headline' => [],
+		'subtitle' => [ 'show_key' => 'show_subtitle' ],
+	] );
+	$headline_tag = sociallane_validate_heading_tag( $settings );
+	$placeholder_src = \Elementor\Utils::get_placeholder_image_src();
+
+	$members = sociallane_process_repeater( $settings['members'] ?? [], function ( $item ) use ( $placeholder_src ) {
+		$image = sociallane_prepare_image_data(
+			$item['image'] ?? [],
+			[
+				'alt'    => $item['image_alt'] ?? '',
+				'sizes'  => '(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw',
+				'loading'=> 'lazy',
+			]
+		);
+		if ( empty( $image['src'] ) ) {
+			$image['src'] = $placeholder_src;
+		}
+		return [
+			'image' => $image,
+			'name'  => esc_html( $item['name'] ?? '' ),
+			'title' => esc_html( $item['title'] ?? '' ),
+		];
+	} );
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
+
+	// Light/dark: dual classes for Nav theme switcher
+	$classes = [
+		'section'   => 'bg-neutral-100 dark:bg-zinc-900',
+		'headline'  => 'text-zinc-900 dark:text-neutral-200',
+		'subtitle'  => 'text-zinc-900 dark:text-neutral-200',
+		'card'      => 'bg-neutral-50 dark:bg-neutral-800 rounded-2xl overflow-hidden shadow-lg',
+		'name'      => 'text-white dark:text-white',
+		'title'     => 'text-neutral-300 dark:text-zinc-900',
+	];
+
+	return array_merge( $fields, [
+		'headline_tag' => $headline_tag,
+		'members'      => $members,
+		'classes'      => $classes,
+		'widget_id'    => $widget_id,
+		'animation'    => $animation,
+	] );
+}