@sociallane/elements 1.0.0

package/packages/widgets/bento-grid-5/templates/partials/two-row-overview.php

@@ -0,0 +1,67 @@
+<?php
+/**
+ * Two Row Bento – Overview cell (tabs, project, stats, performance)
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$data = $view['two_row']['overview'] ?? [];
+$cls  = $view['classes'] ?? [];
+$tabs = $data['tabs'] ?? [];
+?>
+
+<article class="<?php echo esc_attr( $cls['card'] ); ?> p-0 overflow-hidden h-full flex flex-col">
+	<?php if ( ! empty( $tabs ) ) : ?>
+		<div class="flex border-b border-neutral-200 dark:border-neutral-600/50 overflow-x-auto">
+			<?php foreach ( $tabs as $i => $tab ) : ?>
+				<button type="button" class="px-4 py-3 text-sm font-medium whitespace-nowrap border-b-2 transition-colors <?php echo $i === 0 ? 'border-primary dark:border-primary-light text-primary dark:text-primary-light' : 'border-transparent ' . esc_attr( $cls['card_desc'] ); ?>">
+					<?php echo esc_html( $tab ); ?>
+				</button>
+			<?php endforeach; ?>
+		</div>
+	<?php endif; ?>
+	<div class="p-5 md:p-6 flex-1 flex flex-col">
+		<?php if ( ( $data['project'] ?? '' ) !== '' ) : ?>
+			<div class="flex items-center gap-2 mb-4">
+				<span class="w-2 h-2 rounded-full bg-green-500 shrink-0" aria-hidden="true"></span>
+				<span class="<?php echo esc_attr( $cls['card_title'] ); ?> text-sm font-semibold"><?php echo $data['project']; ?></span>
+			</div>
+			<?php if ( ( $data['project_meta'] ?? '' ) !== '' ) : ?>
+				<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-6"><?php echo $data['project_meta']; ?></p>
+			<?php endif; ?>
+		<?php endif; ?>
+
+		<div class="grid grid-cols-3 gap-4 mb-6">
+			<?php if ( ( $data['stat1_label'] ?? '' ) !== '' ) : ?>
+				<div>
+					<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-0.5"><?php echo $data['stat1_label']; ?></p>
+					<p class="<?php echo esc_attr( $cls['card_title'] ); ?> text-2xl font-bold"><?php echo $data['stat1_value']; ?></p>
+				</div>
+			<?php endif; ?>
+			<?php if ( ( $data['stat2_label'] ?? '' ) !== '' ) : ?>
+				<div>
+					<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-0.5"><?php echo $data['stat2_label']; ?></p>
+					<p class="<?php echo esc_attr( $cls['card_title'] ); ?> text-2xl font-bold"><?php echo $data['stat2_value']; ?> <span class="text-sm font-normal <?php echo esc_attr( $cls['card_desc'] ); ?>"><?php echo $data['stat2_suffix'] ?? ''; ?></span></p>
+				</div>
+			<?php endif; ?>
+			<?php if ( ( $data['stat3_label'] ?? '' ) !== '' ) : ?>
+				<div>
+					<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-0.5"><?php echo $data['stat3_label']; ?></p>
+					<p class="<?php echo esc_attr( $cls['card_title'] ); ?> text-2xl font-bold"><?php echo $data['stat3_value']; ?></p>
+				</div>
+			<?php endif; ?>
+		</div>
+
+		<?php if ( ( $data['perf_title'] ?? '' ) !== '' || ( $data['perf_desc'] ?? '' ) !== '' ) : ?>
+			<div class="mt-auto">
+				<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-1"><?php echo esc_html__( 'Performance', 'sociallane-elements' ); ?></p>
+				<h4 class="<?php echo esc_attr( $cls['card_title'] ); ?> text-base font-bold mb-2"><?php echo $data['perf_title']; ?></h4>
+				<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-sm"><?php echo $data['perf_desc']; ?></p>
+			</div>
+		<?php endif; ?>
+	</div>
+</article>

package/packages/widgets/bento-grid-5/templates/partials/two-row-releases.php

@@ -0,0 +1,29 @@
+<?php
+/**
+ * Two Row Bento – Releases cell
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$data    = $view['two_row']['releases'] ?? [];
+$cls     = $view['classes'] ?? [];
+$eyebrow = $data['eyebrow'] ?? '';
+$title   = $data['title'] ?? '';
+$desc    = $data['desc'] ?? '';
+?>
+
+<article class="<?php echo esc_attr( $cls['card'] ); ?> p-5 md:p-6 h-full flex flex-col">
+	<?php if ( $eyebrow !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-1"><?php echo $eyebrow; ?></p>
+	<?php endif; ?>
+	<?php if ( $title !== '' ) : ?>
+		<h3 class="<?php echo esc_attr( $cls['card_title'] ); ?> text-lg font-bold mb-3"><?php echo $title; ?></h3>
+	<?php endif; ?>
+	<?php if ( $desc !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-sm leading-relaxed mt-auto"><?php echo $desc; ?></p>
+	<?php endif; ?>
+</article>

package/packages/widgets/bento-grid-5/templates/partials/two-row-security.php

@@ -0,0 +1,44 @@
+<?php
+/**
+ * Two Row Bento – Security cell (eyebrow, title, description, avatars)
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$data    = $view['two_row']['security'] ?? [];
+$cls     = $view['classes'] ?? [];
+$eyebrow = $data['eyebrow'] ?? '';
+$title   = $data['title'] ?? '';
+$desc    = $data['desc'] ?? '';
+$avatar1 = $data['avatar1'] ?? null;
+$avatar2 = $data['avatar2'] ?? null;
+?>
+
+<article class="<?php echo esc_attr( $cls['card'] ); ?> p-5 md:p-6 h-full flex flex-col sl-bento-security bg-neutral-50/80 dark:bg-neutral-800/50">
+	<?php if ( $eyebrow !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-1"><?php echo $eyebrow; ?></p>
+	<?php endif; ?>
+	<?php if ( $title !== '' ) : ?>
+		<h3 class="<?php echo esc_attr( $cls['card_title'] ); ?> text-lg font-bold mb-3"><?php echo $title; ?></h3>
+	<?php endif; ?>
+	<?php if ( $desc !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-sm leading-relaxed mb-4"><?php echo $desc; ?></p>
+	<?php endif; ?>
+	<?php if ( ( $avatar1 && ! empty( $avatar1['url'] ) ) || ( $avatar2 && ! empty( $avatar2['url'] ) ) ) : ?>
+		<div class="mt-auto flex items-center -space-x-2">
+			<?php if ( $avatar1 && ! empty( $avatar1['url'] ) ) : ?>
+				<img src="<?php echo esc_url( $avatar1['url'] ); ?>" alt="" class="w-10 h-10 rounded-full border-2 border-white dark:border-[#21283B] object-cover" loading="lazy" width="40" height="40" />
+			<?php endif; ?>
+			<?php if ( $avatar2 && ! empty( $avatar2['url'] ) ) : ?>
+				<span class="relative inline-block">
+					<img src="<?php echo esc_url( $avatar2['url'] ); ?>" alt="" class="w-10 h-10 rounded-full border-2 border-white dark:border-[#21283B] object-cover" loading="lazy" width="40" height="40" />
+					<span class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-white dark:border-[#21283B]" aria-hidden="true"></span>
+				</span>
+			<?php endif; ?>
+		</div>
+	<?php endif; ?>
+</article>

package/packages/widgets/bento-grid-5/templates/wrapper.php

@@ -0,0 +1,65 @@
+<?php
+/**
+ * Template: Bento Grid Wrapper
+ *
+ * AVAILABLE DATA ($view): show_eyebrow, show_headline, eyebrow, headline, headline_tag,
+ * cell1, cell2, cell3, cell4, 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 = 'bento-grid-' . $view['widget_id'];
+$has_heading = ( $view['show_eyebrow'] && ! empty( $view['eyebrow'] ) ) || ( $view['show_headline'] && ! empty( $view['headline'] ) );
+$header = [
+	'headline_attrs'    => $headline_attrs,
+	'id'              => $section_id,
+	'use_wrapper'     => true,
+	'alignment'       => 'center',
+	'block_class'     => 'max-w-3xl mx-auto',
+	'margin_bottom'   => 'mb-12 md:mb-16',
+	'show_eyebrow'    => $view['show_eyebrow'] && ! empty( $view['eyebrow'] ),
+	'eyebrow'         => $view['eyebrow'] ?? '',
+	'eyebrow_class'   => $view['classes']['eyebrow'] ?? '',
+	'eyebrow_extras'  => 'mb-2',
+	'show_headline'   => $view['show_headline'] && ! empty( $view['headline'] ),
+	'headline'        => $view['headline'] ?? '',
+	'headline_tag'    => $view['headline_tag'] ?? 'h2',
+	'headline_class'  => $view['classes']['headline'] ?? '',
+	'headline_extras' => 'text-3xl sm:text-4xl md:text-5xl font-bold font-heading leading-tight',
+];
+$elements_path = SOCIALLANE_ELEMENTS_PATH . 'elements';
+?>
+
+<?php // ========== BENTO GRID START ========== ?>
+
+<section
+	class="<?php echo esc_attr( $view['classes']['section'] ); ?> py-16 md:py-20 lg:py-24"
+	<?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 ) : ?>
+			<?php include $elements_path . '/section-header/templates/render.php'; ?>
+		<?php endif; ?>
+
+		<?php
+		$stagger_attrs = sociallane_stagger_attrs( $anim );
+		$partial_path = __DIR__ . '/partials/two-row-grid.php';
+		if ( file_exists( $partial_path ) ) {
+			include $partial_path;
+		}
+		?>
+	</div>
+</section>
+
+<?php // ========== BENTO GRID END ========== ?>

package/packages/widgets/bento-grid-6/bento-grid-6.php

@@ -0,0 +1,223 @@
+<?php
+/**
+ * Widget: Bento Grid
+ *
+ * A bento-style grid: header plus three-column layout with left full-height card,
+ * middle column split into two cards, and right full-height card. Supports
+ * metric, icons, code snippet, and image visuals per cell.
+ *
+ * @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;
+}
+
+/**
+ * Bento Grid Widget
+ */
+class Bento_Grid_6 extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'bento-grid-6';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Bento Grid (Two Column Second Row)', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-gallery-masonry';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-content' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'bento', 'grid', 'cards', 'features', 'dashboard' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_header_section();
+		$this->register_two_column_second_row_sections();
+		$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_eyebrow',
+			[
+				'label'   => esc_html__( 'Show Eyebrow', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+
+		$this->add_control(
+			'eyebrow',
+			[
+				'label'       => esc_html__( 'Eyebrow', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Deploy faster', 'sociallane-elements' ),
+				'placeholder' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'condition'   => [ 'show_eyebrow' => 'yes' ],
+			]
+		);
+
+		$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__( 'Everything you need to deploy your app', '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->end_controls_section();
+	}
+
+	private function register_two_column_second_row_sections(): void {
+		$this->start_controls_section(
+			'section_tcsr_row1_left',
+			[
+				'label'     => esc_html__( 'Grid row 1 left', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+			]
+		);
+		$this->add_control( 'tcsr_search_placeholder', [ 'label' => esc_html__( 'Search placeholder', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Search something...' ] );
+		$this->add_control( 'tcsr_tabs', [ 'label' => esc_html__( 'Tab labels', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Overview, Activity, Settings, Collaborators, Notifications' ] );
+		$this->add_control( 'tcsr_project', [ 'label' => esc_html__( 'Project label', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Planetaria / mobile-api' ] );
+		$this->add_control( 'tcsr_project_meta', [ 'label' => esc_html__( 'Project meta', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Deploys from GitHub via main branch' ] );
+		$this->add_control( 'tcsr_stat1_label', [ 'label' => esc_html__( 'Stat 1 label', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Number of deploys' ] );
+		$this->add_control( 'tcsr_stat1_value', [ 'label' => esc_html__( 'Stat 1 value', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => '405' ] );
+		$this->add_control( 'tcsr_stat2_label', [ 'label' => esc_html__( 'Stat 2 label', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Avg deploy time' ] );
+		$this->add_control( 'tcsr_stat2_value', [ 'label' => esc_html__( 'Stat 2 value', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => '3.65' ] );
+		$this->add_control( 'tcsr_stat2_suffix', [ 'label' => esc_html__( 'Stat 2 suffix', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'mins' ] );
+		$this->add_control( 'tcsr_perf_title', [ 'label' => esc_html__( 'Performance title', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Lightning-fast builds' ] );
+		$this->add_control( 'tcsr_perf_desc', [ 'label' => esc_html__( 'Performance description', 'sociallane-elements' ), 'type' => Controls_Manager::TEXTAREA, 'default' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' ] );
+		$this->end_controls_section();
+
+		$activity = new Repeater();
+		$activity->add_control( 'name', [ 'label' => esc_html__( 'Name', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Cosetta Dusett' ] );
+		$activity->add_control( 'time', [ 'label' => esc_html__( 'Time', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => '30s' ] );
+		$activity->add_control( 'action', [ 'label' => esc_html__( 'Action', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Pushed to ios-app' ] );
+		$activity->add_control( 'badge', [ 'label' => esc_html__( 'Badge', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => '' ] );
+		$activity->add_control( 'avatar', [ 'label' => esc_html__( 'Avatar', 'sociallane-elements' ), 'type' => Controls_Manager::MEDIA ] );
+
+		$this->start_controls_section(
+			'section_tcsr_row1_right',
+			[
+				'label'     => esc_html__( 'Grid row 1 right', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+			]
+		);
+		$this->add_control( 'tcsr_activity_title', [ 'label' => esc_html__( 'Activity title', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Activity feed' ] );
+		$this->add_control( 'tcsr_sort_by', [ 'label' => esc_html__( 'Sort by label', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Sort by' ] );
+		$this->add_control( 'tcsr_view_all', [ 'label' => esc_html__( 'View all text', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'View all' ] );
+		$this->add_control( 'tcsr_view_all_url', [ 'label' => esc_html__( 'View all URL', 'sociallane-elements' ), 'type' => Controls_Manager::URL ] );
+		$this->add_control( 'tcsr_activities', [ 'label' => esc_html__( 'Activities', 'sociallane-elements' ), 'type' => Controls_Manager::REPEATER, 'fields' => $activity->get_controls(), 'default' => [
+			[ 'name' => 'Cosetta Dusett', 'time' => '30s', 'action' => 'Pushed to ios-app', 'badge' => 'Preview' ],
+			[ 'name' => 'Pammi Kakani', 'time' => '3m', 'action' => 'Deployed production', 'badge' => 'Production' ],
+			[ 'name' => 'Kora Grisostomo', 'time' => '4m', 'action' => 'Pushed to main', 'badge' => '' ],
+		], 'title_field' => '{{{ name }}}' ] );
+		$this->add_control( 'tcsr_releases_eyebrow', [ 'label' => esc_html__( 'Releases eyebrow', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Releases' ] );
+		$this->add_control( 'tcsr_releases_title', [ 'label' => esc_html__( 'Releases title', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Push to deploy' ] );
+		$this->add_control( 'tcsr_releases_desc', [ 'label' => esc_html__( 'Releases description', 'sociallane-elements' ), 'type' => Controls_Manager::TEXTAREA, 'default' => 'Curabitur auctor nisl vitae magna.' ] );
+		$this->end_controls_section();
+
+		$this->start_controls_section(
+			'section_tcsr_row2_left',
+			[
+				'label'     => esc_html__( 'Grid row 2 left', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+			]
+		);
+		$this->add_control( 'tcsr_row2_left_eyebrow', [ 'label' => esc_html__( 'Eyebrow', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Speed' ] );
+		$this->add_control( 'tcsr_row2_left_title', [ 'label' => esc_html__( 'Title', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Built for power users' ] );
+		$this->add_control( 'tcsr_row2_left_desc', [ 'label' => esc_html__( 'Description', 'sociallane-elements' ), 'type' => Controls_Manager::TEXTAREA, 'default' => 'Sed congue eros et magna scelerisque.' ] );
+		$this->add_control( 'tcsr_row2_left_image', [ 'label' => esc_html__( 'Image', 'sociallane-elements' ), 'type' => Controls_Manager::MEDIA ] );
+		$this->add_control( 'tcsr_row2_left_image_alt', [ 'label' => esc_html__( 'Image alt', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT ] );
+		$this->end_controls_section();
+
+		$tcsr_icons = new Repeater();
+		$tcsr_icons->add_control( 'icon', [ 'label' => esc_html__( 'Icon', 'sociallane-elements' ), 'type' => Controls_Manager::ICONS, 'default' => [ 'value' => 'eicon-envelope', 'library' => 'elementor' ] ] );
+		$tcsr_icons->add_control( 'label', [ 'label' => esc_html__( 'Label', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Gmail' ] );
+
+		$this->start_controls_section(
+			'section_tcsr_row2_center',
+			[
+				'label'     => esc_html__( 'Grid row 2 center', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+			]
+		);
+		$this->add_control( 'tcsr_row2_center_eyebrow', [ 'label' => esc_html__( 'Eyebrow', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Integrations' ] );
+		$this->add_control( 'tcsr_row2_center_title', [ 'label' => esc_html__( 'Title', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Connect your favorite tools' ] );
+		$this->add_control( 'tcsr_row2_center_desc', [ 'label' => esc_html__( 'Description', 'sociallane-elements' ), 'type' => Controls_Manager::TEXTAREA, 'default' => 'Maecenas at augue ut lectus.' ] );
+		$this->add_control( 'tcsr_row2_center_items', [ 'label' => esc_html__( 'Items', 'sociallane-elements' ), 'type' => Controls_Manager::REPEATER, 'fields' => $tcsr_icons->get_controls(), 'default' => [
+			[ 'label' => 'Gmail' ], [ 'label' => 'Calendar' ], [ 'label' => 'Slack' ], [ 'label' => 'Teams' ], [ 'label' => 'Discord' ], [ 'label' => 'Adobe' ],
+		], 'title_field' => '{{{ label }}}' ] );
+		$this->end_controls_section();
+
+		$this->start_controls_section(
+			'section_tcsr_row2_right',
+			[
+				'label'     => esc_html__( 'Grid row 2 right', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+			]
+		);
+		$this->add_control( 'tcsr_row2_right_eyebrow', [ 'label' => esc_html__( 'Eyebrow', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Network' ] );
+		$this->add_control( 'tcsr_row2_right_title', [ 'label' => esc_html__( 'Title', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Globally distributed CDN' ] );
+		$this->add_control( 'tcsr_row2_right_desc', [ 'label' => esc_html__( 'Description', 'sociallane-elements' ), 'type' => Controls_Manager::TEXTAREA, 'default' => 'Aenean vulputate eleifend tellus.' ] );
+		$this->add_control( 'tcsr_row2_right_image', [ 'label' => esc_html__( 'Image', 'sociallane-elements' ), 'type' => Controls_Manager::MEDIA ] );
+		$this->add_control( 'tcsr_row2_right_image_alt', [ 'label' => esc_html__( 'Image alt', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT ] );
+		$this->end_controls_section();
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_bento_grid_6_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}
+

package/packages/widgets/bento-grid-6/data/view.php

@@ -0,0 +1,158 @@
+<?php
+/**
+ * Data Preparation: Bento Grid
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Registered bento grid layouts (single source of truth).
+ * Key = layout value in settings, label = editor dropdown, partial = template filename in partials/.
+ *
+ * @return array<string, array{label: string, partial: string}>
+ */
+function get_bento_grid_layouts(): array {
+	return [
+		'default'                  => [
+			'label'   => esc_html__( 'Default (4 cells)', 'sociallane-elements' ),
+			'partial' => 'default-grid.php',
+		],
+		'two-row'                  => [
+			'label'   => esc_html__( 'Two Row Bento Grid', 'sociallane-elements' ),
+			'partial' => 'two-row-grid.php',
+		],
+		'two-column-second-row'    => [
+			'label'   => esc_html__( 'Grid two column second row', 'sociallane-elements' ),
+			'partial' => 'two-column-second-row-grid.php',
+		],
+	];
+}
+
+/**
+ * Prepare view data for Bento Grid widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID
+ * @return array Template-ready data
+ */
+function prepare_bento_grid_6_view( array $settings, string $widget_id ): array {
+	$layout       = 'two-column-second-row';
+	$fields       = sociallane_extract_fields( $settings, [ 'eyebrow' => [], 'headline' => [] ] );
+	$headline_tag = sociallane_validate_heading_tag( $settings );
+
+	$two_column_second_row = prepare_bento_grid_two_column_second_row_data( $settings );
+
+	$animation = sociallane_animation_view_data( $settings, [ 'headline' => true, 'stagger' => true ] );
+
+	$classes = [
+		'section'     => 'bg-neutral-100 dark:bg-zinc-900',
+		'eyebrow'     => 'text-zinc-900 dark:text-neutral-200',
+		'headline'    => 'text-zinc-900 dark:text-neutral-200',
+		'card'        => 'bg-white dark:bg-zinc-900 rounded-2xl border border-neutral-200 dark:border-neutral-700 dark:shadow-none',
+		'card_title'  => 'text-zinc-900 dark:text-neutral-200 font-bold',
+		'card_desc'   => 'text-zinc-900 dark:text-neutral-200',
+		'metric_val'  => 'text-zinc-900 dark:text-neutral-200',
+		'metric_change' => 'text-primary dark:text-neutral-200',
+		'code_bg'     => 'bg-zinc-900 dark:bg-zinc-900 text-neutral-200',
+		'badge'       => 'bg-primary/20 dark:bg-primary-light/20 text-primary dark:text-primary-light text-xs font-medium px-2.5 py-1 rounded-full',
+	];
+
+	return array_merge( $fields, [
+		'layout'                => $layout,
+		'headline_tag'          => $headline_tag,
+		'two_column_second_row' => $two_column_second_row,
+		'classes'               => $classes,
+		'widget_id'             => $widget_id,
+		'animation'             => $animation,
+	] );
+}
+
+/**
+ * Prepare two-column-second-row layout data (row 1: 2 cols, row 2: 3 cols)
+ *
+ * @param array $settings Elementor settings
+ * @return array
+ */
+function prepare_bento_grid_two_column_second_row_data( array $settings ): array {
+	$tabs_str = $settings['tcsr_tabs'] ?? 'Overview, Activity, Settings, Collaborators, Notifications';
+	$tabs     = array_map( 'trim', explode( ',', $tabs_str ) );
+
+	$activities_raw = $settings['tcsr_activities'] ?? [];
+	$activities     = [];
+	foreach ( $activities_raw as $item ) {
+		$activities[] = [
+			'name'   => esc_html( $item['name'] ?? '' ),
+			'time'   => esc_html( $item['time'] ?? '' ),
+			'action' => esc_html( $item['action'] ?? '' ),
+			'badge'  => esc_html( $item['badge'] ?? '' ),
+			'avatar' => $item['avatar'] ?? null,
+		];
+	}
+
+	$center_items_raw = $settings['tcsr_row2_center_items'] ?? [];
+	$center_items     = [];
+	foreach ( $center_items_raw as $item ) {
+		$center_items[] = [
+			'icon'  => $item['icon'] ?? null,
+			'label' => esc_html( $item['label'] ?? '' ),
+		];
+	}
+
+	$view_all_link  = sociallane_prepare_link_attrs( $settings['tcsr_view_all_url'] ?? [] );
+	$raw_view_url   = trim( $settings['tcsr_view_all_url']['url'] ?? '' );
+	$view_all_attrs = $raw_view_url !== ''
+		? 'href="' . $view_all_link['url'] . '"' . ( $view_all_link['attrs'] ? ' ' . $view_all_link['attrs'] : '' )
+		: '';
+
+	return [
+		'row1_left'  => [
+			'search_placeholder' => esc_html( $settings['tcsr_search_placeholder'] ?? '' ),
+			'tabs'                => $tabs,
+			'project'             => esc_html( $settings['tcsr_project'] ?? '' ),
+			'project_meta'        => esc_html( $settings['tcsr_project_meta'] ?? '' ),
+			'stat1_label'         => esc_html( $settings['tcsr_stat1_label'] ?? '' ),
+			'stat1_value'         => esc_html( $settings['tcsr_stat1_value'] ?? '' ),
+			'stat2_label'         => esc_html( $settings['tcsr_stat2_label'] ?? '' ),
+			'stat2_value'         => esc_html( $settings['tcsr_stat2_value'] ?? '' ),
+			'stat2_suffix'        => esc_html( $settings['tcsr_stat2_suffix'] ?? '' ),
+			'perf_title'          => esc_html( $settings['tcsr_perf_title'] ?? '' ),
+			'perf_desc'           => esc_html( $settings['tcsr_perf_desc'] ?? '' ),
+		],
+		'row1_right' => [
+			'activity_title' => esc_html( $settings['tcsr_activity_title'] ?? '' ),
+			'sort_by'        => esc_html( $settings['tcsr_sort_by'] ?? '' ),
+			'view_all'       => esc_html( $settings['tcsr_view_all'] ?? '' ),
+			'view_all_attrs' => $view_all_attrs,
+			'activities'     => $activities,
+			'releases_eyebrow' => esc_html( $settings['tcsr_releases_eyebrow'] ?? '' ),
+			'releases_title'   => esc_html( $settings['tcsr_releases_title'] ?? '' ),
+			'releases_desc'    => esc_html( $settings['tcsr_releases_desc'] ?? '' ),
+		],
+		'row2_left'   => [
+			'eyebrow' => esc_html( $settings['tcsr_row2_left_eyebrow'] ?? '' ),
+			'title'   => esc_html( $settings['tcsr_row2_left_title'] ?? '' ),
+			'desc'    => esc_html( $settings['tcsr_row2_left_desc'] ?? '' ),
+			'image'   => $settings['tcsr_row2_left_image'] ?? null,
+			'image_alt' => esc_attr( $settings['tcsr_row2_left_image_alt'] ?? '' ),
+		],
+		'row2_center' => [
+			'eyebrow' => esc_html( $settings['tcsr_row2_center_eyebrow'] ?? '' ),
+			'title'   => esc_html( $settings['tcsr_row2_center_title'] ?? '' ),
+			'desc'    => esc_html( $settings['tcsr_row2_center_desc'] ?? '' ),
+			'items'   => $center_items,
+		],
+		'row2_right'  => [
+			'eyebrow'   => esc_html( $settings['tcsr_row2_right_eyebrow'] ?? '' ),
+			'title'     => esc_html( $settings['tcsr_row2_right_title'] ?? '' ),
+			'desc'      => esc_html( $settings['tcsr_row2_right_desc'] ?? '' ),
+			'image'     => sociallane_prepare_image_data(
+				$settings['tcsr_row2_right_image'] ?? [],
+				[ 'alt' => $settings['tcsr_row2_right_image_alt'] ?? '', 'loading' => 'lazy' ]
+			),
+		],
+	];
+}

package/packages/widgets/bento-grid-6/package.json

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

package/packages/widgets/bento-grid-6/templates/partials/cell1.php

@@ -0,0 +1,45 @@
+<?php
+/**
+ * Bento Grid – Cell 1 (left, full height)
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$cell   = $view['cell1'] ?? [];
+$cls    = $view['classes'] ?? [];
+$title  = $cell['title'] ?? '';
+$desc   = $cell['description'] ?? '';
+$visual = $cell['visual'] ?? 'none';
+$image  = $cell['image'] ?? null;
+$button = $cell['button'] ?? null;
+$elements_path = dirname( __DIR__, 4 ) . '/elements';
+?>
+
+<article class="<?php echo esc_attr( $cls['card'] ); ?> p-5 md:p-6 h-full flex flex-col">
+	<?php if ( $title !== '' ) : ?>
+		<h3 class="<?php echo esc_attr( $cls['card_title'] ); ?> text-lg md:text-xl mb-2"><?php echo $title; ?></h3>
+	<?php endif; ?>
+	<?php if ( $desc !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-sm md:text-base leading-relaxed mb-4"><?php echo $desc; ?></p>
+	<?php endif; ?>
+	<?php if ( $visual === 'image' ) : ?>
+		<?php if ( $image && ! empty( $image['src'] ) ) : ?>
+			<div class="mt-auto rounded-xl overflow-hidden bg-neutral-200 dark:bg-neutral-700 min-h-[200px] flex items-center justify-center">
+				<?php $image['class'] = 'w-full h-auto object-cover'; include $elements_path . '/image/templates/render.php'; ?>
+			</div>
+		<?php else : ?>
+			<div class="mt-auto rounded-xl overflow-hidden bg-neutral-200 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 min-h-[220px] flex items-center justify-center" aria-hidden="true">
+				<span class="text-neutral-500 dark:text-neutral-500 text-sm"><?php esc_html_e( 'Image placeholder', 'sociallane-elements' ); ?></span>
+			</div>
+		<?php endif; ?>
+	<?php endif; ?>
+	<?php if ( $button ) : ?>
+		<div class="mt-auto pt-4">
+			<?php include $elements_path . '/button/templates/render.php'; ?>
+		</div>
+	<?php endif; ?>
+</article>