feat: добавление новых иконок и компонентов для улучшения интерфейса

src/App.vue

@@ -8,6 +8,7 @@
     <HeroSection />
     <RitsuSection />
     <SupportSection />
+    <SiteFooter />
   </div>
 </template>
 
@@ -17,8 +18,7 @@ import SiteHeader from './components/SiteHeader.vue'
 import HeroSection from './components/HeroSection.vue'
 import RitsuSection from './components/RitsuSection.vue'
 import SupportSection from './components/SupportSection.vue'
-
-
+import SiteFooter from './components/SiteFooter.vue'
 
 onMounted(() => {
   if (window.matchMedia("(prefers-color-scheme: dark)").matches)

src/components/HeroSection.vue

@@ -17,7 +17,4 @@
       Поддержать в Telegram
     </a>
   </section>
-</template>
-
-<script setup lang="ts">
-</script>
+</template>

src/components/Icon.vue

@@ -0,0 +1,40 @@
+<template>
+	<svg
+		xmlns="http://www.w3.org/2000/svg"
+		:width="getSize('width')"
+		:height="getSize('height')"
+		:viewBox="viewBox || '0 0 24 24'"
+		v-html="d"
+	>
+	</svg>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue';
+import axios from 'axios';
+
+const props = defineProps<{
+	size?: number
+	width?: number
+	height?: number
+	viewBox?: string
+	icon: string
+}>();
+
+const d = ref('');
+
+function getSize(type: 'width' | 'height') {
+	if (type === 'width')
+		return (props.width ? props.width : props.size ? props.size : 24).toString();
+	return (props.height ? props.height : props.size ? props.size : 24).toString();
+}
+
+onMounted(async () => {
+	const response = await axios({
+		method: 'GET',
+		url: `/icons/${props.icon}`,
+		responseType: 'text'
+	});
+	d.value = response.data;
+});
+</script>

src/components/RitsuSection.vue

@@ -1,5 +1,9 @@
 <template>
-  <section class="container max-w-fit mx-auto px-6 py-16">
+  <section :class="[
+    'container flex flex-col 2xl:flex-row justify-around',
+    'mx-auto px-6 py-16 space-y-16 2xl:space-y-0',
+    'max-w-fit'
+  ]">
     <div class="flex flex-col md:flex-row items-center gap-10">
       <img
         src="/ritsu.png"
@@ -28,10 +32,29 @@
           Даже простого присутствия.
         </p>
       </div>
-
     </div>
+    <div :class="[
+			'w-full md:w-2/3 xl:w-1/2 2xl:w-1/3',
+      'p-6 mx-auto 2xl:mx-0 space-y-4',
+      'rounded-2xl shadow-lg',
+			'hover:scale-105 transition duration-300',
+			'bg-gray-500/25 dark:bg-gray-600/25',
+      'text-gray-700 dark:text-gray-400'
+		]">
+			<img
+				class="w-full h-auto rounded-2xl shadow-lg"
+				src="/sponsored.jpg" alt="Sponsored by Government of USA"
+			>
+			<div class="text-center text-sm">
+				<p>
+					Автор канала осуждает: фашизм/нацизм и любое его проявление, расизм, антисемитизм, насилие, проявление ненависти.
+					Не дискредитирует и не поддерживает дискредитацию государственных органов.
+				</p>
+				<p>
+					Данный канал посвящён роману-антиутопии Джорджа Оруэлла «1984», а также другим антиутопичным произведениям.
+					Совпадения совпадают, а реальность не реальна.
+				</p>
+			</div>
+		</div>
   </section>
-</template>
-
-<script setup lang="ts">
-</script>
+</template>

src/components/SiteFooter.vue

@@ -0,0 +1,34 @@
+<template>
+	<footer class="w-full flex px-6 pb-6">
+		<div
+			:class="[
+        'flex flex-col items-center justify-around',
+        'container rounded-3xl',
+        'px-6 py-4 mx-auto space-y-2',
+        'shadow-md transition-all duration-300',
+        'bg-green-500 dark:bg-green-600'
+      ]"
+		>
+		<div class="w-full text-white">
+      <TitleLogo />
+		</div>
+		<hr class="w-full text-white/25 border-white/25" />
+		<div class="flex justify-between w-full text-white">
+			<p><i>Created by <a class="text-white" href="https://t.me/poti_club">POTI</a> with</i> ❤️</p>
+			<div :class="[
+				'flex space-x-2 text-white',
+				'*:hover:scale-125 *:transition-transform *:duration-300'
+			]">
+				<a href="https://t.me/nevedomhren"><Icon icon="telegram"/></a>
+				<a href="https://x.com/markizwer"><Icon icon="x-twitter"/></a>
+				<a href="https://git.kernils.ru/POTI/nevedom"><Icon icon="gitea"/></a>
+			</div>
+		</div>
+		</div>
+	</footer>
+</template>
+
+<script setup lang="ts">
+import TitleLogo from './TitleLogo.vue';
+import Icon from './Icon.vue';
+</script>

src/components/SiteHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="w-full flex pt-6">
+  <header class="w-full flex px-6 pt-6">
     <div
       :class="[
         'flex items-center justify-between',
@@ -9,9 +9,7 @@
         'bg-green-500 dark:bg-green-600'
       ]"
     >
-      <h1 class="text-white font-semibold text-lg tracking-wide">
-        nevedomhren
-      </h1>
+      <TitleLogo />
 
       <button
         @click="toggleTheme"
@@ -25,6 +23,7 @@
 
 <script setup lang="ts">
 import { nextTick, onMounted, ref } from 'vue';
+import TitleLogo from './TitleLogo.vue';
 
 const isDark = ref(false);
 

src/components/SupportSection.vue

@@ -21,7 +21,4 @@
       Это бесплатно. Но может значить больше, чем кажется.
     </p>
   </section>
-</template>
-
-<script setup lang="ts">
-</script>
+</template>

src/components/TitleLogo.vue

@@ -0,0 +1,7 @@
+<template>
+  <a href="/">
+    <h1 class="text-white font-semibold text-xl tracking-wide">
+      nevedomhren
+    </h1>
+  </a>
+</template>