From 7b2cb8b831b5f835ff0697b3a0b5a2b201c9e7e0 Mon Sep 17 00:00:00 2001 From: Emaan Hookey Date: Mon, 4 Aug 2025 13:24:49 -0230 Subject: [PATCH 1/3] initial commit --- .github/workflows/test.yml-template | 29 +++ package-lock.json | 278 +++++++--------------------- package.json | 5 +- src/index.html | 149 ++++++++++++++- src/styles/_features.scss | 58 ++++++ src/styles/_footer.scss | 43 +++++ src/styles/_header.scss | 65 +++++++ src/styles/_hero.scss | 77 ++++++++ src/styles/_typography.scss | 16 ++ src/styles/_utils.scss | 18 +- src/styles/main.scss | 7 +- src/styles/utils/_mixins.scss | 22 ++- src/styles/utils/_vars.scss | 14 ++ 13 files changed, 558 insertions(+), 223 deletions(-) create mode 100644 .github/workflows/test.yml-template create mode 100644 src/styles/_features.scss create mode 100644 src/styles/_footer.scss create mode 100644 src/styles/_header.scss create mode 100644 src/styles/_hero.scss diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template new file mode 100644 index 00000000..8b5743ec --- /dev/null +++ b/.github/workflows/test.yml-template @@ -0,0 +1,29 @@ +name: Test + +on: + pull_request: + branches: [ master ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [20.x] + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node-version }} + - run: npm install + - run: npm test + - name: Upload HTML report(backstop data) + if: ${{ always() }} + uses: actions/upload-artifact@v2 + with: + name: report + path: backstop_data diff --git a/package-lock.json b/package-lock.json index a1958a20..9802d712 100644 --- a/package-lock.json +++ b/package-lock.json @@ -55,80 +55,20 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.22.13", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.13.tgz", - "integrity": "sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", + "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/highlight": "^7.22.13", - "chalk": "^2.4.2" + "@babel/helper-validator-identifier": "^7.27.1", + "js-tokens": "^4.0.0", + "picocolors": "^1.1.1" }, "engines": { "node": ">=6.9.0" } }, - "node_modules/@babel/code-frame/node_modules/ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, - "dependencies": { - "color-convert": "^1.9.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/code-frame/node_modules/chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/code-frame/node_modules/color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, - "dependencies": { - "color-name": "1.1.3" - } - }, - "node_modules/@babel/code-frame/node_modules/color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true - }, - "node_modules/@babel/code-frame/node_modules/has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/code-frame/node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", - "dev": true, - "dependencies": { - "has-flag": "^3.0.0" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/@babel/compat-data": { "version": "7.23.3", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.23.3.tgz", @@ -393,19 +333,21 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.22.5", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz", - "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", + "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", "dev": true, + "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.22.20", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz", - "integrity": "sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", + "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", "dev": true, + "license": "MIT", "engines": { "node": ">=6.9.0" } @@ -420,100 +362,28 @@ } }, "node_modules/@babel/helpers": { - "version": "7.23.2", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.23.2.tgz", - "integrity": "sha512-lzchcp8SjTSVe/fPmLwtWVBFC7+Tbn8LGHDVfDp9JGxpAY5opSaEFgt8UQvrnECWOTdji2mOWMz1rOhkHscmGQ==", - "dev": true, - "dependencies": { - "@babel/template": "^7.22.15", - "@babel/traverse": "^7.23.2", - "@babel/types": "^7.23.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, - "node_modules/@babel/highlight": { - "version": "7.22.20", - "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.20.tgz", - "integrity": "sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==", + "version": "7.28.2", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.2.tgz", + "integrity": "sha512-/V9771t+EgXz62aCcyofnQhGM8DQACbRhvzKFsXKC9QM+5MadF8ZmIm0crDMaz3+o0h0zXfJnd4EhbYbxsrcFw==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.22.20", - "chalk": "^2.4.2", - "js-tokens": "^4.0.0" + "@babel/template": "^7.27.2", + "@babel/types": "^7.28.2" }, "engines": { "node": ">=6.9.0" } }, - "node_modules/@babel/highlight/node_modules/ansi-styles": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", - "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", - "dev": true, - "dependencies": { - "color-convert": "^1.9.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/highlight/node_modules/chalk": { - "version": "2.4.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", - "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", - "dev": true, - "dependencies": { - "ansi-styles": "^3.2.1", - "escape-string-regexp": "^1.0.5", - "supports-color": "^5.3.0" - }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/highlight/node_modules/color-convert": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", - "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", - "dev": true, - "dependencies": { - "color-name": "1.1.3" - } - }, - "node_modules/@babel/highlight/node_modules/color-name": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", - "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==", - "dev": true - }, - "node_modules/@babel/highlight/node_modules/has-flag": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", - "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", - "dev": true, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/highlight/node_modules/supports-color": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", - "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "node_modules/@babel/parser": { + "version": "7.28.0", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.0.tgz", + "integrity": "sha512-jVZGvOxOuNSsuQuLRTh13nU0AogFlw32w/MT+LV6D3sP5WdbW61E77RnkbaO2dUvmPAYrBDJXGn5gGS6tH4j8g==", "dev": true, + "license": "MIT", "dependencies": { - "has-flag": "^3.0.0" + "@babel/types": "^7.28.0" }, - "engines": { - "node": ">=4" - } - }, - "node_modules/@babel/parser": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.23.3.tgz", - "integrity": "sha512-uVsWNvlVsIninV2prNz/3lHCb+5CJ+e+IUBfbjToAHODtfGYLfCFuY4AU7TskI+dAKk+njsPiBjq1gKTvZOBaw==", - "dev": true, "bin": { "parser": "bin/babel-parser.js" }, @@ -699,14 +569,15 @@ } }, "node_modules/@babel/template": { - "version": "7.22.15", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.15.tgz", - "integrity": "sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==", + "version": "7.27.2", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz", + "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.22.13", - "@babel/parser": "^7.22.15", - "@babel/types": "^7.22.15" + "@babel/code-frame": "^7.27.1", + "@babel/parser": "^7.27.2", + "@babel/types": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -766,14 +637,14 @@ "dev": true }, "node_modules/@babel/types": { - "version": "7.23.3", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.23.3.tgz", - "integrity": "sha512-OZnvoH2l8PK5eUvEcUyCt/sXgr/h+UWpVuBbOljwcrAgUl6lpchoQ++PHGyQy1AtYnVA6CEq3y5xeEI10brpXw==", + "version": "7.28.2", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.2.tgz", + "integrity": "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.22.5", - "@babel/helper-validator-identifier": "^7.22.20", - "to-fast-properties": "^2.0.0" + "@babel/helper-string-parser": "^7.27.1", + "@babel/helper-validator-identifier": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -4660,17 +4531,6 @@ "@parcel/core": "^2.15.4" } }, - "node_modules/@pkgjs/parseargs": { - "version": "0.11.0", - "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", - "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", - "dev": true, - "optional": true, - "peer": true, - "engines": { - "node": ">=14" - } - }, "node_modules/@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -5749,10 +5609,11 @@ "dev": true }, "node_modules/brace-expansion": { - "version": "1.1.11", - "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", - "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "version": "1.1.12", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz", + "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==", "dev": true, + "license": "MIT", "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6337,10 +6198,11 @@ } }, "node_modules/cross-env/node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, + "license": "MIT", "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -7709,10 +7571,11 @@ "dev": true }, "node_modules/eslint/node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, + "license": "MIT", "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -8500,10 +8363,11 @@ } }, "node_modules/form-data": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.3.tgz", - "integrity": "sha512-qsITQPfmvMOSAdeyZ+12I1c+CKSstAFAwu+97zrnWAbIr5u8wfsExUzCesVLC8NgHuRUqNN4Zy6UPWUTRGslcA==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz", + "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==", "dev": true, + "license": "MIT", "dependencies": { "asynckit": "^0.4.0", "combined-stream": "^1.0.8", @@ -9866,10 +9730,11 @@ } }, "node_modules/jest-changed-files/node_modules/cross-spawn": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", - "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", + "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", "dev": true, + "license": "MIT", "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", @@ -12696,10 +12561,11 @@ "peer": true }, "node_modules/path-to-regexp": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz", - "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.9.0.tgz", + "integrity": "sha512-xIp7/apCFJuUHdDLWe8O1HIkb0kQrOMb/0u6FXQjemHn/ii5LrIzU6bdECnsiTF/GjZkMEKg1xdiZwNqDYlZ6g==", "dev": true, + "license": "MIT", "dependencies": { "isarray": "0.0.1" } @@ -14526,15 +14392,6 @@ "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==", "dev": true }, - "node_modules/to-fast-properties": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz", - "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==", - "dev": true, - "engines": { - "node": ">=4" - } - }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -15122,10 +14979,11 @@ } }, "node_modules/ws": { - "version": "8.13.0", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.13.0.tgz", - "integrity": "sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==", + "version": "8.18.3", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz", + "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==", "dev": true, + "license": "MIT", "engines": { "node": ">=10.0.0" }, diff --git a/package.json b/package.json index 2fa16c0c..d15b81af 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,10 @@ "deploy": "mate-scripts deploy", "update": "mate-scripts update", "postinstall": "npm run update", - "test": "npm run lint && npm run test:only" + "test": "npm run lint && npm run test:only", + "build:css": "sass src/styles/main.scss dist/styles/main.css --no-source-map", + "watch:css": "sass --watch src/styles/main.scss:dist/styles/main.css" + }, "keywords": [], "author": "Mate Academy", diff --git a/src/index.html b/src/index.html index 8019b83e..51927097 100644 --- a/src/index.html +++ b/src/index.html @@ -4,16 +4,157 @@ - Title + KatVR Landing -

