diff --git a/public/fonts/NeueMachina-Black.eot b/public/fonts/NeueMachina-Black.eot new file mode 100644 index 0000000000000000000000000000000000000000..b991f807a9ac04509d3dd31b77cd6b8c68f98849 Binary files /dev/null and b/public/fonts/NeueMachina-Black.eot differ diff --git a/public/fonts/NeueMachina-Black.ttf b/public/fonts/NeueMachina-Black.ttf new file mode 100644 index 0000000000000000000000000000000000000000..31165c02edb9e279274df9291aa512aeab993fbf Binary files /dev/null and b/public/fonts/NeueMachina-Black.ttf differ diff --git a/public/fonts/NeueMachina-Black.woff b/public/fonts/NeueMachina-Black.woff new file mode 100644 index 0000000000000000000000000000000000000000..a6bd1f915dec7cccd39b7bea0bb1a01d16e11f4a Binary files /dev/null and b/public/fonts/NeueMachina-Black.woff differ diff --git a/public/fonts/NeueMachina-Black.woff2 b/public/fonts/NeueMachina-Black.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..32f246e7eea9e2e330923c2ca2f16adc7657759c Binary files /dev/null and b/public/fonts/NeueMachina-Black.woff2 differ diff --git a/public/fonts/NeueMachina-Bold.eot b/public/fonts/NeueMachina-Bold.eot new file mode 100644 index 0000000000000000000000000000000000000000..10904b0d44cf133eb8ca0d9a22f4abd87ff0f641 Binary files /dev/null and b/public/fonts/NeueMachina-Bold.eot differ diff --git a/public/fonts/NeueMachina-Bold.ttf b/public/fonts/NeueMachina-Bold.ttf new file mode 100644 index 0000000000000000000000000000000000000000..0cbe1b72523dd4c0fed2169e9a2b006b3368a1b4 Binary files /dev/null and b/public/fonts/NeueMachina-Bold.ttf differ diff --git a/public/fonts/NeueMachina-Bold.woff b/public/fonts/NeueMachina-Bold.woff new file mode 100644 index 0000000000000000000000000000000000000000..24c7e3f89caf16d20610a8fb2491c2ca9126e8a7 Binary files /dev/null and b/public/fonts/NeueMachina-Bold.woff differ diff --git a/public/fonts/NeueMachina-Bold.woff2 b/public/fonts/NeueMachina-Bold.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..b0a6151f9c96614d34dcff33fea3f90f9958e5c3 Binary files /dev/null and b/public/fonts/NeueMachina-Bold.woff2 differ diff --git a/public/fonts/NeueMachina-Light.eot b/public/fonts/NeueMachina-Light.eot new file mode 100644 index 0000000000000000000000000000000000000000..b5d526e0a370943f770f6951596f05501cf85fd8 Binary files /dev/null and b/public/fonts/NeueMachina-Light.eot differ diff --git a/public/fonts/NeueMachina-Light.ttf b/public/fonts/NeueMachina-Light.ttf new file mode 100644 index 0000000000000000000000000000000000000000..50388d071e68797462ede8efe9501a99be53b2db Binary files /dev/null and b/public/fonts/NeueMachina-Light.ttf differ diff --git a/public/fonts/NeueMachina-Light.woff b/public/fonts/NeueMachina-Light.woff new file mode 100644 index 0000000000000000000000000000000000000000..7fcfe01e59e66fd4b5cc6b6e225ed9e5d5f286d9 Binary files /dev/null and b/public/fonts/NeueMachina-Light.woff differ diff --git a/public/fonts/NeueMachina-Light.woff2 b/public/fonts/NeueMachina-Light.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..f4b040a97437b7d0b41b355822b4f36d02db9b7b Binary files /dev/null and b/public/fonts/NeueMachina-Light.woff2 differ diff --git a/public/fonts/NeueMachina-Medium.eot b/public/fonts/NeueMachina-Medium.eot new file mode 100644 index 0000000000000000000000000000000000000000..0e102c80bf5223605b3f579aa2639b310a81a31d Binary files /dev/null and b/public/fonts/NeueMachina-Medium.eot differ diff --git a/public/fonts/NeueMachina-Medium.ttf b/public/fonts/NeueMachina-Medium.ttf new file mode 100644 index 0000000000000000000000000000000000000000..7e732e79a4076670320abdb6d04275c35ad20b0d Binary files /dev/null and b/public/fonts/NeueMachina-Medium.ttf differ diff --git a/public/fonts/NeueMachina-Medium.woff b/public/fonts/NeueMachina-Medium.woff new file mode 100644 index 0000000000000000000000000000000000000000..0b3a4426bb58812fb1b903071e0b7ecc9fae1406 Binary files /dev/null and b/public/fonts/NeueMachina-Medium.woff differ diff --git a/public/fonts/NeueMachina-Medium.woff2 b/public/fonts/NeueMachina-Medium.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..a980f6124e3acb3cceda9dc88a6f2a1122e2ead4 Binary files /dev/null and b/public/fonts/NeueMachina-Medium.woff2 differ diff --git a/public/fonts/NeueMachina-Regular.eot b/public/fonts/NeueMachina-Regular.eot new file mode 100644 index 0000000000000000000000000000000000000000..9468c35ad456db3d1dcdfe3cfc6a2e5e17909531 Binary files /dev/null and b/public/fonts/NeueMachina-Regular.eot differ diff --git a/public/fonts/NeueMachina-Regular.ttf b/public/fonts/NeueMachina-Regular.ttf new file mode 100644 index 0000000000000000000000000000000000000000..c5130201ae1edba6a140759588ed13f559d3fb2b Binary files /dev/null and b/public/fonts/NeueMachina-Regular.ttf differ diff --git a/public/fonts/NeueMachina-Regular.woff b/public/fonts/NeueMachina-Regular.woff new file mode 100644 index 0000000000000000000000000000000000000000..ae86219c8f499e983aa61eb4fe26dc4e8214b949 Binary files /dev/null and b/public/fonts/NeueMachina-Regular.woff differ diff --git a/public/fonts/NeueMachina-Regular.woff2 b/public/fonts/NeueMachina-Regular.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..94d71fa9ef3be46c8da5b57cfa114fd63056d145 Binary files /dev/null and b/public/fonts/NeueMachina-Regular.woff2 differ diff --git a/public/fonts/NeueMachina-Ultrabold.eot b/public/fonts/NeueMachina-Ultrabold.eot new file mode 100644 index 0000000000000000000000000000000000000000..a8febfe70c081d16863c3525cd90cd8d328de69f Binary files /dev/null and b/public/fonts/NeueMachina-Ultrabold.eot differ diff --git a/public/fonts/NeueMachina-Ultrabold.ttf b/public/fonts/NeueMachina-Ultrabold.ttf new file mode 100644 index 0000000000000000000000000000000000000000..53174c9f6ab4af5e50b510de1da2e9e17d93f9d2 Binary files /dev/null and b/public/fonts/NeueMachina-Ultrabold.ttf differ diff --git a/public/fonts/NeueMachina-Ultrabold.woff b/public/fonts/NeueMachina-Ultrabold.woff new file mode 100644 index 0000000000000000000000000000000000000000..4942a35d756d2880e8cc8add1bad42b9ca6f18d9 Binary files /dev/null and b/public/fonts/NeueMachina-Ultrabold.woff differ diff --git a/public/fonts/NeueMachina-Ultrabold.woff2 b/public/fonts/NeueMachina-Ultrabold.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..8cad73ea8d04a4379c0ddc4813336d87781f5411 Binary files /dev/null and b/public/fonts/NeueMachina-Ultrabold.woff2 differ diff --git a/public/fonts/NeueMachina-Ultralight.eot b/public/fonts/NeueMachina-Ultralight.eot new file mode 100644 index 0000000000000000000000000000000000000000..6046917df5fc14c2a403bd6ca4f7b38ef8e151ed Binary files /dev/null and b/public/fonts/NeueMachina-Ultralight.eot differ diff --git a/public/fonts/NeueMachina-Ultralight.ttf b/public/fonts/NeueMachina-Ultralight.ttf new file mode 100644 index 0000000000000000000000000000000000000000..1b152883d76b7dda7026f58f8ff042f16b200b74 Binary files /dev/null and b/public/fonts/NeueMachina-Ultralight.ttf differ diff --git a/public/fonts/NeueMachina-Ultralight.woff b/public/fonts/NeueMachina-Ultralight.woff new file mode 100644 index 0000000000000000000000000000000000000000..ddb7f1ed22ada6a9c16cbe8429bf04272bb67f65 Binary files /dev/null and b/public/fonts/NeueMachina-Ultralight.woff differ diff --git a/public/fonts/NeueMachina-Ultralight.woff2 b/public/fonts/NeueMachina-Ultralight.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..0cac27e3024f3c1acad1199e089af19e7900ba6d Binary files /dev/null and b/public/fonts/NeueMachina-Ultralight.woff2 differ diff --git a/public/fonts/demo.html b/public/fonts/demo.html new file mode 100644 index 0000000000000000000000000000000000000000..c48e67fd7aec54b17fb829b17eb0a1d6c0606121 --- /dev/null +++ b/public/fonts/demo.html @@ -0,0 +1,363 @@ + + + + + + + + + Transfonter demo + + + + +
+
+

