From 24a15848926e4a73f5188e7e618f1d2ef1b41252 Mon Sep 17 00:00:00 2001
From: macbook <jamaspishvilinika@icloud.com>
Date: Sat, 22 Mar 2025 21:46:44 +0400
Subject: [PATCH 1/2] modified the UI of about page, I have added better and
 more modern design, main priority still was to keep it simply readable by
 users

---
 packages/app/src/app/about/age.tsx         | 70 ++++++++++++++++++++
 packages/app/src/app/about/page.tsx        | 77 +++++++++++++---------
 packages/app/src/components/ui/heading.tsx |  2 +-
 3 files changed, 117 insertions(+), 32 deletions(-)
 create mode 100644 packages/app/src/app/about/age.tsx

diff --git a/packages/app/src/app/about/age.tsx b/packages/app/src/app/about/age.tsx
new file mode 100644
index 00000000..0562ba0f
--- /dev/null
+++ b/packages/app/src/app/about/age.tsx
@@ -0,0 +1,70 @@
+import { Heading } from "@/components/ui/heading";
+import Link from "next/link";
+
+const page = () => {
+  return (
+    <div className="pt-12 pb-12">
+      <Heading title="About" />
+      <p className="text-left mt-4 text-sm lg:text-md">
+        Welcome to Code Racer, an exciting open-source game that aims to provide
+        a fun and challenging platform for developers of all skill levels to
+        improve their coding abilities and compete with fellow developers in
+        real-time coding races.
+      </p>
+      <p className="text-left mt-2 text-sm lg:text-md">
+        Whether you&apos;re a beginner looking to enhance your coding skills or
+        an experienced developer seeking a new challenge, Code Racer is for you.
+      </p>
+      <section className="text-left mt-6 text-sm lg:text-md">
+        <h2 className="text-xl font-semibold">How It Works</h2>
+        <p className="mb-4">
+          Playing Code Racer is simple. Here&apos;s how you can get started
+        </p>
+
+        <h3 className="mt-2 font-bold">Join a Race:</h3>
+        <p className="mb-2">
+          Choose a race that suits your skill level or create a new one. You can
+          invite friends or compete against random players from the community.
+        </p>
+
+        <h3 className="mt-2  font-bold">Get Ready:</h3>
+        <p className="mb-2">
+          Once the race starts, you will be presented with code snippets in your
+          chosen programming language.
+        </p>
+
+        <h3 className="mt-2 font-bold">Type Like the Wind:</h3>
+        <p className="mb-2">
+          Your mission is to type out the presented code snippet as quickly and
+          accurately as you can. Watch out for tricky syntax and special
+          characters!
+        </p>
+
+        <h3 className="mt-2 font-bold">Climb the Leaderboard:</h3>
+        <p className="mb-2">
+          Each completed code snippet adds to your score. Compete against other
+          racers to climb the leaderboard and prove your typing supremacy.
+        </p>
+      </section>
+      <section className="text-left mt-6 text-sm lg:text-md">
+        <h2 className="text-xl font-semibold">Get Involved</h2>
+        <p>
+          As an open-source project, Code Racer thrives on the support of its
+          community. If you&apos;re enthusiastic about enhancing the game or
+          adding new features, we invite you to contribute to the project. Check
+          out our GitHub repository{" "}
+          <Link
+            className="font-bold"
+            href="https://github.com/webdevcody/code-racer"
+            target="_blank"
+          >
+            here
+          </Link>{" "}
+          to get started.
+        </p>
+      </section>
+    </div>
+  );
+};
+
+export default page;
diff --git a/packages/app/src/app/about/page.tsx b/packages/app/src/app/about/page.tsx
index 0562ba0f..0f4b0277 100644
--- a/packages/app/src/app/about/page.tsx
+++ b/packages/app/src/app/about/page.tsx
@@ -4,57 +4,72 @@ import Link from "next/link";
 const page = () => {
   return (
     <div className="pt-12 pb-12">
-      <Heading title="About" />
-      <p className="text-left mt-4 text-sm lg:text-md">
+       <section className="flex flex-col items-center gap-3">
+        <Heading title="About" />
+      <p className="text-center mt-4 text-lg lg:w-1/2">
         Welcome to Code Racer, an exciting open-source game that aims to provide
         a fun and challenging platform for developers of all skill levels to
         improve their coding abilities and compete with fellow developers in
         real-time coding races.
       </p>
-      <p className="text-left mt-2 text-sm lg:text-md">
+      <p className="text-center mt-2 text-sm text-gray-500 lg:w-1/3">
         Whether you&apos;re a beginner looking to enhance your coding skills or
         an experienced developer seeking a new challenge, Code Racer is for you.
-      </p>
-      <section className="text-left mt-6 text-sm lg:text-md">
-        <h2 className="text-xl font-semibold">How It Works</h2>
-        <p className="mb-4">
-          Playing Code Racer is simple. Here&apos;s how you can get started
-        </p>
+      </p>  
+        </section>
 
-        <h3 className="mt-2 font-bold">Join a Race:</h3>
-        <p className="mb-2">
-          Choose a race that suits your skill level or create a new one. You can
-          invite friends or compete against random players from the community.
-        </p>
+      {/* Stylish Separator */}
+      <div className="flex justify-center mt-10">
+        <span className="text-5xl text-primary">↓</span>
+      </div>
+
+      <section className="text-center flex flex-col mt-6 text-sm gap-4">
+        <h2 className="text-3xl font-semibold">How It Works</h2>
 
-        <h3 className="mt-2  font-bold">Get Ready:</h3>
-        <p className="mb-2">
-          Once the race starts, you will be presented with code snippets in your
-          chosen programming language.
+        <div className="flex flex-col gap-3 mt-3 items-center">
+        <h3 className="font-bold text-lg">Join a Race:</h3>
+        <p className="text-sm font-light lg:w-1/3">
+          Choose a race that suits your skill level or create a new one. You can invite friends or compete against random players from the community.
         </p>
+        </div>
 
-        <h3 className="mt-2 font-bold">Type Like the Wind:</h3>
-        <p className="mb-2">
-          Your mission is to type out the presented code snippet as quickly and
-          accurately as you can. Watch out for tricky syntax and special
-          characters!
+        <div className="flex flex-col gap-3 items-center">
+        <h3 className="mt-4 font-bold text-lg">Get Ready:</h3>
+        <p className="mb-2 text-sm font-light lg:w-1/3">
+        Once the race starts, you will be presented with code snippets in your chosen programming language.</p>
+        </div>
+
+        <div className="flex flex-col gap-3 items-center">
+        <h3 className="mt-4 font-bold text-lg">Type Like the Wind:</h3>
+        <p className="mb-2 text-sm font-light lg:w-1/3">
+        Your mission is to type out the presented code snippet as quickly and
+        accurately as you can. Watch out for tricky syntax and special
+        characters!
         </p>
+        </div>
 
-        <h3 className="mt-2 font-bold">Climb the Leaderboard:</h3>
-        <p className="mb-2">
-          Each completed code snippet adds to your score. Compete against other
-          racers to climb the leaderboard and prove your typing supremacy.
+        <div className="flex flex-col gap-3 items-center">
+        <h3 className="mt-4 font-bold text-lg">Climb the Leaderboard:</h3>
+        <p className="mb-2 text-sm font-light lg:w-1/3">
+        Each completed code snippet adds to your score. Compete against other
+        racers to climb the leaderboard and prove your typing supremacy.
         </p>
+        </div>
       </section>
-      <section className="text-left mt-6 text-sm lg:text-md">
-        <h2 className="text-xl font-semibold">Get Involved</h2>
-        <p>
+
+      <div className="flex justify-center mt-10">
+        <span className="text-5xl text-primary">↓</span>
+      </div>
+
+      <section className="mt-6 text-sm text-center flex flex-col gap-5 items-center">
+        <h2 className="text-5xl font-semibold tracking-tight">Get Involved</h2>
+        <p className="text-sm lg:w-1/2">
           As an open-source project, Code Racer thrives on the support of its
           community. If you&apos;re enthusiastic about enhancing the game or
           adding new features, we invite you to contribute to the project. Check
           out our GitHub repository{" "}
           <Link
-            className="font-bold"
+            className="font-bold text-blue-600 hover:underline"
             href="https://github.com/webdevcody/code-racer"
             target="_blank"
           >
diff --git a/packages/app/src/components/ui/heading.tsx b/packages/app/src/components/ui/heading.tsx
index ab2a0706..fd1883a0 100644
--- a/packages/app/src/components/ui/heading.tsx
+++ b/packages/app/src/components/ui/heading.tsx
@@ -20,7 +20,7 @@ export const Heading: React.FC<HeadingProps> = ({
   return (
     <div className={cn({ "text-center": centered })}>
       {title && (
-        <h2 className="text-2xl md:text-4xl font-special font-bold tracking-tight text-primary">
+        <h2 className="text-5xl md:text-5xl font-special font-bold tracking-tight text-primary">
           {title}
         </h2>
       )}

From 66c2c2a06b6b97dd0b4899eb870eb97efa4b8b2a Mon Sep 17 00:00:00 2001
From: macbook <jamaspishvilinika@icloud.com>
Date: Sat, 22 Mar 2025 22:12:51 +0400
Subject: [PATCH 2/2] removed unnecesary file

---
 packages/app/src/app/about/age.tsx | 70 ------------------------------
 1 file changed, 70 deletions(-)
 delete mode 100644 packages/app/src/app/about/age.tsx

diff --git a/packages/app/src/app/about/age.tsx b/packages/app/src/app/about/age.tsx
deleted file mode 100644
index 0562ba0f..00000000
--- a/packages/app/src/app/about/age.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Heading } from "@/components/ui/heading";
-import Link from "next/link";
-
-const page = () => {
-  return (
-    <div className="pt-12 pb-12">
-      <Heading title="About" />
-      <p className="text-left mt-4 text-sm lg:text-md">
-        Welcome to Code Racer, an exciting open-source game that aims to provide
-        a fun and challenging platform for developers of all skill levels to
-        improve their coding abilities and compete with fellow developers in
-        real-time coding races.
-      </p>
-      <p className="text-left mt-2 text-sm lg:text-md">
-        Whether you&apos;re a beginner looking to enhance your coding skills or
-        an experienced developer seeking a new challenge, Code Racer is for you.
-      </p>
-      <section className="text-left mt-6 text-sm lg:text-md">
-        <h2 className="text-xl font-semibold">How It Works</h2>
-        <p className="mb-4">
-          Playing Code Racer is simple. Here&apos;s how you can get started
-        </p>
-
-        <h3 className="mt-2 font-bold">Join a Race:</h3>
-        <p className="mb-2">
-          Choose a race that suits your skill level or create a new one. You can
-          invite friends or compete against random players from the community.
-        </p>
-
-        <h3 className="mt-2  font-bold">Get Ready:</h3>
-        <p className="mb-2">
-          Once the race starts, you will be presented with code snippets in your
-          chosen programming language.
-        </p>
-
-        <h3 className="mt-2 font-bold">Type Like the Wind:</h3>
-        <p className="mb-2">
-          Your mission is to type out the presented code snippet as quickly and
-          accurately as you can. Watch out for tricky syntax and special
-          characters!
-        </p>
-
-        <h3 className="mt-2 font-bold">Climb the Leaderboard:</h3>
-        <p className="mb-2">
-          Each completed code snippet adds to your score. Compete against other
-          racers to climb the leaderboard and prove your typing supremacy.
-        </p>
-      </section>
-      <section className="text-left mt-6 text-sm lg:text-md">
-        <h2 className="text-xl font-semibold">Get Involved</h2>
-        <p>
-          As an open-source project, Code Racer thrives on the support of its
-          community. If you&apos;re enthusiastic about enhancing the game or
-          adding new features, we invite you to contribute to the project. Check
-          out our GitHub repository{" "}
-          <Link
-            className="font-bold"
-            href="https://github.com/webdevcody/code-racer"
-            target="_blank"
-          >
-            here
-          </Link>{" "}
-          to get started.
-        </p>
-      </section>
-    </div>
-  );
-};
-
-export default page;