@sociallane/elements 1.0.0

package/widgets/bento-grid/templates/partials/tcsr-row1-right.php

@@ -0,0 +1,65 @@
+<?php
+/**
+ * Grid two column second row – Row 1 right (activity feed + releases)
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$data  = $view['two_column_second_row']['row1_right'] ?? [];
+$cls   = $view['classes'] ?? [];
+$items = $data['activities'] ?? [];
+?>
+
+<article class="<?php echo esc_attr( $cls['card'] ); ?> p-5 md:p-6 h-full flex flex-col">
+	<?php if ( ( $data['activity_title'] ?? '' ) !== '' ) : ?>
+		<div class="flex items-center justify-between gap-2 mb-4">
+			<span class="<?php echo esc_attr( $cls['card_title'] ); ?> text-sm font-semibold"><?php echo $data['activity_title']; ?></span>
+		</div>
+		<div class="flex items-center justify-between text-xs <?php echo esc_attr( $cls['card_desc'] ); ?> mb-3">
+			<span><?php echo $data['sort_by']; ?></span>
+			<?php if ( ( $data['view_all'] ?? '' ) !== '' && $data['view_all_attrs'] !== '' ) : ?>
+				<a <?php echo $data['view_all_attrs']; ?> class="hover:underline"><?php echo $data['view_all']; ?></a>
+			<?php endif; ?>
+		</div>
+	<?php endif; ?>
+
+	<?php if ( ! empty( $items ) ) : ?>
+		<ul class="space-y-3 flex-1">
+			<?php foreach ( $items as $item ) : ?>
+				<li class="flex items-start gap-3">
+					<?php if ( ! empty( $item['avatar']['url'] ) ) : ?>
+						<img src="<?php echo esc_url( $item['avatar']['url'] ); ?>" alt="" class="w-8 h-8 rounded-full object-cover shrink-0" width="32" height="32" loading="lazy" />
+					<?php else : ?>
+						<span class="w-8 h-8 rounded-full bg-neutral-300 dark:bg-neutral-600 shrink-0 flex items-center justify-center text-xs <?php echo esc_attr( $cls['card_title'] ); ?> font-medium" aria-hidden="true"><?php echo esc_html( mb_substr( $item['name'], 0, 1 ) ); ?></span>
+					<?php endif; ?>
+					<div class="min-w-0 flex-1">
+						<div class="flex items-center justify-between gap-2 flex-wrap">
+							<span class="<?php echo esc_attr( $cls['card_title'] ); ?> text-sm font-medium"><?php echo $item['name']; ?></span>
+							<span class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs"><?php echo $item['time']; ?></span>
+						</div>
+						<div class="flex items-center gap-2 flex-wrap mt-0.5">
+							<span class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs"><?php echo $item['action']; ?></span>
+							<?php if ( $item['badge'] !== '' ) : ?>
+								<span class="<?php echo esc_attr( $cls['badge'] ); ?>"><?php echo $item['badge']; ?></span>
+							<?php endif; ?>
+						</div>
+					</div>
+				</li>
+			<?php endforeach; ?>
+		</ul>
+	<?php endif; ?>
+
+	<?php if ( ( $data['releases_title'] ?? '' ) !== '' || ( $data['releases_desc'] ?? '' ) !== '' ) : ?>
+		<div class="mt-6 pt-4 border-t border-neutral-200 dark:border-neutral-600/50">
+			<?php if ( ( $data['releases_eyebrow'] ?? '' ) !== '' ) : ?>
+				<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-1"><?php echo $data['releases_eyebrow']; ?></p>
+			<?php endif; ?>
+			<h4 class="<?php echo esc_attr( $cls['card_title'] ); ?> text-base font-bold mb-2"><?php echo $data['releases_title']; ?></h4>
+			<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-sm"><?php echo $data['releases_desc']; ?></p>
+		</div>
+	<?php endif; ?>
+</article>

package/widgets/bento-grid/templates/partials/tcsr-row2-center.php

@@ -0,0 +1,41 @@
+<?php
+/**
+ * Grid two column second row – Row 2 center (Integrations)
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$data  = $view['two_column_second_row']['row2_center'] ?? [];
+$cls   = $view['classes'] ?? [];
+$items = $data['items'] ?? [];
+?>
+
+<article class="<?php echo esc_attr( $cls['card'] ); ?> p-5 md:p-6 h-full flex flex-col bg-neutral-50/80 dark:bg-neutral-800/50">
+	<?php if ( ( $data['eyebrow'] ?? '' ) !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-1"><?php echo $data['eyebrow']; ?></p>
+	<?php endif; ?>
+	<?php if ( ( $data['title'] ?? '' ) !== '' ) : ?>
+		<h3 class="<?php echo esc_attr( $cls['card_title'] ); ?> text-lg font-bold mb-3"><?php echo $data['title']; ?></h3>
+	<?php endif; ?>
+	<?php if ( ( $data['desc'] ?? '' ) !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-sm leading-relaxed mb-4"><?php echo $data['desc']; ?></p>
+	<?php endif; ?>
+	<?php if ( ! empty( $items ) ) : ?>
+		<div class="grid grid-cols-3 gap-3 mt-auto">
+			<?php foreach ( $items as $item ) : ?>
+				<div class="flex flex-col items-center justify-center rounded-xl bg-white/80 dark:bg-neutral-700/80 border border-neutral-200 dark:border-neutral-600/50 p-3 text-center">
+					<?php if ( ! empty( $item['icon']['value'] ) ) : ?>
+						<span class="text-primary dark:text-primary-light mb-1.5 [&_.e-icon]:w-7 [&_.e-icon]:h-7" aria-hidden="true">
+							<?php \Elementor\Icons_Manager::render_icon( $item['icon'], [ 'aria-hidden' => 'true' ] ); ?>
+						</span>
+					<?php endif; ?>
+					<span class="<?php echo esc_attr( $cls['card_title'] ); ?> text-xs font-semibold"><?php echo $item['label']; ?></span>
+				</div>
+			<?php endforeach; ?>
+		</div>
+	<?php endif; ?>
+</article>

package/widgets/bento-grid/templates/partials/tcsr-row2-left.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * Grid two column second row – Row 2 left (Speed)
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$data   = $view['two_column_second_row']['row2_left'] ?? [];
+$cls    = $view['classes'] ?? [];
+$img    = $data['image'] ?? null;
+$img_ok = $img && ! empty( $img['src'] );
+$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 ( ( $data['eyebrow'] ?? '' ) !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-1"><?php echo $data['eyebrow']; ?></p>
+	<?php endif; ?>
+	<?php if ( ( $data['title'] ?? '' ) !== '' ) : ?>
+		<h3 class="<?php echo esc_attr( $cls['card_title'] ); ?> text-lg font-bold mb-3"><?php echo $data['title']; ?></h3>
+	<?php endif; ?>
+	<?php if ( ( $data['desc'] ?? '' ) !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-sm leading-relaxed mb-4"><?php echo $data['desc']; ?></p>
+	<?php endif; ?>
+	<?php if ( $img_ok ) : ?>
+		<div class="mt-auto rounded-xl overflow-hidden bg-neutral-200 dark:bg-neutral-700 min-h-[140px] flex items-center justify-center">
+			<?php $image = $img; $image['class'] = ( $image['class'] ?? '' ) . ' w-full h-auto object-cover'; include $elements_path . '/image/templates/render.php'; ?>
+		</div>
+	<?php else : ?>
+		<div class="mt-auto rounded-xl bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 min-h-[140px] flex items-center justify-center" aria-hidden="true">
+			<span class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs"><?php esc_html_e( 'Image placeholder', 'sociallane-elements' ); ?></span>
+		</div>
+	<?php endif; ?>
+</article>

package/widgets/bento-grid/templates/partials/tcsr-row2-right.php

@@ -0,0 +1,38 @@
+<?php
+/**
+ * Grid two column second row – Row 2 right (Network)
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$data   = $view['two_column_second_row']['row2_right'] ?? [];
+$cls    = $view['classes'] ?? [];
+$img    = $data['image'] ?? null;
+$img_ok = $img && ! empty( $img['src'] );
+$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 ( ( $data['eyebrow'] ?? '' ) !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-1"><?php echo $data['eyebrow']; ?></p>
+	<?php endif; ?>
+	<?php if ( ( $data['title'] ?? '' ) !== '' ) : ?>
+		<h3 class="<?php echo esc_attr( $cls['card_title'] ); ?> text-lg font-bold mb-3"><?php echo $data['title']; ?></h3>
+	<?php endif; ?>
+	<?php if ( ( $data['desc'] ?? '' ) !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-sm leading-relaxed mb-4"><?php echo $data['desc']; ?></p>
+	<?php endif; ?>
+	<?php if ( $img_ok ) : ?>
+		<div class="mt-auto rounded-xl overflow-hidden bg-neutral-200 dark:bg-neutral-700 min-h-[140px] flex items-center justify-center">
+			<?php $image = $img; $image['class'] = ( $image['class'] ?? '' ) . ' w-full h-auto object-cover'; include $elements_path . '/image/templates/render.php'; ?>
+		</div>
+	<?php else : ?>
+		<div class="mt-auto rounded-xl bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-600 min-h-[140px] flex items-center justify-center" aria-hidden="true">
+			<span class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs"><?php esc_html_e( 'Image placeholder', 'sociallane-elements' ); ?></span>
+		</div>
+	<?php endif; ?>
+</article>

package/widgets/bento-grid/templates/partials/two-column-second-row-grid.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * Bento Grid – Grid two column second row layout
+ * Row 1: 2 columns (left wider, right narrower)
+ * Row 2: 3 equal columns
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+?>
+
+<div class="sl-bento-grid sl-bento-grid--two-col-second-row max-w-6xl mx-auto space-y-4 md:space-y-5"<?php echo ! empty( $stagger_attrs ) ? ' ' . $stagger_attrs : ''; ?>>
+	<div class="grid grid-cols-1 md:grid-cols-[1.5fr_1fr] gap-4 md:gap-5">
+		<div class="sl-bento-cell">
+			<?php include __DIR__ . '/tcsr-row1-left.php'; ?>
+		</div>
+		<div class="sl-bento-cell">
+			<?php include __DIR__ . '/tcsr-row1-right.php'; ?>
+		</div>
+	</div>
+	<div class="grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-5">
+		<div class="sl-bento-cell">
+			<?php include __DIR__ . '/tcsr-row2-left.php'; ?>
+		</div>
+		<div class="sl-bento-cell">
+			<?php include __DIR__ . '/tcsr-row2-center.php'; ?>
+		</div>
+		<div class="sl-bento-cell">
+			<?php include __DIR__ . '/tcsr-row2-right.php'; ?>
+		</div>
+	</div>
+</div>

package/widgets/bento-grid/templates/partials/two-row-deploys.php

@@ -0,0 +1,47 @@
+<?php
+/**
+ * Two Row Bento – Deploys list cell
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$data = $view['two_row']['deploys'] ?? [];
+$cls  = $view['classes'] ?? [];
+$header = $data['header'] ?? '';
+$items  = $data['items'] ?? [];
+?>
+
+<article class="<?php echo esc_attr( $cls['card'] ); ?> p-5 md:p-6 h-full flex flex-col">
+	<?php if ( $header !== '' ) : ?>
+		<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mb-4"><?php echo $header; ?></p>
+	<?php endif; ?>
+	<?php if ( ! empty( $items ) ) : ?>
+		<ul class="divide-y divide-neutral-200 dark:divide-neutral-600/50 space-y-0 flex-1">
+			<?php foreach ( $items as $item ) : ?>
+				<li class="py-3 first:pt-0 last:pb-0">
+					<a href="<?php echo esc_url( $item['href'] ); ?>" <?php echo $item['attrs']; ?> class="group flex items-start justify-between gap-3 rounded-lg p-2 -m-2 hover:bg-neutral-100 dark:hover:bg-neutral-700/50 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-[#21283B]">
+						<div class="min-w-0 flex-1">
+							<div class="flex items-center gap-2 flex-wrap">
+								<span class="shrink-0 w-2 h-2 rounded-full <?php echo $item['status'] === 'success' ? 'bg-green-500' : 'bg-neutral-400 dark:bg-neutral-500'; ?>" aria-hidden="true"></span>
+								<span class="<?php echo esc_attr( $cls['card_title'] ); ?> text-sm font-semibold"><?php echo $item['label']; ?></span>
+								<?php if ( $item['badge'] !== '' ) : ?>
+									<span class="<?php echo esc_attr( $cls['badge'] ); ?>"><?php echo $item['badge']; ?></span>
+								<?php endif; ?>
+							</div>
+							<?php if ( $item['meta'] !== '' ) : ?>
+								<p class="<?php echo esc_attr( $cls['card_desc'] ); ?> text-xs mt-1"><?php echo $item['meta']; ?></p>
+							<?php endif; ?>
+						</div>
+						<svg class="size-4 shrink-0 text-neutral-400 dark:text-neutral-500 group-hover:text-primary dark:group-hover:text-primary-light" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+						</svg>
+					</a>
+				</li>
+			<?php endforeach; ?>
+		</ul>
+	<?php endif; ?>
+</article>

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

@@ -0,0 +1,34 @@
+<?php
+/**
+ * Bento Grid – Two Row layout: 5 cells
+ * Row 1: [Deploys] [Integrations] [Overview span 2 rows]
+ * Row 2: [Releases] [Security]
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$two = $view['two_row'] ?? [];
+$cls = $view['classes'] ?? [];
+?>
+
+<div class="sl-bento-grid sl-bento-grid--two-row grid grid-cols-1 md:grid-cols-3 md:grid-rows-2 gap-4 md:gap-5 max-w-6xl mx-auto"<?php echo ! empty( $stagger_attrs ) ? ' ' . $stagger_attrs : ''; ?>>
+	<div class="sl-bento-cell md:col-start-1 md:row-start-1">
+		<?php include __DIR__ . '/two-row-deploys.php'; ?>
+	</div>
+	<div class="sl-bento-cell md:col-start-2 md:row-start-1">
+		<?php include __DIR__ . '/two-row-integrations.php'; ?>
+	</div>
+	<div class="sl-bento-cell md:col-start-3 md:row-start-1 md:row-span-2">
+		<?php include __DIR__ . '/two-row-overview.php'; ?>
+	</div>
+	<div class="sl-bento-cell md:col-start-1 md:row-start-2">
+		<?php include __DIR__ . '/two-row-releases.php'; ?>
+	</div>
+	<div class="sl-bento-cell md:col-start-2 md:row-start-2">
+		<?php include __DIR__ . '/two-row-security.php'; ?>
+	</div>
+</div>

package/widgets/bento-grid/templates/partials/two-row-integrations.php

@@ -0,0 +1,40 @@
+<?php
+/**
+ * Two Row Bento – Integrations cell (eyebrow, title, icon grid)
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$data    = $view['two_row']['integrations'] ?? [];
+$cls     = $view['classes'] ?? [];
+$eyebrow = $data['eyebrow'] ?? '';
+$title   = $data['title'] ?? '';
+$items   = $data['items'] ?? [];
+?>
+
+<article class="<?php echo esc_attr( $cls['card'] ); ?> p-5 md:p-6 h-full flex flex-col sl-bento-integrations 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 mb-4"><?php echo $title; ?></h3>
+	<?php endif; ?>
+	<?php if ( ! empty( $items ) ) : ?>
+		<div class="grid grid-cols-3 gap-3 mt-auto">
+			<?php foreach ( $items as $item ) : ?>
+				<div class="flex flex-col items-center justify-center rounded-xl bg-white/80 dark:bg-neutral-800/80 border border-neutral-200 dark:border-neutral-600/50 p-3 text-center">
+					<?php if ( ! empty( $item['icon']['value'] ) ) : ?>
+						<span class="text-primary dark:text-primary-light mb-1.5 [&_.e-icon]:w-8 [&_.e-icon]:h-8" aria-hidden="true">
+							<?php \Elementor\Icons_Manager::render_icon( $item['icon'], [ 'aria-hidden' => 'true' ] ); ?>
+						</span>
+					<?php endif; ?>
+					<span class="<?php echo esc_attr( $cls['card_title'] ); ?> text-xs font-semibold"><?php echo $item['label']; ?></span>
+				</div>
+			<?php endforeach; ?>
+		</div>
+	<?php endif; ?>
+</article>

package/widgets/bento-grid/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/widgets/bento-grid/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/widgets/bento-grid/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/widgets/bento-grid/templates/wrapper.php

@@ -0,0 +1,72 @@
+<?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;
+}
+
+if ( ! function_exists( 'get_bento_grid_layouts' ) ) {
+	require_once __DIR__ . '/../data/view.php';
+}
+
+$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 );
+		$layouts      = get_bento_grid_layouts();
+		$layout       = $view['layout'] ?? 'default';
+		$partial      = isset( $layouts[ $layout ] ) ? $layouts[ $layout ]['partial'] : $layouts['default']['partial'];
+		$partial_path = __DIR__ . '/partials/' . $partial;
+		if ( ! empty( $partial ) && file_exists( $partial_path ) ) {
+			include $partial_path;
+		}
+		?>
+	</div>
+</section>
+
+<?php // ========== BENTO GRID END ========== ?>