@sociallane/elements 1.0.0

package/packages/widgets/faq-stacked/templates/wrapper.php

@@ -0,0 +1,70 @@
+<?php
+/**
+ * Template: FAQ Wrapper
+ *
+ * FAQ section with stacked, split, or centered layout.
+ * Outputs FAQPage schema when items exist.
+ *
+ * AVAILABLE DATA ($view):
+ * - show_title, show_description, title, title_tag, description
+ * - items (array of id, question, answer, open)
+ * - layout (stacked | split | centered)
+ * - header_order, accordion_order (split only)
+ * - classes, widget_id, schema_items
+ *
+ * @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 );
+$partials_dir = __DIR__ . '/partials';
+?>
+
+<?php // ========== FAQ (STACKED) 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 ( ! empty( $view['show_title'] ) && ! empty( $view['title'] ) ) : ?>
+		aria-labelledby="faq-title-<?php echo esc_attr( $view['widget_id'] ); ?>"
+	<?php endif; ?>
+>
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<?php
+		$stagger_attrs = sociallane_stagger_attrs( $anim );
+		include $partials_dir . '/layout-stacked.php';
+		?>
+	</div>
+</section>
+
+<?php
+// FAQPage schema for SEO
+if ( ! empty( $view['schema_items'] ) ) {
+	$schema = [
+		'@context'   => 'https://schema.org',
+		'@type'     => 'FAQPage',
+		'mainEntity' => array_map( function ( $item ) {
+			return [
+				'@type' => 'Question',
+				'name'  => $item['question'],
+				'acceptedAnswer' => [
+					'@type' => 'Answer',
+					'text'  => $item['answer'],
+				],
+			];
+		}, $view['schema_items'] ),
+	];
+	echo '<script type="application/ld+json">' . wp_json_encode( $schema, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE ) . '</script>';
+}
+?>
+
+<?php // ========== FAQ END ========== ?>

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

@@ -0,0 +1,80 @@
+<?php
+/**
+ * Data Preparation: Feature 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;
+}
+
+/**
+ * Prepare view data for Feature Grid widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id Unique widget ID for accessibility
+ * @return array Template-ready data
+ */
+function prepare_feature_grid_view( array $settings, string $widget_id ): array {
+	$fields = sociallane_extract_fields( $settings, [
+		'headline'    => [ 'default_show' => 'no' ],
+		'subtitle'    => [ 'default_show' => 'no' ],
+		'description' => [ 'default_show' => 'no' ],
+	] );
+
+	$headline_tag = sociallane_validate_heading_tag( $settings, 'headline_tag', 'h2' );
+	$columns      = sociallane_validate_option( $settings['columns'] ?? '4', [ '2', '3', '4' ], '4' );
+	$grid_class   = sociallane_grid_cols( $columns );
+
+	$features = sociallane_process_repeater( $settings['features'] ?? [], function ( $item ) {
+		$link      = sociallane_prepare_link_attrs( $item['link_url'] ?? [] );
+		$show_link = ( $item['show_link'] ?? 'yes' ) === 'yes';
+		return [
+			'icon'        => $item['icon'] ?? null,
+			'title'       => esc_html( $item['title'] ?? '' ),
+			'description' => esc_html( $item['description'] ?? '' ),
+			'show_link'   => $show_link,
+			'link_text'   => $show_link ? esc_html( $item['link_text'] ?? '' ) : '',
+			'link_url'    => $link['url'],
+			'link_attrs'  => $link['attrs'],
+		];
+	} );
+
+	$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-zinc-900 dark:text-neutral-200',
+		'subtitle'    => 'text-zinc-900 dark:text-neutral-200',
+		'eyebrow'     => 'text-zinc-900 dark:text-neutral-200',
+		'description' => 'text-zinc-900 dark:text-neutral-200',
+		'title'       => 'text-zinc-900 dark:text-neutral-200',
+		'link'        => 'text-zinc-900 dark:text-neutral-200 hover:underline focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-neutral-900',
+		'icon_box'    => 'bg-zinc-400 dark:bg-zinc-700 text-zinc-900 rounded-lg',
+		'icon'        => 'w-6 h-6 text-white',
+	];
+
+	return array_merge( $fields, [
+		'headline_tag' => $headline_tag,
+		'grid_class'   => $grid_class,
+		'features'     => $features,
+		'classes'      => $classes,
+		'widget_id'    => $widget_id,
+		'animation'    => $animation,
+	] );
+}

package/packages/widgets/feature-grid/feature-grid.php

