nextjs rebase

package-lock.json

@@ -8,9 +8,12 @@
       "name": "itrweb",
       "version": "0.1.0",
       "dependencies": {
+        "animate.css": "^4.1.1",
+        "axios": "^1.7.2",
         "next": "14.2.3",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "sass": "^1.77.2"
       },
       "devDependencies": {
         "@types/node": "^20",
@@ -590,6 +593,11 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -614,6 +622,18 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -803,6 +823,11 @@
       "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -827,6 +852,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz",
+      "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -842,6 +877,17 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -856,7 +902,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "dependencies": {
         "fill-range": "^7.1.1"
       },
@@ -938,6 +983,40 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -961,6 +1040,17 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1101,6 +1191,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/dequal": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
@@ -1812,7 +1910,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -1856,6 +1953,25 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@@ -1881,12 +1997,38 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -2193,6 +2335,11 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.6.tgz",
+      "integrity": "sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ=="
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2292,6 +2439,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/is-boolean-object": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
@@ -2366,7 +2524,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -2411,7 +2568,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -2447,7 +2603,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -2812,6 +2967,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2920,6 +3094,14 @@
         }
       }
     },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3180,7 +3362,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -3244,6 +3425,11 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3302,6 +3488,17 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz",
@@ -3485,6 +3682,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/sass": {
+      "version": "1.77.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.77.2.tgz",
+      "integrity": "sha512-eb4GZt1C3avsX3heBNlrc7I09nyT00IUuo4eFhAbeXWU2fvA7oXI53SxODVAA+zgZCk9aunAZgO+losjR3fAwA==",
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -3864,7 +4077,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },

package.json

@@ -9,16 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
+    "axios": "^1.7.2",
+    "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.2.3"
+    "sass": "^1.77.2"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.2.3"
+    "eslint-config-next": "14.2.3",
+    "typescript": "^5"
   }
 }

public/discord.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+    width="100%" height="100%" viewBox="0 0 800.000000 800.000000"
+    preserveAspectRatio="xMidYMid meet">
+
+    <g transform="translate(0.000000,800.000000) scale(0.100000,-0.100000)"
+        fill="#000000" stroke="none">
+        <path
+            d="M3000 6195 c-309 -68 -597 -158 -877 -275 l-152 -63 -42 -66 c-366
+-568 -599 -1105 -728 -1681 -79 -351 -109 -599 -118 -962 -6 -252 10 -612 28
+-634 16 -20 267 -187 403 -269 193 -116 468 -252 674 -334 215 -85 393 -144
+401 -133 92 127 297 460 304 495 1 4 -34 23 -78 41 -197 81 -406 190 -404 210
+0 6 27 30 59 54 l59 43 42 -22 c54 -27 269 -109 391 -148 585 -187 1258 -211
+1855 -66 172 42 362 105 542 179 l133 55 57 -45 c31 -26 57 -49 59 -53 3 -10
+-268 -148 -394 -201 l-102 -42 66 -117 c68 -122 223 -361 245 -379 10 -8 43
+-1 127 27 306 103 684 275 935 426 97 59 361 232 407 268 28 22 41 256 35 616
+-5 318 -17 458 -62 726 -110 658 -364 1301 -747 1891 l-78 121 -137 58 c-311
+131 -606 221 -947 291 -113 23 -119 23 -132 7 -7 -10 -44 -82 -81 -161 -58
+-122 -71 -142 -88 -138 -186 44 -849 57 -1130 23 -82 -10 -158 -19 -168 -20
+-14 -2 -36 33 -96 153 -42 85 -84 156 -92 157 -7 1 -84 -14 -169 -32z m155
+-1839 c180 -48 338 -216 390 -417 81 -307 -103 -662 -380 -734 -128 -33 -284
+-11 -385 53 -192 122 -306 375 -271 601 29 193 113 333 260 434 102 70 262 96
+386 63z m1968 -6 c163 -51 297 -191 359 -375 19 -59 23 -89 22 -195 0 -107 -4
+-136 -27 -205 -61 -184 -203 -327 -370 -371 -66 -18 -187 -18 -253 0 -179 47
+-331 215 -384 422 -63 246 35 522 235 659 120 83 280 108 418 65z" />
+    </g>
+</svg>

