@sociallane/elements 1.0.0

package/packages/widgets/testimonials-bento/testimonials-bento.php

@@ -0,0 +1,322 @@
+<?php
+/**
+ * Widget: Testimonials Grid
+ *
+ * A grid of testimonial cards with title, quote, avatar, name, and role.
+ * Title and content alignment configurable (left, center, right).
+ *
+ * @package SocialLane_Elements
+ * @since   1.0.0
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Repeater;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Testimonials Grid Widget
+ */
+class Testimonials_Bento extends Widget_Base {
+
+	use Animation_Controls;
+
+	/*
+	|--------------------------------------------------------------------------
+	| Widget Identity
+	|--------------------------------------------------------------------------
+	*/
+
+	public function get_name(): string {
+		return 'testimonials-bento';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Testimonials (Bento)', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-testimonial';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-cards' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'testimonial', 'review', 'quote', 'grid', 'cards' ];
+	}
+
+	/*
+	|--------------------------------------------------------------------------
+	| Elementor Controls
+	|--------------------------------------------------------------------------
+	*/
+
+	protected function register_controls(): void {
+		$this->register_layout_section();
+		$this->register_header_section();
+		$this->register_alignment_section();
+		$this->register_testimonials_section();
+		$this->register_animation_controls( true, 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->end_controls_section();
+	}
+
+	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 sit amet', '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_subtitle',
+			[
+				'label'   => esc_html__( 'Show Subtitle', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'subtitle',
+			[
+				'label'     => esc_html__( 'Subtitle', '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. Ut enim ad minim veniam.', 'sociallane-elements' ),
+				'condition' => [ 'show_subtitle' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_alignment_section(): void {
+		$this->start_controls_section(
+			'section_alignment',
+			[
+				'label' => esc_html__( 'Alignment', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'title_alignment',
+			[
+				'label'   => esc_html__( 'Card Title Alignment', 'sociallane-elements' ),
+				'type'    => Controls_Manager::CHOOSE,
+				'default' => 'left',
+				'options' => [
+					'left'   => [
+						'title' => esc_html__( 'Left', 'sociallane-elements' ),
+						'icon'  => 'eicon-text-align-left',
+					],
+					'center' => [
+						'title' => esc_html__( 'Center', 'sociallane-elements' ),
+						'icon'  => 'eicon-text-align-center',
+					],
+					'right'  => [
+						'title' => esc_html__( 'Right', 'sociallane-elements' ),
+						'icon'  => 'eicon-text-align-right',
+					],
+				],
+			]
+		);
+
+		$this->add_control(
+			'content_alignment',
+			[
+				'label'   => esc_html__( 'Card Content Alignment', 'sociallane-elements' ),
+				'type'    => Controls_Manager::CHOOSE,
+				'default' => 'left',
+				'options' => [
+					'left'   => [
+						'title' => esc_html__( 'Left', 'sociallane-elements' ),
+						'icon'  => 'eicon-text-align-left',
+					],
+					'center' => [
+						'title' => esc_html__( 'Center', 'sociallane-elements' ),
+						'icon'  => 'eicon-text-align-center',
+					],
+					'right'  => [
+						'title' => esc_html__( 'Right', 'sociallane-elements' ),
+						'icon'  => 'eicon-text-align-right',
+					],
+				],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_testimonials_section(): void {
+		$this->start_controls_section(
+			'section_testimonials',
+			[
+				'label' => esc_html__( 'Testimonials', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$repeater = new Repeater();
+
+		$repeater->add_control(
+			'card_title',
+			[
+				'label'       => esc_html__( 'Card Title', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+				'label_block' => true,
+			]
+		);
+
+		$repeater->add_control(
+			'quote',
+			[
+				'label'   => esc_html__( 'Quote / Content', '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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.', 'sociallane-elements' ),
+			]
+		);
+
+		$repeater->add_control(
+			'avatar',
+			[
+				'label'   => esc_html__( 'Avatar', 'sociallane-elements' ),
+				'type'    => Controls_Manager::MEDIA,
+				'default' => [
+					'url' => \Elementor\Utils::get_placeholder_image_src(),
+				],
+			]
+		);
+
+		$repeater->add_control(
+			'avatar_alt',
+			[
+				'label'       => esc_html__( 'Avatar 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,
+			]
+		);
+
+		$repeater->add_control(
+			'name',
+			[
+				'label'       => esc_html__( 'Name', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Lorem Ipsum', 'sociallane-elements' ),
+				'label_block' => true,
+			]
+		);
+
+		$repeater->add_control(
+			'role',
+			[
+				'label'       => esc_html__( 'Title / Company', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+				'label_block' => true,
+			]
+		);
+
+		$placeholder_url = \Elementor\Utils::get_placeholder_image_src();
+		$this->add_control(
+			'testimonials',
+			[
+				'label'       => esc_html__( 'Testimonials', 'sociallane-elements' ),
+				'type'        => Controls_Manager::REPEATER,
+				'fields'      => $repeater->get_controls(),
+				'default'     => array_map(
+					function () use ( $placeholder_url ) {
+						return [
+							'card_title' => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+							'quote'      => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' ),
+							'avatar'     => [ 'url' => $placeholder_url ],
+							'avatar_alt' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+							'name'       => esc_html__( 'Lorem Ipsum', 'sociallane-elements' ),
+							'role'       => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+						];
+					},
+					range( 1, 9 )
+				),
+				'title_field' => '{{{ name }}}',
+			]
+		);
+
+		$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_testimonials_bento_view( $settings, $this->get_id() );
+
+		// 3. Render template
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

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

@@ -0,0 +1,108 @@
+<?php
+/**
+ * Data Preparation: Testimonials Grid
+ *
+ * Transforms raw Elementor settings into clean, template-ready data.
+ * ALL sanitization, defaults, and data transformation happens here.
+ *
+ * @package SocialLane_Elements
+ * @since   1.0.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Bento layout: explicit grid placement [col_start, col_end, row_start, row_end]
+ * Creates a packed bento with one large 2x2, one wide 2x1, no gaps.
+ *
+ * @return array<int, array{col: string, row: string}>
+ */
+function get_testimonials_bento_cells(): array {
+	return [
+		0 => [ 'col' => '1 / 3', 'row' => '1 / 3' ],   // Large featured (2x2)
+		1 => [ 'col' => '3',     'row' => '1' ],
+		2 => [ 'col' => '3',     'row' => '2' ],
+		3 => [ 'col' => '1',     'row' => '3' ],
+		4 => [ 'col' => '2',     'row' => '3' ],
+		5 => [ 'col' => '3',     'row' => '3' ],
+		6 => [ 'col' => '1 / 3', 'row' => '4' ],       // Wide (2x1)
+		7 => [ 'col' => '3',     'row' => '4' ],
+		8 => [ 'col' => '1 / 4', 'row' => '5' ],       // Full width bottom
+	];
+}
+
+/**
+ * Prepare view data for Testimonials Grid widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID for accessibility
+ * @return array Template-ready data
+ */
+function prepare_testimonials_grid_view( array $settings, string $widget_id ): array {
+	$fields = sociallane_extract_fields( $settings, [ 'headline' => [], 'subtitle' => [] ] );
+	$headline_tag = sociallane_validate_heading_tag( $settings, 'headline_tag', 'h2' );
+	$columns      = sociallane_validate_option( $settings['columns'] ?? '3', [ '2', '3', '4' ], '3' );
+	$grid_class   = sociallane_grid_cols( $columns, [
+		'2' => 'grid-cols-1 md:grid-cols-2',
+		'3' => 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+		'4' => 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+	] );
+
+	$title_align   = sociallane_align_classes( sociallane_validate_option( $settings['title_alignment'] ?? 'left', [ 'left', 'center', 'right' ], 'left' ) );
+	$content_align = sociallane_align_classes( sociallane_validate_option( $settings['content_alignment'] ?? 'left', [ 'left', 'center', 'right' ], 'left' ) );
+	$title_align_class    = $title_align['text'];
+	$content_align_class  = $content_align['text'];
+	$footer_justify_class = $content_align['justify'];
+
+	$placeholder_src = \Elementor\Utils::get_placeholder_image_src();
+	$testimonials    = sociallane_process_repeater( $settings['testimonials'] ?? [], function ( $item ) use ( $placeholder_src ) {
+		$avatar = sociallane_prepare_avatar( $item['avatar'] ?? [], $item['avatar_alt'] ?? '' );
+		if ( empty( $avatar['src'] ) ) {
+			$avatar['src'] = esc_url( $placeholder_src );
+		}
+		return [
+			'card_title' => esc_html( $item['card_title'] ?? '' ),
+			'quote'      => esc_html( $item['quote'] ?? '' ),
+			'avatar'     => $avatar,
+			'name'       => esc_html( $item['name'] ?? '' ),
+			'role'       => esc_html( $item['role'] ?? '' ),
+		];
+	} );
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
+
+	/*
+	|--------------------------------------------------------------------------
+	| Theme Classes (light + dark)
+	|--------------------------------------------------------------------------
+	|
+	| ALL color, background, border-color, and text-color Tailwind classes
+	| are defined HERE — never in templates. Templates only echo these
+	| pre-built strings via $view['classes'].
+	|
+	*/
+	$classes = [
+		'section'   => 'bg-neutral-100 dark:bg-zinc-900',
+		'headline'  => 'text-neutral-900 dark:text-white',
+		'subtitle'  => 'text-neutral-600 dark:text-neutral-300',
+		'card'      => 'bg-white dark:bg-neutral-800 rounded-xl border border-neutral-200 dark:border-neutral-700',
+		'title'     => 'text-neutral-900 dark:text-white',
+		'quote'     => 'text-neutral-600 dark:text-neutral-300',
+		'name'      => 'text-neutral-900 dark:text-white',
+		'role'      => 'text-neutral-500 dark:text-neutral-400',
+	];
+
+	return array_merge( $fields, [
+		'grid_class'           => $grid_class,
+		'headline_tag'         => $headline_tag,
+		'title_align_class'    => $title_align_class,
+		'content_align_class'  => $content_align_class,
+		'footer_justify_class' => $footer_justify_class,
+		'testimonials'         => $testimonials,
+		'classes'              => $classes,
+		'widget_id'            => $widget_id,
+		'animation'            => $animation,
+	] );
+}

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

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

package/packages/widgets/testimonials-grid/templates/partials/layout-bento.php

@@ -0,0 +1,36 @@
+<?php
+/**
+ * Partial: Testimonials Grid – bento layout
+ *
+ * Expects $view with testimonials (bento_col, bento_row), classes, alignment classes.
+ *
+ * @package SocialLane_Elements
+ * @since   1.0.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) ) {
+	return;
+}
+?>
+
+<div class="sl-testimonials-bento grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8" style="grid-auto-rows: minmax(180px, auto);"<?php echo ! empty( $stagger_attrs ) ? ' ' . $stagger_attrs : ''; ?>>
+	<?php foreach ( $view['testimonials'] as $testimonial ) : ?>
+		<?php
+		$card = $testimonial;
+		$card['classes'] = $view['classes'];
+		$card['title_align_class']    = $view['title_align_class'];
+		$card['content_align_class']  = $view['content_align_class'];
+		$card['footer_justify_class'] = $view['footer_justify_class'];
+		$card['bento_style'] = sprintf(
+			'grid-column: %s; grid-row: %s;',
+			esc_attr( $card['bento_col'] ?? 'auto' ),
+			esc_attr( $card['bento_row'] ?? 'auto' )
+		);
+		include __DIR__ . '/testimonial-card.php';
+		?>
+	<?php endforeach; ?>
+</div>

package/packages/widgets/testimonials-grid/templates/partials/layout-masonry.php

@@ -0,0 +1,74 @@
+<?php
+/**
+ * Partial: Testimonials Grid – masonry layout
+ *
+ * Three columns: left/right uniform cards; middle variable height.
+ * Expects $view with testimonials, classes, alignment classes.
+ *
+ * @package SocialLane_Elements
+ * @since   1.0.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) ) {
+	return;
+}
+
+$testimonials = $view['testimonials'];
+$left   = array_filter( $testimonials, fn( $_, $i ) => $i % 3 === 0, ARRAY_FILTER_USE_BOTH );
+$middle = array_filter( $testimonials, fn( $_, $i ) => $i % 3 === 1, ARRAY_FILTER_USE_BOTH );
+$right  = array_filter( $testimonials, fn( $_, $i ) => $i % 3 === 2, ARRAY_FILTER_USE_BOTH );
+$left   = array_values( $left );
+$middle = array_values( $middle );
+$right  = array_values( $right );
+?>
+
+<div class="sl-testimonials-masonry grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 items-start"<?php echo ! empty( $stagger_attrs ) ? ' ' . $stagger_attrs : ''; ?>>
+	<?php // Left column: uniform short cards ?>
+	<div class="sl-masonry-col sl-masonry-col-uniform flex flex-col gap-6">
+		<?php foreach ( $left as $testimonial ) : ?>
+			<?php
+			$card = $testimonial;
+			$card['classes'] = $view['classes'];
+			$card['title_align_class']    = $view['title_align_class'];
+			$card['content_align_class']  = $view['content_align_class'];
+			$card['footer_justify_class'] = $view['footer_justify_class'];
+			$card['masonry_compact'] = true;
+			include __DIR__ . '/testimonial-card.php';
+			?>
+		<?php endforeach; ?>
+	</div>
+
+	<?php // Middle column: first short, 2nd and 3rd tall (variable height) ?>
+	<div class="sl-masonry-col sl-masonry-col-variable flex flex-col gap-6">
+		<?php foreach ( $middle as $mi => $testimonial ) : ?>
+			<?php
+			$card = $testimonial;
+			$card['classes'] = $view['classes'];
+			$card['title_align_class']    = $view['title_align_class'];
+			$card['content_align_class']  = $view['content_align_class'];
+			$card['footer_justify_class'] = $view['footer_justify_class'];
+			$card['masonry_compact'] = ( $mi === 0 );
+			include __DIR__ . '/testimonial-card.php';
+			?>
+		<?php endforeach; ?>
+	</div>
+
+	<?php // Right column: uniform short cards ?>
+	<div class="sl-masonry-col sl-masonry-col-uniform flex flex-col gap-6">
+		<?php foreach ( $right as $testimonial ) : ?>
+			<?php
+			$card = $testimonial;
+			$card['classes'] = $view['classes'];
+			$card['title_align_class']    = $view['title_align_class'];
+			$card['content_align_class']  = $view['content_align_class'];
+			$card['footer_justify_class'] = $view['footer_justify_class'];
+			$card['masonry_compact'] = true;
+			include __DIR__ . '/testimonial-card.php';
+			?>
+		<?php endforeach; ?>
+	</div>
+</div>

package/packages/widgets/testimonials-grid/templates/partials/testimonial-card.php

@@ -0,0 +1,85 @@
+<?php
+/**
+ * Partial: Testimonials Grid – testimonial card
+ *
+ * Expects $card from loop: card_title, quote, avatar, name, role;
+ * classes, title_align_class, content_align_class, footer_justify_class.
+ * Optional: cell_class, bento_style, masonry_compact.
+ *
+ * @package SocialLane_Elements
+ * @since   1.0.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $card ) ) {
+	return;
+}
+
+$classes     = $card['classes'] ?? [];
+$title_align = $card['title_align_class'] ?? 'text-left';
+$content_align = $card['content_align_class'] ?? 'text-left';
+$footer_justify = $card['footer_justify_class'] ?? 'justify-start';
+$avatar = $card['avatar'] ?? [];
+
+$article_class = $classes['card'] ?? 'bg-white dark:bg-neutral-800 rounded-xl';
+$article_class .= ' p-6 md:p-8 flex flex-col';
+if ( ! empty( $card['cell_class'] ) ) {
+	$article_class .= ' ' . $card['cell_class'];
+}
+$article_style = $card['bento_style'] ?? '';
+?>
+
+<?php // ----- Testimonial card start ----- ?>
+
+<article class="<?php echo esc_attr( trim( $article_class ) ); ?>"<?php echo $article_style ? ' style="' . $article_style . '"' : ''; ?>>
+	<?php if ( ! empty( $card['card_title'] ) ) : ?>
+		<h3 class="<?php echo esc_attr( $classes['title'] ?? '' ); ?> <?php echo esc_attr( $title_align ); ?> text-lg md:text-xl font-bold font-heading leading-tight">
+			<?php echo $card['card_title']; ?>
+		</h3>
+	<?php endif; ?>
+
+	<?php if ( ! empty( $card['quote'] ) ) : ?>
+		<?php $quote_class = ( $classes['quote'] ?? '' ) . ' ' . $content_align . ' mt-3 text-sm md:text-base leading-relaxed'; ?>
+		<?php if ( ! empty( $card['masonry_compact'] ) ) : ?>
+			<?php $quote_class .= ' line-clamp-3'; ?>
+		<?php endif; ?>
+		<blockquote class="<?php echo esc_attr( trim( $quote_class ) ); ?>">
+			&quot;<?php echo $card['quote']; ?>&quot;
+		</blockquote>
+	<?php endif; ?>
+
+	<?php if ( ! empty( $avatar['src'] ) || ! empty( $card['name'] ) || ! empty( $card['role'] ) ) : ?>
+		<footer class="mt-6 flex items-center gap-4 <?php echo esc_attr( $footer_justify ); ?> <?php echo esc_attr( $content_align ); ?>">
+			<?php if ( ! empty( $avatar['src'] ) ) : ?>
+				<img
+					src="<?php echo esc_url( $avatar['src'] ); ?>"
+					alt="<?php echo esc_attr( $avatar['alt'] ?? '' ); ?>"
+					<?php if ( ! empty( $avatar['srcset'] ) ) : ?>srcset="<?php echo esc_attr( $avatar['srcset'] ); ?>"<?php endif; ?>
+					<?php if ( ! empty( $avatar['sizes'] ) ) : ?>sizes="<?php echo esc_attr( $avatar['sizes'] ); ?>"<?php endif; ?>
+					<?php if ( ! empty( $avatar['width'] ) ) : ?>width="<?php echo esc_attr( $avatar['width'] ); ?>"<?php endif; ?>
+					<?php if ( ! empty( $avatar['height'] ) ) : ?>height="<?php echo esc_attr( $avatar['height'] ); ?>"<?php endif; ?>
+					loading="<?php echo esc_attr( $avatar['loading'] ?? 'lazy' ); ?>"
+					decoding="async"
+					class="size-10 md:size-12 rounded-full object-cover shrink-0"
+				/>
+			<?php endif; ?>
+			<div class="min-w-0">
+				<?php if ( ! empty( $card['name'] ) ) : ?>
+					<p class="<?php echo esc_attr( $classes['name'] ?? '' ); ?> font-semibold text-sm md:text-base">
+						<?php echo $card['name']; ?>
+					</p>
+				<?php endif; ?>
+				<?php if ( ! empty( $card['role'] ) ) : ?>
+					<p class="<?php echo esc_attr( $classes['role'] ?? '' ); ?> text-xs md:text-sm mt-0.5">
+						<?php echo $card['role']; ?>
+					</p>
+				<?php endif; ?>
+			</div>
+		</footer>
+	<?php endif; ?>
+</article>
+
+<?php // ----- Testimonial card end ----- ?>