chore(release): 1.4.1

Add github action to build docker image and docker-compose support

.eslintrc.json

@@ -45,6 +45,7 @@
     "sort-keys-fix/sort-keys-fix": ["warn", "asc"],
     "sort-destructure-keys/sort-destructure-keys": "warn",
     "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/media-has-caption": "off",
     "react/jsx-sort-props": [
       "warn",
       {

.github/workflows/build_docker.yml

@@ -0,0 +1,40 @@
+name: Build and push main image
+
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  push-store-image:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 'Checkout GitHub Action'
+        uses: actions/checkout@main
+
+      - name: 'Login to GitHub Container Registry'
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{github.actor}}
+          password: ${{secrets.ACCESS_TOKEN}}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: 'Build and push Inventory Image'
+        run: |
+          IMAGE_NAME="ghcr.io/remvze/moodist"
+
+          GIT_TAG=${{ github.ref }}
+          GIT_TAG=${GIT_TAG#refs/tags/}
+
+          docker buildx build \
+            --platform linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6 \
+            -t $IMAGE_NAME:latest \
+            -t $IMAGE_NAME:$GIT_TAG \
+            --push .

.stylelintrc.json

@@ -1,7 +1,7 @@
 {
   "extends": [
     "stylelint-config-standard",
-    "stylelint-config-idiomatic-order",
+    "stylelint-config-recess-order",
     "stylelint-config-html",
     "stylelint-prettier/recommended"
   ],

.vscode/settings.json

@@ -11,8 +11,8 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "[javascript][javascriptreact][typescript][typescriptreact][astro]": {
     "editor.formatOnSave": false

CHANGELOG.md

@@ -2,6 +2,251 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [1.4.1](https://github.com/remvze/moodist/compare/v1.4.0...v1.4.1) (2024-04-11)
+
+
+### ✨ Features
+
+* add toolbar and portal ([ede4801](https://github.com/remvze/moodist/commit/ede480186c4b3f187c82e1d64e4d521ee59da31a))
+
+
+### 💄 Styling
+
+* widen the container ([7ec7ea7](https://github.com/remvze/moodist/commit/7ec7ea74d53db85cffa3af646c03270793453009))
+
+
+### 🚚 Chores
+
+* change GitHub workflow ([faf7f78](https://github.com/remvze/moodist/commit/faf7f78b8c10cd7b3688ed5bba3d0c077c020ad2))
+
+## [1.4.0](https://github.com/remvze/moodist/compare/v1.3.1...v1.4.0) (2024-02-29)
+
+
+### ♻️ Code Refactoring
+
+* add variant to container ([831a9c8](https://github.com/remvze/moodist/commit/831a9c8ea019a3d86e994ff0e060dd4337a84d1f))
+* move donation to React ([c505c57](https://github.com/remvze/moodist/commit/c505c574a885004e071da63d8255062befc29921))
+* move footer to React ([52176bc](https://github.com/remvze/moodist/commit/52176bc3f9eac43d701de0e7f0ca103eeca46858))
+* remove sections ([3f45be3](https://github.com/remvze/moodist/commit/3f45be3942bfeff74f3f0126de5e61037a749e61))
+
+
+### 💄 Styling
+
+* add effect to about ([1a499be](https://github.com/remvze/moodist/commit/1a499be2446730d5333dd0d0d6a06bbd47564979))
+* add margin to donate section ([6d30a01](https://github.com/remvze/moodist/commit/6d30a0123e0feb509b6c560f405b98d20a89467a))
+* add polka dot pattern ([dc22b51](https://github.com/remvze/moodist/commit/dc22b51548f0d6830fcee79eebd75650f3f19dc1))
+* add scroll lock in modals ([def69de](https://github.com/remvze/moodist/commit/def69de6e4e11e373280c90f93af0b0369b85ac8))
+* add shine to donation button ([ac24da2](https://github.com/remvze/moodist/commit/ac24da294008a34c49dc3502374f1fcf55db5be8))
+* change description ([8930e7b](https://github.com/remvze/moodist/commit/8930e7b76abffafd0ace5926de6c1d3f7629febd))
+* change dividers ([8471a3c](https://github.com/remvze/moodist/commit/8471a3ca493b0c738ed7de900e82403f0b1ce2b7))
+* change pattern ([f3e7224](https://github.com/remvze/moodist/commit/f3e72242670317d938cc8d9619729be95df0f4f0))
+* change position for toolbar ([e7fd84b](https://github.com/remvze/moodist/commit/e7fd84bd4e8637e34eb0a59e97fd9c49875f8776))
+* change sound counter ([e1b9a17](https://github.com/remvze/moodist/commit/e1b9a1736c1d11827faf900838769194364afbd3))
+* change the about style ([4515aa8](https://github.com/remvze/moodist/commit/4515aa8e7a7f6d0fbc839625f74f0583e1a20d18))
+* change the pattern slightly ([5fc3e7e](https://github.com/remvze/moodist/commit/5fc3e7e5d048cb4aa189683d147b181fdf2a94b6))
+* change unselected style ([586e502](https://github.com/remvze/moodist/commit/586e502c3cc81314bc1e83f4e088a0d9289390fc))
+* decorate paragraphs ([1a6ecd8](https://github.com/remvze/moodist/commit/1a6ecd82abe89e1686538c42b31826ccc8a43b2d))
+* decrease dots ([182a8c7](https://github.com/remvze/moodist/commit/182a8c7aadc9a253261c56ae7faf8ac5c3c82707))
+* decrease dots ([0ad4bb7](https://github.com/remvze/moodist/commit/0ad4bb72e15e8f7d52e7d4b036b71fdb837e3554))
+* decrease dots ([2b84374](https://github.com/remvze/moodist/commit/2b843747b41111908bbe5fb8f5abc407114e4f15))
+* decrease font size ([69cb45b](https://github.com/remvze/moodist/commit/69cb45bff74d36f654d521e9e7f6b2149b01d630))
+* decrease opacity ([56802b6](https://github.com/remvze/moodist/commit/56802b67f2db751dbede9aa58b2158dd250a1420))
+* decrease opacity ([2078648](https://github.com/remvze/moodist/commit/2078648c6687aab79a725490335b8ae751f3d4ee))
+* decrease opacity ([82e4ea7](https://github.com/remvze/moodist/commit/82e4ea72f4ddb8658824813a64e14970400b1820))
+* decrease padding ([98d2f76](https://github.com/remvze/moodist/commit/98d2f764383eaba0dd6163b93826459b614b67d2))
+* decrease shine ([0f32de3](https://github.com/remvze/moodist/commit/0f32de3c0ca9f553c8917b786ddcdfb6feccf0c8))
+* hide about and features ([400ea0a](https://github.com/remvze/moodist/commit/400ea0aeafe48587fe8596d1b5fe90755995d1c3))
+* hide features ([9028675](https://github.com/remvze/moodist/commit/902867505743dd1dcd3f1e2afef010a186586615))
+* increase dots ([405fccc](https://github.com/remvze/moodist/commit/405fcccd95d9ce720f0731e8040006bd1d9b8bd2))
+* increase opacity ([882d440](https://github.com/remvze/moodist/commit/882d44079cfba8c7536c3713f0abeaa075ecb069))
+* increase padding ([8e50013](https://github.com/remvze/moodist/commit/8e500136cec6ba5580146306f25a5956aa3a2a4b))
+* increase pattern opacity ([5b83710](https://github.com/remvze/moodist/commit/5b83710c75515352b88c7bd361694d3067cb08fb))
+* lower opacity ([d4cc24e](https://github.com/remvze/moodist/commit/d4cc24e468230df51e5676abbd828b2f2edd97f3))
+* remove hero pattern ([8f36c86](https://github.com/remvze/moodist/commit/8f36c863d7f7489979691475947dbc8f29f26b39))
+* revert changes ([341a896](https://github.com/remvze/moodist/commit/341a896924a6ace70114ad2ae3349f8934a329ba))
+* revert pattern ([5916e86](https://github.com/remvze/moodist/commit/5916e86d3c6de9912b2c9bd490fa04cd9a0958dd))
+* show about and features ([37505a6](https://github.com/remvze/moodist/commit/37505a6b3f86919ac04b69519e56ddbaf5234843))
+
+
+### ✨ Features
+
+* add about section ([d725d59](https://github.com/remvze/moodist/commit/d725d597034ead0bb63c5f0667b64ce459477662))
+* add active indicators ([240fd9c](https://github.com/remvze/moodist/commit/240fd9c6e05c7385c0de92b8b57776988b902fae))
+* add alarm for pomodoro timer ([0eb47ba](https://github.com/remvze/moodist/commit/0eb47ba2e1accaee7dd7d6114ca9a69cbc0656c4))
+* add basic pomodoro structure ([9f7de33](https://github.com/remvze/moodist/commit/9f7de336e5add254b40c5694fc4c619ee00602ba))
+* add controls to pomodoro ([7ed016d](https://github.com/remvze/moodist/commit/7ed016d8558a73d8d2bf05823cf80633882c1d69))
+* add copy for productivity toolbox ([3205145](https://github.com/remvze/moodist/commit/3205145d5425c7a7a8660b46aa9de0b273a04ff0))
+* add counter to notepad ([2424523](https://github.com/remvze/moodist/commit/24245235b14f9d59f86d2e988657a45a8a6d1eb7))
+* add CTA button ([0e12a52](https://github.com/remvze/moodist/commit/0e12a5203ef836bd262b3d4cc02aaeb9048f461e))
+* add custom presets ([2484e01](https://github.com/remvze/moodist/commit/2484e01273cf5e7ef5b44395cab26095891118fd))
+* add dividers to menu items ([408734d](https://github.com/remvze/moodist/commit/408734d49fd89fbd47d29527c03927e49c834f30))
+* add fade in/out ([663cb92](https://github.com/remvze/moodist/commit/663cb921350c083f1991665d147a3820bcdd9321))
+* add features section ([e4e332a](https://github.com/remvze/moodist/commit/e4e332ad75aad1a58fd97acb71660b8dec9dfa09))
+* add open-source section ([f7302de](https://github.com/remvze/moodist/commit/f7302dec5b7e182ad465bc30b63457a6e629a5b3))
+* add scroll for lower heights ([758f2f4](https://github.com/remvze/moodist/commit/758f2f48dc6a4e520b7a1e937f96eed28c8e8c20))
+* add simple notepad ([e923559](https://github.com/remvze/moodist/commit/e923559709796698257772cced4e20de584c6c80))
+* add source code item ([d055e66](https://github.com/remvze/moodist/commit/d055e66dd9dd5789c88d1a002686457ea89db073))
+* add special button ([a514a36](https://github.com/remvze/moodist/commit/a514a364ec5b6e2e34e7901ad51219d7be2aee86))
+* add titles ([5f40435](https://github.com/remvze/moodist/commit/5f40435c0ccfec0cb87d9ac0c14723fb8265fa8d))
+* add toolbar to notepad ([7463334](https://github.com/remvze/moodist/commit/7463334053ecd35a53cae535674169f5b50c81c2))
+* change alignments ([1a01a00](https://github.com/remvze/moodist/commit/1a01a0086648c7564ecab30b79df0d67e93eb392))
+* change the copy for features ([38da02a](https://github.com/remvze/moodist/commit/38da02a0d3b08e8f8802d6cf76a04ae656e10b76))
+* change tooltip content ([941e1f0](https://github.com/remvze/moodist/commit/941e1f024189143340d663a0c117c08a0b315599))
+* implement time setting ([f3cb2a1](https://github.com/remvze/moodist/commit/f3cb2a1b63e40f4f742ee2591b9353aa373f9783))
+* persist pomodoro setting ([665e217](https://github.com/remvze/moodist/commit/665e2173f4083128687a6302a6f2fd82674f07c1))
+* persist presets ([38a9a23](https://github.com/remvze/moodist/commit/38a9a23790248d5af522fc0d3cf6e99970e59637))
+
+
+### 🐛 Bug Fixes
+
+* add correct count to description ([81e6666](https://github.com/remvze/moodist/commit/81e66667765879da624544c5d915c1562f2ab34c))
+* add key to categories ([38c11f1](https://github.com/remvze/moodist/commit/38c11f124e2235bc32de1e469b00ccaa22467a7e))
+* add min-width to inputs ([dfd6c1f](https://github.com/remvze/moodist/commit/dfd6c1fc4a41845e686fc6ee96f71b696213fe69))
+* change completion condition ([1ac5286](https://github.com/remvze/moodist/commit/1ac52861d1de651f8245d1e343307c6cf7a13dde))
+* change default times ([158cffc](https://github.com/remvze/moodist/commit/158cffca8c4b138f33e2df03e046706d2b122478))
+* change initial value ([a7e5368](https://github.com/remvze/moodist/commit/a7e53685918187c47d4fc2935418786b772c189e))
+* change z-index values ([79afb8d](https://github.com/remvze/moodist/commit/79afb8d92f9cb8e551bf101267018af1ab58815d))
+* comment out toolbox section ([a8a8c36](https://github.com/remvze/moodist/commit/a8a8c3643478d3da531e1da6c3640eb327acad3b))
+* make sound count dynamic ([f66a6ff](https://github.com/remvze/moodist/commit/f66a6ffde770992353a5b21fe65c20fe50ab4328))
+* remove extra headings ([7390a9b](https://github.com/remvze/moodist/commit/7390a9b3de0c52163d63b42ad48a882087886b65))
+* remove fading ([653d309](https://github.com/remvze/moodist/commit/653d309e64b770c2b270d2435bcd02345b686fec))
+* remove time from tabs array ([110356b](https://github.com/remvze/moodist/commit/110356b2da82e0f1e971ee9dc486664027d886ff))
+* remove word counter dependency ([ae3ea8c](https://github.com/remvze/moodist/commit/ae3ea8c74f9a94ae56a0eb4b165bc36d990dea7b))
+
+### [1.3.1](https://github.com/remvze/moodist/compare/v1.3.0...v1.3.1) (2024-02-01)
+
+
+### ✨ Features
+
+* add donate item ([f12ca48](https://github.com/remvze/moodist/commit/f12ca4806c9279f69f298bef770f8cac69a0860a))
+* add donate section ([d449c29](https://github.com/remvze/moodist/commit/d449c29321024a43517e92cc59223b4b22fe2e82))
+* add donation header ([17b4f25](https://github.com/remvze/moodist/commit/17b4f25ff10e09a917203e67cf963cac8358de1a))
+
+
+### 🐛 Bug Fixes
+
+* coffee typo ([8e02910](https://github.com/remvze/moodist/commit/8e0291004a90e55b67a921b9ffb483b409109ae4))
+* complete donation links ([e6f768a](https://github.com/remvze/moodist/commit/e6f768a5e6dc983ae04b70f6c434fd4c13aeb506))
+
+
+### 🚚 Chores
+
+* add donation link to README file ([1f806c4](https://github.com/remvze/moodist/commit/1f806c4e561d79a00850130eda09376299d85ed2))
+
+## [1.3.0](https://github.com/remvze/moodist/compare/v1.2.0...v1.3.0) (2024-02-01)
+
+
+### ♻️ Code Refactoring
+
+* remove media session ([1f63534](https://github.com/remvze/moodist/commit/1f635348e3e5cf73ee76e1c5fac7b5f5b7f7ea6a))
+* remove unmute and media session ([b77c817](https://github.com/remvze/moodist/commit/b77c817db25e1a738b6770b1ae86d792e0d42240))
+
+
+### ✨ Features
+
+* add fading to intro and outro ([5467bbb](https://github.com/remvze/moodist/commit/5467bbbc2437a5504e157122a995ad7a565ff0b8))
+* add loader for favorites ([f682a91](https://github.com/remvze/moodist/commit/f682a910da97eb53cfb90ce955e953f05088e686))
+* add media session ([5e0a842](https://github.com/remvze/moodist/commit/5e0a84259ff5586700c4e10087485d905be7ccee))
+
+
+### 🐛 Bug Fixes
+
+* add audio element ([889962b](https://github.com/remvze/moodist/commit/889962babe6e940ff283a41b145620d2a0477c70))
+* add media session ([81f33d9](https://github.com/remvze/moodist/commit/81f33d9d375f63b4dd0bf58ad28a72354d85706e))
+* add media session ([216b913](https://github.com/remvze/moodist/commit/216b913ccd0a7dfe0d03575f842aac9711ef0216))
+* add unmute for iOS ([e422b52](https://github.com/remvze/moodist/commit/e422b52436c7dfc0b6cf866afa2b74dc219dcf2f))
+* connect audio context to audio element ([463667c](https://github.com/remvze/moodist/commit/463667c868371540c46c9007e686961f9a4be7e5))
+* increase decimal ([a33ae45](https://github.com/remvze/moodist/commit/a33ae450cf2c883228c76d04df8df75839c12753))
+* remove fading ([d96461d](https://github.com/remvze/moodist/commit/d96461d1ea83c72bfe651d84cf34fabc029c200e))
+* resume audio ([8e4d053](https://github.com/remvze/moodist/commit/8e4d0531e0e9aaf4e52b3b3a8666b74ff0c0222e))
+* undo changes ([32da26c](https://github.com/remvze/moodist/commit/32da26ccfc0c5bdbe031e26ea48363ea0d8a7b23))
+
+
+### 🚚 Chores
+
+* add binaural beats ([f1d212a](https://github.com/remvze/moodist/commit/f1d212abc8b69a614bbdc4a23876e2eab7cbb574))
+* add more sounds ([38f6f7d](https://github.com/remvze/moodist/commit/38f6f7dbe6898ed78e51eb3f0c7936f003ddca08))
+* add more sounds ([937bf29](https://github.com/remvze/moodist/commit/937bf29d09cbce20ea0b6b0c87879f3a7dd1d497))
+* add more sounds ([e2172fd](https://github.com/remvze/moodist/commit/e2172fd2bbd0e12a705c9efc98c72ad99d86d006))
+* add more sounds ([1f12afa](https://github.com/remvze/moodist/commit/1f12afa3943154d70145ef6adc6aeee79f7a7af3))
+* add more sounds ([cd05704](https://github.com/remvze/moodist/commit/cd05704a73ffb33aa0ccf5d789328a4cefc320f1))
+* add more sounds ([01b4bdb](https://github.com/remvze/moodist/commit/01b4bdbb572285984bcdc9bb94c1a1b6dd2630c5))
+
+## [1.2.0](https://github.com/remvze/moodist/compare/v1.1.0...v1.2.0) (2024-01-04)
+
+
+### ♻️ Code Refactoring
+
+* better item structure for menu ([26bf016](https://github.com/remvze/moodist/commit/26bf01690cfcc105b661951bcb2347394a67fb68))
+* rewrite menu with floating ui ([8beb42c](https://github.com/remvze/moodist/commit/8beb42cb1b92c99aa9656b35cd7d82094e5baf72))
+
+
+### 🐛 Bug Fixes
+
+* stringify dependency ([1a23e00](https://github.com/remvze/moodist/commit/1a23e004a65960ce169990211f150db25762fead))
+
+
+### ✨ Features
+
+* add animation to menu box ([17027e2](https://github.com/remvze/moodist/commit/17027e299bb9bf958aebaf735c40e7664ad71e8b))
+* add disabled state ([ff26597](https://github.com/remvze/moodist/commit/ff26597d22d444d18d2874a5c278eccc288972de))
+* add menu button ([184bb09](https://github.com/remvze/moodist/commit/184bb09f5ab09fcf877e6a904023d9de72be9a89))
+* add share modal ([35e3215](https://github.com/remvze/moodist/commit/35e32152b153f4dfaf9e071f526f6d7602ea97fc))
+* add share placeholder ([fe2357c](https://github.com/remvze/moodist/commit/fe2357c995713cd0fb8335b325266859dc47a769))
+* basic structure for share link ([ef81f19](https://github.com/remvze/moodist/commit/ef81f198baeb927e3b1768570f75e6638a7bd0b6))
+* **docker:** add dockerfile ([a234bc1](https://github.com/remvze/moodist/commit/a234bc17a66331acbbc1d980cd1f53d58646f534))
+* implement override feature ([0f62f07](https://github.com/remvze/moodist/commit/0f62f0795c5a9e06fa4e62b6b7b1e6c0774dfe0f))
+* implement sharing URL ([93ff72a](https://github.com/remvze/moodist/commit/93ff72a052484b36c9ac821b94b632865b4a3550))
+
+
+### 💄 Styling
+
+* add animation to modal ([7823dc7](https://github.com/remvze/moodist/commit/7823dc7ff473278ef8ee401e69796c17b33da794))
+* add icon to menu items ([131ab29](https://github.com/remvze/moodist/commit/131ab296215812e45a0c60486d75683f3de25d16))
+* change border color ([85b627e](https://github.com/remvze/moodist/commit/85b627ecb96a4f52ecacdb53ed4484c050adba5e))
+* change copy ([c51acd6](https://github.com/remvze/moodist/commit/c51acd62618cc705902dc01f0574a2c9124264c5))
+* change to primary color ([c8e5122](https://github.com/remvze/moodist/commit/c8e51226e57bfa72ad91318de25fc5f9b5751634))
+* widen the menu ([37a0736](https://github.com/remvze/moodist/commit/37a0736a0e7edd09c33940099c884e5b48afbbf1))
+
+
+### 🚚 Chores
+
+* change docker workflow ([cb4bfea](https://github.com/remvze/moodist/commit/cb4bfea5ab4326dee17c78554f12a08ffcb9dd0e))
+* change docker-compose file ([660ee07](https://github.com/remvze/moodist/commit/660ee07a2359ec77c9d56bbe552541246e0f79c5))
+* update GitHub action ([ee60613](https://github.com/remvze/moodist/commit/ee606139a80121fd6ee1b8233f82af994c4e1178))
+
+## [1.1.0](https://github.com/remvze/moodist/compare/v1.0.0...v1.1.0) (2023-12-29)
+
+
+### ♻️ Code Refactoring
+
+* change ordering config ([a43c679](https://github.com/remvze/moodist/commit/a43c679e214b24c7f547e182aea6e2fbf826228f))
+
+
+### 🐛 Bug Fixes
+
+* change icon path ([28c3c40](https://github.com/remvze/moodist/commit/28c3c404ad790869b13731e4c3622abe33f1dda2))
+
+
+### 🚚 Chores
+
+* add more sounds ([e3864be](https://github.com/remvze/moodist/commit/e3864bede129c102ef5b7258b4688d9177dd284c))
+* add more sounds ([55e7f05](https://github.com/remvze/moodist/commit/55e7f05892f6d3200b56a7e06b371bed4b4c4554))
+* add more sounds ([318e87c](https://github.com/remvze/moodist/commit/318e87c9f1f3e2509c2b8eeb3a7f6875dd1c02fd))
+* add places category ([5970012](https://github.com/remvze/moodist/commit/5970012fa6cbd8222c2be8ce426065f928d81b2b))
+* add transport category ([c1c3945](https://github.com/remvze/moodist/commit/c1c3945d43e84e3011de52bffa5116d58283c473))
+* change heartbeat audio ([f43a378](https://github.com/remvze/moodist/commit/f43a378697437f671c0c33122b1c9ec5a1e173ff))
+* relocate underwater audio ([37bad81](https://github.com/remvze/moodist/commit/37bad8149e1f5170426dc745322c0e65cb9a41ff))
+* remove heartbeat audio ([121a8f2](https://github.com/remvze/moodist/commit/121a8f204c6b61490a7ab0e732779031278e6e8c))
+
+
+### 💄 Styling
+
+* add hover states ([2c74dd0](https://github.com/remvze/moodist/commit/2c74dd0d604af86f99edcba2eb573641ac2010fd))
+* change button style ([8efb1ce](https://github.com/remvze/moodist/commit/8efb1cee00ec0e0dcd9677729d9136ca8d69073f))
+* change sound counter ([00fc5f3](https://github.com/remvze/moodist/commit/00fc5f3a872be51eb875744e254c75ea58e93281))
+* change theme ([bd517f8](https://github.com/remvze/moodist/commit/bd517f88c01202eb7e7e5acf70bf4af2e6f91d75))
+
 ## [1.0.0](https://github.com/remvze/moodist/compare/v0.0.1...v1.0.0) (2023-12-09)
 
 

Dockerfile

@@ -0,0 +1,12 @@
+FROM node:20-alpine3.18 AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine AS runtime
+COPY ./docker/nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 8080

README.md

@@ -2,5 +2,5 @@
   <img src="/assets/banner.svg" alt="Moodist Logo Banner" />
   <h2>Moodist 🌲</h2>
   <p>Ambient sounds for focus and calm.</p>
-  <a href="https://moodist.app">Visit <strong>Moodist</strong> →</a>
+  <a href="https://moodist.app">Visit <strong>Moodist</strong></a> | <a href="https://buymeacoffee.com/remvze">Buy Me a Coffee</a>
 </div>

docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3.9'
+services:
+  moodist:
+    image: ghcr.io/remvze/moodist
+    logging:
+      options:
+        max-size: 1g
+    restart: always
+    ports:
+      - '8080:8080'

docker/nginx/nginx.conf

@@ -0,0 +1,31 @@
+worker_processes  1;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+  server {
+    listen 8080;
+    server_name   _;
+
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    include /etc/nginx/mime.types;
+
+    gzip on;
+    gzip_min_length 1000;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+
+    error_page 404 /404.html;
+    location = /404.html {
+            root /usr/share/nginx/html;
+            internal;
+    }
+
+    location / {
+            try_files $uri $uri/index.html =404;
+    }
+  }
+}

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "moodist",
-  "version": "1.0.0",
+  "version": "1.4.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "moodist",
-      "version": "1.0.0",
+      "version": "1.4.1",
       "dependencies": {
         "@astrojs/react": "^3.0.3",
         "@floating-ui/react": "0.26.0",
@@ -54,7 +54,7 @@
         "standard-version": "9.5.0",
         "stylelint": "15.10.3",
         "stylelint-config-html": "1.1.0",
-        "stylelint-config-idiomatic-order": "9.0.0",
+        "stylelint-config-recess-order": "4.4.0",
         "stylelint-config-standard": "34.0.0",
         "stylelint-prettier": "4.0.2"
       }
@@ -12590,15 +12590,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/postcss-sorting": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-7.0.1.tgz",
-      "integrity": "sha512-iLBFYz6VRYyLJEJsBJ8M3TCqNcckVzz4wFounSc5Oez35ogE/X+aoC5fFu103Ot7NyvjU3/xqIXn93Gp3kJk4g==",
-      "dev": true,
-      "peerDependencies": {
-        "postcss": "^8.3.9"
-      }
-    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -14922,32 +14913,16 @@
         "stylelint": ">=14.0.0"
       }
     },
-    "node_modules/stylelint-config-idiomatic-order": {
-      "version": "9.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-idiomatic-order/-/stylelint-config-idiomatic-order-9.0.0.tgz",
-      "integrity": "sha512-+LtfPycY1Paayf1MaERyh6BzVPnZxemX5NtzdUPqi4u8hyAR7859f/4EL02+Kr9va76iX7mbYC4HendocXKJZQ==",
+    "node_modules/stylelint-config-recess-order": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recess-order/-/stylelint-config-recess-order-4.4.0.tgz",
+      "integrity": "sha512-Q99kvZyIM/aoPEV4dRDkzD3fZLzH0LXi+pawCf1r700uUeF/PHQ5PZXjwFUuGrWhOzd1N+cuVm+OUGsY2fRN5A==",
       "dev": true,
       "dependencies": {
-        "stylelint-order": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=12"
+        "stylelint-order": "6.x"
       },
       "peerDependencies": {
-        "stylelint": ">=11"
-      }
-    },
-    "node_modules/stylelint-config-idiomatic-order/node_modules/stylelint-order": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-5.0.0.tgz",
-      "integrity": "sha512-OWQ7pmicXufDw5BlRqzdz3fkGKJPgLyDwD1rFY3AIEfIH/LQY38Vu/85v8/up0I+VPiuGRwbc2Hg3zLAsJaiyw==",
-      "dev": true,
-      "dependencies": {
-        "postcss": "^8.3.11",
-        "postcss-sorting": "^7.0.1"
-      },
-      "peerDependencies": {
-        "stylelint": "^14.0.0"
+        "stylelint": ">=15"
       }
     },
     "node_modules/stylelint-config-recommended": {
@@ -14977,6 +14952,28 @@
         "stylelint": "^15.10.0"
       }
     },
+    "node_modules/stylelint-order": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/stylelint-order/-/stylelint-order-6.0.4.tgz",
+      "integrity": "sha512-0UuKo4+s1hgQ/uAxlYU4h0o0HS4NiQDud0NAUNI0aa8FJdmYHA5ZZTFHiV5FpmE3071e9pZx5j0QpVJW5zOCUA==",
+      "dev": true,
+      "dependencies": {
+        "postcss": "^8.4.32",
+        "postcss-sorting": "^8.0.2"
+      },
+      "peerDependencies": {
+        "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.1"
+      }
+    },
+    "node_modules/stylelint-order/node_modules/postcss-sorting": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-sorting/-/postcss-sorting-8.0.2.tgz",
+      "integrity": "sha512-M9dkSrmU00t/jK7rF6BZSZauA5MAaBW4i5EnJXspMwt4iqTh/L9j6fgMnbElEOfyRyfLfVbIHj/R52zHzAPe1Q==",
+      "dev": true,
+      "peerDependencies": {
+        "postcss": "^8.4.20"
+      }
+    },
     "node_modules/stylelint-prettier": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/stylelint-prettier/-/stylelint-prettier-4.0.2.tgz",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "moodist",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.4.1",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -67,7 +67,7 @@
     "standard-version": "9.5.0",
     "stylelint": "15.10.3",
     "stylelint-config-html": "1.1.0",
-    "stylelint-config-idiomatic-order": "9.0.0",
+    "stylelint-config-recess-order": "4.4.0",
     "stylelint-config-standard": "34.0.0",
     "stylelint-prettier": "4.0.2"
   }

src/components/about/about.module.css

@@ -0,0 +1,90 @@
+.about {
+  padding-top: 10px;
+
+  & .effect {
+    position: sticky;
+    top: 0;
+    height: 80px;
+    background: linear-gradient(var(--color-neutral-50), transparent);
+  }
+
+  & .paragraph {
+    padding: 30px 0;
+    background: linear-gradient(
+      transparent,
+      var(--color-neutral-50) 10%,
+      var(--color-neutral-50) 90%,
+      transparent
+    );
+
+    &:last-of-type {
+      padding-bottom: 0;
+    }
+
+    & .counter {
+      width: max-content;
+      padding: 6px 16px;
+      margin-bottom: 16px;
+      font-size: var(--font-xsm);
+      color: var(--color-foreground-subtle);
+      background: linear-gradient(var(--color-neutral-100), transparent);
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 20px 20px 20px 8px;
+
+      & span {
+        font-weight: 500;
+        color: var(--color-foreground);
+      }
+    }
+
+    & .title {
+      margin-bottom: 8px;
+      font-family: var(--font-heading);
+      font-size: var(--font-md);
+      font-weight: 600;
+    }
+
+    & .body {
+      line-height: 1.6;
+      color: var(--color-foreground-subtle);
+    }
+  }
+
+  .button {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px 16px;
+    margin-top: 20px;
+    font-size: var(--font-xsm);
+    font-weight: 500;
+    color: var(--color-foreground);
+    cursor: pointer;
+    background-color: transparent;
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 50px;
+    outline: none;
+    transition: 0.2s;
+
+    &::before {
+      position: absolute;
+      top: -1px;
+      left: 50%;
+      width: 70%;
+      height: 1px;
+      content: '';
+      background: linear-gradient(
+        90deg,
+        transparent,
+        var(--color-neutral-300),
+        transparent
+      );
+      transform: translateX(-50%);
+    }
+
+    &:hover {
+      background-color: var(--color-neutral-100);
+    }
+  }
+}

src/components/about/about.tsx

@@ -0,0 +1,60 @@
+import { Container } from '@/components/container';
+import { count as soundCount } from '@/lib/sounds';
+
+import styles from './about.module.css';
+
+export function About() {
+  const count = soundCount();
+
+  const paragraphs = [
+    {
+      body: 'Craving a calming escape from the daily grind? Do you need the perfect soundscape to boost your focus or lull you into peaceful sleep? Look no further than Moodist, your free and open-source ambient sound generator! Ditch the subscriptions and registrations – with Moodist, you unlock a world of soothing and immersive audio experiences, entirely for free.',
+      title: 'Free Ambient Sounds',
+    },
+    {
+      body: `Dive into an expansive library of ${count} carefully curated sounds. Nature lovers will find solace in the gentle murmur of streams, the rhythmic crash of waves, or the crackling warmth of a campfire. Cityscapes come alive with the soft hum of cafes, the rhythmic clatter of trains, or the calming white noise of traffic. And for those seeking deeper focus or relaxation, Moodist offers binaural beats and color noise designed to enhance your state of mind.`,
+      title: 'Carefully Curated Sounds',
+    },
+    {
+      body: 'The beauty of Moodist lies in its simplicity and customization. No complex menus or confusing options – just choose your desired sounds, adjust the volume balance, and hit play. Want to blend the gentle chirping of birds with the soothing sound of rain? No problem! Layer as many sounds as you like to create your personalized soundscape oasis.',
+      title: 'Create Your Soundscape',
+    },
+    // {
+    //   body: 'Moodist goes beyond just ambient sounds by offering a suite of productivity tools to help you stay organized and focused. Utilize the built-in pomodoro timer to structure your workday in focused intervals, jot down thoughts and ideas in the simple notepad, and keep track of your tasks with the handy to-do list. These tools seamlessly integrate with the ambient soundscapes, allowing you to create a personalized environment that fosters both focus and relaxation.',
+    //   title: 'A Productivity Toolbox',
+    // },
+    {
+      body: "Whether you're looking to unwind after a long day, enhance your focus during work, or lull yourself into a peaceful sleep, Moodist has the perfect soundscape waiting for you. The best part? It's completely free and open-source, so you can enjoy its benefits without any strings attached. Start using Moodist today and discover your new haven of tranquility and focus!",
+      title: 'Sounds for Every Moment',
+    },
+  ];
+
+  const handleClick = () => {
+    const app = document.getElementById('app');
+
+    app?.scrollIntoView();
+  };
+
+  return (
+    <section className={styles.about}>
+      <div className={styles.effect} />
+
+      <Container tight>
+        {paragraphs.map((paragraph, index) => (
+          <div className={styles.paragraph} key={index}>
+            <div className={styles.counter}>
+              <span>0{index + 1}</span> / 0{paragraphs.length}
+            </div>
+
+            <h2 className={styles.title}>{paragraph.title}</h2>
+            <p className={styles.body}>{paragraph.body}</p>
+          </div>
+        ))}
+
+        <button className={styles.button} onClick={handleClick}>
+          Use Moodist
+        </button>
+      </Container>
+    </section>
+  );
+}

src/components/about/index.ts

@@ -0,0 +1 @@
+export { About } from './about';

src/components/app/app.tsx

@@ -1,6 +1,7 @@
-import { useMemo } from 'react';
+import { useMemo, useEffect } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { BiSolidHeart } from 'react-icons/bi/index';
+import { Howler } from 'howler';
 
 import { useSoundStore } from '@/store';
 
@@ -8,8 +9,8 @@ import { Container } from '@/components/container';
 import { StoreConsumer } from '@/components/store-consumer';
 import { Buttons } from '@/components/buttons';
 import { Categories } from '@/components/categories';
-import { ScrollToTop } from '@/components/scroll-to-top';
-import { Shuffle } from '@/components/shuffle';
+import { SharedModal } from '@/components/modals/shared';
+import { Toolbar } from '@/components/toolbar';
 import { SnackbarProvider } from '@/contexts/snackbar';
 
 import { sounds } from '@/data/sounds';
@@ -35,6 +36,22 @@ export function App() {
     );
   }, [favorites, categories]);
 
+  useEffect(() => {
+    const onChange = () => {
+      const { ctx } = Howler;
+
+      if (ctx && !document.hidden) {
+        setTimeout(() => {
+          ctx.resume();
+        }, 100);
+      }
+    };
+
+    document.addEventListener('visibilitychange', onChange, false);
+
+    return () => document.removeEventListener('visibilitychange', onChange);
+  }, []);
+
   const allCategories = useMemo(() => {
     const favorites = [];
 
@@ -59,8 +76,8 @@ export function App() {
           <Categories categories={allCategories} />
         </Container>
 
-        <ScrollToTop />
-        <Shuffle />
+        <Toolbar />
+        <SharedModal />
       </StoreConsumer>
     </SnackbarProvider>
   );

src/components/buttons/buttons.module.css

@@ -1,11 +1,11 @@
 .buttons {
   position: sticky;
-  z-index: 10;
   top: 30px;
+  z-index: 10;
   display: flex;
-  width: max-content;
+  column-gap: 10px;
   align-items: center;
   justify-content: center;
+  width: max-content;
   margin: 0 auto;
-  column-gap: 10px;
 }

src/components/buttons/play/play.module.css

@@ -1,20 +1,23 @@
 .playButton {
   display: flex;
-  width: 150px;
-  height: 45px;
   align-items: center;
   justify-content: center;
-  border: none;
-  border-radius: 100px;
-  border-top: 2px solid #34d399;
-  border-bottom: 3px solid #059669;
-  background-color: #10b981;
-  color: #022c22;
-  cursor: pointer;
+  width: 150px;
+  height: 45px;
   font-family: var(--font-heading);
   font-size: var(--font-base);
   line-height: 0;
+  color: var(--color-neutral-200);
+  cursor: pointer;
+  background-color: var(--color-neutral-950);
+  border: 1px solid var(--color-neutral-50);
+  border-radius: 100px;
   outline: none;
+  transition: 0.2s;
+
+  &:hover {
+    background-color: var(--color-neutral-800);
+  }
 
   &:disabled,
   &.disabled {

src/components/buttons/unselect/unselect.module.css

@@ -1,19 +1,17 @@
 .unselectButton {
   display: flex;
-  width: 45px;
-  height: 45px;
   align-items: center;
   justify-content: center;
-  border: none;
-  border-radius: 100px;
-  border-top: 2px solid #fb7185;
-  border-bottom: 3px solid #be123c;
-  background-color: #f43f5e;
-  color: var(--color-foreground);
-  cursor: pointer;
+  width: 45px;
+  height: 45px;
   font-family: var(--font-heading);
   font-size: var(--font-md);
   line-height: 0;
+  color: var(--color-foreground);
+  cursor: pointer;
+  background-color: var(--color-neutral-100);
+  border: 1px solid var(--color-neutral-300);
+  border-radius: 100px;
   outline: none;
   transition: 0.2s;
 
@@ -22,18 +20,15 @@
     cursor: not-allowed;
   }
 
-  &.restore {
-    border-top-color: var(--color-neutral-950);
-    border-bottom-color: var(--color-neutral-600);
-    background-color: var(--color-neutral-700);
-    color: var(--color-neutral-200);
+  &:hover {
+    background-color: var(--color-neutral-200);
   }
 }
 
 .tooltip {
   padding: 6px 12px;
+  font-size: var(--font-xsm);
+  background-color: var(--color-neutral-100);
   border: 1px solid var(--color-neutral-200);
   border-radius: 100px;
-  background-color: var(--color-neutral-100);
-  font-size: var(--font-xsm);
 }

src/components/buttons/unselect/unselect.tsx

@@ -48,7 +48,6 @@ export function UnselectButton() {
                 }
                 className={cn(
                   styles.unselectButton,
-                  hasHistory && styles.restore,
                   noSelected && !hasHistory && styles.disabled,
                 )}
                 onClick={() => {

src/components/categories/categories.tsx

@@ -1,6 +1,7 @@
 import { AnimatePresence } from 'framer-motion';
 
 import { Category } from '@/components/category';
+import { Donate } from './donate';
 
 import type { Categories } from '@/data/types';
 
@@ -11,12 +12,12 @@ interface CategoriesProps {
 export function Categories({ categories }: CategoriesProps) {
   return (
     <AnimatePresence initial={false}>
-      {categories.map(category => (
-        <Category
-          functional={category.id !== 'favorites'}
-          {...category}
-          key={category.id}
-        />
+      {categories.map((category, index) => (
+        <div key={category.id}>
+          <Category functional={category.id !== 'favorites'} {...category} />
+
+          {index === 3 && <Donate />}
+        </div>
       ))}
     </AnimatePresence>
   );

src/components/categories/donate/donate.module.css

@@ -0,0 +1,45 @@
+.donate {
+  margin-bottom: 20px;
+
+  & .iconContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 15px;
+
+    & .tail {
+      width: 1px;
+      height: 75px;
+      background: linear-gradient(transparent, var(--color-neutral-300));
+    }
+
+    & .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+      height: 45px;
+      font-size: var(--font-md);
+      background-color: var(--color-neutral-100);
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 50%;
+    }
+  }
+
+  & .title {
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+    text-align: center;
+  }
+
+  & .desc {
+    margin-top: 8px;
+    color: var(--color-foreground-subtle);
+    text-align: center;
+  }
+
+  .button {
+    margin: 16px auto 0;
+  }
+}

src/components/categories/donate/donate.tsx

@@ -0,0 +1,27 @@
+import { FaCoffee } from 'react-icons/fa/index';
+
+import { SpecialButton } from '@/components/special-button';
+
+import styles from './donate.module.css';
+
+export function Donate() {
+  return (
+    <div className={styles.donate}>
+      <div className={styles.iconContainer}>
+        <div className={styles.tail} />
+        <div className={styles.icon}>
+          <FaCoffee />
+        </div>
+      </div>
+
+      <div className={styles.title}>Support Me</div>
+      <p className={styles.desc}>Help me keep Moodist ad-free.</p>
+      <SpecialButton
+        className={styles.button}
+        href="https://buymeacoffee.com/remvze"
+      >
+        Donate Today
+      </SpecialButton>
+    </div>
+  );
+}

src/components/categories/donate/index.ts

@@ -0,0 +1 @@
+export { Donate } from './donate';

src/components/category/category.module.css

@@ -17,14 +17,14 @@
 
     & .icon {
       display: flex;
-      width: 45px;
-      height: 45px;
       align-items: center;
       justify-content: center;
+      width: 45px;
+      height: 45px;
+      font-size: var(--font-md);
+      background-color: var(--color-neutral-100);
       border: 1px solid var(--color-neutral-300);
       border-radius: 50%;
-      background-color: var(--color-neutral-100);
-      font-size: var(--font-md);
     }
   }
 

src/components/category/category.tsx

@@ -22,7 +22,7 @@ export function Category({
         <div className={styles.icon}>{icon}</div>
       </div>
 
-      <h2 className={styles.title}>{title}</h2>
+      <div className={styles.title}>{title}</div>
 
       <Sounds functional={functional} id={id} sounds={sounds} />
     </div>

src/components/container/container.module.css

@@ -2,4 +2,12 @@
   width: 90%;
   max-width: 600px;
   margin: 0 auto;
+
+  &.tight {
+    max-width: 450px;
+  }
+
+  &.wide {
+    max-width: 760px;
+  }
 }

src/components/container/container.tsx

@@ -1,9 +1,30 @@
+import { cn } from '@/helpers/styles';
+
 import styles from './container.module.css';
 
 interface ContainerProps {
   children: React.ReactNode;
+  className?: string;
+  tight?: boolean;
+  wide?: boolean;
 }
 
-export function Container({ children }: ContainerProps) {
-  return <div className={styles.container}>{children}</div>;
+export function Container({
+  children,
+  className,
+  tight,
+  wide,
+}: ContainerProps) {
+  return (
+    <div
+      className={cn(
+        styles.container,
+        className,
+        tight && styles.tight,
+        wide && styles.wide,
+      )}
+    >
+      {children}
+    </div>
+  );
 }

src/components/donate/donate.module.css

@@ -0,0 +1,36 @@
+.wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 16px;
+  font-size: var(--font-xsm);
+  color: var(--color-foreground-subtle);
+
+  &::after {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    width: 80%;
+    height: 1px;
+    content: '';
+    background: linear-gradient(
+      90deg,
+      transparent,
+      var(--color-neutral-200),
+      transparent
+    );
+    transform: translateX(-50%);
+  }
+
+  & .text {
+    text-align: center;
+
+    & a {
+      font-weight: 500;
+      color: var(--color-foreground);
+      text-decoration: none;
+    }
+  }
+}

src/components/donate/donate.tsx

@@ -0,0 +1,22 @@
+import { Container } from '@/components/container';
+
+import styles from './donate.module.css';
+
+export function Donate() {
+  return (
+    <Container>
+      <section className={styles.wrapper}>
+        <p className={styles.text}>
+          Enjoy Moodist?{' '}
+          <a
+            href="https://buymeacoffee.com/remvze"
+            rel="noreferrer"
+            target="_blank"
+          >
+            Support with a donation!
+          </a>
+        </p>
+      </section>
+    </Container>
+  );
+}

src/components/donate/index.ts

@@ -0,0 +1 @@
+export { Donate } from './donate';

src/components/features/features.module.css

@@ -0,0 +1,99 @@
+.featuresSection {
+  margin-top: 40px;
+
+  & .iconContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 15px;
+
+    & .tail {
+      width: 1px;
+      height: 75px;
+      background: linear-gradient(transparent, var(--color-neutral-300));
+    }
+
+    & .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+      height: 45px;
+      font-size: var(--font-md);
+      background-color: var(--color-neutral-100);
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 50%;
+    }
+  }
+
+  & .title {
+    margin-bottom: 8px;
+    font-family: var(--font-display);
+    font-size: var(--font-lg);
+    font-weight: 600;
+    text-align: center;
+  }
+
+  & .features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    row-gap: 32px;
+    column-gap: 20px;
+    margin-top: 24px;
+
+    & .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      margin: 0 auto;
+      margin-bottom: 12px;
+      font-size: var(--font-md);
+      color: var(--color-foreground-subtle);
+      background: linear-gradient(var(--color-neutral-100), transparent);
+      border: 1px solid var(--color-neutral-200);
+      border-radius: 12px;
+    }
+
+    & .label {
+      margin-bottom: 8px;
+      font-family: var(--font-heading);
+      font-weight: 600;
+      text-align: center;
+    }
+
+    & .body {
+      width: 100%;
+      max-width: 275px;
+      margin: 0 auto;
+      line-height: 1.6;
+      color: var(--color-foreground-subtle);
+      text-align: center;
+    }
+
+    & .link {
+      display: block;
+      margin-top: 8px;
+      font-size: var(--font-sm);
+      font-weight: 500;
+      color: var(--color-foreground);
+      text-align: center;
+      text-decoration: none;
+    }
+
+    & .soon {
+      display: flex;
+      width: max-content;
+      padding: 6px 12px;
+      margin: 0 auto;
+      margin-top: 8px;
+      font-size: var(--font-2xsm);
+      font-weight: 500;
+      line-height: 1;
+      background: linear-gradient(var(--color-neutral-100), transparent);
+      border: 1px solid var(--color-neutral-300);
+      border-radius: 100px;
+    }
+  }
+}

src/components/features/features.tsx

@@ -0,0 +1,107 @@
+import { BiMoney, BiUserCircle, BiLogoGithub } from 'react-icons/bi/index';
+import { BsSoundwave, BsStars } from 'react-icons/bs/index';
+import { RxMixerHorizontal } from 'react-icons/rx/index';
+
+import { Balancer } from 'react-wrap-balancer';
+
+import { Container } from '@/components/container';
+import { count as soundCount } from '@/lib/sounds';
+
+import styles from './features.module.css';
+
+export function Features() {
+  const count = soundCount();
+
+  const features = [
+    {
+      Icon: BiMoney,
+      body: 'Immerse yourself in sound without spending a dime.',
+      id: 'free-access',
+      label: 'Free Access',
+    },
+    {
+      Icon: BiUserCircle,
+      body: 'Dive right in, no sign-up hoops to jump through.',
+      id: 'no-registration',
+      label: 'No Registration',
+    },
+    {
+      Icon: BsSoundwave,
+      body: `Explore ${count} unique soundscapes, from rainforests to cityscapes.`,
+      id: 'diverse-sounds',
+      label: 'Diverse Sounds',
+    },
+    {
+      Icon: RxMixerHorizontal,
+      body: 'Craft your perfect soundscape by blending and adjusting sounds.',
+      id: 'customizable-mixes',
+      label: 'Customizable Mixes',
+    },
+    {
+      Icon: BiLogoGithub,
+      body: 'Contribute and collaborate, making the best even better.',
+      id: 'open-source',
+      label: 'Open-Source',
+      link: {
+        label: 'Source Code',
+        url: 'https://github.com/remvze/moodist',
+      },
+    },
+    {
+      Icon: BsStars,
+      body: 'Uninterrupted immersion, focus on the sounds, not the tech.',
+      id: 'seamless-experience',
+      label: 'Seamless Experience',
+    },
+    {
+      Icon: BsStars,
+      body: 'Spread the calm, easily share your customized sound blends.',
+      id: 'share-selections',
+      label: 'Share Selections',
+    },
+    {
+      Icon: BsStars,
+      body: 'Lock in your favorite mixes for instant return to your sonic haven.',
+      id: 'save-presets',
+      label: 'Save Presets',
+      soon: true,
+    },
+  ];
+
+  return (
+    <section className={styles.featuresSection}>
+      <Container>
+        <div className={styles.iconContainer}>
+          <div className={styles.tail} />
+          <div className={styles.icon}>
+            <BsStars />
+          </div>
+        </div>
+
+        <h2 className={styles.title}>Features</h2>
+
+        <div className={styles.features}>
+          {features.map(feature => (
+            <div className={styles.reason} key={feature.id}>
+              <div className={styles.icon}>
+                <feature.Icon />
+              </div>
+              <h3 className={styles.label}>{feature.label}</h3>
+              <p className={styles.body}>
+                <Balancer>{feature.body}</Balancer>
+              </p>
+
+              {feature.link && (
+                <a className={styles.link} href={feature.link.url}>
+                  {feature.link.label}
+                </a>
+              )}
+
+              {feature.soon && <div className={styles.soon}>Coming Soon</div>}
+            </div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}

src/components/features/index.ts

@@ -0,0 +1 @@
+export { Features } from './features';

src/components/footer.astro

@@ -1,38 +0,0 @@
----
-import { Container } from '@/components/container';
----
-
-<footer class="footer">
-  <Container>
-    <p>
-      Created by{' '}
-      <a href="https://twitter.com/remvze">
-        Maze <span>✦</span>
-      </a>
-    </p>
-  </Container>
-</footer>
-
-<style>
-  .footer {
-    display: flex;
-    height: 100px;
-    align-items: center;
-
-    & p {
-      color: var(--color-foreground-subtle);
-      font-size: var(--font-sm);
-      text-align: center;
-
-      & a {
-        color: var(--color-foreground);
-        font-weight: 500;
-        text-decoration: none;
-
-        & span {
-          color: #c0eb75;
-        }
-      }
-    }
-  }
-</style>

src/components/footer/footer.module.css

@@ -0,0 +1,17 @@
+.footer {
+  display: flex;
+  align-items: center;
+  height: 100px;
+
+  & p {
+    font-size: var(--font-sm);
+    color: var(--color-foreground-subtle);
+    text-align: center;
+
+    & a {
+      font-weight: 500;
+      color: var(--color-foreground);
+      text-decoration: none;
+    }
+  }
+}

src/components/footer/footer.tsx

@@ -0,0 +1,15 @@
+import { Container } from '@/components/container';
+
+import styles from './footer.module.css';
+
+export function Footer() {
+  return (
+    <footer className={styles.footer}>
+      <Container>
+        <p>
+          Created by <a href="https://twitter.com/remvze">Maze ✦</a>
+        </p>
+      </Container>
+    </footer>
+  );
+}

src/components/footer/index.ts

@@ -0,0 +1 @@
+export { Footer } from './footer';

src/components/hero.astro

@@ -1,114 +0,0 @@
----
-import { Balancer } from 'react-wrap-balancer';
-
-import { Container } from '@/components/container';
-import { count as soundCount } from '@/lib/sounds';
-
-const count = soundCount();
----
-
-<div class="hero">
-  <Container>
-    <img
-      alt="Faded Moodist Logo"
-      class="logo"
-      height={45}
-      src="/logo.svg"
-      width={45}
-    />
-
-    <div class="title">
-      <div class="left"></div>
-      <h1>Moodist</h1>
-      <div class="right"></div>
-    </div>
-
-    <p class="desc">
-      <Balancer>Ambient sounds for focus and calm.</Balancer>
-    </p>
-
-    <p class="sounds">{count} Sounds</p>
-  </Container>
-</div>
-
-<style>
-  .hero {
-    padding: 140px 0 60px;
-    text-align: center;
-
-    & .logo {
-      display: block;
-      width: 45px;
-      margin: 0 auto 12px;
-    }
-
-    & .title {
-      display: flex;
-      align-items: center;
-      column-gap: 15px;
-
-      & div {
-        height: 1px;
-        flex-grow: 1;
-
-        &.left {
-          background: linear-gradient(
-            90deg,
-            transparent,
-            var(--color-neutral-300)
-          );
-        }
-
-        &.right {
-          background: linear-gradient(
-            90deg,
-            var(--color-neutral-300),
-            transparent
-          );
-        }
-      }
-
-      & h1 {
-        font-family: var(--font-display);
-        font-size: var(--font-2xlg);
-        font-weight: 600;
-      }
-    }
-
-    & .desc {
-      margin-top: 5px;
-      color: var(--color-foreground-subtle);
-      line-height: 1.6;
-    }
-
-    & .sounds {
-      position: relative;
-      display: flex;
-      width: max-content;
-      align-items: center;
-      justify-content: center;
-      padding: 6px 16px;
-      border: 1px solid var(--color-neutral-200);
-      border-radius: 100px;
-      margin: 20px auto 0;
-      background-color: var(--color-neutral-100);
-      font-size: var(--font-xsm);
-
-      &::before {
-        position: absolute;
-        top: -1px;
-        left: 50%;
-        width: 70%;
-        height: 1px;
-        background: linear-gradient(
-          90deg,
-          transparent,
-          var(--color-neutral-400),
-          transparent
-        );
-        content: '';
-        transform: translateX(-50%);
-      }
-    }
-  }
-</style>

src/components/hero/hero.module.css

@@ -0,0 +1,120 @@
+.hero {
+  text-align: center;
+
+  .container {
+    position: relative;
+    padding: 100px 0 80px;
+
+    /* padding: 120px 0 60px; */
+
+    & .pattern {
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      background-image: radial-gradient(
+        var(--color-neutral-300) 5%,
+        transparent 5%
+      );
+      background-position: top center;
+      background-size: 31px 31px;
+      opacity: 0.9;
+      mask-image: linear-gradient(#fff, transparent, transparent);
+    }
+  }
+
+  & .logo {
+    display: block;
+    width: 45px;
+    margin: 0 auto 12px;
+  }
+
+  & .title {
+    display: flex;
+    column-gap: 15px;
+    align-items: center;
+
+    & div {
+      flex-grow: 1;
+      height: 1px;
+
+      &.left {
+        background: linear-gradient(
+          90deg,
+          transparent,
+          transparent,
+          var(--color-neutral-200),
+          var(--color-neutral-300)
+        );
+      }
+
+      &.right {
+        background: linear-gradient(
+          90deg,
+          var(--color-neutral-300),
+          var(--color-neutral-200),
+          transparent,
+          transparent
+        );
+      }
+    }
+
+    & h2 {
+      font-family: var(--font-display);
+      font-size: var(--font-2xlg);
+      font-weight: 600;
+    }
+  }
+
+  & .desc {
+    margin-top: 5px;
+    line-height: 1.6;
+    color: var(--color-foreground-subtle);
+  }
+
+  & .sounds {
+    position: relative;
+    display: flex;
+    column-gap: 8px;
+    align-items: center;
+    justify-content: center;
+    width: max-content;
+    height: 28px;
+    padding-right: 12px;
+    margin: 20px auto 0;
+    font-size: var(--font-xsm);
+    color: var(--color-foreground-subtle);
+    background: linear-gradient(var(--color-neutral-100), transparent);
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 100px;
+
+    & .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 0 10px;
+      color: var(--color-foreground);
+      border-right: 1px solid var(--color-neutral-200);
+      border-radius: 0 100px 100px 0;
+    }
+
+    &::before {
+      position: absolute;
+      top: -1px;
+      left: 50%;
+      width: 70%;
+      height: 1px;
+      content: '';
+      background: linear-gradient(
+        90deg,
+        transparent,
+        var(--color-neutral-400),
+        transparent
+      );
+      transform: translateX(-50%);
+    }
+  }
+}

src/components/hero/hero.tsx

@@ -0,0 +1,42 @@
+import { useMemo } from 'react';
+import { BsSoundwave } from 'react-icons/bs/index';
+
+import { Container } from '@/components/container';
+import { count as soundCount } from '@/lib/sounds';
+
+import styles from './hero.module.css';
+
+export function Hero() {
+  const count = useMemo(soundCount, []);
+
+  return (
+    <div className={styles.hero}>
+      <Container className={styles.container}>
+        {/* <div className={styles.pattern} /> */}
+
+        <img
+          alt="Faded Moodist Logo"
+          className={styles.logo}
+          height={45}
+          src="/logo.svg"
+          width={45}
+        />
+
+        <div className={styles.title}>
+          <div className={styles.left}></div>
+          <h2>Moodist</h2>
+          <div className={styles.right}></div>
+        </div>
+
+        <h1 className={styles.desc}>Ambient sounds for focus and calm.</h1>
+
+        <p className={styles.sounds}>
+          <span className={styles.icon}>
+            <BsSoundwave />
+          </span>
+          <span>{count} Sounds</span>
+        </p>
+      </Container>
+    </div>
+  );
+}

src/components/hero/index.ts

@@ -0,0 +1 @@
+export { Hero } from './hero';

src/components/menu/divider/divider.module.css

@@ -0,0 +1,6 @@
+.divider {
+  width: 100%;
+  height: 1px;
+  min-height: 1px;
+  background-color: var(--color-neutral-200);
+}

src/components/menu/divider/divider.tsx

@@ -0,0 +1,5 @@
+import styles from './divider.module.css';
+
+export function Divider() {
+  return <div className={styles.divider} />;
+}

src/components/menu/divider/index.ts

@@ -0,0 +1 @@
+export { Divider } from './divider';

src/components/menu/index.ts

@@ -0,0 +1 @@
+export { Menu } from './menu';

src/components/menu/item/index.ts

@@ -0,0 +1 @@
+export { Item } from './item';

src/components/menu/item/item.module.css

@@ -0,0 +1,43 @@
+.item {
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 40px;
+  min-height: 40px;
+  padding: 0 12px;
+  font-size: var(--font-sm);
+  line-height: 1;
+  color: var(--color-foreground-subtle);
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  background-color: transparent;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  outline: none;
+  transition: 0.2s;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.4;
+  }
+
+  &:not(:disabled):hover {
+    color: var(--color-foreground);
+    background-color: var(--color-neutral-200);
+    border: 1px solid var(--color-neutral-300);
+  }
+
+  & .icon {
+    color: var(--color-foreground);
+  }
+
+  & .active {
+    width: 4px;
+    height: 4px;
+    background: var(--color-neutral-950);
+    border-radius: 50%;
+  }
+}

src/components/menu/item/item.tsx

@@ -0,0 +1,33 @@
+import styles from './item.module.css';
+
+interface ItemProps {
+  active?: boolean;
+  disabled?: boolean;
+  href?: string;
+  icon: React.ReactElement;
+  label: string;
+  onClick?: () => void;
+}
+
+export function Item({
+  active,
+  disabled = false,
+  href,
+  icon,
+  label,
+  onClick = () => {},
+}: ItemProps) {
+  const Comp = href ? 'a' : 'button';
+
+  return (
+    <Comp
+      className={styles.item}
+      disabled={disabled}
+      onClick={onClick}
+      {...(href ? { href, target: '_blank' } : {})}
+    >
+      <span className={styles.icon}>{icon}</span> {label}
+      {active && <div className={styles.active} />}
+    </Comp>
+  );
+}

src/components/menu/items/donate.tsx

@@ -0,0 +1,13 @@
+import { SiBuymeacoffee } from 'react-icons/si/index';
+
+import { Item } from '../item';
+
+export function Donate() {
+  return (
+    <Item
+      href="https://buymeacoffee.com/remvze"
+      icon={<SiBuymeacoffee />}
+      label="Buy Me a Coffee"
+    />
+  );
+}

src/components/menu/items/index.ts

@@ -0,0 +1,7 @@
+export { Shuffle as ShuffleItem } from './shuffle';
+export { Share as ShareItem } from './share';
+export { Donate as DonateItem } from './donate';
+export { Notepad as NotepadItem } from './notepad';
+export { Source as SourceItem } from './source';
+export { Pomodoro as PomodoroItem } from './pomodoro';
+export { Presets as PresetsItem } from './presets';

src/components/menu/items/notepad.tsx

@@ -0,0 +1,22 @@
+import { MdNotes } from 'react-icons/md/index';
+
+import { Item } from '../item';
+
+import { useNoteStore } from '@/store';
+
+interface NotepadProps {
+  open: () => void;
+}
+
+export function Notepad({ open }: NotepadProps) {
+  const note = useNoteStore(state => state.note);
+
+  return (
+    <Item
+      active={!!note.length}
+      icon={<MdNotes />}
+      label="Notepad"
+      onClick={open}
+    />
+  );
+}

src/components/menu/items/pomodoro.tsx

@@ -0,0 +1,22 @@
+import { MdOutlineAvTimer } from 'react-icons/md/index';
+
+import { Item } from '../item';
+
+import { usePomodoroStore } from '@/store';
+
+interface PomodoroProps {
+  open: () => void;
+}
+
+export function Pomodoro({ open }: PomodoroProps) {
+  const running = usePomodoroStore(state => state.running);
+
+  return (
+    <Item
+      active={running}
+      icon={<MdOutlineAvTimer />}
+      label="Pomodoro"
+      onClick={open}
+    />
+  );
+}

src/components/menu/items/presets.tsx

@@ -0,0 +1,11 @@
+import { RiPlayListFill } from 'react-icons/ri/index';
+
+import { Item } from '../item';
+
+interface PresetsProps {
+  open: () => void;
+}
+
+export function Presets({ open }: PresetsProps) {
+  return <Item icon={<RiPlayListFill />} label="Your Presets" onClick={open} />;
+}

src/components/menu/items/share.tsx

@@ -0,0 +1,22 @@
+import { IoShareSocialSharp } from 'react-icons/io5/index';
+
+import { Item } from '../item';
+
+import { useSoundStore } from '@/store';
+
+interface ShareProps {
+  open: () => void;
+}
+
+export function Share({ open }: ShareProps) {
+  const noSelected = useSoundStore(state => state.noSelected());
+
+  return (
+    <Item
+      disabled={noSelected}
+      icon={<IoShareSocialSharp />}
+      label="Share Sounds"
+      onClick={open}
+    />
+  );
+}

src/components/menu/items/shuffle.tsx

@@ -0,0 +1,11 @@
+import { BiShuffle } from 'react-icons/bi/index';
+
+import { useSoundStore } from '@/store';
+
+import { Item } from '../item';
+
+export function Shuffle() {
+  const shuffle = useSoundStore(state => state.shuffle);
+
+  return <Item icon={<BiShuffle />} label="Shuffle Sounds" onClick={shuffle} />;
+}