feat(frontend): general revamp of navigation & pages (#303)

frontend/tailwind.config.js

@@ -1,6 +1,8 @@
 const colors = require("tailwindcss/colors");
 
+/** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: ["class"],
   content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],
   theme: {
     colors: {
@@ -12,6 +14,7 @@ module.exports = {
 
       // Tailwind v1 Colors
       gray: {
+        50: "#ffffff",
         100: "#f7fafc",
         200: "#edf2f7",
         300: "#e2e8f0",
@@ -21,9 +24,11 @@ module.exports = {
         700: "#4a5568",
         800: "#2d3748",
         900: "#1a202c",
+        950: "#0C0F12",
       },
 
       green: {
+        50: "#FFFFFF",
         100: "#f0fff4",
         200: "#c6f6d5",
         300: "#9ae6b4",
@@ -33,6 +38,7 @@ module.exports = {
         700: "#2f855a",
         800: "#276749",
         900: "#22543d",
+        950: "#1C4A2F",
       },
 
       yellow: colors.yellow,
@@ -40,5 +46,29 @@ module.exports = {
       violet: colors.violet,
       amber: colors.amber,
     },
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
   },
+  plugins: [require("tailwindcss-animate")],
 };