diff --git a/README.md b/README.md index 9d9e9796d..9b2af505c 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,15 @@ # Design Handoff +![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white) -Replace this readme with your own information about your project. +A collaboration with Technigo's UX/UI Design bootcamp students. Our assigment was to turn a landing page for a fitness club (in my group's case, a power yoga studio) made in Figma into code, using React. -Start by briefly describing the assignment in a sentence or two. Keep it short and to the point. +### The problem -## The problem +This week's new topic was Styled Components. I wanted to really get into the logic of the library and understand why and when it can be useful. I styled the entire landing page with Styled Components only, and can say that I really enjoyed the process (though a bit complex at first) and will definitely keep using this way of styling React. -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? +### View it live -## View it live +https://santulanpoweryoga-antonia.netlify.app -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. + +designhandoff-screenshot diff --git a/package-lock.json b/package-lock.json index 79e93a77f..83a035a6e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,8 +15,13 @@ "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", + "normalize.css": "^8.0.1", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-awesome-slider": "^4.1.0", + "react-dom": "^18.2.0", + "react-slick": "^0.29.0", + "slick-carousel": "^1.8.1", + "styled-components": "^5.3.9" }, "devDependencies": { "eslint-plugin-flowtype": "^8.0.3", @@ -130,7 +135,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 +2197,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 +4957,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 +5314,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", @@ -5391,6 +5446,11 @@ "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==", "dev": true }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz", @@ -5744,6 +5804,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 +6020,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", @@ -6594,6 +6672,11 @@ "node": ">=10.13.0" } }, + "node_modules/enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==" + }, "node_modules/entities": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", @@ -8506,6 +8589,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", @@ -11431,6 +11522,12 @@ "url": "https://github.com/chalk/supports-color?sponsor=1" } }, + "node_modules/jquery": { + "version": "3.6.4", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.4.tgz", + "integrity": "sha512-v28EW9DWDFpzcD9O5iyJXg3R3+q+mET5JhnjJzQUZMHOv67bpSIHq81GEYpPNZHG+XXHsfSme3nxp/hndKEcsQ==", + "peer": true + }, "node_modules/js-sdsl": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz", @@ -11531,6 +11628,14 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==" }, + "node_modules/json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "dependencies": { + "string-convert": "^0.2.0" + } + }, "node_modules/json5": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", @@ -11691,14 +11796,12 @@ "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", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", - "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", - "dev": true + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, "node_modules/lodash.memoize": { "version": "4.1.2", @@ -12114,6 +12217,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, "node_modules/npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -13938,8 +14046,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 +14337,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", @@ -14476,6 +14591,22 @@ "node": ">=10" } }, + "node_modules/react-slick": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz", + "integrity": "sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==", + "dependencies": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -14690,6 +14821,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "node_modules/resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -15210,6 +15346,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", @@ -15268,6 +15409,14 @@ "node": ">=8" } }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -15457,6 +15606,11 @@ } ] }, + "node_modules/string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==" + }, "node_modules/string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", @@ -15619,6 +15773,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 +16658,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 +17659,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 +19009,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 +21084,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 +21369,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", @@ -21231,6 +21464,11 @@ "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==", "dev": true }, + "classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "clean-css": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz", @@ -21504,6 +21742,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 +21877,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", @@ -22119,6 +22372,11 @@ "tapable": "^2.2.0" } }, + "enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==" + }, "entities": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", @@ -23505,6 +23763,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", @@ -25667,6 +25933,12 @@ } } }, + "jquery": { + "version": "3.6.4", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.4.tgz", + "integrity": "sha512-v28EW9DWDFpzcD9O5iyJXg3R3+q+mET5JhnjJzQUZMHOv67bpSIHq81GEYpPNZHG+XXHsfSme3nxp/hndKEcsQ==", + "peer": true + }, "js-sdsl": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz", @@ -25747,6 +26019,14 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==" }, + "json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "requires": { + "string-convert": "^0.2.0" + } + }, "json5": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.1.tgz", @@ -25863,14 +26143,12 @@ "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", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", - "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", - "dev": true + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" }, "lodash.memoize": { "version": "4.1.2", @@ -26189,6 +26467,11 @@ "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==", "dev": true }, + "normalize.css": { + "version": "8.0.1", + "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz", + "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==" + }, "npm-run-path": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", @@ -27340,8 +27623,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 +27842,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", @@ -27748,6 +28038,18 @@ } } }, + "react-slick": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz", + "integrity": "sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==", + "requires": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -27921,6 +28223,11 @@ "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", "dev": true }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", @@ -28303,6 +28610,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", @@ -28349,6 +28661,12 @@ "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==" }, + "slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "requires": {} + }, "sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -28498,6 +28816,11 @@ } } }, + "string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==" + }, "string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", @@ -28617,6 +28940,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 +29610,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..bd39cc171 100644 --- a/package.json +++ b/package.json @@ -10,8 +10,13 @@ "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-react": "^7.30.1", "eslint-plugin-react-hooks": "^4.6.0", + "normalize.css": "^8.0.1", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-awesome-slider": "^4.1.0", + "react-dom": "^18.2.0", + "react-slick": "^0.29.0", + "slick-carousel": "^1.8.1", + "styled-components": "^5.3.9" }, "scripts": { "start": "react-scripts start", diff --git a/public/designhandoff-screenshot.png b/public/designhandoff-screenshot.png new file mode 100644 index 000000000..6eb01ec7f Binary files /dev/null and b/public/designhandoff-screenshot.png differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 000000000..88a0b52dc Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html index e6730aa66..763e759be 100644 --- a/public/index.html +++ b/public/index.html @@ -13,7 +13,21 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - Technigo React App + Santulan Power Yoga + + + + + + + + + + + + + diff --git a/src/App.js b/src/App.js index 781afcf72..140ed0cc6 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,22 @@ -import React from 'react' +import React from 'react'; +import { Hero } from './Sections/Hero'; +import { PowerYogaInfo } from './Sections/PowerYogaInfo'; +import { Classes } from './Sections/Classes'; +import { Address } from './Sections/Address'; +import { SantulanInfo } from './Sections/SantulanInfo'; +import { ReviewsSignUp } from './Sections/ReviewsSignUp'; +import { Footer } from './Sections/Footer'; export const App = () => { return (
- Find me in src/app.js! + + + + +
+ +
) } diff --git a/src/Assets/Icons/DesktopFacebook.svg b/src/Assets/Icons/DesktopFacebook.svg new file mode 100644 index 000000000..95d46bbb8 --- /dev/null +++ b/src/Assets/Icons/DesktopFacebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/Icons/DesktopInstagram.svg b/src/Assets/Icons/DesktopInstagram.svg new file mode 100644 index 000000000..db9ce4349 --- /dev/null +++ b/src/Assets/Icons/DesktopInstagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/Icons/DesktopLinkedIn.svg b/src/Assets/Icons/DesktopLinkedIn.svg new file mode 100644 index 000000000..960a74ebe --- /dev/null +++ b/src/Assets/Icons/DesktopLinkedIn.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/Icons/DesktopTwitter.svg b/src/Assets/Icons/DesktopTwitter.svg new file mode 100644 index 000000000..31446dc1d --- /dev/null +++ b/src/Assets/Icons/DesktopTwitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/Icons/DownArrow.svg b/src/Assets/Icons/DownArrow.svg new file mode 100644 index 000000000..12b342389 --- /dev/null +++ b/src/Assets/Icons/DownArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/Icons/Hamburgermenu.svg b/src/Assets/Icons/Hamburgermenu.svg new file mode 100644 index 000000000..2712cea1e --- /dev/null +++ b/src/Assets/Icons/Hamburgermenu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/Assets/Icons/Logo.svg b/src/Assets/Icons/Logo.svg new file mode 100644 index 000000000..71c582781 --- /dev/null +++ b/src/Assets/Icons/Logo.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/Assets/Icons/Logoandname.svg b/src/Assets/Icons/Logoandname.svg new file mode 100644 index 000000000..32050481a --- /dev/null +++ b/src/Assets/Icons/Logoandname.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/Assets/Icons/RightArrow.svg b/src/Assets/Icons/RightArrow.svg new file mode 100644 index 000000000..2da51903b --- /dev/null +++ b/src/Assets/Icons/RightArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/Icons/Search.svg b/src/Assets/Icons/Search.svg new file mode 100644 index 000000000..2ac3c2c90 --- /dev/null +++ b/src/Assets/Icons/Search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/Assets/Icons/Tablet/Facebook.svg b/src/Assets/Icons/Tablet/Facebook.svg new file mode 100644 index 000000000..31c16db75 --- /dev/null +++ b/src/Assets/Icons/Tablet/Facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/Icons/Tablet/Instagram.svg b/src/Assets/Icons/Tablet/Instagram.svg new file mode 100644 index 000000000..ae452306d --- /dev/null +++ b/src/Assets/Icons/Tablet/Instagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/Icons/Tablet/LinkedIn.svg b/src/Assets/Icons/Tablet/LinkedIn.svg new file mode 100644 index 000000000..07171c189 --- /dev/null +++ b/src/Assets/Icons/Tablet/LinkedIn.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/Icons/Tablet/Twitter.svg b/src/Assets/Icons/Tablet/Twitter.svg new file mode 100644 index 000000000..365e32f49 --- /dev/null +++ b/src/Assets/Icons/Tablet/Twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/Assets/Photos/HeroBackground.png b/src/Assets/Photos/HeroBackground.png new file mode 100644 index 000000000..9cc931dd9 Binary files /dev/null and b/src/Assets/Photos/HeroBackground.png differ diff --git a/src/Assets/Photos/addressphoto.jpg b/src/Assets/Photos/addressphoto.jpg new file mode 100644 index 000000000..eebe5de17 Binary files /dev/null and b/src/Assets/Photos/addressphoto.jpg differ diff --git a/src/Assets/Photos/poweryoga60.png b/src/Assets/Photos/poweryoga60.png new file mode 100644 index 000000000..de697569f Binary files /dev/null and b/src/Assets/Photos/poweryoga60.png differ diff --git a/src/Assets/Photos/poweryoga75.png b/src/Assets/Photos/poweryoga75.png new file mode 100644 index 000000000..1b420b105 Binary files /dev/null and b/src/Assets/Photos/poweryoga75.png differ diff --git a/src/Assets/Photos/reviewprofilepic1.png b/src/Assets/Photos/reviewprofilepic1.png new file mode 100644 index 000000000..61706a050 Binary files /dev/null and b/src/Assets/Photos/reviewprofilepic1.png differ diff --git a/src/Assets/Photos/reviewprofilepic2.png b/src/Assets/Photos/reviewprofilepic2.png new file mode 100644 index 000000000..c6a6b6d61 Binary files /dev/null and b/src/Assets/Photos/reviewprofilepic2.png differ diff --git a/src/Assets/Photos/reviewprofilepic3.png b/src/Assets/Photos/reviewprofilepic3.png new file mode 100644 index 000000000..6caf70a9f Binary files /dev/null and b/src/Assets/Photos/reviewprofilepic3.png differ diff --git a/src/Assets/Photos/yogastrong.png b/src/Assets/Photos/yogastrong.png new file mode 100644 index 000000000..278f2754e Binary files /dev/null and b/src/Assets/Photos/yogastrong.png differ diff --git a/src/Components/BrownSection.js b/src/Components/BrownSection.js new file mode 100644 index 000000000..ee911e4c4 --- /dev/null +++ b/src/Components/BrownSection.js @@ -0,0 +1,12 @@ +import styled from 'styled-components'; + +export const BrownSection = styled.section` + background: linear-gradient(137deg, rgba(255,230,235,1) 35%, rgba(233,229,255,1) 100%); + margin: auto; + padding-top: 120px; + padding-bottom: 120px; + text-align: center; + +@media (max-width: 687px) { + display: none; +}` \ No newline at end of file diff --git a/src/Components/CTAButton.js b/src/Components/CTAButton.js new file mode 100644 index 000000000..e95be02fe --- /dev/null +++ b/src/Components/CTAButton.js @@ -0,0 +1,54 @@ +import styled from 'styled-components'; + +export const CTAButton = styled.button` +font-family: Outfit; +text-align: center; +justify-content: center; +font-size: 20px; +font-weight: 600; +background: linear-gradient(132deg, rgba(224,135,184,1) 35%, rgba(164,135,232,1) 100%); +color: white; +padding: 14px 65px; +border: none; +border-radius: 50px; +margin-bottom: 8px; +cursor: pointer; +box-shadow: 0px 13px 13px -4px rgba(10, 6, 36, 0.3); +transition: 0.2s ease-in-out; + +:hover { + transition: transform 0.2s ease-in-out; + transform: scale(1.03); +} + +@media (min-width: 1024px) { + padding: 20px 80px; +} +` + +export const CTAButtonSUF = styled.button` +font-family: Outfit; +text-align: center; +justify-content: center; +font-size: 24px; +font-weight: 600; +background: linear-gradient(132deg, rgba(224,135,184,1) 35%, rgba(164,135,232,1) 100%); +color: white; +padding: 11px 65px; +border: none; +border-radius: 20px; +box-shadow: 0px 13px 13px -4px rgba(10, 6, 36, 0.3); +margin-bottom: 8px; +cursor: pointer; +margin-top: 45px; + +:hover { + transition: transform 0.2s ease-in-out; + transform: scale(1.03); +} + +@media (max-width: 400px) { + width: 290px; + font-size: 20px; + } +` \ No newline at end of file diff --git a/src/Components/ClassButton.js b/src/Components/ClassButton.js new file mode 100644 index 000000000..954b356e4 --- /dev/null +++ b/src/Components/ClassButton.js @@ -0,0 +1,23 @@ +import styled from 'styled-components'; + +export const ClassButton = styled.button` +font-family: Outfit; +font-size: 16px; +font-weight: 500; +background-color: #c0b3d6; +color: white; +height: 48px; +width: 365px; +border: none; +border-radius: 20px; +margin-top: 10px; +cursor: pointer; + +:focus { + background-color: #8c78af; +} + +@media (max-width: 400px) { + width: 290px; + } +` \ No newline at end of file diff --git a/src/Components/ClassesSlider.js b/src/Components/ClassesSlider.js new file mode 100644 index 000000000..912d17807 --- /dev/null +++ b/src/Components/ClassesSlider.js @@ -0,0 +1,70 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import { SmallBlackTitle } from './Fonts'; +import PowerYoga60 from '../Assets/Photos/poweryoga60.png'; +import PowerYoga75 from '../Assets/Photos/poweryoga75.png'; +import YogaStrong from '../Assets/Photos/yogastrong.png'; +import RightArrow from '../Assets/Icons/RightArrow.svg'; + +const ClassesInfo = [ + { title: 'Power Yoga 60', image: PowerYoga60 }, + { title: 'Power Yoga 75', image: PowerYoga75 }, + { title: 'Yoga Strong', image: YogaStrong } +] + +const SliderContainer = styled.div` +position: relative; +padding-top: 16px; +display: flex; +align-items: center; +justify-content: center; + +@media (min-width: 1023px) { + display: none; +}` + +const ClassesInfoContainer = styled.div` +display: flex; +flex-direction: column; +align-items: center; +justify-content: center; +margin: auto;` + +const ClassesImage = styled.img` +height: 200px; +width: 200px; +padding-top: 10px;` + +const Arrow = styled.button` +border: none; +background-color: transparent; +position: absolute; +right: -20%; +transform: translateY(50%); +display: flex; +justify-content: center; +align-items: center; +cursor: pointer; + +:hover { + opacity: 60%; +} +` + +export const ClassesSlider = () => { + const [currentIndex, setCurrentIndex] = useState(0); + + const handleNextClick = () => { + setCurrentIndex(currentIndex === ClassesInfo.length - 1 ? 0 : currentIndex + 1); + }; + + return ( + + + {ClassesInfo[currentIndex].title} + + + next class button + + ) +}; \ No newline at end of file diff --git a/src/Components/DesktopClasses.js b/src/Components/DesktopClasses.js new file mode 100644 index 000000000..0dd5c70b7 --- /dev/null +++ b/src/Components/DesktopClasses.js @@ -0,0 +1,50 @@ +/* eslint-disable import/no-duplicates */ +import React from 'react'; +import styled from 'styled-components'; +import { SmallBlackTitle } from './Fonts'; +import PowerYoga60 from '../Assets/Photos/poweryoga60.png'; +import PowerYoga75 from '../Assets/Photos/poweryoga75.png'; +import YogaStrong from '../Assets/Photos/yogastrong.png'; + +export const DesktopClasses = () => { + const ClassesContainer = styled.div` + position: relative; + padding-top: 16px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 30px; + + @media (max-width: 1023px) { + display: none; +}` + + const ClassWrapper = styled.div` +display: flex; +flex-direction: column;` + + const ClassesImage = styled.img` + height: 200px; + width: 200px; + padding-top: 10px;` + + return ( + + + PowerYoga 60 + + + + PowerYoga 75 + + + + Yoga Strong + + + + ) +}; + +export default DesktopClasses; diff --git a/src/Components/Fonts.js b/src/Components/Fonts.js new file mode 100644 index 000000000..a6dd2f51e --- /dev/null +++ b/src/Components/Fonts.js @@ -0,0 +1,107 @@ +import styled, { css } from 'styled-components'; + +export const HeaderTitle = styled.h1` +font-size: 48px; +text-align: center; +font-style: bold; +color: white; +padding-bottom: 45px; + +@media (min-width: 1024px) { + font-size: 56px; + font-weight: bold; + padding-bottom: 0px; +} +` + +export const BigBlackTitle = styled.h1` +font-size: 32px; +color: #312661; +padding-bottom: 45px; + +@media (min-width: 1024px) { + font-size: 50px; +} +` + +export const PurpleTitle = styled.h2` +font-size: 24px; +font-weight: 500; +line-height: 27px; +padding-bottom: 15px; +color: #312661; + +@media (min-width: 1024px) { + font-size: 32px; + line-height: 36px; +} +` + +export const SmallBlackTitle = styled.h3` +font-size: 24px; +font-weight: bold; +color: #312661; +` + +export const BlueParagraph = styled.p` +font-size: 24px; +color: #e6dcff; +width: 522px; +height: 80px; +display: flex; +text-align: center; +display: none; +padding-bottom: 15px; + +@media (min-width: 1024px) { + display: inline-block; +} +` + +export const Paragraph = styled.p` +font-size: 16px; +color: white; +font-weight: 400; +line-height: 20px; + +@media (min-width: 1024px) { + font-size: 20px; + line-height: 28px; +} + +${(props) => props.purple && css` + color: #312661; +`} +` + +export const NavLink = styled.p` +font-size: 16px; +color: white; +font-weight: 400; +line-height: 20px; +cursor: pointer; +` + +export const ReviewParagraph = styled.p` +font-size: 16px; +color: white; +font-weight: 600; +line-height: 26px; +` + +export const ReviewName = styled.p` +font-size: 16px; +color: white; +font-weight: 600; +line-height: 26px; +display: flex; +align-items: center; +` + +export const NavLinks = styled.p` +font-size: 16px; +color: white; + +@media (min-width: 1024px) { + font-size: 24px; +}` \ No newline at end of file diff --git a/src/Components/HeroText.js b/src/Components/HeroText.js new file mode 100644 index 000000000..5a4d80400 --- /dev/null +++ b/src/Components/HeroText.js @@ -0,0 +1,41 @@ +import styled from 'styled-components'; +import React from 'react'; +import { HeaderTitle, BlueParagraph, Paragraph } from './Fonts' +import { CTAButton } from './CTAButton' + +export const HeroText = () => { + 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. + + Sign up for a class + Want to know more about us? + + ) +} + +const HeroTextDiv = styled.div` +display: flex; +gap: 15px; +flex-direction: column; +margin-top: 350px; +width: 522px; +text-align: center; +align-items: center; + +@media (min-width: 1024px) { + margin-top: 180px; + margin-left: 76px; +} +` + +const NameTextDiv = styled.div` +margin-bottom: -15px; + +@media (min-width: 1024px) { +display: none; +} +` \ No newline at end of file diff --git a/src/Components/LogoIcon.js b/src/Components/LogoIcon.js new file mode 100644 index 000000000..1c3038eca --- /dev/null +++ b/src/Components/LogoIcon.js @@ -0,0 +1,31 @@ +import React from 'react'; +import styled from 'styled-components'; +import Logo from '../Assets/Icons/Logo.svg'; +import Logoandname from '../Assets/Icons/Logoandname.svg'; + +const DesktopDiv = styled.div` +@media (max-width: 687px) { + display: none; +} + +img { + padding-left: 20px; +}` + +const MobileDiv = styled.div` +@media (min-width: 687px) { + display: none; +}` + +export const LogoIcon = () => { + return ( +
+ + Santulan Yoga Logo + + + Santulan Yoga Logo and name + +
+ ) +} \ No newline at end of file diff --git a/src/Components/NavLinks.js b/src/Components/NavLinks.js new file mode 100644 index 000000000..d1ea96d63 --- /dev/null +++ b/src/Components/NavLinks.js @@ -0,0 +1,26 @@ +import React from 'react'; +import styled from 'styled-components'; +import { NavLink } from './Fonts'; + +export const NavLinks = () => { + return ( + + ) +} + +const Nav = styled.div` +display: flex; +align-items: center; +justify-content: space-evenly; +width: 100%; +gap: 20px; + +@media (max-width: 1023px) { + display: none; +} +` \ No newline at end of file diff --git a/src/Components/NavbarIcons.js b/src/Components/NavbarIcons.js new file mode 100644 index 000000000..bd21b1c1d --- /dev/null +++ b/src/Components/NavbarIcons.js @@ -0,0 +1,34 @@ +import React from 'react'; +import styled from 'styled-components'; +import Search from '../Assets/Icons/Search.svg'; +import HamburgerMenuIcon from '../Assets/Icons/Hamburgermenu.svg'; + +export const NavbarIcons = () => { + return ( + + Search Icon + + HamburgerMenu Icon + + + ) +} + +const NBI = styled.div` +display: flex; +gap: 34px; +padding-right: 20px; +justify-content: flex-end; + +img { + cursor: pointer; +} +` + +const HamIcon = styled.div` +display: flex; + +@media (min-width: 1023px) { + display: none; +} +` \ No newline at end of file diff --git a/src/Sections/Address.js b/src/Sections/Address.js new file mode 100644 index 000000000..5a282c366 --- /dev/null +++ b/src/Sections/Address.js @@ -0,0 +1,55 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Paragraph } from '../Components/Fonts'; +import AddressPhoto from '../Assets/Photos/addressphoto.jpg'; + +const AddressDiv = styled.div` +display: flex; +flex-direction: row; +justify-content: center; +align-items: center; +margin-top: 30px; +margin-left: 16px; +margin-right: 16px; +margin-bottom: 30px; + +@media (min-width: 1024px) { + margin: 80px; +}` + +const AddressTextDiv = styled.div` +width: 259px; +height: 192px; +background: #8c78af; +display: flex; +align-items: center; +padding-left: 7px; + +@media (min-width: 1024px) { + padding-left: 24px; + width: 365px; + height: 326px; +}` + +const AddressImg = styled.img` +height: 192px; +width: 185px; + +@media (min-width: 1024px) { + width: 314px; + height: 326px; +}` + +export const Address = () => { + return ( + + + + Find us at:
+ Fridhemsplansgatan No. 10
+ Stockholm, Sweden + + + + ) +} \ No newline at end of file diff --git a/src/Sections/Classes.js b/src/Sections/Classes.js new file mode 100644 index 000000000..4344b43be --- /dev/null +++ b/src/Sections/Classes.js @@ -0,0 +1,26 @@ +import React from 'react'; +import styled from 'styled-components'; +import 'react-awesome-slider/dist/styles.css'; +import { PurpleTitle } from '../Components/Fonts'; +import { ClassesSlider } from '../Components/ClassesSlider'; +import { DesktopClasses } from '../Components/DesktopClasses'; +import DownArrow from '../Assets/Icons/DownArrow.svg'; + +const ClassesDiv = styled.div` +height: 450px; +display: flex; +flex-direction: column; +text-align: center; +justify-content: center; +align-items: center; +` + +export const Classes = () => { + return ( + + Our Classes  down arrow icon + + + + ) +} \ No newline at end of file diff --git a/src/Sections/Footer.js b/src/Sections/Footer.js new file mode 100644 index 000000000..8b0b6fc77 --- /dev/null +++ b/src/Sections/Footer.js @@ -0,0 +1,137 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Paragraph } from '../Components/Fonts'; +import Instagram from '../Assets/Icons/Tablet/Instagram.svg'; +import Facebook from '../Assets/Icons/Tablet/Facebook.svg'; +import LinkedIn from '../Assets/Icons/Tablet/LinkedIn.svg'; +import Twitter from '../Assets/Icons/Tablet/Twitter.svg'; +import DesktopInstagram from '../Assets/Icons/DesktopInstagram.svg'; +import DesktopFacebook from '../Assets/Icons/DesktopFacebook.svg'; +import DesktopLinkedIn from '../Assets/Icons/DesktopLinkedIn.svg'; +import DesktopTwitter from '../Assets/Icons/DesktopTwitter.svg'; +import Logo from '../Assets/Icons/Logo.svg'; +import Logoandname from '../Assets/Icons/Logoandname.svg'; + +const FooterSection = styled.section` +background: linear-gradient(137deg, rgba(255,230,235,1) 35%, rgba(233,229,255,1) 100%); +margin: auto; +height: 180px; +text-align: center; +position: relative; + +@media (min-width: 688px) { + height: 240px; +} + +@media (min-width: 1024px) { + height: 320px; +} +` + +const LogoDiv = styled.div` +padding-top: 24px; + +@media (max-width: 687px) { + display: none; +} + +@media (min-width: 1024px) { + display: none; +} +` + +const DesktopLogoDiv = styled.div` +padding-top: 24px; + +@media (max-width: 1023px) { + display: none; +} +` + +const FooterNav = styled.div` +padding-top: 55px; +display: flex; +justify-content: space-between; +padding-left: 31px; +padding-right: 31px; + +@media (min-width: 688px) { + padding-top: 35px; + width: 400px; + margin: auto; +} + +@media (min-width: 1024px) { + width: 400px; + margin: auto; +} +` + +const FooterLine = styled.div` +height: 24px; +width: 334px; +border-bottom: 1px solid white; +margin: auto; +margin-bottom: 30px; + +@media (min-width: 688px) { + width: 582px; +} +` + +const SoMeIcons = styled.div` +display: flex; +justify-content: space-evenly; +width: 400px; +margin: auto; + +@media (min-width: 688px) { + display: none; +} +` + +const DesktopSoMeIcons = styled.div` +display: flex; +justify-content: space-evenly; +width: 400px; +margin: auto; + +@media (max-width: 688px) { + display: none; +} +` + +const SomeIcon = styled.img` + cursor: pointer; +` + +export const Footer = () => { + return ( + + + Santulan Yoga Logo + + + Santulan Yoga Logo and name + + + Classes + About + Contact + + + + + + + + + + + + + + + + ) +} \ No newline at end of file diff --git a/src/Sections/Hero.js b/src/Sections/Hero.js new file mode 100644 index 000000000..da5c3cf19 --- /dev/null +++ b/src/Sections/Hero.js @@ -0,0 +1,40 @@ +import React from 'react'; +import styled from 'styled-components'; +import HeroBackground from '../Assets/Photos/HeroBackground.png' +import { Navbar } from './Navbar' +import { HeroText } from '../Components/HeroText' + +export const Hero = () => { + return ( + + + + + + + ) +} + +const HeroSection = styled.section` +background-image: url(${HeroBackground}); +height: 982px; +background-size: cover; +background-position: 55%; +display: flex; +flex-direction: column; + +@media (min-width: 1024px) { + background-size: cover; + background-position: 0%; +} +` + +const HeroTextWrapper = styled.div` +display: flex; +align-items: center; +justify-content: center; + +@media (min-width: 1024px) { + justify-content: flex-start; +} +` \ No newline at end of file diff --git a/src/Sections/Navbar.js b/src/Sections/Navbar.js new file mode 100644 index 000000000..c8061e2fa --- /dev/null +++ b/src/Sections/Navbar.js @@ -0,0 +1,21 @@ +import React from 'react'; +import styled from 'styled-components'; +import { LogoIcon } from '../Components/LogoIcon'; +import { NavLinks } from '../Components/NavLinks'; +import { NavbarIcons } from '../Components/NavbarIcons'; + +export const Navbar = () => { + return ( + + + + + + ) +} + +const NavSection = styled.nav` +display: flex; +padding: 16px; +justify-content: space-between; +` \ No newline at end of file diff --git a/src/Sections/PowerYogaInfo.js b/src/Sections/PowerYogaInfo.js new file mode 100644 index 000000000..b726204a9 --- /dev/null +++ b/src/Sections/PowerYogaInfo.js @@ -0,0 +1,25 @@ +/* eslint-disable react/no-unescaped-entities */ +import React from 'react'; +import styled from 'styled-components'; +import { BrownSection } from '../Components/BrownSection'; +import { PurpleTitle, Paragraph } from '../Components/Fonts'; + +const TextDiv = styled.div` +width: 500px; +margin: auto;` + +export const PowerYogaInfo = () => { + 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/Sections/Reviews.js b/src/Sections/Reviews.js new file mode 100644 index 000000000..a4c0b7c98 --- /dev/null +++ b/src/Sections/Reviews.js @@ -0,0 +1,171 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import { Paragraph, ReviewParagraph, ReviewName } from '../Components/Fonts'; +import ReviewPerson1 from '../Assets/Photos/reviewprofilepic1.png'; +import ReviewPerson2 from '../Assets/Photos/reviewprofilepic2.png'; +import ReviewPerson3 from '../Assets/Photos/reviewprofilepic3.png'; +import RightArrow from '../Assets/Icons/RightArrow.svg'; + +const AllReviews = [ + { name: 'John B.', + image: ReviewPerson1, + review: 'Anyone who thinks of joining a class, do it! Its such a great mix of physical exercise and a calm break from everyday life.' }, + { name: 'Anna M.', + image: ReviewPerson2, + review: 'Just WOW. I have never tried something like this before, but this is definitely my new thing! Never going back to a normal gym.' }, + { name: 'Moa F.', + image: ReviewPerson3, + review: '10/10 recommend! Everyone should go to the Santulan studio and try out power yoga at least once in their lives.' } +] + +const ReviewSection = styled.section` +margin: auto; +display: flex; +background-color: #8c78af; +align-items: center; +flex-direction: column; +text-align: center; +padding-top: 25px; +padding-bottom: 25px; +width: 100%; + +@media (min-width: 688px) { + padding-top: 30px; +} + +@media (min-width: 1024px) { + padding-top: 60px; + height: 728px; + width: 50%; +}` + +const ReviewsTitle = styled.h1` +font-size: 24px; +font-weight: bold; +color: #312661; + +@media (min-width: 1024px) { + font-size: 40px; +}` + +const WhiteTextDiv = styled.div` +display: flex; +flex-direction: column; +width: 310px; +padding-top: 16px; + +@media (min-width: 688px) { + width: 378px; +}` + +const ReviewAndArrow = styled.div` +display: flex;` + +const SingleReviewDiv = styled.div` +margin-top: 24px; +display: flex; +text-align: left; +flex-direction: column; +width: 290px; +height: 232px; +background: #B3A1CC; +border-radius: 20px; +padding-top: 35px; +padding-left: 25px; +padding-right: 25px; + +@media (max-width: 400px) { + width: 200px; +} + +@media (min-width: 688px) { + margin-top: 150px; + width: 415px; + padding-right: 35px; + padding-left: 35px; +} + +@media (min-width: 1024px) { + margin-top: 150px; + width: 415px; + padding-right: 35px; +}` + +const ReviewTextDiv = styled.div` +display: flex; +flex-direction: column;` + +const ReviewerInfo = styled.div` +width: 140px; +display: flex; +gap: 16px; +padding-top: 44px; + +@media (max-width: 400px) { +padding-top: 25px; +} + +img { + width: 50px; + height: 50px; +}` + +const Arrow = styled.button` +border: none; +position: absolute; +background: transparent; +display: flex; +justify-content: center; +flex-direction: column; +margin-top: 140px; +padding-left: 350px; +cursor: pointer; + +:hover { + opacity: 60%; +} + +@media (max-width: 400px) { + margin-top: 145px; +padding-left: 260px; +} + + +@media (min-width: 688px) { + margin-top: 265px; + margin-left: 155px; +} +` + +export const Reviews = () => { + const [currentIndex, setCurrentIndex] = useState(0); + + const handleNextClick = () => { + setCurrentIndex(currentIndex === AllReviews.length - 1 ? 0 : currentIndex + 1); + }; + return ( + + Come join us! + + + Discover all the benefits of Power Yoga and + become a part of our amazing community! + + + + + + + {AllReviews[currentIndex].review} + + + Male reviewer + {AllReviews[currentIndex].name} + + + + next class button + + + ) +} \ No newline at end of file diff --git a/src/Sections/ReviewsSignUp.js b/src/Sections/ReviewsSignUp.js new file mode 100644 index 000000000..00c3470c2 --- /dev/null +++ b/src/Sections/ReviewsSignUp.js @@ -0,0 +1,22 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Reviews } from './Reviews'; +import { SignupForm } from './SignupForm'; + +export const ReviewsSignUp = () => { + return ( + + + + + ); +} + +const DesktopRowSection = styled.section` +display: flex; +flex-direction: column; +width: 100%; + +@media (min-width: 1024px) { + flex-direction: row; +}` diff --git a/src/Sections/SantulanInfo.js b/src/Sections/SantulanInfo.js new file mode 100644 index 000000000..8c9fa8ded --- /dev/null +++ b/src/Sections/SantulanInfo.js @@ -0,0 +1,27 @@ +/* eslint-disable react/no-unescaped-entities */ +import React from 'react'; +import styled from 'styled-components'; +import { BrownSection } from '../Components/BrownSection'; +import { PurpleTitle, Paragraph } from '../Components/Fonts'; + +const TextDiv = styled.div` +width: 600px; +margin: auto;` + +export const SantulanInfo = () => { + 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 everyone'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/Sections/SignupForm.js b/src/Sections/SignupForm.js new file mode 100644 index 000000000..88b97784b --- /dev/null +++ b/src/Sections/SignupForm.js @@ -0,0 +1,86 @@ +import React from 'react'; +import styled from 'styled-components'; +import { BigBlackTitle, PurpleTitle } from 'Components/Fonts'; +import { ClassButton } from '../Components/ClassButton'; +import { CTAButtonSUF } from '../Components/CTAButton'; + +const SUFSection = styled.section` +padding-top: 35px; +padding-bottom: 35px; +align-items: center; +justify-content: center; +display: flex; +flex-direction: column; +border: 4px solid #8c78af; + +@media (min-width: 1024px) { + width: 50%; + padding-top: 0px; + padding-bottom: 0px; +} + +input[type=text] { + outline: none; + box-sizing: border-box; + width: 340px; + height: 48px; + border: 1px solid #c0b3d6; + border-radius: 20px; + color: #c0b3d6; + font-family: Outfit; + font-size: 16px; + font-weight: 500; + padding-left: 24px; + display: flex; + flex-direction: row; + margin-top: 10px; + &:hover { + border: 2px solid #c0b3d6; + } + + @media (max-width: 400px) { + width: 290px; + } +}` + +const Label = styled.label` + font-size: 16px; + position: relative; + font-weight: 500; + top: 20px; + left: 14px; + padding: 0 8px; + background: #FFFFFF; + color: #c0b3d6; + ` + +const ClassButtonDiv = styled.div` +display: flex; +flex-direction: column; +width: fit-content; +padding-top: 35px; +` + +export const SignupForm = () => { + return ( + + Sign up for a class +
+ Enter personal details* + + + + + + +
+ + Choose a class* + Power Yoga 60 + Power Yoga 75 + Yoga Strong + Sign up for class + + + ) +} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 4a1df4db7..2755d049a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,13 +1,13 @@ 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; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + color: white; + overflow-x: hidden; + } code { - font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", - monospace; -} + font-family: Outfit; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 84eb42916..c38885c1f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,7 @@ import React from 'react' import ReactDOM from 'react-dom' import './index.css' +import './reset.css' import { App } from './App' ReactDOM.render(, document.getElementById('root')) diff --git a/src/reset.css b/src/reset.css new file mode 100644 index 000000000..176287c70 --- /dev/null +++ b/src/reset.css @@ -0,0 +1,129 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font-family: Outfit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} \ No newline at end of file