@php
    $animations = [
        'animate__fadeIn',
        'animate__fadeInUp',
        'animate__fadeInDown',
        'animate__fadeInLeft',
        'animate__fadeInRight',
        // Add more animations as needed
    ];
@endphp
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

<div class="card">
    <div class="card-header">
        VivaPe NewsFeed
    </div>
    <div class="card-body">
        <div class="row">
            @foreach ($newsFeeds as $key => $nfeed)
                @php
                    // Generate a random animation class
                    $animations = [
                        'animate__fadeIn',
                        'animate__fadeInUp',
                        'animate__fadeInDown',
                        'animate__fadeInLeft',
                        'animate__fadeInRight',
                        // Add more animations as needed
                    ];
                    $randomAnimation = $animations[array_rand($animations)];
                @endphp
                <div class="col-md-4 col-sm-6 mb-4">
                    <div class="card h-50 animate__animated {{ $randomAnimation }}">
                        <img src="{{ asset('images/'.$nfeed->image) }}" class="card-img-top img-fluid" alt="News Image">
                        <div class="card-body">
                            <h5 class="card-title">
                                <a href="{{ route('module.newsfeed.show', ['newsFeed' => $nfeed->id]) }}" class="text-decoration-none">{{ $nfeed->title }}</a>
                            </h5>
                            <p class="card-text">{!! $nfeed->note !!}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>