cool sona part

src/lib/Socials.svelte

@@ -2,7 +2,7 @@
 	import Social from "./footer/Social.svelte";
 </script>
 
-<span class="flex gap-3">
+<div class="flex w-full gap-3">
 	<Social
 		url="https://twitter.com/midblep"
 		title="The Bird App"
@@ -27,4 +27,4 @@
 		icon="✉️"
 		text="E-Mail"
 	/>
-</span>
+</div>

src/lib/home/Form.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <main class="flex flex-col gap-10">
-	<img src="/homepage/contact.png" class="w-1/2" />
+	<img src="/homepage/contact.png" class="w-1/2" alt="fullbody of mid" />
 
 	<section
 		class="bg-slate-200 dark:bg-gray-800 p-10 rounded-xl shadow w-full flex flex-col gap-5"

src/lib/home/Sona.svelte

@@ -0,0 +1,41 @@
+<script>
+
+</script>
+
+<main class="relative grid grid-cols-4 w-full gap-10">
+	<!-- <section class="flex justify-center items-center">
+		<div>
+			<img src="/homepage/sona/190REG2.png" alt="fullbody of mid" />
+		</div>
+	</section> -->
+	<section class="flex flex-col col-span-2 gap-10 items-center justify-between italic">
+		<img src="/homepage/sona/midtitle.png" class="w-40" alt="fullbody of mid" />
+		<h4 class="w-3/4 text-center">
+			Mid <sup>(aka Midnight)</sup> is my fursona <sup>(furry persona)</sup>. He is a fictional character that I use and represent myself with.
+			He is a cat twice as tall as you with black fur, blue hair and a sparkly tail, but can be seen as many forms and species including feral ones.
+			<br/><br/>
+			Some noticable traits are that he has an unusually large tail and whiskers. He also loves coffee, as any good Software Engineer should.
+		</h4>
+
+		<div class="flex flex-col gap-5">
+			<div class="grid grid-cols-3 gap-5">
+				<img src="/homepage/sona/pink.png" class="rounded-xl shadow-xl aspect-square" alt="sona symbol" />
+				<img src="/homepage/sona/blue.png" class="rounded-xl shadow-xl aspect-square" alt="sona symbol" />
+				<img src="/homepage/sona/hotdog.jpeg" class="rounded-xl shadow-xl aspect-square object-cover" alt="sona symbol" />
+			</div>
+			<div class="grid grid-cols-5 gap-5">
+				<img src="/homepage/sona/midblep_2-2_sivkyne.png" class="rounded-xl shadow-xl aspect-square object-contain bg-black bg-opacity-50" alt="sona symbol" />
+				<img src="/homepage/sona/midblep_3.png" class="rounded-xl shadow-xl aspect-square bg-black bg-opacity-50" alt="sona symbol" />
+				<img src="/homepage/sona/midblep_7 (1).png" class="rounded-xl shadow-xl aspect-square bg-black bg-opacity-50" alt="sona symbol" />
+				<img src="/homepage/sona/midblep_2-3_sivkyne.png" class="rounded-xl shadow-xl aspect-square object-contain bg-black bg-opacity-50" alt="sona symbol" />
+				<img src="/homepage/sona/midblep_2-6_sivkyne.png" class="rounded-xl shadow-xl aspect-square bg-black bg-opacity-50" alt="sona symbol" />
+			</div>
+		</div>
+	</section>
+
+	<!-- <section class="flex justify-center items-center">
+		<div>
+			<img src="/homepage/sona/190REG1.png" alt="fullbody of mid" />
+		</div>
+	</section> -->
+</main>

src/routes/index.svelte

@@ -2,6 +2,7 @@
 	import Banner from "$lib/home/Banner.svelte";
 	import Card from "$lib/home/Card.svelte";
 	import Form from "$lib/home/Form.svelte";
+import Sona from "$lib/home/Sona.svelte";
 </script>
 
 <svelte:head>
@@ -254,7 +255,7 @@
 	</svg>
 
 	<section
-		class="relative container overflow-hidden px-5 lg:px-0 mb-20 flex flex-col lg:flex-row gap-10 h-full justify-center items-center"
+		class="relative container overflow-hidden px-5 lg:px-0 flex flex-col lg:flex-row gap-10 h-full justify-center items-center"
 		id="contact"
 	>
 		<div class="lg:w-1/3 z-10">
@@ -266,4 +267,31 @@
 		<div class="absolute inset-0 w-full h-full opacity-80 bg-contain bg-no-repeat bg-center dark:hidden lg:block hidden" style="background-image: url('homepage/blob2-light.svg')"></div>
 		<div class="absolute inset-0 w-full h-full opacity-20 bg-contain bg-no-repeat bg-center hidden dark:block lg:block" style="background-image: url('homepage/blob2-dark.svg')"></div>
 	</section>
+
+	<div class="relative h-56 lg:h-80 overflow-hidden scale-x-150 rotate-180 -mb-80 mt-40 z-30">
+		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="absolute inset-0 h-96 w-full scale-x-150">
+			<path
+				class="block dark:hidden"
+				fill="rgb(243 244 246)"
+				fill-opacity="1"
+				d="M0,64L34.3,85.3C68.6,107,137,149,206,165.3C274.3,181,343,171,411,160C480,149,549,139,617,133.3C685.7,128,754,128,823,154.7C891.4,181,960,235,1029,240C1097.1,245,1166,203,1234,160C1302.9,117,1371,75,1406,53.3L1440,32L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
+			/>
+			<path
+				class="hidden dark:block"
+				fill="rgb(17 24 39)"
+				fill-opacity="1"
+				d="M0,64L34.3,85.3C68.6,107,137,149,206,165.3C274.3,181,343,171,411,160C480,149,549,139,617,133.3C685.7,128,754,128,823,154.7C891.4,181,960,235,1029,240C1097.1,245,1166,203,1234,160C1302.9,117,1371,75,1406,53.3L1440,32L1440,320L1405.7,320C1371.4,320,1303,320,1234,320C1165.7,320,1097,320,1029,320C960,320,891,320,823,320C754.3,320,686,320,617,320C548.6,320,480,320,411,320C342.9,320,274,320,206,320C137.1,320,69,320,34,320L0,320Z"
+			/>
+		</svg>
+	</div>
+
+	<section class="bg-gray-200 dark:bg-gray-800 relative" id="works">
+		<div class="inset-0 absolute flex justify-end overflow-hidden">
+			<img src="/homepage/sona/back.png" class="-mr-80 h-full w-auto" alt='background' />
+		</div>
+		<div class="inset-0 absolute bg-gradient-to-r dark:from-black dark:via-black from-white via-white"></div>
+		<div class="container px-5 flex pb-40 flex-col gap-10 justify-center pt-80">
+			<Sona/>
+		</div>
+	</section>
 </main>