<template>
  <el-container class="container">
    <el-header>Navbar goes here</el-header>
    <el-main>
      <el-row :gutter="10" justify="center">
        <el-col
          :span="10"
          style="display: flex; justify-content: center;"
        >
          <el-card
            onclick=""
          >
            <img
              src="../assets/mainPage/offer.png"
              class="image"
            />
            <div>
              <p style="font-size: 50px;">Offer</p>
              <p>Match results go here</p>
            </div>
          </el-card>
        </el-col>
        <el-col
          :span="10"
          style="display: flex; justify-content: center;"
        >
          <el-card
            onclick=""
          >
            <img
              src="../assets/mainPage/wishlist.jpg"
              class="image"
            />
            <div>
              <p style="font-size: 50px;">Wish List</p>
              <p>User's wish list go here</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-row style="margin-top: 5%;">
        <el-col
          style="display: flex; justify-content: center;"
        >
          <el-card>
            <img
              src="../assets/mainPage/flight.jpeg"
              class="image"
            />
            <div>
              <p style="font-size: 50px;">Flight Ticket</p>
              <p>Find your flight!</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>
  
<script setup lang="ts">
  import { ref } from 'vue'
  const currentDate = ref(new Date())
</script>

<style>
  .image {
    width: 25vw;
    display: block;
  }
  .container {
    width: 100%;
    height: 100%;
    color: #fff;
    background-image: linear-gradient(135deg, #b3d1ff 10%, #fd5e086b 100%);
    font-size: 24px;
  }
</style>