Add ol component

src/components/utils/Ol.tsx

@@ -0,0 +1,36 @@
+import classNames from "classnames";
+
+export function Ol(props: { items: React.ReactNode[] }) {
+  return (
+    <ol>
+      {props.items.map((child, i) => {
+        return (
+          <li
+            className={classNames(
+              "grid grid-cols-[auto,1fr] gap-6",
+              i !== props.items.length - 1 ? "pb-6" : undefined
+            )}
+          >
+            <div className="relative">
+              <div className="w-7 h-7 rounded-full bg-about-circle text-about-circleText font-medium flex justify-center items-center relative z-10">
+                {i + 1}
+              </div>
+              {i !== props.items.length - 1 ? (
+                <div
+                  className="h-full w-px absolute top-6 left-1/2 transform -translate-x-1/2"
+                  style={{
+                    backgroundImage:
+                      "linear-gradient(to bottom, transparent 5px, #1F1F29 5px, #1F1F29 10px)",
+                    backgroundSize: "10px 10px",
+                    backgroundRepeat: "Repeat",
+                  }}
+                />
+              ) : null}
+            </div>
+            <div>{child}</div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

src/pages/About.tsx

@@ -1,14 +1,52 @@
 /* eslint-disable react/no-unescaped-entities */
+
 import { ThinContainer } from "@/components/layout/ThinContainer";
+import { Ol } from "@/components/utils/Ol";
 import { Heading1, Heading2, Paragraph } from "@/components/utils/Text";
 
 import { SubPageLayout } from "./layouts/SubPageLayout";
 
+function Question(props: { title: string; children: React.ReactNode }) {
+  return (
+    <>
+      <p className="text-white mb-2 font-medium">{props.title}</p>
+      <div className="text-type-text">{props.children}</div>
+    </>
+  );
+}
+
 export function AboutPage() {
   return (
     <SubPageLayout>
       <ThinContainer>
         <Heading1>About us</Heading1>
+        <Ol
+          items={[
+            <Question title="What is Blue?">
+              Blue, oh so blue, like the tranquil sky on a summer's day. It's
+              the color of calm and serenity, a gentle embrace for your senses.
+              When you think of blue, you think of the vast ocean stretching
+              endlessly, inviting you to dive deep into its azure depths.
+            </Question>,
+            <Question title="Huh?">
+              Blue is the color of dreams, where the world slows down, and you
+              can hear the whispers of the wind in the tall grass. It's a
+              symphony of peacefulness that resonates with your soul, like a
+              melody that lingers in your heart.
+            </Question>,
+            <Question title="What the hell are you talking about?">
+              Blue, like, it's totally, um, the essence of like, everything, you
+              know? It's like, you look at it, and it's like, it's there, but
+              it's also not there, and it's like, you're trying to grasp the
+              concept of blue, but it's like trying to catch a dream in a net
+              made of spaghetti, you know? It's like, it's the ultimate paradox,
+              and it's like, it's just blowing your mind, man, like, it's like
+              trying to find the meaning of life in a jar of peanut butter, but
+              the peanut butter is made of pure energy, man, and it's like,
+              whoa.
+            </Question>,
+          ]}
+        />
         <Paragraph>
           Blue, oh so blue, like the tranquil sky on a summer's day. It's the
           color of calm and serenity, a gentle embrace for your senses. When you

tailwind.config.js

@@ -26,23 +26,23 @@ module.exports = {
         "ash-400": "#3D394D",
         "ash-300": "#2C293A",
         "ash-200": "#2B2836",
-        "ash-100": "#1E1C26"
+        "ash-100": "#1E1C26",
       },
 
       /* fonts */
       fontFamily: {
-        "open-sans": "'Open Sans'"
+        "open-sans": "'Open Sans'",
       },
 
       /* animations */
       keyframes: {
         "loading-pin": {
           "0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" },
-          "20%": { height: "1em", "background-color": "white" }
+          "20%": { height: "1em", "background-color": "white" },
-        }
+        },
       },
-      animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }
+      animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" },
-    }
+    },
   },
   plugins: [
     require("tailwind-scrollbar"),
@@ -52,31 +52,31 @@ module.exports = {
           colors: {
             // Branding
             pill: {
-              background: "#1C1C36"
+              background: "#1C1C36",
             },
 
             // meta data for the theme itself
             global: {
               accentA: "#505DBD",
-              accentB: "#3440A1"
+              accentB: "#3440A1",
             },
 
             // light bar
             lightBar: {
-              light: "#2A2A71"
+              light: "#2A2A71",
             },
 
             // Buttons
             buttons: {
               toggle: "#8D44D6",
-              toggleDisabled: "#202836"
+              toggleDisabled: "#202836",
             },
 
             // only used for body colors/textures
             background: {
               main: "#0A0A10",
               accentA: "#6E3B80",
-              accentB: "#1F1F50"
+              accentB: "#1F1F50",
             },
 
             // typography
@@ -85,7 +85,7 @@ module.exports = {
               text: "#73739D",
               dimmed: "#926CAD",
               divider: "#262632",
-              secondary: "#64647B"
+              secondary: "#64647B",
             },
 
             // search bar
@@ -94,7 +94,7 @@ module.exports = {
               focused: "#24243C",
               placeholder: "#4A4A71",
               icon: "#545476",
-              text: "#FFFFFF"
+              text: "#FFFFFF",
             },
 
             // media cards
@@ -106,7 +106,7 @@ module.exports = {
               barColor: "#4B4B63",
               barFillColor: "#BA7FD6",
               badge: "#151522",
-              badgeText: "#5F5F7A"
+              badgeText: "#5F5F7A",
             },
 
             // Error page
@@ -115,8 +115,14 @@ module.exports = {
               border: "#252534",
 
               type: {
-                secondary: "#62627D"
+                secondary: "#62627D",
-              }
+              },
+            },
+
+            // About page
+            about: {
+              circle: "#262632",
+              circleText: "#9A9AC3",
             },
 
             // video player
@@ -128,17 +134,17 @@ module.exports = {
                 error: "#E44F4F",
                 success: "#40B44B",
                 loading: "#B759D8",
-                noresult: "#64647B"
+                noresult: "#64647B",
               },
 
               progress: {
                 background: "#8787A8",
                 preloaded: "#8787A8",
-                watched: "#A75FC9"
+                watched: "#A75FC9",
               },
 
               audio: {
-                set: "#A75FC9"
+                set: "#A75FC9",
               },
 
               buttons: {
@@ -151,7 +157,7 @@ module.exports = {
                 purple: "#6b298a",
                 purpleHover: "#7f35a1",
                 cancel: "#252533",
-                cancelHover: "#3C3C4A"
+                cancelHover: "#3C3C4A",
               },
 
               context: {
@@ -171,19 +177,19 @@ module.exports = {
 
                 buttons: {
                   list: "#161C26",
-                  active: "#0D1317"
+                  active: "#0D1317",
                 },
 
                 type: {
                   main: "#617A8A",
                   secondary: "#374A56",
-                  accent: "#A570FA"
+                  accent: "#A570FA",
-                }
+                },
-              }
+              },
-            }
+            },
-          }
+          },
-        }
+        },
-      }
+      },
-    })
+    }),
-  ]
+  ],
 };