public/facebook.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+    width="100%" height="100%" viewBox="0 0 800.000000 800.000000"
+    preserveAspectRatio="xMidYMid meet">
+
+    <g transform="translate(0.000000,800.000000) scale(0.100000,-0.100000)"
+        fill="#000000" stroke="none">
+        <path
+            d="M1077 7210 c-117 -20 -224 -107 -269 -218 l-23 -57 0 -2935 0 -2935
+24 -60 c33 -81 115 -163 196 -196 l60 -24 1573 -3 1572 -2 0 1242 0 1243 -420
+-3 -420 -2 0 500 0 500 419 -2 419 -3 5 460 c5 495 9 537 63 715 15 47 27 90
+28 95 1 6 10 24 19 41 9 17 13 34 10 38 -4 3 -1 6 6 6 7 0 9 5 6 10 -3 6 -1
+10 5 10 6 0 8 5 5 10 -3 6 -1 10 5 10 6 0 8 5 5 10 -3 6 -1 10 6 10 7 0 10 3
+6 6 -3 3 3 15 13 27 11 11 17 23 15 27 -3 5 2 11 11 14 8 3 13 10 10 15 -3 5
+1 12 10 15 9 4 14 9 11 12 -3 3 6 17 21 31 15 13 22 22 15 19 -6 -4 25 30 70
+76 45 45 86 82 90 82 5 1 14 9 21 18 7 10 16 15 19 11 4 -3 9 2 13 11 3 9 12
+16 20 16 8 0 14 5 14 10 0 6 7 10 15 10 8 0 15 5 15 11 0 5 4 7 10 4 6 -3 10
+-1 10 4 0 6 3 10 8 9 4 -1 27 9 52 22 25 13 50 25 55 26 6 1 42 14 80 29 39
+15 77 28 85 30 8 2 51 10 95 20 149 31 293 37 575 25 146 -6 308 -15 360 -20
+52 -5 105 -10 118 -10 l22 0 0 -444 0 -444 -342 -4 c-322 -4 -347 -6 -410 -26
+-37 -13 -74 -29 -82 -38 -8 -8 -18 -14 -21 -14 -3 0 -22 -15 -42 -35 -20 -19
+-32 -35 -28 -35 5 0 0 -7 -11 -15 -10 -8 -14 -15 -9 -15 6 0 4 -4 -2 -8 -7 -4
+-14 -17 -16 -27 -1 -11 -5 -25 -9 -30 -18 -30 -28 -201 -28 -498 l0 -332 480
+3 480 2 0 -24 c0 -13 -27 -232 -60 -487 -33 -255 -60 -470 -60 -477 0 -10 -85
+-12 -420 -10 l-420 3 0 -1243 0 -1243 853 3 852 3 60 24 c81 33 163 115 196
+196 l24 60 0 2935 0 2935 -24 60 c-33 81 -115 163 -196 196 l-60 24 -2905 1
+c-1598 1 -2927 -2 -2953 -6z" />
+    </g>
+</svg>

public/github.svg

