94 lines
1.8 KiB
Vue
94 lines
1.8 KiB
Vue
<template>
|
|
<v-container class="home-container">
|
|
<v-row justify="center" align="center" class="home-header">
|
|
<h1 class="home-title">PolyMarket</h1>
|
|
</v-row>
|
|
|
|
<v-row justify="center" align="center" class="home-subtitle">
|
|
<p>Welcome to PolyMarket - Your Gateway to Decentralized Trading</p>
|
|
</v-row>
|
|
|
|
<v-row justify="center" align="center" class="home-content">
|
|
<v-col cols="12" md="8" lg="6">
|
|
<v-card class="home-card">
|
|
<v-card-title>Market Overview</v-card-title>
|
|
<v-card-text>
|
|
<p>Explore the latest market data and trading opportunities.</p>
|
|
<v-btn
|
|
class="home-btn"
|
|
color="primary"
|
|
@click="navigateToTrade"
|
|
>
|
|
Go to Trading
|
|
</v-btn>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
|
|
const navigateToTrade = () => {
|
|
// Navigate to trade page (we'll add this route later)
|
|
console.log('Navigate to trade page')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home-container {
|
|
padding: 40px 20px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.home-header {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.home-title {
|
|
font-size: 3rem;
|
|
font-weight: bold;
|
|
color: #0066cc;
|
|
margin: 0;
|
|
}
|
|
|
|
.home-subtitle {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.home-subtitle p {
|
|
font-size: 1.2rem;
|
|
color: #666666;
|
|
margin: 0;
|
|
}
|
|
|
|
.home-content {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.home-card {
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
padding: 24px;
|
|
text-align: center;
|
|
}
|
|
|
|
.home-card-title {
|
|
font-size: 1.5rem;
|
|
font-weight: 500;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.home-card-text {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.home-btn {
|
|
margin-top: 16px;
|
|
}
|
|
</style>
|