Add hero part (#48)

* Add hero part

* Corrected the code with prettier

* Avoid using custom classes

* Follow style guide

* Use semantic HTML

---------

Co-authored-by: Adrian Delgado <[email protected]>

src/routes/+page.svelte

@@ -1,2 +1,5 @@
-<h1 class="font-mono text-5xl">Bienvenido a KOKOA</h1>
-<p class="font-mono">Promovemos la programación orientada al comunismo</p>
+<script lang="ts">
+	import Hero from "./Hero.svelte";
+</script>
+
+<Hero />

src/routes/Hero.svelte

@@ -0,0 +1,33 @@
+<section class="mt-24 flex flex-col items-center justify-around gap-y-12 lg:flex lg:flex-row">
+	<div class="relative">
+		<img
+			src="https://images.unsplash.com/photo-1601933470096-0e34634ffcde?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+			alt="Imagen de amigos programando"
+			class="relative z-10 h-[12.5rem] w-[16rem] lg:h-[18rem] lg:w-[26rem]"
+		/>
+		<div
+			class="absolute left-[-0.5rem] top-[-0.5rem] z-0 h-5 w-5 bg-lime-500 lg:left-[-1.3rem] lg:top-[-1.3rem] lg:h-[6rem] lg:w-[6rem]"
+		></div>
+		<div
+			class="absolute bottom-[-0.5rem] right-[-0.5rem] z-0 h-5 w-5 border border-lime-500 lg:bottom-[-1.2rem] lg:right-[-1.2rem] lg:h-[6rem] lg:w-[6rem]"
+		></div>
+	</div>
+	<div class="flex flex-col items-center gap-y-5">
+		<h1>
+			<span class="text-lime-500 lg:text-xl">Kokoa</span>
+			<span class="font-fira text-blue-100 lg:text-xl">- Vive el software libre</span>
+		</h1>
+		<div class="max-w-screen-md lg:max-w-screen-sm">
+			<p class="lg:text-md text-center font-fira text-sm text-blue-100">
+				Club estudiantil politécnico promotor del uso, modificación, distribución y aprendizaje de
+				software libre
+			</p>
+		</div>
+		<button
+			class="w-15 border-2xl rounded-2xl border-lime-500 bg-lime-500 px-14 py-1 font-medium text-black shadow-2xl"
+		>
+			Unirse
+		</button>
+		<div class="bg-green-400"></div>
+	</div>
+</section>