Neue Machina Ultralight

+
.your-style {
+    font-family: 'Neue Machina';
+    font-weight: 200;
+    font-style: normal;
+}
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+
+

Neue Machina Light

+
.your-style {
+    font-family: 'Neue Machina';
+    font-weight: 300;
+    font-style: normal;
+}
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+
+

Neue Machina Black

+
.your-style {
+    font-family: 'Neue Machina';
+    font-weight: 900;
+    font-style: normal;
+}
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+
+

Neue Machina Regular

+
.your-style {
+    font-family: 'Neue Machina';
+    font-weight: normal;
+    font-style: normal;
+}
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+
+

Neue Machina Bold

+
.your-style {
+    font-family: 'Neue Machina';
+    font-weight: bold;
+    font-style: normal;
+}
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+
+

Neue Machina Medium

+
.your-style {
+    font-family: 'Neue Machina';
+    font-weight: 500;
+    font-style: normal;
+}
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+
+

Neue Machina Ultrabold

+
.your-style {
+    font-family: 'Neue Machina';
+    font-weight: 800;
+    font-style: normal;
+}
+
+

+ abcdefghijklmnopqrstuvwxyz
+ABCDEFGHIJKLMNOPQRSTUVWXYZ
+ 0123456789.:,;()*!?'@#<>$%&^+-=~ +

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+

