world-game/src/views/Default.svelte

<script>
  import { fade } from 'svelte/transition'

  let { data } = $props()
</script>

<div class="default" transition:fade>
  <div class="default__container">
    <h1>{data?.title || 'Page'}</h1>
    {#if data?.body}
      <div class="default__content">
        {@html data.body}
      </div>
    {/if}
  </div>
</div>

<style>
  .default {
    min-height: 100vh;
    padding: 8rem 2rem 4rem;
  }

  .default__container {
    max-width: 1200px;
    margin: 0 auto;
  }

  h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    margin-bottom: 2rem;
    color: #fff;
  }

  .default__content {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.8;
  }

  @media (max-width: 768px) {
    .default {
      padding: 6rem 1rem 3rem;
    }
  }
</style>