@extends('layout.front.master')

@section('title', __('Inicio'))
@section('description', config('site.seo.description'))
@section('keywords', config('site.seo.keywords'))

{{-- Open Graph Meta Tags --}}
@section('og_title', config('site.og.title'))
@section('og_description', config('site.og.description'))
@section('og_image', asset(config('site.og.image')))
@section('og_type', 'website')
@section('og_url', url()->current())

{{-- Twitter Card Meta Tags --}}
@section('twitter_title', config('site.name'))
@section('twitter_description', config('site.twitter.description'))
@section('twitter_image', asset('cd-project/img/meta-tags/twitter-image.png'))

@section('content')

<div role="main" class="main">

    {{-- Hero Section --}}
    <div class="container">
        <div class="row align-items-center py-4">
            <div class="col-lg-7 text-center text-lg-start">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                    <h1 class="text-10 text-lg-12 font-weight-semibold line-height-3">
                        {{ config('site.welcome.hero_title', 'Capturing Life\'s Moments,') }}
                        <span class="custom-avatar-1 d-none d-md-inline-block bg-quaternary">
                            <img src="{{ asset('template/img/demos/accounting-2/avatars/avatar-1.png') }}" loading="lazy" class="img-fluid" alt="">
                        </span>
                        {{ config('site.welcome.hero_subtitle', 'One Journey at a Time.') }}
                    </h1>
                    <p class="text-4 text-lg-5 mt-3 text-color-grey line-height-6">
                        {{ config('site.welcome.hero_description', 'Sharing stories, reflections, and adventures through my lens and experiences.') }}
                    </p>
                </div>
            </div>
            <div class="col-lg-5 text-center text-lg-start">
                <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="300">
                    <div class="d-flex justify-content-center justify-content-lg-end align-items-center flex-column flex-lg-row">
                        <a href="{{ route('front.about') }}" class="btn btn-rounded btn-primary box-shadow-7 font-weight-medium px-4 py-3 text-2-5 btn-swap-1 mb-3 mb-lg-0 d-flex" data-clone-element="1">
                            <span>{{ __('Discover My Journey') }}</span>
                        </a>
                        <a href="{{ route('gallery') }}" class="btn btn-rounded btn-secondary border-0 box-shadow-7 font-weight-medium px-4 py-3 text-2-5 btn-swap-1 ms-lg-3 d-flex" data-clone-element="1">
                            <span>{{ __('Explore Gallery') }}</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Background Section with SVG --}}
    <section class="section section-background m-0 p-relative overflow-hidden custom-el-10" style="background-image: url({{ asset('template/img/demos/accounting-2/bg/bg-1.jpg') }});">
        <div class="custom-pos-1 p-absolute">
            <img class="img-fluid" src="{{ asset('template/img/demos/accounting-2/svg/curves.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-quaternary opacity-2'}" >
        </div>
        <div class="custom-pos-2 p-absolute">
            <img class="img-fluid" src="{{ asset('template/img/demos/accounting-2/bg/bg-2.png') }}" alt="" >
        </div>
    </section>

    {{-- Glass Morphism Card with Tabs --}}
    <div class="custom-el-1 bg-color-before-primary">
        <div class="container py-4">
            <div class="row">
                <div class="col mb-5 mb-lg-0 pt-4">
                    <div class="card card-glass custom-card-glass-1 border-0 custom-border-radius-1 mt-5">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <div class="tabs tabs-bottom tabs-center tabs-simple mt-3 mb-0 pb-0">
                                        <div class="tab-content">
                                            {{-- Tab 1: Web Development --}}
                                            <div class="tab-pane active" id="tabsNavigationSimple1">
                                                <div class="row align-items-center pt-3 pb-5">
                                                    <div class="col-lg-4 col-xl-4 ps-5 text-center text-lg-start pb-4 pb-lg-0">
                                                        <h2 class="font-weight-semibold text-10 line-height-2 mt-3 mb-2">
                                                            {{ config('site.welcome.tab1_title', 'COMPANIA DIGITAL') }}<br>
                                                            <em class="p-relative z-index-1 fst-normal">
                                                                {{ config('site.welcome.tab1_emphasis', 'Web Solutions') }}
                                                                <span class="appear-animation" data-appear-animation="highlightScribble1">
                                                                    <svg class="highlight-scribble-1" viewBox="0 0 760 60" preserveAspectRatio="none">
                                                                        <path d="M19,49C75.19,30.63,152,21,317.26,17.27c55.43-.41,198.33-2.08,407.85,12.53" stroke="#212529" pathLength="1" stroke-width="14" fill="none"></path>
                                                                    </svg>
                                                                </span>
                                                            </em>
                                                        </h2>
                                                    </div>
                                                    <div class="col-lg-4 col-xxl-5 text-center text-lg-start pb-4 pb-lg-0">
                                                        <p class="text-4">
                                                            {{ config('site.welcome.tab1_description', 'Through COMPANIA DIGITAL, I build scalable web solutions for brands. Creating digital experiences that combine technology and creativity to help businesses thrive online.') }}
                                                            <br>
                                                            <a href="{{ url('/compania-digital') }}" class="pt-3 font-weight-medium d-inline-block text-decoration-underline">{{ __('See My Work') }}</a>
                                                        </p>
                                                    </div>
                                                    <div class="col-lg-4 col-xxl-3 text-center">
                                                        <div class="d-flex justify-content-center">
                                                            <div class="rounded-circle bg-color-tertiary custom-el-2 p-relative">
                                                                <div class="p-absolute transform3dxy-n50 left-50pct top-50pct">
                                                                    <div class="me-4">
                                                                        <div class="anim-up-down-infinite p-relative bottom-8" style="animation-duration: 1200ms;">
                                                                            <img src="{{ asset('template/img/demos/accounting-2/icons/icon-5.svg') }}" width="40" height="40" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}" />
                                                                        </div>
                                                                        <strong class="text-9 n-ls-2 text-dark">{{ config('site.welcome.tab1_stat', '95') }}<span class="text-1">%</span></strong>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="rounded-circle bg-color-secondary custom-el-3 p-relative">
                                                                <div class="p-absolute transform3dxy-n50 left-50pct top-50pct">
                                                                    <span class="opacity-3 z-index-1 p-absolute">
                                                                        <img src="{{ asset('template/img/demos/accounting-2/icons/icon-6.svg') }}" width="110" height="110" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark p-relative right-15'}" />
                                                                    </span>
                                                                    <span class="text-4 p-relative text-light line-height-1 z-index-2">
                                                                        {{ config('site.welcome.tab1_stat_text', 'Projects delivered with excellence.') }}
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- Tab 2: Blog & Thoughts --}}
                                            <div class="tab-pane" id="tabsNavigationSimple2">
                                                <div class="row align-items-center pt-3 pb-5">
                                                    <div class="col-lg-4 col-xl-4 ps-5 text-center text-lg-start pb-4 pb-lg-0">
                                                        <h2 class="font-weight-semibold text-10 line-height-2 mt-3 mb-2">
                                                            <em class="p-relative z-index-1 fst-normal">
                                                                {{ config('site.welcome.tab2_title', 'Blog &') }}<br>
                                                                {{ config('site.welcome.tab2_emphasis', 'Thoughts') }}
                                                                <span class="appear-animation" data-appear-animation="highlightScribble1">
                                                                    <svg class="highlight-scribble-1" viewBox="0 0 760 60" preserveAspectRatio="none">
                                                                        <path d="M19,49C75.19,30.63,152,21,317.26,17.27c55.43-.41,198.33-2.08,407.85,12.53" stroke="#212529" pathLength="1" stroke-width="14" fill="none"></path>
                                                                    </svg>
                                                                </span>
                                                            </em>
                                                        </h2>
                                                    </div>
                                                    <div class="col-lg-4 col-xxl-5 text-center text-lg-start pb-4 pb-lg-0">
                                                        <p class="text-4">
                                                            {{ config('site.welcome.tab2_description', 'Sharing reflections, insights, and stories from my journey as an entrepreneur, developer, and adventurer. Thoughts on technology, creativity, travel, and the intersection of work and life.') }}
                                                            <br>
                                                            <a href="{{ route('blog.index') }}" class="pt-3 font-weight-medium d-inline-block text-decoration-underline">{{ __('Read My Thoughts') }}</a>
                                                        </p>
                                                    </div>
                                                    <div class="col-lg-3 text-center">
                                                        <div class="d-flex justify-content-center">
                                                            <div class="rounded-circle bg-color-tertiary custom-el-2 p-relative">
                                                                <div class="p-absolute transform3dxy-n50 left-50pct top-50pct">
                                                                    <div class="me-4">
                                                                        <div class="anim-up-down-infinite p-relative bottom-8" style="animation-duration: 1200ms;">
                                                                            <img src="{{ asset('template/img/demos/accounting-2/icons/icon-5.svg') }}" width="40" height="40" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}" />
                                                                        </div>
                                                                        <strong class="text-9 n-ls-2 text-dark">{{ config('site.welcome.tab2_stat', '98') }}<span class="text-1">%</span></strong>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="rounded-circle bg-color-secondary custom-el-3 p-relative">
                                                                <div class="p-absolute transform3dxy-n50 left-50pct top-50pct">
                                                                    <span class="opacity-3 z-index-1 p-absolute">
                                                                        <img src="{{ asset('template/img/demos/accounting-2/icons/icon-6.svg') }}" width="110" height="110" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark p-relative right-15'}" />
                                                                    </span>
                                                                    <span class="text-4 p-relative text-light line-height-1 z-index-2">
                                                                        {{ config('site.welcome.tab2_stat_text', 'Stories shared through my lens.') }}
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- Tab 3: Gallery & Photography --}}
                                            <div class="tab-pane" id="tabsNavigationSimple3">
                                                <div class="row align-items-center pt-3 pb-5">
                                                    <div class="col-lg-4 col-xl-4 ps-5 text-center text-lg-start pb-4 pb-lg-0">
                                                        <h2 class="font-weight-semibold text-10 line-height-2 mt-3 mb-2">
                                                            {{ config('site.welcome.tab3_title', 'Gallery &') }}<br>
                                                            <em class="p-relative z-index-1 fst-normal">
                                                                {{ config('site.welcome.tab3_emphasis', 'Photography') }}
                                                                <span class="appear-animation" data-appear-animation="highlightScribble1">
                                                                    <svg class="highlight-scribble-1" viewBox="0 0 760 60" preserveAspectRatio="none">
                                                                        <path d="M19,49C75.19,30.63,152,21,317.26,17.27c55.43-.41,198.33-2.08,407.85,12.53" stroke="#212529" pathLength="1" stroke-width="14" fill="none"></path>
                                                                    </svg>
                                                                </span>
                                                            </em>
                                                        </h2>
                                                    </div>
                                                    <div class="col-lg-4 col-xxl-5 text-center text-lg-start pb-4 pb-lg-0">
                                                        <p class="text-4">
                                                            {{ config('site.welcome.tab3_description', 'Captured moments from the heights of mountain peaks to the vibrant streets of cities. My content offers a unique perspective through photography and visual storytelling.') }}
                                                            <br>
                                                            <a href="{{ route('gallery') }}" class="pt-3 font-weight-medium d-inline-block text-decoration-underline">{{ __('Explore Gallery') }}</a>
                                                        </p>
                                                    </div>
                                                    <div class="col-lg-3 text-center">
                                                        <div class="d-flex justify-content-center">
                                                            <div class="rounded-circle bg-color-tertiary custom-el-2 p-relative">
                                                                <div class="p-absolute transform3dxy-n50 left-50pct top-50pct">
                                                                    <div class="me-4">
                                                                        <div class="anim-up-down-infinite p-relative bottom-8" style="animation-duration: 1200ms;">
                                                                            <img src="{{ asset('template/img/demos/accounting-2/icons/icon-5.svg') }}" width="40" height="40" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}" />
                                                                        </div>
                                                                        <strong class="text-9 n-ls-2 text-dark">{{ config('site.welcome.tab3_stat', '97') }}<span class="text-1">%</span></strong>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="rounded-circle bg-color-secondary custom-el-3 p-relative">
                                                                <div class="p-absolute transform3dxy-n50 left-50pct top-50pct">
                                                                    <span class="opacity-3 z-index-1 p-absolute">
                                                                        <img src="{{ asset('template/img/demos/accounting-2/icons/icon-6.svg') }}" width="110" height="110" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark p-relative right-15'}" />
                                                                    </span>
                                                                    <span class="text-4 p-relative text-light line-height-1 z-index-2">
                                                                        {{ config('site.welcome.tab3_stat_text', 'Moments captured through my lens.') }}
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            {{-- Tab 4: Drone Photography --}}
                                            <div class="tab-pane" id="tabsNavigationSimple4">
                                                <div class="row align-items-center pt-3 pb-5">
                                                    <div class="col-lg-4 col-xl-4 ps-5 text-center text-lg-start pb-4 pb-lg-0">
                                                        <h2 class="font-weight-semibold text-10 line-height-2 mt-3 mb-2">
                                                            {{ config('site.welcome.tab4_title', 'Drone') }}<br>
                                                            <em class="p-relative z-index-1 fst-normal">
                                                                {{ config('site.welcome.tab4_emphasis', 'Photography') }}
                                                                <span class="appear-animation" data-appear-animation="highlightScribble1">
                                                                    <svg class="highlight-scribble-1" viewBox="0 0 760 60" preserveAspectRatio="none">
                                                                        <path d="M19,49C75.19,30.63,152,21,317.26,17.27c55.43-.41,198.33-2.08,407.85,12.53" stroke="#212529" pathLength="1" stroke-width="14" fill="none"></path>
                                                                    </svg>
                                                                </span>
                                                            </em>
                                                        </h2>
                                                    </div>
                                                    <div class="col-lg-4 col-xxl-5 text-center text-lg-start pb-4 pb-lg-0">
                                                        <p class="text-4">
                                                            {{ config('site.welcome.tab4_description', 'Beyond work, I\'m passionate about capturing the world through my drone. Sharing unique aerial perspectives and breathtaking views from my travels and adventures.') }}
                                                            <br>
                                                            <a href="{{ route('gallery') }}" class="pt-3 font-weight-medium d-inline-block text-decoration-underline">{{ __('View Aerial Work') }}</a>
                                                        </p>
                                                    </div>
                                                    <div class="col-lg-3 text-center">
                                                        <div class="d-flex justify-content-center">
                                                            <div class="rounded-circle bg-color-tertiary custom-el-2 p-relative">
                                                                <div class="p-absolute transform3dxy-n50 left-50pct top-50pct">
                                                                    <div class="me-4">
                                                                        <div class="anim-up-down-infinite p-relative bottom-8" style="animation-duration: 1200ms;">
                                                                            <img src="{{ asset('template/img/demos/accounting-2/icons/icon-5.svg') }}" width="40" height="40" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}" />
                                                                        </div>
                                                                        <strong class="text-9 n-ls-2 text-dark">{{ config('site.welcome.tab4_stat', '96') }}<span class="text-1">%</span></strong>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            <div class="rounded-circle bg-color-secondary custom-el-3 p-relative">
                                                                <div class="p-absolute transform3dxy-n50 left-50pct top-50pct">
                                                                    <span class="opacity-3 z-index-1 p-absolute">
                                                                        <img src="{{ asset('template/img/demos/accounting-2/icons/icon-6.svg') }}" width="110" height="110" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark p-relative right-15'}" />
                                                                    </span>
                                                                    <span class="text-4 p-relative text-light line-height-1 z-index-2">
                                                                        {{ config('site.welcome.tab4_stat_text', 'Aerial perspectives captured.') }}
                                                                    </span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        {{-- Tab Navigation --}}
                                        <ul class="nav nav-tabs justify-content-around border-top border-color-grey-400 mb-0 pt-3">
                                            <li class="nav-item mb-0 w-100 w-lg-auto">
                                                <a class="nav-link border-0 text-5 active" href="#tabsNavigationSimple1" data-bs-toggle="tab">
                                                    <i class="custom-font-icon-1 text-5 p-relative top-8 me-1"></i> {{ __('Web Development') }}
                                                </a>
                                            </li>
                                            <li class="nav-item mb-0 w-100 w-lg-auto">
                                                <a class="nav-link border-0 text-5" href="#tabsNavigationSimple2" data-bs-toggle="tab">
                                                    <i class="custom-font-icon-2 text-5 p-relative top-8 me-1"></i> {{ __('Blog') }}
                                                </a>
                                            </li>
                                            <li class="nav-item mb-0 w-100 w-lg-auto">
                                                <a class="nav-link border-0 text-5" href="#tabsNavigationSimple3" data-bs-toggle="tab">
                                                    <i class="custom-font-icon-3 text-5 p-relative top-8 me-1"></i> {{ __('Gallery') }}
                                                </a>
                                            </li>
                                            <li class="nav-item mb-0 w-100 w-lg-auto">
                                                <a class="nav-link border-0 text-5" href="#tabsNavigationSimple4" data-bs-toggle="tab">
                                                    <i class="custom-font-icon-4 text-5 p-relative top-8 me-1"></i> {{ __('Drone') }}
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Who Is Coke Colombres Section --}}
    <div class="container pt-5 mt-3">
        <div class="row">
            <div class="col text-center">
                <span class="badge bg-light text-dark border border-all-light box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2">
                    <span class="d-inline-flex py-1 px-2">{{ config('site.welcome.about_badge', 'About Me') }}</span>
                </span>
                <div class="gsap-text-wrapper overflow-hidden" data-gsap-text-anim-1 data-plugin-options="{'duration': 2.0}">
                    <h2 class="text-9 text-lg-10 font-weight-semibold line-height-1 mb-3 mt-3">
                        {{ config('site.welcome.about_title', 'Who Is Coke Colombres?') }}
                    </h2>
                </div>
                <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                    <p class="text-4 line-height-7">{{ config('site.welcome.about_description', 'I\'m an entrepreneur, developer, project manager and also adventurer. Through COMPANIA DIGITAL, I build scalable web solutions for brands. But beyond work, I\'m passionate about capturing the world through my drone and sharing reflections from my travels.') }}</p>
                    <p class="text-4 line-height-7 font-weight-bold mt-3">{{ config('site.welcome.about_tagline', 'Welcome to a space where tech and creativity meet.') }}</p>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            @php
                $passions = [
                    [
                        'title' => 'Web Development',
                        'description' => 'Building scalable web solutions for brands through COMPANIA DIGITAL. Creating digital experiences that combine technology and creativity.',
                        'image' => 'generic-1.png',
                        'color' => 'quaternary',
                        'delay' => 0,
                        'link' => url('/compania-digital')
                    ],
                    [
                        'title' => 'Photography & Travel',
                        'description' => 'Capturing the world through my lens. Sharing stories, reflections, and adventures from my travels and experiences.',
                        'image' => 'generic-2.png',
                        'color' => 'primary',
                        'delay' => 300,
                        'link' => route('gallery')
                    ],
                    [
                        'title' => 'Drone Photography',
                        'description' => 'Passionate about capturing unique aerial perspectives. Sharing breathtaking views from my adventures and travels.',
                        'image' => 'generic-3.png',
                        'color' => 'secondary',
                        'delay' => 600,
                        'link' => route('gallery')
                    ]
                ];
            @endphp
            @foreach($passions as $passion)
                <div class="col-lg-4 mb-4 mb-lg-0">
                    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $passion['delay'] }}">
                        <div class="card custom-card-1 border-radius-2 bg-color-light box-shadow-1 box-shadow-1-hover">
                            <div class="card-body overflow-hidden">
                                <div class="custom-card-1-curves">
                                    <img class="img-fluid" src="{{ asset('template/img/demos/accounting-2/svg/curves-2.svg') }}" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-{{ $passion['color'] }}'}" >
                                </div>
                                <span class="rounded-circle bg-color-{{ $passion['color'] }} d-inline-block overflow-hidden">
                                    <img src="{{ asset('template/img/demos/accounting-2/generic/' . $passion['image']) }}" loading="lazy" class="img-fluid p-relative z-index-2 rounded-circle" width="100" alt="">
                                </span>
                                <h4 class="my-2 text-5-5 pt-1 pb-2">{{ $passion['title'] }}</h4>
                                <p class="card-text text-3-5">{{ $passion['description'] }}</p>
                                <div class="d-grid pb-3">
                                    <a href="{{ $passion['link'] }}" class="btn btn-transparent border-0 text-start btn-xl btn-with-arrow-solid btn-with-arrow-sm p-0">
                                        <strong class="d-inline-flex font-weight-semibold text-primary text-decoration-underline me-3 text-2-5">{{ __('Explore') }}</strong>
                                        <span class="bg-primary box-shadow-6 right-0"><i class="fa-solid fa-arrow-right text-light text-1"></i></span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Counters --}}
        <div class="row counters justify-content-center m-5">
            @php
                $counters = [
                    ['value' => config('site.welcome.stat_1_value', '100'), 'label' => config('site.welcome.stat_1_label', 'Projects Delivered'), 'delay' => 0],
                    ['value' => config('site.welcome.stat_2_value', '50'), 'label' => config('site.welcome.stat_2_label', 'Countries Explored'), 'delay' => 200],
                    ['value' => config('site.welcome.stat_3_value', '500'), 'label' => config('site.welcome.stat_3_label', 'Photos Captured'), 'delay' => 400]
                ];
            @endphp
            @foreach($counters as $counter)
                <div class="col-md-6 col-lg-4 mb-4 mb-lg-0 text-center">
                    <div class="d-flex flex-column pt-2 pb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $counter['delay'] }}">
                        <p class="d-inline-block mb-0 font-weight-bold line-height-1 counter d-flex justify-content-center">
                            <img src="{{ asset('template/img/demos/accounting-2/icons/icon-7.svg') }}" width="50" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary mt-2'}" />
                            <span class="text-dark text-13 n-ls-5 p-0 me-4" data-to="{{ $counter['value'] }}" data-append="{{ $counter['value'] < 100 ? '+' : '' }}"></span>
                        </p>
                        <span class="text-4 n-ls-1 pt-2">{{ $counter['label'] }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- My Work & Passions Section --}}
    <div class="px-4">
        <div class="bg-secondary px-3 px-xl-0 border-radius-2 text-light p-relative overflow-hidden">
            <div class="container p-relative z-index-1 py-4">
                <div class="row align-items-end py-5">
                    <div class="col-lg-9 text-center text-lg-start mb-4 mb-lg-0">
                        <span class="badge bg-transparent text-light border border-color-light-rgba-20 box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2">
                            <span class="d-inline-flex py-1 px-2">{{ config('site.welcome.work_badge', 'My Work & Passions') }}</span>
                        </span>
                        <h2 class="text-9 text-light text-lg-10 font-weight-semibold line-height-1 mb-0 mt-3">
                            {{ config('site.welcome.work_title', 'Where Tech Meets') }}
                            <span class="text-color-tertiary">{{ config('site.welcome.work_subtitle', 'Creativity.') }}</span>
                        </h2>
                    </div>
                    <div class="col-lg-3 text-center text-lg-end">
                        <a href="{{ route('front.about') }}" class="btn btn-rounded btn-primary box-shadow-7 font-weight-medium px-3 py-3 text-2-5 btn-swap-1 ms-3 px-5" data-clone-element="1">
                            <span>{{ __('Learn More') }}</span>
                        </a>
                    </div>
                </div>
                <div class="row pb-5">
                    <div class="col">
                        <div class="d-grid">
                            @php
                                $workItems = [
                                    ['title' => config('site.welcome.work_item_1', 'COMPANIA DIGITAL'), 'image' => 'generic-4.jpg', 'delay' => 0, 'link' => url('/compania-digital')],
                                    ['title' => config('site.welcome.work_item_2', 'Photography & Travel'), 'image' => 'generic-5.jpg', 'delay' => 100, 'link' => route('gallery')],
                                    ['title' => config('site.welcome.work_item_3', 'Blog & Thoughts'), 'image' => 'generic-6.jpg', 'delay' => 200, 'link' => route('blog.index')],
                                    ['title' => config('site.welcome.work_item_4', 'Drone Photography'), 'image' => 'generic-7.jpg', 'delay' => 300, 'link' => route('gallery')]
                                ];
                            @endphp
                            @foreach($workItems as $item)
                                <a href="{{ $item['link'] }}" class="btn btn-tertiary overflow-hidden border-0 border-radius-2 text-start box-shadow-6 btn-xl text-3 py-4 btn-with-arrow-solid btn-with-arrow-sm mb-4 appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="{{ $item['delay'] }}">
                                    <em class="custom-el-4 d-none d-lg-inline-block">
                                        <img src="{{ asset('template/img/demos/accounting-2/generic/' . $item['image']) }}" loading="lazy" class="img-fluid p-relative z-index-2" height="130" alt="">
                                    </em>
                                    <strong class="d-inline-flex text-color-secondary font-weight-semibold text-dark me-3 negative-ls-05 text-6 p-relative top-4">{{ $item['title'] }}</strong>
                                    <span class="bg-secondary box-shadow-6 me-3"><i class="fa-solid fa-arrow-right text-light"></i></span>
                                </a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Skills & Expertise Section --}}
    <div class="container pt-5 pb-3 mt-3">
        <div class="row">
            <div class="col text-center">
                <span class="badge bg-light text-dark border border-all-light box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2">
                    <span class="d-inline-flex py-1 px-2">{{ config('site.welcome.skills_badge', 'Skills & Expertise') }}</span>
                </span>
                <div class="gsap-text-wrapper overflow-hidden" data-gsap-text-anim-1 data-plugin-options="{'duration': 2.0}">
                    <h2 class="text-9 text-lg-10 font-weight-semibold line-height-1 mb-3 mt-3">{{ config('site.welcome.skills_title', 'What I Bring to the Table') }}</h2>
                </div>
            </div>
        </div>
        <div class="row mt-4 align-items-center">
            <div class="col-lg-6 text-center">
                <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                    <div class="custom-el-5 p-relative" style="background-image: url({{ asset('template/img/demos/accounting-2/generic/generic-8.jpg') }}">
                        <div class="custom-el-5-1 border-color-primary"></div>
                        <span class="custom-el-5-2 rounded-circle d-inline-block overflow-hidden">
                            <img src="{{ asset('template/img/demos/accounting-2/generic/generic-22.jpg') }}" loading="lazy" class="img-fluid p-relative z-index-2 rounded-circle" alt="">
                        </span>
                        <div class="p-absolute bg-color-light border-radius-2 p-3 text-3-5 box-shadow-7 d-flex align-items-center z-index-10 custom-pos-3">
                            <div class="appear-animation" data-appear-animation="blurIn" data-appear-animation-delay="100">
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle bg-color-tertiary custom-el-6 p-relative">
                                        <div class="p-absolute transform3dxy-n50 left-50pct top-50pct">
                                            <div class="anim-up-down-infinite p-relative bottom-8" style="animation-duration: 1200ms;">
                                                <img src="{{ asset('template/img/demos/accounting-2/icons/icon-5.svg') }}" width="40" height="40" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-primary'}" />
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ps-2 ms-2 text-start pe-4">
                                        <span class="d-block font-weight-medium text-2 text-color-default line-height-1">{{ config('site.welcome.stat_card_label', 'Years of Experience') }}</span>
                                        <span class="d-block font-weight-bold text-dark text-4">{{ config('site.welcome.stat_card_value', '15+') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="d-grid">
                    @php
                        $skills = [
                            config('site.welcome.skill_1', 'Web Development & Scalable Solutions'),
                            config('site.welcome.skill_2', 'Project Management & Strategy'),
                            config('site.welcome.skill_3', 'Photography & Visual Storytelling'),
                            config('site.welcome.skill_4', 'Drone Photography & Aerial Views'),
                            config('site.welcome.skill_5', 'Content Creation & Blogging'),
                            config('site.welcome.skill_6', 'Entrepreneurship & Innovation')
                        ];
                    @endphp
                    @foreach($skills as $skill)
                        <div class="btn btn-light overflow-hidden border-0 text-start btn-xl text-3 py-4 btn-with-arrow-solid btn-with-arrow-sm mb-0">
                            <strong class="d-inline-flex text-color-secondary font-weight-semibold text-dark me-3 negative-ls-05 text-5">{{ $skill }}</strong>
                            <span class="bg-grey-100 box-shadow-6 me-0"><i class="fa-solid fa-check text-primary"></i></span>
                        </div>
                    @endforeach
                </div>
                <a href="{{ route('front.contact') }}" class="btn btn-rounded btn-primary box-shadow-7 font-weight-medium px-3 py-3 text-2-5 btn-swap-1 mt-4 ms-4 px-5 p-relative left-7" data-clone-element="1">
                    <span>{{ __('Get In Touch') }}</span>
                </a>
            </div>
        </div>
    </div>

    {{-- Created by Real People Section --}}
    <div class="px-4 mt-5">
        <div class="bg-color-quaternary-rgba-10 px-3 px-xl-0 border-radius-2 p-relative overflow-hidden">
            <div class="container p-relative z-index-1 py-4">
                <div class="row align-items-end justify-content-center pt-5 pb-4">
                    <div class="col-lg-8 text-center">
                        <span class="badge bg-transparent text-dark border border-color-grey-rgba-10 box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2">
                            <span class="d-inline-flex py-1 px-2">{{ config('site.welcome.personal_badge', 'Personal Journey') }}</span>
                        </span>
                        <div class="gsap-text-wrapper overflow-hidden" data-gsap-text-anim-1 data-plugin-options="{'duration': 2.0}">
                            <h2 class="text-9 text-lg-10 font-weight-semibold line-height-1 mb-3 mt-3">{{ config('site.welcome.personal_title', 'A Space Where Tech and Creativity Meet') }}</h2>
                        </div>
                        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                            <p>{{ config('site.welcome.personal_description', 'Welcome to my world—where entrepreneurship meets adventure, where code meets creativity, and where every project tells a story. Through COMPANIA DIGITAL, I build solutions. Through my lens, I capture moments. Through my words, I share experiences.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="row pb-5 mb-3">
                    <div class="col text-center">
                        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="0">
                            <div class="custom-gallery-1">
                                @for($i = 9; $i <= 12; $i++)
                                    <div>
                                        <img class="" src="{{ asset('template/img/demos/accounting-2/generic/generic-' . $i . '.jpg') }}" alt="">
                                    </div>
                                @endfor
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row pb-5 mb-3">
                    <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                        <p class="mb-0 text-dark font-weight-medium d-flex justify-content-center">
                            <img src="{{ asset('template/img/demos/accounting-2/icons/icon-16.svg') }}" width="30" alt="" data-icon data-plugin-options="{'onlySVG': true, 'extraClass': 'svg-fill-color-dark me-2'}" />
                            {{ config('site.welcome.availability_text', 'Always Exploring - Constantly learning, creating, and sharing new perspectives from my journey.') }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Social Proof / Featured In --}}
    @if(config('site.welcome.show_social_proof', false))
    <div class="container">
        <div class="row mt-3 py-4">
            <div class="col pb-0 pt-5 pb-lg-5">
                <div class="owl-carousel owl-theme carousel-center-active-item" data-plugin-options="{'responsive': {'0': {'items': 3}, '476': {'items': 3}, '768': {'items': 3}, '992': {'items': 5}, '1200': {'items': 5}}, 'autoplay': true, 'autoplayTimeout': 3000, 'dots': false}">
                    @for($i = 1; $i <= 7; $i++)
                        @if($i != 2)
                            <div>
                                <img class="img-fluid" src="{{ asset('template/img/logos/logo-' . $i . '.png') }}" alt="">
                            </div>
                        @endif
                    @endfor
                </div>
            </div>
        </div>
    </div>
    @endif

    {{-- Trusted By Clients (Testimonials) Section --}}
    <div class="px-4 mt-5">
        <div class="bg-custom-color-1 px-3 px-xl-0 border-radius-2 p-relative overflow-hidden">
            <div class="custom-el-8">
                <i class="fas fa-star custom-text-color-2 rotate-l-45"></i>
                <i class="fas fa-star custom-text-color-2 rotate-l-45"></i>
                <i class="fas fa-star custom-text-color-2 rotate-l-45"></i>
            </div>
            <div class="container p-relative z-index-1 py-4">
                <div class="row align-items-end justify-content-center pt-5 pb-4">
                    <div class="col-lg-7 text-center">
                        <span class="badge bg-transparent text-dark border border-color-grey-rgba-10 box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2">
                            <span class="d-inline-flex py-1 px-2">{{ config('site.welcome.testimonials_badge', 'Client Stories') }}</span>
                        </span>
                        <div class="gsap-text-wrapper overflow-hidden" data-gsap-text-anim-1 data-plugin-options="{'duration': 2.0}">
                            <h2 class="text-9 text-lg-10 font-weight-semibold line-height-1 mb-3 mt-3">{{ config('site.welcome.testimonials_title', 'Trusted By Clients') }}</h2>
                        </div>
                        <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="300">
                            <p>{{ config('site.welcome.testimonials_description', 'Hear from clients and partners about their experience working with COMPANIA DIGITAL and the results we\'ve achieved together.') }}</p>
                        </div>
                    </div>
                </div>
                <div class="row pb-5 mb-3 justify-content-center">
                    <div class="col-lg-9 text-center">
                        <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
                            <div class="owl-carousel custom-owl-carousel-1 owl-theme nav-lg nav-transparent nav-borders rounded-nav mb-0" data-plugin-options="{'responsive': {'1': {'items': 1, 'stagePadding': 0, 'margin': 0}, '768': {'items': 1, 'stagePadding': 100, 'margin': 100}, '992': {'items': 1, 'stagePadding': 100, 'margin': 100}, '1200': {'items': 1, 'stagePadding': 100, 'margin': 100}}, 'loop': false, 'nav': true, 'dots': false}">
                                @php
                                    $testimonials = [
                                        [
                                            'text' => config('site.welcome.testimonial_1_text', "Working with COMPANIA DIGITAL transformed our online presence. The team delivered a scalable solution that perfectly captured our brand's essence. Professional, creative, and always responsive."),
                                            'author' => config('site.welcome.testimonial_1_author', 'Client, Brand Partner'),
                                            'image' => 'generic-13.jpg'
                                        ],
                                        [
                                            'text' => config('site.welcome.testimonial_2_text', "The web solution we received exceeded our expectations. It's not just a website—it's a digital experience that truly represents who we are. The attention to detail and strategic approach made all the difference."),
                                            'author' => config('site.welcome.testimonial_2_author', 'Client, Business Owner'),
                                            'image' => 'generic-23.jpg'
                                        ]
                                    ];
                                @endphp
                                @foreach($testimonials as $testimonial)
                                    <div class="row align-items-center">
                                        <div class="col-lg-4 ps-5 pt-4">
                                            <span class="rounded-circle d-inline-block p-relative">
                                                <span class="custom-el-7 bg-primary"><i class="fa-solid fa-quote-left text-light"></i></span>
                                                <img src="{{ asset('template/img/demos/accounting-2/generic/' . $testimonial['image']) }}" loading="lazy" class="img-fluid p-relative z-index-2 rounded-circle" width="260" alt="">
                                            </span>
                                        </div>
                                        <div class="col-lg-8 text-start ps-4">
                                            <p class="mb-3 custom-font-tertiary text-5 line-height-9">{{ $testimonial['text'] }}</p>
                                            <strong class="pt-4 text-dark text-4 font-weight-semi-bold">{{ $testimonial['author'] }}</strong>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- FAQ Section --}}
    <div class="container pt-5 pb-3 mt-3">
        <div class="row">
            <div class="col">
                <span class="badge bg-light text-dark border border-all-light box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2">
                    <span class="d-inline-flex py-1 px-2">{{ config('site.welcome.faq_badge', 'Leading Accounting Firm') }}</span>
                </span>
                <h2 class="text-9 text-lg-10 font-weight-semibold line-height-1 mb-3 mt-3">{{ __('Frequently Asked Questions') }}</h2>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col">
                <div class="toggle toggle-minimal toggle-faqs toggle-dark mt-0 mb-4" data-plugin-toggle="">
                    @php
                        $faqs = [
                            [
                                'question' => config('site.welcome.faq_1_question', 'What services does COMPANIA DIGITAL offer?'),
                                'answer' => config('site.welcome.faq_1_answer', "COMPANIA DIGITAL specializes in building scalable web solutions for brands. We create custom websites, web applications, and digital experiences that combine technology and creativity to help businesses thrive online.")
                            ],
                            [
                                'question' => config('site.welcome.faq_2_question', 'How can I see your photography work?'),
                                'answer' => config('site.welcome.faq_2_answer', "You can explore my photography and drone work in the Gallery section. I share captured moments from my travels, adventures, and unique perspectives from around the world.")
                            ],
                            [
                                'question' => config('site.welcome.faq_3_question', 'Where can I read your blog posts?'),
                                'answer' => config('site.welcome.faq_3_answer', "I share reflections, insights, and stories on my blog. You'll find thoughts on technology, creativity, travel, entrepreneurship, and the intersection of work and life.")
                            ],
                            [
                                'question' => config('site.welcome.faq_4_question', 'How do I get in touch for a project?'),
                                'answer' => config('site.welcome.faq_4_answer', "You can reach out through the Contact page or directly via email. I'm always open to discussing new projects, collaborations, or just connecting with like-minded individuals.")
                            ],
                            [
                                'question' => config('site.welcome.faq_5_question', 'What makes your approach unique?'),
                                'answer' => config('site.welcome.faq_5_answer', "I bring a unique perspective that combines technical expertise with creative vision. As an entrepreneur, developer, and adventurer, I understand both the business and creative sides of digital projects.")
                            ]
                        ];
                    @endphp
                    @foreach($faqs as $faq)
                        <section class="toggle">
                            <a class="toggle-title text-4 text-dark">{{ $faq['question'] }}</a>
                            <div class="toggle-content">
                                <p class="mb-0">{{ $faq['answer'] }}</p>
                            </div>
                        </section>
                    @endforeach
                </div>
                <a href="{{ route('front.contact') }}" class="btn btn-rounded btn-primary box-shadow-7 font-weight-medium py-3 text-2-5 btn-swap-1 px-5" data-clone-element="1">
                    <span>{{ __('Contact Us') }}</span>
                </a>
            </div>
        </div>
    </div>

    {{-- Tagline Section --}}
    <div class="appear-animation" data-appear-animation="fadeInUpShorter" data-appear-animation-delay="0">
        <div class="text-center py-5 my-5 custom-feather-shadow">
            <span data-clone-element="1" class="custom-el-9">
                <strong class="text-dark">{{ config('site.welcome.tagline', 'Tech. Creativity. Adventure.') }}</strong>
            </span>
        </div>
    </div>

    {{-- Insights/Blog Section --}}
    <div class="px-4 mt-5">
        <div class="bg-color-grey px-3 px-xl-0 border-radius-2 p-relative overflow-hidden">
            <div class="container p-relative z-index-1 py-4">
                <div class="row align-items-end justify-content-center pt-5 pb-4">
                    <div class="col">
                        <span class="badge bg-transparent text-dark border border-color-grey-rgba-10 box-shadow-9 rounded-pill text-uppercase font-weight-semibold px-3 py-2 px-2">
                            <span class="d-inline-flex py-1 px-2">{{ config('site.welcome.blog_badge', 'Latest Thoughts') }}</span>
                        </span>
                        <h2 class="text-9 text-lg-10 font-weight-semibold line-height-1 mb-3 mt-3">{{ config('site.welcome.blog_title', 'Blog & Insights') }}</h2>
                    </div>
                </div>
                <div class="row pb-lg-5 mb-lg-3">
                    <div class="col-lg-3 pe-lg-5">
                        <h4 class="text-5 font-weight-semibold line-height-1 mb-4">{{ __('Browse By Category') }}</h4>
                        <ul class="nav nav-list nav-list-arrows flex-column mb-5">
                            @php
                                $categories = config('site.welcome.blog_categories', ['Technology', 'Photography', 'Travel', 'Entrepreneurship', 'Web Development', 'Adventure']);
                            @endphp
                            @foreach($categories as $category)
                                <li class="nav-item">
                                    <a href="{{ route('blog.index') }}" class="nav-link">{{ $category }}</a>
                                </li>
                            @endforeach
                        </ul>
                        <a href="{{ route('blog.index') }}" class="btn btn-rounded btn-primary box-shadow-7 font-weight-medium py-3 text-2-5 btn-swap-1 px-5 mb-5 mb-lg-0" data-clone-element="1">
                            <span>{{ __('View All') }}</span>
                        </a>
                    </div>
                    <div class="col-lg-9">
                        <div class="row pb-5">
                            @if(is_module_active('blog') && isset($latestPosts) && $latestPosts->count() > 0)
                                @foreach($latestPosts->take(3) as $post)
                                    <div class="col-lg-4 mb-4 mb-lg-0">
                                        <article class="post">
                                            <div class="card rounded-3 border-0 bg-transparent box-shadow-10 box-shadow-1 box-shadow-1-hover anim-hover-translate-top-10px transition-3ms">
                                                <div class="p-relative rounded-3 overflow-hidden">
                                                    <div class="post-date p-absolute top-20 left-20">
                                                        <span class="day py-1 text-4 font-weight-bold text-secondary">{{ $post->created_at->format('d') }}</span>
                                                        <span class="month bg-secondary">{{ $post->created_at->format('M') }}</span>
                                                    </div>
                                                    <div class="p-absolute right-10 top-10">
                                                        <i class="fa-regular fa-message text-color-light text-4 p-absolute right-10 top-20"></i>
                                                        <span class="badge badge-comments-count bg-secondary text-color-light rounded-pill p-0 p-relative z-index-1">{{ $post->comments_count ?? 0 }}</span>
                                                    </div>
                                                    <a href="{{ route('blog.post', $post->slug) }}" class="text-decoration-none">
                                                        <img class="card-img-top" src="{{ $post->featured_image ?? asset('template/img/demos/accounting-2/blog/blog-post-1.jpg') }}" loading="lazy" alt="{{ $post->title }}">
                                                    </a>
                                                    <div class="card-body bg-light p-4">
                                                        <span class="badge badge-dark badge-sm rounded-pill text-uppercase me-1">{{ $post->category->name ?? 'business' }}</span>
                                                        <h4 class="my-2">
                                                            <a href="{{ route('blog.post', $post->slug) }}" class="text-decoration-none text-dark text-color-hover-primary">{{ $post->title }}</a>
                                                        </h4>
                                                        <p class="card-text text-3-5 mb-1">{{ Str::limit($post->excerpt ?? $post->content, 100) }}</p>
                                                        <a href="{{ route('blog.post', $post->slug) }}" class="read-more text-color-secondary font-weight-semibold text-2">
                                                            {{ __('Read More') }} <i class="fas fa-angle-right position-relative top-1 ms-1"></i>
                                                        </a>
                                                        <div class="d-flex align-items-center mt-3 pt-1">
                                                            <img src="{{ asset('template/img/avatars/avatar.jpg') }}" loading="lazy" class="img-fluid rounded-circle me-2" width="25" alt="">
                                                            <strong class="text-color-dark text-2">by {{ $post->author->name ?? 'Admin' }}</strong>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                @endforeach
                            @else
                                {{-- Fallback: Mostrar posts de ejemplo --}}
                                @php
                                    $blogPosts = [
                                        ['title' => config('site.welcome.blog_post_1_title', 'Refugio Frey - Bariloche 2023'), 'image' => 'blog-post-1.jpg', 'date' => '15', 'month' => 'Jan', 'category' => 'aventura'],
                                        ['title' => config('site.welcome.blog_post_2_title', 'A bloguear se dijo'), 'image' => 'blog-post-2.jpg', 'date' => '15', 'month' => 'Jan', 'category' => 'reflexion'],
                                        ['title' => config('site.welcome.blog_post_3_title', 'Si queres una página web cómo la mía'), 'image' => 'blog-post-3.jpg', 'date' => '15', 'month' => 'Jan', 'category' => 'COMPANIA DIGITAL']
                                    ];
                                @endphp
                                @foreach($blogPosts as $post)
                                    <div class="col-lg-4 mb-4 mb-lg-0">
                                        <article class="post">
                                            <div class="card rounded-3 border-0 bg-transparent box-shadow-10 box-shadow-1 box-shadow-1-hover anim-hover-translate-top-10px transition-3ms">
                                                <div class="p-relative rounded-3 overflow-hidden">
                                                    <div class="post-date p-absolute top-20 left-20">
                                                        <span class="day py-1 text-4 font-weight-bold text-secondary">{{ $post['date'] }}</span>
                                                        <span class="month bg-secondary">{{ $post['month'] }}</span>
                                                    </div>
                                                    <div class="p-absolute right-10 top-10">
                                                        <i class="fa-regular fa-message text-color-light text-4 p-absolute right-10 top-20"></i>
                                                        <span class="badge badge-comments-count bg-secondary text-color-light rounded-pill p-0 p-relative z-index-1">5</span>
                                                    </div>
                                                    <a href="#" class="text-decoration-none">
                                                        <img class="card-img-top" src="{{ asset('template/img/demos/accounting-2/blog/' . $post['image']) }}" loading="lazy" alt="Card Image">
                                                    </a>
                                                    <div class="card-body bg-light p-4">
                                                        <span class="badge badge-dark badge-sm rounded-pill text-uppercase me-1">{{ $post['category'] ?? 'blog' }}</span>
                                                        <h4 class="my-2">
                                                            <a href="{{ route('blog.index') }}" class="text-decoration-none text-dark text-color-hover-primary">{{ $post['title'] }}</a>
                                                        </h4>
                                                        <p class="card-text text-3-5 mb-1">{{ config('site.welcome.blog_excerpt', 'Sharing stories, reflections, and adventures through my lens and experiences...') }}</p>
                                                        <a href="{{ route('blog.index') }}" class="read-more text-color-secondary font-weight-semibold text-2">
                                                            {{ __('Read More') }} <i class="fas fa-angle-right position-relative top-1 ms-1"></i>
                                                        </a>
                                                        <div class="d-flex align-items-center mt-3 pt-1">
                                                            <img src="{{ asset('template/img/avatars/avatar.jpg') }}" loading="lazy" class="img-fluid rounded-circle me-2" width="25" alt="">
                                                            <strong class="text-color-dark text-2">by {{ config('site.name', 'Coke Colombres') }}</strong>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </article>
                                    </div>
                                @endforeach
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

@endsection