
<div>

    
    <section>

        <div class="mx-auto px-6 lg:px-20 py-16">

            
            <div class="flex justify-between items-start mb-10">

                <a href="/blogs"
                    class="inline-flex items-center gap-2
          font-semibold
          text-[14px] lg:text-[16px]
          border-black pb-1">
                    ← See All Blogs
                </a>

                <div class="text-right uppercase tracking-widest text-black/60">
                    <div class="text-black font-bold capitalize text-[14px] lg:text-[16px]">
                        Date
                    </div>

                    <div><?php echo e(\Carbon\Carbon::parse($blog->publish_date)->format('M Y')); ?></div>
                </div>

            </div>

            
            <h1
                class="text-[28px] sm:text-[34px] lg:text-[42px]
                       font-extrabold leading-tight max-w-4xl mb-10">
                <?php echo e($blog->title); ?>

            </h1>

            
            <div class="border border-black/20 p-6 mb-14">
                <div class="bg-white p-4">
                    <img src="<?php echo e(asset($blog->featured_image)); ?>" alt="<?php echo e($blog->title); ?>"
                        class="w-full max-h-[520px] object-contain mx-auto">
                </div>
            </div>
         <div class="blog-content mx-auto px-0 lg:px-16">
            <article
                class="prose prose-neutral
                       text-[16px] lg:text-[18px]
                       leading-relaxed
                       text-justify
                       prose-h3:text-[18px]
                       prose-h3:font-bold
                       prose-h3:mt-10
                       prose-h3:mb-2
                       prose-p:mt-2
                       prose-p:mb-4
                       prose-ul:mt-3
                       prose-ul:mb-4">
        
                <?php echo $blog->content; ?>

            </article>
        </div>







        </div>
    </section>


    
    <section x-data="{ active: null }">

        
        <div class="w-full border-black"></div>

        
        <div class="mx-auto px-6 lg:px-16 py-12
                flex justify-between items-center">
            <h2 class="text-2xl font-bold text-black">
                More
            </h2>

            <a href="/blogs"
                class="group inline-flex items-center gap-2
                  text-sm font-semibold
                  border-b border-black pb-1">
                See All Blogs
                <span class="transition-transform duration-300 group-hover:translate-x-1">
                    →
                </span>
            </a>
        </div>

        <?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__currentLoopData = $moreBlogs; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
            <a href="/blogs/<?php echo e($item->slug); ?>" @mouseenter="active = <?php echo e($index); ?>" @mouseleave="active = null"
                class="block">

                <div class="border-b border-black transition-colors duration-300"
                    :class="active === <?php echo e($index); ?> ? 'bg-[#f58220]' : 'bg-white'">

                    <div
                        class="mx-auto
                           px-5 lg:px-16
                           py-8 lg:py-10
                           grid grid-cols-12 gap-y-3
                           items-start lg:items-center">

                        <!-- DATE -->
                        <div class="col-span-4 lg:col-span-2 text-xs uppercase tracking-widest"
                            :class="active === <?php echo e($index); ?> ? 'text-white' : 'text-black/60'">
                            <?php echo e(\Carbon\Carbon::parse($blog->publish_date)->format('M Y')); ?>

                        </div>

                        <!-- TITLE (DESKTOP) -->
                        <div class="hidden lg:block col-span-8 lg:col-span-6 lg:text-left">
                            <h3 class="font-bold leading-snug text-[18px] lg:text-[22px]"
                                :class="active === <?php echo e($index); ?> ? 'text-white' : 'text-black'">

                                 <span
                                class="relative inline
                                after:content-['']
                                after:absolute
                                after:left-0
                                after:-bottom-1
                                after:h-[2px]
                                after:w-0
                                after:bg-current
                                after:transition-[width]
                                after:duration-300
                                after:ease-out"
                                :class="active === <?php echo e($index); ?> ? 'after:w-full' : ''">

                                    <?php echo e($blog->title); ?>

                                </span>
                            </h3>
                        </div>

                        <!-- DESKTOP IMAGE -->
                        <div class="hidden lg:flex col-span-3 justify-end overflow-hidden">
                            <div class="w-[200px]">
                                <img src="<?php echo e(asset($blog->featured_image)); ?>"
                                    class="w-full h-auto rounded-md shadow-lg
                                       transform-gpu transition-all duration-300 ease-out"
                                    :class="active === <?php echo e($index); ?> ?
                                        'opacity-100 translate-y-0' :
                                        'opacity-0 translate-y-4'">
                            </div>
                        </div>

                        <!-- DESKTOP ARROW -->
                        <div class="hidden lg:flex col-span-1 justify-end text-xl"
                            :class="active === <?php echo e($index); ?> ? 'text-white' : 'text-black'">
                            →
                        </div>

                        <!-- MOBILE -->
                        <div class="col-span-8 lg:col-span-6 lg:hidden">

                            <h3 class="font-bold leading-snug text-[18px]"
                                :class="active === <?php echo e($index); ?> ? 'text-white' : 'text-black'">

                                <span
                                    class="relative inline
                                after:content-['']
                                after:absolute
                                after:left-1/2
                                after:-translate-x-1/2
                                after:-bottom-1
                                after:h-[2px]
                                after:w-0
                                after:bg-current
                                after:transition-[width]
                                after:duration-300"
                                    :class="active === <?php echo e($index); ?> ? 'after:w-full' : ''">
                                    <?php echo e($blog->title); ?>

                                </span>

                                <span> →</span>
                            </h3>

                            <div class="mt-4">
                                <img src="<?php echo e(asset($blog->featured_image)); ?>"
                                    class="w-full max-w-[56%] h-auto rounded-md border">
                            </div>

                        </div>

                    </div>
                </div>
            </a>
        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>




    </section>

    <?php
$__split = function ($name, $params = []) {
    return [$name, $params];
};
[$__name, $__params] = $__split('contact-form', []);

$key = null;

$key ??= \Livewire\Features\SupportCompiledWireKeys\SupportCompiledWireKeys::generateKey('lw-2479748546-0', null);

$__html = app('livewire')->mount($__name, $__params, $key);

echo $__html;

unset($__html);
unset($__name);
unset($__params);
unset($__split);
if (isset($__slots)) unset($__slots);
?>

    <style>
.blog-content {
    margin: auto;
}

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4 {
    font-weight: 700;
    margin-top: 24px;
    margin-bottom: 12px;
}

.blog-content h2 {
    font-size: 26px;
    text-align: left;
}

.blog-content h3 {
    font-size: 22px;
}

.blog-content p {
    margin-bottom: 14px;
}

.blog-content ul {
    list-style: disc;
    padding-left: 1.5rem;
    margin-bottom: 16px;
}

.blog-content ol {
    list-style: decimal;
    padding-left: 1.5rem;
    margin-bottom: 16px;
}

.blog-content li {
    margin-bottom: 8px;
}

.blog-content strong {
    font-weight: 700;
}

.blog-content br {
    display: block;
    margin-bottom: 6px;
}

    </style>
</div>
<?php /**PATH /home1/eggfirst/public_html/resources/views/livewire/blogs/blog-view.blade.php ENDPATH**/ ?>