From 61342d8b1a807167817044caca639fb32e555c0a Mon Sep 17 00:00:00 2001
From: Alina Carpio <72272077+alicarpio@users.noreply.github.com>
Date: Wed, 7 Aug 2024 12:12:55 -0500
Subject: [PATCH] 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 <git@adrianjdelgado.com>
---
 src/routes/+page.svelte |  7 +++++--
 src/routes/Hero.svelte  | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/Hero.svelte

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index fabbf29..6d41b99 100644
--- a/src/routes/+page.svelte
+++ b/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 />
diff --git a/src/routes/Hero.svelte b/src/routes/Hero.svelte
new file mode 100644
index 0000000..2b619f7
--- /dev/null
+++ b/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>