diff --git a/Frontend/asynamite/package-lock.json b/Frontend/asynamite/package-lock.json
index a0fce44..b4b896f 100644
--- a/Frontend/asynamite/package-lock.json
+++ b/Frontend/asynamite/package-lock.json
@@ -1117,6 +1117,29 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
},
+ "@emotion/is-prop-valid": {
+ "version": "0.8.8",
+ "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+ "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+ "requires": {
+ "@emotion/memoize": "0.7.4"
+ }
+ },
+ "@emotion/memoize": {
+ "version": "0.7.4",
+ "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+ "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+ },
+ "@emotion/stylis": {
+ "version": "0.8.5",
+ "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+ "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+ },
+ "@emotion/unitless": {
+ "version": "0.7.5",
+ "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+ "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+ },
"@hapi/address": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz",
@@ -2681,6 +2704,22 @@
"resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.6.tgz",
"integrity": "sha512-1aGDUfL1qOOIoqk9QKGIo2lANk+C7ko/fqH0uIyC71x3PEGz0uVP8ISgfEsFuG+FKmjHTvFK/nNM8dowpmUxLA=="
},
+ "babel-plugin-styled-components": {
+ "version": "1.10.7",
+ "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.7.tgz",
+ "integrity": "sha512-MBMHGcIA22996n9hZRf/UJLVVgkEOITuR2SvjHLb5dSTUyR4ZRGn+ngITapes36FI3WLxZHfRhkA1ffHxihOrg==",
+ "requires": {
+ "@babel/helper-annotate-as-pure": "^7.0.0",
+ "@babel/helper-module-imports": "^7.0.0",
+ "babel-plugin-syntax-jsx": "^6.18.0",
+ "lodash": "^4.17.11"
+ }
+ },
+ "babel-plugin-syntax-jsx": {
+ "version": "6.18.0",
+ "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+ "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+ },
"babel-plugin-syntax-object-rest-spread": {
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3341,6 +3380,11 @@
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
},
+ "camelize": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+ "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+ },
"caniuse-api": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3968,6 +4012,11 @@
"postcss": "^7.0.5"
}
},
+ "css-color-keywords": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+ "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+ },
"css-color-names": {
"version": "0.0.4",
"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4058,6 +4107,16 @@
"resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
"integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
},
+ "css-to-react-native": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+ "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+ "requires": {
+ "camelize": "^1.0.0",
+ "css-color-keywords": "^1.0.0",
+ "postcss-value-parser": "^4.0.2"
+ }
+ },
"css-tree": {
"version": "1.0.0-alpha.37",
"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -6220,6 +6279,19 @@
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
},
+ "history": {
+ "version": "4.10.1",
+ "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
+ "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
+ "requires": {
+ "@babel/runtime": "^7.1.2",
+ "loose-envify": "^1.2.0",
+ "resolve-pathname": "^3.0.0",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0",
+ "value-equal": "^1.0.1"
+ }
+ },
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@@ -6230,6 +6302,14 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
+ "hoist-non-react-statics": {
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+ "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+ "requires": {
+ "react-is": "^16.7.0"
+ }
+ },
"hosted-git-info": {
"version": "2.8.8",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
@@ -8128,6 +8208,15 @@
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
"integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg=="
},
+ "mini-create-react-context": {
+ "version": "0.4.0",
+ "resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz",
+ "integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==",
+ "requires": {
+ "@babel/runtime": "^7.5.5",
+ "tiny-warning": "^1.0.3"
+ }
+ },
"mini-css-extract-plugin": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@@ -10617,6 +10706,52 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
+ "react-router": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
+ "integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
+ "requires": {
+ "@babel/runtime": "^7.1.2",
+ "history": "^4.9.0",
+ "hoist-non-react-statics": "^3.1.0",
+ "loose-envify": "^1.3.1",
+ "mini-create-react-context": "^0.4.0",
+ "path-to-regexp": "^1.7.0",
+ "prop-types": "^15.6.2",
+ "react-is": "^16.6.0",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0"
+ },
+ "dependencies": {
+ "isarray": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+ "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+ },
+ "path-to-regexp": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
+ "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
+ "requires": {
+ "isarray": "0.0.1"
+ }
+ }
+ }
+ },
+ "react-router-dom": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
+ "integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
+ "requires": {
+ "@babel/runtime": "^7.1.2",
+ "history": "^4.9.0",
+ "loose-envify": "^1.3.1",
+ "prop-types": "^15.6.2",
+ "react-router": "5.2.0",
+ "tiny-invariant": "^1.0.2",
+ "tiny-warning": "^1.0.0"
+ }
+ },
"react-scripts": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
@@ -10677,6 +10812,15 @@
"workbox-webpack-plugin": "4.3.1"
}
},
+ "react-spring": {
+ "version": "8.0.27",
+ "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-8.0.27.tgz",
+ "integrity": "sha512-nDpWBe3ZVezukNRandTeLSPcwwTMjNVu1IDq9qA/AMiUqHuRN4BeSWvKr3eIxxg1vtiYiOLy4FqdfCP5IoP77g==",
+ "requires": {
+ "@babel/runtime": "^7.3.1",
+ "prop-types": "^15.5.8"
+ }
+ },
"read-pkg": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -11020,6 +11164,11 @@
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
},
+ "resolve-pathname": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
+ "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
+ },
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@@ -11493,6 +11642,11 @@
}
}
},
+ "shallowequal": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+ "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+ },
"shebang-command": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -12161,6 +12315,23 @@
}
}
},
+ "styled-components": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.1.1.tgz",
+ "integrity": "sha512-1ps8ZAYu2Husx+Vz8D+MvXwEwvMwFv+hqqUwhNlDN5ybg6A+3xyW1ECrAgywhvXapNfXiz79jJyU0x22z0FFTg==",
+ "requires": {
+ "@babel/helper-module-imports": "^7.0.0",
+ "@babel/traverse": "^7.4.5",
+ "@emotion/is-prop-valid": "^0.8.8",
+ "@emotion/stylis": "^0.8.4",
+ "@emotion/unitless": "^0.7.4",
+ "babel-plugin-styled-components": ">= 1",
+ "css-to-react-native": "^3.0.0",
+ "hoist-non-react-statics": "^3.0.0",
+ "shallowequal": "^1.1.0",
+ "supports-color": "^5.5.0"
+ }
+ },
"stylehacks": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -12467,6 +12638,16 @@
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
+ "tiny-invariant": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
+ "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
+ },
+ "tiny-warning": {
+ "version": "1.0.3",
+ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+ "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+ },
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@@ -12838,6 +13019,11 @@
"spdx-expression-parse": "^3.0.0"
}
},
+ "value-equal": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
+ "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
+ },
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/Frontend/asynamite/package.json b/Frontend/asynamite/package.json
index a45cc46..da4e8b1 100644
--- a/Frontend/asynamite/package.json
+++ b/Frontend/asynamite/package.json
@@ -8,7 +8,10 @@
"@testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
- "react-scripts": "3.4.1"
+ "react-router-dom": "^5.2.0",
+ "react-scripts": "3.4.1",
+ "react-spring": "^8.0.27",
+ "styled-components": "^5.1.1"
},
"scripts": {
"start": "react-scripts start",
diff --git a/Frontend/asynamite/src/App.js b/Frontend/asynamite/src/App.js
index ce9cbd2..4d9ec2e 100644
--- a/Frontend/asynamite/src/App.js
+++ b/Frontend/asynamite/src/App.js
@@ -1,24 +1,27 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import Layout from "./components/Layout";
+import { BrowserRouter, Switch, Route } from "react-router-dom";
+import Contest from "./containers/Contests";
+import SigninLayout from "./components/SigninLayout";
+import Dashboard from "./containers/Dashboard";
function App() {
return (
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/Frontend/asynamite/src/asset/Data/Contest.json b/Frontend/asynamite/src/asset/Data/Contest.json
new file mode 100644
index 0000000..4f8a6c9
--- /dev/null
+++ b/Frontend/asynamite/src/asset/Data/Contest.json
@@ -0,0 +1,60 @@
+{
+ "contest": [
+ {
+ "name": "Lockdown Hackathon",
+ "content": "Lorem ipsum dolor sit amet consectet adipisicing elit. Blanditiis error vel, id vero temporibus aspernatur dignissimos incidunt eum iure amet.",
+ "start": "1st June",
+ "end": "5th June",
+ "image": ""
+ },
+ {
+ "name": "June Challenge 2020",
+ "content": "Lorem ipsum dolor sit amet consectet adipisicing elit. Blanditiis error vel, id vero temporibus aspernatur dignissimos incidunt eum iure amet.",
+ "start": "1st june",
+ "end": "15th june",
+ "image": ""
+ },
+ {
+ "name": "Appathon",
+ "content": "Lorem ipsum dolor sit amet consectet adipisicing elit. Blanditiis error vel, id vero temporibus aspernatur dignissimos incidunt eum iure amet.",
+ "start": "1st June",
+ "end": "15th June",
+ "image": ""
+ },
+ {
+ "name": "",
+ "content": "Lorem ipsum dolor sit amet consectet adipisicing elit. Blanditiis error vel, id vero temporibus aspernatur dignissimos incidunt eum iure amet.",
+ "start": "1st June",
+ "end": "15th June",
+ "image": ""
+ },
+ {
+ "name": "Lockdown Hackathon",
+ "content": "Lorem ipsum dolor sit amet consectet adipisicing elit. Blanditiis error vel, id vero temporibus aspernatur dignissimos incidunt eum iure amet.",
+ "start": "1st June",
+ "end": "5th June",
+ "image": ""
+ },
+ {
+ "name": "June Challenge 2020",
+ "content": "Lorem ipsum dolor sit amet consectet adipisicing elit. Blanditiis error vel, id vero temporibus aspernatur dignissimos incidunt eum iure amet.",
+ "start": "1st june",
+ "end": "15th june",
+ "image": ""
+ },
+ {
+ "name": "Appathon",
+ "content": "Lorem ipsum dolor sit amet consectet adipisicing elit. Blanditiis error vel, id vero temporibus aspernatur dignissimos incidunt eum iure amet.",
+ "start": "1st June",
+ "end": "15th June",
+ "image": ""
+ },
+ {
+ "name": "June Challenge 2020",
+ "content": "Lorem ipsum dolor sit amet consectet adipisicing elit. Blanditiis error vel, id vero temporibus aspernatur dignissimos incidunt eum iure amet.",
+ "start": "1st June",
+ "end": "15th June",
+ "image": ""
+ }
+ ]
+}
diff --git a/Frontend/asynamite/src/asset/images/1.png b/Frontend/asynamite/src/asset/images/1.png
new file mode 100644
index 0000000..531c4fe
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/1.png differ
diff --git a/Frontend/asynamite/src/asset/images/2.png b/Frontend/asynamite/src/asset/images/2.png
new file mode 100644
index 0000000..0d2046c
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/2.png differ
diff --git a/Frontend/asynamite/src/asset/images/3.png b/Frontend/asynamite/src/asset/images/3.png
new file mode 100644
index 0000000..b88e5f2
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/3.png differ
diff --git a/Frontend/asynamite/src/asset/images/4.png b/Frontend/asynamite/src/asset/images/4.png
new file mode 100644
index 0000000..c052056
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/4.png differ
diff --git a/Frontend/asynamite/src/asset/images/5.png b/Frontend/asynamite/src/asset/images/5.png
new file mode 100644
index 0000000..d6aea30
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/5.png differ
diff --git a/Frontend/asynamite/src/asset/images/6.png b/Frontend/asynamite/src/asset/images/6.png
new file mode 100644
index 0000000..e6433ec
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/6.png differ
diff --git a/Frontend/asynamite/src/asset/images/A1.png b/Frontend/asynamite/src/asset/images/A1.png
new file mode 100644
index 0000000..a3c7fce
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/A1.png differ
diff --git a/Frontend/asynamite/src/asset/images/A2.png b/Frontend/asynamite/src/asset/images/A2.png
new file mode 100644
index 0000000..ac62347
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/A2.png differ
diff --git a/Frontend/asynamite/src/asset/images/Asynamite.png b/Frontend/asynamite/src/asset/images/Asynamite.png
new file mode 100644
index 0000000..2b0d130
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/Asynamite.png differ
diff --git a/Frontend/asynamite/src/asset/images/Background.png b/Frontend/asynamite/src/asset/images/Background.png
new file mode 100644
index 0000000..8cd9e8e
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/Background.png differ
diff --git a/Frontend/asynamite/src/asset/images/achievements.png b/Frontend/asynamite/src/asset/images/achievements.png
new file mode 100644
index 0000000..25ab82c
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/achievements.png differ
diff --git a/Frontend/asynamite/src/asset/images/active.png b/Frontend/asynamite/src/asset/images/active.png
new file mode 100644
index 0000000..3ce86fe
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/active.png differ
diff --git a/Frontend/asynamite/src/asset/images/asynamiteDashboard.png b/Frontend/asynamite/src/asset/images/asynamiteDashboard.png
new file mode 100644
index 0000000..3600375
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/asynamiteDashboard.png differ
diff --git a/Frontend/asynamite/src/asset/images/background.png b/Frontend/asynamite/src/asset/images/background.png
new file mode 100644
index 0000000..00fcb8d
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/background.png differ
diff --git a/Frontend/asynamite/src/asset/images/clock.png b/Frontend/asynamite/src/asset/images/clock.png
new file mode 100644
index 0000000..a971f87
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/clock.png differ
diff --git a/Frontend/asynamite/src/asset/images/contest.png b/Frontend/asynamite/src/asset/images/contest.png
new file mode 100644
index 0000000..37a256e
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/contest.png differ
diff --git a/Frontend/asynamite/src/asset/images/cpp.png b/Frontend/asynamite/src/asset/images/cpp.png
new file mode 100644
index 0000000..c2ebcf6
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/cpp.png differ
diff --git a/Frontend/asynamite/src/asset/images/enthusiast.png b/Frontend/asynamite/src/asset/images/enthusiast.png
new file mode 100644
index 0000000..1f76db7
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/enthusiast.png differ
diff --git a/Frontend/asynamite/src/asset/images/insights.png b/Frontend/asynamite/src/asset/images/insights.png
new file mode 100644
index 0000000..1d36613
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/insights.png differ
diff --git a/Frontend/asynamite/src/asset/images/logo.png b/Frontend/asynamite/src/asset/images/logo.png
new file mode 100644
index 0000000..6f3f21e
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/logo.png differ
diff --git a/Frontend/asynamite/src/asset/images/medal.png b/Frontend/asynamite/src/asset/images/medal.png
new file mode 100644
index 0000000..7d39a0a
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/medal.png differ
diff --git a/Frontend/asynamite/src/asset/images/participated.png b/Frontend/asynamite/src/asset/images/participated.png
new file mode 100644
index 0000000..1364882
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/participated.png differ
diff --git a/Frontend/asynamite/src/asset/images/python.png b/Frontend/asynamite/src/asset/images/python.png
new file mode 100644
index 0000000..f7d6b0e
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/python.png differ
diff --git a/Frontend/asynamite/src/asset/images/structure.png b/Frontend/asynamite/src/asset/images/structure.png
new file mode 100644
index 0000000..2d77c83
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/structure.png differ
diff --git a/Frontend/asynamite/src/asset/images/tracks.png b/Frontend/asynamite/src/asset/images/tracks.png
new file mode 100644
index 0000000..b6413a7
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/tracks.png differ
diff --git a/Frontend/asynamite/src/asset/images/user.png b/Frontend/asynamite/src/asset/images/user.png
new file mode 100644
index 0000000..6954ccd
Binary files /dev/null and b/Frontend/asynamite/src/asset/images/user.png differ
diff --git a/Frontend/asynamite/src/components/Achievement.js b/Frontend/asynamite/src/components/Achievement.js
new file mode 100644
index 0000000..62508bf
--- /dev/null
+++ b/Frontend/asynamite/src/components/Achievement.js
@@ -0,0 +1,24 @@
+import React from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+ height: 100%;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ flex-direction: column;
+ color: ${(props) => (props.active ? "white" : "#663A75")};
+ padding-top: 30px;
+`;
+const Achievement = (props) => (
+
+
+ {props.title}
+
+);
+
+export default Achievement;
diff --git a/Frontend/asynamite/src/components/Contest.js b/Frontend/asynamite/src/components/Contest.js
new file mode 100644
index 0000000..71161f8
--- /dev/null
+++ b/Frontend/asynamite/src/components/Contest.js
@@ -0,0 +1,102 @@
+import React from "react";
+import styled from "styled-components";
+import Hamburger from "./Hamburger";
+import background from "../asset/images/1.png";
+
+const Wrapper = styled.div`
+ position: relative;
+ width: 350px;
+ height: 450px;
+ background-color: white;
+ justify-self: center;
+ margin: 30px 0px;
+ background: url(${background});
+ cursor: pointer;
+ transition: all 0.2s linear;
+ &::before {
+ display: block;
+ content: "";
+ width: 100%;
+ height: 13px;
+ background-color: #e9aa65;
+ }
+ &:hover {
+ transform: scale(1.05);
+ }
+
+ @media screen and (max-width: 400px) {
+ width: 90%;
+ }
+`;
+
+const InnerWrapper = styled.div`
+ width: 100%;
+ margin-top: 40%;
+ padding: 0px 30px;
+ height: 60%;
+`;
+
+const ButtonWrapper = styled.div`
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+`;
+
+const ButtonContainer = styled.div`
+ padding: 5px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ margin-right: 20px;
+ margin-top: 10px;
+`;
+
+const YellowWrapper = styled.div`
+ padding: 5px 10px;
+ background-color: #eaab66;
+ color: white;
+ font-weight: bold;
+ margin-top: 5px;
+`;
+
+const ButtonTitle = styled.h2`
+ font-size: 22px;
+ color: white;
+`;
+
+const MainTitle = styled.h1`
+ color: white;
+ font-size: 22px;
+ margin: 10px 0px;
+`;
+
+const Content = styled.p`
+ font-size: 16px;
+ color: white;
+ margin-top: 10px;
+`;
+const Contest = (props) => {
+ return (
+
+
+
+
+
+ Starts
+ {props.startDate}
+
+
+ Ends
+ {props.endDate}
+
+
+ {props.title}
+ {props.content}
+
+
+ );
+};
+
+export default Contest;
diff --git a/Frontend/asynamite/src/components/Data.js b/Frontend/asynamite/src/components/Data.js
new file mode 100644
index 0000000..8087bc0
--- /dev/null
+++ b/Frontend/asynamite/src/components/Data.js
@@ -0,0 +1,31 @@
+import React from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+ height: 90%;
+ display: flex;
+ padding:0px 20px;
+ flex-direction:row
+ justify-content: flex-start;
+ margin-top:50px;
+ align-items: flex-start;
+ color:white;
+`;
+const Title = styled.h3`
+ font-size: 24px;
+`;
+const Content = styled.h1`
+ font-size: 60px;
+ color: #eaab66;
+`;
+const Data = (props) => (
+
+
+
+
{props.title}
+ {props.content}
+
+
+);
+
+export default Data;
diff --git a/Frontend/asynamite/src/components/Footer.js b/Frontend/asynamite/src/components/Footer.js
new file mode 100644
index 0000000..9e3c217
--- /dev/null
+++ b/Frontend/asynamite/src/components/Footer.js
@@ -0,0 +1,103 @@
+import React from "react";
+import styled from "styled-components";
+import Logo from "../asset/images/logo.png";
+import Link from "./Link";
+
+const Wrapper = styled.footer`
+ width: 100%;
+ height: 200px;
+ background-color: black;
+ padding: 20px 5%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ @media screen and (max-width: 750px) {
+ flex-direction: column;
+ height: 100%;
+ }
+`;
+
+const ContentWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: left;
+ @media screen and (max-width: 750px) {
+ width: 90%;
+ margin: 10px 0px;
+ }
+`;
+
+const Title = styled.h1`
+ font-size: 24px;
+ color: white;
+ padding-bottom: 15px;
+`;
+
+const Text = styled.p`
+ margin-bottom: 7px;
+`;
+const Footer = (props) => {
+ return (
+
+
+
+
+
+ Explore
+
+ CodeAsylums for students
+
+
+ CodeAsylums for Working Professionals
+
+
+ Contact Us
+
+
+ Career
+
+
+
+ Follow
+
+ Linkedin
+
+
+ Instagram
+
+
+ Facebook
+
+
+ Github
+
+
+
+ Visit
+
+ Home
+
+
+ About Us
+
+
+ Contests
+
+
+ Leaderboard
+
+
+
+ © CodeAsylumn 2020
+
+
+ );
+};
+
+export default Footer;
diff --git a/Frontend/asynamite/src/components/Gadget.js b/Frontend/asynamite/src/components/Gadget.js
new file mode 100644
index 0000000..5ac6a5a
--- /dev/null
+++ b/Frontend/asynamite/src/components/Gadget.js
@@ -0,0 +1,28 @@
+import React from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+ width: ${(props) => props.width};
+ height: ${(props) => props.height};
+ margin-top: 30px;
+ border-radius: 7px;
+ background-color: #241125;
+`;
+
+const Title = styled.h1`
+ width: 100%;
+ background-color: #1a0d1e;
+ padding: 10px 20px;
+ color: white;
+ font-size: 24px;
+`;
+const Gadget = (props) => {
+ return (
+
+ {props.title}
+ {props.children}
+
+ );
+};
+
+export default Gadget;
diff --git a/Frontend/asynamite/src/components/Hamburger.js b/Frontend/asynamite/src/components/Hamburger.js
new file mode 100644
index 0000000..413ad1d
--- /dev/null
+++ b/Frontend/asynamite/src/components/Hamburger.js
@@ -0,0 +1,34 @@
+import React from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+ width: 50px;
+ height: 50px;
+ background-color: black;
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-items: center;
+ padding: 5px 0px;
+`;
+
+const Bar = styled.div`
+ width: 70%;
+ height: 4px;
+ border-radius: 6px;
+ background-color: white;
+`;
+const Hamburger = (props) => {
+ return (
+
+
+
+
+
+ );
+};
+
+export default Hamburger;
diff --git a/Frontend/asynamite/src/components/Layout.js b/Frontend/asynamite/src/components/Layout.js
new file mode 100644
index 0000000..ec68380
--- /dev/null
+++ b/Frontend/asynamite/src/components/Layout.js
@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from "react";
+import styles from "../styles/Layout.module.css";
+import Logo from "../asset/images/logo.png";
+import Link from "./Link";
+import Hamburger from "./MenuHamburger";
+const Layout = (props) => {
+ const [toggle, setToggle] = useState(true);
+ useEffect(() => {
+ if (window.innerWidth > 1200) {
+ setToggle(false);
+ }
+ }, []);
+ const clickHandler = () => {
+ setToggle((state) => !state);
+ };
+ return (
+
+ );
+};
+
+export default Layout;
diff --git a/Frontend/asynamite/src/components/Link.js b/Frontend/asynamite/src/components/Link.js
new file mode 100644
index 0000000..dd6411d
--- /dev/null
+++ b/Frontend/asynamite/src/components/Link.js
@@ -0,0 +1,20 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+const StyledLink = styled(Link)`
+ text-decoration: none;
+ color: white;
+ cursor: pointer;
+ &:focus,
+ &:hover,
+ &:visited,
+ &:link,
+ &:active {
+ text-decoration: none;
+ }
+`;
+const Links = ({ children, ...props }) => (
+ {children}
+);
+export default Links;
diff --git a/Frontend/asynamite/src/components/MenuHamburger.js b/Frontend/asynamite/src/components/MenuHamburger.js
new file mode 100644
index 0000000..fbcb159
--- /dev/null
+++ b/Frontend/asynamite/src/components/MenuHamburger.js
@@ -0,0 +1,55 @@
+import React, { useEffect } from "react";
+import styled from "styled-components";
+import { useSpring, animated } from "react-spring";
+
+const Wrapper = styled.div`
+ position: relative;
+ cursor: pointer;
+ padding: 0 10px;
+`;
+
+const Bar = styled(animated.div)`
+ width: 40px;
+ height: 5px;
+ background-color: ${(props) => props.color};
+ border-radius: 20px;
+ margin-top: 6px;
+`;
+const Hamburger = (props) => {
+ const [value, set] = useSpring(() => ({ opacity: 1, angle: 0 }));
+ useEffect(() => {
+ set(props.toggle ? { opacity: 1, angle: 0 } : { opacity: 0, angle: 45 });
+ }, [props.toggle, set]);
+ return (
+
+ x),
+ }}
+ color={props.color}
+ />
+ `rotateZ(${x}deg)`),
+ }}
+ color={props.color}
+ />
+ `rotateZ(-${x}deg)`),
+ }}
+ color={props.color}
+ />
+ x),
+ }}
+ color={props.color}
+ />
+
+ );
+};
+
+export default Hamburger;
diff --git a/Frontend/asynamite/src/components/NavigationItem.js b/Frontend/asynamite/src/components/NavigationItem.js
new file mode 100644
index 0000000..91f4d3a
--- /dev/null
+++ b/Frontend/asynamite/src/components/NavigationItem.js
@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+ width: 100%;
+ padding: 10px 30px;
+ display: flex;
+ flex-direction: row;
+`;
+
+const Img = styled.img`
+ margin-right: 15px;
+ width: 25px;
+ height: 25px;
+`;
+
+const Title = styled.p`
+ color: white;
+ font-size: 20px;
+ padding-bottom: 15px;
+`;
+
+const NavigationItem = (props) => (
+
+
+ {props.title}
+
+);
+
+export default NavigationItem;
diff --git a/Frontend/asynamite/src/components/Profile.js b/Frontend/asynamite/src/components/Profile.js
new file mode 100644
index 0000000..83564ef
--- /dev/null
+++ b/Frontend/asynamite/src/components/Profile.js
@@ -0,0 +1,57 @@
+import React from "react";
+import styled from "styled-components";
+import Background from "../asset/images/background.png";
+import Photo from "../asset/images/user.png";
+import NavigationItem from "./NavigationItem";
+import Insight from "../asset/images/insights.png";
+import Cup from "../asset/images/achievements.png";
+import Active from "../asset/images/active.png";
+import Tracks from "../asset/images/tracks.png";
+import Participated from "../asset/images/participated.png";
+
+const Wrapper = styled.div`
+ width: 300px;
+ height: calc(100vh - 100px);
+ background: url(${Background});
+ position: fixed;
+ top: 100px;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: white;
+`;
+const User = styled.img`
+ width: 150px;
+ height: 150px;
+ border-radius: 50%;
+`;
+
+const Title = styled.h1`
+ font-size: 22px;
+ margin: 25px 0px;
+`;
+const Profile = (props) => {
+ return (
+
+
+ Mahesh Adhikari
+
+ Student
+
+
+ Gangtok, Sikkim
+
+ Navigation
+
+
+
+
+
+ Leaderboard
+
+ );
+};
+
+export default Profile;
diff --git a/Frontend/asynamite/src/components/SigninLayout.js b/Frontend/asynamite/src/components/SigninLayout.js
new file mode 100644
index 0000000..537da07
--- /dev/null
+++ b/Frontend/asynamite/src/components/SigninLayout.js
@@ -0,0 +1,17 @@
+import React from "react";
+import Asynamite from "../asset/images/asynamiteDashboard.png";
+import styles from "../styles/SigninLayout.module.css";
+
+const SigninLayout = (props) => {
+ return (
+
+
+
+
Log Out
+
+
{props.children}
+
+ );
+};
+
+export default SigninLayout;
diff --git a/Frontend/asynamite/src/containers/Contests.js b/Frontend/asynamite/src/containers/Contests.js
new file mode 100644
index 0000000..52732e2
--- /dev/null
+++ b/Frontend/asynamite/src/containers/Contests.js
@@ -0,0 +1,52 @@
+import React from "react";
+import styles from "../styles/Contests.module.css";
+import Contest from "../components/Contest";
+import Background from "../asset/images/Background.png";
+import Asynamite from "../asset/images/Asynamite.png";
+import Footer from "../components/Footer";
+import Data from "../asset/Data/Contest.json";
+
+const Contests = (props) => {
+ return (
+
+
+
+
+
+
+
+
Contest
+
+
+
+
+ {Data.contest.map((ele) => (
+
+ ))}
+
+
+
+
+ );
+};
+
+export default Contests;
diff --git a/Frontend/asynamite/src/containers/Dashboard.js b/Frontend/asynamite/src/containers/Dashboard.js
new file mode 100644
index 0000000..d701594
--- /dev/null
+++ b/Frontend/asynamite/src/containers/Dashboard.js
@@ -0,0 +1,109 @@
+import React from "react";
+import styles from "../styles/Dashboard.module.css";
+import Gadget from "../components/Gadget";
+import Profile from "../components/Profile";
+import Data from "../components/Data";
+import Clock from "../asset/images/clock.png";
+import Contest from "../asset/images/contest.png";
+import Medal from "../asset/images/medal.png";
+import Achievement from "../components/Achievement";
+import One from "../asset/images/A1.png";
+import Two from "../asset/images/A2.png";
+import Three from "../asset/images/3.png";
+import Four from "../asset/images/4.png";
+import Five from "../asset/images/5.png";
+import Six from "../asset/images/6.png";
+import Enthusiast from "../asset/images/enthusiast.png";
+import Cpp from "../asset/images/cpp.png";
+import Python from "../asset/images/python.png";
+import DataStructures from "../asset/images/structure.png";
+
+const Dashboard = (props) => {
+ return (
+
+
gnanasurya
+
+
+
+
+
+
+
+
#156
+
Points Earned
+
1350
+
+
Enthusiast
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Dashboard;
diff --git a/Frontend/asynamite/src/index.css b/Frontend/asynamite/src/index.css
index ec2585e..5e1a0be 100644
--- a/Frontend/asynamite/src/index.css
+++ b/Frontend/asynamite/src/index.css
@@ -1,3 +1,9 @@
+* {
+ padding: 0%;
+ margin: 0%;
+ box-sizing: border-box;
+}
+
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -10,4 +16,4 @@ body {
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
-}
+}
\ No newline at end of file
diff --git a/Frontend/asynamite/src/styles/Contests.module.css b/Frontend/asynamite/src/styles/Contests.module.css
new file mode 100644
index 0000000..7a018dd
--- /dev/null
+++ b/Frontend/asynamite/src/styles/Contests.module.css
@@ -0,0 +1,121 @@
+.wrapper {
+ width: 100%;
+ min-height: 100vh;
+ padding: 0 2.5%;
+}
+
+.titleDiv {
+ padding: 40px 0px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.title {
+ font-size: 32px;
+ color: white;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+}
+
+
+.title span {
+ font-weight: 400;
+ height: 100%;
+ padding-bottom: 10px;
+}
+
+.toggleWrapper {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+
+.titleDiv div h1 {
+ color: white;
+ padding: 0px 20px;
+ font-size: 24px;
+ font-weight: 600;
+}
+
+.line {
+ height: 40px;
+ width: 3px;
+ background-color: white;
+ opacity: 0.6;
+}
+
+.inactive {
+ opacity: 0.6;
+}
+
+.asynamite {
+ height: 47px;
+ padding-right: 10px;
+}
+
+.asynamiteDiv::after {
+ display: block;
+ content: "";
+ width: 40px;
+ height: 5px;
+ background-color: white;
+}
+
+.contestWrapper {
+ display: grid;
+ grid-template-columns: auto auto auto auto;
+ justify-self: end;
+}
+
+@media screen and (max-width:1700px) {
+ .contestWrapper {
+ grid-template-columns: auto auto auto;
+ }
+}
+
+@media screen and (max-width:1300px) {
+ .contestWrapper {
+ grid-template-columns: auto auto;
+ }
+}
+
+@media screen and (max-width:800px) {
+ .contestWrapper {
+ grid-template-columns: auto;
+ }
+
+ .asynamite {
+ height: 30px;
+ }
+
+ .asynamiteDiv::after {
+ width: 25px;
+ }
+
+ .title span {
+ font-size: 24px;
+ }
+
+ .titleDiv div h1 {
+ font-size: 20px;
+ }
+}
+
+@media screen and (max-width:440px) {
+ .titleDiv {
+ flex-direction: column;
+ align-items: left;
+ }
+
+ .titleDiv div {
+ padding-bottom: 10px;
+ }
+
+ .title span {
+ padding-bottom: 20px;
+ }
+}
\ No newline at end of file
diff --git a/Frontend/asynamite/src/styles/Dashboard.module.css b/Frontend/asynamite/src/styles/Dashboard.module.css
new file mode 100644
index 0000000..8c50027
--- /dev/null
+++ b/Frontend/asynamite/src/styles/Dashboard.module.css
@@ -0,0 +1,79 @@
+.wrapper {
+ width: 100%;
+ height: 100%;
+ background-color: #140917;
+}
+
+.gadgetsWrapper {
+ padding-left: 330px;
+ padding-right: 30px;
+}
+
+.columnWrapper {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+}
+
+.column {
+ width: 70%;
+}
+
+.bigCard {
+ width: 30%;
+ padding-left: 30px;
+ padding-bottom: 30px;
+}
+
+.dataWrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 0 10px;
+}
+
+.rankWrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.rank {
+ font-size: 90px;
+ margin: 20px 0px;
+ color: #eaab66;
+}
+
+.pointsTitle {
+ font-size: 30px;
+ color: white;
+ margin: 15px 0px;
+}
+
+.points {
+ font-size: 26px;
+ color: #eaab66;
+}
+
+.position {
+ font-size: 32px;
+ color: white;
+ font-weight: bold;
+}
+
+.image {
+ height: 100%;
+ margin: 20px 0px;
+}
+
+.startButton {
+ border: 1px solid white;
+ background-color: transparent;
+ padding: 10px 20px;
+ color: #eaab66;
+ font-size: 24px;
+ margin: 10px 30px;
+ cursor: pointer;
+}
diff --git a/Frontend/asynamite/src/styles/Layout.module.css b/Frontend/asynamite/src/styles/Layout.module.css
new file mode 100644
index 0000000..ea320c9
--- /dev/null
+++ b/Frontend/asynamite/src/styles/Layout.module.css
@@ -0,0 +1,129 @@
+.wrapper {
+ background-color: #7e1325;
+ min-height: 100vh;
+}
+
+.content {
+ padding-top: 100px;
+}
+
+header {
+ display: flex;
+ height: 100px;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ padding: 5px 10px;
+ background-color: black;
+ position: fixed;
+ width: 100%;
+ z-index: 100;
+ box-shadow: 0px 0px 40px 30px black;
+}
+
+header img {
+ height: 80%;
+ z-index: 1000;
+}
+
+header nav {
+ display: flex;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ max-width: 700px;
+}
+
+.link {
+ font-size: 24px;
+ font-weight: 700;
+}
+
+.link:hover::after {
+ display: block;
+ content: "";
+ width: 100%;
+ height: 4px;
+ background-color: #eaab66;
+}
+
+.buttonWrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ position: absolute;
+ right: 0;
+}
+
+.navButton {
+ border: 0;
+ background-color: transparent;
+ color: white;
+ font-size: 24px;
+ padding: 10px 30px;
+ cursor: pointer;
+}
+
+.headerClass {
+ width: 80%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+ /* display: flex !important; */
+}
+
+.hamburger {
+ display: none;
+}
+
+@media screen and (max-width:1250px) {
+ .headerClass {
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 40%;
+ height: 100%;
+ background-color: black;
+ flex-direction: column;
+ /* display: none; */
+ }
+
+ .buttonWrapper {
+ flex-direction: column;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ height: 120px;
+ }
+
+ header nav {
+ flex-direction: column;
+ height: 40%;
+ }
+
+ .hamburger {
+ display: flex;
+ }
+}
+
+@media screen and (max-width:700px) {
+ .headerClass {
+ width: 100%;
+ }
+
+ header {
+ height: 70px;
+ }
+
+ .content {
+ padding-top: 70px;
+ }
+}
\ No newline at end of file
diff --git a/Frontend/asynamite/src/styles/SigninLayout.module.css b/Frontend/asynamite/src/styles/SigninLayout.module.css
new file mode 100644
index 0000000..5499968
--- /dev/null
+++ b/Frontend/asynamite/src/styles/SigninLayout.module.css
@@ -0,0 +1,30 @@
+.header {
+ display: flex;
+ position: fixed;
+ flex-direction: row;
+ justify-content: space-between;
+ padding: 10px 30px;
+ align-items: center;
+ height: 100px;
+ background-color: black;
+ position: fixed;
+ width: 100%;
+}
+
+.logo {
+ height: 70%;
+}
+
+.button {
+ background-color: transparent;
+ font-size: 24px;
+ color: white;
+ padding: 10px 20px;
+ border: 2px solid;
+ border-color: white transparent white transparent;
+ cursor: pointer;
+}
+
+.content {
+ padding-top: 100px;
+}
\ No newline at end of file