@extends('layouts.main')

@section('content')


<!-- banner-section -->
@if($bannerPosts->count() > 0)
<section class="banner-section spacing">
    <div class="container">
        <div class="row">
            <div class="col-xl-7 col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="box-main">
                    <div class="box-image">
                        <a href="{{route('blog-detail', $bannerPosts[0]->slug)}}" class="overlay"><img src="{{$bannerPosts[0]->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                    </div>
                    <div class="box-content box-content-absoulate">
                        <h6 style="background:#ff3385">{{$bannerPosts[0]->category->name}}</h6>
                        <h3><a href="{{route('blog-detail', $bannerPosts[0]->slug)}}" class="web-hover">{{$bannerPosts[0]->name}}</a></h3>
                        <div class="box-item">
                            <ul>
                                <li>by<a href="{{route('blog-detail', $bannerPosts[0]->slug)}}">{{$bannerPosts[0]->user->name}}</a></li>
                                <li><i class="fa-regular fa-calendar-days ms-2"></i>{{$bannerPosts[0]->getDate()}}</li>
                                <li><i class="far fa-comments ms-2"></i><a href="#">0 comment</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-5 col-lg-6 col-md-12 col-sm-12 col-12">
                <div class="box-vertical-main-items">
                    @foreach ($bannerPosts as $key => $bannerPost)   
                    @if($key != 0)
                    <div class="box-main-vertical">
                        <div class="box-vertical-image">
                            <a href="{{route('blog-detail', $bannerPost->slug)}}"><img src="{{$bannerPost->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                        </div>
                        <div class="box-vertical-content">
                            <h6 style="background:#ffaf25">{{$bannerPost->category->name}}</h6>
                            <h3><a href="{{route('blog-detail', $bannerPost->slug)}}">{{$bannerPost->name}}</a></h3>
                            <div class="box-item bg-color-a">
                                <ul>
                                    <li>by<a href="#">{{$bannerPost->user->name}}</a></li>
                                    <li><i class="fa-regular fa-calendar-days ms-2"></i>{{$bannerPost->getDate()}}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                    {{-- <div class="box-main-vertical">
                        <div class="box-vertical-image">
                            <a href="#"><img src="assetts/images/banner-3.jpg" alt=""></a>
                        </div>
                        <div class="box-vertical-content">
                            <h6 style="background:#0073ff">Technology</h6>
                            <h3><a href="#">African Nation Are Strugling To Save Their Wildlife</a></h3>
                            <div class="box-item bg-color-a">
                                <ul>
                                    <li>by<a href="#">admin</a></li>
                                    <li><i class="fa-regular fa-calendar-days ms-2"></i>December 9, 2021</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="box-main-vertical">
                        <div class="box-vertical-image">
                            <a href="#"><img src="assetts/images/banner-4.jpg" alt=""></a>
                        </div>
                        <div class="box-vertical-content">
                            <h6 style="background:#3dd800">Travel</h6>
                            <h3><a href="#">How to have fantas tic trip without blowing your budget</a></h3>
                            <div class="box-item bg-color-a">
                                <ul>
                                    <li>by<a href="#">admin</a></li>
                                    <li><i class="fa-regular fa-calendar-days ms-2"></i>December 9, 2021</li>
                                </ul>
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
</section>
@endif
@if($topStories->count() > 0)
<section class="top-stories spacing">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class="top-stories-head story-bg">
                    <h2>Top Stories</h2>
                    <span class="titledot"></span>
                    <span class="titleline"></span>
                </div>
            </div>
        </div>
        <div class="row">
            @foreach ($topStories as $topStory)
            <div class="col-lg-3 col-md-6 col-sm-6">
                <div class="top-stories-item">
                    <div class="box-image">
                        <a href="{{route('blog-detail', $topStory->slug)}}"><img src="{{$topStory->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                    </div>
                    <div class="box-content stories">
                        <h6>{{$topStory->category->name}}</h6>
                        <h3><a href="{{route('blog-detail', $topStory->slug)}}">{{$topStory->name}}</a></h3>
                        <div class="box-item">
                            <ul>
                                <li>by<a href="#">{{$topStory->user->name}}</a></li>
                                <li><i class="fa-regular fa-calendar-days"></i>{{$topStory->getDate()}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
          
        </div>
    </div>
</section>
@endif

<!-- top-stories-section -->
<section class="New spacing">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-md-12 col-sm-12 col-sm-12">
                @if($whatsNewPosts->count() > 0)
                <div class="row">
                    <div class="new-head top-stories-head">
                        <h2>What’s New</h2>
                        <span class="titledot"></span>
                        <span class="titleline"></span>
                    </div>
                    <div class="col-lg-7 col-md-7 col-sm-12">
                        <div class="box-main">
                            <div class="box-image">
                                <a href="{{route('blog-detail',$whatsNewPosts[0]->slug)}}"><img src="{{$whatsNewPosts[0]->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                            </div>
                            <div class="box-content box-content-absoulate">
                                <h6 style="background:#2c14e2">{{$whatsNewPosts[0]->category->name}}</h6>
                                <h3><a href="{{route('blog-detail',$whatsNewPosts[0]->slug)}}" class="web-hover">{{$whatsNewPosts[0]->name}}</a></h3>
                                <div class="box-item">
                                    <ul>
                                        <li>by<a href="#">{{$whatsNewPosts[0]->user->name}}</a></li>
                                        <li><i class="fa-regular fa-calendar-days ms-2"></i>{{$whatsNewPosts[0]->getDate()}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-5 col-md-5 col-sm-12">
                        <div class="box-vertical-main-items">
                            @foreach ($whatsNewPosts as $key => $whatsNewPost)
                                @if ($key != 0)
                                <div class="box-main-vertical news-absoulate">
                                    <div class="box-vertical-image">
                                        <a href="{{route('blog-detail',$whatsNewPost->slug)}}"><img src="{{$whatsNewPost->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                                </div>
                                <div class="box-vertical-content stories">
                                    <h6>{{$whatsNewPost->category->name}}</h6>
                                    <h3><a href="{{route('blog-detail',$whatsNewPost->slug)}}">{{$whatsNewPost->name}}</a></h3>
                                    <div class="box-item">
                                        <ul>
                                            <li><i class="fa-regular fa-calendar-days ms-2"></i>{{$whatsNewPost->getDate()}}</li>
                                        </ul>
                                    </div>
                                    <div class="news-counter">
                                        <span>1</span>
                                    </div>
                                </div>
                            </div>
                            @endif
                            @endforeach
                            
                        </div>
                    </div>
                </div>
                @endif
                @if($lifestylePosts->count() > 0)
                <div class="row Style">
                    <div class="Life Style top-stories-head pt-5 pb-2">
                        <h2>Life Style</h2>
                        <span class="titledot"></span>
                        <span class="titleline"></span>
                    </div>
                    @foreach ($lifestylePosts as $lifestylePost)
                        
                    <div class="col-lg-6 col-md-6">
                        <div class="box-main overlay mb-3">
                            <div class="box-image">
                                <a href="{{route('blog-detail',$lifestylePost->slug)}}"><img src="{{$lifestylePost->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                            </div>
                            <div class="box-content box-content-absoulate">
                                <h6 style="background:#ff3385">{{$lifestylePost->category->name}}</h6>
                                <h3><a href="{{route('blog-detail',$lifestylePost->slug)}}" class="web-hover">{{$lifestylePost->name}}</a></h3>
                                    <div class="box-item">
                                        <ul>
                                            <li>by<a href="#">{{$lifestylePost->user->name}}</a></li>
                                            <li><i class="fa-regular fa-calendar-days ms-2"></i>{{$lifestylePost->getDate()}}</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    
                </div>
                @endif
            </div>

            <div class="col-lg-3 col-sm-12">
                <div class="row">
                    <div class="col-lg-12 col-md-6 col-sm-12">
                        <div class="stay top-stories-head ">
                            <h2>STAY CONNECTED</h2>
                            <span class="titledot"></span>
                            <span class="titleline"></span>
                        </div>
                        <div class="stay-connect">
                            <ul class="stay-content">
                                <li>
                                    <ul class="social-main facebok">
                                        <li>
                                            <a href="{{$setting['facebook']}}">
                                                <div class="stay-icon"><i class="fa-brands fa-facebook-f"></i></div>
                                                <div class="stay-text">
                                                    <span>Fans</span>
                                                </div>
                                                {{-- <div class="stay-follower">
                                                    <span>0</span>
                                                </div> --}}
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul class="social-main followx">
                                        <li>
                                            <a href="{{$setting['twitter']}}">
                                                <div class="stay-icon"><i class="fa-brands fa-x-twitter"></i></div>
                                                <div class="stay-text">
                                                    <span>Fans</span>
                                                </div>
                                                {{-- <div class="stay-follower">
                                                    <span>0</span>
                                                </div> --}}
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul class="social-main printest">
                                        <li>
                                            <a href="{{$setting['pinterest']}}">
                                                <div class="stay-icon"><i class="fa-brands fa-pinterest-p"></i></div>
                                                <div class="stay-text">
                                                    <span>Fans</span>
                                                </div>
                                                {{-- <div class="stay-follower">
                                                    <span>0</span>
                                                </div> --}}
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                {{-- <li>
                                    <ul class="social-main dribble">
                                        <li>
                                            <a href="#">
                                                <div class="stay-icon"><i class="fa-brands fa-dribbble"></i></div>
                                                <div class="stay-text">
                                                    <span>Fans</span>
                                                </div>
                                                <div class="stay-follower">
                                                    <span>0</span>
                                                </div>
                                            </a>
                                        </li>
                                    </ul>
                                </li> --}}
                                <li>
                                    <ul class="social-main insta">
                                        <li>
                                            <a href="{{$setting['instagram']}}">
                                                <div class="stay-icon"><i class="fa-brands fa-instagram"></i></div>
                                                <div class="stay-text">
                                                    <span>Fans</span>
                                                </div>
                                                {{-- <div class="stay-follower">
                                                    <span>0</span>
                                                </div> --}}
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                                <li>
                                    <ul class="social-main youtube">
                                        <li>
                                            <a href="{{$setting['youtube']}}">
                                                <div class="stay-icon"><i class="fa-brands fa-youtube"></i></div>
                                                <div class="stay-text">
                                                    <span>Fans</span>
                                                </div>
                                                {{-- <div class="stay-follower">
                                                    <span>0</span>
                                                </div> --}}
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    @if($popularPosts->count() > 0)
                    <div class="col-lg-12 col-md-6 col-sm-12">
                        <div class="POPULAR  top-stories-head pt-4 pb-4">
                            <h2>POPULAR NEWS</h2>
                            <span class="titledot"></span>
                            <span class="titleline"></span>
                        </div>
                        <div class="box-vertical-main-items POPULAR">
                            @foreach ($popularPosts as $popularPost)
                                
                            <div class="box-main-vertical Popular-absoulate">
                                <div class="box-vertical-image circle">
                                    <a href="{{route('blog-detail',$popularPost->slug)}}"><img src="{{$popularPost->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                                </div>
                                <div class="box-vertical-content stories POPULAR">
                                    <h6>{{$popularPost->category->name}}</h6>
                                    <h3><a href="{{route('blog-detail',$popularPost->slug)}}">{{$popularPost->name}}</a></h3>
                                    <div class="box-item">
                                        <ul>
                                            <li><i class="fa-regular fa-calendar-days ms-2"></i>{{$popularPost->getDate()}}</li>
                                        </ul>
                                    </div>
                                    <div class="counter">
                                        <span>1</span>
                                    </div>
                                </div>
                            </div>
                            @endforeach

                        </div>
                    </div>
                    @endif
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="powerful" style="background-image: url({{asset('assets/images/popularbg.jpg')}})">
                        <a href="#"><img src="{{asset('assetts/images/logo-light.svg')}}" alt=""></a>
                        <h3>The Most Powerful</h3>
                        <h4>News, Blog & Magazine WordPress Theme</h4>
                        <div class="poweful-btn web-btn">
                            <a href="#">shop now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@if($fashionPosts->count() > 0)
<!-- section-Technology -->
<section class="Technology overlay spacing" style="background-image: url({{asset('assets/images/blog_49.jpg')}});">
    <div class="container">
        <div class="row justify-content-center text-center">
            <div class="col-lg-6 col-md-8 col-sm-10 col-xl-6">
                <div class="banner-slider">
                    @foreach ($fashionPosts as $key => $fashionPost)   
                    <div class="swiper-content-absoulate">
                        <div class="swiper-content box-content text-center">
                            <div class="stories">
                                <h6>{{$fashionPost->category->name}}</h6>
                            </div>
                            <h3><a href="{{route('blog-detail', $fashionPost->slug)}}">{{$fashionPost->name}}</a>
                            </h3>
                            <div class="box-item">
                                <ul>
                                    <li>by<a href="#">{{$fashionPost->user->name}}</a></li>
                                    <li><i
                                        class="fa-regular fa-calendar-days ms-2"></i>{{$fashionPost->getDate()}}
                                    </li>
                                    <li><i
                                        class="fa-solid fa-signal"></i><span>1825</span>Views
                                    </li>
                                </ul>
                            </div>
                            <div class="swiper-content-icon">
                                <a href="#"><i class="fa-solid fa-play"></i></a>
                            </div>
                        </div>
                    </div>
                    @endforeach
             
                </div>
            </div>
        </div>
        <div class="row">
            <div class="technology-slider">
                @foreach ($fashionPosts as $key => $fashionPost)  
                <div class="col-lg-3 col-md-4 col-sm-6 col-12 col-xl-3">
                    <div class="technology-item">
                        <div class="box-main-vertical">
                            <div class="vertical-image">
                                <img src="{{$fashionPost->getFirstMediaUrl('thumbnail')}}" alt="">
                            </div>
                            <div class="box-vertical-content stories">
                                <h6>{{$fashionPost->category->name}}</h6>
                                <h3>{{$fashionPost->name}}</h3>
                                <div class="box-item bg-color-a">
                                    <ul>
                                        <li><i class="fa-regular fa-calendar-days"></i>{{$fashionPost->getDate()}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach
              
            </div>
        </div>
    </div>
</section>
@endif
<!-- lastestnews-section -->
@if ($latestPosts->count() > 0)
<section class="lastestnews spacing pb-3">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-md-12 col-sm-12">
                <div class="lastest-items">
                    <div class="lastest-news-img">
                        <img src="{{asset('assets/images/lastestnews.jpg')}}" alt="">
                    </div>
                    <div class="Life Style top-stories-head pt-5">
                        <h2>Latest News</h2>
                        <span class="titledot"></span>
                        <span class="titleline"></span>
                    </div>
                    @foreach ($latestPosts as $latestPost)
                        
                    <div class="box-vertical-main-items">
                        <div class="box-main-vertical">
                            <div class="box-vertical-image">
                                <a href="{{route('blog-detail', $latestPost->slug)}}"><img src="{{$latestPost->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                            </div>
                            <div class="box-vertical-content">
                                <h6 style="background:#2c14e2">Adventure</h6>
                                <h3><a href="{{route('blog-detail', $latestPost->slug)}}">{{$latestPost->name}}</a></h3>
                                {!!$latestPost->short_description!!}
                                    <div class="box-item bg-color-a">
                                        <ul>
                                            <li>by<a href="#">{{$latestPost->user->name}}</a></li>
                                            <li><i class="fa-regular fa-calendar-days ms-2"></i>{{$latestPost->getDate()}}</li>
                                        </ul>
                                    </div>
                                    <div class="lastest-btn web-btn">
                                        <a href="{{route('blog-detail', $latestPost->slug)}}">Read More<i class="fa-solid fa-arrow-right"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                        
                </div>
                <div class="text-center list-loadmore">
                    <div class="loadmore-wrap">
                        <span class="before-line"></span>
                        <a href="#">LoadMore<i class="fas fa-redo-alt"></i></a>
                        <span class="after-line"></span>
                    </div>
                </div>
                <div class="nonuka-image lastest-news-img">
                    <img src="{{asset('assets/images/nouka.jpg')}}" alt="">
                </div>
            </div>
            <div class="col-lg-3 col-md-12 col-sm-12">
                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="lastest-suscribe"
                            style="background-image: url({{asset('assets/images/lastestnewbg.jpg')}});background-repeat: no-repeat;background-size: cover;background-position: center;">
                            <h4>Subscribe To Our Newsletter</h4>
                            <p style="color: #8e8f91;">No spam, notifications only about new products, updates.</p>
                            <div class="lastest-form mt-4">
                            
                                <form action="{{route(name: 'submit-newsletter')}}" method="post">
                                    @csrf
                                    <input type="mail" placeholder="Your Email*" class="form-input"  name="email" required>
                                    <button type="submit">SUBSCRIBE</button>
                                </form>
                            </div>
                           
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        {{-- <div class="stay top-stories-head mt-4 ">
                            <h2>HOT CATEGORIES</h2>
                            <span class="titledot"></span>
                            <span class="titleline"></span>
                        </div>
                        <div class="stay-connect">
                            <ul class="stay-content">
                                <li>
                                    <div class="lastest-connect lastest-absoulte overlay ">
                                        <a href="#">
                                            <div class="lastest-connet-img">
                                                <img src="assetts/images/popular1.jpg" alt="">
                                            </div>
                                            <div class="lastest-connect-content">
                                                <div class="stay-text">
                                                    <span>Fans</span>
                                                </div>
                                                <div class="stay-follower">
                                                    <span>3</span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="lastest-connect lastest-absoulte overlay ">
                                        <a href="#">
                                            <div class="lastest-connet-img">
                                                <img src="assetts/images/style.jpg" alt="">
                                            </div>
                                            <div class="lastest-connect-content">
                                                <div class="stay-text">
                                                    <span>Fans</span>
                                                </div>
                                                <div class="stay-follower">
                                                    <span>3</span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="lastest-connect lastest-absoulte overlay ">
                                        <a href="#">
                                            <div class="lastest-connet-img">
                                                <img src="assetts/images/popular1.jpg" alt="">
                                            </div>
                                            <div class="lastest-connect-content">
                                                <div class="stay-text">
                                                    <span>Fans</span>
                                                </div>
                                                <div class="stay-follower">
                                                    <span>3</span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="lastest-connect lastest-absoulte overlay ">
                                        <a href="#">
                                            <div class="lastest-connet-img">
                                                <img src="assetts/images/popular2.jpg" alt="">
                                            </div>
                                            <div class="lastest-connect-content">
                                                <div class="stay-text">
                                                    <span>Fans</span>
                                                </div>
                                                <div class="stay-follower">
                                                    <span>3</span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="lastest-connect lastest-absoulte overlay ">
                                        <a href="#">
                                            <div class="lastest-connet-img">
                                                <img src="assetts/images/popular3.jpg" alt="">
                                            </div>
                                            <div class="lastest-connect-content">
                                                <div class="stay-text">
                                                    <span>Fans</span>
                                                </div>
                                                <div class="stay-follower">
                                                    <span>3</span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="lastest-connect lastest-absoulte overlay ">
                                        <a href="#">
                                            <div class="lastest-connet-img">
                                                <img src="assetts/images/top-storie2.jpg" alt="">
                                            </div>
                                            <div class="lastest-connect-content">
                                                <div class="stay-text">
                                                    <span>Fans</span>
                                                </div>
                                                <div class="stay-follower">
                                                    <span>3</span>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </div> --}}
                    </div>
                    <div class="col-lg-12">
                        <div class="summer-sale d-md-none d-lg-block ">
                            <img src="{{asset('assets/images/summersale.jpg')}}" alt="">
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12">
                                <div class="stay top-stories-head">
                                    <h2>POPULAR NEWS</h2>
                                    <span class="titledot"></span>
                                    <span class="titleline"></span>
                                </div>
                            </div>
                            @foreach ($popularPosts as $popularPost)

                            <div class="col-lg-6 col-md-6 col-sm-6">
                                <div class="top-stories-item">
                                    <div class="box-image Budget">
                                        <a href="{{route('blog-detail',$popularPost->slug)}}"><img src="{{$popularPost->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                                    </div>
                                    <div class="box-content stories Budget">
                                        <h6>{{$popularPost->category->name}}</h6>
                                        <h3><a href="{{route('blog-detail',$popularPost->slug)}}">{{$popularPost->name}}</a></h3>
                                        <div class="box-item">
                                            <ul>
                                                <li><i class="fa-regular fa-calendar-days"></i>{{$popularPost->getDate()}}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endif

@if ($featuredPosts->count() > 0)
<!-- featureed-section -->
<section class="featureed spacing">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12">
                <div class=" featured-head Life Style top-stories-head ">
                    <h2>Featured Post</h2>
                    <span class="titledot"></span>
                    <span class="titleline"></span>
                </div>
            </div>
            <div class="col-lg-4 col-md-12 col-sm-12">
                <div class="box-main">
                    <div class="box-image">
                        <a href="{{route('blog-detail',$featuredPosts[0]->slug)}}"><img src="{{$featuredPosts[0]->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                    </div>
                    <div class="box-content box-content-absoulate featured">
                        <h6 style="background:#2c14e2">{{$featuredPosts[0]->category->name}}</h6>
                        <h3><a href="{{route('blog-detail',$featuredPosts[0]->slug)}}" class="web-hover">{{$featuredPosts[0]->name}}</a></h3>
                        <div class="box-item">
                            <ul>
                                <li>by<a href="{{route('blog-detail',$featuredPosts[0]->slug)}}">{{$featuredPosts[0]->user->name}}</a></li>
                                <li><i class="fa-regular fa-calendar-days ms-2"></i>{{$featuredPosts[0]->getDate()}}</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-10 col-sm-12">
                <div class="feartued-items">
                    @foreach ($featuredPosts as $key => $featuredPost)
                    @if ($key > 0 && $key < 4)
                    <div class="box-vertical-main-items">
                        <div class="box-main-vertical">
                            <div class="box-vertical-image">
                                <a href="{{route('blog-detail',$featuredPost->slug)}}"><img src="{{$featuredPost->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                            </div>
                            <div class="box-vertical-content stories">
                                <h6>{{$featuredPost->category->name}}</h6>
                                <h3><a href="{{route('blog-detail',$featuredPost->slug)}}">{{$featuredPost->name}}</a></h3>
                                <div class="box-item">
                                    <ul>
                                        <li><i class="fa-regular fa-calendar-days ms-2"></i>{{$featuredPost->getDate()}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach

                </div>
            </div>
            <div class="col-lg-4 col-md-10 col-sm-12">
                <div class="feartued-items">
                    @foreach ($featuredPosts as $key => $featuredPost)
                    @if ($key > 3)
                    <div class="box-vertical-main-items">
                        <div class="box-main-vertical">
                            <div class="box-vertical-image">
                                <a href="{{route('blog-detail',$featuredPost->slug)}}"><img src="{{$featuredPost->getFirstMediaUrl('thumbnail')}}" alt=""></a>
                            </div>
                            <div class="box-vertical-content stories">
                                <h6>{{$featuredPost->category->name}}</h6>
                                <h3><a href="{{route('blog-detail',$featuredPost->slug)}}">{{$featuredPost->name}}</a></h3>
                                <div class="box-item">
                                    <ul>
                                        <li><i class="fa-regular fa-calendar-days ms-2"></i>{{$featuredPost->getDate()}}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                    @endforeach
                 

                </div>
            </div>

        </div>
    </div>
</section>
@endif
<!-- blog-stories-section -->
<section class="blog-stories spacing pb-0">
    <div class="container">
        <div class="row  align-items-center">
            <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="blog-stories-img">
                    <img src="{{asset('assets/images/bl0g.png')}}" alt="">
                </div>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="blog-stories-content lastest-form">
                    <div class="row">
                        <div class="col-lg-8">
                            <h2>Get The Best Blog Stories into Your inbox!</h2>
                        </div>
                        <div class="col-lg-12">
                            <form action="{{route('submit-newsletter')}}" method="post">
                                @csrf
                                <input type="mail" placeholder="Your Email*" name="email" required>
                                <button type="submit">SUBSCRIBE</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</section> 
@endsection

@section('css')

@endsection

@section('script')

@endsection