<style>
	main {
		background: none !important;
	}
	p {
		text-align: justify;
	}
</style>

<script>
	import Logo from '../components/logo.svelte';
	import UpArrow from '../components/up.svelte';
	import MenuBtn from '../components/menu-btn.svelte';
	import ZjistiBtn from '../components/zjisti-vice.svelte';
	import Carousel from '@beyonk/svelte-carousel';
</script>

<MenuBtn/>

<main id="root">
<section class="row fullheight">
	<Logo/>
	<div class="row" style="width: 100%">
		<section class="col-1"></section>
		<section class="col-5">
			<div style="margin-top: 23vh">
				<h1 style="margin-bottom: 5vh">Chci se zapojit</h1>
				<hr class="gay-hr">
				<h6 style="line-height: 1.4; margin-top: 5vh; font-size: calc(var(--font-size) / 1.5)">
                    Určitě ti neuniklo, že na fakultě máme nějaké spolky a SORky. Víš ale co je co a jak to funguje?
                    Tady ti vysvětlíme o co že to vlastně jde, proč je dobré toho být součástí a jak a kam se můžeš zapojit.
				</h6>
				<ZjistiBtn menu={false}/>
			</div>
		</section>
	</div>
</section>
<section class="row" style="margin-top: 5vh">
	<div class="col-1"></div>
	<div class="col-5" id="main-content" style="line-height: 1">
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 2vh"><b>Co jsou vlastně studentské organizace?</b></h6>
			</div>
			<p style="margin-top:1vh; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
				Studentská organizace, jak již napovídá sám název, je uskupení studentů,
				které přispívá k lepšímu životu na fakultě. Na peďáku jsou studentské organizace
				podporované vedením a máme jich celou řadu, takže si na své přijde každý.
				A pokud by někomu náhodou nabídka nestačila, může si založit vlastní spolek. 
			</p>
		</div>
	</div>
	<div class="col-5" style="line-height: 1">
		<div style="height: 8vh"></div>
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 2vh"><b>Proč bych se měl do toho pouštět?</b></h6>
			</div>
			<p style="margin-top:1vh; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
                Studentské organizace nabízí mnoho benefitů, které nemusí být na první pohled vidět.
                Už jen tím, že se rozhodneš někam zapojit se seznámíš s novými lidmi.
                A ruku na srdce, když na fakultě potkáváš známé tváře, tak se tam najednou chodí o trochu líp.
                Určitě se ti taky hodí, že starší studenti dávají tipy a triky pro snadnější studium.
                Být členem spolku je využití volného času, které ti něco dá.
                Je sice super sledovat doma v posteli Netflix, ale to tě nenaučí,
                jak uspořádat přednášku pro 300 lidí, pracovat v týmu nebo jak na sociální sítě.
                Pokud se chceš něco naučit nebo chceš třeba uspořádat akci,
                tak ti spolek pomůže přijít všemu na kloub.
                Tak se neboj a pojď si najít to svoje!
			</p>
		</div>
	</div>
</section>
<section class="row" style="margin-top: 5vh">
<div class="col flexy-boi">
	<h5 style="color: var(--color-primary); margin-bottom: 2vh"><b>Jak se v tom všem vyznat?</b></h5>
