IDEA-Amrita · Git-Roshan09 · May 31, 2026 · May 10, 2026 · May 12, 2026 · May 15, 2026
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -0,0 +1,36 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [main, master, dev]
+  push:
+    branches: [main, master, dev]
+
+jobs:
+  checks:
+    name: Lint, Format & Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Prettier — format check
+        run: npx prettier --check "src/**/*.{js,jsx,css,json}"
+
+      - name: ESLint — lint check
+        run: npx eslint src --ext .js,.jsx
+
+      - name: Build — compile check
+        run: npm run build
+        env:
+          CI: false
diff --git a/.github/workflows/idea.app.yml b/.github/workflows/idea.app.yml
@@ -9,18 +9,16 @@ permissions:
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
         node-version: [16.x, 18.x]
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,2 +1 @@
 {}
-
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ Welcome to iDEA, join us as we bridge the gap between vision and execution.
 
 ## Find out what we do?
 
-Find out more about us by going through the [documentation](https://github.com/IDEA-Amrita/official-documentation) <br/> 
+Find out more about us by going through the [documentation](https://github.com/IDEA-Amrita/official-documentation) <br/>
 Click [here](https://www.instagram.com/idea_amrita/) to contact us directly!
 
 ## Developer Jargon
@@ -22,17 +22,23 @@ npm install && npm start
 ```
 
 ### Hooks
+
 - `pre-commit` hook to format with prettier.
 - `pre-push` hook to run tests (far future).
 - configure with git
+
 ```
 git config core.hooksPath hooks/*
 ```
+
 - give the files execute perms
+
 ```
 chmod +x hooks/*
 ```
+
 - install prettier
+
 ```
 npm install --save-dev --save-exact prettier
 ```

diff --git a/git b/git
diff --git a/package.json b/package.json
@@ -23,7 +23,10 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "predeploy": "npm run build",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -d build",
+    "lint": "eslint src --ext .js,.jsx",
+    "format": "prettier --write \"src/**/*.{js,jsx,css,json}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,css,json}\""
   },
   "eslintConfig": {
     "extends": [

diff --git a/public/index.html b/public/index.html
@@ -5,10 +5,7 @@
     <link rel="icon" href="%PUBLIC_URL%/images/logo.jpeg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="iDEA community website, Amrita CBE"
-    />
+    <meta name="description" content="iDEA community website, Amrita CBE" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
@@ -25,6 +22,12 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>iDEA</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=EB+Garamond:ital,wght@1,500;1,600;1,700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/navbar.js b/src/components/navbar.js
@@ -1,88 +1,136 @@
-import { useState, useRef } from "react";
-import { Navbar } from "../subcomponents";
-import useElementOnScreen from "../animations";
+import { useRef } from "react";
+import styled from "styled-components";
 
-export default function Nav(props) {
-  const [isLight, setIsLight] = useState(props.mode);
-  const [color1, setColor1] = useState("#424242");
-  const [color2, setColor2] = useState("#ff6b6b");
+const Wrapper = styled.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0 40px;
+  box-sizing: border-box;
+`;
+
+const WordMark = styled.h1`
+  font-family: "Archer Gage", serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: clamp(96px, 16vw, 200px);
+  letter-spacing: -0.02em;
+  line-height: 1;
+  margin: 0 0 20px 0;
+  color: var(--accent-violet);
+  text-transform: lowercase;
+`;
+
+const Tagline = styled.p`
+  font-family: "FiraCode", monospace;
+  font-weight: 400;
+  font-size: 13px;
+  letter-spacing: 0.3em;
+  color: var(--muted);
+  margin: 0 0 40px 0;
+  text-transform: lowercase;
+`;
+
+const NavRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+`;
+
+const NavPill = styled.a`
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  font-weight: 500;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  text-decoration: none !important;
+  color: var(--ink-soft) !important;
+  padding: 9px 18px;
+  border: 1.5px solid var(--line);
+  border-radius: var(--radius-pill);
+  background: var(--bg);
+  cursor: pointer;
+  transition: all var(--dur-fast) var(--ease-out);
+
+  &:hover {
+    color: #5a4dff !important;
+    border-color: #5a4dff;
+    transform: translate(-1px, -1px);
+    box-shadow: 2px 2px 0 #5a4dff;
+  }
 
+  &:active {
+    transform: translate(1px, 1px);
+    box-shadow: none;
+  }
+`;
+
+const CTAPill = styled.button`
+  font-family: "Space Grotesk", system-ui, sans-serif;
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  padding: 9px 20px;
+  background-color: #c6ff3d;
+  color: #0e0e0e;
+  border: 1.5px solid #0e0e0e;
+  border-radius: var(--radius-pill);
+  box-shadow: 2px 2px 0 #0e0e0e;
+  cursor: pointer;
+  transition: all var(--dur-fast) var(--ease-out);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+
+  &:hover {
+    transform: translate(-1px, -1px);
+    box-shadow: 4px 4px 0 #0e0e0e;
+  }
+
+  &:active {
+    transform: translate(2px, 2px);
+    box-shadow: none;
+  }
+`;
+
+export default function Nav(props) {
   const ref = useRef(null);
-  const onScreen = useElementOnScreen(ref);
 
   return (
-    <Navbar>
-      <Navbar.TopContainer>
-        {/* <Navbar.EmptyDivL />
-        <Navbar.EmptyDivL />
-        <Navbar.EmptyDivL /> */}
-        <Navbar.TopTitle>IDEA</Navbar.TopTitle>
-        {/* <Navbar.EmptyDivR />
-        <Navbar.EmptyDivR />
-        <Navbar.EmptyDivR /> */}
-      </Navbar.TopContainer>
-      <Navbar.Center>
-        <Navbar.CenterContainer>
-          <Navbar.Link color={isLight ? "#000" : "#fff"}>Home</Navbar.Link>
-          <Navbar.Link color={isLight ? "#000" : "#fff"} onClick={props.about}>
-            About
-          </Navbar.Link>
-          <Navbar.Link
-            color={isLight ? "#000" : "#fff"}
-            onClick={props.roadmap}
-          >
-            Roadmap
-          </Navbar.Link>
-          <Navbar.Link color={isLight ? "#000" : "#fff"} onClick={props.team}>
-            Team
-          </Navbar.Link>
-        </Navbar.CenterContainer>
-        <Navbar.TitleContainer>
-          <Navbar.Title color={isLight ? color1 : color2}>i</Navbar.Title>
-          <Navbar.Title color={isLight ? color1 : color2}>D</Navbar.Title>
-          <Navbar.Title color={isLight ? color1 : color2}>E</Navbar.Title>
-          <Navbar.Title color={isLight ? color1 : color2}>A</Navbar.Title>
-        </Navbar.TitleContainer>
-        <Navbar.CenterContainer>
-          <Navbar.Link
-            color={isLight ? "#000" : "#fff"}
-            onClick={props.projects}
-          >
-            Projects
-          </Navbar.Link>
-          <Navbar.Link
-            color={isLight ? "#000" : "#fff"}
-            href="https://github.com/IDEA-Amrita"
-            target="_blank"
-          >
-            GitHub
-          </Navbar.Link>
-          <Navbar.Link
-            color={isLight ? "#000" : "#fff"}
-            href="https://github.com/IDEA-Amrita/official-documentation"
-            target="_blank"
-          >
-            Documentation
-          </Navbar.Link>
-          <Navbar.Link
-            onClick={props.contribute}
-            color={isLight ? "#000" : "#fff"}
-          >
-            Contribute
-          </Navbar.Link>
-        </Navbar.CenterContainer>
-      </Navbar.Center>
-      <Navbar.TopContainer>
-        {/* <Navbar.EmptyDivL />
-        <Navbar.EmptyDivL />
-        <Navbar.EmptyDivL /> */}
-        <Navbar.BottomTitle color={isLight ? "#292929" : "#fff"}>
-          Watch your ideas come to life.
-        </Navbar.BottomTitle>
-        {/* <Navbar.EmptyDivR />
-        <Navbar.EmptyDivR />
-        <Navbar.EmptyDivR /> */}
-      </Navbar.TopContainer>
-    </Navbar>
+    <Wrapper ref={ref}>
+      <WordMark>iDEA</WordMark>
+      <Tagline>watch your ideas come to life.</Tagline>
+
+      <NavRow>
+        <NavPill onClick={props.about}>About</NavPill>
+        <NavPill onClick={props.roadmap}>Roadmap</NavPill>
+        <NavPill onClick={props.team}>Team</NavPill>
+        <NavPill onClick={props.projects}>Projects</NavPill>
+        <NavPill onClick={props.alumni}>Alumini</NavPill>
+        <NavPill onClick={props.blogs}>Blogs</NavPill>
+        <NavPill
+          href="https://github.com/IDEA-Amrita"
+          target="_blank"
+          rel="noreferrer"
+        >
+          GitHub
+        </NavPill>
+        <NavPill
+          href="https://github.com/IDEA-Amrita/official-documentation"
+          target="_blank"
+          rel="noreferrer"
+        >
+          Docs
+        </NavPill>
+        <CTAPill onClick={props.contribute}>✱ Contribute</CTAPill>
+      </NavRow>
+    </Wrapper>
   );
 }