@extends('layouts.app')

@section('content')
<title>Work | Page</title>

<div class="about-header mb-0">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-10 text-center">
          <img src="{{url('pikat/img/about/about-header.png')}}" alt="" class="d-none d-md-block d-md-inline-flex" />
          <h2>Works</h2>
          <p>
            We distribute digital marketing advices and tactics according to
            the business targets through a data-driven strategy and also a
            growth hack method with the latest technology. We have a team with
            the best talent & professionals to tackle all the obstacles of
            your every each cases.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="section-work mt-0">
    <div class="container">
      <div class="row">
        <div class="col m-2 p-4">
          <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item">
              <a
                class="nav-pills active"
                id="pills-home-tab"
                data-toggle="pill"
                href="#pills-home"
                role="tab"
                aria-controls="pills-home"
                aria-selected="true"
                >All</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-pills"
                id="pills-profile-tab"
                data-toggle="pill"
                href="#pills-profile"
                role="tab"
                aria-controls="pills-profile"
                aria-selected="false"
                >Mobile Apps</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-pills"
                id="pills-profile-tab"
                data-toggle="pill"
                href="#pills-profile-seo"
                role="tab"
                aria-controls="pills-profile-seo"
                aria-selected="false"
                >SEO</a
              >
            <li class="nav-item">
              <a
                class="nav-pills"
                id="pills-contact-tab"
                data-toggle="pill"
                href="#pills-sosmed"
                role="tab"
                aria-controls="pills-sosmed"
                aria-selected="false"
                >Social Media</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-pills"
                id="pills-contact-tab"
                data-toggle="pill"
                href="#pills-brand"
                role="tab"
                aria-controls="pills-brand"
                aria-selected="false"
                >Brand Development</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-pills"
                id="pills-contact-tab"
                data-toggle="pill"
                href="#pills-design"
                role="tab"
                aria-controls="pills-design"
                aria-selected="false"
                >Creative Design</a
              >
            </li>
            <li class="nav-item">
              <a
                class="nav-pills"
                id="pills-contact-tab"
                data-toggle="pill"
                href="#pills-ui-ux"
                role="tab"
                aria-controls="pills-ui-ux"
                aria-selected="false"
                >Creative Design</a
              >
            </li>
          </ul>

          <div class="tab-content my-5" id="pills-tabContent">
            <div
              class="tab-pane fade show active"
              id="pills-home"
              role="tabpanel"
              aria-labelledby="pills-home-tab"
            >
              <div class="row">
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 mt-4">
                  <div class="card">
                    <img src="{{url('pikat/img/home/joox.png')}}" alt="" />
                    <div class="card-body">
                      <h5>JOOX - Sing Out Loud</h5>
                      <p>
                        Creative and Concept Development | Production | Event
                        Management Support
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 mt-4">
                  <div class="card card-1">
                    <img src="{{url('pikat/img/about/work.png')}}" alt="" />
                    <div class="card-body">
                      <h5>Mini Cooper - Printed Ads</h5>
                      <p>Creative Development | Brand Communication</p>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 mt-4">
                  <div class="card card-2">
                    <img src="{{url('pikat/img/about/works-1.png')}}" alt="" />
                    <div class="card-body">
                      <h5>AYOTani - Farmer’s Super Apps</h5>
                      <p>
                        Mobile Application Development | UIUX Design | API
                        Integration
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 mt-4 mt-lg-3">
                  <div class="card">
                    <img src="{{url('pikat/img/about/card-04.png')}}" alt="" />
                    <div class="card-body">
                      <h5>Tokopedia Maker Fest 2018</h5>
                      <p>
                        Creative and Concept Development | Artist Management |
                        Curate Tenant...
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 mt-4 mt-lg-3">
                  <div class="card">
                    <img src="{{url('pikat/img/about/card-05.png')}}" alt="" />
                    <div class="card-body">
                      <h5>Traveloka Xperience Product Lau..</h5>
                      <p>
                        Concept | Accommodation Arrangement | Production |
                        RSVP | Artist Arrangement..
                      </p>
                    </div>
                  </div>
                </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-4 mt-4 mt-lg-3">
                  <div class="card">
                    <img src="{{url('pikat/img/about/card-06.png')}}" alt="" />
                    <div class="card-body">
                      <h5>JOOX - La La Fest</h5>
                      <p>
                        Creative and Concept Development | Production | Event
                        Management Support
                      </p>
                    </div>
                  </div>
                </div>

                <div class="col-12 col-sm-12 col-md-6 col-lg-4 mt-4 mt-lg-3">
                  <div class="card card-2">
                    <img src="{{url('pikat/img/about/invest.png')}}" alt="" />
                    <div class="card-body">
                      <h5>Investor - Investment Planner Mo..</h5>
                      <p>
                        Mobile Application Development | UIUX Design | API
                        Integration
                      </p>
                    </div>
                  </div>
                </div>

                <div class="col-12 col-sm-12 col-md-6 col-lg-4 mt-4 mt-lg-3">
                  <div class="card">
                    <img src="{{url('pikat/img/about/tokopedia.png')}}" alt="" />
                    <div class="card-body">
                      <h5>Tokopedia</h5>
                      <p>Creative Event Design | Brand Activation</p>
                    </div>
                  </div>
                </div>

                <div class="col-12 col-sm-12 col-md-6 col-lg-4 mt-4 mt-lg-3">
                  <div class="card card-1">
                    <img src="{{url('pikat/img/about/bft.png')}}" alt="" />
                    <div class="card-body">
                      <h5>BFI Street Banner and Baliho</h5>
                      <p>Creative Design | Brand Activation</p>
                    </div>
                  </div>
                </div>

                <div class="col-12 col-sm-12 col-md-6 col-lg-4 mt-4 mt-lg-3">
                  <div class="card card-1">
                    <img src="{{url('pikat/img/about/traveloka.png')}}" alt="" />
                    <div class="card-body">
                      <h5>Traveloka Xperience Launch</h5>
                      <p>Creative Event Design | Brand Activation</p>
                    </div>
                  </div>
                </div>

                <div class="col-12 col-sm-12 col-md-6 col-lg-4 mt-4 mt-lg-3">
                  <div class="card card-1">
                    <img src="{{url('pikat/img/about/travelako-1.png')}}" alt="" />
                    <div class="card-body">
                      <h5>Traveloka eats</h5>
                      <p>Creative Event Design | Brand Activation</p>
                    </div>
                  </div>
                </div>

                <div class="col-12 col-sm-12 col-md-6 col-lg-4 mt-4 mt-lg-3">
                  <div class="card card-1">
                    <img src="{{url('pikat/img/about/traveloka-2.png')}}" alt="" />
                    <div class="card-body">
                      <h5>Dunhill - Dcode Launch Partyo</h5>
                      <p>
                        Creative and Concept Development | Live Streaming |
                        Production | Event Manage..
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="tab-pane fade"
              id="pills-profile"
              role="tabpanel"
              aria-labelledby="pills-profile-tab"
            >
              Mobile Apps
            </div>
            <div
              class="tab-pane fade"
              id="pills-profile-seo"
              role="tabpanel"
              aria-labelledby="pills-profile-tab"
            >
              SEO
            </div>
            <div
              class="tab-pane fade"
              id="pills-sosmed"
              role="tabpanel"
              aria-labelledby="pills-contact-tab"
            >
              Sosmed
            </div>
            <div
              class="tab-pane fade"
              id="pills-brand"
              role="tabpanel"
              aria-labelledby="pills-contact-tab"
            >
             Brand Development
            </div>
            <div
              class="tab-pane fade"
              id="pills-design"
              role="tabpanel"
              aria-labelledby="pills-contact-tab"
            >
             Creative Design
            </div>
            <div
              class="tab-pane fade"
              id="pills-ui-ux"
              role="tabpanel"
              aria-labelledby="pills-contact-tab"
            >
             UI UX Design
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section-partner">
    <div class="container">
      <div class="row d-none">
        <div class="col-12 text-center">
          <h2>Partners</h2>
        </div>
      </div>
      <div class="row mt-5 text-center justify-content-center">
        <div class="col-3 d-none d-md-block">
          <img src="{{url('pikat/img/home/fm.png')}}" alt="" />
        </div>
        <div class="col-3 d-none d-md-block">
          <img src="{{url('pikat/img/home/KBIJ.png')}}" alt="" />
        </div>
        <div class="col-2 d-none d-md-block">
          <img src="{{url('pikat/img/home/crif.png')}}" alt="" />
        </div>
        <div class="col-3 d-none d-md-block">
          <img src="{{url('pikat/img/home/privy.png')}}" alt="" />
        </div>
        <div class="col-3 d-none d-md-block mt-lg-5">
          <img src="{{url('pikat/img/home/zipay.png')}}" alt="" />
        </div>
        <div class="col-2 d-none d-md-block mt-lg-5">
          <img src="{{url('pikat/img/home/digisign.png')}}" alt="" />
        </div>
        <div class="col-2 d-none d-md-block mt-lg-5">
          <img src="{{url('pikat/img/home/doku.png')}}" alt="" />
        </div>
        <div class="col-3 d-none d-md-block mt-lg-5">
          <img src="{{url('pikat/img/home/asli.png')}}" alt="" />
        </div>
        <div class="col-2 d-none d-md-block mt-lg-5">
          <img src="{{url('pikat/img/home/izi_data_indonesia.png')}}" alt="" />
        </div>
      </div>
    </div>
  </div>

  <div class="start-your-project">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-11 col-sm-10 col-md-8 col-lg-5 text-center">
          <h5>
            Start your project and grow your business, before competitor do
            it.
          </h5>
          <p>
            We always deliver the best in our services, get us now, don't
            hesitate
          </p>

          <button class="btn btn-danger mt-4">Contact Us</button>
        </div>
      </div>
    </div>
  </div>

  <div class="section-certifications justify-content-center text-center">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h3>Certifications</h3>
        </div>
        <div class="col-10 col-sm-10 col-md-6 col-lg-3">
          <div class="card border-0">
            <div class="card-body">
              <img src="{{url('pikat/img/home/bnsp.png')}}" alt="" />
              <p>
                <b
                  >Certified Digital Marketing and Assessor Digital
                  Marketing</b
                >
                BNSP (Badan Nasional Sertifikasi Profesi)
              </p>
            </div>
          </div>
        </div>
        <div class="col-10 col-sm-10 col-md-6 col-lg-3">
          <div class="card border-0">
            <div class="card-body">
              <img src="{{url('pikat/img/home/kominfo.png')}}" alt="" />
              <p>
                <b>Instructor Digital Marketing</b> KOMINFO (Kementrian
                Komunikasi dan Informatika Republik Indonesia)
              </p>
            </div>
          </div>
        </div>
        <div class="col-10 col-sm-10 col-md-6 col-lg-3">
          <div class="card border-0">
            <div class="card-body mt-lg-4">
              <img src="{{url('pikat/img/home/click-minded.png')}}" alt="" />
              <p><b>Certified Digital Marketing </b>clickminded.com</p>
            </div>
          </div>
        </div>
        <div class="col-10 col-sm-10 col-md-6 col-lg-3">
          <div class="card border-0">
            <div class="card-body mt-lg-3">
              <img src="{{url('pikat/img/home/cpm.png')}}" alt="" />
              <span>
                <b>Certified Professional Marketing</b> AMF (Asian Marketing
                Federation)
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section-news">
    <div class="container">
      <div class="row">
        <div class="col-6">
          <h3>News & Updates</h3>
        </div>
        <div class="col-6 text-right">
          <a href="" id="view-all">View All</a>
        </div>
      </div>

      <div
        id="carouselExampleInterval1"
        class="carousel slide"
        data-ride="carousel"
      >
        <div class="carousel-inner">
          <div class="carousel-item active" data-interval="10000">
            <div class="row mt-3">
              <div class="col-12 mt-3 col-sm-11 col-md-4 col-lg-4">
                <div class="card">
                  <img src="{{url('pikat/img/home/news.png')}}" alt="" />
                  <div class="card-body">
                    <h6>Pikat Media Kreatif jasa SEO Indonesia terpe..</h6>
                    <p>
                      Pikat Media Kreatif adalah digital marketing agency yang
                      memiliki pengalaman dan wadah konsultasi untuk membantu
                      bisnis Anda menjangkau...
                    </p>
                    <a href="#" class="card-link"
                      >April 13, 2022 | 20 min read</a
                    >
                    <a href="#" class="card-link text-right" id="article"
                      >Read Article <i class="fa-solid fa-angle-right"></i
                    ></a>
                  </div>
                </div>
              </div>
              <div class="col-12 mt-3 col-sm-11 col-md-4 col-lg-4">
                <div class="card">
                  <img src="{{url('pikat/img/home/news.png')}}" alt="" />
                  <div class="card-body">
                    <h6>Pikat Media Kreatif jasa SEO Indonesia terpe..</h6>
                    <p>
                      Pikat Media Kreatif adalah digital marketing agency yang
                      memiliki pengalaman dan wadah konsultasi untuk membantu
                      bisnis Anda menjangkau...
                    </p>
                    <a href="#" class="card-link"
                      >April 13, 2022 | 20 min read</a
                    >
                    <a href="#" class="card-link text-right" id="article"
                      >Read Article <i class="fa-solid fa-angle-right"></i
                    ></a>
                  </div>
                </div>
              </div>
              <div class="col-12 mt-3 col-sm-11 col-md-4 col-lg-4">
                <div class="card">
                  <img src="{{url('pikat/img/home/news.png')}}" alt="" />
                  <div class="card-body">
                    <h6>Pikat Media Kreatif jasa SEO Indonesia terpe..</h6>
                    <p>
                      Pikat Media Kreatif adalah digital marketing agency yang
                      memiliki pengalaman dan wadah konsultasi untuk membantu
                      bisnis Anda menjangkau...
                    </p>
                    <a href="#" class="card-link"
                      >April 13, 2022 | 20 min read</a
                    >
                    <a href="#" class="card-link text-right" id="article"
                      >Read Article <i class="fa-solid fa-angle-right"></i
                    ></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="carousel-item" data-interval="2000">
            <div class="row mt-3">
              <div class="col-12 mt-3 col-sm-11 col-md-4 col-lg-4">
                <div class="card">
                  <img src="{{url('pikat/img/home/news.png')}}" alt="" />
                  <div class="card-body">
                    <h6>Pikat Media Kreatif jasa SEO Indonesia terpe..</h6>
                    <p>
                      Pikat Media Kreatif adalah digital marketing agency yang
                      memiliki pengalaman dan wadah konsultasi untuk membantu
                      bisnis Anda menjangkau...
                    </p>
                    <a href="#" class="card-link"
                      >April 13, 2022 | 20 min read</a
                    >
                    <a href="#" class="card-link text-right" id="article"
                      >Read Article <i class="fa-solid fa-angle-right"></i
                    ></a>
                  </div>
                </div>
              </div>
              <div class="col-12 mt-3 col-sm-11 col-md-4 col-lg-4">
                <div class="card">
                  <img src="{{url('pikat/img/home/news.png')}}" alt="" />
                  <div class="card-body">
                    <h6>Pikat Media Kreatif jasa SEO Indonesia terpe..</h6>
                    <p>
                      Pikat Media Kreatif adalah digital marketing agency yang
                      memiliki pengalaman dan wadah konsultasi untuk membantu
                      bisnis Anda menjangkau...
                    </p>
                    <a href="#" class="card-link"
                      >April 13, 2022 | 20 min read</a
                    >
                    <a href="#" class="card-link text-right" id="article"
                      >Read Article <i class="fa-solid fa-angle-right"></i
                    ></a>
                  </div>
                </div>
              </div>
              <div class="col-12 mt-3 col-sm-11 col-md-4 col-lg-4">
                <div class="card">
                  <img src="{{url('pikat/img/home/news.png')}}" alt="" />
                  <div class="card-body">
                    <h6>Pikat Media Kreatif jasa SEO Indonesia terpe..</h6>
                    <p>
                      Pikat Media Kreatif adalah digital marketing agency yang
                      memiliki pengalaman dan wadah konsultasi untuk membantu
                      bisnis Anda menjangkau...
                    </p>
                    <a href="#" class="card-link"
                      >April 13, 2022 | 20 min read</a
                    >
                    <a href="#" class="card-link text-right" id="article"
                      >Read Article <i class="fa-solid fa-angle-right"></i
                    ></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="carousel-item">
            <div class="row mt-3">
              <div class="col-12 mt-3 col-sm-11 col-md-4 col-lg-4">
                <div class="card">
                  <img src="{{url('pikat/img/home/news.png')}}" alt="" />
                  <div class="card-body">
                    <h6>Pikat Media Kreatif jasa SEO Indonesia terpe..</h6>
                    <p>
                      Pikat Media Kreatif adalah digital marketing agency yang
                      memiliki pengalaman dan wadah konsultasi untuk membantu
                      bisnis Anda menjangkau...
                    </p>
                    <a href="#" class="card-link"
                      >April 13, 2022 | 20 min read</a
                    >
                    <a href="#" class="card-link text-right" id="article"
                      >Read Article <i class="fa-solid fa-angle-right"></i
                    ></a>
                  </div>
                </div>
              </div>
              <div class="col-12 mt-3 col-sm-11 col-md-4 col-lg-4">
                <div class="card">
                  <img src="{{url('pikat/img/home/news.png')}}" alt="" />
                  <div class="card-body">
                    <h6>Pikat Media Kreatif jasa SEO Indonesia terpe..</h6>
                    <p>
                      Pikat Media Kreatif adalah digital marketing agency yang
                      memiliki pengalaman dan wadah konsultasi untuk membantu
                      bisnis Anda menjangkau...
                    </p>
                    <a href="#" class="card-link"
                      >April 13, 2022 | 20 min read</a
                    >
                    <a href="#" class="card-link text-right" id="article"
                      >Read Article <i class="fa-solid fa-angle-right"></i
                    ></a>
                  </div>
                </div>
              </div>
              <div class="col-12 mt-3 col-sm-11 col-md-4 col-lg-4">
                <div class="card">
                  <img src="{{url('pikat/img/home/news.png')}}" alt="" />
                  <div class="card-body">
                    <h6>Pikat Media Kreatif jasa SEO Indonesia terpe..</h6>
                    <p>
                      Pikat Media Kreatif adalah digital marketing agency yang
                      memiliki pengalaman dan wadah konsultasi untuk membantu
                      bisnis Anda menjangkau...
                    </p>
                    <a href="#" class="card-link"
                      >April 13, 2022 | 20 min read</a
                    >
                    <a href="#" class="card-link text-right" id="article"
                      >Read Article <i class="fa-solid fa-angle-right"></i
                    ></a>
                  </div>
                </div>
              </div
            </div>
          </div>
        </div>
        <button
          class="carousel-control-prev"
          type="button"
          data-target="#carouselExampleInterval1"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-target="#carouselExampleInterval1"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </button>
      </div>
    </div>
  </div>
@endsection