The quick brown fox jumps over the lazy dog.

+
+
+
+ + \ No newline at end of file diff --git a/public/fonts/stylesheet.css b/public/fonts/stylesheet.css new file mode 100644 index 0000000000000000000000000000000000000000..e5ecfadcce1330e978a3c795b924c825f32c7cab --- /dev/null +++ b/public/fonts/stylesheet.css @@ -0,0 +1,84 @@ +@font-face { + font-family: 'Neue Machina'; + src: url('NeueMachina-Ultralight.eot'); + src: local('Neue Machina Ultralight'), local('NeueMachina-Ultralight'), + url('NeueMachina-Ultralight.eot?#iefix') format('embedded-opentype'), + url('NeueMachina-Ultralight.woff2') format('woff2'), + url('NeueMachina-Ultralight.woff') format('woff'), + url('NeueMachina-Ultralight.ttf') format('truetype'); + font-weight: 200; + font-style: normal; +} + +@font-face { + font-family: 'Neue Machina'; + src: url('NeueMachina-Light.eot'); + src: local('Neue Machina Light'), local('NeueMachina-Light'), + url('NeueMachina-Light.eot?#iefix') format('embedded-opentype'), + url('NeueMachina-Light.woff2') format('woff2'), + url('NeueMachina-Light.woff') format('woff'), + url('NeueMachina-Light.ttf') format('truetype'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: 'Neue Machina'; + src: url('NeueMachina-Black.eot'); + src: local('Neue Machina Black'), local('NeueMachina-Black'), + url('NeueMachina-Black.eot?#iefix') format('embedded-opentype'), + url('NeueMachina-Black.woff2') format('woff2'), + url('NeueMachina-Black.woff') format('woff'), + url('NeueMachina-Black.ttf') format('truetype'); + font-weight: 900; + font-style: normal; +} + +@font-face { + font-family: 'Neue Machina'; + src: url('NeueMachina-Regular.eot'); + src: local('Neue Machina Regular'), local('NeueMachina-Regular'), + url('NeueMachina-Regular.eot?#iefix') format('embedded-opentype'), + url('NeueMachina-Regular.woff2') format('woff2'), + url('NeueMachina-Regular.woff') format('woff'), + url('NeueMachina-Regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: 'Neue Machina'; + src: url('NeueMachina-Bold.eot'); + src: local('Neue Machina Bold'), local('NeueMachina-Bold'), + url('NeueMachina-Bold.eot?#iefix') format('embedded-opentype'), + url('NeueMachina-Bold.woff2') format('woff2'), + url('NeueMachina-Bold.woff') format('woff'), + url('NeueMachina-Bold.ttf') format('truetype'); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: 'Neue Machina'; + src: url('NeueMachina-Medium.eot'); + src: local('Neue Machina Medium'), local('NeueMachina-Medium'), + url('NeueMachina-Medium.eot?#iefix') format('embedded-opentype'), + url('NeueMachina-Medium.woff2') format('woff2'), + url('NeueMachina-Medium.woff') format('woff'), + url('NeueMachina-Medium.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: 'Neue Machina'; + src: url('NeueMachina-Ultrabold.eot'); + src: local('Neue Machina Ultrabold'), local('NeueMachina-Ultrabold'), + url('NeueMachina-Ultrabold.eot?#iefix') format('embedded-opentype'), + url('NeueMachina-Ultrabold.woff2') format('woff2'), + url('NeueMachina-Ultrabold.woff') format('woff'), + url('NeueMachina-Ultrabold.ttf') format('truetype'); + font-weight: 800; + font-style: normal; +} + diff --git a/public/index.html b/public/index.html index ec64420c0860db60ad7c5db25c2a1be376fc2b9e..b8bde66c612fa22070472f1224729df00bb21e8b 100644 --- a/public/index.html +++ b/public/index.html @@ -9,11 +9,9 @@ name="description" content="Web site created using create-react-app" /> - - - - + + Go-Kahoot diff --git a/src/app/assets/icons/arrow.svg b/src/app/assets/icons/arrow.svg new file mode 100644 index 0000000000000000000000000000000000000000..4a02a03b902f5ac30d2353fce54d2f3c9c653410 --- /dev/null +++ b/src/app/assets/icons/arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/assets/icons/documentation.svg b/src/app/assets/icons/documentation.svg new file mode 100644 index 0000000000000000000000000000000000000000..36c0134197e51079c5cbfdfe4b9a8b407ae287c2 --- /dev/null +++ b/src/app/assets/icons/documentation.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/assets/icons/home.svg b/src/app/assets/icons/home.svg new file mode 100644 index 0000000000000000000000000000000000000000..effca152f40f9d25b95a6d11406ae3a3443c24fb --- /dev/null +++ b/src/app/assets/icons/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/assets/icons/index.ts b/src/app/assets/icons/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..83b6d13a602244c3752e76533eb5a0035751079c --- /dev/null +++ b/src/app/assets/icons/index.ts @@ -0,0 +1,8 @@ +import { ReactComponent as Arrow } from "./arrow.svg"; +import { ReactComponent as HomeIcon } from "./home.svg"; +import { ReactComponent as ListTests } from "./listTests.svg"; +import { ReactComponent as NewTest } from "./newTest.svg"; +import { ReactComponent as Documentation } from "./documentation.svg"; +import { ReactComponent as ListActiveTests } from './listActiveTests.svg'; + +export { Arrow, HomeIcon, ListTests, NewTest, Documentation, ListActiveTests }; diff --git a/src/app/assets/icons/listActiveTests.svg b/src/app/assets/icons/listActiveTests.svg new file mode 100644 index 0000000000000000000000000000000000000000..872311c1f216a59534a1e43bd18995f7798b2a09 --- /dev/null +++ b/src/app/assets/icons/listActiveTests.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/assets/icons/listTests.svg b/src/app/assets/icons/listTests.svg new file mode 100644 index 0000000000000000000000000000000000000000..42d5c6844f6918a8605c3bb976497e99aaa258fb --- /dev/null +++ b/src/app/assets/icons/listTests.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/assets/icons/newTest.svg b/src/app/assets/icons/newTest.svg new file mode 100644 index 0000000000000000000000000000000000000000..42de0ed98bf161858b2bee884933dce8541f66cc --- /dev/null +++ b/src/app/assets/icons/newTest.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/assets/images/home-background.png b/src/app/assets/images/home-background.png new file mode 100644 index 0000000000000000000000000000000000000000..8f37a5aa46f2114cc59d9345a78697dbc7b568d9 Binary files /dev/null and b/src/app/assets/images/home-background.png differ diff --git a/src/app/assets/index.js b/src/app/assets/index.js index 5fa58c9bc062a98770d199e2a1d93c000e860a65..973dcc39207dc88bf1d8ab29d3147c83d09b43eb 100644 --- a/src/app/assets/index.js +++ b/src/app/assets/index.js @@ -1,3 +1,4 @@ import logoImage from "./logo.svg"; export { logoImage }; +export * from './icons' diff --git a/src/app/components/Home/HomePage/index.tsx b/src/app/components/Home/HomePage/index.tsx index 854a97e1f54a4eaaa0ed34bee5336289f0f85d42..5243e1d6380a379bea711dfd6af1624f9e1568e5 100644 --- a/src/app/components/Home/HomePage/index.tsx +++ b/src/app/components/Home/HomePage/index.tsx @@ -1,109 +1,136 @@ import React from "react"; import { Card, - CardActions, CardContent, - Button, - Typography } from "@material-ui/core"; import { AnimatedList } from "react-animated-list"; -import useStyles, { Container, CustomTypography, Link } from "./styles"; +import useStyles, { + Container, + CustomTypography, + Link, + TittleTypography, + CardTittle, + OrdinaryCardText, + StepNumber, + CustomButton, + CustomCardAction, + ArrowTextWrapper, + ArrowTypography, + CustomActionButton +} from "./styles"; +import { Arrow } from 'app/assets'; const HomePage = () => { const classes = useStyles(); - const bull = ; return (
- + Using this application you can: - - + - - - - Create Tests - - - Enter{bull}the{bull}name - - - obligatorily - - + + +
+ + Create Tests + +
+ 01 +
+
+ + Enter the name + + push the button "Next". -
- {'"if successful, you will see a notification"'} -
+ + + if successful, you will see a notification + + + Learn More +
- - -
- - - - Create Questions - - - Enter{bull}the{bull}text - - - obligatorily - - + + +
+ + Create Questions + +
+ 02 +
+
+ + Enter the text + + push the button "Next". -
- {'"if successful, you will see a notification"'} -
+ + + if successful, you will see a notification + + + Learn More +
- - -
- - - - Create Answers - - - Enter{bull}the{bull}text - - - and{bull}choose{bull}right{bull}answer - - + + +
+ + Create Answers + +
+ 03 +
+
+ + Enter the text + + push the button "Next". -
- {'"if successful, you will see a notification"'} -
+ + + if successful, you will see a notification + + + Learn More +
- - -
After that, you and your friends can take these speed tests to find out who is the smartest. - - Want to try? Click on 'Start'! Or before reed the "Documentation". - + + + Want to try?
Click on 'Start'! +
+ +
- + - + + + + + Or before reed
the "Documentation". +
+
diff --git a/src/app/components/Home/HomePage/styles.ts b/src/app/components/Home/HomePage/styles.ts index fa21c6c26188c06b29d0fdd219a0e278b6af617e..376fa2e9113dc1322d7a43ca722a60c258285b0e 100644 --- a/src/app/components/Home/HomePage/styles.ts +++ b/src/app/components/Home/HomePage/styles.ts @@ -2,13 +2,15 @@ import styled from "styled-components"; import { Link as RouterLink } from "react-router-dom"; import { makeStyles } from "@material-ui/core/styles"; import { - Button as MUIButton, + Button as MUIButton, CardActions, Typography as MUITypography } from "@material-ui/core"; + export const Container = styled.div` display: flex; justify-content: center; + align-items: center; margin: 20px; `; @@ -19,7 +21,64 @@ export const Button = styled(MUIButton)` export const CustomTypography = styled(MUITypography)` margin: 15px 0; text-align: center; - font-family: "Libre Baskerville", serif; + font-family: 'Neue Machina'; + font-weight: 400; + font-style: normal; +`; + +export const ArrowTypography = styled(MUITypography)` + font-family: 'Neue Machina'; + font-style: normal; + font-weight: 600; + font-size: 22px; + line-height: 52px; + color: #000000; +`; + +export const TittleTypography = styled(MUITypography)` + margin: 15px 0; + text-align: center; + font-family: 'Neue Machina'; + font-weight: 600; + font-style: normal; +`; + +export const StepNumber = styled(MUITypography)` + font-family: 'Neue Machina'; + font-weight: 600; + font-style: normal; +`; + +export const CardTittle = styled(MUITypography)` + font-size: 20px; + font-family: 'Neue Machina'; + font-weight: 600; + font-style: normal; +`; + +export const OrdinaryCardText = styled(MUITypography)` + font-size: 16px; + font-family: 'Neue Machina'; + font-weight: 400; + font-style: normal; +`; + +export const CustomButton = styled(MUIButton)` + font-family: 'Neue Machina'; + font-weight: 600; + font-size: 16px; + line-height: 52px; + text-decoration-line: underline; +`; + +export const CustomCardAction = styled(CardActions)` + align-self: flex-end; +`; + +export const ArrowTextWrapper = styled.div` + display: flex; + flex-direction: row; + gap: 10px; `; export const Link = styled(RouterLink)` @@ -28,10 +87,40 @@ export const Link = styled(RouterLink)` margin: 0 10px; `; +export const CustomActionButton = styled(MUIButton)` + padding: 0 22px; + min-width: 150px; + border-radius: 15px; + font-family: 'Neue Machina'; + font-weight: 600; + font-size: 16px; + line-height: 52px; +`; + const useStyles = makeStyles({ + cardWrapper: { + display: "flex", + justifyContent: "space-between", + }, + cardContent: { + display: "flex", + flexDirection: "column", + gap: "25px", + }, card: { minWidth: 275, - margin: "0 10px" + minHeight: 300, + margin: "0 10px", + borderRadius: "15px", + }, + testCard: { + backgroundColor: '#B3BBFE', + }, + questionCard: { + backgroundColor: '#D4FEB3', + }, + answerCard: { + backgroundColor: '#9D00FD4D', }, bullet: { display: "inline-block", @@ -39,10 +128,12 @@ const useStyles = makeStyles({ transform: "scale(0.8)" }, title: { + fontFamily: "Neue Machina", fontSize: 14 }, pos: { - marginBottom: 12 + marginBottom: 12, + color: "#48BB78", } }); diff --git a/src/app/components/Home/index.tsx b/src/app/components/Home/index.tsx index a5c4bc55e5d1486645b62e9a78454b0db036ccb5..1da07a66fa54ab48126ac4c0fb05b44545f1dd75 100644 --- a/src/app/components/Home/index.tsx +++ b/src/app/components/Home/index.tsx @@ -12,22 +12,19 @@ import { ListItemText, IconButton, ListItemIcon, - Tooltip + Tooltip, + Switch } from "@material-ui/core"; import { - Shop as ShopIcon, - Home as HomeIcon, Menu as MenuIcon, - NoteAdd as NoteAddIcon, - Assignment as AssignmentIcon, - FindInPage as FindInPageIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon } from "@material-ui/icons"; import { logoImage } from "../../assets"; +import { HomeIcon, ListTests, NewTest, Documentation, ListActiveTests } from "app/assets"; -import useStyles, { Link, theme as customTheme } from "./styles"; +import useStyles, { Link, mainTheme as customTheme, alterTheme } from "./styles"; import { HomeProps } from "./types"; import "toastr/build/toastr.min.css"; @@ -35,6 +32,7 @@ const Home = ({ children }: HomeProps) => { const classes = useStyles(); const theme = useTheme(); + const [isMainTheme, setIsMainTheme] = useState(true); const [isOpened, setOpen] = useState(false); const handleDrawerOpen = () => { @@ -45,9 +43,13 @@ const Home = ({ children }: HomeProps) => { setOpen(false); }; + const changeCurrentTheme = () => { + setIsMainTheme(!isMainTheme) + }; + return ( - -
+ +
{ - Logo - - Ooh-banana - +
+
+ Logo + + Ooh-banana + +
+ +
{ - + @@ -117,7 +128,7 @@ const Home = ({ children }: HomeProps) => { - + @@ -125,7 +136,7 @@ const Home = ({ children }: HomeProps) => { - + @@ -136,7 +147,7 @@ const Home = ({ children }: HomeProps) => { - + diff --git a/src/app/components/Home/styles.ts b/src/app/components/Home/styles.ts index 2c64e9535f6d7153be34146dc736c6f72a36f3ff..297b067eb452fa12bd558a21902a1542f3960e03 100644 --- a/src/app/components/Home/styles.ts +++ b/src/app/components/Home/styles.ts @@ -9,10 +9,10 @@ export const Link = styled(RouterLink)` text-decoration: none; `; -export const theme = createTheme({ +export const mainTheme = createTheme({ palette: { - common: { black: "#000", white: "#fff" }, - background: { paper: "#fff", default: "#fafafa" }, + common: { black: "#2D3748", white: "#fff" }, + background: { paper: "#FFFFFF", default: "#FFFFFF" }, primary: { light: "rgba(191, 120, 255, 1)", main: "rgba(144, 19, 254, 1)", @@ -32,17 +32,55 @@ export const theme = createTheme({ contrastText: "#fff" }, text: { - primary: "rgba(0, 0, 0, 0.87)", - secondary: "rgba(0, 0, 0, 0.54)", + primary: "#2D3748", + secondary: "#000000", disabled: "rgba(0, 0, 0, 0.38)", hint: "rgba(0, 0, 0, 0.38)" } - } + }, +}); + +export const alterTheme = createTheme({ + palette: { + common: { black: "#2D3748", white: "#c7c5c5" }, + background: { paper: "#7a7474", default: "#d09191" }, + primary: { + light: "rgb(219,117,42)", + main: "#e08757", + dark: "rgb(105,76,32)", + contrastText: "#fff" + }, + secondary: { + light: "#ff4081", + main: "#f50057", + dark: "#c51162", + contrastText: "#fff" + }, + error: { + light: "#e57373", + main: "#f44336", + dark: "#d32f2f", + contrastText: "#fff" + }, + text: { + primary: "#000000", + secondary: "#000000", + disabled: "rgba(0, 0, 0, 0.38)", + hint: "rgba(0, 0, 0, 0.38)" + } + }, }); const useStyles = makeStyles(theme => ({ root: { - display: "flex" + display: "flex", + height: "100vh", + backgroundColor: '#7a7474', + }, + rootAlter: { + display: "flex", + height: "100vh", + backgroundColor: theme.palette.background.paper, }, appBar: { zIndex: theme.zIndex.drawer + 1, @@ -97,7 +135,7 @@ const useStyles = makeStyles(theme => ({ }, content: { flexGrow: 1, - marginTop: theme.spacing(8) + marginTop: theme.spacing(8), } })); diff --git a/src/app/styles.ts b/src/app/styles.ts index aec9793e9655c784b9da672aa07852eae5efb8fc..00c4aee6bafc77af2d1023844ce7a4861c456094 100644 --- a/src/app/styles.ts +++ b/src/app/styles.ts @@ -1,12 +1,7 @@ -import { createGlobalStyle } from "styled-components"; import styled from "styled-components"; import { Link as RouterLink } from "react-router-dom"; import { LinearProgress as MUILinearProgress } from "@material-ui/core"; -export const GlobalStyle = createGlobalStyle` - @import url('https://fonts.googleapis.com/css?family=Libre+Baskerville:400,400i,700&display=swap&subset=latin-ext'); -`; - export const Link = styled(RouterLink)` color: black; text-decoration: none;