@@ -0,0 +1,305 @@
+<?php
+/**
+ * Widget: Feature Grid
+ *
+ * A four-column feature section. Each column has an icon in a rounded box,
+ * title, description, and optional link. Responsive, left-aligned.
+ *
+ * @package SocialLane_Elements
+ * @since   1.0.0
+ */
+
+namespace SocialLane\Elements;
+
+use Elementor\Widget_Base;
+use Elementor\Controls_Manager;
+use Elementor\Repeater;
+use SocialLane\Elements\Traits\Animation_Controls;
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Feature Grid Widget
+ */
+class Feature_Grid extends Widget_Base {
+
+	use Animation_Controls;
+
+	/*
+	|--------------------------------------------------------------------------
+	| Widget Identity
+	|--------------------------------------------------------------------------
+	*/
+
+	public function get_name(): string {
+		return 'feature-grid';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Feature Grid', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-gallery-grid';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-content' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'feature', 'grid', 'columns', 'benefits', 'learn more' ];
+	}
+
+	/*
+	|--------------------------------------------------------------------------
+	| Elementor Controls
+	|--------------------------------------------------------------------------
+	*/
+
+	protected function register_controls(): void {
+		$this->register_layout_section();
+		$this->register_header_section();
+		$this->register_features_section();
+		$this->register_animation_controls( true, true );
+	}
+
+	private function register_layout_section(): void {
+		$this->start_controls_section(
+			'section_layout',
+			[
+				'label' => esc_html__( 'Layout', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'columns',
+			[
+				'label'   => esc_html__( 'Columns', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => '4',
+				'options' => [
+					'2' => '2',
+					'3' => '3',
+					'4' => '4',
+				],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_header_section(): void {
+		$this->start_controls_section(
+			'section_header',
+			[
+				'label' => esc_html__( 'Header', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'show_headline',
+			[
+				'label'   => esc_html__( 'Show Headline', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'no',
+			]
+		);
+
+		$this->add_control(
+			'headline',
+			[
+				'label'       => esc_html__( 'Headline', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Lorem ipsum dolor sit amet', 'sociallane-elements' ),
+				'label_block' => true,
+				'condition'   => [ 'show_headline' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'headline_tag',
+			[
+				'label'     => esc_html__( 'Headline Tag', 'sociallane-elements' ),
+				'type'      => Controls_Manager::SELECT,
+				'default'   => 'h2',
+				'options'   => [
+					'h1' => 'H1',
+					'h2' => 'H2',
+					'h3' => 'H3',
+				],
+				'condition' => [ 'show_headline' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'show_subtitle',
+			[
+				'label'   => esc_html__( 'Show Subtitle', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'no',
+			]
+		);
+
+		$this->add_control(
+			'subtitle',
+			[
+				'label'     => esc_html__( 'Subtitle', 'sociallane-elements' ),
+				'type'      => Controls_Manager::TEXTAREA,
+				'default'   => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'sociallane-elements' ),
+				'condition' => [ 'show_subtitle' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'show_description',
+			[
+				'label'   => esc_html__( 'Show Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'no',
+			]
+		);
+
+		$this->add_control(
+			'description',
+			[
+				'label'     => esc_html__( 'Description', 'sociallane-elements' ),
+				'type'      => Controls_Manager::TEXTAREA,
+				'default'   => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' ),
+				'condition' => [ 'show_description' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_features_section(): void {
+		$this->start_controls_section(
+			'section_features',
+			[
+				'label' => esc_html__( 'Features', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$repeater = new Repeater();
+
+		$repeater->add_control(
+			'icon',
+			[
+				'label'   => esc_html__( 'Icon', 'sociallane-elements' ),
+				'type'    => Controls_Manager::ICONS,
+				'default' => [
+					'value'   => 'eicon-device-desktop',
+					'library' => 'elementor',
+				],
+			]
+		);
+
+		$repeater->add_control(
+			'title',
+			[
+				'label'       => esc_html__( 'Title', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'label_block' => true,
+			]
+		);
+
+		$repeater->add_control(
+			'description',
+			[
+				'label'   => esc_html__( 'Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::TEXTAREA,
+				'default' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' ),
+			]
+		);
+
+		$repeater->add_control(
+			'show_link',
+			[
+				'label'   => esc_html__( 'Show Link', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$repeater->add_control(
+			'link_text',
+			[
+				'label'     => esc_html__( 'Link Text', 'sociallane-elements' ),
+				'type'      => Controls_Manager::TEXT,
+				'default'   => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+				'condition' => [ 'show_link' => 'yes' ],
+			]
+		);
+
+		$repeater->add_control(
+			'link_url',
+			[
+				'label'     => esc_html__( 'Link URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [ 'show_link' => 'yes' ],
+			]
+		);
+
+		$this->add_control(
+			'features',
+			[
+				'label'       => esc_html__( 'Features', 'sociallane-elements' ),
+				'type'        => Controls_Manager::REPEATER,
+				'fields'      => $repeater->get_controls(),
+				'default'     => [
+					[
+						'title'       => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+						'description' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' ),
+						'link_text'   => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+						'icon'        => [ 'value' => 'eicon-device-responsive', 'library' => 'elementor' ],
+					],
+					[
+						'title'       => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+						'description' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' ),
+						'link_text'   => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+						'icon'        => [ 'value' => 'eicon-slider-push', 'library' => 'elementor' ],
+					],
+					[
+						'title'       => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+						'description' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' ),
+						'link_text'   => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+						'icon'        => [ 'value' => 'eicon-document-file', 'library' => 'elementor' ],
+					],
+					[
+						'title'       => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+						'description' => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' ),
+						'link_text'   => esc_html__( 'Lorem ipsum', 'sociallane-elements' ),
+						'icon'        => [ 'value' => 'eicon-comments', 'library' => 'elementor' ],
+					],
+				],
+				'title_field' => '{{{ title }}}',
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	/*
+	|--------------------------------------------------------------------------
+	| Render
+	|--------------------------------------------------------------------------
+	*/
+
+	protected function render(): void {
+		// 1. Get raw settings
+		$settings = $this->get_settings_for_display();
+
+		// 2. Prepare view data
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_feature_grid_view( $settings, $this->get_id() );
+
+		// 3. Render template
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

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

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

package/packages/widgets/feature-grid/templates/partials/centered-2x2.php

@@ -0,0 +1,69 @@
+<?php
+/**
+ * Partial: Feature Grid – centered 2x2 layout
+ *
+ * Centered header (subtitle as eyebrow, headline, description); 2x2 grid of
+ * features (icon, title, description; no link). Expects $view with classes.
+ *
+ * @package SocialLane_Elements
+ * @since   1.0.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $view ) ) {
+	return;
+}
+
+$section_id = 'feature-grid-' . $view['widget_id'];
+$has_heading = ( $view['show_subtitle'] && ! empty( $view['subtitle'] ) )
+	|| ( $view['show_headline'] && ! empty( $view['headline'] ) )
+	|| ( $view['show_description'] && ! empty( $view['description'] ) );
+$classes = $view['classes'] ?? [];
+?>
+
+<?php // ========== CENTERED 2x2 FEATURE GRID START ========== ?>
+
+<section
+	class="<?php echo esc_attr( $classes['section'] ); ?> py-16 md:py-20 lg:py-24"
+	<?php echo ! empty( $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_subtitle'] && ! empty( $view['subtitle'] ) ) : ?>
+					<p class="<?php echo esc_attr( $classes['eyebrow'] ?? $classes['subtitle'] ); ?> text-sm font-normal mb-2">
+						<?php echo $view['subtitle']; ?>
+					</p>
+				<?php endif; ?>
+
+				<?php if ( $view['show_headline'] && ! empty( $view['headline'] ) ) : ?>
+					<<?php echo $view['headline_tag']; ?>
+						class="<?php echo esc_attr( $classes['headline'] ); ?> text-3xl sm:text-4xl md:text-5xl font-bold font-heading leading-tight mt-0 mb-4"
+					>
+						<?php echo $view['headline']; ?>
+					</<?php echo $view['headline_tag']; ?>>
+				<?php endif; ?>
+
+				<?php if ( $view['show_description'] && ! empty( $view['description'] ) ) : ?>
+					<p class="<?php echo esc_attr( $classes['description'] ); ?> text-base md:text-lg leading-relaxed max-w-2xl mx-auto mt-0 mb-0">
+						<?php echo $view['description']; ?>
+					</p>
+				<?php endif; ?>
+			</header>
+		<?php endif; ?>
+
+		<?php if ( ! empty( $view['features'] ) ) : ?>
+			<div class="grid grid-cols-1 sm:grid-cols-2 gap-8 lg:gap-10 max-w-4xl mx-auto"<?php echo ! empty( $stagger_attrs ) ? ' ' . $stagger_attrs : ''; ?>>
+				<?php foreach ( $view['features'] as $feature ) : ?>
+					<?php include __DIR__ . '/feature-item.php'; ?>
+				<?php endforeach; ?>
+			</div>
+		<?php endif; ?>
+	</div>
+</section>
+
+<?php // ========== CENTERED 2x2 FEATURE GRID END ========== ?>

package/packages/widgets/feature-grid/templates/partials/feature-item.php

@@ -0,0 +1,54 @@
+<?php
+/**
+ * Partial: Feature Grid – single feature item
+ *
+ * Expects $feature (icon, title, description, show_link, link_text, link_url, link_attrs)
+ * and $view['classes'] (title, description, link, icon_box, icon).
+ *
+ * @package SocialLane_Elements
+ * @since   1.0.0
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+if ( empty( $feature ) ) {
+	return;
+}
+
+$classes = $view['classes'] ?? [];
+$icon_class = $classes['icon'] ?? 'w-6 h-6 text-white';
+?>
+<article class="flex flex-col text-left">
+	<?php if ( ! empty( $feature['icon']['value'] ) ) : ?>
+		<div class="<?php echo esc_attr( $classes['icon_box'] ?? 'bg-primary text-white rounded-lg' ); ?> w-12 h-12 flex items-center justify-center flex-shrink-0 mb-4 [&_.e-icon]:w-6 [&_.e-icon]:h-6" aria-hidden="true">
+			<?php \Elementor\Icons_Manager::render_icon( $feature['icon'], [ 'aria-hidden' => 'true', 'class' => $icon_class ] ); ?>
+		</div>
+	<?php endif; ?>
+
+	<?php if ( ! empty( $feature['title'] ) ) : ?>
+		<h3 class="<?php echo esc_attr( $classes['title'] ?? '' ); ?> text-lg md:text-xl font-bold mb-2">
+			<?php echo $feature['title']; ?>
+		</h3>
+	<?php endif; ?>
+
+	<?php if ( ! empty( $feature['description'] ) ) : ?>
+		<p class="<?php echo esc_attr( $classes['description'] ?? '' ); ?> text-sm md:text-base leading-relaxed mb-4">
+			<?php echo $feature['description']; ?>
+		</p>
+	<?php endif; ?>
+
+	<?php if ( ! empty( $feature['show_link'] ) && ! empty( $feature['link_text'] ) ) : ?>
+		<a
+			href="<?php echo esc_url( $feature['link_url'] ); ?>"
+			<?php echo $feature['link_attrs']; ?>
+			class="<?php echo esc_attr( $classes['link'] ?? '' ); ?> inline-flex items-center gap-1.5 text-base rounded"
+		>
+			<span><?php echo $feature['link_text']; ?></span>
+			<svg class="w-4 h-4 flex-shrink-0" aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+			</svg>
+		</a>
+	<?php endif; ?>
+</article>

package/packages/widgets/feature-grid/templates/wrapper.php

@@ -0,0 +1,67 @@
+<?php
+/**
+ * Template: Feature Grid Wrapper
+ *
+ * AVAILABLE DATA ($view):
+ * - layout, grid_class, show_headline, show_subtitle, show_description
+ * - headline, headline_tag, subtitle, description
+ * - features (icon, title, description, show_link, link_text, link_url, link_attrs)
+ * - classes (section, headline, subtitle, description, title, link, icon_box, icon), 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 = 'feature-grid-' . $view['widget_id'];
+$has_heading = ( $view['show_headline'] && ! empty( $view['headline'] ) ) || ( $view['show_subtitle'] && ! empty( $view['subtitle'] ) );
+?>
+
+<?php // ========== FEATURE 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-lg">
+						<?php echo $view['subtitle']; ?>
+					</p>
+				<?php endif; ?>
+			</header>
+		<?php endif; ?>
+
+		<?php if ( ! empty( $view['features'] ) ) : ?>
+			<?php $stagger_attrs = sociallane_stagger_attrs( $anim ); ?>
+			<div class="grid <?php echo esc_attr( $view['grid_class'] ); ?> gap-8 lg:gap-10" <?php echo $stagger_attrs ? ' ' . $stagger_attrs : ''; ?>>
+				<?php foreach ( $view['features'] as $feature ) : ?>
+					<?php include __DIR__ . '/partials/feature-item.php'; ?>
+				<?php endforeach; ?>
+			</div>
+		<?php endif; ?>
+	</div>
+</section>
+
+<?php // ========== FEATURE GRID END ========== ?>