<template>
  <div :class="[
    'min-h-screen transition-colors duration-300',
    'bg-gray-100 text-black',
    'dark:bg-gray-900 dark:text-gray-200'
  ]">
    <SiteHeader />
    <HeroSection />
    <RitsuSection />
    <SupportSection />
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import SiteHeader from './components/SiteHeader.vue'
import HeroSection from './components/HeroSection.vue'
import RitsuSection from './components/RitsuSection.vue'
import SupportSection from './components/SupportSection.vue'



onMounted(() => {
  if (window.matchMedia("(prefers-color-scheme: dark)").matches)
    document.documentElement.classList.add('dark');
});
</script>