@extends("website.layouts.layout")
@section('title',"Project Location")
@section("body")

<section class="banner-services">
    <img class="banner-background-ellipse" src="{{asset('webAssets/assets/images/banner-bg-img.png')}}" alt="">
</section>

<section class="services-breadcrumb-section">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{route('homepage')}}">Home</a></li>
                <li class="breadcrumb-item active" aria-current="page">Blogs</li>
            </ol>
        </nav>
    </div>
</section>


<!-- Blogs section started -->


<section class="blogs">
    <div class="container">
        <div class="blogs-header-items d-flex align-items-center flex-column">
            <h3 class="heading">
                Latest news & business insights
            </h3>
            <p class="para text-center">Get hassle-free and professional house care services and much more.</p>
        </div>

        <div class="blogs-card-items">
            <div class="popular-project-block">
                <div class="popular-project-items">
                    <div class="popular-project-row">

                        @foreach($allblog as $blog)
                        <div class="popular-project-col blogs-col">
                            <a href="{{ route('blogs.oneblog', ['id' => $blog->id]) }}" id="blog_{{ $blog->id }}">
                                <div class="popular-img-col">
                                    <img class="img-fluid" src="{{ asset('blog/' . $blog->image) }}"
                                        alt="popular-project">
                                </div>

                                <div class="popular-text-col">
                                    <p class="para">{{ $blog->date }}</p>
                                    <h3 class="font-size-20">{{ $blog->title }}</h3>
                                    <p class="paragraph line-clamp">{{ $blog->description }}</p>
                                    <p class="readmore"><span>Read More</span> >></p>
                                </div>
                            </a>
                        </div>
                        @endforeach



                    </div>

                </div>
            </div>
        </div>
    </div>
</section>






<!-- Get on your team -->

<section class="join-team">
    <div class="container">
        <div class="join-team-block d-flex justify-content-center">
            <div class="join-team-item">
                <div class="d-flex join-team-inner  justify-content-between">
                    <div class="join-team-text-col d-flex align-items-center">
                        <div class="join-team-header d-flex flex-column">
                            <div class="join-team-inner-header">
                                <h3 class="font-size-32 heading">Get On Our Team</h3>
                                <p class="para">Want to join a company that is changing the way people work?</p>
                            </div>
                            <div class="join-team-action-btn">
                                <button class="btn btn-primary">Join Our Team</button>
                            </div>

                        </div>
                    </div>

                    <div class="join-team-img-col">
                        <img class="img-fluid" src="{{asset('webAssets/assets/images/join-team-img.png')}}" alt="join-team">
                    </div>



                </div>

            </div>
        </div>
    </div>
</section>



@endsection