<template>
  <div class="container">
    <div class="form-group row">
      <div class="col-md-10 offset-md-1">
        <ul class="nav nav-pills-a nav-pills mb-3 section-t3" id="pills-tab" role="tablist">
          <li class="nav-item">
            <a
              class="nav-link active"
              id="pills-video-tab"
              data-toggle="pill"
              href="#pills-video"
              role="tab"
              aria-controls="pills-video"
              aria-selected="true"
            >Restaurants</a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              id="pills-plans-tab"
              data-toggle="pill"
              href="#pills-plans"
              role="tab"
              aria-controls="pills-plans"
              aria-selected="false"
            >Categories</a>
          </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
          <div
            class="tab-pane fade show active"
            id="pills-video"
            role="tabpanel"
            aria-labelledby="pills-video-tab"
          >
            <Cards />
          </div>
          <div
            class="tab-pane fade"
            id="pills-plans"
            role="tabpanel"
            aria-labelledby="pills-plans-tab"
          >
            <Categories />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cards from "../home/restaurantsSection";
import Categories from "../home/restaurantCategory";

export default {
  name: "HomePage",
  components: {
    Cards,
    Categories
  }
};
</script>
