chore(release): 1.4.2

chore: remove arm/v6
style: change font path
2026-03-06 03:53:13 +08:00 · 2024-04-11 15:38:00 +03:30 · 2024-04-11 15:37:39 +03:30 · 2024-04-11 15:37:11 +03:30 · 2024-04-11 15:14:42 +03:30 · 2024-04-11 15:13:49 +03:30
160 changed files with 3568 additions and 563 deletions
--- a/.eslintrc.json
+++ b/.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",
      {
--- a/.github/workflows/build_docker.yml
+++ b/.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 \
+            -t $IMAGE_NAME:latest \
+            -t $IMAGE_NAME:$GIT_TAG \
+            --push .
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,231 @@

 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.2](https://github.com/remvze/moodist/compare/v1.4.1...v1.4.2) (2024-04-11)
+
+
+### 💄 Styling
+
+* change font path ([43ba975](https://github.com/remvze/moodist/commit/43ba9754085d7a710d3d629e70f873b16f267507))
+
+
+### 🚚 Chores
+
+* remove arm/v6 ([017c27f](https://github.com/remvze/moodist/commit/017c27fb2b20402553011db8f417717dcca6d447))
+
+### [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)


--- a/12
+++ b/12
@@ -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
--- a/README.md
+++ b/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>
--- a/docker-compose.yml
+++ b/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'
--- a/docker/nginx/nginx.conf
+++ b/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;
+    }
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "moodist",
-  "version": "1.1.0",
+  "version": "1.4.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "moodist",
-      "version": "1.1.0",
+      "version": "1.4.2",
      "dependencies": {
        "@astrojs/react": "^3.0.3",
        "@floating-ui/react": "0.26.0",
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "moodist",
  "type": "module",
-  "version": "1.1.0",
+  "version": "1.4.2",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
--- a/public/fonts/inter-tight-v7-latin-700.woff2
+++ b/public/fonts/inter-tight-v7-latin-700.woff2
--- a/public/sounds/alarm.mp3
+++ b/public/sounds/alarm.mp3
--- a/public/sounds/animals/crows.mp3
+++ b/public/sounds/animals/crows.mp3
--- a/public/sounds/animals/whale.mp3
+++ b/public/sounds/animals/whale.mp3
--- a/public/sounds/binaural/binaural-alpha.wav
+++ b/public/sounds/binaural/binaural-alpha.wav
--- a/public/sounds/binaural/binaural-beta.wav
+++ b/public/sounds/binaural/binaural-beta.wav
--- a/public/sounds/binaural/binaural-delta.wav
+++ b/public/sounds/binaural/binaural-delta.wav
--- a/public/sounds/binaural/binaural-gamma.wav
+++ b/public/sounds/binaural/binaural-gamma.wav
--- a/public/sounds/binaural/binaural-theta.wav
+++ b/public/sounds/binaural/binaural-theta.wav
--- a/public/sounds/nature/wind-in-trees.mp3
+++ b/public/sounds/nature/wind-in-trees.mp3
--- a/public/sounds/places/carousel.mp3
+++ b/public/sounds/places/carousel.mp3
--- a/public/sounds/places/crowded-bar.mp3
+++ b/public/sounds/places/crowded-bar.mp3
--- a/public/sounds/places/laboratory.mp3
+++ b/public/sounds/places/laboratory.mp3
--- a/public/sounds/places/night-village.mp3
+++ b/public/sounds/places/night-village.mp3
--- a/public/sounds/places/office.mp3
+++ b/public/sounds/places/office.mp3
--- a/public/sounds/places/subway-station.mp3
+++ b/public/sounds/places/subway-station.mp3
--- a/public/sounds/places/supermarket.mp3
+++ b/public/sounds/places/supermarket.mp3
--- a/public/sounds/things/boiling-water.mp3
+++ b/public/sounds/things/boiling-water.mp3
--- a/public/sounds/things/bubbles.mp3
+++ b/public/sounds/things/bubbles.mp3
--- a/public/sounds/things/dryer.mp3
+++ b/public/sounds/things/dryer.mp3
--- a/public/sounds/things/morse-code.mp3
+++ b/public/sounds/things/morse-code.mp3
--- a/public/sounds/things/slide-projector.mp3
+++ b/public/sounds/things/slide-projector.mp3
--- a/public/sounds/things/tuning-radio.mp3
+++ b/public/sounds/things/tuning-radio.mp3
--- a/public/sounds/transport/rowing-boat.mp3
+++ b/public/sounds/transport/rowing-boat.mp3
--- a/public/sounds/urban/fireworks.mp3
+++ b/public/sounds/urban/fireworks.mp3
--- a/src/components/about/about.module.css
+++ b/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);
+    }
+  }
+}
--- a/src/components/about/about.tsx
+++ b/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>
+  );
+}
--- a/src/components/about/index.ts
+++ b/src/components/about/index.ts
@@ -0,0 +1 @@
+export { About } from './about';
--- a/src/components/app/app.tsx
+++ b/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>
  );
--- a/src/components/categories/categories.tsx
+++ b/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>
  );
--- a/src/components/categories/donate/donate.module.css
+++ b/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;
+  }
+}
--- a/src/components/categories/donate/donate.tsx
+++ b/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>
+  );
+}
--- a/src/components/categories/donate/index.ts
+++ b/src/components/categories/donate/index.ts
@@ -0,0 +1 @@
+export { Donate } from './donate';
--- a/src/components/category/category.tsx
+++ b/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>
--- a/src/components/container/container.module.css
+++ b/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;
+  }
 }
--- a/src/components/container/container.tsx
+++ b/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>
+  );
 }
