 @include('header') 

  <!-- ======= srart Breadcrumbs ======= -->
  <section class="breadcrumbs py-4" data-aos="fade-up" data-aos-delay="100">
    <div class="container">
      <ol>
        <li><a href="{{ url('/') }}">Home</a></li>
        <li>blog</li>
      </ol>
      <h2 class="title">our blog</h2>
      <p class="col-lg-10 col-12">
        Although, final stages of the internal network gives a complete experience of
        The Parameter of Speculative Environment
      </p>
    </div>
  </section><!-- End Breadcrumbs -->


  <!-- ============== Start Blog section ========== -->
  <section class="container blog py-5" id="blog">
    <div class="heading">
      <h4 class="pretitle" data-aos="fade-up">
        blog
      </h4>
      <h1 class="title col-12" data-aos="fade-up" data-aos-delay="100">
        our blog
      </h1>
      <p class="col-lg-7 col-12" data-aos="fade-up" data-aos-delay="150">
        As a matter of fact the unification of the coherent software provides a strict control over
        The Accomplishment of Intended Estimation
      </p>
    </div>

    <div class="row  gy-4 gx-4 ">
      <div class="col-lg-4 col-md-6 col-12 mx-auto" data-aos="fade-right" data-aos-delay="250">
        <div class="box card border-0">
          <div class="col-12">
            <img src="images/blog/post-images/1.jpg" alt="blog-img">
          </div>
          <div class="card-body">
            <div class="info d-flex justify-content-between">
              <h3><i class="bi bi-person-fill title-2 mx-2"></i>admin</h3>
              <h3> <i class="bi bi-calendar-date-fill title-2 mx-2"></i>27/05/2024</h3>
              <h3> <i class="bi bi-tag-fill title-2 mx-2"></i>web dev</h3>
            </div>
            <h1 class="title-2">
              how to learn javascript easily with this method
            </h1>
            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Explicabo earum id assumenda ad neque recusandae, quasi deleniti
              voluptatum eos vel quas molestias?</p>
            <a class="learn-more" href="blog-single.html">
              read more <i class="bi bi-arrow-right"></i>
            </a>
          </div>
        </div>
      </div>


  
@foreach ($posts as $post)
  <div class="col-lg-4 col-md-6 col-12 mx-auto" data-aos="fade-left" data-aos-delay="250">
    <div class="box card border-0">
      <div class="col-12">
        <!-- Display post image -->
        <img src="{{ asset('blogs/' . $post->image) }}" alt="blog-img">
      </div>
      <div class="card-body">
        <div class="info d-flex justify-content-between">
          <!-- Display post author -->
          <h3><i class="bi bi-person-fill title-2 mx-2"></i>{{ $post->author }}</h3>
          <!-- Display post created date -->
          <h3><i class="bi bi-calendar-date-fill title-2 mx-2"></i>{{ $post->created_at->format('d/m/Y') }}</h3>
          <!-- Display category -->
          <h3><i class="bi bi-tag-fill title-2 mx-2"></i>{{ $post->category->name }}</h3>
        </div>
        <h1 class="title-2">
          <!-- Display post title -->
          {{ $post->title }}
        </h1>
        <p>{{ Str::limit($post->short_description) }}</p> <!-- Limit content to 150 characters -->
        <a class="learn-more" href="{{ route('details', $post->slug) }}">
          read more <i class="bi bi-arrow-right"></i>
        </a>
      </div>
    </div>
  </div>