@@ -0,0 +1,31 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+    width="100%" height="100%" viewBox="0 0 800.000000 800.000000"
+    preserveAspectRatio="xMidYMid meet">
+
+    <g transform="translate(0.000000,800.000000) scale(0.100000,-0.100000)"
+        fill="#000000" stroke="none">
+        <path
+            d="M3692 7010 c-498 -52 -992 -234 -1407 -519 -326 -223 -654 -569 -860
+-905 -212 -347 -342 -700 -416 -1136 -21 -121 -23 -168 -24 -450 0 -333 10
+-434 66 -680 204 -883 813 -1644 1634 -2040 207 -100 346 -150 414 -150 77 0
+106 12 131 52 19 31 20 51 20 317 l0 284 -47 -7 c-289 -41 -487 -21 -653 65
+-78 40 -105 60 -172 125 -71 70 -115 135 -158 234 -78 179 -186 329 -293 405
+-34 25 -79 57 -100 72 -108 78 -78 144 66 144 168 0 349 -112 468 -289 107
+-161 173 -228 275 -280 145 -74 343 -73 552 1 51 18 64 27 68 47 33 161 75
+255 145 328 23 23 39 45 36 48 -2 3 -36 10 -73 15 -207 29 -445 98 -595 173
+-381 191 -590 499 -666 982 -24 156 -24 460 0 572 46 210 127 380 258 543 l21
+27 -20 58 c-35 99 -45 186 -39 343 5 145 30 278 72 378 l15 36 108 -5 c84 -4
+128 -12 202 -37 116 -39 329 -142 430 -210 41 -28 84 -51 95 -51 11 0 58 9
+105 21 228 54 562 83 806 68 169 -10 377 -38 504 -68 47 -12 93 -21 103 -21
+10 0 62 27 116 60 125 77 323 171 431 205 59 19 116 28 187 32 l103 6 15 -36
+c42 -100 67 -233 72 -378 6 -155 -3 -232 -37 -338 l-21 -62 64 -80 c103 -128
+175 -290 214 -476 25 -121 24 -442 -1 -598 -54 -340 -167 -577 -360 -763 -139
+-134 -289 -220 -503 -290 -107 -36 -314 -82 -437 -97 l-48 -7 20 -21 c35 -39
+90 -133 116 -198 57 -142 59 -173 65 -724 6 -554 5 -539 64 -575 59 -37 89
+-31 352 70 152 59 422 212 605 344 256 184 523 460 712 736 454 662 625 1520
+463 2329 -25 124 -30 143 -75 291 -192 628 -628 1209 -1188 1583 -373 249
+-767 401 -1232 478 -100 17 -182 21 -405 24 -154 2 -317 0 -363 -5z" />
+    </g>
+</svg>

public/instagram.svg

