@sociallane/elements 1.0.0

package/packages/widgets/bento-portfolio-4/templates/wrapper.php

@@ -0,0 +1,78 @@
+<?php
+/**
+ * Template: Bento Portfolio Wrapper
+ *
+ * AVAILABLE DATA ($view): layout, header_align, content_align, show_eyebrow, show_headline,
+ * show_subtitle, eyebrow, headline, headline_tag, subtitle, items, 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-portfolio-' . $view['widget_id'];
+$has_heading  = ( $view['show_eyebrow'] && $view['eyebrow'] !== '' ) || ( $view['show_headline'] && $view['headline'] !== '' ) || ( $view['show_subtitle'] && $view['subtitle'] !== '' );
+$items         = $view['items'] ?? [];
+$layout        = $view['layout'] ?? 'grid';
+$classes       = $view['classes'] ?? [];
+$header_align  = $view['header_align'] ?? 'center';
+$header_block  = [ 'left' => 'max-w-3xl mr-auto ml-0', 'center' => 'max-w-3xl mx-auto', 'right' => 'max-w-3xl ml-auto mr-0' ][ $header_align ] ?? 'max-w-3xl mx-auto';
+$header = [
+	'headline_attrs'    => $headline_attrs,
+	'id'                => $section_id,
+	'use_wrapper'       => true,
+	'alignment'         => $header_align,
+	'block_class'       => $header_block,
+	'margin_bottom'     => 'mb-12 md:mb-16',
+	'show_eyebrow'      => $view['show_eyebrow'] && $view['eyebrow'] !== '',
+	'eyebrow'           => $view['eyebrow'] ?? '',
+	'eyebrow_class'     => $classes['eyebrow'] ?? '',
+	'eyebrow_extras'    => 'mb-2',
+	'show_headline'     => $view['show_headline'] && $view['headline'] !== '',
+	'headline'          => $view['headline'] ?? '',
+	'headline_tag'      => $view['headline_tag'] ?? 'h2',
+	'headline_class'    => $classes['headline'] ?? '',
+	'headline_extras'   => 'text-3xl sm:text-4xl md:text-5xl font-normal font-heading leading-relaxed',
+	'show_subtitle'     => $view['show_subtitle'] && $view['subtitle'] !== '',
+	'subtitle'          => $view['subtitle'] ?? '',
+	'subtitle_class'    => $classes['subtitle'] ?? '',
+	'subtitle_extras'   => 'mt-4 text-lg',
+];
+$elements_path = SOCIALLANE_ELEMENTS_PATH . 'elements';
+?>
+
+<?php // ========== BENTO PORTFOLIO START ========== ?>
+
+<section
+	class="<?php echo esc_attr( $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 if ( empty( $items ) ) : ?>
+			<p class="text-neutral-500 dark:text-neutral-400 text-center"><?php esc_html_e( 'Add projects in the widget settings.', 'sociallane-elements' ); ?></p>
+		<?php else : ?>
+			<?php
+			$stagger_attrs = sociallane_stagger_attrs( $anim );
+			$partial_path = __DIR__ . '/partials/portfolio-default-grid.php';
+			if ( file_exists( $partial_path ) ) {
+				include $partial_path;
+			}
+			?>
+		<?php endif; ?>
+	</div>
+</section>
+
+<?php // ========== BENTO PORTFOLIO END ========== ?>

package/packages/widgets/bento-portfolio-5/bento-portfolio-5.php

@@ -0,0 +1,382 @@
+<?php
+/**
+ * Widget: Bento Portfolio
+ *
+ * A portfolio section with optional header and project cards in a bento-style grid.
+ * Each card: image, category tag, title, description, Case study + Live preview buttons.
+ *
+ * @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 Portfolio Widget
+ */
+class Bento_Portfolio_5 extends Widget_Base {
+
+	use Animation_Controls;
+
+	public function get_name(): string {
+		return 'bento-portfolio-5';
+	}
+
+	public function get_title(): string {
+		return esc_html__( 'Bento Portfolio (Two Row)', 'sociallane-elements' );
+	}
+
+	public function get_icon(): string {
+		return 'eicon-gallery-justified';
+	}
+
+	public function get_categories(): array {
+		return [ 'sociallane-cards' ];
+	}
+
+	public function get_keywords(): array {
+		return [ 'portfolio', 'bento', 'grid', 'works', 'projects', 'gallery' ];
+	}
+
+	protected function register_controls(): void {
+		$this->register_header_section();
+		$this->register_layout_section();
+		$this->register_items_section();
+		$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' => 'no',
+			]
+		);
+		$this->add_control(
+			'eyebrow',
+			[
+				'label'       => esc_html__( 'Eyebrow', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'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__( 'Custom works', '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' => 'yes',
+			]
+		);
+		$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. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', 'sociallane-elements' ),
+				'rows'        => 3,
+				'condition'   => [ 'show_subtitle' => 'yes' ],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_layout_section(): void {
+		$this->start_controls_section(
+			'section_layout',
+			[
+				'label' => esc_html__( 'Layout', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'header_align',
+			[
+				'label'   => esc_html__( 'Header alignment', 'sociallane-elements' ),
+				'type'    => Controls_Manager::CHOOSE,
+				'default' => 'center',
+				'options' => [
+					'left'   => [
+						'title' => esc_html__( 'Left', 'sociallane-elements' ),
+						'icon'  => 'eicon-text-align-left',
+					],
+					'center' => [
+						'title' => esc_html__( 'Center', 'sociallane-elements' ),
+						'icon'  => 'eicon-text-align-center',
+					],
+					'right'  => [
+						'title' => esc_html__( 'Right', 'sociallane-elements' ),
+						'icon'  => 'eicon-text-align-right',
+					],
+				],
+			]
+		);
+
+		$this->add_control(
+			'content_align',
+			[
+				'label'   => esc_html__( 'Card content alignment', 'sociallane-elements' ),
+				'type'    => Controls_Manager::CHOOSE,
+				'default' => 'left',
+				'options' => [
+					'left'   => [
+						'title' => esc_html__( 'Left', 'sociallane-elements' ),
+						'icon'  => 'eicon-text-align-left',
+					],
+					'center' => [
+						'title' => esc_html__( 'Center', 'sociallane-elements' ),
+						'icon'  => 'eicon-text-align-center',
+					],
+					'right'  => [
+						'title' => esc_html__( 'Right', 'sociallane-elements' ),
+						'icon'  => 'eicon-text-align-right',
+					],
+				],
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	private function register_items_section(): void {
+		$repeater = new Repeater();
+
+		$repeater->add_control(
+			'image',
+			[
+				'label'   => esc_html__( 'Image', 'sociallane-elements' ),
+				'type'    => Controls_Manager::MEDIA,
+				'default' => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
+			]
+		);
+		$repeater->add_control(
+			'image_alt',
+			[
+				'label' => esc_html__( 'Image Alt Text', 'sociallane-elements' ),
+				'type'  => Controls_Manager::TEXT,
+			]
+		);
+		$repeater->add_control(
+			'show_category',
+			[
+				'label'   => esc_html__( 'Show Category', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$repeater->add_control(
+			'category_label',
+			[
+				'label'       => esc_html__( 'Category', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'placeholder' => esc_html__( 'Figma design', 'sociallane-elements' ),
+				'condition'   => [ 'show_category' => 'yes' ],
+			]
+		);
+		$repeater->add_control(
+			'title',
+			[
+				'label'       => esc_html__( 'Title', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Agency Landing Page', 'sociallane-elements' ),
+				'label_block' => true,
+			]
+		);
+		$repeater->add_control(
+			'show_description',
+			[
+				'label'   => esc_html__( 'Show Description', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$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.', 'sociallane-elements' ),
+				'rows'        => 2,
+				'condition'   => [ 'show_description' => 'yes' ],
+			]
+		);
+		$repeater->add_control(
+			'show_case_study',
+			[
+				'label'   => esc_html__( 'Show Case study button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$repeater->add_control(
+			'case_study_text',
+			[
+				'label'       => esc_html__( 'Case study text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Case study', 'sociallane-elements' ),
+				'condition'   => [ 'show_case_study' => 'yes' ],
+			]
+		);
+		$repeater->add_control(
+			'case_study_url',
+			[
+				'label'     => esc_html__( 'Case study URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [ 'show_case_study' => 'yes' ],
+			]
+		);
+		$repeater->add_control(
+			'show_live_preview',
+			[
+				'label'   => esc_html__( 'Show Live preview button', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SWITCHER,
+				'default' => 'yes',
+			]
+		);
+		$repeater->add_control(
+			'live_preview_text',
+			[
+				'label'       => esc_html__( 'Live preview text', 'sociallane-elements' ),
+				'type'        => Controls_Manager::TEXT,
+				'default'     => esc_html__( 'Live preview', 'sociallane-elements' ),
+				'condition'   => [ 'show_live_preview' => 'yes' ],
+			]
+		);
+		$repeater->add_control(
+			'live_preview_url',
+			[
+				'label'     => esc_html__( 'Live preview URL', 'sociallane-elements' ),
+				'type'      => Controls_Manager::URL,
+				'condition' => [ 'show_live_preview' => 'yes' ],
+			]
+		);
+
+		$this->start_controls_section(
+			'section_items',
+			[
+				'label' => esc_html__( 'Projects', 'sociallane-elements' ),
+				'tab'   => Controls_Manager::TAB_CONTENT,
+			]
+		);
+
+		$this->add_control(
+			'items',
+			[
+				'label'       => esc_html__( 'Projects', 'sociallane-elements' ),
+				'type'        => Controls_Manager::REPEATER,
+				'fields'      => $repeater->get_controls(),
+				'default'     => $this->get_default_items(),
+				'title_field' => '{{{ title }}}',
+			]
+		);
+		$this->add_control(
+			'card_button_style',
+			[
+				'label'   => esc_html__( 'Card button style', 'sociallane-elements' ),
+				'type'    => Controls_Manager::SELECT,
+				'default' => 'primary',
+				'options' => sociallane_get_button_preset_options(),
+			]
+		);
+
+		$this->end_controls_section();
+	}
+
+	/**
+	 * Default repeater items (6 portfolio cards)
+	 *
+	 * @return array
+	 */
+	private function get_default_items(): array {
+		$titles = [
+			'Agency Landing Page',
+			esc_html__( 'Analytics tool', 'sociallane-elements' ),
+			'Task management system',
+			'Flowbite\'s dashboard',
+			'NGO Landing Page',
+			'Mail management system',
+		];
+		$categories = [
+			esc_html__( 'Figma design', 'sociallane-elements' ),
+			esc_html__( 'Front-end', 'sociallane-elements' ),
+			esc_html__( 'Back-end', 'sociallane-elements' ),
+			esc_html__( 'Figma design', 'sociallane-elements' ),
+			esc_html__( 'Figma design', 'sociallane-elements' ),
+			esc_html__( 'Front-end', 'sociallane-elements' ),
+		];
+		$defaults = [];
+		foreach ( $titles as $i => $title ) {
+			$defaults[] = [
+				'title'            => $title,
+				'category_label'  => $categories[ $i ],
+				'show_category'   => 'yes',
+				'show_description'=> 'yes',
+				'description'     => esc_html__( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.', 'sociallane-elements' ),
+				'show_case_study' => 'yes',
+				'case_study_text' => esc_html__( 'Case study', 'sociallane-elements' ),
+				'show_live_preview' => 'yes',
+				'live_preview_text' => esc_html__( 'Live preview', 'sociallane-elements' ),
+				'image'           => [ 'url' => \Elementor\Utils::get_placeholder_image_src() ],
+			];
+		}
+		return $defaults;
+	}
+
+	protected function render(): void {
+		$settings = $this->get_settings_for_display();
+		require_once __DIR__ . '/data/view.php';
+		$view = prepare_bento_portfolio_5_view( $settings, $this->get_id() );
+		include __DIR__ . '/templates/wrapper.php';
+	}
+}

package/packages/widgets/bento-portfolio-5/data/view.php

@@ -0,0 +1,91 @@
+<?php
+/**
+ * Data Preparation: Bento Portfolio
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+/**
+ * Prepare view data for Bento Portfolio widget
+ *
+ * @param array  $settings  Raw Elementor settings
+ * @param string $widget_id  Unique widget ID
+ * @return array Template-ready data
+ */
+function prepare_bento_portfolio_5_view( array $settings, string $widget_id ): array {
+	$layout = 'two-row';
+
+	$fields       = sociallane_extract_fields( $settings, [
+		'eyebrow'  => [ 'default_show' => 'no' ],
+		'headline' => [],
+		'subtitle' => [],
+	] );
+	$headline_tag = sociallane_validate_heading_tag( $settings );
+	$card_preset  = function_exists( 'sociallane_parse_button_preset' ) ? sociallane_parse_button_preset( $settings['card_button_style'] ?? 'primary' ) : [ 'variant' => 'primary', 'size' => 'md' ];
+
+	$items = sociallane_process_repeater( $settings['items'] ?? [], function ( $item ) use ( $card_preset ) {
+		$item  = is_array( $item ) ? $item : [];
+		$image = sociallane_prepare_image_data(
+			isset( $item['image'] ) && is_array( $item['image'] ) ? $item['image'] : [],
+			[
+				'alt'        => $item['image_alt'] ?? '',
+				'sizes'      => '(max-width: 768px) 100vw, 33vw',
+				'loading'    => 'lazy',
+				'image_size' => 'large',
+			]
+		);
+
+		$case_study_url   = isset( $item['case_study_url'] ) && is_array( $item['case_study_url'] ) ? $item['case_study_url'] : [];
+		$live_preview_url = isset( $item['live_preview_url'] ) && is_array( $item['live_preview_url'] ) ? $item['live_preview_url'] : [];
+		$link_url         = ! empty( $live_preview_url['url'] ) ? $live_preview_url : $case_study_url;
+		$link             = sociallane_prepare_link_attrs( $link_url );
+
+		$show_category   = ( $item['show_category'] ?? 'yes' ) === 'yes';
+		$show_description = ( $item['show_description'] ?? 'yes' ) === 'yes';
+		$live_preview_text = trim( $item['live_preview_text'] ?? '' );
+		$button_label    = $live_preview_text !== '' ? $live_preview_text : esc_html__( 'Live preview', 'sociallane-elements' );
+
+		return [
+			'image'           => $image,
+			'title'           => esc_html( $item['title'] ?? '' ),
+			'link_href'       => $link['url'],
+			'link_attrs'      => $link['attrs'],
+			'button_label'    => esc_html( $button_label ),
+			'button_variant'  => $card_preset['variant'],
+			'button_size'     => $card_preset['size'],
+			'show_category'   => $show_category,
+			'category_label'  => esc_html( $show_category ? trim( $item['category_label'] ?? '' ) : '' ),
+			'show_description' => $show_description,
+			'description'     => esc_html( $show_description ? trim( $item['description'] ?? '' ) : '' ),
+		];
+	} );
+
+	$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 uppercase tracking-wider text-sm font-normal',
+		'headline'   => 'text-neutral-900 dark:text-neutral-200',
+		'subtitle'   => 'text-zinc-900 leading-8 dark:text-neutral-200',
+		'card'       => 'bg-white dark:bg-[#21283B] rounded-2xl border border-neutral-200 dark:border-neutral-700/50 shadow-sm dark:shadow-none overflow-hidden',
+		'card_title' => 'text-neutral-900 leading-relaxed dark:text-neutral-200 font-normal',
+		'card_desc'  => 'text-neutral-600 dark:text-neutral-400',
+	];
+
+	$header_align  = sociallane_validate_option( $settings['header_align'] ?? 'center', [ 'left', 'center', 'right' ], 'center' );
+	$content_align = sociallane_validate_option( $settings['content_align'] ?? 'left', [ 'left', 'center', 'right' ], 'left' );
+
+	return array_merge( $fields, [
+		'layout'        => $layout,
+		'header_align'  => $header_align,
+		'content_align' => $content_align,
+		'headline_tag'  => $headline_tag,
+		'items'         => $items,
+		'classes'       => $classes,
+		'widget_id'     => $widget_id,
+		'animation'     => $animation,
+	] );
+}

package/packages/widgets/bento-portfolio-5/package.json

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

package/packages/widgets/bento-portfolio-5/templates/partials/portfolio-card.php

@@ -0,0 +1,84 @@
+<?php
+/**
+ * Bento Portfolio – Simple card: full-bleed image, title bottom-left, circle arrow button bottom-right.
+ * Fills the bento cell (h-full) so it aligns with the grid.
+ *
+ * @package SocialLane_Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+
+$card            = is_array( $card ?? null ) ? $card : [];
+$cls             = is_array( $classes ?? null ) ? $classes : [];
+$card_image      = isset( $card['image'] ) && is_array( $card['image'] ) ? $card['image'] : [];
+$title           = $card['title'] ?? '';
+$elements_path   = dirname( __DIR__, 4 ) . '/elements';
+$link_href       = $card['link_href'] ?? '#';
+$link_attrs      = $card['link_attrs'] ?? '';
+$button_label    = $card['button_label'] ?? esc_html__( 'Live preview', 'sociallane-elements' );
+$card_class      = $cls['card'] ?? 'bg-white dark:bg-[#21283B] rounded-2xl border border-neutral-200 dark:border-neutral-700/50 shadow-sm dark:shadow-none overflow-hidden';
+$show_category   = ! empty( $card['show_category'] );
+$category_label  = $card['category_label'] ?? '';
+$show_description = ! empty( $card['show_description'] );
+$description      = $card['description'] ?? '';
+$content_align    = $content_align ?? 'left';
+$align_col        = [ 'left' => 'items-start', 'center' => 'items-center', 'right' => 'items-end' ][ $content_align ] ?? 'items-start';
+$align_text       = [ 'left' => 'text-left', 'center' => 'text-center', 'right' => 'text-right' ][ $content_align ] ?? 'text-left';
+$align_row        = [ 'left' => 'justify-between', 'center' => 'justify-center', 'right' => 'justify-end' ][ $content_align ] ?? 'justify-between';
+?>
+
+<article class="<?php echo esc_attr( $card_class ); ?> group/card relative flex-1 min-h-0 w-full min-h-[240px] md:min-h-0">
+	<?php if ( ! empty( $card_image['src'] ) ) : ?>
+		<?php
+		$image = $card_image;
+		$image['class'] = ( $image['class'] ?? '' ) . ' absolute inset-0 w-full h-full object-cover grayscale transition-[filter] duration-300 ease-out group-hover/card:grayscale-0';
+		include $elements_path . '/image/templates/render.php';
+		?>
+	<?php else : ?>
+		<div class="absolute inset-0 bg-neutral-200 dark:bg-neutral-700" aria-hidden="true"></div>
+	<?php endif; ?>
+
+	<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-black/0 to-transparent pointer-events-none" aria-hidden="true"></div>
+
+	<div class="absolute inset-0 pointer-events-none opacity-0 group-hover/card:opacity-100 transition-opacity duration-300 ease-out bg-[linear-gradient(to_top,var(--color-blue-chill-950)_0%,transparent_50%)]" aria-hidden="true"></div>
+
+	<?php if ( $show_category && $category_label !== '' ) : ?>
+		<div class="absolute top-0 left-0 p-4 md:p-5">
+			<span class="inline-block px-3 py-1.5 rounded-full text-sm font-normal bg-white text-dark-900 mix-blend-difference backdrop-blur-sm border border-black/10 shadow-sm">
+				<?php echo esc_html( $category_label ); ?>
+			</span>
+		</div>
+	<?php endif; ?>
+
+	<div class="absolute bottom-0 left-0 right-0 p-4 md:p-5 flex flex-col <?php echo esc_attr( $align_col ); ?> justify-end gap-2">
+		<?php if ( $show_description && $description !== '' ) : ?>
+			<p class="text-white text-sm md:text-base line-clamp-2 drop-shadow-md transition-[opacity,transform] duration-300 ease-out opacity-0 translate-y-2 group-hover/card:opacity-100 group-hover/card:translate-y-0 <?php echo esc_attr( $align_text ); ?>">
+				<?php echo esc_html( $description ); ?>
+			</p>
+		<?php endif; ?>
+		<div class="flex <?php echo esc_attr( $align_row ); ?> items-end gap-3 shrink-0 w-full">
+			<div class="min-w-0">
+				<?php if ( $title !== '' ) : ?>
+					<h3 class="text-lg md:text-xl font-normal font-heading text-white truncate <?php echo esc_attr( $align_text ); ?>">
+						<?php echo $title; ?>
+					</h3>
+				<?php endif; ?>
+			</div>
+		<a
+			href="<?php echo esc_url( $link_href ); ?>"
+			<?php echo $link_attrs; ?>
+			class="group shrink-0 h-10 md:h-12 rounded-full bg-blue-chill-950 dark:bg-blue-chill-300 dark:border-blue-chill-300/30 dark:text-blue-chill-950 text-blue-chill-300 border border-blue-chill-300/30 inline-flex items-center justify-end overflow-hidden transition-[max-width] duration-300 ease-out max-w-[2.5rem] md:max-w-[3rem] hover:max-w-[14rem] focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-neutral-900 pl-2 pr-2 md:pl-3 md:pr-3 hover:pl-4 hover:pr-4 md:hover:pl-5 md:hover:pr-5"
+			aria-label="<?php esc_attr_e( 'View project', 'sociallane-elements' ); ?>"
+		>
+			<span class="whitespace-nowrap overflow-hidden max-w-0 opacity-0 group-hover:max-w-[8rem] group-hover:opacity-100 transition-[max-width,opacity] duration-500 ease-out text-sm md:text-base font-medium mr-1.5 md:mr-2">
+				<?php echo esc_html( $button_label ); ?>
+			</span>
+			<svg class="w-4 h-4 md:w-5 md:h-5 shrink-0 transition-[transform] duration-500 ease-out [transform:rotate(0deg)] group-hover:[transform:rotate(45deg)]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+				<path d="M7 17L17 7M17 7H7M17 7V17"/>
+			</svg>
+		</a>
+		</div>
+	</div>
+</article>