Implement landing page header (#26)

profydev · Oct 28, 2024 · 3e30e6c · 3e30e6c
1 parent 821d4ab
commit 3e30e6c
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/config/routes.tsx b/config/routes.tsx
@@ -5,4 +5,7 @@ export const Routes = {
   alerts: "/dashboard/alerts",
   users: "/dashboard/users",
   settings: "/dashboard/settings",
+  products: "/products",
+  documentation: "/documentation",
+  pricing: "/pricing",
 };
diff --git a/pages/index.jsx b/pages/index.jsx
@@ -1,13 +1,35 @@
 import { Routes } from "@config/routes";
 import styles from "./index.module.scss";
+import { ButtonCTA, ButtonCTASize } from "@features/ui";
 
 const IssuesPage = () => {
   return (
     <div>
       <header className={styles.header}>
         {/* eslint-disable-next-line @next/next/no-img-element */}
         <img src="/icons/logo-large.svg" alt="Prolog logo" />
-        <a href={Routes.projects}>Dashboard</a>
+        <div className={styles.navLinks}>
+          <a href={Routes.home} className={styles.navLink}>
+            Home
+          </a>
+          <a href={Routes.products} className={styles.navLink}>
+            Products
+          </a>
+          <a href={Routes.documentation} className={styles.navLink}>
+            Documentation
+          </a>
+          <a href={Routes.pricing} className={styles.navLink}>
+            Pricing
+          </a>
+        </div>
+        <ButtonCTA
+          size={ButtonCTASize.Medium}
+          onClick={() => {
+            window.open(Routes.projects, "_self");
+          }}
+        >
+          Open Dashboard
+        </ButtonCTA>
       </header>
       <button
         className={styles.contactButton}

diff --git a/pages/index.module.scss b/pages/index.module.scss
@@ -1,3 +1,6 @@
+@use "@styles/font";
+@use "@styles/color";
+
 .header {
   width: 100%;
   height: 80px;
@@ -24,3 +27,18 @@
     background: #6941c6;
   }
 }
+
+.navLinks {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+}
+
+.navLink {
+  text-decoration: none;
+  font: font.$text-md-regular;
+  color: color.$gray-500;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}