First version

src/lib/landing/Skills.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import Icon from '@iconify/svelte';
+	export let skills: Skill[];
+</script>
+
+<div class="-mx-5 grid md:grid-cols-2 lg:grid-cols-3 gap-7 text-center p-5">
+	{#each skills as skill}
+		<!-- <div class="px-5"> -->
+		<!-- w-full md:basis-1/2 lg:basis-1/3 -->
+		<div class="rounded-xl bg-gray-50 p-2 sm:p-8 lg:px-6 xl:px-9">
+			<Icon icon={skill.icon} class="text-5xl mx-auto mb-5" />
+			<div>
+				<h3 class="mb-4 text-lg font-medium sm:text-xl lg:text-lg xl:text-xl">{skill.title}</h3>
+				<p class="text-lg font-light">
+					{skill.text}
+				</p>
+			</div>
+		</div>
+		<!-- </div> -->
+	{/each}
+</div>