
<?php $__env->startSection('style'); ?>
    <style>
        /* From Uiverse.io by alexruix */
        .card {

            position: relative;

            overflow: hidden;

            background: rgb(196, 224, 255);

            border-radius: 24px;

            padding: 28px;

            border: 1px solid #e5e7eb;

            transition: 0.35s ease;

            box-shadow:
                0 10px 25px rgba(0, 0, 0, 0.06);

            height: 100%;
        }

        .card:hover {

            transform:
                translateY(-8px);

            box-shadow:
                0 20px 40px rgba(37, 99, 235, 0.15);

            border-color:
                #bfdbfe;
        }

        /*
                |------------------------------------------------------------------
                | BACKGROUND EFFECT
                |------------------------------------------------------------------
                */

        .card::before {

            content: '';

            position: absolute;

            width: 180px;

            height: 180px;

            background:
                rgba(37, 99, 235, 0.05);

            border-radius: 50%;

            top: -90px;

            right: -70px;

            transition: 0.4s;
        }

        .card:hover::before {

            transform: scale(1.15);
        }

        /*
                |------------------------------------------------------------------
                | ICON
                |------------------------------------------------------------------
                */

        .materi-icon {

            width: 70px;

            height: 70px;

            border-radius: 20px;

            background:
                linear-gradient(135deg,
                    #2563eb,
                    #1d4ed8);

            display: flex;

            align-items: center;

            justify-content: center;

            font-size: 30px;

            color: white;

            margin-bottom: 20px;

            box-shadow:
                0 10px 20px rgba(37, 99, 235, 0.25);
        }

        /*
                |------------------------------------------------------------------
                | CATEGORY
                |------------------------------------------------------------------
                */

        .materi-category {

            display: inline-block;

            padding: 7px 14px;

            border-radius: 999px;

            background: #dbeafe;

            color: #1d4ed8;

            font-size: 12px;

            font-weight: 700;

            margin-bottom: 18px;
        }

        /*
                |------------------------------------------------------------------
                | TITLE
                |------------------------------------------------------------------
                */

        .materi-title {

            font-size: 22px;

            font-weight: 700;

            color: #111827;

            margin-bottom: 15px;

            line-height: 1.5;
        }

        /*
                |------------------------------------------------------------------
                | DESC
                |------------------------------------------------------------------
                */

        .materi-desc {

            color: #6b7280;

            line-height: 1.8;

            font-size: 14px;

            margin-bottom: 25px;
        }

        /*
                |------------------------------------------------------------------
                | BUTTON
                |------------------------------------------------------------------
                */

        .btn-materi {

            border: none;

            background:
                linear-gradient(135deg,
                    #2563eb,
                    #1d4ed8);

            color: white;

            padding: 12px 18px;

            border-radius: 14px;

            font-size: 14px;

            font-weight: 600;

            transition: 0.3s;

            text-decoration: none;

            display: inline-block;
        }

        .btn-materi:hover {

            transform: scale(1.05);

            color: white;

            box-shadow:
                0 10px 20px rgba(37, 99, 235, 0.25);
        }    
    </style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
    <?php if(session('error')): ?>

        <div class="alert alert-danger">

            <?php echo e(session('error')); ?>


        </div>

    <?php endif; ?>
    <!-- START SECTION TOP -->
    <section class="section-top"
        style="background-image: url(assets/img/bg/section-top.png);background-size:cover; background-position: center center;">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-xs-12 text-center">
                    <div class="section-top-title">
                        <h1>Bank Kasus</h1>
                    </div>
                </div><!--- END COL -->
            </div><!--- END ROW -->
        </div><!--- END CONTAINER -->
    </section>
    <!-- END SECTION TOP -->

    <!-- START PORTFOLIO -->
    <section id="portfolio" class="portfolio_area section-padding">
        <div class="container-fluid">
            <div class="col-lg-12 text-center">
                <div class="portfolio_filter">
                    <ul>
                        <li class="active filter" data-filter="all">All</li>
                        <?php $__currentLoopData = $kategori; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <li class="filter" data-filter=".<?php echo e($item->nama_kategori); ?>"><?php echo e($item->nama_kategori); ?></li>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </ul>
                </div>
            </div>
            <div class="portfolio-grid container-fluid">
                <div class="row justify-content-center">
                    <!-- From Uiverse.io by alexruix -->

                    <?php $__currentLoopData = $materi; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                        <div
                            class="col-lg-4 col-md-6 col-sm-12 mb-4 portfolio-item mix <?php echo e($item->category->nama_kategori); ?> seo">
                            <div class="card">

                                <div class="materi-icon">
                                    📘
                                </div>

                                <div class="materi-category">
                                    <?php echo e($item->category->nama_kategori); ?>

                                </div>

                                <div class="materi-title">
                                    <?php echo e($item->judul); ?>

                                </div>

                                <div class="materi-desc">
                                    <?php echo e(Str::limit($item->deskripsi, 50)); ?>

                                </div>

                                <a href="<?php echo e(URL::to('/materi/view/' . $item->id)); ?>" class="btn-materi">
                                    Baca Materi →
                                </a>

                            </div>
                        </div>
                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                </div><!-- END ROW -->
            </div>
        </div><!-- END CONTAINER -->
    </section>
    <!-- END PORTFOLIO -->

<?php $__env->stopSection(); ?>
<?php $__env->startSection('script'); ?>
    <script>
    </script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('user.layouts.v_template', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH D:\Yudi\WEB\project\a\project_learning\resources\views/user/materi/index.blade.php ENDPATH**/ ?>