- Add package.json with project metadata and dependencies - Create favicon.ico and ritsu.png assets - Implement main App.vue component with site structure - Add HeroSection, RitsuSection, SiteHeader, and SupportSection components - Set up theme toggle functionality in SiteHeader - Create main entry point in main.ts - Add Tailwind CSS styles in style.css - Configure TypeScript with tsconfig files - Set up Vite configuration for Vue and Tailwind CSS
27 lines
696 B
Vue
27 lines
696 B
Vue
<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> |