feat: initialize Vue 3 project with Tailwind CSS and Vite

- 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

src/App.vue

@@ -0,0 +1,27 @@
+<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>

src/components/HeroSection.vue

@@ -0,0 +1,23 @@
+<template>
+  <section class="container mx-auto px-6 py-20 text-center">
+    <h2 class="text-3xl md:text-4xl font-bold mb-6">
+      Иногда человеку нужно совсем немного
+    </h2>
+
+    <p class="text-lg max-w-2xl mx-auto mb-8 opacity-80">
+      Просто знать, что он не один.  
+      Даже одна подписка может быть теплее слов.
+    </p>
+
+    <a
+      href="https://t.me/nevedomhren"
+      target="_blank"
+      class="inline-block bg-green-500 hover:bg-green-600 text-white px-8 py-3 rounded-xl shadow-md hover:scale-105 transition duration-300"
+    >
+      Поддержать в Telegram
+    </a>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>

src/components/RitsuSection.vue

@@ -0,0 +1,37 @@
+<template>
+  <section class="container max-w-fit mx-auto px-6 py-16">
+    <div class="flex flex-col md:flex-row items-center gap-10">
+      <img
+        src="/ritsu.png"
+        alt="Ritsu Tainaka"
+        class="w-64 md:w-80 rounded-2xl shadow-lg hover:scale-105 transition duration-300"
+      />
+
+      <div class="max-w-xl">
+        <h3 class="text-2xl font-semibold mb-4">
+          Немного о Рицу и том самом тортике
+        </h3>
+
+        <p class="mb-4 opacity-80 leading-relaxed">
+          Рицу Тайнака — энергичная и шумная барабанщица из аниме «K-On!».<br>
+          Она всегда кажется лёгкой, живой и беззаботной.
+        </p>
+
+        <p class="mb-4 opacity-80 leading-relaxed">
+          Но даже у таких людей бывают моменты, которые выглядят мелочью —
+          как история когда <b>nevedom</b> пил чай (без тортика) с Вайбославом в Фогеле...
+					Снаружи это шутка. Внутри — ощущение, что Фогель больше не с нами.
+        </p>
+
+        <p class="opacity-80 leading-relaxed">
+          Иногда достаточно малого, чтобы стало легче.  
+          Даже простого присутствия.
+        </p>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>

src/components/SiteHeader.vue

@@ -0,0 +1,44 @@
+<template>
+  <header class="w-full flex pt-6">
+    <div
+      :class="[
+        'flex items-center justify-between',
+        'container rounded-full',
+        'px-6 py-4 mx-auto',
+        'shadow-md transition-all duration-300',
+        'bg-green-500 dark:bg-green-600'
+      ]"
+    >
+      <h1 class="text-white font-semibold text-lg tracking-wide">
+        nevedomhren
+      </h1>
+
+      <button
+        @click="toggleTheme"
+        class="bg-white/20 hover:bg-white/30 text-white px-4 py-1 rounded-full text-sm transition duration-300"
+      >
+        {{ isDark ? 'Светлая тема' : 'Тёмная тема' }}
+      </button>
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref } from 'vue';
+
+const isDark = ref(false);
+
+function toggleTheme() {
+  isDark.value
+    ? document.documentElement.classList.remove('dark')
+    : document.documentElement.classList.add('dark');
+
+  isDark.value = !isDark.value;
+}
+
+onMounted(() => {
+  nextTick(() => {
+    isDark.value = document.documentElement.classList.contains('dark');
+  });
+});
+</script>

src/components/SupportSection.vue

@@ -0,0 +1,27 @@
+<template>
+  <section class="container mx-auto px-6 py-20 text-center">
+    <h3 class="text-2xl md:text-3xl font-semibold mb-6">
+      За каналом стоит живой человек
+    </h3>
+
+    <p class="max-w-2xl mx-auto mb-8 opacity-80">
+      Этот Telegram-канал — не про цифры и не про охваты.<br>
+      Иногда подписка — это просто знак того, что кто-то рядом.
+    </p>
+
+    <a
+      href="https://t.me/nevedomhren"
+      target="_blank"
+      class="inline-block bg-green-500 hover:bg-green-600 text-white px-10 py-4 rounded-xl shadow-lg hover:scale-105 transition duration-300 text-lg"
+    >
+      Перейти и поддержать
+    </a>
+
+    <p class="mt-4 text-sm opacity-60">
+      Это бесплатно. Но может значить больше, чем кажется.
+    </p>
+  </section>
+</template>
+
+<script setup lang="ts">
+</script>

src/main.ts

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')

src/style.css

@@ -0,0 +1,7 @@
+@import "tailwindcss";
+
+@media (prefers-color-scheme: dark) {
+  body { background: black; color: white; }
+}
+
+@custom-variant dark (&:where(.dark, .dark *));