diff --git a/README.md b/README.md index 9d9e9796d..fe3a765d2 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,16 @@ # Design Handoff -Replace this readme with your own information about your project. +Week 9. This project involved buliding a landing page with React components and incorporating a given design from UX design students @Technigo. The design was given to us through a hand-off through demo and Figma file. +The brief was to build with React, preferably Styled Components, use reusaable components and finish it of as close as possible to the design. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. ## The problem +Such a rewarding and fun week! I created a sketch on what components i needed and how they could be used regarding weather my designer wanted it to be shown on different screen sizes and if it could be reusable. I also acknowledged the bigger challenges and started with the basic structure first. -Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next? +I used npm packages for my carousels and struggled a bit with overriding it's built in styling-properties at first. Indeed challenging but revarding to learn! + +The project was handed to us on tuesday and due to Easter holidays there where som limitations on time for this week. I ended up with leaving the hamburger menu slightly unfinished and should evolve the accessibilty if I had more time. ## View it live -Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about. +https://ux-handoff-poweryoga.netlify.app diff --git a/package-lock.json b/package-lock.json index 79e93a77f..86ce0ce73 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,9 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-awesome-slider": "^4.1.0", + "react-dom": "^18.2.0", + "styled-components": "^5.3.9" }, "devDependencies": { "eslint-plugin-flowtype": "^8.0.3", @@ -130,7 +132,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz", "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==", - "dev": true, "dependencies": { "@babel/types": "^7.18.6" }, @@ -2193,6 +2194,29 @@ "postcss-selector-parser": "^6.0.10" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "dependencies": { + "@emotion/memoize": "^0.8.0" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "node_modules/@emotion/stylis": { + "version": "0.8.5", + "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" + }, + "node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, "node_modules/@eslint/eslintrc": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.2.tgz", @@ -4930,6 +4954,26 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + }, + "peerDependencies": { + "styled-components": ">= 2" + } + }, + "node_modules/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": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "node_modules/babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -5267,6 +5311,14 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -5744,6 +5796,14 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz", @@ -5952,6 +6012,16 @@ "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", "dev": true }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -8506,6 +8576,14 @@ "he": "bin/he" } }, + "node_modules/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==", + "dependencies": { + "react-is": "^16.7.0" + } + }, "node_modules/hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -11691,8 +11769,7 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash.debounce": { "version": "4.0.8", @@ -13938,8 +14015,7 @@ "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "node_modules/prelude-ls": { "version": "1.2.1", @@ -14230,6 +14306,14 @@ "node": ">=14" } }, + "node_modules/react-awesome-slider": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/react-awesome-slider/-/react-awesome-slider-4.1.0.tgz", + "integrity": "sha512-cbPI1MTpVLKbEH6gf9bwtJb8Ja6R/YJonKbUQehfq2B2AAJkgDMeHntaa4SgGCRqWd55xKiT+CkjfKau1QRsKw==", + "dependencies": { + "web-animation-club": "^0.6.0" + } + }, "node_modules/react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -15210,6 +15294,11 @@ "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", "dev": true }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -15619,6 +15708,35 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "5.3.9", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.9.tgz", + "integrity": "sha512-Aj3kb13B75DQBo2oRwRa/APdB5rSmwUfN5exyarpX+x/tlM/rwZA2vVk2vQgVSP6WKaZJHWwiFrzgHt+CLtB4A==", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, "node_modules/stylehacks": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", @@ -16475,6 +16593,12 @@ "minimalistic-assert": "^1.0.0" } }, + "node_modules/web-animation-club": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/web-animation-club/-/web-animation-club-0.6.0.tgz", + "integrity": "sha512-9W+EQu1HiaPLe/7WZlhJ2ULqQ4VL80RPDYW+ZcjfTKp6ayOuT1k3SVO6+tu0VBRmOqueJ/mrG+rjjInIv8Aglg==", + "deprecated": "WARNING: This project has been renamed to @rcaferati/wac; install it using @rcaferati/wac instead." + }, "node_modules/webidl-conversions": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz", @@ -17470,7 +17594,6 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz", "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==", - "dev": true, "requires": { "@babel/types": "^7.18.6" } @@ -18821,6 +18944,29 @@ "dev": true, "requires": {} }, + "@emotion/is-prop-valid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.0.tgz", + "integrity": "sha512-3aDpDprjM0AwaxGE09bOPkNxHpBd+kA6jty3RnaEXdweX1DF1U3VQpPYb0g1IStAuK7SVQ1cy+bNBBKp4W3Fjg==", + "requires": { + "@emotion/memoize": "^0.8.0" + } + }, + "@emotion/memoize": { + "version": "0.8.0", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.0.tgz", + "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==" + }, + "@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==" + }, "@eslint/eslintrc": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.2.tgz", @@ -20873,6 +21019,23 @@ "@babel/helper-define-polyfill-provider": "^0.3.3" } }, + "babel-plugin-styled-components": { + "version": "2.0.7", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-2.0.7.tgz", + "integrity": "sha512-i7YhvPgVqRKfoQ66toiZ06jPNA3p6ierpfUuEWxNF+fV27Uv5gxBkf8KZLHUCc1nFA9j6+80pYoIpqCeyW3/bA==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.16.0", + "@babel/helper-module-imports": "^7.16.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.11", + "picomatch": "^2.3.0" + } + }, + "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": "sha512-qrPaCSo9c8RHNRHIotaufGbuOBN8rtdC4QrrFFc43vyWCCz7Kl7GL1PGaXtMGQZUXrkCjNEgxDfmAuAabr/rlw==" + }, "babel-plugin-transform-react-remove-prop-types": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz", @@ -21141,6 +21304,11 @@ "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", "dev": true }, + "camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -21504,6 +21672,11 @@ "postcss-selector-parser": "^6.0.9" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==" + }, "css-declaration-sorter": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.3.1.tgz", @@ -21634,6 +21807,16 @@ "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==", "dev": true }, + "css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "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", @@ -23505,6 +23688,14 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "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" + } + }, "hoopy": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz", @@ -25863,8 +26054,7 @@ "lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash.debounce": { "version": "4.0.8", @@ -27340,8 +27530,7 @@ "postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", - "dev": true + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" }, "prelude-ls": { "version": "1.2.1", @@ -27560,6 +27749,14 @@ "whatwg-fetch": "^3.6.2" } }, + "react-awesome-slider": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/react-awesome-slider/-/react-awesome-slider-4.1.0.tgz", + "integrity": "sha512-cbPI1MTpVLKbEH6gf9bwtJb8Ja6R/YJonKbUQehfq2B2AAJkgDMeHntaa4SgGCRqWd55xKiT+CkjfKau1QRsKw==", + "requires": { + "web-animation-club": "^0.6.0" + } + }, "react-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -28303,6 +28500,11 @@ "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", "dev": true }, + "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": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -28617,6 +28819,23 @@ "dev": true, "requires": {} }, + "styled-components": { + "version": "5.3.9", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.9.tgz", + "integrity": "sha512-Aj3kb13B75DQBo2oRwRa/APdB5rSmwUfN5exyarpX+x/tlM/rwZA2vVk2vQgVSP6WKaZJHWwiFrzgHt+CLtB4A==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "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": "5.1.0", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-5.1.0.tgz", @@ -29270,6 +29489,11 @@ "minimalistic-assert": "^1.0.0" } }, + "web-animation-club": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/web-animation-club/-/web-animation-club-0.6.0.tgz", + "integrity": "sha512-9W+EQu1HiaPLe/7WZlhJ2ULqQ4VL80RPDYW+ZcjfTKp6ayOuT1k3SVO6+tu0VBRmOqueJ/mrG+rjjInIv8Aglg==" + }, "webidl-conversions": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz", diff --git a/package.json b/package.json index 7214c8fde..228c3e421 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-awesome-slider": "^4.1.0", + "react-dom": "^18.2.0", + "styled-components": "^5.3.9" }, "scripts": { "start": "react-scripts start", diff --git a/public/img/adress.png b/public/img/adress.png new file mode 100644 index 000000000..6913ecd63 Binary files /dev/null and b/public/img/adress.png differ diff --git a/public/img/adress192x185.png b/public/img/adress192x185.png new file mode 100644 index 000000000..0d7f6d890 Binary files /dev/null and b/public/img/adress192x185.png differ diff --git a/public/img/person1.png b/public/img/person1.png new file mode 100644 index 000000000..e1e1c4b25 Binary files /dev/null and b/public/img/person1.png differ diff --git a/public/img/person2.png b/public/img/person2.png new file mode 100644 index 000000000..8828f55ad Binary files /dev/null and b/public/img/person2.png differ diff --git a/public/img/person3.png b/public/img/person3.png new file mode 100644 index 000000000..d1d8bc2c3 Binary files /dev/null and b/public/img/person3.png differ diff --git a/public/img/yoga-1.png b/public/img/yoga-1.png new file mode 100644 index 000000000..9ed051aca Binary files /dev/null and b/public/img/yoga-1.png differ diff --git a/public/img/yoga-2.png b/public/img/yoga-2.png new file mode 100644 index 000000000..3559ac423 Binary files /dev/null and b/public/img/yoga-2.png differ diff --git a/public/img/yoga-3.png b/public/img/yoga-3.png new file mode 100644 index 000000000..cb285c409 Binary files /dev/null and b/public/img/yoga-3.png differ diff --git a/public/img/yoga1515x982.jpg b/public/img/yoga1515x982.jpg new file mode 100644 index 000000000..196302621 Binary files /dev/null and b/public/img/yoga1515x982.jpg differ diff --git a/public/index.html b/public/index.html index e6730aa66..fbb920fb9 100644 --- a/public/index.html +++ b/public/index.html @@ -4,6 +4,11 @@ + + + + + - Technigo React App + Santulan Power Yoga Sthlm diff --git a/public/logo/Logo.svg b/public/logo/Logo.svg new file mode 100644 index 000000000..71c582781 --- /dev/null +++ b/public/logo/Logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/logo/LogoBlk.png b/public/logo/LogoBlk.png new file mode 100644 index 000000000..0d4bdd3c9 Binary files /dev/null and b/public/logo/LogoBlk.png differ diff --git a/public/logo/android-chrome-192x192.png b/public/logo/android-chrome-192x192.png new file mode 100644 index 000000000..f79004d8e Binary files /dev/null and b/public/logo/android-chrome-192x192.png differ diff --git a/public/logo/android-chrome-512x512.png b/public/logo/android-chrome-512x512.png new file mode 100644 index 000000000..fc958baa7 Binary files /dev/null and b/public/logo/android-chrome-512x512.png differ diff --git a/public/logo/apple-touch-icon.png b/public/logo/apple-touch-icon.png new file mode 100644 index 000000000..12ae1a4e6 Binary files /dev/null and b/public/logo/apple-touch-icon.png differ diff --git a/public/logo/favicon-16x16.png b/public/logo/favicon-16x16.png new file mode 100644 index 000000000..8260500df Binary files /dev/null and b/public/logo/favicon-16x16.png differ diff --git a/public/logo/favicon-32x32.png b/public/logo/favicon-32x32.png new file mode 100644 index 000000000..289d9e0e5 Binary files /dev/null and b/public/logo/favicon-32x32.png differ diff --git a/public/logo/favicon.ico b/public/logo/favicon.ico new file mode 100644 index 000000000..2755580a3 Binary files /dev/null and b/public/logo/favicon.ico differ diff --git a/public/logo/site.webmanifest b/public/logo/site.webmanifest new file mode 100644 index 000000000..45dc8a206 --- /dev/null +++ b/public/logo/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 781afcf72..8dead7f3a 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,26 @@ -import React from 'react' +import React from 'react'; +import { Header } from 'components/Header/Header'; +import { PowYoga } from './components/Infotainer/PowerYoga'; +import { Classes } from './components/Classes/Classes'; +import { SpyStudio } from './components/Infotainer/Spys'; +import { Adress } from './components/Infotainer/Adress'; +import { SignReview } from './components/SignUp/SignReview'; +import { Foot } from './components/Footer/Footer'; export const App = () => { return ( -
- Find me in src/app.js! -
- ) + <> +
+
+
+
+ + + + + +
+ + + ); } diff --git a/src/components/Buttons.js b/src/components/Buttons.js new file mode 100644 index 000000000..cfa4e297d --- /dev/null +++ b/src/components/Buttons.js @@ -0,0 +1,60 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; + +const StyledSignBtn = styled.button` + width: 15rem; + height: 2.4rem; + font-size: 18px; + font-weight: 600; + color: #000; + background-color: #FF9F0A; + border-radius: 15px; + border: none; + margin-top: 30px; + margin-bottom: 10px; + cursor: pointer; +` + +const StyledClassBtn = styled.button` + width: 15rem; + height: 2.4rem; + font-size: 15px; + font-weight: 500; + color: #fff; + background-color: ${({ clicked }) => { + return clicked ? '#66A1AE' : '#888585'; + }}; + border-radius: 15px; + border: none; + margin: 0 0 8px 0 ; + cursor: pointer; +` + +export const SignUpBtn = () => { + return ( + Sign up for a class + ) +} + +export const ClassBtn = () => { + const [clicked1, setClicked1] = useState(false); + const [clicked2, setClicked2] = useState(false); + const [clicked3, setClicked3] = useState(false); + + const handleClick1 = () => { + setClicked1(!clicked1); + }; + const handleClick2 = () => { + setClicked2(!clicked2); + }; + const handleClick3 = () => { + setClicked3(!clicked3); + }; + return ( + <> + Power Yoga 60 + Power Yoga 75 + Yoga Strong + + ) +} \ No newline at end of file diff --git a/src/components/Classes/ClassCard.js b/src/components/Classes/ClassCard.js new file mode 100644 index 000000000..ff0c989e0 --- /dev/null +++ b/src/components/Classes/ClassCard.js @@ -0,0 +1,62 @@ +import React from 'react'; +import styled from 'styled-components'; +import AwesomeSlider from 'react-awesome-slider'; +import 'react-awesome-slider/dist/styles.css'; + +const YogaDesk = styled.div` + display: flex; + flex-direction: row; + gap: 28px; + justify-content: center; + text-align: center; + margin-bottom: 2rem; + + h3 { + margin-bottom: 8px; + } + + @media (max-width: 895px) { + display: none; + } +` + +export const Slider = () => { + return ( + <> +
+ +
+

Power Yoga 60

+ Power Yoga 60 +
+ +
+

Power Yoga 75

+ Power Yoga 75 +
+ +
+

Yoga Strong

+ Yoga Strong +
+ +
+ +
+

Power Yoga 60

+ Power Yoga 60 +
+ +
+

Power Yoga 75

+ Power Yoga 75 +
+ +
+

Yoga Strong

+ Yoga Strong +
+ + + ); +} \ No newline at end of file diff --git a/src/components/Classes/Classes.js b/src/components/Classes/Classes.js new file mode 100644 index 000000000..d6064c2fa --- /dev/null +++ b/src/components/Classes/Classes.js @@ -0,0 +1,30 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Slider } from './ClassCard' +import './classes.css'; + +const ArrowDown = styled.i` + margin-left: 1rem; + padding-top: 6px; + + i { + color: #FF9F0A; + font-size: 20px; + } +` + +export const Classes = () => { + return ( + <> +
+

Our Classes

+ + + +
+ + + + + ) +} \ No newline at end of file diff --git a/src/components/Classes/classes.css b/src/components/Classes/classes.css new file mode 100644 index 000000000..f786e8ef7 --- /dev/null +++ b/src/components/Classes/classes.css @@ -0,0 +1,66 @@ +.classes-container { + display: flex; + flex-direction: row; + justify-content: center; + margin: 16px 0 16px 0; +} + +.yoga-container{ + height: 45vh; +} + +.yoga-container h3{ + padding-bottom: 8px; + text-align: center; +} + +.yoga-card img { +width: 200px; +height: 200px; +} + +.awssld__content { +background-color: transparent; +} + +.awssld { +height: 100%; +--organic-arrow-thickness: 3px; +--organic-arrow-height: 13px; +--slider-height-percentage: 60%; +--loader-bar-color: #fff; +--loader-bar-height: 1px; +--organic-arrow-color: #000; +} + +.awssld__controls { + visibility: visible; +} + +.awssld__controls__arrow-left { + right: -100%; +} + +.awssld__controls__arrow-right { + left: -100%; +} + +@media (min-width: 670px) { + .yoga-container{ + height: 35vh; + } + + .awssld__controls__arrow-left { + right: -290%; + } + + .awssld__controls__arrow-right { + left: -290%; + } +} + +@media (min-width: 895px) { + .yoga-container{ + display: none; + } +} \ No newline at end of file diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js new file mode 100644 index 000000000..0a7d0d4d5 --- /dev/null +++ b/src/components/Footer/Footer.js @@ -0,0 +1,82 @@ +import React from 'react'; +import styled from 'styled-components'; +import { LogoIcon, LogoText } from '../Logos' + +const Logo = styled.div` + background-color: #2E160E; + color: #fff; + padding-top: 20px; + + img { + height: 48px; + padding-top: 0; + } + + hr { + margin: 20px 50px; + } +` +const NavFoot = styled.div` + display: flex; + flex-direction: row; + justify-content: center; + + ul { + display: flex; + gap: 3rem; + list-style: none; + margin: 20px 0 0 10px; + } + + a { + font-size: 12px; + font-weight: 400; + color: #fff; + text-decoration: none; + cursor: pointer; + } + + a:hover { + opacity: 70%; + } +` + +const IconSome = styled.div` + display: flex; + justify-content: center; + gap: 2rem; + padding-bottom: 20px; + + i { + font-size: 20px; + color: #fff; + cursor: pointer; + } + + i:hover { + opacity: 70%; + } +` + +export const Foot = () => { + return ( + + + + + + +
+ + + + + + + + ) +} \ No newline at end of file diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css new file mode 100644 index 000000000..6199afff3 --- /dev/null +++ b/src/components/Header/Header.css @@ -0,0 +1,54 @@ + +i { + font-size: 15px; + color: #fff; + } + +.intro-text { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 300px 0 0 0; +} + + +.intro-text h1 { + font-family: 'Outfit', sans-serif; + font-size: 38px; + color: #fff; + font-weight: bold; + line-height: 41px; + margin-bottom: 3rem; +} + +.intro-text p { + font-family: 'Outfit', sans-serif; + font-size: 12px; + color: #fff; + font-weight: 500; +} + +.blue-text p { + color:#89D6E8; + font-size: 18px; + max-width: 21rem; +} + +@media (max-width: 895px) { + .blue-text p { + display: none; + } +} + @media (min-width: 895px) { + .intro-text { + align-items: flex-start; + text-align: center; + margin-left: 8rem; +} + + .blue-text p { + display: flex; + } +} + diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js new file mode 100644 index 000000000..8c91bb1a0 --- /dev/null +++ b/src/components/Header/Header.js @@ -0,0 +1,49 @@ +import React from 'react'; +import styled from 'styled-components'; +import { SignUpBtn } from '../Buttons' +import { Menu } from './Navbar' +import { MenuDeskTop } from './MenuDesk' +import { LogoTop, LogoText } from '../Logos' +import './Header.css'; + +const LogoSection = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; + margin: 0 15px; +` +const Navigation = styled.div` + display: flex; + flex-direction: column; + height: 100vh; +` + +export const Header = () => { + return ( + + + + + + + +
+
+

Santulan Power Yoga Stockholm

+

Move your body
+ Rest your mind +

+
+

+ Build strength, agility and endurance + whilst in a calm and serene studio, + tucked away in Kungsholmen, Stockholm. +

+
+ +

Want to know more about us?

+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/Header/MenuDesk.js b/src/components/Header/MenuDesk.js new file mode 100644 index 000000000..4ddb3135a --- /dev/null +++ b/src/components/Header/MenuDesk.js @@ -0,0 +1,43 @@ +import React from 'react'; +import styled from 'styled-components'; + +const MenuDesk = styled.nav` + display: flex; + flex-direction: row; + gap: 5rem; + padding: 0 10px; + + a { + font-size: 18px; + margin-top: 25px; + color: white; + cursor: pointer; + } + + i { + font-size: 20px; + padding-top: 25px; + margin-right: 20px; + cursor: pointer; + } + + @media (max-width: 895px) { + display: none; + } + @media (min-width: 895px) { + display: flex; + } + `; + +export const MenuDeskTop = () => { + return ( + + Our Gym + Workout + About us + Contact + + + + ) +} \ No newline at end of file diff --git a/src/components/Header/Navbar.js b/src/components/Header/Navbar.js new file mode 100644 index 000000000..13ec1a1d9 --- /dev/null +++ b/src/components/Header/Navbar.js @@ -0,0 +1,106 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; + +const HamburgerButton = styled.button` + border: none; + border-radius: 2px; + height: 30px; + width: 30px; + background-color: transparent; + position: absolute; + top: 25px; + right: 20px; + z-index: 999; + span { + height: 3px; + background-color: #FFFFFF; + position: relative; + width: 28px; + margin: auto; + display: block; + border-radius: 4px; + } + span::before, span::after { + content: ""; + height: 3px; + width: 28px; + background-color: #FFFFFF; + position: absolute; + display: block; + border-radius: 4px; + } + span::after { + top: calc(100% - 14px); + } + span::before { + top: 10px; + } + .active { + position:absolute; + top: 50%; + right: 50%; + transform: translate(50%, -50%) rotate(45deg); + } + .active::before, .active::after { + position:absolute; + top: 50%; + right: 50%; + transform: translate(50%, -50%) rotate(270deg); + } + + @media (min-width: 895px) { + display: none; +} +` +const MenuBackground = styled.div` + display: ${({ open }) => { return open ? 'block' : 'none' }}; + width: 66vw; + position: absolute; + top: 0px; + right: 0; + background-color: #000; + opacity: 85%; + height: 100vh; + z-index: 1; + + @media (min-width: 895px) { + display: none; +} +` +const StyledNav = styled.nav` + display: flex; + margin: 90px auto auto 90px; + flex-direction: column; + color: white; + + a { + padding: 18px; + } + @media (min-width: 895px) { + width: auto; + padding: 0 180px; + flex-direction: row; + gap: 5rem; + height: auto; + margin: 0; + }`; + +export const Menu = () => { + const [open, toggleOpen] = useState(false); + + return ( + <> + toggleOpen(!open)}> + + + + + Our Gym + Workout + About us + Contact + + + + ) +} \ No newline at end of file diff --git a/src/components/Infotainer/Adress.js b/src/components/Infotainer/Adress.js new file mode 100644 index 000000000..50e2746a9 --- /dev/null +++ b/src/components/Infotainer/Adress.js @@ -0,0 +1,57 @@ +import React from 'react'; +import styled from 'styled-components'; + +const AdressImg = styled.div` + display: flex; + width: 95vw; + max-width: 424px; + height: 182px; + background-color: #66A1AE; + margin: 8px 8px; + + img { + height: 182px; + width: 175px; + } + + p { + font-size: 10px; + font-weight: 600; + line-height: 130%; + padding: 0; + margin: 10px; + align-self: center; + color: #fff; + } + + @media (min-width: 767px) { + height: 226px; + width: 760px; + margin: 18px 0; + + img { + height: 226px; + width: 214px; + } + + p { + font-size: 14px; + margin: 10px; + } + + } +`; + +export const Adress = () => { + return ( +
+ + Location +

Find us at:
+ Fridhemsplansgatan No.10
+ Stockholm, Sweden +

+ +
+ ) +} \ No newline at end of file diff --git a/src/components/Infotainer/PowerYoga.js b/src/components/Infotainer/PowerYoga.js new file mode 100644 index 000000000..a2ac1b2b0 --- /dev/null +++ b/src/components/Infotainer/PowerYoga.js @@ -0,0 +1,46 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Pyoga = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 200px; + background-color: #2E160E; + + + p { + font-size: 0.8rem; + font-weight: 400; + line-height: 130%; + padding: 10px 32px; + align-self: center; + text-align: center; + color: #fff; + max-width: 420px; + } + @media (max-width: 454px) { + display: none; + } + @media (min-width: 455px) { + display: flex; + } +`; + +export const PowYoga = () => { + return ( +
+ +

