lelong-web-pembida/src/Master.vue

<template>
  <!-- <div id="style">
    <router-view></router-view>
  </div> -->
  <the-template>
    <div
      class="
        bg-yellow-300
        text-dark-100
        p-3
        flex
        justify-content-between
        lg:justify-content-center
        align-items-center
        flex-wrap
      "
    >
      <div class="font-bold mr-8">🔥 Hot Deals!</div>
      <div class="align-items-center hidden lg:flex">
        <span class="line-height-3"
          >Libero voluptatum atque exercitationem praesentium provident
          odit.</span
        >
      </div>
      <a class="flex align-items-center ml-2 mr-8">
        <a class="text-blue" href="#"
          ><span class="underline font-bold">Learn More</span></a
        >
      </a>
    </div>
    <div class="surface-section px-4 py-5 md:px-6 lg:px-8">
      <div class="grid">
        <div class="col-12 md:col-6 lg:col-3">
          <div class="surface-card shadow-2 p-3 border-round">
            <div class="flex justify-content-between mb-3">
              <div>
                <span class="block text-500 font-medium mb-3">Orders</span>
                <div class="text-900 font-medium text-xl">152</div>
              </div>
              <div
                class="
                  flex
                  align-items-center
                  justify-content-center
                  bg-blue-100
                  border-round
                "
                style="width: 2.5rem; height: 2.5rem"
              >
                <i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
              </div>
            </div>
            <span class="text-green-500 font-medium">24 new </span>
            <span class="text-500">since last visit</span>
          </div>
        </div>
        <div class="col-12 md:col-6 lg:col-3">
          <div class="surface-card shadow-2 p-3 border-round">
            <div class="flex justify-content-between mb-3">
              <div>
                <span class="block text-500 font-medium mb-3">Revenue</span>
                <div class="text-900 font-medium text-xl">$2.100</div>
              </div>
              <div
                class="
                  flex
                  align-items-center
                  justify-content-center
                  bg-orange-100
                  border-round
                "
                style="width: 2.5rem; height: 2.5rem"
              >
                <i class="pi pi-map-marker text-orange-500 text-xl"></i>
              </div>
            </div>
            <span class="text-green-500 font-medium">%52+ </span>
            <span class="text-500">since last week</span>
          </div>
        </div>
        <div class="col-12 md:col-6 lg:col-3">
          <div class="surface-card shadow-2 p-3 border-round">
            <div class="flex justify-content-between mb-3">
              <div>
                <span class="block text-500 font-medium mb-3">Customers</span>
                <div class="text-900 font-medium text-xl">28441</div>
              </div>
              <div
                class="
                  flex
                  align-items-center
                  justify-content-center
                  bg-cyan-100
                  border-round
                "
                style="width: 2.5rem; height: 2.5rem"
              >
                <i class="pi pi-inbox text-cyan-500 text-xl"></i>
              </div>
            </div>
            <span class="text-green-500 font-medium">520 </span>
            <span class="text-500">newly registered</span>
          </div>
        </div>
        <div class="col-12 md:col-6 lg:col-3">
          <div class="surface-card shadow-2 p-3 border-round">
            <div class="flex justify-content-between mb-3">
              <div>
                <span class="block text-500 font-medium mb-3">Comments</span>
                <div class="text-900 font-medium text-xl">152 Unread</div>
              </div>
              <div
                class="
                  flex
                  align-items-center
                  justify-content-center
                  bg-purple-100
                  border-round
                "
                style="width: 2.5rem; height: 2.5rem"
              >
                <i class="pi pi-comment text-purple-500 text-xl"></i>
              </div>
            </div>
            <span class="text-green-500 font-medium">85 </span>
            <span class="text-500">responded</span>
          </div>
        </div>
      </div>
    </div>
    
    <div
      class="
        flex
        justify-content-center
        flex-wrap
        card-container
        yellow-container
      "
    >
      <Button
        type="button"
        icon="pi pi-search"
        :loading="loading[2]"
        @click="load(2)"
      />
      <Button
        type="button"
        label="Search"
        :loading="loading[3]"
        @click="load(3)"
      />
    </div>
    <div class="surface-section px-4 py-8 md:px-6 lg:px-8 text-center">
      <div class="mb-3 font-bold text-2xl">
        <span class="text-900">One Product, </span>
        <span class="text-blue-600">Many Solutions</span>
      </div>
      <div class="text-700 text-sm mb-6">
        Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna.
      </div>
      <div class="grid">
        <div class="col-12 md:col-4 mb-4 px-5">
          <span
            class="p-3 shadow-2 mb-3 inline-block surface-card"
            style="border-radius: 10px"
          >
            <i class="pi pi-desktop text-4xl text-blue-500"></i>
          </span>
          <div class="text-900 mb-3 font-medium">Built for Developers</div>
          <span class="text-700 text-sm line-height-3"
            >Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur.</span
          >
        </div>
        <div class="col-12 md:col-4 mb-4 px-5">
          <span
            class="p-3 shadow-2 mb-3 inline-block surface-card"
            style="border-radius: 10px"
          >
            <i class="pi pi-lock text-4xl text-blue-500"></i>
          </span>
          <div class="text-900 mb-3 font-medium">End-to-End Encryption</div>
          <span class="text-700 text-sm line-height-3"
            >Risus nec feugiat in fermentum posuere urna nec. Posuere
            sollicitudin aliquam ultrices sagittis.</span
          >
        </div>
        <div class="col-12 md:col-4 mb-4 px-5">
          <span
            class="p-3 shadow-2 mb-3 inline-block surface-card"
            style="border-radius: 10px"
          >
            <i class="pi pi-check-circle text-4xl text-blue-500"></i>
          </span>
          <div class="text-900 mb-3 font-medium">Easy to Use</div>
          <span class="text-700 text-sm line-height-3"
            >Ornare suspendisse sed nisi lacus sed viverra tellus. Neque
            volutpat ac tincidunt vitae semper.</span
          >
        </div>
        <div class="col-12 md:col-4 mb-4 px-5">
          <span
            class="p-3 shadow-2 mb-3 inline-block surface-card"
            style="border-radius: 10px"
          >
            <i class="pi pi-globe text-4xl text-blue-500"></i>
          </span>
          <div class="text-900 mb-3 font-medium">Fast & Global Support</div>
          <span class="text-700 text-sm line-height-3"
            >Fermentum et sollicitudin ac orci phasellus egestas tellus rutrum
            tellus.</span
          >
        </div>
        <div class="col-12 md:col-4 mb-4 px-5">
          <span
            class="p-3 shadow-2 mb-3 inline-block surface-card"
            style="border-radius: 10px"
          >
            <i class="pi pi-github text-4xl text-blue-500"></i>
          </span>
          <div class="text-900 mb-3 font-medium">Open Source</div>
          <span class="text-700 text-sm line-height-3"
            >Nec tincidunt praesent semper feugiat. Sed adipiscing diam donec
            adipiscing tristique risus nec feugiat.
          </span>
        </div>
        <div class="col-12 md:col-4 md:mb-4 mb-0 px-3">
          <span
            class="p-3 shadow-2 mb-3 inline-block surface-card"
            style="border-radius: 10px"
          >
            <i class="pi pi-shield text-4xl text-blue-500"></i>
          </span>
          <div class="text-900 mb-3 font-medium">Trusted Securitty</div>
          <span class="text-700 text-sm line-height-3"
            >Mattis rhoncus urna neque viverra justo nec ultrices. Id cursus
            metus aliquam eleifend.</span
          >
        </div>
      </div>
    </div>
  </the-template>
</template>

<script>
export default {
  data() {
    return {
      loading: [false, false, false],
    };
  },
  methods: {
    load(index) {
      this.loading[index] = true;
      setTimeout(() => (this.loading[index] = false), 5000);
    },
  },
};
</script>

<style scoped>
#style {
  font-family: "Inter", Helvetica, Arial, sans-serif;
}
</style>