lightlimx-website/components/StartupContent/index.vue

<template>
    <div class="startup-content">
      <h2 class="startup-content-h2 wow fadeInUp"  data-wow-delay=".3s">Join Accelerator</h2>
      <p class="startup-content-p wow fadeInUp"  data-wow-delay=".3s">Each year,we choose over 30 early-stage programs to join our 3-month mentorship-driven accelerators.Once you're selected for an accelerator, you'll be part of the LightLimX community for life.That means you have a hyperconnected platform to expand your business and expand your network with access to a talented group of founders, investors, mentors, and industry leaders.</p>
      <span class="startup-content-btn wow fadeInUp" @click="$router.push({path:'/contact'})" data-wow-delay=".3s">Apply Now</span>
      <h2 class="startup-content-h2 startup-content-h2-2 wow fadeInUp"  data-wow-delay=".3s">
        Your Startup Needs Are Covered
      </h2>
      <p class="startup-content-desc wow fadeInUp"  data-wow-delay=".3s">
        Modeled after the most effective global programs and built by accelerator veterans, LightLimX will bring you exactly what you need, when you need it.
      </p>
      <ul class="startup-content-ul">
        <li class="startup-content-li wow fadeInUp"  data-wow-delay=".5s" v-for="(item,index) in staticData" :key="index+'_startup'">
          <img v-lazy="assetsUri(item.img)" v-if="item.img" class="startup-content-li-img" alt="" />
          <h3 class="startup-content-li-h3" >{{item.title}}</h3>
          <p class="startup-content-li-p" v-html="item.desc"></p>
        </li>
        <li class="startup-content-li" style="opacity: 0" v-if="staticData.length%3==2">
        </li>
      </ul>
    </div>
</template>

<script>
  import {
    assetsUri
  } from "../../utils";

  export default {
        name: "StartupContent",
    props:{
      staticData:{
        type:Array,
        default:()=>[]
      }
    },
      data(){
          return {
            assetsUri,
          }
      }
    }
</script>

<style scoped lang="less">
.startup-content{
  &-desc{
    font-size: .24rem;
    font-family: Manrope;
    font-weight: bold;
    line-height: .44rem;
    text-align: center;
    color: #302D2C;
    max-width: 9.67rem;
    margin: .72rem auto 0;
  }
  &-h2{
    padding-top: 1.5rem;
    font-size: .6rem;
    font-family: Manrope;
    font-weight: bold;
    line-height: 1.1rem;
    color: #302D2C;
    text-align: center;
  }
  &-p{
    margin-top: .72rem;
    font-size: .2rem;
    font-family: Manrope;
    font-weight: 400;
    line-height: .4rem;
    color: #302D2C;
    text-align: center;
  }
  &-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.22rem auto 0;
    width: 3.24rem;
    height: .6rem;
    border: 1px solid #9B9B9B;
    border-radius: .1rem;
    font-size: .24rem;
    font-family: Manrope;
    font-weight: bold;
    color: #302D2C;
    cursor: pointer;
    margin-bottom: .7rem;
    &:hover{
      background-color: #F49F00;
      transition: background-color .3s ease-in;
      border-color: #fff;
    }
  }
  &-ul{
    margin-top: .93rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  &-li{
    cursor: pointer;
    width: 4.09rem;
    height: 4.23rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: .76rem;
    box-sizing: border-box;
    padding-left: .29rem;
    padding-right: .29rem;
    margin-bottom: .32rem;
    transition: all .3s ease-in;
    &-h3{
      margin-top: .32rem;
      font-size: .24rem;
      font-family: Manrope;
      font-weight: bold;
      color: #342927;
      text-align: center;
    }
    &-p{
      margin-top: .32rem;
      font-size: .16rem;
      font-family: Manrope;
      font-weight: 400;
      line-height: .32rem;
      color: #302D2C;
      text-align: center;
    }
    &-img{
      display: block;
      width: .88rem;
      height: .88rem;
    }
    &:hover{
      transform: scale(1.01);
      box-shadow: 0 .03rem .2rem rgba(0, 0, 0, 0.06);
    }
  }
}

@media screen and (max-width: 820px) {
  .startup-content{
    &-ul{
      justify-content: space-around;
    }
  }
}
@media screen and (max-width: 768px) {
  .startup-content{
    &-desc{
      font-size: .3rem;
      line-height: .4rem;
      max-width: 6.9rem;
      margin: .28rem auto 0;
    }
    &-h2{
      padding-top: .5rem;
      &-2{
        max-width: 6.5rem;
        margin: 0 auto;
        line-height: .7rem;
      }
    }
    &-p{
      margin-top: .28rem;
      font-size: .24rem;
      line-height: .4rem;
      padding: 0 .3rem;
    }
    &-btn{
      margin: .65rem auto 0;
      width: 5.18rem;
      height: .96rem;
      font-size: .24rem;
      margin-bottom: 1rem;
    }
    &-ul{
      margin-top: .49rem;
    }
    &-li{
      margin: 0 .3rem;
      width: 100%;
      min-height: 7rem;
      padding-top: 1.2rem;
      padding-left: .29rem;
      padding-right: .29rem;
      margin-bottom: .32rem;
      &-h3{
        margin-top: .73rem;
        font-size: .4rem;
      }
      &-p{
        margin-top: .6rem;
        font-size: .24rem;
        line-height: .34rem;
      }
      &-img{
        width: 2rem;
        height: 2rem;
      }
    }
  }
}
</style>