What is Power Yoga? +

+

Power yoga is a fast-paced style of yoga that's + focused on building strength and endurance. + Whilst practising this form of yoga, you will + feel the tension and toxins leaving your body + and your posture and back pain getting better. +

+ +
+ ) +} \ No newline at end of file diff --git a/src/components/Infotainer/Spys.js b/src/components/Infotainer/Spys.js new file mode 100644 index 000000000..2758e1ae9 --- /dev/null +++ b/src/components/Infotainer/Spys.js @@ -0,0 +1,53 @@ +import React from 'react'; +import styled from 'styled-components'; + +const Spys = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 45vh; + background-color: #2E160E; + margin-top: 15px; + + + p { + font-size: 0.8rem; + font-weight: 400; + line-height: 130%; + padding: 10px 32px; + align-self: center; + text-align: center; + color: #fff; + max-width: 420px; + } + @media (max-width: 454px) { + display: none; + } + @media (min-width: 455px) { + display: flex; + height: 55vh; + } +`; + +export const SpyStudio = () => { + return ( +
+ +

Santulan Power Yoga Studio

+

Put simply, Yoga transformed our lives and we + want to share that magic with you. We created + Santulan to empower your journey to personal + growth and well-being. Our classes weave + ancient yogic philosophy into 21st century life, + and everyons's welcome, from absolute beginners + to advanced practitioners. We passionately + believe that Power Yoga is for everyone, + and no matter your age or flexibility, + our expert teachers will ensure you leave + each class stronger in mind and body. +

