327 lines
14 KiB
Vue
327 lines
14 KiB
Vue
<template>
|
|
<div class="relative min-h-screen overflow-hidden bg-[#f5f5f5] px-4 py-8 font-sans text-[#0c0a09] md:px-8 md:py-12">
|
|
<div
|
|
class="pointer-events-none absolute left-1/2 top-8 h-[560px] w-[min(94vw,1040px)] -translate-x-1/2 rounded-[48px] bg-[radial-gradient(circle_at_18%_24%,rgba(167,229,211,0.62),transparent_28%),radial-gradient(circle_at_78%_28%,rgba(244,197,168,0.5),transparent_30%),radial-gradient(circle_at_52%_86%,rgba(168,200,232,0.52),transparent_34%)] blur-2xl"
|
|
aria-hidden="true"></div>
|
|
|
|
<main class="relative mx-auto grid w-full max-w-[1180px] gap-10" aria-labelledby="landing-title">
|
|
<nav class="flex items-center justify-between gap-4" aria-label="Acesso publico">
|
|
<NuxtLink to="/"
|
|
class="flex min-w-0 items-center gap-3 text-base font-semibold tracking-[0.16px] text-[#0c0a09]">
|
|
<span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#292524] text-white">
|
|
<Icon name="mdi:gamepad-variant" class="text-xl" />
|
|
</span>
|
|
<span>GameVerse</span>
|
|
</NuxtLink>
|
|
|
|
<div class="flex shrink-0 items-center gap-2">
|
|
<NuxtLink :to="hasToken ? '/home' : '/login'"
|
|
class="inline-flex h-10 items-center justify-center rounded-full bg-[#292524] px-5 text-[15px] font-medium leading-none text-white transition hover:bg-[#0c0a09] active:bg-[#0c0a09]">
|
|
{{ hasToken ? 'Ir para home' : 'Entrar' }}
|
|
</NuxtLink>
|
|
<NuxtLink to="/criar-conta"
|
|
class="hidden h-10 items-center justify-center rounded-full border border-[#d6d3d1] bg-white/70 px-5 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:border-[#0c0a09] sm:inline-flex">
|
|
Criar conta
|
|
</NuxtLink>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="grid gap-8 py-6 lg:grid-cols-[minmax(0,1.05fr)_minmax(360px,0.95fr)] lg:items-center lg:py-10">
|
|
<div class="grid gap-6">
|
|
<div>
|
|
<p
|
|
class="m-0 inline-flex rounded-full bg-[rgba(167,229,211,0.62)] px-3 py-1 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#0c0a09]">
|
|
Sistema distribuído gamer
|
|
</p>
|
|
<h1 id="landing-title"
|
|
class="my-5 max-w-[760px] break-words font-serif text-[44px] font-light leading-[1.02] tracking-[-1.2px] text-[#0c0a09] md:text-[72px] md:tracking-[-1.92px]">
|
|
GameVerse conecta sua jornada gamer em um só lugar.
|
|
</h1>
|
|
<p
|
|
class="m-0 max-w-[620px] text-base font-normal leading-6 tracking-[0.16px] text-[#4e4e4e] md:text-lg md:leading-7">
|
|
Uma plataforma integrada para descobrir jogos, acompanhar rankings, salvar favoritos,
|
|
montar perfil gamer e gerenciar gift cards com acesso autenticado.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-3 sm:flex-row">
|
|
<NuxtLink :to="hasToken ? '/home' : '/login'"
|
|
class="inline-flex h-11 items-center justify-center gap-2 rounded-full bg-[#292524] px-6 text-[15px] font-medium leading-none text-white transition hover:bg-[#0c0a09] active:bg-[#0c0a09]">
|
|
{{ hasToken ? 'Ir para minha home' : 'Entrar na plataforma' }}
|
|
<Icon name="mdi:arrow-right" class="text-base" />
|
|
</NuxtLink>
|
|
<NuxtLink to="/criar-conta"
|
|
class="inline-flex h-11 items-center justify-center rounded-full border border-[#d6d3d1] bg-white/70 px-6 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:border-[#0c0a09]">
|
|
Criar conta
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div class="grid gap-3 sm:grid-cols-3">
|
|
<div v-for="metric in metrics" :key="metric.label"
|
|
class="rounded-2xl border border-[#e7e5e4] bg-white/80 p-4">
|
|
<strong class="block text-2xl font-medium leading-tight tracking-[0.16px] text-[#0c0a09]">
|
|
{{ metric.value }}
|
|
</strong>
|
|
<span class="mt-1 block text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
|
|
{{ metric.label }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<aside
|
|
class="grid gap-4 rounded-2xl border border-[#e7e5e4] bg-white p-5 shadow-[0_12px_34px_rgba(0,0,0,0.08)] md:p-6">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div>
|
|
<span
|
|
class="inline-flex min-h-6 items-center rounded-full bg-[rgba(244,197,168,0.56)] px-2.5 py-1 text-xs font-semibold uppercase leading-none tracking-[0.96px] text-[#0c0a09]">
|
|
Prévia
|
|
</span>
|
|
<h2 class="mt-4 font-serif text-3xl font-light leading-[1.13] tracking-[-0.32px] text-[#0c0a09]">
|
|
Painel integrado
|
|
</h2>
|
|
</div>
|
|
<span class="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-[#292524] text-white">
|
|
<Icon name="mdi:view-dashboard-outline" class="text-xl" />
|
|
</span>
|
|
</div>
|
|
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
|
<article v-for="preview in dashboardPreview" :key="preview.label"
|
|
class="grid min-h-[138px] content-between rounded-xl border border-[#e7e5e4] bg-[#fafafa] p-4">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<span class="inline-flex h-10 w-10 items-center justify-center rounded-xl" :class="preview.accent">
|
|
<Icon :name="preview.icon" class="text-xl text-[#0c0a09]" />
|
|
</span>
|
|
<span class="text-xs font-semibold uppercase tracking-[0.96px] text-[#777169]">
|
|
{{ preview.badge }}
|
|
</span>
|
|
</div>
|
|
<div class="grid gap-1">
|
|
<strong class="text-xl font-medium leading-[1.18] tracking-[0.16px] text-[#0c0a09]">
|
|
{{ preview.value }}
|
|
</strong>
|
|
<p class="m-0 text-[13px] leading-[1.5] tracking-[0.13px] text-[#777169]">
|
|
{{ preview.label }}
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-[#e7e5e4] bg-white p-4">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div>
|
|
<p class="m-0 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#777169]">
|
|
Ranking semanal
|
|
</p>
|
|
<p class="m-0 mt-1 text-base font-medium leading-6 tracking-[0.16px] text-[#0c0a09]">
|
|
Counter-Strike 2 liderando a semana
|
|
</p>
|
|
</div>
|
|
<span
|
|
class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-[#292524] text-[15px] font-medium text-white">
|
|
1
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</section>
|
|
|
|
<section class="grid gap-5" aria-labelledby="features-title">
|
|
<div>
|
|
<p
|
|
class="m-0 inline-flex rounded-full bg-[rgba(168,200,232,0.56)] px-3 py-1 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#0c0a09]">
|
|
Recursos
|
|
</p>
|
|
<h2 id="features-title"
|
|
class="mt-4 font-serif text-3xl font-light leading-[1.13] tracking-[-0.32px] text-[#0c0a09] md:text-[40px]">
|
|
O que você encontra
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
|
|
<article v-for="feature in features" :key="feature.title"
|
|
class="grid min-h-[180px] content-between rounded-2xl border border-[#e7e5e4] bg-white p-5 shadow-[0_4px_16px_rgba(0,0,0,0.04)]">
|
|
<div class="grid gap-4">
|
|
<span class="inline-flex h-11 w-11 items-center justify-center rounded-xl" :class="feature.accent">
|
|
<Icon :name="feature.icon" class="text-xl text-[#0c0a09]" />
|
|
</span>
|
|
<div>
|
|
<h3 class="m-0 text-lg font-medium leading-6 tracking-[0.16px] text-[#0c0a09]">
|
|
{{ feature.title }}
|
|
</h3>
|
|
<p class="m-0 mt-2 text-[15px] leading-[1.47] tracking-[0.15px] text-[#777169]">
|
|
{{ feature.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
class="grid gap-6 rounded-2xl border border-[#e7e5e4] bg-white p-6 shadow-[0_4px_16px_rgba(0,0,0,0.04)] md:grid-cols-[minmax(0,1fr)_minmax(260px,360px)] md:p-8"
|
|
aria-labelledby="architecture-title">
|
|
<div>
|
|
<p
|
|
class="m-0 inline-flex rounded-full bg-[rgba(200,184,224,0.5)] px-3 py-1 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-[#0c0a09]">
|
|
Arquitetura distribuída
|
|
</p>
|
|
<h2 id="architecture-title"
|
|
class="mt-4 font-serif text-3xl font-light leading-[1.13] tracking-[-0.32px] text-[#0c0a09] md:text-[40px]">
|
|
Microsserviços conectados por uma experiência única.
|
|
</h2>
|
|
<p class="m-0 mt-4 max-w-[720px] text-base leading-6 tracking-[0.16px] text-[#4e4e4e]">
|
|
O GameVerse reúne serviços independentes para autenticação, catálogo, ranking,
|
|
favoritos, perfil gamer e gift cards. Cada área protege suas operações com token e
|
|
entrega uma parte do ecossistema.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid gap-3">
|
|
<div v-for="service in services" :key="service"
|
|
class="flex items-center gap-3 rounded-xl border border-[#e7e5e4] bg-[#fafafa] p-3">
|
|
<span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500"></span>
|
|
<span class="text-[15px] font-medium leading-[1.47] tracking-[0.15px] text-[#292524]">
|
|
{{ service }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section
|
|
class="flex flex-col gap-4 rounded-2xl border border-[#e7e5e4] bg-[#292524] p-6 text-white md:flex-row md:items-center md:justify-between md:p-8"
|
|
aria-label="Acesso autenticado">
|
|
<div>
|
|
<p class="m-0 text-xs font-semibold uppercase leading-[1.4] tracking-[0.96px] text-white/70">
|
|
Pronto para entrar
|
|
</p>
|
|
<h2 class="m-0 mt-2 font-serif text-3xl font-light leading-[1.13] tracking-[-0.32px]">
|
|
Sistema de validação de token funcional
|
|
</h2>
|
|
<p class="m-0 mt-3 text-[15px] leading-[1.47] tracking-[0.15px] text-white/70">
|
|
Acesse sua área autenticada e navegue por todos os módulos do GameVerse.
|
|
</p>
|
|
</div>
|
|
|
|
<NuxtLink :to="hasToken ? '/home' : '/login'"
|
|
class="inline-flex h-11 shrink-0 items-center justify-center gap-2 rounded-full bg-white px-6 text-[15px] font-medium leading-none text-[#0c0a09] transition hover:bg-[#f5f5f5]">
|
|
{{ hasToken ? 'Abrir dashboard' : 'Fazer login' }}
|
|
<Icon name="mdi:arrow-right" class="text-base" />
|
|
</NuxtLink>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
useHead({
|
|
title: 'GameVerse | Sistema Distribuído Gamer',
|
|
meta: [
|
|
{
|
|
name: 'description',
|
|
content:
|
|
'Plataforma integrada para descobrir jogos, acompanhar rankings, salvar favoritos, montar perfil gamer e gerenciar gift cards.'
|
|
}
|
|
]
|
|
})
|
|
|
|
const token = useCookie('token')
|
|
|
|
const hasToken = computed(() => Boolean(token.value))
|
|
|
|
const metrics = [
|
|
{
|
|
value: '6',
|
|
label: 'Módulos integrados'
|
|
},
|
|
{
|
|
value: 'JWT',
|
|
label: 'Sessão validada'
|
|
},
|
|
{
|
|
value: '24h',
|
|
label: 'Experiência gamer'
|
|
}
|
|
]
|
|
|
|
const dashboardPreview = [
|
|
{
|
|
badge: 'Ranking',
|
|
value: '#1 CS2',
|
|
label: 'Jogos mais fortes da semana',
|
|
icon: 'mdi:trophy-outline',
|
|
accent: 'bg-[rgba(244,197,168,0.56)]'
|
|
},
|
|
{
|
|
badge: 'Favoritos',
|
|
value: '3 salvos',
|
|
label: 'Lista pessoal de jogos',
|
|
icon: 'mdi:heart-outline',
|
|
accent: 'bg-[rgba(232,184,196,0.55)]'
|
|
},
|
|
{
|
|
badge: 'Catálogo',
|
|
value: 'Jogos ativos',
|
|
label: 'Busca e gerenciamento',
|
|
icon: 'mdi:controller-classic-outline',
|
|
accent: 'bg-[rgba(196,184,232,0.45)]'
|
|
},
|
|
{
|
|
badge: 'Carteira',
|
|
value: 'Gift cards',
|
|
label: 'Criação, saldo e resgate',
|
|
icon: 'mdi:gift-outline',
|
|
accent: 'bg-[rgba(167,229,211,0.62)]'
|
|
}
|
|
]
|
|
|
|
const features = [
|
|
{
|
|
title: 'Ranking de jogos',
|
|
description: 'Acompanhe jogos por semana, mês, ano, plataforma e volume de jogadores ativos.',
|
|
icon: 'mdi:trophy-outline',
|
|
accent: 'bg-[rgba(244,197,168,0.56)]'
|
|
},
|
|
{
|
|
title: 'Perfil gamer',
|
|
description: 'Cadastre nickname, bio, país, plataformas favoritas e jogos preferidos.',
|
|
icon: 'mdi:account-star-outline',
|
|
accent: 'bg-[rgba(232,184,196,0.55)]'
|
|
},
|
|
{
|
|
title: 'Gift cards',
|
|
description: 'Crie cartões, consulte saldo e resgate valores em uma área autenticada.',
|
|
icon: 'mdi:gift-outline',
|
|
accent: 'bg-[rgba(167,229,211,0.62)]'
|
|
},
|
|
{
|
|
title: 'Favoritos',
|
|
description: 'Salve jogos do ranking ou catálogo e mantenha sua lista sempre à mão.',
|
|
icon: 'mdi:heart-outline',
|
|
accent: 'bg-[rgba(232,184,196,0.45)]'
|
|
},
|
|
{
|
|
title: 'Catálogo',
|
|
description: 'Explore, filtre, detalhe e gerencie jogos com gêneros, plataformas e imagens.',
|
|
icon: 'mdi:controller-classic-outline',
|
|
accent: 'bg-[rgba(196,184,232,0.45)]'
|
|
},
|
|
{
|
|
title: 'Dados da conta',
|
|
description: 'Consulte informações da sessão autenticada, usuário e token de acesso.',
|
|
icon: 'mdi:account-circle-outline',
|
|
accent: 'bg-[rgba(168,200,232,0.56)]'
|
|
}
|
|
]
|
|
|
|
const services = [
|
|
'Autenticação com token JWT',
|
|
'Ranking de jogos',
|
|
'Catálogo de jogos',
|
|
'Lista de favoritos',
|
|
'Perfil gamer',
|
|
'Gift cards'
|
|
]
|
|
</script>
|