Landing Page Changes

Author: AttAditya

src/App.jsx

@@ -1,8 +1,10 @@
 import { GSAbout } from "@components/GSAbout"
 import { Hero } from "@components/Hero"
+import { Navbar } from "@components/Navbar"
 
 export function App() {
   return (<>
+    <Navbar />
     <Hero />
     <GSAbout />
   </>)

src/components/Hero/index.jsx

@@ -1,69 +1,23 @@
-import {
-  Drill,
-  FolderGit2,
-  LibraryBig,
-  ToolCase,
-  Trees,
-} from "lucide-react";
-
-import { HeroCard } from "@components/HeroCard";
-
 import Logo from "@assets/GraphScript.png";
 import "./style.css";
 
 export function Hero() {
-  const actions = [
-    {
-      name: "Get Ecosystem",
-      icon: Trees,
-      href: "https://github.com/GraphScript-Labs/installer/releases",
-    },
-    {
-      name: "GSAM Compiler",
-      icon: Drill,
-      href: "https://github.com/GraphScript-Labs/gsam-compiler",
-    },
-    {
-      name: "Online Editor",
-      icon: ToolCase,
-      href: "https://graphscript-labs.github.io/editor",
-    },
-    {
-      name: "Documentation",
-      icon: LibraryBig,
-      href: "https://graphscript-labs.github.io/docs",
-    },
-    {
-      name: "Open Source",
-      icon: FolderGit2,
-      href: "https://github.com/GraphScript-Labs",
-    },
-  ];
-
   return (<>
     <div className="hero">
-      <span className="hero-background" />
-
       <div className="content">
         <div className="brand">
           <div className="brand-logo">
             <img src={Logo} alt="GraphScript Logo" />
           </div>
-          <div className="brand-name">GraphScript</div>
-        </div>
-        <div className="slogan">
-          It's about Logic not Syntax
-        </div>
-      </div>
 
-      <div className="actions">
-        {
-          actions.map((action, index) => <HeroCard
-              key={index}
-              {...action}
-            />
-          )
-        }
+          <div className="brand-name">
+            GraphScript
+          </div>
+          
+          <div className="slogan">
+            It's about Logic not Syntax
+          </div>
+        </div>
       </div>
     </div>
   </>);

src/components/Hero/style.css

@@ -6,68 +6,9 @@
   gap: 4rem;
   height: 100vh;
   position: relative;
-  margin-bottom: 4rem;
-
   --gradient-height: 3rem;
 }
 
-.hero::before {
-  content: '';
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  height: var(--gradient-height);
-  z-index: -1;
-  background: linear-gradient(
-    to right,
-    var(--color-secondary),
-    var(--color-tertiary)
-  );
-}
-
-.hero::after {
-  content: '';
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-  height: var(--gradient-height);
-  z-index: -1;
-  background: linear-gradient(
-    to bottom,
-    transparent,
-    var(--color-background)
-  );
-}
-
-.hero-background {
-  position: absolute;
-  padding: 1rem;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  aspect-ratio: 1;
-  z-index: -1;
-  pointer-events: none;
-  background: linear-gradient(
-    to bottom right,
-    var(--color-primary),
-    var(--color-secondary),
-    var(--color-tertiary)
-  );
-}
-
-.hero-background::before {
-  content: '';
-  display: block;
-  width: 100%;
-  height: 100%;
-  border-radius: 1rem;
-  background: var(--color-background);
-}
-
 .content {
   display: flex;
   flex-direction: column;
@@ -82,8 +23,8 @@
 }
 
 .brand-logo {
-  width: 10rem;
-  height: 10rem;
+  width: min(50vw, 20rem);
+  aspect-ratio: 1;
 }
 
 .brand-logo img {
@@ -93,13 +34,13 @@
 }
 
 .brand-name {
-  font-size: 4rem;
+  font-size: min(6rem, 10vw);
   font-weight: bold;
   margin-top: 0.5rem;
 }
 
 .slogan {
-  font-size: 1.2rem;
+  font-size: min(2rem, 4vw);
   color: #666;
   margin-top: 0.5rem;
 }

src/components/HeroCard/index.jsx

@@ -0,0 +1,71 @@
+import { useState } from "react";
+import { Hamburger } from "lucide-react";
+
+import "./style.css";
+
+export function Navbar() {
+  const [active, setActive] = useState(false);
+
+  const links = [
+    {
+      name: "Get Ecosystem",
+      href: "https://github.com/GraphScript-Labs/installer/releases",
+    },
+    {
+      sep: true,
+    },
+    {
+      name: "GSAM Compiler",
+      href: "https://github.com/GraphScript-Labs/gsam-compiler",
+    },
+    {
+      sep: true,
+    },
+    {
+      name: "Online Editor",
+      href: "https://graphscript-labs.github.io/editor",
+    },
+    {
+      sep: true,
+    },
+    {
+      name: "Documentation",
+      href: "https://graphscript-labs.github.io/docs",
+    },
+    {
+      sep: true,
+    },
+    {
+      name: "Open Source",
+      href: "https://github.com/GraphScript-Labs",
+    },
+  ];
+
+  return (<>
+    <div className="navbar">
+      <div
+        onClick={() => setActive(!active)}
+        className={[
+          "hamburger",
+          active ? "active" : "",
+        ].join(" ")}
+      >
+        <Hamburger className="hamburger-icon" />
+      </div>
+
+      <div className="nav-links">
+        {links.map((link, index) => (link.sep
+          ? <span className="nav-link-sep" key={`sep-${index}`} />
+          : <a
+              key={link.name}
+              href={link.href}
+              className="nav-link"
+            >
+              {link.name}
+            </a>
+        ))}
+      </div>
+    </div>
+  </>);
+}
+