--- a/src/components/donate/donate.module.css
+++ b/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;
+    }
+  }
+}
--- a/src/components/donate/donate.tsx
+++ b/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>
+  );
+}
--- a/src/components/donate/index.ts
+++ b/src/components/donate/index.ts
@@ -0,0 +1 @@
+export { Donate } from './donate';
--- a/src/components/features/features.module.css
+++ b/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;
+    }
+  }
+}
--- a/src/components/features/features.tsx
+++ b/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>
+  );
+}
--- a/src/components/features/index.ts
+++ b/src/components/features/index.ts
@@ -0,0 +1 @@
+export { Features } from './features';
--- a/src/components/footer.astro
+++ b/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;
-    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;
-
-        & span {
-          color: #c0eb75;
-        }
-      }
-    }
-  }
-</style>
--- a/src/components/footer/footer.module.css
+++ b/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;
+    }
+  }
+}
--- a/src/components/footer/footer.tsx
+++ b/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>
+  );
+}
--- a/src/components/footer/index.ts
+++ b/src/components/footer/index.ts
@@ -0,0 +1 @@
+export { Footer } from './footer';
--- a/src/components/hero.astro
+++ b/src/components/hero.astro
@@ -1,131 +0,0 @@
---
-import { Balancer } from 'react-wrap-balancer';
-import { BsSoundwave } from 'react-icons/bs/index';
-
-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">
-      <span class="icon"><BsSoundwave /></span>
-      <span>{count} Sounds</span>
-    </p>
-  </Container>
-</div>
-
-<style>
-  .hero {
-    padding: 140px 0 60px;
-    text-align: center;
-
-    & .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,
-            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;
-      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-color: var(--color-neutral-100);
-      border: 1px solid var(--color-neutral-200);
-      border-radius: 100px;
-
-      & .icon {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        padding: 0 8px 0 12px;
-        color: var(--color-foreground);
-        border-right: 1px solid var(--color-neutral-200);
-      }
-
-      &::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%);
-      }
-    }
-  }
-</style>
--- a/src/components/hero/hero.module.css
+++ b/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%);
+    }
+  }
+}
--- a/src/components/hero/hero.tsx
+++ b/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>
+  );
+}
--- a/src/components/hero/index.ts
+++ b/src/components/hero/index.ts
@@ -0,0 +1 @@
+export { Hero } from './hero';
--- a/src/components/menu/divider/divider.module.css
+++ b/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);
+}
--- a/src/components/menu/divider/divider.tsx
+++ b/src/components/menu/divider/divider.tsx
@@ -0,0 +1,5 @@
+import styles from './divider.module.css';
+
+export function Divider() {
+  return <div className={styles.divider} />;
+}
--- a/src/components/menu/divider/index.ts
+++ b/src/components/menu/divider/index.ts
@@ -0,0 +1 @@
+export { Divider } from './divider';
--- a/src/components/menu/index.ts
+++ b/src/components/menu/index.ts
@@ -0,0 +1 @@
+export { Menu } from './menu';
--- a/src/components/menu/item/index.ts
+++ b/src/components/menu/item/index.ts
@@ -0,0 +1 @@
+export { Item } from './item';
--- a/src/components/menu/item/item.module.css
+++ b/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%;
+  }
+}
--- a/src/components/menu/item/item.tsx
+++ b/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>
+  );
+}
--- a/src/components/menu/items/donate.tsx
+++ b/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"
+    />
+  );
+}
--- a/src/components/menu/items/index.ts
+++ b/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';
--- a/src/components/menu/items/notepad.tsx
+++ b/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}
+    />
+  );
+}
--- a/src/components/menu/items/pomodoro.tsx
+++ b/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}
+    />
+  );
+}
--- a/src/components/menu/items/presets.tsx
+++ b/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} />;
+}
--- a/src/components/menu/items/share.tsx
+++ b/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}
+    />
+  );
+}
--- a/src/components/menu/items/shuffle.tsx
+++ b/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} />;
+}
--- a/src/components/menu/items/source.tsx
+++ b/src/components/menu/items/source.tsx
@@ -0,0 +1,13 @@
+import { LuGithub } from 'react-icons/lu/index';
+
+import { Item } from '../item';
+
+export function Source() {
+  return (
+    <Item
+      href="https://github.com/remvze/moodist"
+      icon={<LuGithub />}
+      label="Source Code"
+    />
+  );
+}
--- a/src/components/menu/menu.module.css
+++ b/src/components/menu/menu.module.css
@@ -0,0 +1,33 @@
+.wrapper {
+  & .menuButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 45px;
+    height: 45px;
+    font-size: var(--font-md);
+    color: var(--color-foreground);
+    cursor: pointer;
+    background-color: var(--color-neutral-100);
+    border: 1px solid var(--color-neutral-300);
+    border-radius: 50%;
+    transition: 0.2s;
+
+    &:hover {
+      background-color: var(--color-neutral-200);
+    }
+  }
+
+  & .menu {
+    display: flex;
+    flex-direction: column;
+    row-gap: 4px;
+    width: 240px;
+    height: max-content;
+    padding: 4px;
+    overflow: auto;
+    background-color: var(--color-neutral-100);
+    border: 1px solid var(--color-neutral-300);
+    border-radius: 4px;
+  }
+}
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -0,0 +1,117 @@
+import { useState } from 'react';
+import { IoMenu, IoClose } from 'react-icons/io5/index';
+import {
+  useFloating,
+  autoUpdate,
+  offset,
+  flip,
+  shift,
+  size,
+  useClick,
+  useDismiss,
+  useRole,
+  useInteractions,
+  FloatingFocusManager,
+} from '@floating-ui/react';
+
+import {
+  ShuffleItem,
+  ShareItem,
+  DonateItem,
+  NotepadItem,
+  SourceItem,
+  PomodoroItem,
+  PresetsItem,
+} from './items';
+import { Divider } from './divider';
+import { ShareLinkModal } from '@/components/modals/share-link';
+import { PresetsModal } from '@/components/modals/presets';
+import { Notepad, Pomodoro } from '@/components/toolbox';
+
+import styles from './menu.module.css';
+
+export function Menu() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const [showPresets, setShowPresets] = useState(false);
+  const [showShareLink, setShowShareLink] = useState(false);
+  const [showNotepad, setShowNotepad] = useState(false);
+  const [showPomodoro, setShowPomodoro] = useState(false);
+
+  const { context, floatingStyles, refs } = useFloating({
+    middleware: [
+      offset(12),
+      flip(),
+      shift(),
+      size({
+        apply({ availableHeight, elements }) {
+          Object.assign(elements.floating.style, {
+            maxHeight: `${availableHeight}px`,
+          });
+        },
+        padding: 10,
+      }),
+    ],
+    onOpenChange: setIsOpen,
+    open: isOpen,
+    placement: 'top-end',
+    whileElementsMounted: autoUpdate,
+  });
+
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context);
+
+  const { getFloatingProps, getReferenceProps } = useInteractions([
+    click,
+    dismiss,
+    role,
+  ]);
+
+  return (
+    <>
+      <div className={styles.wrapper}>
+        <button
+          aria-label="Menu"
+          className={styles.menuButton}
+          ref={refs.setReference}
+          onClick={() => setIsOpen(prev => !prev)}
+          {...getReferenceProps()}
+        >
+          {isOpen ? <IoClose /> : <IoMenu />}
+        </button>
+
+        {isOpen && (
+          <FloatingFocusManager context={context} modal={false}>
+            <div
+              ref={refs.setFloating}
+              style={floatingStyles}
+              {...getFloatingProps()}
+              className={styles.menu}
+            >
+              <PresetsItem open={() => setShowPresets(true)} />
+              <ShareItem open={() => setShowShareLink(true)} />
+              <ShuffleItem />
+              <Divider />
+              <NotepadItem open={() => setShowNotepad(true)} />
+              <PomodoroItem open={() => setShowPomodoro(true)} />
+              <Divider />
+              <DonateItem />
+              <SourceItem />
+            </div>
+          </FloatingFocusManager>
+        )}
+      </div>
+
+      <ShareLinkModal
+        show={showShareLink}
+        onClose={() => setShowShareLink(false)}
+      />
+
+      <PresetsModal show={showPresets} onClose={() => setShowPresets(false)} />
+
+      <Notepad show={showNotepad} onClose={() => setShowNotepad(false)} />
+      <Pomodoro show={showPomodoro} onClose={() => setShowPomodoro(false)} />
+    </>
+  );
+}
--- a/src/components/modal/index.ts
+++ b/src/components/modal/index.ts
@@ -0,0 +1 @@
+export { Modal } from './modal';
--- a/src/components/modal/modal.module.css
+++ b/src/components/modal/modal.module.css
@@ -0,0 +1,56 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 20;
+  background-color: rgb(9 9 11 / 40%);
+  backdrop-filter: blur(5px);
+}
+
+.modal {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 20;
+  width: 100%;
+  max-height: 100%;
+  padding: 50px 0;
+  overflow-y: auto;
+  pointer-events: none;
+  transform: translate(-50%, -50%);
+
+  & .content {
+    position: relative;
+    width: 90%;
+    max-width: 500px;
+    padding: 20px;
+    padding-top: 40px;
+    margin: 0 auto;
+    pointer-events: fill;
+    background-color: var(--color-neutral-100);
+    border-radius: 8px;
+
+    &.wide {
+      width: 95%;
+      max-width: 600px;
+      padding: 12px;
+      padding-top: 40px;
+    }
+
+    & .close {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 20px;
+      height: 20px;
+      font-size: 16px;
+      color: var(--color-foreground-subtle);
+      cursor: pointer;
+      background-color: transparent;
+      border: none;
+      outline: none;
+    }
+  }
+}
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -0,0 +1,74 @@
+import { useEffect } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { IoClose } from 'react-icons/io5/index';
+
+import { Portal } from '@/components/portal';
+
+import { fade, mix, slideY } from '@/lib/motion';
+import { cn } from '@/helpers/styles';
+
+import styles from './modal.module.css';
+
+interface ModalProps {
+  children: React.ReactNode;
+  lockBody?: boolean;
+  onClose: () => void;
+  show: boolean;
+  wide?: boolean;
+}
+
+export function Modal({
+  children,
+  lockBody = true,
+  onClose,
+  show,
+  wide,
+}: ModalProps) {
+  const variants = {
+    modal: mix(fade(), slideY(20)),
+    overlay: fade(),
+  };
+
+  useEffect(() => {
+    if (show && lockBody) {
+      document.body.style.overflow = 'hidden';
+    } else if (lockBody) {
+      document.body.style.overflow = 'auto';
+    }
+  }, [show, lockBody]);
+
+  return (
+    <Portal>
+      <AnimatePresence>
+        {show && (
+          <>
+            <motion.div
+              animate="show"
+              className={styles.overlay}
+              exit="hidden"
+              initial="hidden"
+              variants={variants.overlay}
+              onClick={onClose}
+              onKeyDown={onClose}
+            />
+            <div className={styles.modal}>
+              <motion.div
+                animate="show"
+                className={cn(styles.content, wide && styles.wide)}
+                exit="hidden"
+                initial="hidden"
+                variants={variants.modal}
+              >
+                <button className={styles.close} onClick={onClose}>
+                  <IoClose />
+                </button>
+
+                {children}
+              </motion.div>
+            </div>
+          </>
+        )}
+      </AnimatePresence>
+    </Portal>
+  );
+}
--- a/src/components/modals/presets/index.ts
+++ b/src/components/modals/presets/index.ts
@@ -0,0 +1 @@
+export { PresetsModal } from './presets';
--- a/src/components/modals/presets/list/index.ts
+++ b/src/components/modals/presets/list/index.ts
@@ -0,0 +1 @@
+export { List } from './list';
--- a/src/components/modals/presets/list/list.module.css
+++ b/src/components/modals/presets/list/list.module.css
@@ -0,0 +1,62 @@
+.list {
+  & .title {
+    margin-bottom: 8px;
+    font-weight: 500;
+    color: var(--color-foreground-subtle);
+  }
+
+  & .empty {
+    font-size: var(--font-sm);
+  }
+
+  & .preset {
+    display: flex;
+    column-gap: 4px;
+    align-items: center;
+    width: 100%;
+    height: 45px;
+    padding: 4px;
+    margin-top: 8px;
+    background-color: var(--color-neutral-50);
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 8px;
+
+    &:not(:last-of-type) {
+      margin-bottom: 8px;
+    }
+
+    & input {
+      flex-grow: 1;
+      min-width: 0;
+      height: 100%;
+      padding: 0 12px;
+      color: var(--color-foreground);
+      background: transparent;
+      border: none;
+      outline: none;
+    }
+
+    & button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      aspect-ratio: 1 / 1;
+      font-size: var(--font-sm);
+      font-weight: 500;
+      color: var(--color-foreground-subtle);
+      cursor: pointer;
+      background-color: var(--color-neutral-100);
+      border: none;
+      border-radius: 4px;
+      outline: none;
+
+      &.primary {
+        font-size: var(--font-xsm);
+        color: var(--color-foreground);
+        background-color: var(--color-neutral-200);
+        border: 1px solid var(--color-neutral-300);
+      }
+    }
+  }
+}
--- a/src/components/modals/presets/list/list.tsx
+++ b/src/components/modals/presets/list/list.tsx
@@ -0,0 +1,53 @@
+import { FaPlay, FaRegTrashAlt } from 'react-icons/fa/index';
+
+import styles from './list.module.css';
+
+import { usePresetStore, useSoundStore } from '@/store';
+
+interface ListProps {
+  close: () => void;
+}
+
+export function List({ close }: ListProps) {
+  const presets = usePresetStore(state => state.presets);
+  const changeName = usePresetStore(state => state.changeName);
+  const deletePreset = usePresetStore(state => state.deletePreset);
+  const override = useSoundStore(state => state.override);
+  const play = useSoundStore(state => state.play);
+
+  return (
+    <div className={styles.list}>
+      <h3 className={styles.title}>
+        Your Presets {presets.length > 0 && `(${presets.length})`}
+      </h3>
+
+      {!presets.length && (
+        <p className={styles.empty}>You don&apos;t have any presets yet.</p>
+      )}
+
+      {presets.map((preset, index) => (
+        <div className={styles.preset} key={index}>
+          <input
+            placeholder="Untitled"
+            type="text"
+            value={preset.label}
+            onChange={e => changeName(index, e.target.value)}
+          />
+          <button onClick={() => deletePreset(index)}>
+            <FaRegTrashAlt />
+          </button>
+          <button
+            className={styles.primary}
+            onClick={() => {
+              override(preset.sounds);
+              play();
+              close();
+            }}
+          >
+            <FaPlay />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
--- a/src/components/modals/presets/new/index.ts
+++ b/src/components/modals/presets/new/index.ts
@@ -0,0 +1 @@
+export { New } from './new';
--- a/src/components/modals/presets/new/new.module.css
+++ b/src/components/modals/presets/new/new.module.css
@@ -0,0 +1,62 @@
+.new {
+  margin-top: 16px;
+
+  & .title {
+    font-weight: 500;
+    color: var(--color-foreground-subtle);
+  }
+
+  & .form {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 45px;
+    padding: 4px;
+    margin-top: 8px;
+    background-color: var(--color-neutral-50);
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 8px;
+
+    &.disabled {
+      filter: blur(2px);
+      opacity: 0.4;
+    }
+
+    & input {
+      flex-grow: 1;
+      min-width: 0;
+      height: 100%;
+      padding: 0 12px;
+      color: var(--color-foreground);
+      background: transparent;
+      border: none;
+      outline: none;
+    }
+
+    & button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      padding: 0 12px;
+      font-size: var(--font-sm);
+      font-weight: 500;
+      color: var(--color-neutral-50);
+      cursor: pointer;
+      background-color: var(--color-neutral-950);
+      border: none;
+      border-radius: 4px;
+      outline: none;
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  & .noSelected {
+    margin-top: 8px;
+    font-size: var(--font-sm);
+    color: var(--color-foreground-subtle);
+  }
+}
--- a/src/components/modals/presets/new/new.tsx
+++ b/src/components/modals/presets/new/new.tsx
@@ -0,0 +1,59 @@
+import { useState, type FormEvent } from 'react';
+
+import { cn } from '@/helpers/styles';
+import { useSoundStore, usePresetStore } from '@/store';
+
+import styles from './new.module.css';
+
+export function New() {
+  const [name, setName] = useState('');
+
+  const noSelected = useSoundStore(state => state.noSelected());
+  const sounds = useSoundStore(state => state.sounds);
+  const addPreset = usePresetStore(state => state.addPreset);
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    if (!name || noSelected) return;
+
+    const _sounds: Record<string, number> = {};
+
+    Object.keys(sounds)
+      .filter(id => sounds[id].isSelected)
+      .forEach(id => {
+        _sounds[id] = sounds[id].volume;
+      });
+
+    addPreset(name, _sounds);
+
+    setName('');
+  };
+
+  return (
+    <div className={styles.new}>
+      <h3 className={styles.title}>New Preset</h3>
+
+      <form
+        className={cn(styles.form, noSelected && styles.disabled)}
+        onSubmit={handleSubmit}
+      >
+        <input
+          disabled={noSelected}
+          placeholder="Preset's Name"
+          required
+          type="text"
+          value={name}
+          onChange={e => setName(e.target.value)}
+        />
+        <button disabled={noSelected}>Save</button>
+      </form>
+
+      {noSelected && (
+        <p className={styles.noSelected}>
+          To make a preset, first select some sounds.
+        </p>
+      )}
+    </div>
+  );
+}
--- a/src/components/modals/presets/presets.module.css
+++ b/src/components/modals/presets/presets.module.css
@@ -0,0 +1,12 @@
+.title {
+  font-family: var(--font-heading);
+  font-size: var(--font-md);
+  font-weight: 600;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  margin: 16px 0;
+  background-color: var(--color-neutral-200);
+}
--- a/src/components/modals/presets/presets.tsx
+++ b/src/components/modals/presets/presets.tsx
@@ -0,0 +1,21 @@
+import { Modal } from '@/components/modal';
+import { New } from './new';
+import { List } from './list';
+
+import styles from './presets.module.css';
+
+interface PresetsModalProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+export function PresetsModal({ onClose, show }: PresetsModalProps) {
+  return (
+    <Modal show={show} onClose={onClose}>
+      <h2 className={styles.title}>Presets</h2>
+      <New />
+      <div className={styles.divider} />
+      <List close={onClose} />
+    </Modal>
+  );
+}
--- a/src/components/modals/share-link/index.ts
+++ b/src/components/modals/share-link/index.ts
@@ -0,0 +1 @@
+export { ShareLinkModal } from './share-link';
--- a/src/components/modals/share-link/share-link.module.css
+++ b/src/components/modals/share-link/share-link.module.css
@@ -0,0 +1,54 @@
+.heading {
+  font-family: var(--font-heading);
+  font-size: var(--font-md);
+  font-weight: 700;
+}
+
+.desc {
+  margin-top: 12px;
+  line-height: 1.6;
+  color: var(--color-foreground-subtle);
+}
+
+.inputWrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 45px;
+  padding: 4px;
+  margin-top: 12px;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 4px;
+
+  & input {
+    flex-grow: 1;
+    min-width: 0;
+    height: 100%;
+    padding: 0 10px;
+    font-size: var(--font-sm);
+    color: var(--color-foreground);
+    background: transparent;
+    border: none;
+    outline: none;
+  }
+
+  & button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    aspect-ratio: 1 / 1;
+    color: var(--color-foreground);
+    cursor: pointer;
+    background-color: var(--color-neutral-100);
+    border: none;
+    border-radius: 4px;
+    outline: none;
+    transition: 0.2s;
+
+    &:hover {
+      background-color: var(--color-neutral-200);
+    }
+  }
+}
--- a/src/components/modals/share-link/share-link.tsx
+++ b/src/components/modals/share-link/share-link.tsx
@@ -0,0 +1,67 @@
+import { useMemo, useEffect, useState } from 'react';
+import { IoCopyOutline, IoCheckmark } from 'react-icons/io5/index';
+
+import { Modal } from '@/components/modal';
+
+import { useCopy } from '@/hooks/use-copy';
+import { useSoundStore } from '@/store';
+
+import styles from './share-link.module.css';
+
+interface ShareLinkModalProps {
+  onClose: () => void;
+  show: boolean;
+}
+
+export function ShareLinkModal({ onClose, show }: ShareLinkModalProps) {
+  const [isMounted, setIsMounted] = useState(false);
+  const sounds = useSoundStore(state => state.sounds);
+  const { copy, copying } = useCopy();
+
+  const selected = useMemo(() => {
+    return Object.keys(sounds)
+      .map(sound => ({
+        id: sound,
+        isSelected: sounds[sound].isSelected,
+        volume: sounds[sound].volume.toFixed(2),
+      }))
+      .filter(sound => sound.isSelected);
+  }, [sounds, JSON.stringify(sounds)]); // eslint-disable-line
+
+  const string = useMemo(() => {
+    const object: Record<string, number> = {};
+
+    selected.forEach(sound => {
+      object[sound.id] = Number(sound.volume);
+    });
+
+    return JSON.stringify(object);
+  }, [selected]);
+
+  const url = useMemo(() => {
+    if (!isMounted)
+      return `https://moodist.app/?share=${encodeURIComponent(string)}`;
+
+    return `${window.location.protocol}//${
+      window.location.host
+    }/?share=${encodeURIComponent(string)}`;
+  }, [string, isMounted]);
+
+  useEffect(() => setIsMounted(true), []);
+
+  return (
+    <Modal show={show} onClose={onClose}>
+      <h1 className={styles.heading}>Share your sound selection!</h1>
+      <p className={styles.desc}>
+        Copy and send the following link to the person you want to share your
+        selection with.
+      </p>
+      <div className={styles.inputWrapper}>
+        <input readOnly type="text" value={url} />
+        <button onClick={() => copy(url)}>
+          {copying ? <IoCheckmark /> : <IoCopyOutline />}
+        </button>
+      </div>
+    </Modal>
+  );
+}
--- a/src/components/modals/shared/index.ts
+++ b/src/components/modals/shared/index.ts
@@ -0,0 +1 @@
+export { SharedModal } from './shared';
--- a/src/components/modals/shared/shared.module.css
+++ b/src/components/modals/shared/shared.module.css
@@ -0,0 +1,68 @@
+.heading {
+  font-family: var(--font-heading);
+  font-size: var(--font-md);
+  font-weight: 700;
+}
+
+.desc {
+  margin-top: 12px;
+  line-height: 1.6;
+  color: var(--color-foreground-subtle);
+}
+
+.sounds {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+  padding: 12px;
+  margin-top: 12px;
+  background-color: var(--color-neutral-50);
+  border: 1px solid var(--color-neutral-200);
+  border-radius: 4px;
+
+  & .sound {
+    padding: 8px 16px;
+    font-size: var(--font-sm);
+    font-weight: 500;
+    background-color: var(--color-neutral-100);
+    border: 1px solid var(--color-neutral-200);
+    border-radius: 100px;
+  }
+}
+
+.footer {
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 12px;
+
+  .button {
+    padding: 12px 16px;
+    font-family: var(--font-heading);
+    font-size: var(--font-sm);
+    font-weight: 600;
+    color: var(--color-foreground-subtle);
+    cursor: pointer;
+    background-color: var(--color-neutral-200);
+    border: none;
+    border-radius: 4px;
+    outline: none;
+    transition: 0.2s;
+
+    &:hover {
+      color: var(--color-foreground);
+      background-color: var(--color-neutral-300);
+    }
+
+    &.primary {
+      color: var(--color-neutral-200);
+      background-color: var(--color-neutral-950);
+
+      &:hover {
+        background-color: var(--color-neutral-800);
+      }
+    }
+  }
+}
--- a/src/components/modals/shared/shared.tsx
+++ b/src/components/modals/shared/shared.tsx
@@ -0,0 +1,107 @@
+import { useState, useEffect } from 'react';
+
+import { Modal } from '@/components/modal';
+
+import { useSoundStore } from '@/store';
+import { useSnackbar } from '@/contexts/snackbar';
+import { cn } from '@/helpers/styles';
+import { sounds } from '@/data/sounds';
+
+import styles from './shared.module.css';
+
+export function SharedModal() {
+  const override = useSoundStore(state => state.override);
+  const showSnackbar = useSnackbar();
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [sharedSounds, setSharedSounds] = useState<
+    Array<{
+      id: string;
+      label: string;
+      volume: number;
+    }>
+  >([]);
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const share = searchParams.get('share');
+
+    if (share) {
+      try {
+        const parsed = JSON.parse(decodeURIComponent(share));
+        const allSounds: Record<string, string> = {};
+
+        sounds.categories.forEach(category => {
+          category.sounds.forEach(sound => {
+            allSounds[sound.id] = sound.label;
+          });
+        });
+
+        const _sharedSounds: Array<{
+          id: string;
+          label: string;
+          volume: number;
+        }> = [];
+
+        Object.keys(parsed).forEach(sound => {
+          if (allSounds[sound]) {
+            _sharedSounds.push({
+              id: sound,
+              label: allSounds[sound],
+              volume: Number(parsed[sound]),
+            });
+          }
+        });
+
+        if (_sharedSounds.length) {
+          setIsOpen(true);
+          setSharedSounds(_sharedSounds);
+        }
+      } catch (error) {
+        return;
+      } finally {
+        history.pushState({}, '', location.href.split('?')[0]);
+      }
+    }
+  }, []);
+
+  const handleOverride = () => {
+    const newSounds: Record<string, number> = {};
+
+    sharedSounds.forEach(sound => {
+      newSounds[sound.id] = sound.volume;
+    });
+
+    override(newSounds);
+    setIsOpen(false);
+    showSnackbar('Done! You can now play the new selection.');
+  };
+
+  return (
+    <Modal show={isOpen} onClose={() => setIsOpen(false)}>
+      <h1 className={styles.heading}>New sound mix detected!</h1>
+      <p className={styles.desc}>
+        Someone has shared the following mix with you. Would you want to
+        override your current selection?
+      </p>
+      <div className={styles.sounds}>
+        {sharedSounds.map(sound => (
+          <div className={styles.sound} key={sound.id}>
+            {sound.label}
+          </div>
+        ))}
+      </div>
+      <div className={styles.footer}>
+        <button className={cn(styles.button)} onClick={() => setIsOpen(false)}>
+          Cancel
+        </button>
+        <button
+          className={cn(styles.button, styles.primary)}
+          onClick={handleOverride}
+        >
+          Override
+        </button>
+      </div>
+    </Modal>
+  );
+}
--- a/src/components/portal/index.ts
+++ b/src/components/portal/index.ts
@@ -0,0 +1 @@
+export { Portal } from './portal';
--- a/src/components/portal/portal.tsx
+++ b/src/components/portal/portal.tsx
@@ -0,0 +1,14 @@
+import { useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+interface PortalProps {
+  children: React.ReactNode;
+}
+
+export function Portal({ children }: PortalProps) {
+  const [isClientSide, setIsClientSide] = useState(false);
+
+  useEffect(() => setIsClientSide(true), []);
+
+  return isClientSide ? createPortal(children, document.body) : null;
+}
--- a/src/components/scroll-to-top/scroll-to-top.module.css
+++ b/src/components/scroll-to-top/scroll-to-top.module.css
@@ -1,8 +1,4 @@
 .button {
-  position: fixed;
-  bottom: 20px;
-  left: 20px;
-  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
--- a/src/components/scroll-to-top/scroll-to-top.tsx
+++ b/src/components/scroll-to-top/scroll-to-top.tsx
@@ -31,7 +31,7 @@ export function ScrollToTop() {

  return (
    <AnimatePresence>
-      {isVisible && (
+      {isVisible ? (
        <motion.button
          animate="show"
          aria-label="Scroll to top"
@@ -43,6 +43,8 @@ export function ScrollToTop() {
        >
          <BiUpArrowAlt />
        </motion.button>
+      ) : (
+        <div />
      )}
    </AnimatePresence>
  );
--- a/src/components/sections/about.astro
+++ b/src/components/sections/about.astro
@@ -1,62 +0,0 @@
---
-import { Container } from '@/components/container';
-import { count as soundCount } from '@/lib/sounds';
-
-const count = soundCount();
---
-
-<div class="about">
-  <Container>
-    <div class="titleWrapper">
-      <h2 class="title">What is Moodist?</h2>
-      <div class="line"></div>
-    </div>
-    <p class="desc">
-      Welcome to Moodist – your free, open-source ambient sound generator. With <span
-        >{count} curated sounds</span
-      >, effortlessly create your custom mix for focus or relaxation. No
-      accounts, no hassle – just pure tranquility. Explore nature&apos;s calm
-      and urban rhythms. Elevate your ambiance with Moodist, where simplicity
-      meets serenity.
-    </p>
-  </Container>
-</div>
-
-<style>
-  .about {
-    padding: 80px 0;
-
-    & .titleWrapper {
-      display: flex;
-      column-gap: 12px;
-      align-items: center;
-
-      & .title {
-        margin-bottom: 12px;
-        font-family: var(--font-display);
-        font-size: var(--font-lg);
-        font-weight: 600;
-      }
-
-      & .line {
-        flex-grow: 1;
-        height: 1px;
-        background: linear-gradient(
-          90deg,
-          var(--color-neutral-300),
-          transparent
-        );
-        transform: translateY(-0.25rem);
-      }
-    }
-
-    & .desc {
-      line-height: 1.7;
-      color: var(--color-foreground-subtle);
-
-      & span {
-        color: var(--color-foreground);
-      }
-    }
-  }
-</style>
--- a/src/components/sections/ready.astro
+++ b/src/components/sections/ready.astro
@@ -1,121 +0,0 @@
---
-import { RiSparkling2Line } from 'react-icons/ri/index';
-
-import { Container } from '@/components/container';
---
-
-<div class="ready">
-  <Container>
-    <div class="wrapper">
-      <div class="iconContainer">
-        <div class="tail"></div>
-        <div class="icon">
-          <RiSparkling2Line />
-        </div>
-      </div>
-
-      <h2 class="title">Are you ready?</h2>
-      <p class="desc">Create your calm oasis in seconds!</p>
-      <button class="button" id="button"> Use Moodist</button>
-    </div>
-  </Container>
-</div>
-
-<script>
-  const button = document.getElementById('button');
-
-  button?.addEventListener('click', () => {
-    const app = document.getElementById('app');
-
-    app?.scrollIntoView(true);
-  });
-</script>
-
-<style>
-  .ready {
-    & .wrapper {
-      position: relative;
-      padding: 0 20px 40px;
-      background: linear-gradient(transparent, var(--color-neutral-100));
-      border-radius: 0 0 20px 20px;
-
-      &::after {
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        width: 70%;
-        height: 1px;
-        content: '';
-        background: linear-gradient(
-          90deg,
-          transparent,
-          var(--color-neutral-300),
-          transparent
-        );
-        transform: translateX(-50%);
-      }
-    }
-
-    & .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: 12px;
-      font-family: var(--font-display);
-      font-size: var(--font-lg);
-      font-weight: 600;
-      text-align: center;
-    }
-
-    & .desc {
-      color: var(--color-foreground-subtle);
-      text-align: center;
-    }
-
-    & .button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 120px;
-      height: 40px;
-      margin: 24px auto 0;
-      font-family: var(--font-heading);
-      font-size: var(--font-sm);
-      line-height: 0;
-      color: var(--color-neutral-200);
-      text-decoration: none;
-      cursor: pointer;
-      background-color: var(--color-neutral-950);
-      border: none;
-      border-radius: 100px;
-      outline: none;
-      transition: 0.2s;
-
-      &:hover {
-        background-color: var(--color-neutral-800);
-      }
-    }
-  }
-</style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
MAZE	73a8e03d66	chore(release): 1.4.2	2024-04-11 15:38:00 +03:30
MAZE	017c27fb2b	chore: remove arm/v6	2024-04-11 15:37:39 +03:30
MAZE	43ba975408	style: change font path	2024-04-11 15:37:11 +03:30
MAZE	42bd47bbea	chore(release): 1.4.1	2024-04-11 15:14:42 +03:30
MAZE	faf7f78b8c	chore: change GitHub workflow	2024-04-11 15:13:49 +03:30
MAZE	7ec7ea74d5	style: widen the container	2024-04-11 15:12:56 +03:30
MAZE	ede480186c	feat: add toolbar and portal	2024-04-08 20:55:03 +03:30
MAZE	6dfa998ffe	chore(release): 1.4.0	2024-02-29 15:55:04 +03:30
MAZE	a8a8c36434	fix: comment out toolbox section	2024-02-29 15:53:38 +03:30
MAZE	7390a9b3de	fix: remove extra headings	2024-02-29 15:52:48 +03:30
MAZE	0eb47ba2e1	feat: add alarm for pomodoro timer	2024-02-29 15:19:57 +03:30
MAZE	110356b2da	fix: remove time from tabs array	2024-02-29 15:06:37 +03:30
MAZE	158cffca8c	fix: change default times	2024-02-29 15:05:54 +03:30
MAZE	def69de6e4	style: add scroll lock in modals	2024-02-28 23:03:35 +03:30
MAZE	69cb45bff7	style: decrease font size	2024-02-28 22:56:08 +03:30
MAZE	e7fd84bd4e	style: change position for toolbar	2024-02-28 22:54:54 +03:30
MAZE	dfd6c1fc4a	fix: add min-width to inputs	2024-02-28 20:27:45 +03:30
MAZE	38a9a23790	feat: persist presets	2024-02-28 20:19:36 +03:30
MAZE	2484e01273	feat: add custom presets	2024-02-28 19:59:39 +03:30
MAZE	98d2f76438	style: decrease padding	2024-02-27 20:40:54 +03:30
MAZE	0e12a5203e	feat: add CTA button	2024-02-27 20:27:15 +03:30
MAZE	3205145d54	feat: add copy for productivity toolbox	2024-02-27 20:15:51 +03:30
MAZE	8f36c863d7	style: remove hero pattern	2024-02-27 20:14:30 +03:30
MAZE	941e1f0241	feat: change tooltip content	2024-02-25 21:51:31 +03:30
MAZE	240fd9c6e0	feat: add active indicators	2024-02-25 21:42:40 +03:30
MAZE	665e2173f4	feat: persist pomodoro setting	2024-02-25 21:29:52 +03:30
MAZE	1ac52861d1	fix: change completion condition	2024-02-25 21:22:35 +03:30
MAZE	a7e5368591	fix: change initial value	2024-02-25 17:21:18 +03:30
MAZE	f3cb2a1b63	feat: implement time setting	2024-02-25 17:19:06 +03:30
MAZE	586e502c3c	style: change unselected style	2024-02-25 15:12:26 +03:30
MAZE	5b83710c75	style: increase pattern opacity	2024-02-25 15:08:56 +03:30
MAZE	7ed016d855	feat: add controls to pomodoro	2024-02-25 15:04:25 +03:30
MAZE	9f7de336e5	feat: add basic pomodoro structure	2024-02-25 13:47:38 +03:30
MAZE	758f2f48dc	feat: add scroll for lower heights	2024-02-24 20:22:36 +03:30
MAZE	d055e66dd9	feat: add source code item	2024-02-24 19:54:41 +03:30
MAZE	79afb8d92f	fix: change z-index values	2024-02-24 19:35:10 +03:30
MAZE	408734d49f	feat: add dividers to menu items	2024-02-24 19:33:13 +03:30
MAZE	7463334053	feat: add toolbar to notepad	2024-02-24 19:23:17 +03:30
MAZE	ae3ea8c74f	fix: remove word counter dependency	2024-02-24 16:33:41 +03:30
MAZE	24245235b1	feat: add counter to notepad	2024-02-24 16:25:34 +03:30
MAZE	b143e46e92	Merge branch 'main' into develop	2024-02-24 16:13:33 +03:30
MAZE	e923559709	feat: add simple notepad	2024-02-24 16:06:53 +03:30
MAZE	8930e7b76a	style: change description	2024-02-17 18:37:25 +03:30
MAZE	5f40435c0c	feat: add titles	2024-02-16 16:46:47 +03:30
MAZE	38c11f124e	fix: add key to categories	2024-02-11 19:52:10 +03:30
MAZE	a5d2ba45f8	Merge branch 'main' into develop	2024-02-11 19:34:03 +03:30
MAZE	653d309e64	fix: remove fading	2024-02-11 19:33:56 +03:30
MAZE	663cb92135	feat: add fade in/out	2024-02-11 19:25:25 +03:30
MAZE	1a499be244	style: add effect to about	2024-02-09 20:56:33 +03:30
MAZE	4515aa8e7a	style: change the about style	2024-02-09 20:42:42 +03:30
MAZE	831a9c8ea0	refactor: add variant to container	2024-02-09 18:29:00 +03:30
MAZE	f66a6ffde7	fix: make sound count dynamic	2024-02-09 17:29:05 +03:30
MAZE	9028675057	style: hide features	2024-02-09 17:26:45 +03:30
MAZE	37505a6b3f	style: show about and features	2024-02-09 15:20:14 +03:30
MAZE	400ea0aeaf	style: hide about and features	2024-02-09 14:45:15 +03:30
MAZE	e4e332ad75	feat: add features section	2024-02-09 14:35:49 +03:30
MAZE	341a896924	style: revert changes	2024-02-09 11:54:09 +03:30
MAZE	1a6ecd82ab	style: decorate paragraphs	2024-02-09 00:44:28 +03:30
MAZE	d725d59703	feat: add about section	2024-02-08 22:44:22 +03:30
MAZE	52176bc3f9	refactor: move footer to React	2024-02-08 19:49:35 +03:30
MAZE	c505c574a8	refactor: move donation to React	2024-02-08 19:47:31 +03:30
MAZE	3f45be3942	refactor: remove sections	2024-02-08 19:44:30 +03:30
MAZE	a514a364ec	feat: add special button	2024-02-08 19:43:50 +03:30
MAZE	81e6666776	fix: add correct count to description	2024-02-08 19:35:44 +03:30
MAZE	56802b67f2	style: decrease opacity	2024-02-08 19:31:20 +03:30
MAZE	d4cc24e468	style: lower opacity	2024-02-08 19:23:29 +03:30
MAZE	f7302dec5b	feat: add open-source section	2024-02-08 19:17:14 +03:30
MAZE	1a01a00866	feat: change alignments	2024-02-08 18:59:58 +03:30
MAZE	38da02a0d3	feat: change the copy for features	2024-02-08 18:32:08 +03:30
MAZE	5fc3e7e5d0	style: change the pattern slightly	2024-02-08 18:15:47 +03:30
MAZE	0f32de3c0c	style: decrease shine	2024-02-07 21:51:17 +03:30
MAZE	ac24da2940	style: add shine to donation button	2024-02-07 21:46:26 +03:30
MAZE	5916e86d3c	style: revert pattern	2024-02-07 21:38:28 +03:30
MAZE	f3e7224267	style: change pattern	2024-02-07 21:31:35 +03:30
MAZE	e1b9a1736c	style: change sound counter	2024-02-07 18:50:57 +03:30
MAZE	2078648c66	style: decrease opacity	2024-02-07 18:42:34 +03:30
MAZE	6d30a0123e	style: add margin to donate section	2024-02-07 16:23:46 +03:30
MAZE	8471a3ca49	style: change dividers	2024-02-07 16:22:17 +03:30
MAZE	182a8c7aad	style: decrease dots	2024-02-07 15:56:15 +03:30
MAZE	0ad4bb72e1	style: decrease dots	2024-02-07 15:37:07 +03:30
MAZE	405fcccd95	style: increase dots	2024-02-07 15:30:28 +03:30
MAZE	2b843747b4	style: decrease dots	2024-02-07 15:25:02 +03:30
MAZE	8e500136ce	style: increase padding	2024-02-07 15:16:25 +03:30
MAZE	882d44079c	style: increase opacity	2024-02-07 15:10:59 +03:30
MAZE	82e4ea72f4	style: decrease opacity	2024-02-07 15:10:20 +03:30
MAZE	dc22b51548	style: add polka dot pattern	2024-02-07 15:08:08 +03:30
MAZE	75ff67c9e6	chore(release): 1.3.1	2024-02-01 23:40:29 +03:30
MAZE	1f806c4e56	chore: add donation link to README file	2024-02-01 23:39:59 +03:30
MAZE	e6f768a5e6	fix: complete donation links	2024-02-01 23:38:55 +03:30
MAZE	8e0291004a	fix: coffee typo	2024-02-01 23:27:06 +03:30
MAZE	d449c29321	feat: add donate section	2024-02-01 22:23:49 +03:30
MAZE	f12ca4806c	feat: add donate item	2024-02-01 22:05:42 +03:30
MAZE	17b4f25ff1	feat: add donation header	2024-02-01 21:59:08 +03:30
MAZE	f877e49763	chore(release): 1.3.0	2024-02-01 20:36:46 +03:30
MAZE	f1d212abc8	chore: add binaural beats	2024-02-01 20:16:47 +03:30
MAZE	38f6f7dbe6	chore: add more sounds	2024-01-30 15:29:55 +03:30
MAZE	937bf29d09	chore: add more sounds	2024-01-30 00:04:59 +03:30
MAZE	e2172fd2bb	chore: add more sounds	2024-01-29 23:49:07 +03:30
MAZE	1f12afa394	chore: add more sounds	2024-01-29 23:36:44 +03:30
MAZE	d96461d1ea	fix: remove fading	2024-01-29 19:16:46 +03:30
MAZE	5467bbbc24	feat: add fading to intro and outro	2024-01-29 19:01:36 +03:30
MAZE	32da26ccfc	fix: undo changes	2024-01-28 19:39:57 +03:30
MAZE	81f33d9d37	fix: add media session	2024-01-28 19:33:52 +03:30
MAZE	463667c868	fix: connect audio context to audio element	2024-01-28 19:28:55 +03:30
MAZE	b77c817db2	refactor: remove unmute and media session	2024-01-28 15:45:27 +03:30
MAZE	216b913ccd	fix: add media session	2024-01-28 15:40:51 +03:30
MAZE	e422b52436	fix: add unmute for iOS	2024-01-28 15:35:09 +03:30
MAZE	1f635348e3	refactor: remove media session	2024-01-28 15:23:58 +03:30
MAZE	889962babe	fix: add audio element	2024-01-28 15:15:30 +03:30
MAZE	5e0a84259f	feat: add media session	2024-01-28 15:05:13 +03:30
MAZE	8e4d0531e0	fix: resume audio	2024-01-28 14:44:31 +03:30
MAZE	cd05704a73	chore: add more sounds	2024-01-22 19:58:06 +03:30
MAZE	01b4bdbb57	chore: add more sounds	2024-01-22 18:31:23 +03:30
MAZE	f682a910da	feat: add loader for favorites	2024-01-09 16:09:07 +03:30
MAZE	a33ae450cf	fix: increase decimal	2024-01-09 15:59:57 +03:30
MAZE	b8bc9c8b4c	chore(release): 1.2.0	2024-01-04 20:19:35 +03:30
MAZE	ee606139a8	chore: update GitHub action	2024-01-04 20:18:45 +03:30
MAZE	7823dc7ff4	style: add animation to modal	2024-01-04 19:58:16 +03:30
MAZE	37a0736a0e	style: widen the menu	2024-01-04 19:54:38 +03:30
MAZE	c51acd6261	style: change copy	2024-01-04 19:54:06 +03:30
MAZE	ff26597d22	feat: add disabled state	2024-01-04 19:51:58 +03:30
MAZE	c8e51226e5	style: change to primary color	2024-01-03 20:03:32 +03:30
MAZE	131ab29621	style: add icon to menu items	2024-01-03 20:01:58 +03:30
MAZE	0f62f0795c	feat: implement override feature	2024-01-03 18:42:06 +03:30
MAZE	1a23e004a6	fix: stringify dependency	2024-01-03 14:14:01 +03:30
MAZE	93ff72a052	feat: implement sharing URL	2024-01-03 00:03:58 +03:30
MAZE	ef81f198ba	feat: basic structure for share link	2024-01-02 22:20:59 +03:30
MAZE	35e32152b1	feat: add share modal	2024-01-02 19:48:57 +03:30
MAZE	26bf01690c	refactor: better item structure for menu	2024-01-02 18:35:06 +03:30
MAZE	fe2357c995	feat: add share placeholder	2024-01-02 17:35:10 +03:30
MAZE	85b627ecb9	style: change border color	2024-01-02 16:58:41 +03:30
MAZE	8beb42cb1b	refactor: rewrite menu with floating ui	2024-01-02 16:54:29 +03:30
MAZE	17027e299b	feat: add animation to menu box	2024-01-02 16:28:18 +03:30
MAZE	184bb09f5a	feat: add menu button	2024-01-02 16:24:55 +03:30
MAZE	660ee07a23	chore: change docker-compose file	2024-01-01 12:42:56 +03:30
MAZE	cb4bfea5ab	chore: change docker workflow	2024-01-01 12:39:22 +03:30
MAZE ✧	210bd234e0	Merge pull request #3 from baldator/main Add github action to build docker image and docker-compose support	2024-01-01 12:32:17 +03:30
marco	64ef5c5138	.	2023-12-31 13:43:27 +00:00
MAZE ✧	1218751a6f	Merge pull request #2 from javigomezo/main feat(docker): add dockerfile	2023-12-31 12:57:16 +03:30
Javier Gómez	a234bc17a6	feat(docker): add dockerfile	2023-12-30 23:07:10 +01:00
				`@@ -0,0 +1 @@`
				`export { ShareLinkModal } from './share-link';`