@if($loop->first)
                                <div class="row align-items-center how-it-works d-flex">
                                  <div class="col-2 text-center bottom d-inline-flex justify-content-center align-items-center">
                                    <div class="circle font-weight-bold">{!! $tl->id !!}</div>
                                  </div>
                                  <div class="col-6">
                                    <h5>{!! $tl->company !!}</h5>
                                    <p>{!! $tl->description !!}</p>
                                  </div>
                                </div>
                                <!--path between 1-2-->
                                <div class="row timeline">
                                  <div class="col-2">
                                    <div class="corner top-right"></div>
                                  </div>
                                  <div class="col-8">
                                    <hr/>
                                  </div>
                                  <div class="col-2">
                                    <div class="corner left-bottom"></div>
                                  </div>
                                </div>
                                @elseif($loop->even)
                                <!--second section-->
                                <div class="row align-items-center justify-content-end how-it-works d-flex">
                                  <div class="col-6 text-right">
                                    <h5>{!! $tl->company !!}</h5>
                                    <p>{!! $tl->description !!}</p>
                                  </div>
                                  <div class="col-2 text-center full d-inline-flex justify-content-center align-items-center">
                                    <div class="circle font-weight-bold">{!! $tl->id !!}</div>
                                  </div>
                                </div>
                                <!--path between 2-3-->
                                <div class="row timeline">
                                  <div class="col-2">
                                    <div class="corner right-bottom"></div>
                                  </div>
                                  <div class="col-8">
                                    <hr/>
                                  </div>
                                  <div class="col-2">
                                    <div class="corner top-left"></div>
                                  </div>
                                </div>
                                @elseif($loop->iteration % 2 != 0)
                                <div class="row align-items-center how-it-works d-flex">
                                    <div class="col-2 text-center bottoms d-inline-flex justify-content-center align-items-center">
                                      <div class="circle font-weight-bold">{!! $tl->id !!}</div>
                                    </div>
                                    <div class="col-6">
                                      <h5>{!! $tl->company !!}</h5>
                                      <p>{!! $tl->description !!}</p>
                                    </div>
                                  </div>
                                  <!--path between 1-2-->
                                  <div class="row timeline">
                                    <div class="col-2">
                                      <div class="corner top-right"></div>
                                    </div>
                                    <div class="col-8">
                                      <hr/>
                                    </div>
                                    <div class="col-2">
                                      <div class="corner left-bottom"></div>
                                    </div>
                                  </div>
                                @elseif($loop->last)
                                <div class="row align-items-center how-it-works d-flex">
                                    <div class="col-2 text-center top d-inline-flex justify-content-center align-items-center">
                                      <div class="circle font-weight-bold">{!! $tl->id !!}</div>
                                    </div>
                                    <div class="col-6">
                                      <h5>{!! $tl->company !!}</h5>
                                      <p>{!! $tl->description !!}</p>
                                    </div>
                                  </div>
                                @endif
                                @endforeach

public function index()
    {
      $desc = Home::first();
      $users = User::first();
      $site = Site::first();
      $timeline = Timeline::get();
      $services = Services::get();
      $port = Portfolio::get();
      $cat = DB::Table("cat_port")->get();
      $news = DB::table('news')->join('category', 'category.name', '=', 'news.category')->selectRaw('news.*, category.*, category.url as curl, news.created_at as created')->orderBy('created', 'DESC')->get()->take(3);
        return view('home', ['desc' => $desc, 'timeline' => $timeline, 'users' => $users, 'services' => $services, 'port' => $port, 'cat' => $cat, 'news' => $news, 'site' => $site, 'isHome' => true]);
    }