updated socials images

src/pages/socials.astro

@@ -2,6 +2,9 @@
 import Layout from "../layouts/Layout.astro";
 import StreamScheduleComponent from "../components/sections/StreamSchedule.svelte";
 import Footer from "../components/sections/FooterComponent.astro";
+import { Image } from "astro:assets";
+import landscape from "./_images/landscape.webp";
+import profile from "./_images/profile.webp";
 ---
 
 <Layout title="Socials" description="Check out Ryan's socials">
@@ -11,34 +14,41 @@ import Footer from "../components/sections/FooterComponent.astro";
 				id="cards"
 				class="grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-4"
 			>
+				<!-- h-[450px] 3  -->
 				<div
 					id="intro"
-                    class="social-card col-span-2 h-[450px] md:col-span-3 md:h-[280px] lg:col-span-4"
+					class="social-card col-span-2 h-[450px] md:col-span-3 md:h-[400px] lg:col-span-4"
 				>
 					<div
-                        class="social-card-content flex flex-col bg-cover bg-center md:flex-row md:justify-between md:gap-3"
+						class="social-card-content flex flex-col bg-cover bg-top md:flex-row md:justify-between md:gap-3"
 					>
 						<div
-                            class="mb-5 mt-auto flex aspect-square w-32 items-center justify-center overflow-hidden rounded-full border-2 border-solid border-white bg-[rgb(20,20,20)] md:mb-0 md:w-72"
+							class="mt-auto flex flex-col items-start justify-start gap-3 md:h-1/2 md:flex-row md:items-center md:gap-10"
 						>
-                            <img
+							<div
-                                src="/images/RyanPogSmol.webp"
+								class="mb-5 flex aspect-square w-32 items-center justify-center overflow-hidden rounded-full border-2 border-solid border-white bg-[rgb(20,20,20)] md:mb-0 md:w-72"
+							>
+								<Image
+									src={profile}
 									alt="Ryan"
 									width="176"
 									class="aspect-square w-32 md:w-44"
 								/>
 							</div>
-                        <div class="md:mt-auto md:h-1/2">
+							<div class="">
-                            <h1 class="mb-2 text-4xl font-bold">RythonDev</h1>
+								<h1 class="mb-2 text-4xl font-bold">
+									RythonDev
+								</h1>
 								<p class="text-lg text-[#ccc]">
-                                I am a Malaysian Chinese content creator based
+									I am a Malaysian Chinese content creator
-                                in Australia! I mainly stream co-working and
+									based in Australia! I mainly stream
-                                software development, known for developing the
+									co-working and software development, known
-                                Multi-Task widget!
+									for developing the Multi-Task widget!
 								</p>
 							</div>
 						</div>
 					</div>
+				</div>
 				<!-- Website -->
 				<a href="https://rython.dev/" target="_blank">
 					<div class="social-card">
@@ -693,9 +703,9 @@ import Footer from "../components/sections/FooterComponent.astro";
 			linear-gradient(
 				to bottom,
 				rgba(0, 0, 0, 0) 0%,
-                rgba(20, 20, 20, 1) 50%
+				rgba(20, 20, 20, 1) 70%
 			),
-            url("/images/ryan-run-TR.webp");
+			url("/images/socials/landscape.webp");
 
 		background-repeat: no-repeat;
 	}
@@ -872,7 +882,7 @@ import Footer from "../components/sections/FooterComponent.astro";
 
 	let { hours, minutes } = getTimezoneDifference(
 		Intl.DateTimeFormat().resolvedOptions().timeZone,
-        MY_TIMEZONE,
+		MY_TIMEZONE
 	);
 
 	let timeDifference = displayTimeDifference(hours, minutes);