Add hero part

src/routes/+page.svelte

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

src/routes/hero.svelte

@@ -0,0 +1,32 @@
+<div class=" flex flex-col lg:flex-row gap-y-12 lg:flex justify-around mt-24 items-center">
+	<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="w-[16rem] h-[12.5rem] lg:w-[26rem] lg:h-[18rem] relative z-10"
+		/>
+		<div
+			class="absolute top-[-0.5rem] left-[-0.5rem] w-5 h-5 lg:top-[-1.3rem] lg:left-[-1.3rem] lg:w-[6rem] lg:h-[6rem] z-0 bg-primary"></div>
+		<div
+			class="absolute bottom-[-0.5rem] right-[-0.5rem] w-5 h-5 lg:bottom-[-1.2rem] lg:right-[-1.2rem] lg:w-[6rem] lg:h-[6rem] z-0 border border-primary"></div>
+	</div>
+
+	<div class="flex flex-col items-center gap-y-5">
+		<div>
+			<span class="text-primary lg:text-xl">Kokoa</span>
+			<span class="text-base font-fira lg:text-xl">- Vive el software libre</span>
+		</div>
+		<div class="max-w-screen-md lg:max-w-screen-sm">
+			<p class="text-base text-sm font-fira lg:text-md text-center">Club estudiantil politécnico promotor del
+				uso, modificación, distribución y aprendizaje de software libre </p>
+		</div>
+		<button
+			class="button-shd px-14 py-1 font-medium bg-primary w-15 border-primary border-2xl rounded-2xl text-black shadow-2xl">
+			Unirse
+		</button>
+		<div class="bg-green-400"></div>
+	</div>
+</div>
+
+
+

tailwind.config.ts

@@ -10,6 +10,10 @@ export default {
 			fontFamily: {
 				fira: ["Fira Code", "mono-space"],
 			},
+			colors: {
+				primary: "#8CC63F",
+				base: "#E0EBFF",
+			},
 		},
 	},
 	plugins: [forms({ strategy: "class" }), typography],