ShowEasyFrontEnd/FrontEnd/pages/aboutUs.vue

<template>
  <client-only
    ><v-spacer>
      <v-card
        flat
        width="100%"
        height="auto"
        class="rounded-0 position-relative"
      >
        <v-img
          :src="require('~/assets/img/aboutUs_HeroBG.png')"
          :max-height="$vuetify.breakpoint.smAndUp ? 380 : 240"
          :min-height="$vuetify.breakpoint.smAndUp ? 380 : 240"
          gradient="to top right, rgba(0,0,0,.4), rgba(0,0,0,.4)"
        ></v-img>
        <v-card
          flat
          class="hero-content-wrapper d-flex align-center justify-center"
          color="transparent"
        >
          <v-card
            flat
            color="transparent"
            :class="
              $vuetify.breakpoint.smAndUp
                ? 'neutrals--text text--darken-1 logo-title text-size-42'
                : 'neutrals--text text--darken-1  logo-title text-size-25'
            "
          >
            Start your journey from ShowEasy,<br />
            <span class="complementary--text text--lighten-1"
              >Make Your Show Easy !</span
            >
          </v-card>
        </v-card>
      </v-card>
      <v-card
        flat
        width="100%"
        class="neutrals d-flex justify-center padding-80-60"
      >
        <v-card
          flat
          width="648"
          class="d-flex flex-column align-center text-center"
        >
          <v-img
            :src="require('~/assets/img/aboutUs1.png')"
            width="253"
            height="171"
          ></v-img>
          <v-spacer
            :class="
              $vuetify.breakpoint.smAndUp
                ? 'complementary--text text--lighten-1 font-weight-bold my-5 text-size-26'
                : 'complementary--text text--lighten-1 font-weight-bold my-5 text-size-18'
            "
          >
            {{ $t("Our Vision & Mission") }}
          </v-spacer>
          <v-spacer
            :class="
              $vuetify.breakpoint.smAndUp
                ? 'neutrals--text text--darken-4 font-weight-medium text-size-18'
                : 'neutrals--text text--darken-4 font-weight-medium text-size-12'
            "
            v-html="
              $t(
                'To create a simpler, more efficient, and more innovative event<br />experience for business connect to the world.'
              )
            "
          >
          </v-spacer>
        </v-card>
      </v-card>

      <v-card
        flat
        width="100%"
        class="d-flex justify-center neutrals darken-1 padding-80-60"
      >
        <v-card
          flat
          width="648"
          class="d-flex flex-column align-center text-center neutrals darken-1"
        >
          <v-img
            :src="require('~/assets/img/aboutUs2.png')"
            width="234"
            height="147"
          ></v-img>
          <v-spacer
            :class="
              $vuetify.breakpoint.smAndUp
                ? 'complementary--text text--lighten-1 font-weight-bold my-10 text-size-26'
                : 'complementary--text text--lighten-1 font-weight-bold my-10 text-size-18'
            "
          >
            {{ $t("Who is ShowEasy?") }}
          </v-spacer>
          <v-spacer
            :class="
              $vuetify.breakpoint.smAndUp
                ? 'neutrals--text text--darken-4 font-weight-bold mb-10 text-size-18'
                : 'neutrals--text text--darken-4 font-weight-bold mb-10 text-size-12'
            "
            v-html="
              $t(
                'ShowEasy is an online tradeshow integrated platform that you can find<br />the worldwide tradeshow information and related services.'
              )
            "
          >
          </v-spacer>
          <v-spacer
            :class="
              $vuetify.breakpoint.smAndUp
                ? 'neutrals--text text--darken-4 mb-10 text-size-18'
                : 'neutrals--text text--darken-4 mb-10 text-size-12'
            "
          >
            {{
              $t(
                "With more than 20 years of experiences in the event industry, we know how frustrating and time-consuming it is when preparing and attending for a tradeshow."
              )
            }}
          </v-spacer>
          <v-spacer class="mb-10 grey--text text--lighten1 font-italic">
            “{{ $t("How to choose a proper tradeshow?") }}”<br />
            “{{
              $t("How to find creditable and trustworthy suppliers?")
            }}”<br />
            “{{ $t("How to ship my exhibits safely to the venue?") }}”<br />
            “{{ $t("Where to stay during the event?") }}”<br />
            “{{ $t("Where to visit after the show?") }}”
          </v-spacer>
          <v-spacer
            :class="
              $vuetify.breakpoint.smAndUp
                ? 'neutrals--text text--darken-4 text-size-16'
                : 'neutrals--text text--darken-4 text-size-12'
            "
          >
            {{
              $t(
                "For those with these questions in mind and got tired of being lost…"
              )
            }}<br />
            <span class="primary--text">
              {{ $t("We hear you, ShowEasy hears you.") }}<br />
              {{ $t("We are here to help!") }}
            </span>
          </v-spacer>
          <v-img
            :src="require('~/assets/img/aboutUs3.png')"
            width="252"
            height="205"
            style="margin-top: 150px; margin-bottom: 100px"
          ></v-img>
          <v-spacer
            :class="
              $vuetify.breakpoint.smAndUp
                ? 'primary--text mb-10 text-size-18'
                : 'primary--text mb-10 text-size-12'
            "
          >
            {{
              $t(
                "Enjoy a Well-organized, Efficient, and Productive event journey."
              )
            }}
          </v-spacer>
          <v-btn
            :width="$vuetify.breakpoint.smAndUp ? 285 : 187"
            :height="$vuetify.breakpoint.smAndUp ? 56 : 46"
            :class="
              $vuetify.breakpoint.smAndUp
                ? 'primary white--text remove-upper border-radius-20 text-size-20'
                : 'primary white--text remove-upper border-radius-20  text-size-12'
            "
            depressed
            style="padding: 15px 20px; letter-spacing: 0.02em"
            :to="localePath('/')"
          >
            {{ $t("Start with ShowEasy now!") }}
          </v-btn>
        </v-card>
      </v-card>
    </v-spacer></client-only
  >
</template>

<script>
  export default {
    auth: false,
    data() {
      return {};
    },
  };
</script>

<style lang="scss">
  .hero-content-wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: red;
  }
  .hero-content {
    position: absolute;
    width: 100%;
    top: 30%;
    left: 5%;
  }

  .padding-80-60 {
    padding: 80px 60px;
  }
</style>