48 lines
1.9 KiB
Vue
48 lines
1.9 KiB
Vue
<template>
|
|
<!-- Hero card -->
|
|
<div class="relative">
|
|
<div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100" />
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="relative shadow-xl sm:rounded-2xl sm:overflow-hidden">
|
|
<div class="absolute inset-0">
|
|
<img class="h-full w-full object-cover" src="/hero.jpg" alt="" />
|
|
</div>
|
|
<div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
|
|
<h1
|
|
class="text-center text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"
|
|
>
|
|
<span class="block text-white">Faetale</span>
|
|
<span class="block text-indigo-600">Once Upon a Time...</span>
|
|
</h1>
|
|
<p
|
|
class="mt-6 max-w-lg mx-auto text-center text-xl text-indigo-500 sm:max-w-3xl"
|
|
>
|
|
...there was a queer tale of fantasy tabletop roleplaying games.
|
|
Join Gaiety on a journey through her favorite game systems,
|
|
adventures and who knows what else!
|
|
</p>
|
|
<div
|
|
class="mt-10 max-w-sm mx-auto sm:max-w-none sm:flex sm:justify-center"
|
|
>
|
|
<div
|
|
class="space-y-4 sm:space-y-0 sm:mx-auto sm:inline-grid sm:grid-cols-2 sm:gap-5"
|
|
>
|
|
<a
|
|
href="#"
|
|
class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-indigo-50 sm:px-8"
|
|
>
|
|
Watch
|
|
</a>
|
|
<a
|
|
href="#"
|
|
class="flex items-center justify-center px-4 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-indigo-500 bg-opacity-60 hover:bg-opacity-70 sm:px-8"
|
|
>
|
|
Support
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|