@@ -0,0 +1,30 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+    width="100%" height="100%" viewBox="0 0 800.000000 800.000000"
+    preserveAspectRatio="xMidYMid meet">
+
+    <g transform="translate(0.000000,800.000000) scale(0.100000,-0.100000)"
+        fill="#000000" stroke="none">
+        <path
+            d="M2465 7213 c-778 -51 -1420 -574 -1619 -1317 -64 -238 -61 -152 -61
+-1896 0 -1744 -3 -1658 61 -1896 165 -616 641 -1093 1255 -1257 242 -65 153
+-62 1899 -62 1746 0 1657 -3 1899 62 613 164 1090 641 1254 1254 65 242 62
+153 62 1899 0 1746 3 1657 -62 1899 -162 606 -634 1083 -1239 1251 -43 12
+-131 31 -194 43 -113 21 -136 21 -1660 22 -850 1 -1567 0 -1595 -2z m3172
+-578 c327 -53 627 -246 808 -519 104 -158 161 -303 190 -479 22 -138 22 -3136
+0 -3274 -83 -510 -488 -915 -998 -998 -138 -22 -3136 -22 -3274 0 -510 83
+-915 488 -998 998 -22 138 -22 3136 0 3274 82 506 486 913 989 997 126 22
+3152 22 3283 1z" />
+        <path
+            d="M5620 6121 c-259 -70 -377 -353 -250 -600 74 -146 285 -239 448 -197
+199 51 322 204 322 401 0 193 -124 350 -317 400 -73 19 -122 18 -203 -4z" />
+        <path
+            d="M3890 5649 c-644 -44 -1193 -449 -1434 -1057 -96 -242 -133 -583 -91
+-837 61 -365 203 -650 454 -908 421 -433 1028 -598 1618 -441 555 148 1009
+602 1157 1157 78 293 78 581 0 874 -121 454 -456 854 -884 1055 -259 122 -543
+176 -820 157z m295 -575 c226 -39 424 -142 586 -304 425 -425 425 -1115 -1
+-1540 -295 -296 -733 -396 -1129 -259 -566 196 -867 819 -670 1388 173 501
+692 806 1214 715z" />
+    </g>
+</svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/twitter.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+    width="100%" height="100%" viewBox="0 0 800.000000 800.000000"
+    preserveAspectRatio="xMidYMid meet">
+
+    <g transform="translate(0.000000,800.000000) scale(0.100000,-0.100000)"
+        fill="#000000" stroke="none">
+        <path
+            d="M5170 6790 c-323 -40 -610 -179 -835 -405 -337 -337 -471 -780 -389
+-1277 l7 -37 -69 5 c-924 74 -1737 421 -2416 1030 -113 101 -279 274 -374 388
+l-41 49 -45 -94 c-96 -197 -138 -386 -138 -614 0 -352 114 -659 345 -928 60
+-70 220 -212 252 -224 30 -12 9 -20 -40 -16 -160 13 -339 61 -485 129 l-94 44
+7 -93 c10 -138 32 -250 70 -364 72 -215 177 -385 340 -549 176 -177 375 -295
+608 -361 54 -15 92 -30 85 -34 -7 -4 -56 -14 -108 -24 -106 -20 -347 -23 -440
+-7 -30 6 -57 8 -58 7 -7 -6 36 -112 79 -197 150 -298 412 -542 720 -667 150
+-61 308 -97 442 -102 31 -1 57 -5 57 -9 0 -9 -136 -106 -245 -175 -127 -80
+-360 -194 -511 -250 -165 -60 -393 -118 -570 -145 -171 -26 -469 -36 -619 -22
+-60 6 -111 9 -113 8 -7 -7 233 -142 383 -216 592 -290 1231 -427 1895 -406
+1013 31 1890 386 2595 1050 616 580 1054 1399 1209 2261 40 220 57 402 62 645
+l4 225 90 71 c203 161 374 338 531 550 38 51 69 95 69 97 0 3 -35 -10 -78 -28
+-105 -44 -282 -101 -408 -131 -111 -26 -294 -57 -300 -51 -2 2 29 26 69 53
+148 100 326 294 413 451 39 69 114 236 114 253 0 5 -55 -20 -123 -55 -212
+-111 -558 -236 -720 -260 l-47 -7 -73 69 c-180 171 -434 298 -696 347 -104 20
+-312 28 -411 16z" />
+    </g>
+</svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

src/app/global.scss

@@ -0,0 +1,18 @@
+* {
+    padding: 0px;
+    margin: 0px;
+    background-color: transparent;
+}
+
+.container {
+    width: 100vw;
+    height: auto;   
+    min-height: 100vh;
+    margin: 0px;
+    padding: 0px;
+    background-color: #232323;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}

src/app/globals.css

@@ -1,107 +0,0 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
-    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
-    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}

src/app/layout.tsx

@@ -1,22 +1,21 @@
-import type { Metadata } from "next";
+import Navbar from "@/components/Navbar";
-import { Inter } from "next/font/google";
+import "@/app/global.scss";
-import "./globals.css";
+import Footer from "@/components/Footer";
 
-const inter = Inter({ subsets: ["latin"] });
+export default function Layout({ children }) {
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
   return (
-    <html lang="en">
+    <div className="container">
-      <body className={inter.className}>{children}</body>
+      <div
-    </html>
+        style={{
+          position: "relative",
+          width: "100%",
+          height: "70px",
+          backgroundColor: "transparent",
+        }}
+      />
+      <Navbar></Navbar>
+      <main>{children}</main>
+      <Footer></Footer>
+    </div>
   );
 }

