@sociallane/elements 1.0.0

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

@@ -0,0 +1,761 @@
+<?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 extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'bento-grid';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Bento Grid', '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_layout_section();
+		$this->register_header_section();
+		$this->register_cell1_section();
+		$this->register_cell2_section();
+		$this->register_cell3_section();
+		$this->register_cell4_section();
+		$this->register_two_row_sections();
+		$this->register_two_column_second_row_sections();
+		$this->register_animation_controls( true, true );
+	}
+
+	private function register_layout_section(): void {
+		require_once __DIR__ . '/data/view.php';
+		$layouts = get_bento_grid_layouts();
+		$options = [];
+		foreach ( $layouts as $key => $config ) {
+			$options[ $key ] = $config['label'];
+		}
+
+		$this->start_controls_section(
+			'section_layout',
+			[
+				'label' => esc_html__( 'Layout', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'layout',
+			[
+				'label'   => esc_html__( 'Layout', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'default',
+				'options' => $options,
+			]
+		);
+
+		$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_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_cell1_section(): void {
+		$this->start_controls_section(
+			'section_cell1',
+			[
+				'label'     => esc_html__( 'Cell 1 (Left)', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+				'condition' => [ 'layout' => 'default' ],
+			]
+		);
+
+		$this->add_control(
+			'cell1_title',
+			[
+				'label'   => esc_html__( 'Title', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXT,
+				'default' => esc_html__( 'Mobile friendly', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'cell1_description',
+			[
+				'label'   => esc_html__( 'Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXTAREA,
+				'default' => esc_html__( 'Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui lorem cupidatat commodo.', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'cell1_visual',
+			[
+				'label'   => esc_html__( 'Visual', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'none',
+				'options' => [
+					'none'  => esc_html__( 'None', 'sociallane-elements' ),
+					'image' => esc_html__( 'Image', 'sociallane-elements' ),
+				],
+			]
+		);
+
+		$this->add_control(
+			'cell1_image',
+			[
+				'label'     => esc_html__( 'Image', 'sociallane-elements' ),
+				'type'      => Controls_Manager::MEDIA,
+				'condition' => [ 'cell1_visual' => 'image' ],
+			]
+		);
+
+		$this->add_control(
+			'cell1_image_alt',
+			[
+				'label'     => esc_html__( 'Image Alt Text', 'sociallane-elements' ),
+				'type'      => Controls_Manager::TEXT,
+				'condition' => [ 'cell1_visual' => 'image' ],
+			]
+		);
+
+		$this->add_control(
+			'cell1_show_button',
+			[
+				'label'   => esc_html__( 'Show Button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'no',
+			]
+		);
+		$this->add_control(
+			'cell1_button_text',
+			[
+				'label'       => esc_html__( 'Button Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'condition'   => [ 'cell1_show_button' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'cell1_button_url',
+			[
+				'label'     => esc_html__( 'Button URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [ 'cell1_show_button' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'cell1_button_style',
+			[
+				'label'     => esc_html__( 'Button style', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'primary',
+				'options'   => sociallane_get_button_preset_options(),
+				'condition' => [ 'cell1_show_button' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_cell2_section(): void {
+		$this->start_controls_section(
+			'section_cell2',
+			[
+				'label'     => esc_html__( 'Cell 2 (Middle top)', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+				'condition' => [ 'layout' => 'default' ],
+			]
+		);
+
+		$this->add_control(
+			'cell2_title',
+			[
+				'label'   => esc_html__( 'Title', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXT,
+				'default' => esc_html__( 'Performance', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'cell2_description',
+			[
+				'label'   => esc_html__( 'Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXTAREA,
+				'default' => esc_html__( 'Lorem ipsum, dolor sit amet consectetur adipisicing elit maiores impedit.', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'cell2_visual',
+			[
+				'label'   => esc_html__( 'Visual', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'metric',
+				'options' => [
+					'none'   => esc_html__( 'None', 'sociallane-elements' ),
+					'metric' => esc_html__( 'Metric + chart', 'sociallane-elements' ),
+				],
+			]
+		);
+
+		$this->add_control(
+			'cell2_metric_value',
+			[
+				'label'     => esc_html__( 'Metric value', 'sociallane-elements' ),
+				'type'      => Controls_Manager::TEXT,
+				'default'   => '1.04 s',
+				'condition' => [ 'cell2_visual' => 'metric' ],
+			]
+		);
+
+		$this->add_control(
+			'cell2_metric_change',
+			[
+				'label'     => esc_html__( 'Metric change', 'sociallane-elements' ),
+				'type'      => Controls_Manager::TEXT,
+				'default'   => '-22%',
+				'condition' => [ 'cell2_visual' => 'metric' ],
+			]
+		);
+
+		$this->add_control(
+			'cell2_show_button',
+			[
+				'label'   => esc_html__( 'Show Button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'no',
+			]
+		);
+		$this->add_control(
+			'cell2_button_text',
+			[
+				'label'       => esc_html__( 'Button Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'condition'   => [ 'cell2_show_button' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'cell2_button_url',
+			[
+				'label'     => esc_html__( 'Button URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [ 'cell2_show_button' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'cell2_button_style',
+			[
+				'label'     => esc_html__( 'Button style', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'primary',
+				'options'   => sociallane_get_button_preset_options(),
+				'condition' => [ 'cell2_show_button' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_cell3_section(): void {
+		$this->start_controls_section(
+			'section_cell3',
+			[
+				'label'     => esc_html__( 'Cell 3 (Middle bottom)', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+				'condition' => [ 'layout' => 'default' ],
+			]
+		);
+
+		$this->add_control(
+			'cell3_title',
+			[
+				'label'   => esc_html__( 'Title', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXT,
+				'default' => esc_html__( 'Security', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'cell3_description',
+			[
+				'label'   => esc_html__( 'Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXTAREA,
+				'default' => esc_html__( 'Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi.', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'cell3_visual',
+			[
+				'label'   => esc_html__( 'Visual', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'icons',
+				'options' => [
+					'none'  => esc_html__( 'None', 'sociallane-elements' ),
+					'icons' => esc_html__( 'Icons', 'sociallane-elements' ),
+				],
+			]
+		);
+
+		$this->add_control(
+			'cell3_icon_1',
+			[
+				'label'     => esc_html__( 'Icon 1', 'sociallane-elements' ),
+				'type'      => Controls_Manager::ICONS,
+				'default'   => [ 'value' => 'eicon-cloud-check', 'library' => 'elementor' ],
+				'condition' => [ 'cell3_visual' => 'icons' ],
+			]
+		);
+
+		$this->add_control(
+			'cell3_icon_2',
+			[
+				'label'     => esc_html__( 'Icon 2 (center)', 'sociallane-elements' ),
+				'type'      => Controls_Manager::ICONS,
+				'default'   => [ 'value' => 'eicon-lock-user', 'library' => 'elementor' ],
+				'condition' => [ 'cell3_visual' => 'icons' ],
+			]
+		);
+
+		$this->add_control(
+			'cell3_icon_3',
+			[
+				'label'     => esc_html__( 'Icon 3', 'sociallane-elements' ),
+				'type'      => Controls_Manager::ICONS,
+				'default'   => [ 'value' => 'eicon-document-file', 'library' => 'elementor' ],
+				'condition' => [ 'cell3_visual' => 'icons' ],
+			]
+		);
+
+		$this->add_control(
+			'cell3_show_button',
+			[
+				'label'   => esc_html__( 'Show Button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'no',
+			]
+		);
+		$this->add_control(
+			'cell3_button_text',
+			[
+				'label'       => esc_html__( 'Button Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'condition'   => [ 'cell3_show_button' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'cell3_button_url',
+			[
+				'label'     => esc_html__( 'Button URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [ 'cell3_show_button' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'cell3_button_style',
+			[
+				'label'     => esc_html__( 'Button style', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'primary',
+				'options'   => sociallane_get_button_preset_options(),
+				'condition' => [ 'cell3_show_button' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_cell4_section(): void {
+		$this->start_controls_section(
+			'section_cell4',
+			[
+				'label'     => esc_html__( 'Cell 4 (Right)', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+				'condition' => [ 'layout' => 'default' ],
+			]
+		);
+
+		$this->add_control(
+			'cell4_title',
+			[
+				'label'   => esc_html__( 'Title', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXT,
+				'default' => esc_html__( 'Powerful APIs', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'cell4_description',
+			[
+				'label'   => esc_html__( 'Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXTAREA,
+				'default' => esc_html__( 'Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget sem sodales gravida.', 'sociallane-elements' ),
+			]
+		);
+
+		$this->add_control(
+			'cell4_visual',
+			[
+				'label'   => esc_html__( 'Visual', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'code',
+				'options' => [
+					'none' => esc_html__( 'None', 'sociallane-elements' ),
+					'code' => esc_html__( 'Code snippet', 'sociallane-elements' ),
+				],
+			]
+		);
+
+		$this->add_control(
+			'cell4_code',
+			[
+				'label'     => esc_html__( 'Code snippet', 'sociallane-elements' ),
+				'type'      => Controls_Manager::CODE,
+				'default'   => "import { useState } from 'react'\nimport { Switch } from '@headlessui/react'\n\nfunction Example() {\n  const [enabled, setEnabled] = useState(true)\n  return (\n    <form action=\"/notification-settings\">\n      <Switch checked={enabled} onChange={setEnabled}>\n        {/* ... */}\n      </Switch>\n      <button>Submit</button>\n    </form>\n  )\n}",
+				'language'  => 'html',
+				'condition' => [ 'cell4_visual' => 'code' ],
+			]
+		);
+
+		$this->add_control(
+			'cell4_show_button',
+			[
+				'label'   => esc_html__( 'Show Button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'no',
+			]
+		);
+		$this->add_control(
+			'cell4_button_text',
+			[
+				'label'       => esc_html__( 'Button Text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'condition'   => [ 'cell4_show_button' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'cell4_button_url',
+			[
+				'label'     => esc_html__( 'Button URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [ 'cell4_show_button' => 'yes' ],
+			]
+		);
+		$this->add_control(
+			'cell4_button_style',
+			[
+				'label'     => esc_html__( 'Button style', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'primary',
+				'options'   => sociallane_get_button_preset_options(),
+				'condition' => [ 'cell4_show_button' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_two_row_sections(): void {
+		$deploys = new Repeater();
+		$deploys->add_control( 'status', [
+			'label'   => esc_html__( 'Status', 'sociallane-elements' ),
+			'type'    => Controls_Manager::SELECT,
+			'default' => 'success',
+			'options' => [ 'success' => esc_html__( 'Success', 'sociallane-elements' ), 'pending' => esc_html__( 'Pending', 'sociallane-elements' ) ],
+		] );
+		$deploys->add_control( 'label', [ 'label' => esc_html__( 'Label', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Planetaria / mobile-api' ] );
+		$deploys->add_control( 'badge', [ 'label' => esc_html__( 'Badge', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Staging' ] );
+		$deploys->add_control( 'meta', [ 'label' => esc_html__( 'Meta', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Deploys from GitHub • Deployed 3m ago • 23s' ] );
+		$deploys->add_control( 'url', [ 'label' => esc_html__( 'Link URL', 'sociallane-elements' ), 'type' => Controls_Manager::URL ] );
+
+		$this->start_controls_section(
+			'section_two_row_deploys',
+			[
+				'label'     => esc_html__( 'Grid top left', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+				'condition' => [ 'layout' => 'two-row' ],
+			]
+		);
+		$this->add_control( 'two_row_deploys_header', [ 'label' => esc_html__( 'List header', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Deploys from GitHub • Initiated 1m 32s ago' ] );
+		$this->add_control( 'two_row_deploys', [ 'label' => esc_html__( 'Deploy items', 'sociallane-elements' ), 'type' => Controls_Manager::REPEATER, 'fields' => $deploys->get_controls(), 'default' => [
+			[ 'label' => 'Planetaria / mobile-api', 'badge' => 'Staging', 'meta' => 'Deploys from GitHub • Deployed 3m ago • 23s', 'status' => 'success' ],
+			[ 'label' => 'Tailwind Labs / tailwindcss.com', 'badge' => 'Preview', 'meta' => 'Deploys from GitHub • Initiated 5m 45s ago • 3m 4s', 'status' => 'pending' ],
+			[ 'label' => 'Tailwind Labs / tailwindui.com', 'badge' => 'Preview', 'meta' => 'Deploys from GitHub • Initiated 8m ago • 1m 30s', 'status' => 'success' ],
+		], 'title_field' => '{{{ label }}}' ] );
+		$this->end_controls_section();
+
+		$integrations = new Repeater();
+		$integrations->add_control( 'icon', [ 'label' => esc_html__( 'Icon', 'sociallane-elements' ), 'type' => Controls_Manager::ICONS, 'default' => [ 'value' => 'eicon-envelope', 'library' => 'elementor' ] ] );
+		$integrations->add_control( 'label', [ 'label' => esc_html__( 'Label', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Gmail' ] );
+
+		$this->start_controls_section(
+			'section_two_row_integrations',
+			[
+				'label'     => esc_html__( 'Grid top center', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+				'condition' => [ 'layout' => 'two-row' ],
+			]
+		);
+		$this->add_control( 'two_row_integrations_eyebrow', [ 'label' => esc_html__( 'Eyebrow', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Integrations' ] );
+		$this->add_control( 'two_row_integrations_title', [ 'label' => esc_html__( 'Title', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Connect your favorite tools' ] );
+		$this->add_control( 'two_row_integrations', [ 'label' => esc_html__( 'Items', 'sociallane-elements' ), 'type' => Controls_Manager::REPEATER, 'fields' => $integrations->get_controls(), 'default' => [
+			[ 'label' => 'Gmail' ], [ 'label' => 'Google Calendar' ], [ 'label' => 'Slack' ], [ 'label' => 'Microsoft Team' ], [ 'label' => 'Discord' ], [ 'label' => 'Adobe Creative Cloud' ],
+		], 'title_field' => '{{{ label }}}' ] );
+		$this->end_controls_section();
+
+		$this->start_controls_section(
+			'section_two_row_overview',
+			[
+				'label'     => esc_html__( 'Grid right', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+				'condition' => [ 'layout' => 'two-row' ],
+			]
+		);
+		$this->add_control( 'two_row_overview_tabs', [ 'label' => esc_html__( 'Tab labels', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Overview, Activity, Settings, Collaborators, Notifications', 'description' => esc_html__( 'Comma-separated', 'sociallane-elements' ) ] );
+		$this->add_control( 'two_row_overview_project', [ 'label' => esc_html__( 'Project label', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Planetaria / mobile-api' ] );
+		$this->add_control( 'two_row_overview_project_meta', [ 'label' => esc_html__( 'Project meta', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Deploys from GitHub via main branch' ] );
+		$this->add_control( 'two_row_overview_stat1_label', [ 'label' => esc_html__( 'Stat 1 label', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Number of deploys' ] );
+		$this->add_control( 'two_row_overview_stat1_value', [ 'label' => esc_html__( 'Stat 1 value', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => '405' ] );
+		$this->add_control( 'two_row_overview_stat2_label', [ 'label' => esc_html__( 'Stat 2 label', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Avg deploy time' ] );
+		$this->add_control( 'two_row_overview_stat2_value', [ 'label' => esc_html__( 'Stat 2 value', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => '3.65' ] );
+		$this->add_control( 'two_row_overview_stat2_suffix', [ 'label' => esc_html__( 'Stat 2 suffix', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'seconds' ] );
+		$this->add_control( 'two_row_overview_stat3_label', [ 'label' => esc_html__( 'Stat 3 label', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Number of servers' ] );
+		$this->add_control( 'two_row_overview_stat3_value', [ 'label' => esc_html__( 'Stat 3 value', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => '3' ] );
+		$this->add_control( 'two_row_overview_perf_title', [ 'label' => esc_html__( 'Performance title', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Lightning-fast builds' ] );
+		$this->add_control( 'two_row_overview_perf_desc', [ 'label' => esc_html__( 'Performance description', 'sociallane-elements' ), 'type' => Controls_Manager::TEXTAREA, 'default' => 'Sed congue eros et magna scelerisque, eget lobortis nunc ultrices.' ] );
+		$this->end_controls_section();
+
+		$this->start_controls_section(
+			'section_two_row_releases',
+			[
+				'label'     => esc_html__( 'Grid bottom left', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+				'condition' => [ 'layout' => 'two-row' ],
+			]
+		);
+		$this->add_control( 'two_row_releases_eyebrow', [ 'label' => esc_html__( 'Eyebrow', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Releases' ] );
+		$this->add_control( 'two_row_releases_title', [ 'label' => esc_html__( 'Title', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Push to deploy' ] );
+		$this->add_control( 'two_row_releases_desc', [ 'label' => esc_html__( 'Description', 'sociallane-elements' ), 'type' => Controls_Manager::TEXTAREA, 'default' => 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' ] );
+		$this->end_controls_section();
+
+		$this->start_controls_section(
+			'section_two_row_security',
+			[
+				'label'     => esc_html__( 'Grid bottom center', 'sociallane-elements' ),
+				'tab'       => Controls_Manager::TAB_CONTENT,
+				'condition' => [ 'layout' => 'two-row' ],
+			]
+		);
+		$this->add_control( 'two_row_security_eyebrow', [ 'label' => esc_html__( 'Eyebrow', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Security' ] );
+		$this->add_control( 'two_row_security_title', [ 'label' => esc_html__( 'Title', 'sociallane-elements' ), 'type' => Controls_Manager::TEXT, 'default' => 'Advanced access control' ] );
+		$this->add_control( 'two_row_security_desc', [ 'label' => esc_html__( 'Description', 'sociallane-elements' ), 'type' => Controls_Manager::TEXTAREA, 'default' => 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.' ] );
+		$this->add_control( 'two_row_security_avatar1', [ 'label' => esc_html__( 'Avatar 1', 'sociallane-elements' ), 'type' => Controls_Manager::MEDIA ] );
+		$this->add_control( 'two_row_security_avatar2', [ 'label' => esc_html__( 'Avatar 2', 'sociallane-elements' ), 'type' => Controls_Manager::MEDIA ] );
+		$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,
+				'condition' => [ 'layout' => 'two-column-second-row' ],
+			]
+		);
+		$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,
+				'condition' => [ 'layout' => 'two-column-second-row' ],
+			]
+		);
+		$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,
+				'condition' => [ 'layout' => 'two-column-second-row' ],
+			]
+		);
+		$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,
+				'condition' => [ 'layout' => 'two-column-second-row' ],
+			]
+		);
+		$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,
+				'condition' => [ 'layout' => 'two-column-second-row' ],
+			]
+		);
+		$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_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}
+