chore(release): 0.1.0 [skip ci]

# [0.1.0](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.0.1...v0.1.0) (2023-08-13)

### Bug Fixes

* bg image invalid, and update name ([a8bbcc1](a8bbcc19ec))
* contrast on 'ourvision' section ([2ec5873](2ec5873043))
* grammer error ([432be86](432be86cc5))
* meme misalignment ([e773619](e773619524))
* mobile layout on footer and message component ([5a8b20b](5a8b20b16e))
* responsive is now all over the page :) ([7c48975](7c48975f79))
* revert copy for meme section ([187095e](187095e54f))
* set url for download extension button ([fa8993b](fa8993b2bd))
* small improvement on 4k screens ([0bba290](0bba290f28))
* switch to experimental image support and import missing images ([cd278e3](cd278e3a46))
* typo ([26b3f5f](26b3f5f878))
* update copy ([9b5fcfe](9b5fcfea31))
* wording change ([575a5b8](575a5b8149))

### Features

* copy to clipboard, qr code generation, further donation methods ([20a99a6](20a99a65d8))
* create two remaining components, optimize layout and existing components (wip) ([b6f8d56](b6f8d567ba))
* finish all new design implementations ([486bc6a](486bc6ae72))
* local fonts ([b52911c](b52911cb51))
* meme grid is now responsive ([3552e8b](3552e8bb84))
* mobile menu, css cleanup, component details ([0c6391e](0c6391e3a1))
* pure css tilted background ([05eb109](05eb109938))
* refactor message component and footer ([8c14799](8c14799f5a))
* rework several sections on home page, some refactoring ([4935177](4935177908))
* sass support, mixins for fluid design, refactoring, work on components ([9701291](97012911aa))
* svg icons, donation methods ([63e0c57](63e0c57b03))

.github/workflows/ci.yml

@@ -0,0 +1,62 @@
+name: Build/Publish
+
+on:
+    push:
+        branches:
+            - master
+            - develop
+            - develop-*
+    workflow_call:
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        env:
+            RCLONE_CONFIG_S3_TYPE: s3
+            RCLONE_CONFIG_S3_PROVIDER: Cloudflare
+            RCLONE_CONFIG_S3_ACCESS_KEY_ID: ${{ secrets.S3_ACCESS_KEY }}
+            RCLONE_CONFIG_S3_SECRET_ACCESS_KEY: ${{ secrets.S3_SECRET_KEY }}
+            RCLONE_CONFIG_S3_ENDPOINT: ${{ secrets.CF_ACCOUNT_ID }}.r2.cloudflarestorage.com
+        steps:
+            -   uses: actions/checkout@v3
+            -   name: Use Node.js
+                uses: actions/setup-node@v3
+                with:
+                    node-version: 18.x
+                    cache: 'npm'
+            -   run: npm ci
+            -   run: npm run build --if-present
+                env:
+                    NODE_OPTIONS: "--max_old_space_size=4096"
+            -   name: Install SSH key
+                uses: shimataro/ssh-key-action@v2
+                with:
+                    key: ${{ secrets.GITEA_SSH_KEY }}
+                    known_hosts: ${{ secrets.GITEA_KNOWN_HOST }}
+            -   name: Publish
+                run: npm run semantic-release
+                env:
+                    NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+            -   name: Clean Up Robots Dev
+                if: ${{ github.ref_name == 'develop' }}
+                run: mv dist/robots-dev.txt dist/robots.txt
+
+            -   name: Clean Up Robots Prod
+                if: ${{ github.ref_name == 'master' }}
+                run: rm dist/robots-dev.txt
+
+            -   name: Setup RClone
+                run: curl https://rclone.org/install.sh | sudo bash -s
+            -   name: Publish to S3 Dev
+                if: ${{ github.ref_name == 'develop' }}
+                run: rclone sync dist/ s3:${{ vars.S3_BUCKET_DEV }}/
+
+            -   name: Publish to S3 Prod
+                if: ${{ github.ref_name == 'master' }}
+                run: rclone sync dist/ s3:${{ vars.S3_BUCKET }}/
+            -   name: Setup tmate session
+                uses: mxschmitt/action-tmate@v3
+                if: ${{ github.event_name == 'workflow_dispatch' && inputs.debug_enabled && failure() }}
+                with:
+                    limit-access-to-actor: true

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.releaserc.json

@@ -0,0 +1,73 @@
+{
+    "plugins": [
+        [
+            "@semantic-release/commit-analyzer",
+            {
+                "releaseRules": [
+                    {
+                        "breaking": true,
+                        "release": "major"
+                    },
+                    {
+                        "revert": true,
+                        "release": "patch"
+                    },
+                    {
+                        "type": "feat",
+                        "release": "minor"
+                    },
+                    {
+                        "type": "fix",
+                        "release": "patch"
+                    },
+                    {
+                        "type": "perf",
+                        "release": "patch"
+                    },
+                    {
+                        "type": "dep",
+                        "release": "patch"
+                    },
+                    {
+                        "type": "refactor",
+                        "release": "patch"
+                    }
+                ]
+            }
+        ],
+        "@semantic-release/release-notes-generator",
+        [
+            "@semantic-release/changelog",
+            {
+                "changelogFile": "CHANGELOG.md"
+            }
+        ],
+        [
+            "@semantic-release/npm",
+            {
+                "npmPublish": false
+            }
+        ],
+        [
+            "@semantic-release/git",
+            {
+                "assets": [
+                    "package.json",
+                    "CHANGELOG.md",
+                    "npm-shrinkwrap.json"
+                ]
+            }
+        ]
+    ],
+    "branches": [
+        "master",
+        {
+            "name": "develop",
+            "prerelease": true
+        },
+        {
+            "name": "develop-*",
+            "prerelease": true
+        }
+    ]
+}

.stylelintrc.json

@@ -0,0 +1 @@
+{ "extends": ["stylelint-config-standard"] }

CHANGELOG.md

@@ -0,0 +1,108 @@
+# [0.1.0](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.0.1...v0.1.0) (2023-08-13)
+
+
+### Bug Fixes
+
+* bg image invalid, and update name ([a8bbcc1](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/a8bbcc19ec87ed09fb26512651deb7b5a4d1a098))
+* contrast on 'ourvision' section ([2ec5873](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/2ec58730439533d5dbe329ae9a5def22c0c67566))
+* grammer error ([432be86](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/432be86cc584543c560581936d63714db5037849))
+* meme misalignment ([e773619](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/e773619524647074554005f18ec8840ddd06b1cb))
+* mobile layout on footer and message component ([5a8b20b](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/5a8b20b16e1493d4a6238acd81718f8b500c1ac4))
+* responsive is now all over the page :) ([7c48975](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/7c48975f79720b88131c27a7559120597a4e3f5c))
+* revert copy for meme section ([187095e](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/187095e54f22d58d933df59bb5fcab631fcb0831))
+* set url for download extension button ([fa8993b](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/fa8993b2bd422cbc2bc09c467dbc1749a8a921bb))
+* small improvement on 4k screens ([0bba290](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/0bba290f286b9f54a6b3e14c4c5e1d516f44dcf9))
+* switch to experimental image support and import missing images ([cd278e3](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/cd278e3a466b59df6946634142aa17016b4024ff))
+* typo ([26b3f5f](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/26b3f5f8788151a06dbcf83bb848918ccaf8d067))
+* update copy ([9b5fcfe](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/9b5fcfea318a83f662ae436fce0444c2dd808040))
+* wording change ([575a5b8](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/575a5b81495b3560a8146d4d35cd4a0064d37a32))
+
+
+### Features
+
+* copy to clipboard, qr code generation, further donation methods ([20a99a6](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/20a99a65d85fd55526ff0e3bee382794f7e528f5))
+* create two remaining components, optimize layout and existing components (wip) ([b6f8d56](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/b6f8d567baaf5a6d0358e1dcb0de39ad081f32f0))
+* finish all new design implementations ([486bc6a](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/486bc6ae7278e66aa2cd6f9d3e5c2df491d21960))
+* local fonts ([b52911c](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/b52911cb51d2b3a4169da07a80ab39b9503492cf))
+* meme grid is now responsive ([3552e8b](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/3552e8bb845d154a833a7e37ee30b2135e03bd79))
+* mobile menu, css cleanup, component details ([0c6391e](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/0c6391e3a13e62f2c93035e8dd82577b63b42fd6))
+* pure css tilted background ([05eb109](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/05eb1099386f3cdf1f300a82d6bb2eee4c60f861))
+* refactor message component and footer ([8c14799](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/8c14799f5a0136cffffd05d90e83a81f53954b81))
+* rework several sections on home page, some refactoring ([4935177](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/4935177908f9411de0999048367cc384592f198a))
+* sass support, mixins for fluid design, refactoring, work on components ([9701291](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/97012911aab8659d0ddb268a9bc54d72e1c37b6f))
+* svg icons, donation methods ([63e0c57](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/63e0c57b0329f76609f6d9a55a37585dfce7f45d))
+
+# [0.1.0-develop.8](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.1.0-develop.7...v0.1.0-develop.8) (2023-08-13)
+
+
+### Bug Fixes
+
+* contrast on 'ourvision' section ([2ec5873](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/2ec58730439533d5dbe329ae9a5def22c0c67566))
+
+# [0.1.0-develop.7](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.1.0-develop.6...v0.1.0-develop.7) (2023-08-13)
+
+
+### Bug Fixes
+
+* mobile layout on footer and message component ([5a8b20b](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/5a8b20b16e1493d4a6238acd81718f8b500c1ac4))
+
+# [0.1.0-develop.6](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.1.0-develop.5...v0.1.0-develop.6) (2023-08-13)
+
+
+### Bug Fixes
+
+* set url for download extension button ([fa8993b](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/fa8993b2bd422cbc2bc09c467dbc1749a8a921bb))
+
+# [0.1.0-develop.5](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.1.0-develop.4...v0.1.0-develop.5) (2023-08-13)
+
+
+### Features
+
+* refactor message component and footer ([8c14799](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/8c14799f5a0136cffffd05d90e83a81f53954b81))
+
+# [0.1.0-develop.4](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.1.0-develop.3...v0.1.0-develop.4) (2023-08-13)
+
+
+### Bug Fixes
+
+* update copy ([9b5fcfe](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/9b5fcfea318a83f662ae436fce0444c2dd808040))
+
+# [0.1.0-develop.3](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.1.0-develop.2...v0.1.0-develop.3) (2023-08-13)
+
+
+### Bug Fixes
+
+* meme misalignment ([e773619](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/e773619524647074554005f18ec8840ddd06b1cb))
+
+# [0.1.0-develop.2](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.1.0-develop.1...v0.1.0-develop.2) (2023-08-13)
+
+
+### Bug Fixes
+
+* wording change ([575a5b8](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/575a5b81495b3560a8146d4d35cd4a0064d37a32))
+
+# [0.1.0-develop.1](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.0.1...v0.1.0-develop.1) (2023-08-13)
+
+
+### Bug Fixes
+
+* bg image invalid, and update name ([a8bbcc1](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/a8bbcc19ec87ed09fb26512651deb7b5a4d1a098))
+* grammer error ([432be86](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/432be86cc584543c560581936d63714db5037849))
+* responsive is now all over the page :) ([7c48975](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/7c48975f79720b88131c27a7559120597a4e3f5c))
+* small improvement on 4k screens ([0bba290](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/0bba290f286b9f54a6b3e14c4c5e1d516f44dcf9))
+* switch to experimental image support and import missing images ([cd278e3](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/cd278e3a466b59df6946634142aa17016b4024ff))
+* typo ([26b3f5f](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/26b3f5f8788151a06dbcf83bb848918ccaf8d067))
+
+
+### Features
+
+* copy to clipboard, qr code generation, further donation methods ([20a99a6](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/20a99a65d85fd55526ff0e3bee382794f7e528f5))
+* create two remaining components, optimize layout and existing components (wip) ([b6f8d56](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/b6f8d567baaf5a6d0358e1dcb0de39ad081f32f0))
+* finish all new design implementations ([486bc6a](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/486bc6ae7278e66aa2cd6f9d3e5c2df491d21960))
+* local fonts ([b52911c](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/b52911cb51d2b3a4169da07a80ab39b9503492cf))
+* meme grid is now responsive ([3552e8b](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/3552e8bb845d154a833a7e37ee30b2135e03bd79))
+* mobile menu, css cleanup, component details ([0c6391e](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/0c6391e3a13e62f2c93035e8dd82577b63b42fd6))
+* pure css tilted background ([05eb109](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/05eb1099386f3cdf1f300a82d6bb2eee4c60f861))
+* rework several sections on home page, some refactoring ([4935177](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/4935177908f9411de0999048367cc384592f198a))
+* sass support, mixins for fluid design, refactoring, work on components ([9701291](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/97012911aab8659d0ddb268a9bc54d72e1c37b6f))
+* svg icons, donation methods ([63e0c57](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/63e0c57b0329f76609f6d9a55a37585dfce7f45d))

LICENSE