src/app/page.module.css

@@ -1,230 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  max-width: 100%;
-  width: var(--max-width);
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-  text-wrap: balance;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: "";
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo {
-  position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}

src/app/page.tsx

@@ -1,95 +0,0 @@
-import Image from "next/image";
-import styles from "./page.module.css";
-
-export default function Home() {
-  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>src/app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore starter templates for Next.js.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  );
-}

src/components/Footer.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import Image from "next/image";
+import DiscordSVG from "../../public/discord.svg";
+import TwitterSVG from "../../public/twitter.svg";
+import FacebookSVG from "../../public/facebook.svg";
+import InstagramSVG from "../../public/instagram.svg";
+import GithubSVG from "../../public/github.svg";
+import "../stylesheets/footer.scss";
+import Link from "next/link";
+
+const Footer = () => {
+  return (
+    <div className="footer">
+      <div className="footer-links">
+        <ul className="footer-links-ul">
+          <li className="footer-links-ul-li">
+            <a
+              href="https://discord.gg/GA6mvMEzSu"
+              target="_blank"
+              rel="noreferrer"
+              className="footer-links-ul-li-a"
+            >
+              <Image
+                priority
+                className="footer-links-ul-li-svg"
+                src={DiscordSVG}
+                alt=""
+              />
+            </a>
+          </li>
+          <li className="footer-links-ul-li">
+            <a
+              href="https://twitter.com/ILTech_Robotics"
+              target="_blank"
+              rel="noreferrer"
+              className="footer-links-ul-li-a"
+            >
+              <Image
+                priority
+                className="footer-links-ul-li-svg"
+                src={TwitterSVG}
+                alt=""
+              />
+            </a>
+          </li>
+          <li className="footer-links-ul-li">
+            <a
+              href="https://www.facebook.com/IllinoisTechRobotics/"
+              target="_blank"
+              rel="noreferrer"
+              className="footer-links-ul-li-a"
+            >
+              <Image
+                priority
+                className="footer-links-ul-li-svg"
+                src={FacebookSVG}
+                alt=""
+              />
+            </a>
+          </li>
+          <li className="footer-links-ul-li">
+            <a
+              href="https://www.instagram.com/illinoistechrobotics/"
+              target="_blank"
+              rel="noreferrer"
+              className="footer-links-ul-li-a"
+            >
+              <Image
+                priority
+                className="footer-links-ul-li-svg"
+                src={InstagramSVG}
+                alt=""
+              />
+            </a>
+          </li>
+          <li className="footer-links-ul-li">
+            <a
+              href="https://github.com/illinoistechrobotics"
+              target="_blank"
+              rel="noreferrer"
+              className="footer-links-ul-li-a"
+            >
+              <Image
+                priority
+                className="footer-links-ul-li-svg"
+                src={GithubSVG}
+                alt=""
+              />
+            </a>
+          </li>
+        </ul>
+      </div>
+
+      <div className="footer-toes">
+        <ul className="footer-toes-links">
+          <li className="footer-toes-links-link">
+            <Link href="/about" className="footer-toes-links-link-a">
+              About
+            </Link>
+          </li>
+          <li className="footer-toes-links-link">
+            <Link href="/contact" className="footer-toes-links-link-a">
+              Contact
+            </Link>
+          </li>
+          <li className="footer-toes-links-link">
+            <Link href="/projects" className="footer-toes-links-link-a">
+              Projects
+            </Link>
+          </li>
+          <li className="footer-toes-links-link">
+            <Link href="/gallery" className="footer-toes-links-link-a">
+              Gallery
+            </Link>
+          </li>
+        </ul>
+      </div>
+      <span className="footer-toes-span">
+          © {new Date().getFullYear()} Illinois Tech Robotics
+        </span>
+    </div>
+  );
+};
+
+export default Footer;

