@extends('layouts.app')

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

<div class="about-header">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-10 text-center">
          <img src="{{url('pikat/img/about/about-header.png')}}" class="d-none d-md-block d-md-inline-flex" alt="" />
          <h2>About Us</h2>
          <p>
            We are client-centric hub focusing on planting uniqueness of
            brands binding intuition and data-driven approaches to drive
            exponential client growth and meaningful brand experiences, to
            achieve the targeted market fit, for consumers across industries
            with our proven digital marketing strategies.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="setion-say-hi">
    <div class="container">
      <div class="row">
        <div class="col-4 offset-1">
          <img src="{{url('pikat/img/pikat-logo.png')}}" alt="" width="80%" />
        </div>
        <div class="col-7">
          <h3>Say hi to Pikat brand!</h3>
          <p>
            Pikat understands that digital marketing solutions have to be
            smart, creative, and we did. We combine modern technology with
            extraordinary creativity and unconventional knowledge with
            rigorous research. The sweet combination of technology, creative
            communication, and a well-thought-out execution strategy supports
            vertical marketing at the center of your business, so you can
            focus on the next important item on your list. <br /><br />
            Our focus is on adding value to your brand, and focus on
            attracting your online business to levels you never expected. The
            core of our corporate culture is to develop the mindset of
            employees to do some of the sharpest specialists in the digital
            industry working on your accounts. A friendship definitely starts
            from a meeting which can later develop into a collaboration and
            collaboration that is full, inspiring, helping you build a recipe
            for success
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="section-we-concern py-5">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-10 text-center">
          <h2 class="mt-5">What We Concern</h2>
          <p class="mb-5">
            Pikat is a platform for consulting and providing digital-based
            marketing solutions for any business scale that creates positive
            results to increase brand and drive more sales
          </p>
        </div>
      </div>
      <div class="row justify-content-center py-5">
        <div class="col-5">
          <h4>Design</h4>
          <p>
            We deliver perfection in every details we made. Our principle is
            “Great design comes with details”. We bring it to your brand in
            our design services coming up with many medias.
          </p>
        </div>
        <div class="col-5">
          <h4>Business</h4>
          <p>
            We put every effort to boost your sales by building your brand
            image and awareness to people. It takes dedication of time,
            technique, and our experience to sail you there.
          </p>
        </div>
        <div class="col-5 my-5">
          <h4>Technology</h4>
          <p>
            We committed to using the best technology, and keep abreast of the
            latest innovations in digital marketing. We're adopting the newest
            ways to connect your brand with online audience.
          </p>
        </div>
        <div class="col-5 my-5">
          <h4>Communication</h4>
          <p>
            We do every aspect, from progress to the method of our work with
            your brand to be communicated transparently, so you can see how
            your brand is built into an extraordinary brand.
          </p>
        </div>
      </div>
    </div>
  </div>

  <div class="section-concept">
    <div class="container">
      <div class="row my-5">
        <div class="col-12">
          <h2>Logo Concept</h2>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-5">
          <h3 class="mt-5 mb-3">SAY HI TO PIKAT BRAND!</h3>
          <p>
            Our logo was inspired by a rope and a paintdrop. We hope that rope
            will consistently tie the brand who needs recognition by dripping
            the colorful creativity of a paint drop.
          </p>
        </div>
        <div class="col-10 col-sm-10 col-md-8 col-lg-4 offset-1">
          <img src="{{url('pikat/img/about/concept.png')}}" alt=""  width="100%"/>
        </div>
      </div>
      <div class="container">
        <div class="row logo">
          <div class="col-3 mt-4 offset-1">
            <h4>Logo</h4>
          </div>
          <div class="col-2 offset-1">
            <img src="{{url('pikat/img/pikat-logo.png')}}" alt="" width="100%" />
            <span>Granted Logo (40%)</span>
          </div>
          <div class="col-2 offset-2">
            <img src="{{url('pikat/img/pikat-logo.png')}}" alt="" width="100%" />
            <span>Solid Logo (100%)</span>
          </div>
        </div>

        <div class="row justify-content-center colors">
          <div class="col-3 offset-1">
            <!-- <h4>Colors</h4> -->
          </div>
          <div class="col-3 offset-1">
            <img src="{{url('pikat/img/about/double.png')}}" alt="" width="20%" />
            <span>Gradient Tone</span>
          </div>
          <div class="col-3 offset-1">
            <div class="row">
              <div class="col-3 mt-3">
                <img src="{{url('pikat/img/about/Vector 3.png')}}" alt="" width="100%" />
              </div>
              <div class="col-6">
                <span>#2d2d2d C70 M64 Y63 K64 R45 G45 B45 </span>
              </div>
            </div>
          </div>

          <div class="col-3 offset-1 mt-3">
            <h4>Colors</h4>
          </div>
          <div class="col-3 offset-1 mt-3">
            <div class="row">
              <div class="col-3 mt-3">
                <img src="{{url('pikat/img/about/C2xxxhdpi.png')}}" alt="" width="100%" />
              </div>
              <div class="col-6">
                <span>#855f90 C54 M71 Y18 K2 R33 G95 B144 </span>
              </div>
            </div>
          </div>
          <div class="col-3 offset-1 mt-3">
            <div class="row">
              <div class="col-3 mt-3">
                <img src="{{url('pikat/img/about/C5xxxhdpi.png')}}" alt="" width="100%" />
              </div>
              <div class="col-6">
                <span>#ea947f C5 M50 Y46 K0 R234 G148 B127 </span>
              </div>
            </div>
          </div>

          <div class="col-3 offset-1 mt-3">
            <!-- <h4></h4> -->
          </div>
          <div class="col-3 offset-1 mt-3">
            <div class="row">
              <div class="col-3 mt-3">
                <img src="{{url('pikat/img/about/C4xxxhdpi 7.png')}}" alt="" width="100%" />
              </div>
              <div class="col-6">
                <span>#ea7077 C3 M70 Y42 K0 R234 G112 B119 </span>
              </div>
            </div>
          </div>
          <div class="col-3 offset-1 mt-3">
            <div class="row">
              <div class="col-3 mt-3">
                <img src="{{url('pikat/img/about/C3xxxhdpi.png')}}" alt="" width="100%" />
              </div>
              <div class="col-6">
                <span>#f9d078 C2 M18 Y62 K0 R249 G208 B120 </span>
              </div>
            </div>
          </div>
        </div>

        <div class="row mt-5">
          <div class="col-3 offset-1 mt-5">
            <h4>Typography</h4>
          </div>
          <div class="col-7 offset-1 mt-3">
            <img src="{{url('pikat/img/about/fonts.png')}}" width="100%" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section-logo-on">
    <div class="container">
      <div class="row">
        <div class="col-6">
          <h3>Logo on Color Background</h3>
          <ol class="mt-4">
            <li>
              When the background is a color with more than 50% intensity, the
              reverse (all-white) logo should be used.
            </li>
            <li>
              At background intensities below to 50%, the real color of Pikat
              shall be applicable.
            </li>
            <li>
              When the background is too similar to one of the paintdrop in
              the full-color logo, use either the gray or white monochrome
              logo—whichever creates the most contrast.
            </li>
          </ol>
        </div>
        <div class="col-3 offset-1">
          <img src="{{url('pikat/img/about/logo-colors.png')}}" alt="" class="mt-4" width="100%" />
          <img src="{{url('pikat/img/about/logo-white.png')}}" alt="" class="mt-3"  width="100%"/>
        </div>
      </div>
    </div>
  </div>

  <div class="section-not-todo">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <h3>What Not To Do</h3>
        </div>
        <div class="col-10 col-sm-9 col-md-6 col-lg-6 mt-3">
          <p>
            The logo and its elements, colors,and proportions are the unity —
            it should not be changed for any reason, or used in a way that
            makes it hard to be recognized and read.
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col-12 col-sm-12 col-md-9 col-lg-8 text-center">
          <div class="row">
            <div class="col-3 mt-5">
              <img src="{{url('pikat/img/about/items-logo.png')}}" alt="" width="100%" />
              <span
                ><i class="fa-solid fa-close"></i> Do not adjust the
                proportions</span
              >
            </div>
            <div class="col-3 mt-5">
              <img src="{{url('pikat/img/about/not-effect.png')}}" alt="" width="100%" />
              <span
                ><i class="fa-solid fa-close"></i> Do not add any effect
              </span>
            </div>
            <div class="col-3 mt-5">
              <img src="{{url('pikat/img/about/donot-stretch.png')}}" alt="" width="100%" />
              <span><i class="fa-solid fa-xmark"></i> Do not stretch </span>
            </div>
            <div class="col-3 mt-5 offset-1">
              <img src="{{url('pikat/img/about/donot-place.png')}}" alt="" width="100%" />
              <span
                ><i class="fa-solid fa-xmark"></i> Do not place over the image
              </span>
            </div>
            <div class="col-3 mt-5">
              <img src="{{url('pikat/img/about/donot-background.png')}}" alt="" width="100%" />
              <span
                ><i class="fa-solid fa-xmark"></i> Do not place on a
                background with insufficient contrast
              </span>
            </div>
          </div>
        </div>
        <div class="col-4">
          <img src="{{url('pikat/img/about/gradient.png')}}" alt="" width="100%"/>
        </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/slide-4.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/slide-3.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/slide-4.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/slide-3.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/slide-4.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/slide-3.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