@@ -1,73 +0,0 @@
-Apache License
-Version 2.0, January 2004
-http://www.apache.org/licenses/
-
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-1. Definitions.
-
-"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
-
-"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
-
-"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
-
-"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
-
-"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
-
-"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
-
-"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
-
-"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
-
-"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
-
-"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
-
-2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
-
-3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
-
-4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
-
-     (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and
-
-     (b) You must cause any modified files to carry prominent notices stating that You changed the files; and
-
-     (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
-
-     (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
-
-     You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
-
-5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
-
-6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
-
-7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
-
-8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
-
-9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
-
-END OF TERMS AND CONDITIONS
-
-APPENDIX: How to apply the Apache License to your work.
-
-To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!)  The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.
-
-Copyright [yyyy] [name of copyright owner]
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.

LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright 2023 Hammer Technologies LLC
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

README.md

@@ -1,2 +1,14 @@
-# lumeweb.com
+# Lume Web Project Site
 
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:3000`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |

astro.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig } from 'astro/config'
+import tailwind from '@astrojs/tailwind'
+import react from '@astrojs/react'
+
+// https://astro.build/config
+export default defineConfig({
+    integrations: [tailwind({ config: { applyBaseStyles: false } }), react()],
+    experimental: {
+        assets: true
+    }
+})

package.json

@@ -0,0 +1,40 @@
+{
+    "name": "@lumeweb/lumeweb.com",
+    "type": "module",
+    "version": "0.1.0",
+    "private": true,
+    "repository": {
+        "type": "git",
+        "url": "gitea@git.lumeweb.com:LumeWeb/lumeweb.com.git"
+    },
+    "scripts": {
+        "dev": "TAILWIND_MODE=watch astro dev",
+        "start": "astro dev",
+        "build": "astro build",
+        "preview": "astro preview",
+        "astro": "astro",
+        "semantic-release": "semantic-release"
+    },
+    "dependencies": {
+        "@astrojs/react": "^2.1.1",
+        "@astrojs/tailwind": "^3.1.1",
+        "@types/react": "^18.2.0",
+        "astro": "^2.3.2",
+        "autoprefixer": "^10.4.14",
+        "qrcode": "^1.5.3",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.62.1",
+        "tailwindcss": "^3.3.2",
+        "typewriter-effect": "^2.19.0"
+    },
+    "devDependencies": {
+        "@semantic-release/changelog": "^6.0.3",
+        "@semantic-release/git": "^10.0.1",
+        "@semantic-release/npm": "^10.0.4",
+        "@semantic-release/release-notes-generator": "^11.0.4",
+        "semantic-release": "^21.0.7",
+        "stylelint": "^15.6.0",
+        "stylelint-config-standard": "^33.0.0"
+    }
+}

postcss.config.cjs

@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: [
+    require('tailwindcss/nesting'),
+    require('tailwindcss'),
+    require('autoprefixer')
+  ]
+};

public/robots-dev.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow: /

public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Allow: /

src/assets/icons/discord.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 127.14 96.36" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentcolor" d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
+</svg>

src/assets/icons/git.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 92">
+	<path style="stroke:none;fill-rule:nonzero;fill:currentColor;fill-opacity:1" d="M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371"/>
+</svg>

src/assets/icons/github.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentcolor" fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/>
+</svg>

src/assets/icons/hns.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" viewBox="0 0 2000 2088.9" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" clip="evenodd" d="M1726.6,681.4l-129.8-230.6l251.5,0.1c6.7,0,14.6,4.5,18.2,10.5c4,6.6,24.4,40.3,49,80.7 c29.4,48.4,64.5,106.3,84.6,139.3H1726.6z M1261.4,2078c-6.1,10.9-14,10.9-16.6,10.9h-102.8c-54.4,0-117.1-0.1-154.5-0.1 l399.6-717.4c10.4-18.5,3.7-42-14.8-52.3c-5.7-3.2-12.1-4.9-18.6-4.9l0,0l-681,0.9l-135.5-234.5h992c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0 c0.6,0,1.1-0.2,1.6-0.2c2.2-0.1,4.4-0.4,6.6-0.9c1.6-0.4,3.3-0.9,4.8-1.5c0.8-0.3,1.7-0.7,2.5-1c7.7-3.3,14.1-9.1,18.2-16.5 L1727,758.2h270L1261.4,2078z M921.1,2050.7c-8.7-14.3-20-32.9-32.3-53.1c-41.3-68.2-94.2-155.5-100.2-165.1 c-2-3.2-2.9-11.1,1.3-18.7c9.6-17.2,190.4-343,234.5-422.4l264.1-0.3L921.1,2050.7z M470.8,1601.8l-131.3-233.2l132.3-248 l132.7,229.7C563.3,1428,498.9,1549.1,470.8,1601.8z M294.6,1638.1c-66.8,0-133.3,0-143,0l0,0c-6.5,0-14.4-4.6-18-10.5l-42.7-70.4 C60.4,1507,21.5,1442.9,0,1407.5h273.4l129.8,230.6C374.9,1638.1,334.8,1638.1,294.6,1638.1L294.6,1638.1z M738.6,11 c6.1-11,14-11,16.5-11h258.3L612.7,717.4c-0.3,0.6-0.5,1.2-0.8,1.9c-0.6,1.2-1.1,2.4-1.6,3.7c-0.4,1.2-0.8,2.4-1.1,3.7 s-0.6,2.3-0.8,3.5c-0.2,1.4-0.4,2.8-0.4,4.3c0,0.6-0.2,1.2-0.2,1.9c0,0.5,0.1,0.9,0.2,1.4c0,1.4,0.2,2.8,0.4,4.2 c0.1,1.2,0.3,2.3,0.6,3.5c0.3,1.2,0.7,2.4,1.1,3.6c0.4,1.2,0.8,2.3,1.3,3.5s1.1,2.2,1.7,3.2s1.2,2.1,2,3.1c0.7,1,1.5,2,2.4,2.9 c0.8,0.9,1.6,1.8,2.5,2.7s1.8,1.5,2.8,2.3c1.1,0.8,2.2,1.6,3.3,2.3c0.4,0.3,0.8,0.6,1.2,0.9s0.9,0.3,1.4,0.6c2,1,4.1,1.9,6.2,2.5 c0.8,0.2,1.5,0.5,2.3,0.7c2.8,0.7,5.7,1.1,8.7,1.1c0,0,0,0,0.1,0h0.1h17c0.1,0,0.2,0,0.2,0l0,0l663.9-0.9 c17.6,30.5,50.4,88,78.3,136.9c21.4,37.6,39.2,68.6,53.2,93h-988c-0.4,0-0.8,0.1-1.3,0.2c-13.9,0.1-26.6,7.9-33.2,20.1l-163.6,306.6 H3.1C120.8,1119.3,730.7,25,738.6,11z M1079.4,39.1l24,39.5c42.1,69.5,101.6,167.6,107.9,177.8c2,3.2,2.9,11.1-1.3,18.7L975.6,697.3 l-264,0.3L1079.4,39.1z M1529.1,486.9l131.3,233.3l-133.9,247.5c-16-27.8-35.8-62.6-54.4-95.2c-36.8-64.4-63.6-111.3-78.7-137.5 C1422.1,682.8,1497.5,544.5,1529.1,486.9z"/>
+</svg>

src/assets/icons/osi.svg

@@ -0,0 +1,26 @@
+<svg version="1.2" viewBox="0 0 468.1909 614.0127" xmlns="http://www.w3.org/2000/svg">
+ <path d="m262.006 307.1224c32.25781-11.98047 49.09765-35.05078 49.09765-74.75781s-33.46093-74.69531-75.26953-74.76563c-44.12109-0.0703-77.40234 34.91407-76.87109 74.76563s19.53906 66.36328 49.95703 75.94922l-53.88672 132.5703c-72.12109-18.67187-145.4727-103.7539-145.4727-208.5195 0-124.0859 99.70313-224.6797 224.6719-224.6797s226.2734 100.5937 226.2734 224.6797c0 106.3945-72.65625 190.293-146.3164 208.8906zm0 0" style="fill:currentcolor;stroke-linecap:round;stroke-linejoin:round;stroke-width:15.3697;stroke:currentcolor"/>
+ <g id="text" transform="matrix(1.082924 0 0 1.148944 -55.53372 -162.9183)" style="fill:currentcolor;stroke-width:.75px">
+  <path id="o1" d="m91.04297 583.3072q0 9.77344-5.273438 15.25781-5.238281 5.44922-14.69531 5.44922-9.070313 0-14.44922-5.58984-5.34375-5.58985-5.34375-15.11719 0-9.73828 5.238281-15.11719 5.273438-5.41406 14.76562-5.41406 5.871094 0 10.37109 2.49609 4.5 2.4961 6.925781 7.17188 2.460938 4.64062 2.460938 10.86328zm-25.80469 0q0 5.13281 1.371094 7.83984 1.371094 2.67188 4.605469 2.67188 3.199218 0 4.5-2.67188 1.335937-2.70703 1.335937-7.83984 0-5.09766-1.335937-7.69922-1.335938-2.60156-4.570313-2.60156-3.164062 0-4.535156 2.60156-1.371094 2.56641-1.371094 7.69922z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
+  <path id="p" d="m122.7539 604.0143q-3.02344 0-5.41407-0.98437-2.39062-1.01953-4.74609-3.6211h-0.63281q0.63281 4.1836 0.63281 5.20313v15.99609h-13.74609v-57.1289h11.17968l1.9336 5.0625h0.63281q3.83203-5.76563 10.58203-5.76563 6.60938 0 10.37109 5.48438 3.76172 5.48437 3.76172 15.04687 0 9.63281-3.9375 15.1875-3.90234 5.51953-10.61718 5.51953zm-4.60547-30.44531q-3.02344 0-4.25391 2.17969-1.19531 2.14453-1.30078 6.39843v1.08985q0 5.13281 1.37109 7.41797 1.3711 2.28515 4.32422 2.28515 2.63672 0 3.83203-2.25 1.19532-2.28515 1.19532-7.52343 0-5.13282-1.19532-7.34766-1.19531-2.25-3.97265-2.25z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
+  <path id="e1" d="m164.3438 604.0143q-9.94922 0-15.46875-5.27344-5.48438-5.30859-5.48438-15.08203 0-10.08984 5.09766-15.46875 5.09766-5.41406 14.55469-5.41406 9 0 13.88672 4.71094 4.92187 4.67578 4.92187 13.5v6.11719h-24.57422q0.14063 3.33984 2.42578 5.23828 2.32032 1.89843 6.29297 1.89843 3.6211 0 6.64453-0.66796 3.0586-0.70313 6.60938-2.35547v9.8789q-3.23438 1.65235-6.67969 2.28516t-8.22656 0.63281zm-0.80859-31.88672q-2.42579 0-4.07813 1.54688-1.61719 1.51172-1.89844 4.78125h11.8125q-0.0703-2.88281-1.65234-4.60547-1.54688-1.72266-4.18359-1.72266z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
+  <path id="n1" d="m214.8281 603.3112v-21.72657q0-3.97265-1.16015-5.97656-1.125-2.03906-3.65625-2.03906-3.48047 0-5.02735 2.77734-1.54687 2.77735-1.54687 9.52735v17.4375h-13.74609v-39.83203h10.37109l1.72266 4.92187h0.80859q1.75781-2.8125 4.85156-4.21875 3.12891-1.40625 7.17188-1.40625 6.60937 0 10.26562 3.83203 3.69141 3.83203 3.69141 10.79297v25.91016z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
+  <path id="s" d="m283.9102 592.2369q0 5.69531-4.14844 8.7539-4.14844 3.02344-11.88281 3.02344-7.76954 0-12.48047-2.35547v-7.13672q6.85547 3.16407 12.76172 3.16407 7.6289 0 7.6289-4.60547 0-1.47656-0.84375-2.46094-0.84375-0.98437-2.77734-2.03906-1.9336-1.05469-5.37891-2.39063-6.71484-2.60156-9.10547-5.20312-2.35547-2.60156-2.35547-6.75 0-4.99219 4.00782-7.73438 4.04297-2.77734 10.96875-2.77734 6.85547 0 12.97265 2.77734l-2.67187 6.22266q-6.29297-2.60156-10.58203-2.60156-6.53907 0-6.53907 3.72656 0 1.82812 1.6875 3.09375 1.72266 1.26562 7.45313 3.48047 4.81641 1.86328 6.99609 3.41015 2.17969 1.54688 3.23438 3.58594 1.05469 2.00391 1.05469 4.81641z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
+  <path id="o2" d="m327.293 583.7994q0 9.52734-4.88672 14.87109t-13.60547 5.34375q-5.44922 0-9.63281-2.46094-4.1836-2.46093-6.4336-7.0664t-2.25-10.6875q0-9.45703 4.85157-14.76563 4.85156-5.30859 13.67578-5.30859 8.4375 0 13.35937 5.44922 4.92188 5.41406 4.92188 14.625zm-28.30078 0q0 13.46484 9.94922 13.46484 9.84375 0 9.84375-13.46484 0-13.32422-9.91407-13.32422-5.20312 0-7.55859 3.44531-2.32031 3.44531-2.32031 9.87891z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
+  <path id="u" d="m364.2422 603.3112-1.16016-5.09766h-0.42187q-1.72266 2.70703-4.92188 4.25391-3.16406 1.54687-7.24219 1.54687-7.0664 0-10.54687-3.51562-3.48047-3.51563-3.48047-10.65235v-25.41797h8.33203v23.97657q0 4.46484 1.82813 6.71484 1.82812 2.21484 5.73046 2.21484 5.20313 0 7.62891-3.09375 2.46094-3.1289 2.46094-10.4414v-19.3711h8.29687v38.88282z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
+  <path id="r" d="m402.2461 563.7252q2.4961 0 4.11328 0.35156l-0.80859 7.69922q-1.75781-0.42187-3.65625-0.42187-4.95703 0-8.05078 3.23437-3.05859 3.23438-3.05859 8.40234v20.32032h-8.26172v-38.88282h6.46875l1.08984 6.85547h0.42188q1.93359-3.48047 5.02734-5.51953 3.12891-2.03906 6.71484-2.03906z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
+  <path id="c" d="m429.2812 604.0143q-8.82422 0-13.42969-5.13281-4.57031-5.16797-4.57031-14.80078 0-9.8086 4.78125-15.08203 4.81641-5.27344 13.88672-5.27344 6.15234 0 11.07422 2.28516l-2.4961 6.64453q-5.23828-2.03907-8.64843-2.03907-10.08985 0-10.08985 13.39454 0 6.53906 2.4961 9.84375 2.53125 3.26953 7.38281 3.26953 5.51953 0 10.4414-2.74219v7.20703q-2.21484 1.30078-4.74609 1.86328-2.49609 0.5625-6.08203 0.5625z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
+  <path id="e2" d="m466.3008 604.0143q-9.07031 0-14.20312-5.27344-5.09766-5.30859-5.09766-14.58984 0-9.52734 4.74609-14.97656 4.7461-5.44922 13.04297-5.44922 7.69922 0 12.16406 4.67578 4.46485 4.67578 4.46485 12.86719v4.46484h-25.91016q0.17578 5.66016 3.0586 8.71875 2.88281 3.02344 8.12109 3.02344 3.44531 0 6.39844-0.63281 2.98828-0.66797 6.39843-2.17969v6.71484q-3.02343 1.44141-6.11718 2.03907-3.09375 0.59765-7.06641 0.59765zm-1.51172-34.03125q-3.9375 0-6.32812 2.4961-2.35547 2.49609-2.8125 7.27734h17.64843q-0.0703-4.81641-2.32031-7.27734-2.25-2.4961-6.1875-2.4961z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
+  <path id="i1" d="m128.5195 675.51h-8.26172v-38.88281h8.26172zm-8.7539-49.18359q0-2.21485 1.19531-3.41016 1.23047-1.19531 3.48047-1.19531 2.17968 0 3.375 1.19531 1.23046 1.19531 1.23046 3.41016 0 2.10937-1.23046 3.33984-1.19532 1.19531-3.375 1.19531-2.25 0-3.48047-1.19531-1.19531-1.23047-1.19531-3.33984z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
+  <path id="n2" d="m174.5742 675.51h-8.29688v-23.90625q0-4.5-1.82812-6.71484-1.79297-2.21485-5.73047-2.21485-5.23828 0-7.66406 3.09375t-2.42578 10.3711v19.37109h-8.26172v-38.88281h6.46875l1.16015 5.09765h0.42188q1.75781-2.77734 4.99219-4.28906 3.23437-1.51172 7.17187-1.51172 13.99219 0 13.99219 14.23828z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
+  <path id="i2" d="m194.332 675.51h-8.26172v-38.88281h8.26172zm-8.75391-49.18359q0-2.21485 1.19532-3.41016 1.23047-1.19531 3.48047-1.19531 2.17968 0 3.375 1.19531 1.23046 1.19531 1.23046 3.41016 0 2.10937-1.23046 3.33984-1.19532 1.19531-3.375 1.19531-2.25 0-3.48047-1.19531-1.19532-1.23047-1.19532-3.33984z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
+  <path id="t1" d="m220.6641 669.5334q3.02344 0 6.04688-0.94922v6.22265q-1.3711 0.59766-3.55078 0.98438-2.14454 0.42187-4.46485 0.42187-11.74219 0-11.74219-12.375v-20.95312h-5.30859v-3.65625l5.69531-3.02344 2.8125-8.22656h5.09766v8.64844h11.07422v6.25781h-11.07422v20.8125q0 2.98828 1.47656 4.42969 1.51172 1.40625 3.9375 1.40625z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
+  <path id="i3" d="m242.707 675.51h-8.26172v-38.88281h8.26172zm-8.75391-49.18359q0-2.21485 1.19532-3.41016 1.23047-1.19531 3.48047-1.19531 2.17968 0 3.375 1.19531 1.23046 1.19531 1.23046 3.41016 0 2.10937-1.23046 3.33984-1.19532 1.19531-3.375 1.19531-2.25 0-3.48047-1.19531-1.19532-1.23047-1.19532-3.33984z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
+  <path id="a" d="m278.8828 675.51-1.65234-5.41406h-0.28125q-2.8125 3.55078-5.66016 4.85156-2.84765 1.26562-7.3125 1.26562-5.73047 0-8.96484-3.09375-3.19922-3.09375-3.19922-8.7539 0-6.01172 4.46484-9.07031 4.46485-3.0586 13.60547-3.33985l6.71485-0.21094v-2.07421q0-3.72657-1.75782-5.55469-1.72265-1.86328-5.3789-1.86328-2.98828 0-5.73047 0.8789-2.74219 0.87891-5.27344 2.07422l-2.67187-5.90625q3.16406-1.65234 6.92578-2.49609 3.76172-0.87891 7.10156-0.87891 7.41797 0 11.17969 3.23438 3.79687 3.23437 3.79687 10.16015v26.19141zm-12.30469-5.625q4.5 0 7.20704-2.49609 2.74218-2.53125 2.74218-7.06641v-3.375l-4.99218 0.21094q-5.83594 0.21093-8.50782 1.96875-2.63672 1.72265-2.63672 5.30859 0 2.60156 1.54688 4.04297 1.54687 1.40625 4.64062 1.40625z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
+  <path id="t2" d="m310.8047 669.5334q3.02343 0 6.04687-0.94922v6.22265q-1.37109 0.59766-3.55078 0.98438-2.14453 0.42187-4.46484 0.42187-11.74219 0-11.74219-12.375v-20.95312h-5.30859v-3.65625l5.69531-3.02344 2.8125-8.22656h5.09765v8.64844h11.07422v6.25781h-11.07422v20.8125q0 2.98828 1.47657 4.42969 1.51172 1.40625 3.9375 1.40625z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
+  <path id="i4" d="m332.8477 675.51h-8.26172v-38.88281h8.26172zm-8.75391-49.18359q0-2.21485 1.19531-3.41016 1.23047-1.19531 3.48047-1.19531 2.17969 0 3.375 1.19531 1.23047 1.19531 1.23047 3.41016 0 2.10937-1.23047 3.33984-1.19531 1.19531-3.375 1.19531-2.25 0-3.48047-1.19531-1.19531-1.23047-1.19531-3.33984z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
+  <path id="v" d="m353.5547 675.51-14.76563-38.88281h8.71875l7.91016 22.60547q2.03906 5.69531 2.46094 9.21093h0.28125q0.3164-2.53125 2.46093-9.21093l7.91016-22.60547h8.78906l-14.83594 38.88281z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
+  <path id="e3" d="m400.207 676.2131q-9.07031 0-14.20312-5.27343-5.09766-5.3086-5.09766-14.58985 0-9.52734 4.74609-14.97656 4.7461-5.44922 13.04297-5.44922 7.69922 0 12.16406 4.67578 4.46485 4.67578 4.46485 12.86719v4.46484h-25.91016q0.17578 5.66016 3.0586 8.71875 2.88281 3.02344 8.12109 3.02344 3.44531 0 6.39844-0.63281 2.98828-0.66797 6.39843-2.17969v6.71485q-3.02343 1.4414-6.11718 2.03906-3.09375 0.59765-7.06641 0.59765zm-1.51172-34.03125q-3.9375 0-6.32812 2.4961-2.35547 2.49609-2.8125 7.27734h17.64843q-0.0703-4.8164-2.32031-7.27734-2.25-2.4961-6.1875-2.4961z" style="font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal;stroke-width:.75px"/>
+  <path id="registered_tm" d="m431.7151 631.1344h1.75306q1.29857 0 2.07771-0.62727 0.79537-0.64258 0.79537-1.62174 0-1.14745-0.69798-1.63703-0.69798-0.50488-2.20756-0.50488h-1.7206zm7.04472-2.31021q0 1.22395-0.69798 2.17252-0.68174 0.93326-1.93162 1.39224l3.86324 6.04325h-2.72699l-3.36004-5.41597h-2.19133v5.41597h-2.40235v-13.63174h4.23657q2.69453 0 3.9444 0.99446 1.2661 0.99446 1.2661 3.02927zm-17.15731 2.78449q0-3.05987 1.62321-5.73727 1.6232-2.67739 4.46382-4.22262 2.84061-1.54524 6.1195-1.54524 3.24641 0 6.08703 1.52994 2.84061 1.52994 4.48005 4.20733 1.63945 2.67739 1.63945 5.76786 0 3.01398-1.57452 5.66077-1.57451 2.64679-4.41512 4.23793-2.84062 1.59113-6.21689 1.59113-3.36005 0-6.20066-1.57583-2.84062-1.59114-4.43136-4.23793-1.57451-2.64679-1.57451-5.67607zm1.70437 0q0 2.64679 1.41219 4.957 1.41219 2.2949 3.847 3.62595 2.45105 1.31575 5.24297 1.31575 2.82438 0 5.24296-1.33105t3.83077-3.59535q1.42843-2.27961 1.42843-4.9723 0-2.66209-1.4122-4.9417-1.41219-2.2796-3.83077-3.61065-2.40235-1.34635-5.25919-1.34635-2.82439 0-5.24297 1.33105t-3.847 3.61066q-1.41219 2.2643-1.41219 4.95699z" style="fill:currentcolor;font-feature-settings:normal;font-variant-caps:normal;font-variant-ligatures:normal;font-variant-numeric:normal"/>
+ </g>
+</svg>

src/assets/icons/sia.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 65 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 33.1034C2.44131 36.5305 6.36863 39 12.0473 39C18.2567 39 22.3963 35.6233 22.3963 31.1379C22.3963 27.7613 20.1673 24.8886 14.9132 23.2759L10.7736 22.0159C9.28758 21.5623 8.27922 20.8064 8.27922 19.5968C8.27922 18.3873 9.49987 17.3793 11.5697 17.3793C13.9048 17.3793 15.8685 18.8408 16.8238 20.0504L21.2818 16.5225C19.5835 14.3554 16.0277 12.0371 11.4105 12.0371C5.67869 12.0371 1.75137 15.6154 1.75137 19.5968C1.75137 22.7719 3.98039 25.695 8.4915 27.1565L12.2065 28.366C15.0193 29.2732 15.8685 30.1804 15.8685 31.3395C15.8685 32.7003 14.4886 33.6578 12.0473 33.6578C9.0753 33.6578 6.84628 32.4987 4.7234 29.8276L0 33.1034Z" fill="currentColor"/>
+  <path d="M26.519 4.77984C26.519 6.84615 28.2703 8.61008 30.4993 8.61008C32.6753 8.61008 34.4797 6.84615 34.4797 4.77984C34.4797 2.71353 32.6753 1 30.4993 1C28.2703 1 26.519 2.71353 26.519 4.77984ZM27.1558 38.244H33.8429V12.7931H27.1558V38.244Z" fill="currentColor"/>
+  <path d="M62.025 26.5L62.025 36.025L51 36.025C45.4633 36.025 40.975 31.5367 40.975 26C40.975 20.4633 45.4633 15.975 51 15.975L51.5 15.975C57.3128 15.975 62.025 20.6872 62.025 26.5Z" stroke="currentColor" stroke-width="5.95"/>
+</svg>

src/assets/icons/twitter.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentcolor" d="M400,200c0,110.5-89.5,200-200,200S0,310.5,0,200S89.5,0,200,0S400,89.5,400,200z M163.4,305.5 c88.7,0,137.2-73.5,137.2-137.2c0-2.1,0-4.2-0.1-6.2c9.4-6.8,17.6-15.3,24.1-25c-8.6,3.8-17.9,6.4-27.7,7.6 c10-6,17.6-15.4,21.2-26.7c-9.3,5.5-19.6,9.5-30.6,11.7c-8.8-9.4-21.3-15.2-35.2-15.2c-26.6,0-48.2,21.6-48.2,48.2 c0,3.8,0.4,7.5,1.3,11c-40.1-2-75.6-21.2-99.4-50.4c-4.1,7.1-6.5,15.4-6.5,24.2c0,16.7,8.5,31.5,21.5,40.1c-7.9-0.2-15.3-2.4-21.8-6 c0,0.2,0,0.4,0,0.6c0,23.4,16.6,42.8,38.7,47.3c-4,1.1-8.3,1.7-12.7,1.7c-3.1,0-6.1-0.3-9.1-0.9c6.1,19.2,23.9,33.1,45,33.5 c-16.5,12.9-37.3,20.6-59.9,20.6c-3.9,0-7.7-0.2-11.5-0.7C110.8,297.5,136.2,305.5,163.4,305.5"/>
+</svg>

src/components/Donate/How/How.astro

@@ -0,0 +1,18 @@
+---
+import './How.scss';
+---
+
+<section id="how">
+    <div class="custom-bg"></div>
+    <div class="feature-group">
+        <h2>How should I donate?</h2>
+        <h3>Donate via Gitcoin during funding rounds</h3>
+        <p>
+            When Gitcoin is doing funding rounds, donating through their website will give a matching bonus of up to
+            150%. This means that your donation will have a bigger impact on the project during this time period.
+        </p>
+        <div>
+            <a href="https://gitcoin.co/grants/4722/lume-web-web3-accessibility-freedom-and-education" class="btn-main">Gitcoin</a>
+        </div>
+    </div>
+</section>

src/components/Donate/How/How.scss

@@ -0,0 +1,50 @@
+@import "/src/styles/vars.scss";
+
+#how {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-top: 8em;
+  padding: 14em 7.5% 16em;
+
+  .custom-bg {
+    position: absolute;
+    top: 0;
+    right: -12.5%;
+    bottom: 0;
+    left: -12.5%;
+    margin: 2% 0;
+    background: $color-blue-charcoal;
+    transform: matrix(1, 0.04, -0.04, 1, 0, 0);
+    z-index: -1;
+    overflow: hidden;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 3%;
+      bottom: -9%;
+      left: 10%;
+      right: 10%;
+      background-image: url("/src/assets/donate-gfx-right.png");
+      background-position: 100% 100%;
+      background-repeat: no-repeat;
+      background-size: contain;
+      transform: rotate(-2.25deg);
+    }
+  }
+
+  .feature-group {
+    max-width: 64em;
+  }
+
+  @media screen and (max-width: 80rem) {
+    p {
+      background: rgba($color-blue-charcoal, 0.75);
+      border-radius: 0.5em;
+      padding: 0.3em 0.5em;
+      margin: -0.3em -0.5em;
+    }
+  }
+}

src/components/Donate/Jumbotron/Jumbotron.astro

@@ -0,0 +1,9 @@
+---
+import '../../../styles/jumbotron.scss';
+---
+
+<section id="jumbotron">
+  <h1>
+    Lume is people-powered.
+  </h1>
+</section>

src/components/Donate/Legal/Legal.astro

@@ -0,0 +1,18 @@
+---
+import './Legal.scss';
+---
+
+<section id="legal" class="tilted-bg-r">
+  <div>
+    <h2>Tax and Legal</h2>
+    <p>
+      <strong>Please understand that, according to United States regulations for our present incorporation status, donations are not currently tax-deductible.</strong>
+    </p>
+    <p>
+      If you are a corporation or business, planning to make a large donation, we recommend that you consult a CPA to ensure you understand the tax implications of your donated funds first.
+    </p>
+    <p>
+      All payments are nondeductible donations (unless you get consulted otherwise) and do not create any implied service contract or obligation for Hammer Technologies LLC to render any services.
+    </p>
+  </div>
+</section>

src/components/Donate/Legal/Legal.scss

@@ -0,0 +1,31 @@
+@import "/src/styles/mixins.scss";
+@import "/src/styles/vars.scss";
+
+#legal {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 11em 7.5% 9em;
+
+  h2 {
+    margin-bottom: 1em;
+    @include fluid-font-size(2.8125rem);
+    line-height: 122%;
+  }
+
+  p {
+    margin-top: 1.5em;
+    font-family: $font-family-jaldi;
+    @include fluid-font-size(1.375rem);
+    line-height: 157%;
+    color: $color-cloud;
+  }
+
+  strong {
+    @include fluid-font-size(1.625rem);
+  }
+
+  &::before {
+    bottom: -12%;
+  }
+}

src/components/Donate/Methods/Methods.astro

@@ -0,0 +1,150 @@
+---
+import './Methods.scss';
+import QRCode from 'qrcode';
+
+const currencies = [];
+
+const addCurrency = async (id, title, address) => {
+  currencies.push({
+    id: id,
+    title: title,
+    address: address,
+    svgLogo: await import(`./icons/${id}.svg?raw`),
+    qrSmall: await QRCode.toDataURL(address, { version: 6, scale: 1, margin: 1 }),
+    qrLarge: await QRCode.toDataURL(address, { version: 6, scale: 7, margin: 2 })
+  });
+};
+
+await addCurrency('bitcoin', 'Bitcoin (BTC)', 'bc1q9xq2w4w2hjc240rs6mf0g8gpzz3rmcz4h77a2a');
+await addCurrency('litecoin', 'Litecoin (LTC)', 'ltc1qgk6fc4u6grqyhfzw208477ze35vrr5tcwhq8zq');
+await addCurrency('ethereum', 'Ethereum (ETH, USDT/USDC, ERC20)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468');
+await addCurrency('polygon', 'Polygon (MATIC)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468');
+await addCurrency('solana', 'Solana (SOL)', '4nMRucCuqttipwQXm31vBgoaxDW6o25TnD8fj1imviCu');
+await addCurrency('cardano', 'Cardano (ADA)', 'addr1q9jd69s53pdy9j567a27ac6uvc2966x0rjz2l9sxy4y5w8383jl87mrdf6uuk9ja7lmagm2p4vw30sa42kjylxxrdufqucgst6');
+await addCurrency('siacoin', 'Siacoin (SC)', '7506caa950cdddbaec8f465937b50324e942ac6f5280a053662e58e3cc8bdb543ab88ccd5c23');
+await addCurrency('monero', 'Monero (XMR)', '48A33fSyFo9YAiux3KHKVBagPGvqmcr2h4oy5pufJn6NUWyZsPF6PAufmrET3gLJjsLwxfU7HU9xe8mEeCqtHqvZN3Ly12h');
+await addCurrency('handshake', 'Handshake (HNS)', 'hs1qe67ak3j2u4yrq0qnfs2hmycxqdvaf9v5rjsxzy');
+await addCurrency('cosmos', 'Cosmos (ATOM)', 'cosmos1pvy8zyzqwz2r2jl9j9d3zrfmg6dqc5hyhj6d5z');
+await addCurrency('secret', 'Secret (SCRT)', 'secret18377vc3af588ggauhrpuyfd954lmmu05xqhf0y');
+await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQLA3RZW4XHD3ISRE7CRYCVNU4EEVAE');
+---
+
+<section id="methods">
+  <div>
+    <h2>Donate Cryptocurrency</h2>
+    <div class="method-grid">
+      {currencies.map(currency => (
+        <div id={'donate-' + currency.id}>
+          <div>
+            <Fragment set:html={currency.svgLogo.default} />
+            <h3>{currency.title}</h3>
+            <img onclick={"openDialog('" + currency.qrLarge + "')"} src={currency.qrSmall}/>
+          </div>
+          <div class="address">
+            <button onclick="copyToClipboard(this)"></button>
+            <div>{currency.address}</div>
+          </div>
+        </div>
+      ))}
+    </div>
+    <h2>Donate Fiat</h2>
+    <div class="method-grid">
+      <div id="donate-paypal">
+        <div>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 154.728 190.5">
+            <g transform="translate(898.192 276.071)">
+              <path clip-path="none" d="M-837.663-237.968a5.49 5.49 0 0 0-5.423 4.633l-9.013 57.15-8.281 52.514-.005.044.01-.044 8.281-52.514c.421-2.669 2.719-4.633 5.42-4.633h26.404c26.573 0 49.127-19.387 53.246-45.658.314-1.996.482-3.973.52-5.924v-.003h-.003c-6.753-3.543-14.683-5.565-23.372-5.565z" fill="#001c64"/>
+              <path clip-path="none" d="M-766.506-232.402c-.037 1.951-.207 3.93-.52 5.926-4.119 26.271-26.673 45.658-53.246 45.658h-26.404c-2.701 0-4.999 1.964-5.42 4.633l-8.281 52.514-5.197 32.947a4.46 4.46 0 0 0 4.405 5.153h28.66a5.49 5.49 0 0 0 5.423-4.633l7.55-47.881c.423-2.669 2.722-4.636 5.423-4.636h16.876c26.573 0 49.124-19.386 53.243-45.655 2.924-18.649-6.46-35.614-22.511-44.026z" fill="#0070e0"/>
+              <path clip-path="none" d="M-870.225-276.071a5.49 5.49 0 0 0-5.423 4.636l-22.489 142.608a4.46 4.46 0 0 0 4.405 5.156h33.351l8.281-52.514 9.013-57.15a5.49 5.49 0 0 1 5.423-4.633h47.782c8.691 0 16.621 2.025 23.375 5.563.46-23.917-19.275-43.666-46.412-43.666z" fill="#003087"/>
+            </g>
+          </svg>
+          <h3>PayPal</h3>
+          <form action="https://www.paypal.com/donate" method="post" target="_top">
+            <input type="hidden" name="hosted_button_id" value="LKDLTQQRQV2U8">
+            <button class="btn-main">Donate</a>
+          </form>
+        </div>
+      </div>
+      <div id="donate-patreon">
+        <div>
+          <svg version="1.1" viewBox="0 -4.5 256 256" xmlns="http://www.w3.org/2000/svg">
+            <path d="M45.1355837,0 L45.1355837,246.35001 L0,246.35001 L0,0 L45.1355837,0 Z M163.657111,0 C214.65668,0 256,41.3433196 256,92.3428889 C256,143.342458 214.65668,184.685778 163.657111,184.685778 C112.657542,184.685778 71.3142222,143.342458 71.3142222,92.3428889 C71.3142222,41.3433196 112.657542,0 163.657111,0 Z" fill="#FF424D"/>
+          </svg>
+          <h3>Patreon</h3>
+          <a class="btn-main" href="https://www.patreon.com/bePatron?u=71702133">Become a Patron!</a>
+        </div>
+      </div>
+      <div id="donate-liberapay">
+        <div>
+          <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
+            <rect fill="#f6c915" width="80" height="80" rx="8"/>
+            <path fill="#FFF" d="M32.73 56.2651c-2.5867 0-4.6175-.3376-6.0925-1.0107s-2.5308-1.5936-3.1708-2.7611-.9458-2.4933-.9275-4.015.2267-3.1234.6284-4.8357l6.9391-29.0143 8.47-1.3108-7.595 31.4733c-.1458.655-.2275 1.2567-.2458 1.8025s.0817 1.0292.3 1.4475.5917.7566 1.12 1.0108 1.2658.42 2.2133.4925zM40.5333 28.0209c1.46-.4367 3.1267-.8284 5.0025-1.175s3.9075-.5183 6.0933-.5183 3.7985.3092 5.2726.9283 2.6864 1.4667 3.6341 2.5409 1.6475 2.3316 2.1024 3.77.6832 2.9783.6832 4.6183c0 2.6583-.4373 5.09-1.3214 7.2942s-2.076 4.1075-3.6237 5.71-3.4059 2.851-5.5763 3.7475-4.5235 1.3344-7.0718 1.3344c-1.2391 0-2.4775-.1104-3.7158-.3296l-2.4592 9.8912h-8.0865zM43.4867 49.3867c.6192.1458 1.3842.2133 2.295.2133 1.42 0 2.7133-.2583 3.8792-.7875s2.1583-1.265 2.9783-2.2125 1.4557-2.0842 1.9117-3.415.6827-2.795.6827-4.3983-.3467-2.8958-1.0379-3.9892-1.894-1.6391-3.6057-1.6391c-1.1667 0-2.2592.1092-3.2792.3283z"/>
+          </svg>
+          <h3>Liberapay</h3>
+          <a class="btn-main" href="https://liberapay.com/lumeweb/donate">Donate</a>
+        </div>
+      </div>
+      <div id="donate-github">
+        <div>
+          <svg viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/>
+          </svg>
+          <h3>GitHub Sponsors</h3>
+          <a class="btn-main" href="https://github.com/sponsors/LumeWeb">Donate</a>
+        </div>
+      </div>
+    </div>
+    <p>
+      If you are interested in donating through other means, please get in touch with us to discuss. If there is a cryptocurrency you wish to contribute with that we have not listed, please let me know!
+    </p>
+  </div>
+  <dialog id="qr-dialog"></dialog>
+  <script is:inline>
+    var
+      msgCallback,
+      msgTimeout,
+      qrDialog = document.getElementById('qr-dialog');
+
+    function copyToClipboard(element) {
+      var
+        range = document.createRange(),
+        selection = window.getSelection();
+
+      if(msgCallback) {
+        clearTimeout(msgTimeout);
+        msgCallback();
+      }
+
+      range.selectNode(element.nextElementSibling); // select address container
+      selection.removeAllRanges();                  // clear current selection
+      selection.addRange(range);                    // select address
+      document.execCommand('copy');                 // copy
+      selection.removeAllRanges();                  // deselect
+
+      element.classList.add('success');
+
+      msgCallback = function() {
+        element.classList.remove('success');
+        msgCallback = undefined;
+      }
+
+      msgTimeout = window.setTimeout(msgCallback, 5000);
+    }
+
+    function openDialog(qrLarge) {
+      document.body.classList.add('scroll-lock');
+      qrDialog.innerHTML = '<img src="' + qrLarge + '"/>';
+      qrDialog.showModal();
+    }
+
+    qrDialog.addEventListener('close', function() {
+      document.body.classList.remove('scroll-lock');
+    });
+
+    qrDialog.addEventListener('click', function(event) {
+      if (event.target === this) {
+        this.close();
+      }
+    });
+  </script>
+</section>

src/components/Donate/Methods/Methods.scss

@@ -0,0 +1,291 @@
+@import "/src/styles/mixins.scss";
+@import "/src/styles/vars.scss";
+
+#methods {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 2em 7.5% 6em;
+    padding-top: 3em;
+    font-family: $font-family-jaldi;
+
+    h2 {
+        margin: 1.25em 0 1em;
+        @include fluid-font-size(2.8125rem);
+        line-height: 122%;
+
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
+    .method-grid {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        gap: 2em;
+        margin-bottom: 4em;
+
+        @media screen and (min-width: 48rem) {
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        > div {
+            display: flex;
+            flex-direction: column;
+            padding: 4em 4em 1em;
+            background: $color-blue-charcoal;
+            border: 0.1em solid transparent;
+            border-radius: 1em;
+            transition: border-color 200ms;
+
+            &:hover {
+                border-color: $color-aquamarine;
+            }
+
+            > div:first-child {
+                display: flex;
+                align-items: center;
+                gap: 2em;
+                margin-bottom: 3em;
+
+                svg {
+                    flex-shrink: 0;
+                    @include fluid-max-width-height(3.4375rem, 3.4375rem);
+                }
+
+                h3 {
+                    flex-grow: 1;
+                    font-family: $font-family-jetbrains-mono;
+                    @include fluid-font-size(1.5rem);
+                }
+
+                img {
+                    @include fluid-width-height(3.4375rem, 3.4375rem);
+                    image-rendering: pixelated;
+                    cursor: zoom-in;
+                }
+            }
+        }
+
+        .address {
+            display: flex;
+            margin-bottom: 3em;
+            color: $color-cloud;
+
+            div {
+                order: 1;
+                flex-grow: 1;
+                position: relative;
+                @include fluid-font-size(1.375rem);
+                word-break: break-all;
+                user-select: all;
+            }
+
+            button {
+                order: 2;
+                flex-shrink: 0;
+                @include fluid-width-height(1.875rem, 1.875rem);
+                @include fluid-margin-lr-rem(0.78125rem);
+                mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75" /></svg>');
+                background: $color-cloud;
+                transition: background $transition-duration;
+
+                &:hover {
+                    background: $color-white;
+                }
+
+                &.success {
+                    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>');
+                    background: $color-aquamarine;
+                }
+            }
+
+            button:hover + div, button.success + div {
+                &::before {
+                    content: "";
+                    position: absolute;
+                    inset: -0.5em;
+                    padding: 0.5em;
+                    background: $color-blue-charcoal;
+                    animation: $transition-duration overlay-opacity forwards;
+                }
+
+                &::after {
+                    content: "Copy to Clipboard";
+                    position: absolute;
+                    top: 0;
+                    right: -0.5em;
+                    padding: 0 0.5em;
+                    background: rgba($color-blue-charcoal, 0.75);
+                    text-align: center;
+                    white-space: nowrap;
+                    color: $color-white;
+                    border-radius: 0.5em 0 0 0.5em;
+                    animation: $transition-duration hint-opacity forwards;
+                    transition: color $transition-duration;
+                }
+            }
+
+            button.success + div {
+                &::after {
+                    content: "Copied to Clipboard";
+                    color: $color-aquamarine;
+                }
+            }
+        }
+    }
+
+    p {
+        margin-top: 1em;
+        @include fluid-font-size(1.25rem);
+        font-style: italic;
+        line-height: 157%;
+        color: $color-cloud;
+    }
+
+    .btn-main {
+        @include fluid-font-size(1.5rem);
+    }
+
+    #donate-bitcoin:hover {
+        border-color: #f7931a;
+    }
+
+    #donate-litecoin:hover {
+        border-color: #345d9d;
+    }
+
+    #donate-ethereum:hover {
+        border-color: #8c8c8c;
+    }
+
+    #donate-polygon:hover {
+        border-color: #8247e5;
+    }
+
+    #donate-solana:hover {
+        border-color: #dc1fff;
+    }
+
+    #donate-cardano:hover {
+        border-color: #0033ad;
+    }
+
+    #donate-siacoin:hover {
+        border-color: #20ee82;
+    }
+
+    #donate-monero:hover {
+        border-color: #f26822;
+    }
+
+    #donate-handshake:hover {
+        border-color: #fff;
+    }
+
+    #donate-cosmos:hover {
+        border-color: #6f7390;
+    }
+
+    #donate-secret:hover {
+        border-color: #fff;
+    }
+
+    #donate-algorand:hover {
+        border-color: #fff;
+    }
+
+    #donate-paypal {
+        &:hover {
+            border-color: #0070e0;
+        }
+
+        .btn-main {
+            color: #fff;
+            background: #0070e0;
+            border-color: #0070e0;
+
+            &:hover {
+                background: inherit;
+            }
+        }
+    }
+
+    #donate-patreon {
+        &:hover {
+            border-color: #ff424d;
+        }
+
+        .btn-main {
+            color: #fff;
+            background: #ff424d;
+            border-color: #ff424d;
+
+            &:hover {
+                background: inherit;
+            }
+        }
+    }
+
+    #donate-liberapay {
+        &:hover {
+            border-color: #f6c915;
+        }
+
+        .btn-main {
+            color: #000;
+            background: #f6c915;
+            border-color: #f6c915;
+
+            &:hover {
+                color: inherit;
+                background: inherit;
+            }
+        }
+    }
+
+    #donate-github {
+        &:hover {
+            border-color: #fff;
+        }
+
+        .btn-main {
+            color: #000;
+            background: #fff;
+            border-color: #fff;
+
+            &:hover {
+                color: inherit;
+                background: inherit;
+            }
+        }
+    }
+}
+
+#qr-dialog {
+    padding: 0;
+
+    &::backdrop {
+        background: rgba($color-black, 0.85);
+    }
+}
+
+@keyframes overlay-opacity {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 0.75;
+    }
+}
+
+@keyframes hint-opacity {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

src/components/Donate/Methods/icons/algorand.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 113 113.4" xmlns="http://www.w3.org/2000/svg">
+  <polygon fill="#fff" points="19.6 113.4 36 85 52.4 56.7 68.7 28.3 71.4 23.8 72.6 28.3 77.6 47 72 56.7 55.6 85 39.3 113.4 58.9 113.4 75.3 85 83.8 70.3 87.8 85 95.4 113.4 113 113.4 105.4 85 97.8 56.7 95.8 49.4 108 28.3 90.2 28.3 89.6 26.2 83.4 3 82.6 0 65.5 0 65.1 0.6 49.1 28.3 32.7 56.7 16.4 85 0 113.4 19.6 113.4"/>
+</svg>

src/components/Donate/Methods/icons/bitcoin.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 4091.27 4091.73" fill-rule="evenodd" clip-rule="evenodd" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#F7931A" fill-rule="nonzero" d="M4030.06 2540.77c-273.24,1096.01 -1383.32,1763.02 -2479.46,1489.71 -1095.68,-273.24 -1762.69,-1383.39 -1489.33,-2479.31 273.12,-1096.13 1383.2,-1763.19 2479,-1489.95 1096.06,273.24 1763.03,1383.51 1489.76,2479.57l0.02 -0.02z"/>
+  <path fill="white" fill-rule="nonzero" d="M2947.77 1754.38c40.72,-272.26 -166.56,-418.61 -450,-516.24l91.95 -368.8 -224.5 -55.94 -89.51 359.09c-59.02,-14.72 -119.63,-28.59 -179.87,-42.34l90.16 -361.46 -224.36 -55.94 -92 368.68c-48.84,-11.12 -96.81,-22.11 -143.35,-33.69l0.26 -1.16 -309.59 -77.31 -59.72 239.78c0,0 166.56,38.18 163.05,40.53 90.91,22.69 107.35,82.87 104.62,130.57l-104.74 420.15c6.26,1.59 14.38,3.89 23.34,7.49 -7.49,-1.86 -15.46,-3.89 -23.73,-5.87l-146.81 588.57c-11.11,27.62 -39.31,69.07 -102.87,53.33 2.25,3.26 -163.17,-40.72 -163.17,-40.72l-111.46 256.98 292.15 72.83c54.35,13.63 107.61,27.89 160.06,41.3l-92.9 373.03 224.24 55.94 92 -369.07c61.26,16.63 120.71,31.97 178.91,46.43l-91.69 367.33 224.51 55.94 92.89 -372.33c382.82,72.45 670.67,43.24 791.83,-303.02 97.63,-278.78 -4.86,-439.58 -206.26,-544.44 146.69,-33.83 257.18,-130.31 286.64,-329.61l-0.07 -0.05zm-512.93 719.26c-69.38,278.78 -538.76,128.08 -690.94,90.29l123.28 -494.2c152.17,37.99 640.17,113.17 567.67,403.91zm69.43 -723.3c-63.29,253.58 -453.96,124.75 -580.69,93.16l111.77 -448.21c126.73,31.59 534.85,90.55 468.94,355.05l-0.02 0z"/>
+</svg>

src/components/Donate/Methods/icons/cardano.svg

@@ -0,0 +1,32 @@
+<svg version="1.1" viewBox="0 0 375 346.5" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#0033AD" d="M102.8,172c-0.8,13.9,9.9,25.8,23.8,26.6c0.5,0,1,0,1.5,0c14,0,25.3-11.3,25.2-25.3c0-14-11.3-25.3-25.3-25.2 C114.6,148.1,103.5,158.6,102.8,172z"/>
+  <path fill="#0033AD" d="M8.6,165.5c-4.5-0.3-8.4,3.2-8.6,7.7s3.2,8.4,7.7,8.6c4.5,0.3,8.3-3.2,8.6-7.7 C16.6,169.6,13.1,165.8,8.6,165.5C8.6,165.5,8.6,165.5,8.6,165.5z"/>
+  <path fill="#0033AD" d="M101.2,25.4c4-2,5.6-7,3.6-11c-2-4-7-5.6-11-3.6c-4,2-5.6,6.9-3.6,10.9C92.2,25.8,97.1,27.5,101.2,25.4 C101.1,25.4,101.2,25.4,101.2,25.4z"/>
+  <path fill="#0033AD" d="M126.8,70.1c6.2-3.1,8.7-10.7,5.6-16.9s-10.7-8.7-16.9-5.6c-6.2,3.1-8.7,10.7-5.6,16.9 C113,70.7,120.6,73.2,126.8,70.1z"/>
+  <path fill="#0033AD" d="M40.6,100.8c4.8,3.1,11.2,1.8,14.4-3c3.1-4.8,1.8-11.2-3-14.4c-4.8-3.1-11.2-1.8-14.4,3c0,0,0,0,0,0 C34.4,91.2,35.8,97.7,40.6,100.8z"/>
+  <path fill="#0033AD" d="M55.9,161c-7-0.4-12.9,4.9-13.3,11.9s4.9,12.9,11.9,13.3c7,0.4,12.9-4.9,13.3-11.9c0,0,0,0,0,0 C68.2,167.4,62.9,161.4,55.9,161z"/>
+  <path fill="#0033AD" d="M42,245.7c-5.1,2.6-7.2,8.8-4.6,14c2.6,5.1,8.8,7.2,14,4.6c5.1-2.6,7.2-8.8,4.6-14c0,0,0,0,0,0 C53.4,245.2,47.1,243.1,42,245.7C42,245.7,42,245.7,42,245.7z"/>
+  <path fill="#0033AD" d="M91,134.9c6.9,4.5,16.1,2.6,20.5-4.3c4.5-6.9,2.6-16.1-4.3-20.5c-6.9-4.5-16.1-2.6-20.5,4.3 C82.2,121.2,84.1,130.4,91,134.9C91,134.9,91,134.9,91,134.9z"/>
+  <path fill="#0033AD" d="M246.5,69.1c5.8,3.8,13.7,2.2,17.5-3.6s2.2-13.7-3.6-17.5c-5.8-3.8-13.7-2.2-17.5,3.6c0,0,0,0,0,0 C239,57.5,240.6,65.3,246.5,69.1C246.5,69.1,246.5,69.1,246.5,69.1z"/>
+  <path fill="#0033AD" d="M272.3,24.6c3.8,2.5,8.8,1.4,11.3-2.4s1.4-8.8-2.4-11.3c-3.8-2.5-8.8-1.4-11.3,2.3 C267.5,17,268.6,22.1,272.3,24.6C272.3,24.6,272.3,24.6,272.3,24.6z"/>
+  <path fill="#0033AD" d="M248.4,147.9c-13.9-0.8-25.9,9.9-26.6,23.8c-0.8,13.9,9.9,25.9,23.8,26.6c0.5,0,1,0,1.4,0 c13.9,0,25.2-11.3,25.2-25.3C272.3,159.7,261.8,148.6,248.4,147.9L248.4,147.9z"/>
+  <path fill="#0033AD" d="M135.1,133.1c4.3,8.5,13,13.9,22.6,13.9c13.9,0,25.2-11.3,25.2-25.3c0-3.9-0.9-7.8-2.7-11.4 c-6.3-12.5-21.5-17.5-33.9-11.2C133.8,105.5,128.8,120.7,135.1,133.1L135.1,133.1z"/>
+  <path fill="#0033AD" d="M333,100.8c5.1-2.6,7.1-8.9,4.5-14c-2.6-5.1-8.9-7.1-14-4.5c-5.1,2.6-7.1,8.8-4.6,13.9 C321.6,101.3,327.8,103.4,333,100.8C333,100.8,333,100.8,333,100.8z"/>
+  <path fill="#0033AD" d="M269,108.8c-7.3,3.7-10.3,12.6-6.6,19.9c3.7,7.3,12.6,10.3,19.9,6.6c7.3-3.7,10.3-12.6,6.6-19.9 C285.2,108.1,276.3,105.2,269,108.8z"/>
+  <path fill="#0033AD" d="M186.5,20.8c5.7,0.3,10.6-4.1,11-9.8s-4.1-10.6-9.8-11c-5.7-0.3-10.6,4-11,9.7 C176.4,15.5,180.8,20.4,186.5,20.8C186.5,20.8,186.5,20.8,186.5,20.8z"/>
+  <path fill="#0033AD" d="M186.4,86.1c8.2,0.5,15.2-5.8,15.6-14c0.5-8.2-5.8-15.2-14-15.6c-8.2-0.5-15.2,5.8-15.6,14 C172,78.7,178.2,85.7,186.4,86.1C186.4,86.1,186.4,86.1,186.4,86.1z"/>
+  <path fill="#0033AD" d="M106,237.7c7.3-3.7,10.3-12.6,6.6-19.9c-3.7-7.3-12.6-10.3-19.9-6.6c-7.3,3.7-10.3,12.6-6.6,19.9 C89.8,238.4,98.7,241.4,106,237.7z"/>
+  <path fill="#0033AD" d="M196,107.8c-7.6,11.7-4.4,27.3,7.3,34.9c11.7,7.6,27.3,4.4,34.9-7.3c7.6-11.7,4.4-27.3-7.3-34.9 c-4.1-2.7-8.9-4.1-13.8-4.1C208.6,96.4,200.7,100.7,196,107.8z"/>
+  <path fill="#0033AD" d="M239.9,213.4c-6.3-12.5-21.5-17.5-33.9-11.2c-12.5,6.3-17.5,21.5-11.2,33.9c6.3,12.5,21.5,17.5,33.9,11.2 c0,0,0,0,0,0c12.4-6.2,17.5-21.2,11.3-33.7C240,213.5,240,213.5,239.9,213.4z"/>
+  <path fill="#0033AD" d="M284,211.6c-6.9-4.5-16.1-2.6-20.5,4.3c-4.5,6.9-2.6,16.1,4.3,20.5c6.9,4.5,16.1,2.6,20.5-4.3 C292.8,225.3,290.9,216.1,284,211.6C284,211.6,284,211.6,284,211.6z"/>
+  <path fill="#0033AD" d="M332.4,173.7c0.4-7-4.9-12.9-11.9-13.3c-7-0.4-12.9,4.9-13.3,11.9c-0.4,7,4.9,12.9,11.9,13.3c0,0,0,0,0,0 C326,186,332,180.6,332.4,173.7z"/>
+  <path fill="#0033AD" d="M367.3,164.7c-4.5-0.3-8.4,3.2-8.6,7.7s3.2,8.4,7.7,8.6c4.5,0.3,8.3-3.2,8.6-7.7 C375.2,168.8,371.8,165,367.3,164.7z"/>
+  <path fill="#0033AD" d="M334.4,245.7c-4.8-3.1-11.2-1.8-14.4,3c-3.1,4.8-1.8,11.2,3,14.4c4.8,3.1,11.2,1.8,14.4-3 C340.6,255.3,339.2,248.8,334.4,245.7C334.4,245.7,334.4,245.7,334.4,245.7z"/>
+  <path fill="#0033AD" d="M102.6,321.9c-3.8-2.5-8.8-1.4-11.3,2.3c-2.5,3.8-1.4,8.8,2.3,11.3c3.8,2.5,8.8,1.4,11.3-2.3c0,0,0,0,0,0 C107.5,329.5,106.4,324.4,102.6,321.9z"/>
+  <path fill="#0033AD" d="M273.8,321.1c-4,2-5.6,7-3.6,11c2,4,7,5.6,11,3.6c4-2,5.6-6.9,3.6-10.9C282.8,320.7,277.9,319,273.8,321.1 C273.9,321.1,273.8,321.1,273.8,321.1z"/>
+  <path fill="#0033AD" d="M179,238.7c7.6-11.7,4.4-27.3-7.3-35c-11.7-7.6-27.3-4.4-35,7.3s-4.4,27.3,7.3,35c4.1,2.7,8.9,4.1,13.8,4.1 C166.4,250.2,174.3,245.9,179,238.7z"/>
+  <path fill="#0033AD" d="M128.5,277.4c-5.8-3.8-13.7-2.2-17.5,3.6c-3.8,5.8-2.2,13.7,3.6,17.5s13.7,2.2,17.5-3.6c0,0,0,0,0,0 C136,289.1,134.4,281.2,128.5,277.4z"/>
+  <path fill="#0033AD" d="M187.4,325.7c-5.7-0.3-10.6,4.1-11,9.8s4.1,10.6,9.8,11c5.7,0.3,10.6-4,11-9.7 C197.5,331,193.1,326.1,187.4,325.7C187.4,325.7,187.4,325.7,187.4,325.7z"/>
+  <path fill="#0033AD" d="M187.5,260.4c-8.2-0.5-15.2,5.8-15.6,14c-0.5,8.2,5.8,15.2,14,15.6c8.2,0.4,15.2-5.8,15.6-14 C202,267.9,195.7,260.8,187.5,260.4C187.5,260.4,187.5,260.4,187.5,260.4z"/>
+  <path fill="#0033AD" d="M248.2,276.4c-6.2,3.2-8.7,10.8-5.5,17c3.2,6.2,10.8,8.7,17,5.5c6.2-3.1,8.7-10.7,5.6-16.9 C262.1,275.8,254.5,273.2,248.2,276.4C248.2,276.4,248.2,276.4,248.2,276.4z"/>
+</svg>

src/components/Donate/Methods/icons/cosmos.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 2500 2500" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="1250" cy="1250" r="1250" style="fill:#2e3148"/>
+  <circle cx="1250" cy="1250" r="725.31" style="fill:#1b1e36"/>
+  <path d="M1252.57,159.47c-134.93,0-244.34,489.4-244.34,1093.11s109.41,1093.11,244.34,1093.11,244.34-489.4,244.34-1093.11S1387.5,159.47,1252.57,159.47ZM1269.44,2284c-15.43,20.58-30.86,5.14-30.86,5.14-62.14-72-93.21-205.76-93.21-205.76-108.69-349.79-82.82-1100.82-82.82-1100.82,51.08-596.24,144-737.09,175.62-768.36a19.29,19.29,0,0,1,24.74-2c45.88,32.51,84.36,168.47,84.36,168.47,113.63,421.81,103.34,817.9,103.34,817.9,10.29,344.65-56.94,730.45-56.94,730.45C1341.92,2222.22,1269.44,2284,1269.44,2284Z" style="fill:#6f7390"/>
+  <path d="M2200.72,708.59c-67.18-117.08-546.09,31.58-1070,332s-893.47,638.89-826.34,755.92,546.09-31.58,1070-332,893.47-638.89,826.34-755.92h0ZM366.36,1780.45c-25.72-3.24-19.91-24.38-19.91-24.38C378,1666.36,478.4,1572.84,478.4,1572.84c249.43-268.36,913.79-619.65,913.79-619.65,542.54-252.42,711.06-241.77,753.81-230a19.29,19.29,0,0,1,14,20.58c-5.14,56-104.17,157-104.17,157C1746.71,1209.36,1398,1397.58,1398,1397.58c-293.83,180.5-661.93,314.09-661.93,314.09-280.09,100.93-369.7,68.78-369.7,68.78h0Z" style="fill:#6f7390"/>
+  <path d="M2198.35,1800.41c67.7-116.77-300.93-456.79-823-759.47S374.43,587.76,306.79,704.73s300.93,456.79,823.3,759.47S2130.71,1917.39,2198.35,1800.41ZM351.65,749.85c-10-23.71,11.11-29.42,11.11-29.42C456.22,702.78,587.5,743,587.5,743c357.15,81.33,994,480.25,994,480.25,490.33,343.11,565.53,494.24,576.8,537.14a19.29,19.29,0,0,1-10.7,22.43c-51.13,23.41-188.07-11.47-188.07-11.47-422.07-113.17-759.62-320.52-759.62-320.52-303.29-163.58-603.19-415.28-603.19-415.28-227.88-191.87-245-285.44-245-285.44Z" style="fill:#6f7390"/>
+  <circle cx="1250" cy="1250" r="128.6" style="fill:#b7b9c8"/>
+  <ellipse cx="1777.26" cy="756.17" rx="74.59" ry="77.16" style="fill:#b7b9c8"/>
+  <ellipse cx="552.98" cy="1018.52" rx="74.59" ry="77.16" style="fill:#b7b9c8"/>
+  <ellipse cx="1098.25" cy="1965.02" rx="74.59" ry="77.16" style="fill:#b7b9c8"/>
+</svg>

src/components/Donate/Methods/icons/ethereum.svg

@@ -0,0 +1,8 @@
+<svg version="1.1" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 784.37 1277.39" xmlns="http://www.w3.org/2000/svg">
+  <polygon fill="#343434" fill-rule="nonzero" points="392.07,0 383.5,29.11 383.5,873.74 392.07,882.29 784.13,650.54"/>
+  <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,0 -0,650.54 392.07,882.29 392.07,472.33"/>
+  <polygon fill="#3C3C3B" fill-rule="nonzero" points="392.07,956.52 387.24,962.41 387.24,1263.28 392.07,1277.38 784.37,724.89"/>
+  <polygon fill="#8C8C8C" fill-rule="nonzero" points="392.07,1277.38 392.07,956.52 -0,724.89"/>
+  <polygon fill="#141414" fill-rule="nonzero" points="392.07,882.29 784.13,650.54 392.07,472.33"/>
+  <polygon fill="#393939" fill-rule="nonzero" points="0,650.54 392.07,882.29 392.07,472.33"/>
+</svg>

src/components/Donate/Methods/icons/handshake.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" viewBox="0 0 2000 2088.9" xmlns="http://www.w3.org/2000/svg">
+  <path fill="currentColor" clip="evenodd" d="M1726.6,681.4l-129.8-230.6l251.5,0.1c6.7,0,14.6,4.5,18.2,10.5c4,6.6,24.4,40.3,49,80.7 c29.4,48.4,64.5,106.3,84.6,139.3H1726.6z M1261.4,2078c-6.1,10.9-14,10.9-16.6,10.9h-102.8c-54.4,0-117.1-0.1-154.5-0.1 l399.6-717.4c10.4-18.5,3.7-42-14.8-52.3c-5.7-3.2-12.1-4.9-18.6-4.9l0,0l-681,0.9l-135.5-234.5h992c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0 c0.6,0,1.1-0.2,1.6-0.2c2.2-0.1,4.4-0.4,6.6-0.9c1.6-0.4,3.3-0.9,4.8-1.5c0.8-0.3,1.7-0.7,2.5-1c7.7-3.3,14.1-9.1,18.2-16.5 L1727,758.2h270L1261.4,2078z M921.1,2050.7c-8.7-14.3-20-32.9-32.3-53.1c-41.3-68.2-94.2-155.5-100.2-165.1 c-2-3.2-2.9-11.1,1.3-18.7c9.6-17.2,190.4-343,234.5-422.4l264.1-0.3L921.1,2050.7z M470.8,1601.8l-131.3-233.2l132.3-248 l132.7,229.7C563.3,1428,498.9,1549.1,470.8,1601.8z M294.6,1638.1c-66.8,0-133.3,0-143,0l0,0c-6.5,0-14.4-4.6-18-10.5l-42.7-70.4 C60.4,1507,21.5,1442.9,0,1407.5h273.4l129.8,230.6C374.9,1638.1,334.8,1638.1,294.6,1638.1L294.6,1638.1z M738.6,11 c6.1-11,14-11,16.5-11h258.3L612.7,717.4c-0.3,0.6-0.5,1.2-0.8,1.9c-0.6,1.2-1.1,2.4-1.6,3.7c-0.4,1.2-0.8,2.4-1.1,3.7 s-0.6,2.3-0.8,3.5c-0.2,1.4-0.4,2.8-0.4,4.3c0,0.6-0.2,1.2-0.2,1.9c0,0.5,0.1,0.9,0.2,1.4c0,1.4,0.2,2.8,0.4,4.2 c0.1,1.2,0.3,2.3,0.6,3.5c0.3,1.2,0.7,2.4,1.1,3.6c0.4,1.2,0.8,2.3,1.3,3.5s1.1,2.2,1.7,3.2s1.2,2.1,2,3.1c0.7,1,1.5,2,2.4,2.9 c0.8,0.9,1.6,1.8,2.5,2.7s1.8,1.5,2.8,2.3c1.1,0.8,2.2,1.6,3.3,2.3c0.4,0.3,0.8,0.6,1.2,0.9s0.9,0.3,1.4,0.6c2,1,4.1,1.9,6.2,2.5 c0.8,0.2,1.5,0.5,2.3,0.7c2.8,0.7,5.7,1.1,8.7,1.1c0,0,0,0,0.1,0h0.1h17c0.1,0,0.2,0,0.2,0l0,0l663.9-0.9 c17.6,30.5,50.4,88,78.3,136.9c21.4,37.6,39.2,68.6,53.2,93h-988c-0.4,0-0.8,0.1-1.3,0.2c-13.9,0.1-26.6,7.9-33.2,20.1l-163.6,306.6 H3.1C120.8,1119.3,730.7,25,738.6,11z M1079.4,39.1l24,39.5c42.1,69.5,101.6,167.6,107.9,177.8c2,3.2,2.9,11.1-1.3,18.7L975.6,697.3 l-264,0.3L1079.4,39.1z M1529.1,486.9l131.3,233.3l-133.9,247.5c-16-27.8-35.8-62.6-54.4-95.2c-36.8-64.4-63.6-111.3-78.7-137.5 C1422.1,682.8,1497.5,544.5,1529.1,486.9z"/>
+</svg>

src/components/Donate/Methods/icons/litecoin.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 82.6 82.6" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="41.3" cy="41.3" r="36.83" style="fill:#fff"/>
+  <path d="M41.3,0A41.3,41.3,0,1,0,82.6,41.3h0A41.18,41.18,0,0,0,41.54,0ZM42,42.7,37.7,57.2h23a1.16,1.16,0,0,1,1.2,1.12v.38l-2,6.9a1.49,1.49,0,0,1-1.5,1.1H23.2l5.9-20.1-6.6,2L24,44l6.6-2,8.3-28.2a1.51,1.51,0,0,1,1.5-1.1h8.9a1.16,1.16,0,0,1,1.2,1.12v.38L43.5,38l6.6-2-1.4,4.8Z" style="fill:#345d9d"/>
+</svg>

src/components/Donate/Methods/icons/monero.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 3756.09 3756.49" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4128,2249.81C4128,3287,3287.26,4127.86,2250,4127.86S372,3287,372,2249.81,1212.76,371.75,2250,371.75,4128,1212.54,4128,2249.81Z" transform="translate(-371.96 -371.75)" style="fill:#fff"/>
+  <path d="M2250,371.75c-1036.89,0-1879.12,842.06-1877.8,1878,0.26,207.26,33.31,406.63,95.34,593.12h561.88V1263L2250,2483.57,3470.52,1263v1579.9h562c62.12-186.48,95-385.85,95.37-593.12C4129.66,1212.76,3287,372,2250,372Z" transform="translate(-371.96 -371.75)" style="fill:#f26822"/>
+  <path d="M1969.3,2764.17l-532.67-532.7v994.14H1029.38l-384.29.07c329.63,540.8,925.35,902.56,1604.91,902.56S3525.31,3766.4,3855,3225.6H3063.25V2231.47l-532.7,532.7-280.61,280.61-280.62-280.61h0Z" transform="translate(-371.96 -371.75)" style="fill:#4d4d4d"/>
+</svg>

src/components/Donate/Methods/icons/polygon.svg

@@ -0,0 +1,3 @@
+<svg version="1.1" viewBox="0 0 38.4 33.5" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#8247E5" d="M29,10.2c-0.7-0.4-1.6-0.4-2.4,0L21,13.5l-3.8,2.1l-5.5,3.3c-0.7,0.4-1.6,0.4-2.4,0L5,16.3 c-0.7-0.4-1.2-1.2-1.2-2.1v-5c0-0.8,0.4-1.6,1.2-2.1l4.3-2.5c0.7-0.4,1.6-0.4,2.4,0L16,7.2c0.7,0.4,1.2,1.2,1.2,2.1v3.3l3.8-2.2V7 c0-0.8-0.4-1.6-1.2-2.1l-8-4.7c-0.7-0.4-1.6-0.4-2.4,0L1.2,5C0.4,5.4,0,6.2,0,7v9.4c0,0.8,0.4,1.6,1.2,2.1l8.1,4.7 c0.7,0.4,1.6,0.4,2.4,0l5.5-3.2l3.8-2.2l5.5-3.2c0.7-0.4,1.6-0.4,2.4,0l4.3,2.5c0.7,0.4,1.2,1.2,1.2,2.1v5c0,0.8-0.4,1.6-1.2,2.1 L29,28.8c-0.7,0.4-1.6,0.4-2.4,0l-4.3-2.5c-0.7-0.4-1.2-1.2-1.2-2.1V21l-3.8,2.2v3.3c0,0.8,0.4,1.6,1.2,2.1l8.1,4.7 c0.7,0.4,1.6,0.4,2.4,0l8.1-4.7c0.7-0.4,1.2-1.2,1.2-2.1V17c0-0.8-0.4-1.6-1.2-2.1L29,10.2z"/>
+</svg>

src/components/Donate/Methods/icons/secret.svg

@@ -0,0 +1,10 @@
+<svg version="1.1" viewBox="0 0 122 122" xmlns="http://www.w3.org/2000/svg">
+  <style type="text/css">
+    .st0{fill:#1B1B1B;stroke:#FFFFFF;stroke-width:4;}
+    .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
+    .st2{fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;}
+  </style>
+  <circle class="st0" cx="61" cy="61" r="59"/>
+  <path class="st1" d="M78.3,43.7c0.8,0.8,2.1,0.7,2.7-0.2c0.6-0.7,0.5-1.8-0.2-2.4c-6.6-6.3-12.5-9.5-22.3-9 C48.2,32.6,39.1,38,39.7,49.4C40.2,59.5,50,63.2,58.6,66.5c6.6,2.5,12.4,4.7,12.7,9.4c0.3,5.2-5,8.3-9.6,8.6 c-8.7,0.5-13.8-2.6-19.5-8.1c-0.7-0.7-1.8-0.7-2.5-0.1c-0.8,0.7-0.8,1.9-0.1,2.7c6.4,6.4,13,9.6,22.6,9.1C71.8,87.4,83.6,82,83,70.6 c-0.5-9.9-9.9-13.6-18.4-16.8c-7-2.7-13.5-5.2-13.8-10.9c-0.2-4.1,4.7-7.1,8.2-7.3C67.5,35.2,72.8,38.2,78.3,43.7z M79.4,70.8 c0,4.4-2.4,8.2-6,10.4l-0.2-0.1c1.3-1.8,1.5-4.1,1.5-6.3c0-6.5-7.1-9-14.6-11.7c-8.3-3-17-6.1-17-14.9c0-4,1.8-8.3,5.3-10.3l0.1,0.2 c-0.9,1.9-1.3,4-1.3,6.1c0,7.2,7.9,10.1,15.9,13.1C71.3,60.3,79.4,63.3,79.4,70.8z"/>
+  <path class="st2" d="M60.5,108c26.2,0,47.5-21.3,47.5-47.5S86.7,13,60.5,13S13,34.3,13,60.5S34.3,108,60.5,108z"/>
+</svg>

src/components/Donate/Methods/icons/siacoin.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 404.03 404.04" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#20ee82" d="M262.65,202v60.6H202a60.6,60.6,0,1,1,60.6-60.6m-59.8-101a101,101,0,1,0-6,202H303v-99.8c0-55.7-44.5-101.8-100.2-102.2"/>
+  <path fill="#7f8c8d" d="M344.85,59.17a202,202,0,0,0-254.2-25.7,40.5,40.5,0,0,1,5.8,8.3,192.2,192.2,0,0,1,241.2,24.6c74.8,74.7,74.8,196.4,0,271.2s-196.5,74.8-271.3,0a192.2,192.2,0,0,1-24.5-241.2,40.1,40.1,0,0,1-8.3-5.8c-61.55,93-36,218.37,57,279.92s218.37,36,279.92-57A202,202,0,0,0,344.85,59.17"/>
+  <path fill="#20ee82" d="M46.45,46.37a20.2,20.2,0,1,1,.07,28.57l-0.07-.07a20.2,20.2,0,0,1,0-28.5"/>
+</svg>

src/components/Donate/Methods/icons/solana.svg

@@ -0,0 +1,17 @@
+<svg version="1.1" viewBox="0 0 397.7 311.7" xmlns="http://www.w3.org/2000/svg">
+  <linearGradient id="solana_gr1" gradientUnits="userSpaceOnUse" x1="360.8791" y1="351.4553" x2="141.213" y2="-69.2936" gradientTransform="matrix(1 0 0 -1 0 314)">
+    <stop offset="0" style="stop-color:#00FFA3"/>
+    <stop offset="1" style="stop-color:#DC1FFF"/>
+  </linearGradient>
+  <path fill="url('#solana_gr1')" d="M64.6,237.9c2.4-2.4,5.7-3.8,9.2-3.8h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,237.9z"/>
+  <linearGradient id="solana_gr2" gradientUnits="userSpaceOnUse" x1="264.8291" y1="401.6014" x2="45.163" y2="-19.1475" gradientTransform="matrix(1 0 0 -1 0 314)">
+    <stop offset="0" style="stop-color:#00FFA3"/>
+    <stop offset="1" style="stop-color:#DC1FFF"/>
+  </linearGradient>
+  <path fill="url('#solana_gr2')" d="M64.6,3.8C67.1,1.4,70.4,0,73.8,0h317.4c5.8,0,8.7,7,4.6,11.1l-62.7,62.7c-2.4,2.4-5.7,3.8-9.2,3.8H6.5 c-5.8,0-8.7-7-4.6-11.1L64.6,3.8z"/>
+  <linearGradient id="solana_gr3" gradientUnits="userSpaceOnUse" x1="312.5484" y1="376.688" x2="92.8822" y2="-44.061" gradientTransform="matrix(1 0 0 -1 0 314)">
+    <stop offset="0" style="stop-color:#00FFA3"/>
+    <stop offset="1" style="stop-color:#DC1FFF"/>
+  </linearGradient>
+  <path fill="url('#solana_gr3')" d="M333.1,120.1c-2.4-2.4-5.7-3.8-9.2-3.8H6.5c-5.8,0-8.7,7-4.6,11.1l62.7,62.7c2.4,2.4,5.7,3.8,9.2,3.8h317.4 c5.8,0,8.7-7,4.6-11.1L333.1,120.1z"/>
+</svg>

src/components/Donate/Why/Why.astro

@@ -0,0 +1,24 @@
+---
+import './Why.scss';
+---
+
+<section id="why">
+  <div class="feature-group">
+    <h2>Help us break the pattern</h2>
+    <h3>Why should I donate to Lume?</h3>
+    <ul>
+      <li>You believe the internet should be free and open for everyone, regardless of political beliefs.</li>
+      <li>You want a neutral web accessible to everyday people.</li>
+      <li>You believe your data should be private and secure unless you choose to share it.</li>
+      <li>You want to ensure that you or someone else can’t be censored or “de-platformed.”</li>
+      <li>You think people should have free access to information no matter how they choose to access it.</li>
+      <li>You believe in handling web abuse using legal and social means instead of censorship and restriction.</li>
+    </ul>
+    <p>
+      Every single day you use the Internet, your data is sold to companies to pay for your usage. Help us break the pattern by funding the creation of free and open-source Web3 tools.
+    </p>
+    <div>
+      <a href="#methods" class="btn-main">Donate</a>
+    </div>
+  </div>
+</section>

src/components/Donate/Why/Why.scss

@@ -0,0 +1,50 @@
+@import "/src/styles/vars.scss";
+
+#why {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  max-width: 185.6em;
+  min-height: 58.8em;
+  margin: 0 auto;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: min(0em, calc((100% - 92.2em) / 2));
+    width: calc(100% - 64em - 7.5%);
+    min-width: 92.2em;
+    background-image: url("/src/assets/single-brand-bg-2.png");
+    background-position: 50% 0;
+    background-repeat: no-repeat;
+    background-size: contain;
+    z-index: -1;
+  }
+
+  .feature-group {
+    box-sizing: content-box;
+    margin: 2em 7.5%;
+    max-width: 64em;
+  }
+
+  @media screen and (max-width: 80rem) {
+    ul, p {
+      background: rgba($color-blue-charcoal-2, 0.75);
+    }
+
+    ul {
+      border-radius: 0.5em 0.5em 0 0;
+      padding: 0.3em 0.5em 0.3em 1.5em;
+      margin: -0.3em -0.5em 0.28em;
+    }
+
+    p {
+      border-radius: 0 0 0.5em 0.5em;
+      padding: 0.3em 0.5em;
+      margin: -0.3em -0.5em;
+    }
+  }
+}

src/components/Home/CTO/CTO.astro

@@ -0,0 +1,32 @@
+---
+import avatar from "/src/assets/cto-avatar.png";
+import abstractBg from "/src/assets/single-brand-bg-1.png";
+---
+
+<section id="cto" class="w-full my-24 flex flex-row">
+  <div class="flex flex-col mx-10 sm:mx-20 xl:mx-40 lg:max-w-xl gap-y-10">
+    <h2
+      class="font-display text-primary font-bold text-xl md:text-2xl uppercase"
+    >
+      Community-Powered
+    </h2>
+    <h3 class="font-display text-4xl md:text-6xl font-bold">
+      Building the open, user-owned web you deserve
+    </h3>
+    <p class="font-body text-xl md:text-3xl text-body">
+      Right now, Lume has only one full-time developer, a few freelancers, and
+      limited helper staff! We need help from developers, fundraisers, funders,
+      and contributors to bring the new internet to the masses.
+    </p>
+    <div class="flex flex-row items-center gap-6">
+      <img src={avatar.src} class="w-20 h-20" />
+      <div class="flex flex-col font-body">
+        <h6 class="text-xl">Derrick Hammer</h6>
+        <p class="text-lg text-body">CTO</p>
+      </div>
+    </div>
+  </div>
+  <div class="float-right w-1/2 -z-10 max-w-7xl">
+    <img src={abstractBg.src} class="absolute max-xl:right-0 w-[800px]" />
+  </div>
+</section>

src/components/Home/Meme/Meme.astro

@@ -0,0 +1,39 @@
+---
+import mulletMeme from "/src/assets/centralized-mullet-meme.png";
+---
+
+<section id="meme" class="tilted-bg">
+  <div class="flex flex-col-reverse lg:flex-row gap-10 mx-10 sm:mx-20 xl:mx-40">
+    <div class="space-y-10">
+      <h2
+        class="font-display text-primary font-bold text-xl md:text-2xl uppercase"
+      >
+        Busting the Decentralized Web3 Myth
+      </h2>
+      <h3 class="font-display text-4xl md:text-6xl font-bold">
+        The Decentralized Mullet
+      </h3>
+      <p class="font-body text-xl md:text-3xl text-body">
+        Right now, despite many claims, a majority, <b>if not all</b>, the
+        services that build the legos of Web3 are actually centralized, both
+        with what you can <b>see</b> and what you <b>can't.</b>
+      </p>
+      <p class="font-body text-xl md:text-3xl text-body">
+        While some <b>blockchains</b> may be more <b>decentralized</b> than others,
+        access to nearly every blockchain is also
+        <b>centralized</b>.
+      </p>
+
+      <p class="font-body text-xl md:text-3xl text-body">
+        So consider this a call to action for our community to go back to ethos
+        and make Web3 <i>real</i>.
+      </p>
+    </div>
+    <img
+      src={mulletMeme.src}
+      class="w-[500px] xl:w-[650px] max-h-[550px] self-center"
+      alt="Web 1"
+      style="padding-bottom: 3em"
+    />
+  </div>
+</section>

src/components/Home/Message/Message.astro

@@ -0,0 +1,17 @@
+---
+---
+
+<section
+  id="message"
+  class="bg-primary py-16 px-10 md:px-20 xl:px-40 space-y-4"
+>
+  <h2 class="text-3xl font-bold text-black font-display">
+    A message from Derrick
+  </h2>
+  <p class="text-2xl text-black font-body">
+    Some of the world's largest online threats right now are censorship of
+    speech <i>and</i> money. Web3 represents unifying many legos to create a truly
+    user-owned web. Decentralization is a means to an end, not the end itself. The
+    true goal is that you are in control of your personal web, and no one else.
+  </p>
+</section>

src/components/Home/PoweredBy/PoweredBy.astro

@@ -0,0 +1,22 @@
+---
+import './PoweredBy.scss';
+
+import svgSia from '/src/assets/icons/sia.svg?raw';
+import svgHns from '/src/assets/icons/hns.svg?raw';
+import svgOsi from '/src/assets/icons/osi.svg?raw';
+---
+
+<section id="powered-by">
+  <h2>Powered By</h2>
+  <div>
+    <a href="https://sia.tech" title="Sia" class="sia-logo">
+      <Fragment set:html={svgSia} />
+    </a>
+    <a href="https://handshake.org" title="Handshake" class="hns-logo">
+      <Fragment set:html={svgHns} />
+    </a>
+    <a href="https://opensource.org/osd/" title="Open Source Initiative" class="osi-logo">
+      <Fragment set:html={svgOsi} />
+    </a>
+  </div>
+</section>

src/components/Home/PoweredBy/PoweredBy.scss

@@ -0,0 +1,54 @@
+@import "/src/styles/mixins.scss";
+@import "/src/styles/vars.scss";
+
+#powered-by {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4em;
+  margin: 12em 7.5%;
+
+  @media screen and (max-width: 47.99999rem) {
+    flex-direction: column;
+    gap: 2.5em;
+  }
+
+  div {
+    display: flex;
+    align-items: center;
+    gap: 2.5em;
+  }
+
+  h2 {
+    @include fluid-font-size(1.5625rem);
+    font-weight: 700;
+    line-height: 100%;
+    text-transform: uppercase;
+    color: $color-aquamarine;
+
+    @media screen and (min-width: 48rem) {
+      margin-top: 0.75em;
+    }
+  }
+
+  a {
+    padding: 0.5em;
+    color: $color-alto;
+
+    &:hover {
+      color: $color-white;
+    }
+  }
+
+  .sia-logo svg {
+    @include fluid-width(5.5rem);
+  }
+
+  .hns-logo svg {
+    @include fluid-width(4.5rem);
+  }
+
+  .osi-logo svg {
+    @include fluid-width(4.5rem);
+  }
+}

src/components/Home/Socials/Socials.astro

@@ -0,0 +1,26 @@
+---
+import './Socials.scss';
+
+import svgGit from '/src/assets/icons/git.svg?raw';
+import svgGithub from '/src/assets/icons/github.svg?raw';
+import svgDiscord from '/src/assets/icons/discord.svg?raw';
+import svgTwitter from '/src/assets/icons/twitter.svg?raw';
+---
+
+<section id="socials">
+    <h2>Get in touch</h2>
+    <div>
+        <a href="https://git.lumeweb.com" title="Git" class="git-logo">
+            <Fragment set:html={svgGit} />
+        </a>
+        <a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
+            <Fragment set:html={svgGithub} />
+        </a>
+        <a href="https://discord.gg/qpC8ADp3rS" title="Discord" class="discord-logo">
+            <Fragment set:html={svgDiscord} />
+        </a>
+        <a href="https://twitter.com/lumeweb3" title="Twitter" class="twitter-logo">
+            <Fragment set:html={svgTwitter} />
+        </a>
+    </div>
+</section>

src/components/Home/Socials/Socials.scss

@@ -0,0 +1,50 @@
+@import "/src/styles/mixins.scss";
+@import "/src/styles/vars.scss";
+
+#socials {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 3em;
+    margin: 12em 7.5% 8em;
+
+    div {
+        display: flex;
+        align-items: center;
+        gap: 2.5em;
+    }
+
+    h2 {
+        @include fluid-font-size(1.5625rem);
+        font-weight: 700;
+        line-height: 100%;
+        text-transform: uppercase;
+        color: $color-aquamarine;
+    }
+
+    a {
+        padding: 0.5em;
+        color: $color-alto;
+
+        &:hover {
+            color: $color-white;
+        }
+    }
+
+    .github-logo svg {
+        @include fluid-width(3.5rem);
+    }
+
+    .git-logo svg {
+        @include fluid-width(3.5rem);
+    }
+
+    .discord-logo svg {
+        @include fluid-width(3.5rem);
+    }
+
+    .twitter-logo svg {
+        @include fluid-width(3.5rem);
+    }
+}

src/components/Home/Typewriter/Typewriter.astro

@@ -0,0 +1,22 @@
+---
+import bg from "../../../assets/home-hero-bg.webp"
+import TypewriterContent from "./TypewriterContent.jsx";
+---
+
+<div class="absolute -z-10 -right-[250px] top-[250px] w-[1250px]">
+  <img
+    class="object-contain w-[1250px]"
+    src={bg.src}
+  />
+</div>
+
+<section
+  id="typewriter"
+  class="w-full overflow-hidden flex flex-row items-center justify-center"
+>
+  <h1
+    class="text-7xl md:text-9xl mt-10 mb-10 min-h-[375px] max-w-full px-10 text-center"
+  >
+    <TypewriterContent client:load />
+  </h1>
+</section>

src/components/Home/Typewriter/TypewriterContent.jsx

@@ -0,0 +1,26 @@
+import Typewriter from "typewriter-effect";
+
+const HeaderContent = () => {
+  var
+    headerStrings = [
+      'Access to the web <br /> for the masses',
+      'An open web for business',
+      'Web3 for the masses',
+      'Web3 for you'
+    ],
+    randomString = headerStrings[Math.floor(Math.random() * headerStrings.length)],
+    words = randomString.split(' ');
+
+  return (
+    <Typewriter options={{ cursor: '<span class="text-primary">_</span>' }} onInit={(typewriter) => {
+      typewriter
+        .changeDelay(50)
+        .typeString(randomString.substring(0, randomString.lastIndexOf(' ')) + ' ')
+        .start();
+      typewriter
+        .typeString('<span class="text-primary">' + words[words.length - 1] + '</span>')
+    }} />
+  );
+};
+
+export default HeaderContent;

src/components/Home/Vision/Vision.astro

@@ -0,0 +1,27 @@
+<section
+  id="vision"
+  class="bg-black/40 p-5 lg:p-0 space-y-10 mx-10 sm:mx-20 xl:mx-40"
+>
+  <h2 class="font-display text-primary font-bold text-xl md:text-2xl uppercase">
+    Our Vision
+  </h2>
+  <h3 class="font-display text-4xl md:text-6xl font-bold">
+    Enable an open, censorship-resistant web
+  </h3>
+  <p class="font-body text-xl md:text-3xl text-body">
+    Web3 is the next evolution of the internet that combines many legos from
+    past decades.
+  </p>
+  <p class="font-body text-xl md:text-3xl text-body">
+    Benefits include internet <b>freedom</b>, <b>privacy</b>, and <b
+      >ownership</b
+    > over your personal web.
+  </p>
+  <div class="pt-10 w-full">
+    <a
+      href="#"
+      class="text-2xl w-full block text-center md:max-w-[350px] rounded-md bg-primary py-3 px-10 text-black font-body"
+      >Download Extension</a
+    >
+  </div>
+</section>

src/components/Home/Web3/Web3.astro

@@ -0,0 +1,40 @@
+---
+import gfxLeft from "../../../assets/home-gfx-left.png";
+---
+
+<section
+  id="web3"
+  class="flex flex-col lg:flex-row lg:bg-transparent lg:p-0 gap-10 mx-10 sm:mx-20 xl:mx-40"
+>
+  <div class="flex-1 -ml-10 -mr-20 lg:-ml-40 lg:mr-0">
+    <img src={gfxLeft.src} class="w-full" />
+  </div>
+  <div class="flex-1 -mt-40 space-y-10 flex flex-col justify-center">
+    <h2
+      class="font-display text-primary font-bold text-xl md:text-2xl uppercase"
+    >
+      What is the Web?
+    </h2>
+    <h3 class="font-display text-4xl md:text-6xl font-bold">
+      Why Web3 matters
+    </h3>
+    <p class="font-body text-xl md:text-3xl text-body">
+      Web3 often gets mixed up with other terms/buzz words such as "crypto" or
+      "defi". However, the current web you use now is often referred to insiders
+      as "web2".
+    </p>
+    <p class="font-body text-xl md:text-3xl text-body">
+      While Web3 can include many decentralized services, it symbolizes the
+      multiverse, or the entirety of all decentralized & P2P networks. Some may
+      refer to this as the "metaverse", or even "dweb", but we can agree to
+      disagree 😉.
+    </p>
+    <div class="pt-10 w-full">
+      <a
+        href="#"
+        class="text-2xl w-full block text-center md:max-w-[250px] rounded-md bg-primary py-3 px-10 text-[black] font-body"
+        >Learn More</a
+      >
+    </div>
+  </div>
+</section>

src/components/Home/WebComparison/WebComparison.astro

@@ -0,0 +1,176 @@
+---
+import meme1 from "/src/assets/meme-1.png";
+import meme2 from "/src/assets/meme-2.png";
+import meme3 from "/src/assets/meme-3.png";
+import meme4 from "/src/assets/meme-4.png";
+import meme1Small from "/src/assets/meme-1-small.png";
+import meme2Small from "/src/assets/meme-2-small.png";
+import meme3Small from "/src/assets/meme-3-small.png";
+import meme4Small from "/src/assets/meme-4-small.png";
+---
+
+<section
+  class="flex flex-col w-full border-y border-dark-aquamarine divide-y divide-dark-aquamarine lg:h-[1200px]"
+>
+  <!-- MEME GRID BIG -->
+  <div
+    class="hidden lg:flex flex-1 flex-row w-full divide-x divide-dark-aquamarine"
+  >
+    <div class="relative flex-1 w-1/2 h-full max-w-full overflow-hidden">
+      <img
+        src={meme1.src}
+        alt=""
+        class="absolute bottom-0 -left-[100px] object-contain xl:-left-5 float-left"
+      />
+      <span class="float-right mt-16 w-[300px] space-y-10 mr-5">
+        <h3 class="font-display text-6xl">Web1</h3>
+        <p class="font-body text-2xl text-body">
+          Nostalgically recalled for chat rooms and IRC by tech enthusiasts,
+          signifies the era of integrated services like AOL dial-up, providing
+          web access, email, shopping, and chat for mainstream users.
+        </p>
+      </span>
+    </div>
+    <div class="relative flex-1 max-w-full overflow-hidden">
+      <img
+        src={meme2.src}
+        alt=""
+        class="absolute bottom-0 -left-[110px] object-contain xl:-left-5 float-left"
+      />
+      <span
+        class="float-right mt-16 w-[300px] space-y-10 mr-5 overflow-y-auto max-h-[400px]"
+      >
+        <h3 class="font-display text-6xl">Web2</h3>
+        <p class="font-body text-2xl text-body">
+          Featuring improved gaming, online apps, and video streaming, was
+          swiftly monopolized by Silicon Valley, creating a top-down system
+          controlled by a few tech elites. Despite innovations, this system,
+          including the broader internet infrastructure like ISPs and domains,
+          regulates your web experience, often citing "safety".
+        </p>
+      </span>
+    </div>
+  </div>
+  <div
+    class="hidden lg:flex flex-1 flex-row w-full divide-x divide-dark-aquamarine"
+  >
+    <div class="relative flex-1 overflow-hidden">
+      <img
+        src={meme3.src}
+        alt=""
+        class="absolute bottom-0 -left-[110px] xl:-left-5 float-left object-contain"
+      />
+      <span
+        class="float-right mt-16 w-[300px] space-y-10 mr-1 xl:mr-5 overflow-y-auto max-h-[400px]"
+      >
+        <h3 class="font-display text-6xl">Crypto/<br />DeFi</h3>
+        <p class="font-body text-2xl text-body">
+          The advent of Bitcoin sparked innovation, but over time,
+          centralization increased. Factors such as the influx of big money,
+          greed, hype, and FOMO contributed to this trend. The introduction of
+          many money legos worsened the situation, leading to boom and bust
+          cycles.
+        </p>
+      </span>
+    </div>
+    <div class="relative flex-1 overflow-hidden">
+      <img
+        src={meme4.src}
+        alt=""
+        class="absolute bottom-0 -left-[110px] object-contain xl:-left-5 float-left"
+      />
+      <span
+        class="float-right mt-16 w-[300px] space-y-10 mr-1 xl:mr-5 overflow-y-auto max-h-[400px]"
+      >
+        <h3 class="font-display text-6xl">Web3</h3>
+        <p class="font-body text-2xl text-body">
+          Web3 emerged as a buzzword to replace DeFi, but its meaning varies.
+          Despite aiming for decentralization, Web3 relies on centralized
+          crypto/DeFi infrastructure. Money dominates over ideology, driven by
+          funders. A balance is necessary between free markets and public goods
+          to address the current imbalance.
+        </p>
+      </span>
+    </div>
+  </div>
+  <!-- MEME GRID BIG -->
+
+  <!-- MEME GRID SMALL -->
+  <div class="lg:hidden flex flex-col gap-8 py-10 px-8">
+    <h3 class="font-display text-3xl">Web1</h3>
+    <p class="font-body text-body text-xl">
+      Web1 is probably best remembered by geeks as chat rooms and IRC (which
+      still exist to this day, but only to power users). To normal users it was
+      the age of AOL dial-up and similar networks where you got web, email,
+      shopping, and chat all in one place..
+    </p>
+    <img src={meme1Small.src} class="-mb-10 w-60 self-center" />
+  </div>
+  <div class="lg:hidden flex flex-col gap-8 py-10 px-8">
+    <h3 class="font-display text-3xl">Web2</h3>
+    <p class="font-body text-body text-xl">
+      Web2 since evolved with the web browser and we got better gaming, online
+      apps, video streaming and calling and much, much more. However, it also
+      got quickly captured by Silicon Valley and what some refer to as the "tech
+      bros".
+    </p>
+    <p class="font-body text-body text-xl">
+      So <i>despite</i> the innovation that occurred, it has turned into a top-down
+      system where only a few geeks/CEO's and their investors control your entire
+      web.
+    </p>
+    <p class="font-body text-body text-xl">
+      This also excludes the wider internet infrastructure of domains and ISP's
+      (internet providers and hosting), who also play a part in controlling your
+      web, be it for your "safety", or other reasons.
+    </p>
+    <img src={meme2Small.src} class="-mb-10 w-60 self-center" />
+  </div>
+  <div class="lg:hidden flex flex-col gap-8 py-10 px-8">
+    <h3 class="font-display text-3xl">Crypto/DeFi</h3>
+    <p class="font-body text-body text-xl">
+      We get the birth of Bitcoin and all of the innovation that followed. While
+      BTC and a handful of other chains have remained decentralized both in
+      operation, and access, the innovation over time has caused things to
+      re-centralize.
+    </p>
+    <p class="font-body text-body text-xl">
+      This is due to several factors including big money coming in, pushing
+      greed, hype, and "FOMO". The invention of several new logos's causing this
+      to only get worse, creating a classic "boom" and "bust". Human nature
+      tends to be greedy, so over time, money overrode principles.
+    </p>
+    <p class="font-body text-body text-xl">
+      Many development teams prioritized inventing new ideas and "shipping" them
+      to users, while selling them "tokens" to exit at their expense, all while
+      knowing none of what they created was <i>truly decentralized</i>.
+    </p>
+    <p class="font-body text-body text-xl">
+      It became one large crypto casino.
+    </p>
+    <img src={meme3Small.src} class="-mb-10 w-60 self-center" />
+  </div>
+  <div class="lg:hidden flex flex-col gap-8 py-10 px-8">
+    <h3 class="font-display text-3xl">Web3</h3>
+    <p class="font-body text-xl text-body">
+      What to say about Web3? Honestly... upfront it appeared to get used as a
+      new buzz word to replace "DeFi". Terms like "Web3" and "Metaverse" have
+      many different meanings to many people. It is intended to include more
+      than just money and trading, and yet every blockchain-based system that
+      can be labeled "web3" still builds onto of the same centralized
+      crypto/defi infrastructure.
+    </p>
+    <p class="font-body text-xl text-body">
+      The end result is an ecosystem that promotes and <b><i>wants</i></b> to be
+      decentralized, but where money overrules ideology, ethos, and principles. This
+      is in part due to who's bankrolling it all, and thus the incentives to build
+      make it more about the money then about freedom.
+    </p>
+    <p class="font-body text-xl text-body">
+      There needs to be a balance here between free markets/money and public
+      goods/infra, and so far things are way out of wack and need to be fixed.
+    </p>
+    <img src={meme4Small.src} class="-mb-10 w-60 self-center" />
+  </div>
+  <!-- MEME GRID SMALL -->
+</section>

src/components/Layout/Footer/Footer.astro

@@ -0,0 +1,82 @@
+---
+import logo from "/src/assets/lume-logo.png";
+---
+
+<footer
+  class="flex flex-col lg:flex-row py-24 font-body mb-3 mx-10 md:mx-20 xl:mx-40 max-w-screen"
+>
+  <div class="flex-1">
+    <a href="/">
+      <img src={logo.src} class="w-36 mb-2" alt="Lume" />
+    </a>
+    <a
+      href="mailto:contact@lumeweb.com"
+      class="flex flex-row items-center text-body text-xl"
+    >
+      <svg
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="w-4 h-4 mr-2"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+        >
+        </path>
+      </svg>
+      contact@lumeweb.com
+    </a>
+    <div class="text-lg text-primary font-bold font-display my-10">
+      Freedom. Privacy. <br />Ownership.
+    </div>
+  </div>
+  <div class="flex-1 my-5 lg:my-0">
+    <h5 class="text-3xl mb-3">General</h5>
+    <ul class="text-body font-body text-xl">
+      <li>
+        <a href="/" class="hover:underline">Home</a>
+      </li>
+      <li>
+        <a href="https://git.lumeweb.com" class="hover:underline">Git</a>
+      </li>
+    </ul>
+  </div>
+  <div class="flex-1 my-5 lg:my-0">
+    <h5 class="text-3xl mb-3">Community</h5>
+    <ul class="text-body font-body text-xl">
+      <li>
+        <a href="https://github.com/LumeWeb" class="hover:underline">GitHub</a>
+      </li>
+      <li>
+        <a href="https://discord.gg/qpC8ADp3rS" class="hover:underline"
+          >Discord</a
+        >
+      </li>
+      <li>
+        <a href="https://twitter.com/lumeweb3" class="hover:underline"
+          >Twitter</a
+        >
+      </li>
+    </ul>
+  </div>
+  <div class="flex-1 my-5 lg:my-0">
+    <h5 class="text-3xl mb-3">Ecosystem</h5>
+    <ul class="text-body font-body text-xl">
+      <li>
+        <a href="https://web3extension.io" class="hover:underline">Extension</a>
+      </li>
+    </ul>
+  </div>
+  <div class="flex-1 my-5 lg:my-0">
+    <h5 class="text-3xl mb-3">Support Us</h5>
+    <ul class="text-body font-body text-xl">
+      <li>
+        <a href="/donate" class="hover:underline">Donate</a>
+      </li>
+    </ul>
+  </div>
+</footer>

src/components/Layout/JoinCommunity/JoinCommunity.astro

@@ -0,0 +1,39 @@
+---
+import './JoinCommunity.scss';
+
+import svgGit from '/src/assets/icons/git.svg?raw';
+import svgGithub from '/src/assets/icons/github.svg?raw';
+import svgDiscord from '/src/assets/icons/discord.svg?raw';
+import svgTwitter from '/src/assets/icons/twitter.svg?raw';
+---
+
+<section id="join-community">
+  <div>
+    <h2>
+      Join our community, lend a hand.
+    </h2>
+    <p>
+      Web3 gives people control over their data, privacy, and ownership.
+    </p>
+  </div>
+    <div>
+      <a href="https://git.lumeweb.com" title="Git" class="git-logo">
+        <Fragment set:html={svgGit} />
+      </a>
+    </div>
+  <div>
+    <a href="https://github.com/LumeWeb" title="GitHub" class="github-logo">
+      <Fragment set:html={svgGithub} />
+    </a>
+  </div>
+  <div>
+    <a href="#" title="Discord" class="discord-logo">
+      <Fragment set:html={svgDiscord} />
+    </a>
+  </div>
+  <div>
+    <a href="#" title="Twitter" class="twitter-logo">
+      <Fragment set:html={svgTwitter} />
+    </a>
+  </div>
+</section>

src/components/Layout/JoinCommunity/JoinCommunity.scss

@@ -0,0 +1,80 @@
+@import "/src/styles/mixins.scss";
+@import "/src/styles/vars.scss";
+
+#join-community {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2em;
+    padding: 5em 7.5%;
+    background: $color-aquamarine;
+    color: $color-blue-charcoal-2;
+    @include fluid-font-size(0.625rem);
+
+    div {
+        flex-grow: 1;
+
+        &:first-child {
+            flex-grow: 10;
+        }
+
+        &:last-child {
+            flex-grow: 0;
+        }
+    }
+
+    @media screen and (max-width: 56rem) {
+        flex-wrap: wrap;
+        justify-content: center;
+
+        div:first-child {
+            flex-basis: 100%;
+            margin-bottom: 2em;
+            text-align: center;
+        }
+
+        div {
+            flex-grow: 0;
+        }
+    }
+
+    h2 {
+        margin-bottom: 0.25em;
+        @include fluid-font-size(2rem);
+        font-weight: 700;
+        line-height: 153%;
+        text-transform: none;
+        color: inherit;
+    }
+
+    p {
+        font-family: $font-family-jaldi;
+        @include fluid-font-size(1.5rem);
+        line-height: 157%;
+    }
+
+    a {
+        display: block;
+        color: #0B3F48;
+
+        &:hover {
+            color: inherit;
+        }
+    }
+
+    .github-logo svg {
+        @include fluid-width(3.625rem);
+    }
+
+    .git-logo svg {
+        @include fluid-width(3.625rem);
+    }
+
+    .discord-logo svg {
+        @include fluid-width(3.625rem);
+    }
+
+    .twitter-logo svg {
+        @include fluid-width(3.625rem);
+    }
+}

src/components/Layout/Navbar/Navbar.astro

@@ -0,0 +1,99 @@
+---
+import logo from "../../../assets/lume-logo.png";
+const { view } = Astro.props;
+
+function getActiveClass(linkView) {
+  return view === linkView ? "border-b border-white" : "";
+}
+---
+
+<nav class="flex flex-row px-[25px] justify-between items-center py-8 md:p-14">
+  <div class="logo">
+    <!-- TODO: Hide this logo and show simplified when 320 > width -->
+    <a href="/">
+      <img class="w-44" src={logo.src} alt="Lume Logo" />
+    </a>
+  </div>
+  <menu
+    class="hidden flex-col items-center gap-14 z-20 max-sm:absolute max-sm:right-0 max-sm:top-0 max-sm:bottom-0 max-sm:z-20 max-sm:py-20 max-sm:px-10 max-sm:bg-black lg:flex-row lg:flex"
+  >
+    <li>
+      <a href="/" class={getActiveClass("home")}>Home</a>
+    </li>
+    <li>
+      <a href="/vision" class={getActiveClass("vision")}>Vision</a>
+    </li>
+    <li>
+      <a href="/what-is-web3" class={getActiveClass("what")}>What is Web3</a>
+    </li>
+    <li>
+      <a href="/donate" class={getActiveClass("donate")}>Donate</a>
+    </li>
+    <li>
+      <a
+        href="https://web3extension.io"
+        class="text-md rounded-md bg-primary py-3 px-10 mt-14 text-[black] font-body"
+        >Download Extension</a
+      >
+    </li>
+  </menu>
+  <div
+    id="navbar-overlay"
+    class="hidden lg:hidden bg-black/40 w-screen h-screen fixed z-10 top-0 botton-0 right-0 left-0"
+  >
+  </div>
+  <button id="hamburger" class="z-30 text-4xl lg:hidden">
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 52 43"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 1.06787H51.295"
+        stroke="white"
+        stroke-width="1.28"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+      <path
+        d="M1 21.5728H51.295"
+        stroke="white"
+        stroke-width="1.28"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+      <path
+        d="M1 42.0776H51.295"
+        stroke="white"
+        stroke-width="1.28"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+    </svg>
+  </button>
+  <script>
+    const navbarOverlayEl = document.getElementById("navbar-overlay");
+    const hamburgerEl = document.getElementById("hamburger");
+    const menuEl = document.querySelector("menu");
+
+    function handleMenuClick() {
+      // Toggle menu open/closed
+      ["hidden", "flex"].forEach((className) => {
+        menuEl.classList.toggle(className);
+      });
+
+      navbarOverlayEl.classList.toggle("hidden");
+    }
+
+    function handleOverlayClick() {
+      // Close menu on overlay click
+      ["hidden", "flex"].forEach((className) => {
+        menuEl.classList.toggle(className);
+      });
+
+      navbarOverlayEl.classList.toggle("hidden");
+    }
+
+    hamburgerEl.addEventListener("click", handleMenuClick);
+    navbarOverlayEl.addEventListener("click", handleOverlayClick);
+  </script>
+</nav>

src/components/Vision/Grid/Grid.astro

@@ -0,0 +1,29 @@
+---
+import './Grid.scss';
+---
+
+<section id="grid" class="feature-grid">
+    <div>
+        <h2>Freedom. Privacy. Ownership.</h2>
+    </div>
+    <div>
+        <h3>Decentralized Websites (Goal)</h3>
+        <p>You should be able to gain access to any website on any network, in a secure and decentralized way</p>
+    </div>
+    <div>
+        <h3>Decentralized Publishing (Idea)</h3>
+        <p>You should be able to easily publish a blog or any other basic website for personal or professional use</p>
+    </div>
+    <div>
+        <h3>Website Building Tools (Idea)</h3>
+        <p>You should be able to easily build a website that targets the decentralized web</p>
+    </div>
+    <div>
+        <h3>eCommerce (Idea)</h3>
+        <p>You should be be able to buy or sell in a free market without censorship or politics blocking your ability to transact</p>
+    </div>
+    <div>
+        <h3>Earn a Living (Idea)</h3>
+        <p>You should be able to monetize your content or skills, without a middleman or gatekeeper. You should be able to be free to live your best life by having access to an open market so that you are never chained down or restricted</p>
+    </div>
+</section>

src/components/Vision/Grid/Grid.scss

@@ -0,0 +1,20 @@
+@import "/src/styles/mixins.scss";
+@import "/src/styles/vars.scss";
+
+#grid {
+  padding-top: 2.05em;
+  padding-bottom: 2.05em;
+
+  div:first-child {
+    background: inherit;
+    border: none
+  }
+
+  h2 {
+    font-family: $font-family-jetbrains-mono;
+    @include fluid-font-size(2.75rem);
+    font-weight: 700;
+    line-height: 129.55%;
+    color: $color-aquamarine;
+  }
+}

src/components/Vision/Jumbotron/Jumbotron.astro

@@ -0,0 +1,9 @@
+---
+import '../../../styles/jumbotron.scss';
+---
+
+<section id="jumbotron">
+  <h1>
+      Easy access to an open, user-owned web.
+  </h1>
+</section>

src/components/Vision/NoVc/NoVc.astro

@@ -0,0 +1,28 @@
+---
+import './NoVc.scss';
+---
+
+<section id="no-vc">
+  <div class="feature-group">
+    <h2>Community-Powered</h2>
+    <h3>All about the people, no VC here.</h3>
+      <p>
+          Our vision is completely grass roots, and FOSS. The user needs to have a voice and be in control of their web. Due to our principles, we have not taken any VC money that might be able to strap a jetpack to the project, because the output would compromise the spirit and goals we are setting out to achieve.
+      </p>
+      <p>
+          We are <i>very</i> aware of the projects that have come before us and whom have made similar promises. We are also doing our best to learn from their mistakes and failures.
+      </p>
+      <p>
+          The key difference that we see big picture is you need both an <b>economy</b> and <b>decentralized/P2P</b> networks, because running the internet is not free, and someone <i>always</i> has to foot the bill.
+      </p>
+      <p>
+          Blockchain <b><i>finally</i></b> makes this possible.
+      </p>
+      <p>
+          Having a pragmatic view on mass adoption without compromising on principles is needed to make progress on a user-owned web.
+      </p>
+    <div>
+      <a href="/donate" class="btn-main">Contribute to our cause</a>
+    </div>
+  </div>
+</section>

src/components/Vision/NoVc/NoVc.scss

@@ -0,0 +1,45 @@
+@import "/src/styles/vars.scss";
+
+#no-vc {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  max-width: 185.6em;
+  min-height: 78.4em;
+  margin: 0 auto;
+
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: min(0em, calc((100% - 95em) / 2));
+    width: calc(100% - 64em - 7.5%);
+    min-width: 95em;
+    background-image: url("/src/assets/double-brand-bg.png");
+    background-position: 50% 100%;
+    background-repeat: no-repeat;
+    background-size: contain;
+    z-index: -1;
+  }
+
+  .feature-group {
+    box-sizing: content-box;
+    padding: 9em 7.5%;
+    max-width: 64em;
+  }
+
+  @media screen and (max-width: 80rem) {
+    p {
+      background: rgba($color-blue-charcoal-2, 0.75);
+      border-radius: 0.5em;
+      padding: 0.3em 0.5em;
+      margin: -0.3em -0.5em;
+    }
+
+    p + p {
+      margin-top: 0.48em;
+    }
+  }
+}

src/components/Vision/Unify/Unify.astro

@@ -0,0 +1,23 @@
+---
+import './Unify.scss';
+---
+
+<section id="unify">
+    <div class="custom-bg"></div>
+    <div class="feature-group">
+        <h2>Community-Powered</h2>
+        <h3>Unifying all the Networks</h3>
+        <p>
+            There are many, <i>many</i> "crypto", "defi", "web3", "P2P", and "dWeb" projects that have all taken hundreds
+            of different approaches to innovate. However, they all have the same broad ethos in common, and they all
+            need an easy means to access them in one place, but in a censorship-resistant way.
+        </p>
+        <p>
+            We have a very ambitious vision, and this requires all "tribes" to work together enough for the benefit of
+            the end user.
+        </p>
+        <p>
+            Below are some of the ideas we are aiming for, and some we would like to tackle eventually.
+        </p>
+    </div>
+</section>

src/components/Vision/Unify/Unify.scss

@@ -0,0 +1,51 @@
+@import "/src/styles/vars.scss";
+
+#unify {
+  position: relative;
+  padding: 14em 7.5%;
+
+  .custom-bg {
+    position: absolute;
+    top: 0;
+    right: -12.5%;
+    bottom: 0;
+    left: -12.5%;
+    margin: 2% 0;
+    background: $color-blue-charcoal;
+    transform: matrix(1, 0.04, -0.04, 1, 0, 0);
+    z-index: -1;
+    overflow: hidden;
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: -1%;
+      bottom: -5%;
+      left: 10%;
+      right: 10%;
+      background-image: url("/src/assets/unifying-bg.png");
+      background-position: 100% 100%;
+      background-repeat: no-repeat;
+      background-size: contain;
+      transform: rotate(-2.25deg);
+    }
+  }
+
+  .feature-group {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    max-width: 64em;
+  }
+
+  p {
+    background: rgba($color-blue-charcoal, 0.75);
+    border-radius: 0.5em;
+    padding: 0.3em 0.5em;
+    margin: -0.3em -0.5em;
+  }
+
+  p + p {
+    margin-top: 0.48em;
+  }
+}

src/components/What/Contribute/Contribute.astro

@@ -0,0 +1,34 @@
+---
+import './Contribute.scss';
+import mario from "/src/assets/mario-level-up.gif"
+---
+
+<section id="contribute">
+    <div class="feature-group">
+        <h2>Web3 is Community</h2>
+        <h3>Re-defining Web3, for the users</h3>
+        <p>
+            Web3 was a term first defined by Gavin Wood when the Ethereum network was starting out. He defined it as a
+            "decentralized online ecosystem based on blockchain".
+        </p>
+        <p>
+            However, we view it as much more than that, and definitely more than access to DeFi. We see a ton of more
+            potential to what Web3 as an ideal can evolve to, and are setting out to make it a reality.
+        </p>
+        <p>
+            To those that see Web3 as DeFi, we ask this: Do you go on your web browser to access TradingView or other market tools as your homepage, or do you go check your social media, email, and news sites, as <i>well</i> as your money?
+        </p>
+        <p>
+            Blockchain itself is more than just <i>money</i>, and so is Web3, and by extension P2P networks.
+        </p>
+        <p>
+            So help us in our goals to level-up Web3.
+        </p>
+        <div class="mario">
+            <img src={mario.src} alt="Mario Level Up"/>
+        </div>
+        <div>
+            <a href="/donate" class="btn-main">Donate</a>
+        </div>
+    </div>
+</section>

src/components/What/Contribute/Contribute.scss

@@ -0,0 +1,35 @@
+@import "/src/styles/vars.scss";
+
+#contribute {
+  position: relative;
+  display: flex;
+  align-items: center;
+  min-height: 71.1em;
+  background: $color-blue-charcoal;
+
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: url("/src/assets/contribute-bg.png");
+    background-position: 50%;
+    background-size: cover;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.75);
+  }
+
+  .feature-group {
+    max-width: 72em;
+    margin: 9em 7.5%;
+    z-index: 1;
+  }
+
+  .mario {
+    margin-top: 2.5em;
+  }
+}

src/components/What/Grid/Grid.astro

@@ -0,0 +1,28 @@
+---
+import './Grid.scss';
+---
+
+<section id="grid" class="feature-grid">
+    <div>
+        <h3>Access the markets, aka DeFi</h3>
+        <p>Web3 commonly get mixed up with DeFi, however, while you should be able to access any decentralized website or network, access to DeFi to manage your money is critical as well.</p>
+    </div>
+    <div>
+        <h3>Access any decentralized or P2P network</h3>
+        <p>The basics of Web3 is the sum of all the open networks and ecosystems. You should be able to access and visit any of these places.</p>
+        <p>You can compare this to accessing things on Google, Facebook, Apple, or other networks/platforms that are generally walled gardens in the current web system.</p>
+    </div>
+    <div>
+        <h3>Publish Freely</h3>
+        <p>A core tenant of Web3 is censorship-resistance. You should be able to freely post controversial (or even things others just don't want to hear) information, such as news, blogging, or video. You should be allowed to openly debate, educate, inform, or entertain without getting "de-platformed".</p>
+    </div>
+    <div>
+        <h3>Socialize and Discover Freely</h3>
+        <p>While you have the ability to post, you should <i>also</i> have the ability to <i>read</i>.</p>
+    </div>
+    <div>
+        <h3>Own your web. Own your identity.</h3>
+        <p>You should be able to have your private data <b>be</b> and <b>stay</b> private unless you choose otherwise. This is achieved with your online web3 account, which serves as your identity and means of encrypting everything you do.</p>
+        <p>If you want to share you can, but your data is yours, no one else's.</p>
+    </div>
+</section>

src/components/What/Grid/Grid.scss

@@ -0,0 +1,3 @@
+#grid {
+  margin-bottom: 1.2em;
+}

src/components/What/Jumbotron/Jumbotron.astro

@@ -0,0 +1,9 @@
+---
+import '../../../styles/jumbotron.scss';
+---
+
+<section id="jumbotron">
+  <h1>
+    An evolved, user-owned web where you have access to the world in a way only you control.
+  </h1>
+</section>

src/components/What/NewWorld/NewWorld.astro

@@ -0,0 +1,16 @@
+---
+import './NewWorld.scss';
+---
+
+<section id="new-world">
+    <div>
+        <div class="feature-group">
+            <h2>Community-Powered</h2>
+            <h3>Your Web, Your Rules</h3>
+            <p>
+                In summary, Web3 is about what you want to do, post, read, play, chat, or interact without others saying
+                otherwise. It is about freedom of speech <i>and</i> freedom of economy.
+            </p>
+        </div>
+    </div>
+</section>