Hello Mate Academy

+ +
+
+ + + +
+
+ + +
+
+
+

+ Experience VR like +
+ never before +

+

+ Dive into fully immersive worlds with best-in-class tracking, + comfort, and visuals. +

+ +
+
+ KatVR headset +
+
+
+ + +
+
+

Key Features

+
    +
  • + ... +

    360° Tracking

    +

    + Track movement in full room-scale experience. +

    +
    • +
  • + ... +

    Ergonomic Comfort

    +

    + Lightweight design for hours of play. +

    +
    • +
  • + ... +

    Crystal-Clear Visuals

    +

    + 4K panels per eye for unmatched clarity. +

    +
    • +
  • + ... +

    Spatial Audio

    +

    + Immersive 3D sound for full realism. +

    +
    • +
+
+
+ + + + diff --git a/src/styles/_features.scss b/src/styles/_features.scss new file mode 100644 index 00000000..9cdc1c4e --- /dev/null +++ b/src/styles/_features.scss @@ -0,0 +1,58 @@ +@import 'mixins'; +@import 'vars'; + +.features { + background: $color-light; + padding: 4rem 0; + + &__inner { + @include container; + } + + &__title { + text-align: center; + font-size: 2.5rem; + margin-bottom: 2rem; + } + + &__list { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 2rem; + } + + &__item { + background: $color-secondary; + padding: 2rem; + text-align: center; + border-radius: 8px; + } + + &__icon { + width: 48px; + height: 48px; + margin-bottom: 1rem; + } + + &__item-title { + font-size: 1.25rem; + margin-bottom: 0.5rem; + } + + &__item-text { + font-size: 1rem; + color: color.adjust($color-dark, $lightness: -30%); + } + + @include respond-to(desktop) { + &__list { + grid-template-columns: repeat(2, 1fr); + } + } + + @include respond-to(tablet) { + &__list { + grid-template-columns: 1fr; + } + } +} diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss new file mode 100644 index 00000000..eb87a120 --- /dev/null +++ b/src/styles/_footer.scss @@ -0,0 +1,43 @@ +@import 'mixins'; +@import 'vars'; + +.footer { + background: color.adjust($color-light, $lightness: -5%); + padding: 2rem 0; + + &__inner { + @include container; + + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + } + + &__links { + display: flex; + gap: 1rem; + } + + &__link { + color: $color-dark; + text-decoration: none; + font-size: 0.88rem; + + &:hover { + color: $color-primary; + } + } + + &__copy { + font-size: 0.88rem; + color: color.adjust($color-dark, $lightness: -40%); + margin-top: 1rem; + + @include respond-to(mobile) { + width: 100%; + text-align: center; + margin-top: 2rem; + } + } +} diff --git a/src/styles/_header.scss b/src/styles/_header.scss new file mode 100644 index 00000000..3beb5a00 --- /dev/null +++ b/src/styles/_header.scss @@ -0,0 +1,65 @@ +@import 'mixins'; +@import 'vars'; + +.header { + background: $color-secondary; + border-bottom: 1px solid #eee; + + &__inner { + @include container; + + display: flex; + align-items: center; + justify-content: space-between; + padding: 1rem 0; + } + + &__logo { + font-size: 1.5rem; + font-weight: bold; + color: $color-primary; + text-decoration: none; + } + + &__nav { + flex: 1; + margin-left: 2rem; + + & .header__list { + display: flex; + gap: 2rem; + } + + & .header__link { + color: $color-dark; + text-decoration: none; + font-weight: 500; + + &:hover { + color: $color-primary; + } + } + } + + &__cta { + background: $color-primary; + color: $color-secondary; + border: none; + padding: 0.75rem 1.5rem; + border-radius: 4px; + cursor: pointer; + + &:hover { + opacity: 0.9; + } + } + + @include respond-to(tablet) { + &__nav { + display: none; + } + &__cta { + display: none; + } + } +} diff --git a/src/styles/_hero.scss b/src/styles/_hero.scss new file mode 100644 index 00000000..ed59418b --- /dev/null +++ b/src/styles/_hero.scss @@ -0,0 +1,77 @@ +@import 'mixins'; +@import 'vars'; + +.hero { + background: $color-secondary; + padding: 4rem 0; + + &__inner { + @include container; + + display: flex; + align-items: center; + justify-content: space-between; + gap: 2rem; + } + + &__content { + flex: 1; + max-width: 600px; + } + + &__title { + font-size: 3rem; + line-height: 1.2; + } + + &__subtitle { + font-size: 1.13rem; + margin: 1rem 0 2rem; + color: color.adjust($color-dark, $lightness: -20%); + } + + &__button { + background: $color-primary; + color: $color-secondary; + border: none; + padding: 0.75rem 2rem; + font-size: 1rem; + border-radius: 4px; + cursor: pointer; + + &:hover { + opacity: 0.9; + } + } + + &__media img { + width: 100%; + max-width: 500px; + display: block; + } + + @include respond-to(desktop) { + &__inner { + flex-direction: column-reverse; + text-align: center; + } + } + + @include respond-to(tablet) { + &__title { + font-size: 2.5rem; + } + &__subtitle { + font-size: 1rem; + } + } + + @include respond-to(mobile) { + &__title { + font-size: 2rem; + } + &__subtitle { + font-size: 0.88rem; + } + } +} diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss index 1837eb46..07efccd0 100644 --- a/src/styles/_typography.scss +++ b/src/styles/_typography.scss @@ -1,3 +1,19 @@ h1 { @extend %h1; } + +// Example utility classes +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: Poppins, sans-serif; + color: $color-dark; + margin-bottom: 1rem; +} + +p { + margin-bottom: 1rem; +} diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss index 3280c3fe..460515c0 100644 --- a/src/styles/_utils.scss +++ b/src/styles/_utils.scss @@ -1,3 +1,15 @@ -@import 'utils/vars'; -@import 'utils/mixins'; -@import 'utils/extends'; +// reset some basics +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: Inter, sans-serif; + color: $color-dark; + background: $color-light; + line-height: 1.6; +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d1..6a1b0b28 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,6 +1,11 @@ +@import 'vars'; +@import 'mixins'; @import 'utils'; -@import 'fonts'; @import 'typography'; +@import 'header'; +@import 'hero'; +@import 'features'; +@import 'footer'; body { background: $c-gray; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..56252733 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,20 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@import 'vars'; + +/// respond-to breakpoint mixin +/// @param {string} $key — one of map keys in $breakpoints +@mixin respond-to($key) { + $size: map.get($breakpoints, $key); + + @if $size { + @media (max-width: $size) { + @content; + } } } + +/// container centering utility +@mixin container { + max-width: map.get($breakpoints, wide); + margin: 0 auto; + padding: 0 1rem; +} diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..4222f438 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,15 @@ $c-gray: #eee; + +// colors +$color-primary: #3a00e4; +$color-secondary: #fff; +$color-dark: #111; +$color-light: #f7f7f7; + +// breakpoints +$breakpoints: ( + mobile: 320px, + tablet: 640px, + desktop: 1280px, + wide: 1440px, +); From 50d099fc346e8e17b261393d1d2020cf3717530f Mon Sep 17 00:00:00 2001 From: Emaan Hookey Date: Mon, 4 Aug 2025 13:39:16 -0230 Subject: [PATCH 2/3] fixed issues --- src/index.html | 8 ++++---- src/styles/_features.scss | 2 ++ src/styles/_footer.scss | 3 +++ src/styles/_hero.scss | 2 ++ src/styles/main.scss | 2 +- 5 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/index.html b/src/index.html index 51927097..91132dd1 100644 --- a/src/index.html +++ b/src/index.html @@ -89,7 +89,7 @@

Key Features

  • ...

    360° Tracking

    @@ -100,7 +100,7 @@

    360° Tracking

  • ...

    Ergonomic Comfort

    @@ -111,7 +111,7 @@

    Ergonomic Comfort

  • ...

    Crystal-Clear Visuals

    @@ -122,7 +122,7 @@

    Crystal-Clear Visuals

  • ...

    Spatial Audio

    diff --git a/src/styles/_features.scss b/src/styles/_features.scss index 9cdc1c4e..e0e6d1b4 100644 --- a/src/styles/_features.scss +++ b/src/styles/_features.scss @@ -41,6 +41,8 @@ &__item-text { font-size: 1rem; + + // swapped darken → color.adjust color: color.adjust($color-dark, $lightness: -30%); } diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss index eb87a120..92f8c43a 100644 --- a/src/styles/_footer.scss +++ b/src/styles/_footer.scss @@ -2,6 +2,7 @@ @import 'vars'; .footer { + // swapped darken → color.adjust background: color.adjust($color-light, $lightness: -5%); padding: 2rem 0; @@ -31,6 +32,8 @@ &__copy { font-size: 0.88rem; + + // swapped darken → color.adjust color: color.adjust($color-dark, $lightness: -40%); margin-top: 1rem; diff --git a/src/styles/_hero.scss b/src/styles/_hero.scss index ed59418b..8f1b2826 100644 --- a/src/styles/_hero.scss +++ b/src/styles/_hero.scss @@ -27,6 +27,8 @@ &__subtitle { font-size: 1.13rem; margin: 1rem 0 2rem; + + // swapped darken → color.adjust color: color.adjust($color-dark, $lightness: -20%); } diff --git a/src/styles/main.scss b/src/styles/main.scss index 6a1b0b28..f6aa2cdc 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -8,5 +8,5 @@ @import 'footer'; body { - background: $c-gray; + background: $color-light; } From c078aa4ad52e7f9236124dc8edaaea3dd776169c Mon Sep 17 00:00:00 2001 From: Emaan Hookey Date: Mon, 4 Aug 2025 13:58:36 -0230 Subject: [PATCH 3/3] fixed issues again --- src/styles/_features.scss | 5 ++--- src/styles/_footer.scss | 8 +++----- src/styles/_hero.scss | 5 ++--- 3 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/styles/_features.scss b/src/styles/_features.scss index e0e6d1b4..2e9d16d7 100644 --- a/src/styles/_features.scss +++ b/src/styles/_features.scss @@ -1,3 +1,4 @@ +@use 'sass:color'; @import 'mixins'; @import 'vars'; @@ -41,9 +42,7 @@ &__item-text { font-size: 1rem; - - // swapped darken → color.adjust - color: color.adjust($color-dark, $lightness: -30%); + color: color.darken($color-dark, 30%); } @include respond-to(desktop) { diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss index 92f8c43a..969bdccf 100644 --- a/src/styles/_footer.scss +++ b/src/styles/_footer.scss @@ -1,9 +1,9 @@ +@use 'sass:color'; @import 'mixins'; @import 'vars'; .footer { - // swapped darken → color.adjust - background: color.adjust($color-light, $lightness: -5%); + background: color.darken($color-light, 5%); padding: 2rem 0; &__inner { @@ -32,9 +32,7 @@ &__copy { font-size: 0.88rem; - - // swapped darken → color.adjust - color: color.adjust($color-dark, $lightness: -40%); + color: color.darken($color-dark, 40%); margin-top: 1rem; @include respond-to(mobile) { diff --git a/src/styles/_hero.scss b/src/styles/_hero.scss index 8f1b2826..3b3aa9f4 100644 --- a/src/styles/_hero.scss +++ b/src/styles/_hero.scss @@ -1,3 +1,4 @@ +@use 'sass:color'; @import 'mixins'; @import 'vars'; @@ -27,9 +28,7 @@ &__subtitle { font-size: 1.13rem; margin: 1rem 0 2rem; - - // swapped darken → color.adjust - color: color.adjust($color-dark, $lightness: -20%); + color: color.darken($color-dark, 20%); } &__button {