<script lang="ts">
	import { goto } from '$app/navigation';
	import { GAME_CONFIG } from '$lib/config';


</script>


<div class="hero  min-h-screen transition-all duration-300 "


>
	<div class="hero-content text-center select-none  p-12 group  hover:backdrop-blur hover:bg-base-100/70">
		<div class="w-xl group-hover:w-2xl transition-all duration-1000 ease-in-out ">
			<p class="text-5xl font-bold ">
      <span class="text-rotate">
        <span class="justify-items-center">
          <span>{GAME_CONFIG.title}</span>
          <span>{GAME_CONFIG.title_en}</span>
        </span>
      </span>
			</p>
			<p class="pt-2">versin {GAME_CONFIG.version}</p>
			<p class="py-6 text-left">
				{GAME_CONFIG.description}
			</p>
			<!-- 事件会冒泡到父元素hero-content，因此这些按钮可以不用显式绑定事件 -->
			<div class="w-full">
				<button class="btn  btn-ghost  btn-wide  group-hover:btn-primary "
					on:click="{() => goto('/install')}"
				>
					安装游戏
				</button>
			</div>

		</div>
	</div>

</div>