@extends('layouts.front-layout')
@section('title', 'Blog')
@section('content')

    <!-- INNER PAGE HERO SECTION -->
    <section class="innerpage-main w-100">
        <img src="front-web-assets/images/banner7.jpg" class="img-fluid zoomAnim w-100 h-100" alt="">
        <div class="innerpage-main__overlay">
            <div class="container">
                <h1>Blogs</h1>
            </div>
        </div>
    </section>
    <!-- !@INNER PAGE HERO SECTION -->

    <section class="inner-blog">
        <div class="container">
            <h2 class="heading text-center mx-auto">Read our weekly blogs about</h2>

            @if(isset($blogs))
                @foreach($blogs as $val)
                    <div class="blog-option">
                        <figure data-aos="fade-up">
                            <img class="img-fluid" src="{{ asset('storage/' . $val->image) }}" alt="{{$val->name}}">
                        </figure>
                        <h4 data-aos="fade-up">{{ $val->title }}</h4>
                        <p data-aos="fade-up">{!! $val->detail !!}</p>
                        <div data-aos="fade-up">
                            <a href="" class="btn themeBtn">Read More</a>
                        </div>
                    </div>
                @endforeach
            @else
                <p>No blogs available.</p>
            @endif

        </div>
    </section>

    @include('front.include.contact')

@endsection