<template>
  <div>
    <v-card rounded="0" border="0" elevation="0" class="maxw">
      <v-card-item>
        <logo class="logo-xl"/>
      </v-card-item>
      <v-card-subtitle class="pl-8 mx-auto">Advanced DeFi Orders</v-card-subtitle>
  <!--    <social class="ml-12"/>-->
      <v-card-text>
        Dexorder powers up your favorite DeFi exchange with advanced order types!
      </v-card-text>
      <v-card-text>
        <v-list>
          <v-list-item>
            <uniswap-logo class="mr-2"/>
            Supports Uniswap v3 <alpha/>
          </v-list-item>
          <v-list-item><v-icon icon="mdi-ray-vertex" class="mr-2"/> Limit Orders <alpha/></v-list-item>
          <v-list-item><v-icon icon="mdi-clock-outline" class="mr-2"/> DCA and TWAP Orders <alpha/></v-list-item>
          <v-list-item><v-icon icon="mdi-vector-line" class="mr-2"/> Diagonal Limit Orders <soon/></v-list-item>
          <v-list-item><v-icon icon="mdi-chart-timeline-variant-shimmer" class="mr-2"/> Stop Loss / Take Profit <soon/></v-list-item>
          <v-list-item><v-icon icon="mdi-format-list-checks" class="mr-2"/> One-Cancels-the-Other (OCO) Groups <soon/></v-list-item>
          <v-list-item><v-icon icon="mdi-cancel" class="mr-2"/> Single-transaction Cancel All <alpha/></v-list-item>
          <v-list-item><v-icon icon="mdi-alert-outline" class="mr-2"/> Single-transaction Sell Everything <soon/></v-list-item>
          <v-list-item><v-icon icon="mdi-shimmer" class="mr-2"/> Custom Complex Orders <soon/></v-list-item>
        </v-list>
      </v-card-text>
      <home-actions/>
    </v-card>
    <div style="height: 3rem; font-size: 0; line-height: 0;"/>
    <how-it-works/>
    <home-actions/>
  </div>
</template>

<script setup>
import {useTheme} from "vuetify";
import Alpha from "@/components/Alpha.vue";
import Soon from "@/components/Soon.vue";
import HowItWorks from "@/corp/HowItWorks.vue";
import HomeActions from "@/corp/HomeActions.vue";
import UniswapLogo from "@/corp/UniswapLogo.vue";
import Logo from "@/components/Logo.vue";

const theme = useTheme().current

</script>

<style scoped lang="scss">
.arrow {
  font-size: 22px;
}
</style>