Update homepage

Author: woojiahao

public/images/logo.jpg

@@ -5,40 +5,45 @@ import { createLocalPath } from "../utils/link";
 ---
 
 <BaseLayout title="Home">
-  <div class="lg:w-[50%] w-[90%] mx-auto my-12">
-    <h1>Have you ever?</h1>
-    <p>
-      Felt stuck when you encounter a merge conflict because you have never seen
-      it before? Wouldn't it be great if you could practice these scenarios
-      without the worry of messing up an important project repository?
-    </p>
+  <div class="lg:w-[50%] w-[90%] mx-auto my-12 flex flex-col gap-4">
+    <div class="flex flex-col gap-4 justify-center items-center">
+      <img
+        src="/learning-lab/images/logo.jpg"
+        width="150"
+      />
+      <h1>Welcome to the git-mastery learning lab!</h1>
+      <p class="text-lg text-justify">
+        Learn Git through hands-on problems designed to test your understanding
+        through real-world scenarios. Work on problems locally, submit your
+        progress, and receive direct feedback to improve your skills!
+      </p>
+      <a
+        href="https://git-mastery.github.io"
+        class="hover:cursor-pointer hover:bg-white hover:text-black !no-underline transition duration-300 inline-block text-center items-center px-8 py-2 rounded-4xl bg-black border-2 border-black text-white font-bold"
+      >
+        Find out more &nearr;
+      </a>
+    </div>
 
-    <p>
-      Or have you just started learning Git and realized that the tutorial
-      examples feel too simple and you aren't getting enough practice but don't
-      know where to start?
-    </p>
+    <div class="w-[20%] border-t-2 mx-auto border-dotted border-t-neutral-300">
+    </div>
 
-    <div class="w-[80%] my-4 m-auto border-b-neutral-300 border-b-1"></div>
-
-    <h1>Introducing... git-mastery!</h1>
-    <p>
-      git-mastery looks to help to bridge these gaps in your understanding,
-      providing realistic story-based scenarios to tackle Git problems. These
-      give you the opportunity to put your understanding of Git theory to the
-      test!
-    </p>
-
-    <p>
-      No matter if you are looking to learn Git or looking to hone your Git
-      skills, git-mastery has got you covered!
-    </p>
-
-    <a
-      href={createLocalPath("setup")}
-      class="hover:cursor-pointer hover:bg-blue-400 hover:text-white !no-underline transition duration-300 inline-block text-center mt-8 items-center w-full px-4 py-2 rounded-md bg-blue-200 font-bold"
-    >
-      Are you ready? →
-    </a>
+    <div class="flex flex-col gap-4 self-center">
+      <h2 class="text-center">Get started!</h2>
+      <div class="flex lg:flex-row flex-col gap-4 self-center">
+        <a
+          href={createLocalPath("setup")}
+          class="hover:cursor-pointer hover:bg-white hover:text-black !no-underline transition duration-300 inline-block text-center items-center px-8 py-2 rounded-4xl bg-blue-300 border-2 border-blue-300 font-bold"
+        >
+          Setup git-mastery &rarr;
+        </a>
+        <a
+          href={createLocalPath("lessons")}
+          class="hover:cursor-pointer hover:bg-white hover:text-black !no-underline transition duration-300 inline-block text-center items-center px-8 py-2 rounded-4xl bg-red-300 border-2 border-red-300 font-bold"
+        >
+          Jump to lessons &rarr;
+        </a>
+      </div>
+    </div>
   </div>
 </BaseLayout>