From 5b57db89cea95c69456974f4f2fad35a35b11238 Mon Sep 17 00:00:00 2001 From: httpjamesm Date: Tue, 11 Jun 2024 00:49:13 -0400 Subject: [PATCH] Ifeat: homepage design --- README.md | 22 +- package.json | 9 +- public/codecircles.webp | Bin 0 -> 9562 bytes .../InstancesTable/InstancesTable.module.scss | 37 +++ .../InstancesSection/InstancesTable/index.tsx | 32 +++ .../sections/InstancesSection/index.tsx | 18 ++ src/components/vectors/HomeWave.tsx | 45 ++++ src/pages/api/hello.ts | 13 - src/pages/index.tsx | 126 ++-------- src/styles/Home.module.css | 229 ------------------ src/styles/Home.module.scss | 26 ++ src/styles/globals.css | 110 +-------- yarn.lock | 76 +++++- 13 files changed, 264 insertions(+), 479 deletions(-) create mode 100644 public/codecircles.webp create mode 100644 src/components/sections/InstancesSection/InstancesTable/InstancesTable.module.scss create mode 100644 src/components/sections/InstancesSection/InstancesTable/index.tsx create mode 100644 src/components/sections/InstancesSection/index.tsx create mode 100644 src/components/vectors/HomeWave.tsx delete mode 100644 src/pages/api/hello.ts delete mode 100644 src/styles/Home.module.css create mode 100644 src/styles/Home.module.scss diff --git a/README.md b/README.md index a75ac52..2a23fe2 100644 --- a/README.md +++ b/README.md @@ -1,29 +1,19 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). +# AnonymousOverflow-hub + +The official instance hub for [AnonymousOverflow](https://github.com/httpjamesm/AnonymousOverflow). ## Getting Started First, run the development server: ```bash -npm run dev -# or yarn dev -# or -pnpm dev -# or -bun dev ``` Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. - -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. - -This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. - ## Learn More To learn more about Next.js, take a look at the following resources: @@ -32,9 +22,3 @@ To learn more about Next.js, take a look at the following resources: - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/package.json b/package.json index 89ba07a..5378763 100644 --- a/package.json +++ b/package.json @@ -9,16 +9,17 @@ "lint": "next lint" }, "dependencies": { + "next": "14.2.3", "react": "^18", - "react-dom": "^18", - "next": "14.2.3" + "react-dom": "^18" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", - "eslint-config-next": "14.2.3" + "eslint-config-next": "14.2.3", + "sass": "^1.77.4", + "typescript": "^5" } } diff --git a/public/codecircles.webp b/public/codecircles.webp new file mode 100644 index 0000000000000000000000000000000000000000..774456994591300bb2f9c2147476c7ebd2ec5fad GIT binary patch literal 9562 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 { + return ( +
+ + + + + + + + + + + + + + + +
NameLocationOperators
Instance 1United StatesAdmin 1
+
+ ); +}; + +export default InstancesTable; diff --git a/src/components/sections/InstancesSection/index.tsx b/src/components/sections/InstancesSection/index.tsx new file mode 100644 index 0000000..1fd78df --- /dev/null +++ b/src/components/sections/InstancesSection/index.tsx @@ -0,0 +1,18 @@ +import { Poppins } from "next/font/google"; +import InstancesTable from "./InstancesTable"; + +const poppins = Poppins({ + weight: ["400", "500", "600", "700"], + subsets: ["latin"], +}); + +const InstancesSection = () => { + return ( + <> +

Instances

+ + + ); +}; + +export default InstancesSection; diff --git a/src/components/vectors/HomeWave.tsx b/src/components/vectors/HomeWave.tsx new file mode 100644 index 0000000..0f2a590 --- /dev/null +++ b/src/components/vectors/HomeWave.tsx @@ -0,0 +1,45 @@ +const HomeWave = () => { + return ( + + + + + + + + + + + + + ); +}; + +export default HomeWave; diff --git a/src/pages/api/hello.ts b/src/pages/api/hello.ts deleted file mode 100644 index ea77e8f..0000000 --- a/src/pages/api/hello.ts +++ /dev/null @@ -1,13 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction -import type { NextApiRequest, NextApiResponse } from "next"; - -type Data = { - name: string; -}; - -export default function handler( - req: NextApiRequest, - res: NextApiResponse, -) { - res.status(200).json({ name: "John Doe" }); -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index ab1c4dd..2aac266 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,114 +1,28 @@ -import Head from "next/head"; +import InstancesSection from "@/components/sections/InstancesSection"; +import HomeWave from "@/components/vectors/HomeWave"; +import styles from "@/styles/Home.module.scss"; import Image from "next/image"; -import { Inter } from "next/font/google"; -import styles from "@/styles/Home.module.css"; -const inter = Inter({ subsets: ["latin"] }); - -export default function Home() { +const Home = () => { return ( <> - - Create Next App - - - - -
-
-

- Get started by editing  - src/pages/index.tsx -

- -
- -
+
+ + +
); -} +}; + +export default Home; diff --git a/src/styles/Home.module.css b/src/styles/Home.module.css deleted file mode 100644 index eee920e..0000000 --- a/src/styles/Home.module.css +++ /dev/null @@ -1,229 +0,0 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 6rem; - min-height: 100vh; -} - -.description { - display: inherit; - justify-content: inherit; - align-items: inherit; - font-size: 0.85rem; - max-width: var(--max-width); - width: 100%; - z-index: 2; - font-family: var(--font-mono); -} - -.description a { - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; -} - -.description p { - position: relative; - margin: 0; - padding: 1rem; - background-color: rgba(var(--callout-rgb), 0.5); - border: 1px solid rgba(var(--callout-border-rgb), 0.3); - border-radius: var(--border-radius); -} - -.code { - font-weight: 700; - font-family: var(--font-mono); -} - -.grid { - display: grid; - grid-template-columns: repeat(4, minmax(25%, auto)); - max-width: 100%; - width: var(--max-width); -} - -.card { - padding: 1rem 1.2rem; - border-radius: var(--border-radius); - background: rgba(var(--card-rgb), 0); - border: 1px solid rgba(var(--card-border-rgb), 0); - transition: background 200ms, border 200ms; -} - -.card span { - display: inline-block; - transition: transform 200ms; -} - -.card h2 { - font-weight: 600; - margin-bottom: 0.7rem; -} - -.card p { - margin: 0; - opacity: 0.6; - font-size: 0.9rem; - line-height: 1.5; - max-width: 30ch; -} - -.center { - display: flex; - justify-content: center; - align-items: center; - position: relative; - padding: 4rem 0; -} - -.center::before { - background: var(--secondary-glow); - border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; -} - -.center::after { - background: var(--primary-glow); - width: 240px; - height: 180px; - z-index: -1; -} - -.center::before, -.center::after { - content: ""; - left: 50%; - position: absolute; - filter: blur(45px); - transform: translateZ(0); -} - -.logo { - position: relative; -} -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - .card:hover { - background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); - } - - .card:hover span { - transform: translateX(4px); - } -} - -@media (prefers-reduced-motion) { - .card:hover span { - transform: none; - } -} - -/* Mobile */ -@media (max-width: 700px) { - .content { - padding: 4rem; - } - - .grid { - grid-template-columns: 1fr; - margin-bottom: 120px; - max-width: 320px; - text-align: center; - } - - .card { - padding: 1rem 2.5rem; - } - - .card h2 { - margin-bottom: 0.5rem; - } - - .center { - padding: 8rem 0 6rem; - } - - .center::before { - transform: none; - height: 300px; - } - - .description { - font-size: 0.8rem; - } - - .description a { - padding: 1rem; - } - - .description p, - .description div { - display: flex; - justify-content: center; - position: fixed; - width: 100%; - } - - .description p { - align-items: center; - inset: 0 0 auto; - padding: 2rem 1rem 1.4rem; - border-radius: 0; - border: none; - border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); - background: linear-gradient( - to bottom, - rgba(var(--background-start-rgb), 1), - rgba(var(--callout-rgb), 0.5) - ); - background-clip: padding-box; - backdrop-filter: blur(24px); - } - - .description div { - align-items: flex-end; - pointer-events: none; - inset: auto 0 0; - padding: 2rem; - height: 200px; - background: linear-gradient( - to bottom, - transparent 0%, - rgb(var(--background-end-rgb)) 40% - ); - z-index: 1; - } -} - -/* Tablet and Smaller Desktop */ -@media (min-width: 701px) and (max-width: 1120px) { - .grid { - grid-template-columns: repeat(2, 50%); - } -} - -@media (prefers-color-scheme: dark) { - .vercelLogo { - filter: invert(1); - } - - .logo { - filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); - } -} - -@keyframes rotate { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} diff --git a/src/styles/Home.module.scss b/src/styles/Home.module.scss new file mode 100644 index 0000000..bc0473c --- /dev/null +++ b/src/styles/Home.module.scss @@ -0,0 +1,26 @@ +.waveContainer { + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: 0; +} + +.wrapper { + position: absolute; + z-index: 1; + width: 100%; + min-height: 100vh; + display: flex; + justify-content: center; + padding-top: 5rem; + + .container { + position: relative; + color: white; + + h1 { + text-align: center; + } + } +} \ No newline at end of file diff --git a/src/styles/globals.css b/src/styles/globals.css index f4bd77c..05a8a74 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -1,107 +1,11 @@ -:root { - --max-width: 1100px; - --border-radius: 12px; - --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", - "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", - "Fira Mono", "Droid Sans Mono", "Courier New", monospace; - - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; - - --primary-glow: conic-gradient( - from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg - ); - --secondary-glow: radial-gradient( - rgba(255, 255, 255, 1), - rgba(255, 255, 255, 0) - ); - - --tile-start-rgb: 239, 245, 249; - --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient( - #00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080 - ); - - --callout-rgb: 238, 240, 241; - --callout-border-rgb: 172, 175, 176; - --card-rgb: 180, 185, 188; - --card-border-rgb: 131, 134, 135; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - - --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); - --secondary-glow: linear-gradient( - to bottom right, - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0.3) - ); - - --tile-start-rgb: 2, 13, 46; - --tile-end-rgb: 2, 5, 19; - --tile-border: conic-gradient( - #ffffff80, - #ffffff40, - #ffffff30, - #ffffff20, - #ffffff10, - #ffffff10, - #ffffff80 - ); - - --callout-rgb: 20, 20, 20; - --callout-border-rgb: 108, 108, 108; - --card-rgb: 100, 100, 100; - --card-border-rgb: 200, 200, 200; - } -} - -* { - box-sizing: border-box; - padding: 0; - margin: 0; -} - html, -body { - max-width: 100vw; - overflow-x: hidden; +body, +#__next { + min-height: 100vh; + margin: 0; + padding: 0; } body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - -a { - color: inherit; - text-decoration: none; -} - -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } -} + background-color: #1B1F26; +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 5eb924b..32bbd2a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -298,6 +298,14 @@ ansi-styles@^6.1.0: resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-6.2.1.tgz#0e62320cf99c21afff3b3012192546aacbfb05c5" integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug== +anymatch@~3.1.2: + version "3.1.3" + resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e" + integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw== + dependencies: + normalize-path "^3.0.0" + picomatch "^2.0.4" + argparse@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38" @@ -443,6 +451,11 @@ balanced-match@^1.0.0: resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw== +binary-extensions@^2.0.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522" + integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" @@ -458,7 +471,7 @@ brace-expansion@^2.0.1: dependencies: balanced-match "^1.0.0" -braces@^3.0.3: +braces@^3.0.3, braces@~3.0.2: version "3.0.3" resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789" integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA== @@ -501,6 +514,21 @@ chalk@^4.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +"chokidar@>=3.0.0 <4.0.0": + version "3.6.0" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b" + integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + client-only@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1" @@ -1073,6 +1101,11 @@ fs.realpath@^1.0.0: resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw== +fsevents@~2.3.2: + version "2.3.3" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6" + integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw== + function-bind@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c" @@ -1120,7 +1153,7 @@ get-tsconfig@^4.5.0: dependencies: resolve-pkg-maps "^1.0.0" -glob-parent@^5.1.2: +glob-parent@^5.1.2, glob-parent@~5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== @@ -1247,6 +1280,11 @@ ignore@^5.2.0: resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef" integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw== +immutable@^4.0.0: + version "4.3.6" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.6.tgz#6a05f7858213238e587fb83586ffa3b4b27f0447" + integrity sha512-Ju0+lEMyzMVZarkTn/gqRpdqd5dOPaz1mCZ0SH3JV6iFw81PldE/PEB1hWVEA288HPt4WXW8O7AWxB10M+03QQ== + import-fresh@^3.2.1: version "3.3.0" resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" @@ -1304,6 +1342,13 @@ is-bigint@^1.0.1: dependencies: has-bigints "^1.0.1" +is-binary-path@~2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09" + integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw== + dependencies: + binary-extensions "^2.0.0" + is-boolean-object@^1.1.0: version "1.1.2" resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.1.2.tgz#5c6dc200246dd9321ae4b885a114bb1f75f63719" @@ -1362,7 +1407,7 @@ is-generator-function@^1.0.10: dependencies: has-tostringtag "^1.0.0" -is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3: +is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1: version "4.0.3" resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084" integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== @@ -1669,6 +1714,11 @@ next@14.2.3: "@next/swc-win32-ia32-msvc" "14.2.3" "@next/swc-win32-x64-msvc" "14.2.3" +normalize-path@^3.0.0, normalize-path@~3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65" + integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA== + object-assign@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" @@ -1818,7 +1868,7 @@ picocolors@^1.0.0: resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1" integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew== -picomatch@^2.3.1: +picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA== @@ -1881,6 +1931,13 @@ react@^18: dependencies: loose-envify "^1.1.0" +readdirp@~3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" + integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== + dependencies: + picomatch "^2.2.1" + reflect.getprototypeof@^1.0.4: version "1.0.6" resolved "https://registry.yarnpkg.com/reflect.getprototypeof/-/reflect.getprototypeof-1.0.6.tgz#3ab04c32a8390b770712b7a8633972702d278859" @@ -1975,6 +2032,15 @@ safe-regex-test@^1.0.3: es-errors "^1.3.0" is-regex "^1.1.4" +sass@^1.77.4: + version "1.77.4" + resolved "https://registry.yarnpkg.com/sass/-/sass-1.77.4.tgz#92059c7bfc56b827c56eb116778d157ec017a5cd" + integrity sha512-vcF3Ckow6g939GMA4PeU7b2K/9FALXk2KF9J87txdHzXbUF9XRQRwSxcAs/fGaTnJeBFd7UoV22j3lzMLdM0Pw== + dependencies: + chokidar ">=3.0.0 <4.0.0" + immutable "^4.0.0" + source-map-js ">=0.6.2 <2.0.0" + scheduler@^0.23.2: version "0.23.2" resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3" @@ -2046,7 +2112,7 @@ slash@^3.0.0: resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634" integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== -source-map-js@^1.0.2: +"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2: version "1.2.0" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af" integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==