@sociallane/elements 1.0.0

package/packages/widgets/testimonial-quote/templates/wrapper.php

@@ -0,0 +1,66 @@
+<?php
+/**
+ * Template: Testimonial Quote Wrapper
+ *
+ * Blockquote and author attribution on patterned background.
+ * AVAILABLE DATA ($view): show_quote, show_author, quote, author_name, author_icon,
+ * content_width_class, 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 = 'testimonial-quote-' . $view['widget_id'];
+$has_quote   = $view['show_quote'] && $view['quote'] !== '';
+$has_author  = $view['show_author'] && ( $view['author_name'] !== '' || ! empty( $view['author_icon']['value'] ) );
+$section_classes = array_filter( [
+	$view['classes']['section'],
+	$view['classes']['pattern'],
+] );
+?>
+
+<?php // ========== TESTIMONIAL QUOTE START ========== ?>
+
+<section
+	class="<?php echo esc_attr( implode( ' ', $section_classes ) ); ?> py-16 md:py-24 lg:py-28"
+	<?php echo $section_attrs ? ' ' . $section_attrs : ''; ?>
+	<?php if ( $has_quote ) : ?>aria-labelledby="<?php echo esc_attr( $section_id ); ?>"<?php endif; ?>
+>
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="<?php echo esc_attr( $view['content_width_class'] ); ?> mx-auto text-left">
+			<?php if ( $has_quote ) : ?>
+				<blockquote id="<?php echo esc_attr( $section_id ); ?>" class="border-0 p-0 m-0">
+					<p class="<?php echo esc_attr( $view['classes']['quote'] ); ?> text-xl md:text-2xl lg:text-3xl font-semibold font-heading leading-snug"<?php echo ! empty( $headline_attrs ) ? ' ' . $headline_attrs : ''; ?>>
+						<span aria-hidden="true">"</span><?php echo $view['quote']; ?><span aria-hidden="true">"</span>
+					</p>
+					<?php if ( $has_author ) : ?>
+						<footer class="mt-6 md:mt-8 flex items-center gap-3">
+							<?php if ( ! empty( $view['author_icon']['value'] ) ) : ?>
+								<span class="<?php echo esc_attr( $view['classes']['author_name'] ); ?> flex items-center justify-center shrink-0 [&_.e-icon]:w-6 [&_.e-icon]:h-6 [&_.e-icon]:text-current" aria-hidden="true">
+									<?php \Elementor\Icons_Manager::render_icon( $view['author_icon'], [ 'aria-hidden' => 'true', 'class' => 'w-6 h-6' ] ); ?>
+								</span>
+							<?php endif; ?>
+							<?php if ( $view['author_name'] !== '' ) : ?>
+								<cite class="<?php echo esc_attr( $view['classes']['author_name'] ); ?> italic font-medium text-lg md:text-xl">
+									<?php echo $view['author_name']; ?>
+								</cite>
+							<?php endif; ?>
+						</footer>
+					<?php endif; ?>
+				</blockquote>
+			<?php endif; ?>
+		</div>
+	</div>
+</section>
+
+<?php // ========== TESTIMONIAL QUOTE END ========== ?>

package/packages/widgets/testimonial-quote/testimonial-quote.php

@@ -0,0 +1,157 @@
+<?php
+/**
+ * Widget: Testimonial Quote
+ *
+ * A single testimonial block: prominent quote and attributed author (icon + name)
+ * on a light patterned background. Left-aligned, optional pattern.
+ *
+ * @package SocialLane_Elements
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Testimonial Quote Widget
+ */
+class Testimonial_Quote extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'testimonial-quote';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Testimonial Quote', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-blockquote';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-content' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'testimonial', 'quote', 'blockquote', 'author', 'social proof' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_content_section();
+		$this->register_layout_section();
+		$this->register_animation_controls( true );
+	}
+
+	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_quote',
+			[
+				'label'   => esc_html__( 'Show quote', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'quote',
+			[
+				'label'       => esc_html__( 'Quote', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXTAREA,
+				'default'     => esc_html__( "The team at Studio went above and beyond with our onboarding, even finding a way to access the user's microphone without triggering one of those annoying permission dialogs.", 'sociallane-elements' ),
+				'rows'        => 5,
+				'condition'   => [ 'show_quote' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'show_author',
+			[
+				'label'   => esc_html__( 'Show author', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$this->add_control(
+			'author_icon',
+			[
+				'label'     => esc_html__( 'Author icon', 'sociallane-elements' ),
+				'type'      => Controls_Manager::ICONS,
+				'default'   => [
+					'value'   => 'eicon-heart',
+					'library' => 'elementor',
+				],
+				'condition' => [ 'show_author' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'author_name',
+			[
+				'label'       => esc_html__( 'Author name', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Phobia', 'sociallane-elements' ),
+				'condition'   => [ 'show_author' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'show_pattern',
+			[
+				'label'   => esc_html__( 'Show background pattern', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$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(
+			'content_width',
+			[
+				'label'   => esc_html__( 'Content width', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'medium',
+				'options' => [
+					'narrow' => esc_html__( 'Narrow', 'sociallane-elements' ),
+					'medium'  => esc_html__( 'Medium', 'sociallane-elements' ),
+					'wide'    => esc_html__( 'Wide', 'sociallane-elements' ),
+					'full'    => esc_html__( 'Full', 'sociallane-elements' ),
+				],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_testimonial_quote_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

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

@@ -0,0 +1,110 @@
+<?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_bento_view( array $settings, string $widget_id ): array {
+	$fields       = sociallane_extract_fields( $settings, [ 'headline' => [], 'subtitle' => [] ] );
+	$headline_tag = sociallane_validate_heading_tag( $settings, 'headline_tag', 'h2' );
+
+	$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'] ?? '' ),
+		];
+	} );
+
+	// Bento: assign explicit grid placement to each testimonial
+	$bento_cells = get_testimonials_bento_cells();
+	foreach ( $testimonials as $i => &$t ) {
+		$cell = $bento_cells[ $i ] ?? [ 'col' => 'auto', 'row' => 'auto' ];
+		$t['bento_col'] = $cell['col'];
+		$t['bento_row'] = $cell['row'];
+	}
+	unset( $t );
+
+	$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, [
+		'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-bento/package.json

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

package/packages/widgets/testimonials-bento/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-bento/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-bento/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 ----- ?>

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

@@ -0,0 +1,63 @@
+<?php
+/**
+ * Template: Testimonials Grid Wrapper
+ *
+ * AVAILABLE DATA ($view):
+ * - layout, grid_class, columns_class
+ * - show_headline, show_subtitle, headline, headline_tag, subtitle
+ * - title_align_class, content_align_class, footer_justify_class
+ * - testimonials (array), classes (section, headline, subtitle, card, title, quote, name, role), widget_id
+ *
+ * @package SocialLane_Elements
+ * @since   1.0.0
+ */
+
+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 = 'testimonials-' . $view['widget_id'];
+$has_heading = ( $view['show_headline'] && ! empty( $view['headline'] ) ) || ( $view['show_subtitle'] && ! empty( $view['subtitle'] ) );
+?>
+
+<?php // ========== TESTIMONIALS GRID 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 ( $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 if ( $has_heading ) : ?>
+			<header class="text-center max-w-3xl mx-auto mb-12 md:mb-16" id="<?php echo esc_attr( $section_id ); ?>">
+				<?php if ( $view['show_headline'] && ! empty( $view['headline'] ) ) : ?>
+					<<?php echo $view['headline_tag']; ?>
+						class="<?php echo esc_attr( $view['classes']['headline'] ); ?> text-3xl sm:text-4xl font-bold font-heading leading-tight"
+					>
+						<?php echo $view['headline']; ?>
+					</<?php echo $view['headline_tag']; ?>>
+				<?php endif; ?>
+
+				<?php if ( $view['show_subtitle'] && ! empty( $view['subtitle'] ) ) : ?>
+					<p class="<?php echo esc_attr( $view['classes']['subtitle'] ); ?> mt-4 text-base md:text-lg leading-relaxed">
+						<?php echo $view['subtitle']; ?>
+					</p>
+				<?php endif; ?>
+			</header>
+		<?php endif; ?>
+
+		<?php if ( ! empty( $view['testimonials'] ) ) : ?>
+			<?php $stagger_attrs = sociallane_stagger_attrs( $anim ); ?>
+			<?php include __DIR__ . '/partials/layout-bento.php'; ?>
+		<?php endif; ?>
+	</div>
+</section>
+
+<?php // ========== TESTIMONIALS GRID END ========== ?>