src/components/Navbar.tsx

@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from "react";
+import Link from "next/link";
+import "@/stylesheets/navbar.scss";
+
+const Navbar = () => {
+  const [navBackground, setNavBackground] = useState({
+    backgroundColor: "transparent",
+  });
+  useEffect(() => {
+    document.addEventListener("scroll", (event) => {
+      if (window.scrollY < 10) {
+        setNavBackground({ backgroundColor: "transparent" });
+      } else {
+        setNavBackground({ backgroundColor: "#232323" });
+      }
+    });
+  }, []);
+
+  return (
+    <div className="navbar" style={navBackground}>
+      <Link className="navbar-logo" href="/">
+        ITR
+      </Link>
+      <div className="navbar-links">
+        <Link className="navbar-link" href="/">
+          🏠 Home
+        </Link>
+        <Link className="navbar-link" href="/about">
+          ❓ About
+        </Link>
+        <Link className="navbar-link" href="/projects">
+          🤖 Projects
+        </Link>
+        <Link className="navbar-link" href="/gallery">
+          📸 Gallery
+        </Link>
+      </div>
+      <div className="navbar-hamburger">≡</div>
+    </div>
+  );
+};
+
+export default Navbar;

src/pages/about.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Head from 'next/head';
+import Layout from '@/app/layout';
+
+const about = () => {
+  return (
+    <div>
+      <Head>
+        <title>ITR - About</title>
+        <meta name="description" content="The oficial website for Illinois Tech Robotics." />
+      </Head>
+      <Layout>
+        <h1>About</h1>
+      </Layout>
+    </div>
+  );
+};
+
+export default about;

src/pages/error.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Head from 'next/head';
+import Layout from '@/app/layout';
+
+const error = () => {
+  return (
+    <div>
+      <Head>
+        <title>ITR - Error</title>
+        <meta name="description" content="The oficial website for Illinois Tech Robotics." />
+      </Head>
+      <Layout>
+        <h1>error</h1>
+      </Layout>
+    </div>
+  );
+};
+
+export default error;

src/pages/gallery.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Head from 'next/head';
+import Layout from '@/app/layout';
+
+const gallery = () => {
+  return (
+    <div>
+      <Head>
+        <title>ITR - Gallery</title>
+        <meta name="description" content="The oficial website for Illinois Tech Robotics." />
+      </Head>
+      <Layout>
+        <h1>Gallery</h1>
+      </Layout>
+    </div>
+  );
+};
+
+export default gallery;

src/pages/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Head from 'next/head';
+import Layout from '@/app/layout';
+
+const index = () => {
+  return (
+    <div>
+      <Head>
+        <title>ITR - Home</title>
+        <meta name="description" content="The oficial website for Illinois Tech Robotics." />
+      </Head>
+      <Layout>
+        <h1>Home</h1>
+      </Layout>
+    </div>
+  );
+};
+
+export default index;

src/pages/projects.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Head from 'next/head';
+import Layout from '@/app/layout';
+
+const projects = () => {
+  return (
+    <div>
+      <Head>
+        <title>ITR - Projects</title>
+        <meta name="description" content="The oficial website for Illinois Tech Robotics." />
+      </Head>
+      <Layout>
+        <h1>Projects</h1>
+      </Layout>
+    </div>
+  );
+};
+
+export default projects;

src/stylesheets/footer.scss