+ +
+ ) +} \ No newline at end of file diff --git a/src/components/Logos.js b/src/components/Logos.js new file mode 100644 index 000000000..577856948 --- /dev/null +++ b/src/components/Logos.js @@ -0,0 +1,102 @@ + +import React from 'react'; +import styled from 'styled-components'; + +// Logo style for header in mobile+tablet +const Logo = styled.div` + color: #fff; + display: flex; + flex-direction: row; + justify-content: center; + margin-bottom: 10px; + + img { + height: 48px; + padding-top: 13px; + } + @media (max-width: 894px) { + display: flex; + } + @media (min-width: 895px) { + display: none; + } +` +// Logostyle for footer in tablet +const LogoTab = styled.div` + color: #fff; + display: flex; + flex-direction: row; + justify-content: center; + + img { + height: 48px; + padding: 0; + } + @media (max-width: 454px) { + display: none; + } + @media (min-width: 455px) { + display: flex; + } + @media (min-width: 895px) { + display: none; + } +` +// Logostyle for footer and header in desktop-mode +const LogoDesk = styled.div` + color: #fff; + display: flex; + justify-content: center; + justify-items: center; + margin-bottom: 10px; + padding-top: 20px; + + h5 { + margin-left: 10px; + width: 100px; + } + + img { + margin-left: 5px; + padding: 0; + } + @media (max-width: 454px) { + display: none; + } + @media (max-width: 895px) { + display: none; + } + @media (min-width: 895px) { + display: flex; + } +` +// Logo for header in mobile+tablet +export const LogoTop = () => { + return ( + + Logo + + ) +} + +// Logo footer in tablet +export const LogoIcon = () => { + return ( + + Logo + + ) +} + +// Logo for footer and header in desktop-mode +export const LogoText = () => { + return ( + + Logo +
Santulan
+ Power Yoga
+ Stockholm +
+ + ) +} \ No newline at end of file diff --git a/src/components/SignUp/Review.js b/src/components/SignUp/Review.js new file mode 100644 index 000000000..83047c197 --- /dev/null +++ b/src/components/SignUp/Review.js @@ -0,0 +1,52 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Slider } from './ReviewCard' + +const TheDiv = styled.div` + background-color: #66A1AE; + width: 100%; + + @media (min-width: 895px) { + max-width: 50%; + display: flex; + justify-content: center; + align-items: center; + } +` + +const ComeJoin = styled.div` + display: flex; + flex-direction: column; + align-items: center; + background-color: #66A1AE; + + h3 { + font-size: 30px; + font-weight: 700; + padding: 20px 20px; + } + + p { + font-size: 16px; + font-weight: 500; + line-height: 130%; + align-self: center; + text-align: center; + color: #fff; + max-width: 310px; + } +`; + +export const ReviewTemp = () => { + return ( + + +

Come join us!

+

Discover all the benefits of Power Yoga and + Become a part of our amazing community! +

+ + + + ) +} \ No newline at end of file diff --git a/src/components/SignUp/ReviewCard.js b/src/components/SignUp/ReviewCard.js new file mode 100644 index 000000000..b715b4786 --- /dev/null +++ b/src/components/SignUp/ReviewCard.js @@ -0,0 +1,42 @@ +import React from 'react'; +import AwesomeSlider from 'react-awesome-slider'; +import 'react-awesome-slider/dist/styles.css'; +import './review.css'; + +export const Slider = () => { + return ( +
+ +
+
Anyone who thinks of joining a class, + do it! Its such a great mix of physical + exercise and a calm break from the everyday life. +
+ Profilepicture +

John B.

+
+ +
+
Just WOW. I have never tried something like + this before, but this is definetally my new thing! + Never going back to a normal gym. +
+ Profilepicture +

Anna M. +

+
+ +
+
+ 10/10 recommend! Everyone should go to the + Santulan studio and try out power yoga at + least once in their lives. +
+ Profilepicture +

Moa F. +

+
+ +
+ ); +} \ No newline at end of file diff --git a/src/components/SignUp/SignReview.js b/src/components/SignUp/SignReview.js new file mode 100644 index 000000000..96f004c66 --- /dev/null +++ b/src/components/SignUp/SignReview.js @@ -0,0 +1,23 @@ +import React from 'react'; +import styled from 'styled-components'; +import { ReviewTemp } from './Review'; +import { SignUp } from './SignUp'; + +const SignReviewDesk = styled.div` + display: flex; + flex-direction: column; + + @media (min-width: 895px) { + display: flex; + flex-direction: row; + } +` + +export const SignReview = () => { + return ( + + + + + ) +} \ No newline at end of file diff --git a/src/components/SignUp/SignUp.js b/src/components/SignUp/SignUp.js new file mode 100644 index 000000000..b183c2be3 --- /dev/null +++ b/src/components/SignUp/SignUp.js @@ -0,0 +1,85 @@ +import React from 'react'; +import styled from 'styled-components'; +import { ClassBtn, SignUpBtn } from '../Buttons' + +const TheDiv = styled.div` + background-color: #fff; + width: 100%; + + @media (min-width: 895px) { + max-width: 50%; + } +` + +const SignUpFun = styled.div` + display: flex; + justify-content: center; + align-items: center; + background-color: #66A1AE; +` + +const Inputs = styled.div` + display: flex; + flex-direction: column; + align-items: center; + background-color: #fff; + width: 100%; + margin: 5px; + padding: 10px 30px; + + h2 { + padding: 20px; + } + + h4 { + font-weight: 600; + font-size: 20px; + padding-top: 20px; + padding-bottom: 8px; + } + + input { + border-radius: 15px; + border: solid 1px #888585; + height: 18px; + width: 230px; + margin: 0 0 8px 0 ; + padding: 12px; + font-size: 16px; + font-family: 'Outfit', sans-serif; + } +`; + +export const SignUp = () => { + return ( + + + +

Sign up for a class!

+

Enter personal details*

+ + + + + +

Choose a class*

+ + + + + + ) +} \ No newline at end of file diff --git a/src/components/SignUp/review.css b/src/components/SignUp/review.css new file mode 100644 index 000000000..6bd43e5d6 --- /dev/null +++ b/src/components/SignUp/review.css @@ -0,0 +1,54 @@ + +.review-container{ + width: 310px; + padding-top: 20px; + margin-bottom: 50px; +} + +.awssld__content { + background-color: transparent; +} + +.awssld__bullets button { + height: 4px; + width: 4px; + background: lightgray; +} + +.awssld__bullets .awssld__bullets--active { + background: white; +} + +.awssld__bullets { + bottom: -25px; +} + +.review-card { + display: flex; + flex-wrap: wrap; + align-items: center; + height: 170px; + max-width: 310px; + background-color: #4796A8; + padding: 10px 30px; + border-radius: 15px; +} + + img { + height: 50px; + padding: 0; + } + + h5 { + font-size: 12px; + font-weight: 600; + color: #fff; + } + + p { + font-size: 12px; + font-weight: 600; + align-self: center; + padding: 0 10px; + color: #fff; + } diff --git a/src/index.css b/src/index.css index 4a1df4db7..492ba8e37 100644 --- a/src/index.css +++ b/src/index.css @@ -1,8 +1,12 @@ + @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap'); +*{ + margin: 0; + padding: 0; +} + body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", - "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; + font-family: 'Outfit', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -11,3 +15,38 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; } + +.start-cont { + background-image: url('/public/img/yoga1515x982.jpg'); + background-size: cover; + background-position: center; + position: relative; + height: 800px; + margin: 0; +} + +h4 { + font-size: 24px; + font-weight: 500; + color: #FF9F0A; +} + + +h3 { + font-size: 24px; + font-weight: 700; + color: #000; +} + +h2 { + text-align: center; + font-size: 26px; + font-weight: 700; + color: #000; +} + +.adress-container{ + display: flex; + flex-direction: column; + align-items: center; +}