styles: updates the home page

app/components/HomePage/HomePage.module.css

@@ -0,0 +1,26 @@
+.column{
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.HomePageLinks{
+  width: 440px;
+  display: flex;
+  justify-content:center;
+  align-items: center;
+  gap: 4em;
+  position: relative;
+  margin-top: 2em;
+  color: hsl(var(--primary));
+}
+
+.HomePageLinkTitle{
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+  text-decoration-color: hsl(var(--primary) / 0.3);
+}
+
+.HomePageLinkTitle:hover {
+  text-decoration-color: hsl(var(--primary));
+}

app/components/HomePage/HomePage.tsx

@@ -0,0 +1,32 @@
+import { contentManager } from "@/lib/contentManager"
+import styles from "./HomePage.module.css"
+import Link from "next/link"
+
+export default function () {
+  const outline = contentManager.getOutline()
+
+  const half = Math.ceil(outline.length / 2)
+  const firstColumn = outline.slice(0, half)
+  const secondColumn = outline.slice(half)
+
+  return (
+    <div className={styles.HomePageLinks}>
+      <div className={styles.column}>
+        {firstColumn.map((ele, index) => (
+          <Link key={index} className={styles.HomePageLink} href={contentManager.getPathWithPrefix(ele.steps[0].fullPath) as string}>
+            <span>{index + 1}. </span>
+            <span className={styles.HomePageLinkTitle}>{ele.title}</span>
+          </Link>
+        ))}
+      </div>
+      <div className={styles.column}>
+        {secondColumn.map((ele, index) => (
+          <Link key={index + half + 1} className={styles.HomePageLink} href={contentManager.getPathWithPrefix(ele.steps[0].fullPath) as string}>
+            <span>{index + half + 1}. </span>
+            <span className={styles.HomePageLinkTitle}>{ele.title}</span>
+          </Link>
+        ))}
+      </div>
+    </div>
+  )
+}

app/components/HomePage/index.tsx

@@ -0,0 +1 @@
+export {default as default} from "./HomePage"

app/page.tsx

@@ -1,15 +1,13 @@
 import styles from "./styles/page.module.css";
-import Link from "next/link";
 import cx from "classnames";
 import { interFont, outfitFont } from "./styles/fonts";
-import RightArrow from "./styles/icons/RightArrow";
 import CompanyLogos from "./components/CommunityLinks/CommunityLinks";
-import { contentManager } from "@/lib/contentManager";
+import HomePage from "./components/HomePage/HomePage";
 
 export default function Home() {
-  const outline = contentManager.getOutline();
   return (
     <div className={cx(styles.main, outfitFont.className)}>
+      <div className={styles.background}></div>
       <div className={styles.wrapper}>
         <div className={styles.titleWrapper}>
           <div className={styles.title}>
@@ -25,18 +23,7 @@ export default function Home() {
             </div>
           </div>
         </div>
-        <Link
-          href={
-            contentManager.getPathWithPrefix(
-              outline[0].steps[0].fullPath,
-            ) as string
-          }
-        >
-          <button className={styles.mainBtn}>
-            START NOW
-            <RightArrow />
-          </button>
-        </Link>
+        <HomePage/>
       </div>
       <div className={styles.footer}>
         <div className={cx(styles.footerText, interFont.className)}>

app/styles/globals.css

@@ -32,6 +32,7 @@ html {
   --link-color-light: 240 100% 50%;
   --error-light: 0 100% 50%;
   --success-light: 120 50% 50%;
+  --backgroundImage-light: 232 66% 50%;
 
   /* Dark Mode colors */
 
@@ -43,6 +44,7 @@ html {
   --link-color-dark: 240 100% 87%;
   --error-dark: 0 100% 50%;
   --success-dark: 120 90% 45%;
+  --backgroundImage-dark: 232 78% 35%;
 }
 
 :root[data-theme="dark"] {
@@ -54,6 +56,7 @@ html {
   --primary: var(--primary-dark);
   --error: var(--error-dark);
   --success: var(--success-dark);
+  --backgroundImage: var(--backgroundImage-dark)
 }
 
 :root[data-theme="light"] {
@@ -65,6 +68,7 @@ html {
   --primary: var(--primary-light);
   --error: var(--error-light);
   --success: var(--success-light);
+  --backgroundImage: var(--backgroundImage-light)
 }
 
 /* html[data-theme="dark"] svg {

app/styles/page.module.css

@@ -2,9 +2,22 @@
   display: flex;
   flex-direction: column;
   height: inherit;
-
+  position: relative;
   justify-content: space-between;
   align-items: center;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+.background {
+  position: absolute;
+  background-color: hsl(var(--backgroundImage));
+  top: -9em;
+  height: 640px;
+  width: 120%;
+  rotate: -8.17deg;
+  z-index: -1;
+  overflow: hidden;
 }
 
 .wrapper {
@@ -14,6 +27,7 @@
   gap: 64px;
   justify-content: center;
   align-items: center;
+  color: white;
 }
 
 .titleWrapper {
@@ -24,19 +38,17 @@
 }
 .title {
   font-size: 6rem;
-  font-weight: 900;
+  font-weight: 800;
   display: flex;
   flex-direction: column;
   gap: 0px;
-  text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.25);
 }
 
 .title > div {
   line-height: 115%;
   letter-spacing: -2px;
 }
 .jsonSchemaTitle {
-  color: hsl(var(--primary));
   text-decoration: underline;
   text-decoration-thickness: 0.075em;
   /* add some gap between the underline and text */
@@ -52,8 +64,6 @@
 }
 .subtitle2 {
   font-size: 1.3rem;
-
-  color: hsl(var(--text) / 0.5);
 }
 .subtitleWrapper {
   display: flex;