chore: Update page layouts and styles for improved responsiveness

src/pages/arcanum.astro

@@ -5,9 +5,9 @@ import arcanum from "../../public/arcanum.svg";
 ---
 
 <Layout page="arcanum">
-    <div class="w-full mt-4 p-4 flex flex-col items-center border border-[#30363d] rounded">
-        <Image src={arcanum} alt="Astro Logo" class="w-1/6 mx-auto" />
-        <div class="sm:w-full md:w-full lg:w-full xl:w-full text-center text-lg">
+    <div class="flex flex-col items-center w-full mt-4 p-4 border border-[#30363d] rounded">
+        <Image src={arcanum} alt="Arcanum Logo" class="w-12 h-12" />
+        <div class="w-full text-center text-xs">
             Arcanum is an on-chain ETF protocol built upon a new crypto primitive - AAM (Automated Asset Manager) utilizing multipools. 
             Arcanum is enforced by unique balancing mechanisms of the ETFs' portfolio approved by the governance.
         </div>

src/pages/assets.astro

@@ -7,14 +7,14 @@ import avatarfull from "../../public/avatarfull.jpg"
 
 <Layout page="assets">
     <div class="pt-4 w-full">
-        <div class="grid grid-cols-[1fr,3fr] gap-2">
-            <Image src={smfigma} alt="figma" />
-            <div class="border border-[#30363d] rounded p-4 flex flex-col justify-between">
+        <div class="grid grid-cols-[1fr,2fr] gap-2">
+            <Image src={smfigma} alt="figma" class="rounded" />
+            <div class="border border-[#30363d] rounded p-4 text-xs flex flex-col justify-between">
                 Social Media icons
                 <a class="text-purple-500" href="https://www.figma.com/community/file/929729132405358534">Figma</a>
             </div>
-            <Image src={avatarfull} alt="avatar" />
-            <div class="border border-[#30363d] rounded p-4 flex flex-col justify-between">
+            <Image src={avatarfull} alt="avatar" class="rounded" />
+            <div class="border border-[#30363d] rounded p-4 text-xs flex flex-col justify-between">
                 No Game No Life: Yuu Kamiya Art Works
                 <a class="text-purple-500" href="https://www.ebay.com/itm/264448308138?itmmeta=01HZWA3BCGQ815RZFYDP7N2DSX&hash=item3d9258f3aa:g:umwAAOSwXF5dac3N&itmprp=enc%3AAQAJAAAA8KYjiL5QX9npNIeIteo0GXYtUvqQdEa4BRvkfZGaAYQz0vmy81h37jSg6ZMycnTtBf3nLb%2BEe5tJ71e1r47z%2FAI%2BP1j1ilePeZ3TtNbKlTkvF1vrSEXp9Lj8bkTrUlHIIYLYEVIvVmTod44cx076cFrylp0wJCCTgEdVyWx45MkNxPTxSdguMQQ3mZ%2BvxD6qmbInvu71sHQYtk8Cn8oJc1ftMlfe9xSSakcDKymfOAAmeyCuWmXx8XEqWlLUxdePcPynyzIdDhzT0HsFBk4HkgZoz0jA1TpH4d2G%2F%2B%2F0jD0hq929aA9uOr0N3UmEYhbyTg%3D%3D%7Ctkp%3ABFBMrraNiv9j">eBay</a>
             </div>

src/pages/index.astro

@@ -5,15 +5,15 @@ import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout>
-  <div class="grid pt-4 px-2 grid-cols-1 gap-2">
-    <Image src={Avatar} alt="avatar" class="rounded-full w-full px-4" />
+  <div class="grid p-2 grid-cols-1 gap-2 grid-rows-[1fr, 2fr]">
+    <Image src={Avatar} alt="avatar" class="rounded-full w-full" />
     <div class="border border-[#30363d] rounded p-4">
-      <h1 class="text-3xl font-bold">Hi, I'm <span class="text-purple-500">RND</span></h1>
-      <p class="text-lg">I'm a frontend engineer. I'm passionate about web development, open source and cryptocurrencies.</p>
-      <p class="text-lg">I'm currently working at <a href="https://arcanum.to/" class="text-purple-500">Arcanum</a>.</p>
+      <h1 class="text-base font-bold">Hi, I'm <span class="text-purple-500">RND</span></h1>
+      <p class="text-xs">I'm a frontend engineer. I'm passionate about web development, open source and cryptocurrencies.</p>
+      <p class="text-xs">I'm currently working at <a href="https://arcanum.to/" class="text-purple-500">Arcanum</a>.</p>
       <div class="mt-4">
-        <h2 class="text-2xl font-bold">Skills</h2>
-        <ul class="list-disc list-inside">
+        <h2 class="text-base font-bold">Skills</h2>
+        <ul class="list-disc list-inside text-xs">
           <li>HTML</li>
           <li>CSS</li>
           <li>JavaScript</li>

src/pages/socials.astro

@@ -5,7 +5,7 @@ import Twittercircle from "../../public/twittercircle.png";
 ---
 
 <Layout page="socials">
-    <div class="p-2 w-full grid grid-cols-1 gap-2">
+    <div class="p-2 w-full grid grid-cols-1 gap-2 grid-rows-[1fr, 2fr]">
         <Image
             class="rounded-full w-full"
             src={Twittercircle}

src/pages/source.astro

@@ -1,9 +1,15 @@
 ---
 import Layout from "../layouts/Layout.astro";
+import { Image } from "astro:assets";
+import github from "../../public/github.svg";
 ---
 
 <Layout page="source">
-    <div class="pt-4">
-        RND
+    <div class="flex flex-col items-center w-full mt-4 p-4 border border-[#30363d] rounded">
+        <Image src={github} alt="GitHub Logo" class="w-12 h-12" />
+        <div class="text-xs">Check out Source Code!</div>
+        <a href="https://github.com/RND332/rnd-landing" class="text-xs text-white p-1 border border-[#30363d] rounded">
+            View on GitHub
+        </a>
     </div>
-</Layout>
+</Layout>