@extends('layouts.front.master')
@section('contant')
<section class="banner-inner-area sub-bg bg-image" data-background="assets/images/bg/banner-inner-bg.png" style="background-image: url(&quot;assets/images/bg/banner-inner-bg.png&quot;);">
           <div class="banner-inner__shape1">
               <img class="animation__sunMove" src="assets/images/shape/banner-inner-shape1.png" alt="image">
           </div>
           <div class="banner-inner__shape2">
               <img src="assets/images/shape/banner-inner-shape2.png" alt="image">
           </div>
           <div class="banner-inner__shape3">
               <img class="animation__arryLeftRight" src="assets/images/shape/banner-inner-shape3.png" alt="image">
           </div>
           <div class="banner-inner__shape4">
               <img class="animation__arryUpDown" src="assets/images/shape/banner-inner-shape4.png" alt="image">
           </div>
           <div class="banner-inner__shape5">
               <img src="assets/images/shape/banner-inner-shape5.png" alt="image">
           </div>
           <div class="banner-inner__circle">
               <img class="slide-effect1" src="assets/images/shape/banner-inner-circle.png" alt="image">
           </div>
           <div class="banner-inner__circle2">
               <img class="slide-effect2" src="assets/images/shape/banner-inner-circle2.png" alt="image">
           </div>
           <div class="banner-inner__dots">
               <img class="pxl-image-zoom" src="assets/images/shape/banner-inner-dots.png" alt="image">
           </div>
           <div class="container">
               <div class="banner-inner__content">
                   <h1>TOP Category</h1>
                   <ul>
                       <li><a href="{{ route('/') }}">Home</a></li>
                       <li><i class="fa-regular fa-angle-right"></i></li>
                       <li>TOP Category</li>
                   </ul>
               </div>
           </div>
</section>
<section class="team-three-area pt-80 pb-80">
    <div class="container">
        <div class="row g-4">
            @if(count($topCategory) > 0)
                @foreach($topCategory as $top)
                <div class="col-xl-4 col-md-6  " data-wow-delay="00ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInUp;">
                    <div class="team__item">
                        <div class="team-three__content">
                            <h4 class="fs-22">
                                <a class="primary-hover" href="{{ route('search-by-category', ['course_slug'=>$top->slug ]) }}">{{ $top->name }}</a>
                            </h4>
                        </div>
                    </div>
                </div>
                @endforeach
                @else
                    <p class="text-center">No top category found.</p>
            @endif         
        </div>
    </div>
</section>

@stop