teasanctuary.ru/src/routes/+page.svelte

<script lang="ts">
	import SocialButton from '$lib/components/SocialButton.svelte';
	import SocialHyperlink from '$lib/components/SocialHyperlink.svelte';
	import { PUBLIC_TS_DISCORD } from '$env/static/public';
</script>

<svelte:head>
	<title>Tea Sanctuary</title>
</svelte:head>

<section
	class="flex shrink-0 flex-col items-center justify-center gap-5 overflow-hidden p-4 hero-background"
>
	<div
		class="flex flex-col flex-nowrap items-center justify-center gap-3 lg:flex-row lg:flex-nowrap"
	>
		<div
			class="relative size-48 shrink-0 rounded-2xl bg-slate-50 shadow-[inset_0px_0px_0px_2px] shadow-slate-200"
		>
			<img
				src="/common/dotted-line.svg"
				class="absolute top-0 right-0 bottom-0 left-0"
				alt="Пунктирная линия"
			/>
			<!-- В документации Tailwind советуют использовать "Inline SVG" -->
			<svg
				width="196"
				height="196"
				class="absolute top-0 right-0 bottom-0 left-0 stroke-slate-950"
				fill="none"
				><path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="6"
					d="M48.996 95.53c-18.624 5.826-30.621 14.965-30.621 25.239 0 17.599 35.19 31.866 78.604 31.866s78.604-14.267 78.604-31.866c0-10.274-11.997-19.413-30.617-25.24"
				/><path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="6"
					d="M18.375 121.626c0 17.599 19.118 40.364 78.604 40.364 59.486 0 78.604-23.622 78.604-41.221"
				/><path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="6"
					d="M37.493 53.042c0 24.97 16.66 73.762 59.486 73.762 42.826 0 59.482-48.792 59.482-73.757"
				/><path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="6"
					d="M96.98 72.083c32.85 0 59.481-8.523 59.481-19.036 0-10.514-26.631-19.037-59.482-19.037-32.85 0-59.482 8.523-59.482 19.037 0 10.513 26.631 19.036 59.482 19.036Z"
				/><path
					stroke-linecap="round"
					stroke-linejoin="round"
					stroke-width="6"
					d="M153.746 58.743c-6.958-7.938-29.739-13.757-56.767-13.757-27.027 0-49.808 5.819-56.77 13.76M147.6 90.349c24.664 4.41 30.025-9.625 30.025-20.184 0-10.56-4.051-17.117-13.377-17.117a10.125 10.125 0 0 0-7.913 3.854"
				/></svg
			>
		</div>

		<div
			class="font-disket text-center text-4xl font-bold text-slate-50 [text-shadow:_0_0_15px_rgba(0,0,0,0.25)] sm:text-6xl md:text-8xl lg:text-left"
		>
			<h1>TEA</h1>
			<h1>SANCTUARY</h1>
		</div>
	</div>
	<div class="flex flex-col items-center justify-start gap-4">
		<!--
		<div class="flex flex-row gap-2 rounded-2xl bg-amber-950 p-2 text-center text-amber-50 ring-2 shadow">
			Сайт находится в разработке. Если эта плашка висит после 1.06.2025 - пинайте Ивана!
		</div>
		-->
		<div class="flex flex-row flex-wrap items-start justify-center gap-4">
			<SocialButton class="w-60 shrink-0" href={PUBLIC_TS_DISCORD}>Сообщество</SocialButton>
			<SocialButton class="w-60 shrink-0" href="https://github.com/TeaSanctuary/">
				GitHub
			</SocialButton>
			<SocialButton class="w-60 shrink-0" href="https://teasanctuary.ru/git">
				Наш Git
			</SocialButton>
			<SocialButton class="w-60 shrink-0" href="https://hl.teasanctuary.ru">
				Сервер HLDM
			</SocialButton>
		</div>
		<SocialButton class="w-60 opacity-5 hover:opacity-100" href="https://хамяк.рф">
			хамяк)
		</SocialButton>
	</div>
</section>
<section class="flex justify-center bg-slate-50 text-slate-950">
	<div
		class="flex w-5xl max-w-screen flex-col flex-nowrap gap-12 p-2 px-2 pt-12 pb-12 text-base sm:text-xl"
	>
		<section id="who-are-we">
			<h1>Кто мы?</h1>
			<div class="text-justify">
				<b>Tea Sanctuary</b> &mdash; это в первую очередь коллектив друзей, разрабатывающих проекты
				для души, для всеобщего пользования и даже на заказ. С <b>8 июля 2017 года</b> мы ведём публичную
				деятельность в сфере разработки ПО и развлечений.
			</div>
			<br />
			<div class="text-justify">
				<b>Tea Sanctuary</b> &mdash; это также и сообщество единомышленников. Любовь к добротным видеоиграм
				и пассивная агрессия к вычислительной технике у нас в крови. Когда-то сообщество было закрытым
				и насчитывало около 50 участников, но впоследствии мы решили его расширить. Станьте частью коллектива!
			</div>
		</section>
		<section id="what-are-we-doing">
			<h1>Что делаем?</h1>
			<div class="text-justify">
				Наша главная страсть &mdash; это, конечно, видеоигры. Мы часто участвуем в так называемых
				"гейм джемах" &mdash; конкурсах на разработку игр. Наши игры вы можете оценить здесь:
				<SocialHyperlink href="https://randomtrash.itch.io">RandomTrash</SocialHyperlink>
				<SocialHyperlink href="https://friendlywithmeat.itch.io/">FriendlyWithMeat</SocialHyperlink>.
				Также мы ведём работу над нашим первым полноценным игровым проектом.
				Следите за новостями в нашем
				<SocialHyperlink href={PUBLIC_TS_DISCORD}>сообществе</SocialHyperlink>!
			</div>
			<br />
			<div class="text-justify">
				Отдельные участники нашего коллектива занимаются модификацией существующих игр, добавляя в
				них новый контент. Например, <b>MegaZerg</b> создаёт оригинальные карты для такой
				бессмертной классики, как Counter-Strike 1.6, и выкладывает их на ресурс GameBanana:
				<SocialHyperlink href="https://gamebanana.com/members/2971042">kemist</SocialHyperlink>
			</div>
			<br />
			<div class="text-justify">
				Мы размещаем игровые сервера, как постоянные, так и временные для различных событий.
				Например, у нас есть сервер
				<SocialHyperlink href="https://hl.teasanctuary.ru">Tea Sanctuary HLDM</SocialHyperlink>, где
				вы можете ознакомиться с новыми картами от всего сообщества Half-Life.
			</div>
			<br />
			<div class="text-justify">
				Не одними играми едины, за нашими плечами есть несколько прикладных программ, созданных под
				заказ. Про них ничего особо рассказать не можем, но если вам надо что-нибудь сделать &mdash;
				пишите нам!
			</div>
		</section>
	</div>
</section>

<style>
	@import "$src/app.css";

	section > h1 {
		@apply font-disket mb-4 text-2xl font-bold sm:text-4xl;
	}
</style>