From 1c260e5b8fc4b861b9817eb7421046155d79b4d5 Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Sat, 12 Oct 2024 04:44:37 +0200
Subject: [PATCH] Added some placeholder items

---
 src/routes/+page.svelte | 38 ++++++++++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index ac89b7e..fd9543f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -106,11 +106,45 @@
     </StickyLayer>
 
     <ParallaxLayer offset={1.5} rate={0.3} class="bg-base-200 pointer-events-none" style="box-shadow: 0 -1rem 10px rgba(0, 0, 0, 0.2);" >
-        <div class="flex justify-center">
-            <article class="pt-16 prose overflow-hidden font-mono pointer-events-auto {mobile ? "px-8" : ""}">
+        <div class="grid place-content-center place-items-center min-h-screen pointer-events-auto">
+            <article class="pt-16 prose overflow-hidden font-mono {mobile ? "px-8" : ""}">
                 <h1 class="main-title {!mobile ? "text-center m-auto" : "m-0"}" style="font-size: {!mobile ? 5 : 3}rem; ">About us</h1>
                 <p>We are a small group of developers and artists who started out as classmates, united by our passion for all things technology.</p>
             </article>
+
+            <!-- Spacer -->
+            <div class="{!mobile ? "py-16" : "py-4"}"/> 
+
+            <div class="grid grid-flow-row gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">                
+                <div class="flex w-52 flex-col gap-4">
+                    <div class="skeleton h-32 w-full"></div>
+                    <div class="skeleton h-4 w-28"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                </div>
+                <div class="flex w-52 flex-col gap-4">
+                    <div class="skeleton h-32 w-full"></div>
+                    <div class="skeleton h-4 w-28"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                </div>
+                {#if !mobile}
+                <div class="flex w-52 flex-col gap-4">
+                    <div class="skeleton h-32 w-full"></div>
+                    <div class="skeleton h-4 w-28"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                </div>
+                <div class="flex w-52 flex-col gap-4">
+                    <div class="skeleton h-32 w-full"></div>
+                    <div class="skeleton h-4 w-28"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                    <div class="skeleton h-4 w-full"></div>
+                </div>
+                {/if}
+            </div>
+
+            <h6 class="prose text-base-300"><b>(These will never load)</b></h6>
         </div>
     </ParallaxLayer>