updated the home page

Author: pavanydg

app/components/HomePage/HomePage.module.css

@@ -0,0 +1,25 @@
+.column{
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.HomePageLinks{
+  width: 440px;
+  display: flex;
+  justify-content:center;
+  align-items: center;
+  gap: 4em;
+  position: relative;
+  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,31 @@
+import { contentManager } from "@/lib/contentManager"
+import styles from "./HomePage.module.css"
+import Link from "next/link"
+
+export default function () {
+  const outline = contentManager.getOutline()
+
+  const firstColumn = outline.slice(0, 4)
+  const secondColumn = outline.slice(4, 8)
+
+  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 + 5} className={styles.HomePageLink} href={contentManager.getPathWithPrefix(ele.steps[0].fullPath) as string}>
+            <span>{index + 5}. </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,13 +1,10 @@
 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.wrapper}>
@@ -25,18 +22,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)}>