</div>
</section>
<section class="row" style="margin-top: 5vh">
	<div class="col-1"></div>
	<div class="col-5" style="line-height: 1">
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh+">
			<h6 style="margin-bottom: 0"><b>Formální spolek</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
				Formální spolek se hodí pro větší organizace. Výhodou je hlavně
				větší pořádek díky stanovám a tomu, kdo co vede. Spolky mají obvykle radu,
				komisi a volby do těchto orgánů. Zároveň se musí oficiálně přihlásit k soudu
				a vést si účetnictví. Na peďáku máme tři formální spolky: Agora,
				Drosophila a Pedagogický spolek Emil.
			</p>
		</div>
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh+">
			<h6 style="margin-bottom: 0"><b>SOR</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
                Studentské oborové rady (SOR) vznikají za účelem zastupování zájmů studentů
                daného studijního oboru. SORky pravidelně komunikují s katedrou, řeší
                problémy a předávají zpětnou vazbu za účelem zkvalitňování výuky a
                atmosféry na katedře. SOR má svého mluvčího a nejlépe by její členové
                měli být z různých ročníků studia, aby si dokázali předávat informace z první ruky.
			</p>
		</div>
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh+">
			<h6 style="margin-bottom: 0"><b>Univerzitní spolek</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
                Univerzitní spolek sdružuje studenty, absolventy i kantory se společnými zájmy
                a cíli z celé univerzity. Takovým spolkem je např. Charlie, který se definuje
                jako “Queer sdružení UK” nebo Univerzitní křesťanské hnutí,
                které můžeš často potkat i na akcích peďáku.
			</p>
		</div>
	</div>
	<div class="col-5" style="line-height: 1">
		<div style="height: 8vh"></div>
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 0"><b>Neformální spolky</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
				Neformální spolek je menší a zpravidla se věnuje komornějším věcem,
				jako například divadelní spolek La Vie Bohème, který každý semestr ve spolupráci s microlabem natáčí vtipné spoty ke studentskému hodnocení nebo třeba spolek CULT při katedře výtvarky, který pořádá otevřené ateliéry, večerní promítání a spoustu dalších.
			</p>
		</div>
		<div class="down" style="margin-right: 3vw">
			<div class="side-line" style="margin-bottom: 1vh">
			<h6 style="margin-bottom: 0"><b>Fakultní spolek</b></h6>
			</div>
			<p style="margin-top:0; margin-bottom: 2vh; margin-left: 1.14vw; line-height: 1.5; font-size: calc(var(--font-size) / 1.8)">
                Fakultní spolky fungují napříč celou fakultou a bývají větších rozměrů. Na ostatních
                fakultách je to běžnější způsob fungování spolků, protože jednotlivé katedry nejsou
                až tak rozdílné jako u nás. Na peďáku v současné době takový spolek nemáme.
			</p>
		</div>
	</div>
</section>
<section class="row" style="margin-top: 14vh">
	<div class="col-1"></div>
	<div class="col-6" style="background-position: top center">
		<h5>Zkušenosti členů a bývalých členů</h5>
		<hr class="gay-hr">
	</div>
</section>
<section class="row" style="margin-top: 4vh">
	<section class="col">
		 <Carousel>
		    <img src="https://source.unsplash.com/random/600x300?a" alt="" style="width: 100%">
		    <img src="https://source.unsplash.com/random/600x300?s" alt="" style="width: 100%">
		    <img src="https://source.unsplash.com/random/600x300?c" alt="" style="width: 100%">
		    <img src="https://source.unsplash.com/random/600x300?v" alt="" style="width: 100%">
		 </Carousel>
	</section>
</section>
<section class="row" style="margin-top: 14vh">
	<div class="col-1"></div>
	<div class="col-6" style="background-position: top center">
		<h5>Proč bys měl jít právě k nám?</h5>
		<hr class="gay-hr">
	</div>
</section>
<section class="row" style="margin-top: 4vh">
	<section class="col">
		 <Carousel>
		    <img src="https://source.unsplash.com/random/600x300?as" alt="" style="width: 100%">
		    <img src="https://source.unsplash.com/random/600x300?ss" alt="" style="width: 100%">
		    <img src="https://source.unsplash.com/random/600x300?cs" alt="" style="width: 100%">
		    <img src="https://source.unsplash.com/random/600x300?vs" alt="" style="width: 100%">
		 </Carousel>
	</section>
</section>
<section class="row" style="margin-top: 5vh">
	<div class="col flexy-boi" style="background-position: top center">
		<h5>Seznam spolků a studentských oborových rad</h5>
		<hr class="gay-hr">
	</div>
</section>
<section class="row" style="margin-top: 5vh">
	<div class="col flexy-boi">
		<h5 style="color: var(--color-primary)"><b>Najdi ten svůj</b></h5>
	</div>
</section>
<section class="row" style="margin-top: 5vh">
	<div class="col-1"></div>
	<div class="col flexy-boi">
		<div class="horizontal-menu no-underline" style="position: relative; text-decoration: none !important; font-weight: 900;">
			<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Sport</a>
			<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Umění</a>
			<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Psychologie</a>
			<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Pedagogika</a>
			<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Logika</a>
			<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Filozofie</a>
			<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Společnost</a>
			<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Hudba</a>
			<a href="/#" style="font-size: calc(var(--font-size) / 1.6)">Dějiny</a>
		</div>
	</div>
	<div class="col-1"></div>
</section>
<section class="row" style="margin-top: 3vh">
	<div class="col-1"></div>
	<div class="col">
		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
	</div>
	<div class="col">
		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
	</div>
	<div class="col">
		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
		<a class="hover-man"><img src="https://source.unsplash.com/random/400x300" alt=""></a>
	</div>
	<div class="col-1"></div>
</section>
</main>

<UpArrow/>