@@ -0,0 +1,130 @@
+@font-face {
+    font-family: itrFont;
+    src: url("../../public/LeagueSpartan-ExtraBold.ttf");
+}
+
+@font-face {
+    font-family: itrFontMedium;
+    src: url("../../public/LeagueSpartan-Medium.ttf");
+}
+
+.footer {
+    background-color: #232323;
+    width: 100%;
+    height: 150px;
+    border-top: 2px solid rgb(46 46 46);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+.footer-links {
+    width: auto;
+    height: auto;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+.footer-links-ul {
+    width: 80vw;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.footer-links-ul-li {
+    padding: 0;
+    margin: 20px;
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.footer-links-ul-li-a {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.footer-links-ul-li-svg {
+    width: 40px;
+    height: 40px;
+    filter: invert(100%) sepia(10%) saturate(1000%) hue-rotate(10deg) brightness(100%) contrast(100%);
+    opacity: 0.3;
+    transition: 0.3s;
+    padding: 0;
+    margin: 0;
+}
+
+.footer-links-ul-li-svg:hover {
+    opacity: 0.7;
+}
+
+.footer-toes-links {
+    display: flex;
+    margin-bottom: 5px;
+}
+
+.footer-toes-links-link {
+    text-align: center;
+    width: 100px;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    height: 30px;
+    padding: 0;
+    margin: 0;
+}
+
+.footer-toes-links-link-a {
+    font-family: itrFontMedium;
+    font-size: 20px;
+    color: #f5f5f5;
+    text-decoration: none;
+    transition: 0.3s;
+}
+
+.footer-toes-links-link-a:hover {
+    color: white;
+}
+
+.footer-toes-span {
+    font-family: itrFontMedium;
+    font-size: 14px;
+    color: #afafaf;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+@media screen and (width <=650px) {
+
+    // Phones
+    .footer-links-ul-li-svg {
+        width: 30px;
+        height: 30px;
+    }
+
+    .footer-links-ul-li {
+        margin: 15px;
+    }
+
+    .footer-toes-links-link-a {
+        font-size: 17px;
+    }
+
+    .footer-toes-links-link {
+        width: 80px;
+    }
+}

src/stylesheets/navbar.scss

@@ -0,0 +1,118 @@
+@font-face {
+    font-family: itrFont;
+    src: url("../../public/LeagueSpartan-ExtraBold.ttf");
+}
+
+@font-face {
+    font-family: itrFontMedium;
+    src: url("../../public/LeagueSpartan-Medium.ttf");
+}
+
+.navbar {
+    width: 100vw;
+    height: 70px;
+    top: 0px;
+    left: 0px;
+    position: fixed;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: transparent;
+    overflow: hidden;
+    margin: 0px;
+    padding: 0px;
+}
+
+.navbar-logo {
+    width: 100px;
+    height: 60%;
+    color: white;
+    font-size: 50px;
+    font-family: itrFont;
+    transition: 0.5s;
+    text-decoration: none;
+    cursor: pointer;
+    margin-left: 30px;
+    margin-right: 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 6px;
+}
+
+.navbar-logo:hover {
+    color: red;
+}
+
+.navbar-links {
+    width: auto;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: row;
+}
+
+.navbar-link,
+.navbar-hamburger {
+    width: auto;
+    height: 70%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 20px;
+    margin-right: 20px;
+    color: rgb(216 216 216);
+    text-decoration: none;
+    font-family: itrFontMedium;
+    font-size: 20px;
+    transition: 0.3s;
+    cursor: pointer;
+}
+
+.navbar-link:hover,
+.navbar-hamburger:hover {
+    color: white;
+}
+
+.navbar-hamburger {
+    border: none;
+    width: 100px;;
+    font-size: 40px;
+    margin-right: 30px;
+    margin-left: 0px;
+}
+
+@media screen and (width <=912px) {
+    // Tablets
+}
+
+@media screen and (width <=650px) {
+    // Phones
+}
+
+@keyframes navbar-logo {
+
+    0%,
+    100% {
+        background-position: 0 0;
+    }
+
+    50% {
+        background-position: 100% 0;
+    }
+}
+
+@keyframes glow {
+    0% {
+        background-position: 0 0;
+    }
+
+    50% {
+        background-position: 400% 0;
+    }
+
+    100% {
+        background-position: 0 0;
+    }
+}