@endforeach

    </div>
    <div class="blog-nav">
      <a href="#" class="active " data-aos="fade-up" data-aos-delay="100">1</a>
      <a href="#" data-aos="fade-up" data-aos-delay="150">2</a>
      <a href="#" data-aos="fade-up" data-aos-delay="200">3</a>
      <a href="#" data-aos="fade-up" data-aos-delay="250">4</a>
    </div>
  </section>
  <!-- ============== End Blog section ========== -->


  <!-- ============== Start FAQ section ========== -->
  <section class="container faq py-5">
    <div class="heading">
      <h4 class="pretitle" data-aos="fade-up">
        FAQ
      </h4>
      <h1 class="title col-12" data-aos="fade-up" data-aos-delay="100">
        Frequently Asked Questions
      </h1>
      <p class="col-lg-7 col-12" data-aos="fade-up" data-aos-delay="150">
        As a matter of fact the unification of the coherent software provides a strict control over
        The Accomplishment of Intended Estimation
      </p>
    </div>
    <div class="row justify-content-center align-items-center  gx-4 ">
      <div class="col-12 col-lg-6" data-aos="fade-right" data-aos-delay="200">
        <img src="images/faq/customer.png" alt="faq">
      </div>
      <div class="col-12 col-lg-6  ">
        <div class="col-12 my-4" data-aos="fade-up" data-aos-delay="250">
          <div class="box">
            <div class="d-flex w-100 justify-content-between">
              <a data-bs-toggle="collapse" class="w-100" onclick="rotateIcon('icon1')" href="#answer1" role="button"
                aria-expanded="false">
                <h4 class="d-flex justify-content-between w-100 heading-3 m-0 p-0">
                  Do you offer both on-site and remote IT support?
                  <i class="bi bi-chevron-compact-down mx-4 rotate-icon" id="icon1"></i>
                </h4>
              </a>
            </div>
            <p id="answer1" class="collapse">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum ullam earum itaque, quas labore illo
              eligendi iure asperiores, modi veniam molestiae vero quasi. Ex, alias modi voluptates aspernatur
              consequuntur facere?
            </p>
          </div>
        </div>
        <div class="col-12 my-4 " data-aos="fade-up" data-aos-delay="300">
          <div class="box">
            <div class="d-flex w-100 justify-content-between">
              <a data-bs-toggle="collapse" class="w-100" onclick="rotateIcon('icon2')" href="#answer2" role="button"
                aria-expanded="false">
                <h4 class="d-flex justify-content-between w-100 heading-3 m-0 p-0">
                  what is techida ?
                  <i class="bi bi-chevron-compact-down mx-4 rotate-icon" id="icon2"></i>
                </h4>
              </a>
            </div>
            <p id="answer2" class="collapse">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum ullam earum itaque, quas labore illo
              eligendi iure asperiores, modi veniam molestiae vero quasi. Ex, alias modi voluptates aspernatur
              consequuntur facere?
            </p>
          </div>
        </div>
        <div class="col-12 my-4 " data-aos="fade-up" data-aos-delay="350">
          <div class="box">
            <div class="d-flex w-100 justify-content-between">
              <a data-bs-toggle="collapse" class="w-100" onclick="rotateIcon('icon3')" href="#answer3" role="button"
                aria-expanded="false">
                <h4 class="d-flex justify-content-between w-100 heading-3 m-0 p-0">
                  Is There Any Updates In The Future ?
                  <i class="bi bi-chevron-compact-down mx-4 rotate-icon" id="icon3"></i>
                </h4>
              </a>
            </div>
            <p id="answer3" class="collapse">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum ullam earum itaque, quas labore illo
              eligendi iure asperiores, modi veniam molestiae vero quasi. Ex, alias modi voluptates aspernatur
              consequuntur facere?
            </p>
          </div>
        </div>
        <div class="col-12 my-4 " data-aos="fade-up" data-aos-delay="400">
          <div class="box">
            <div class="d-flex w-100 justify-content-between">
              <a data-bs-toggle="collapse" class="w-100" onclick="rotateIcon('icon4')" href="#answer4" role="button"
                aria-expanded="false">
                <h4 class="d-flex justify-content-between w-100 heading-3 m-0 p-0">
                  How Much For The Service?
                  <i class="bi bi-chevron-compact-down mx-4 rotate-icon" id="icon4"></i>
                </h4>
              </a>
            </div>
            <p id="answer4" class="collapse">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum ullam earum itaque, quas labore illo
              eligendi iure asperiores, modi veniam molestiae vero quasi. Ex, alias modi voluptates aspernatur
              consequuntur facere?
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- ============== End FAQ section ========== -->
 @include('footer') 
