chore(release): 0.3.3 [skip ci]

## [0.3.3](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.3.2...v0.3.3) (2024-01-27)

### Bug Fixes

* update donation addresses ([6b60eaa](6b60eaa19f))

.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

.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
+        }
+    ]
+}

CHANGELOG.md

@@ -0,0 +1,267 @@
+## [0.3.3](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.3.2...v0.3.3) (2024-01-27)
+
+
+### Bug Fixes
+
+* update donation addresses ([6b60eaa](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/6b60eaa19f3b06de0f05226604fccd36c3f2ab38))
+
+## [0.3.2](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.3.1...v0.3.2) (2023-09-30)
+
+## [0.3.1](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.3.0...v0.3.1) (2023-08-21)
+
+
+### Bug Fixes
+
+* spacing, button getting cutoff again :( ([7f38d40](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/7f38d409d262d972722f26f221e6be721104999f))
+
+# [0.3.0-develop.5](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.3.0-develop.4...v0.3.0-develop.5) (2023-08-21)
+
+
+### Bug Fixes
+
+* spacing, button getting cutoff again :( ([7f38d40](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/7f38d409d262d972722f26f221e6be721104999f))
+
+# [0.3.0-develop.4](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.3.0-develop.3...v0.3.0-develop.4) (2023-08-19)
+
+
+### Bug Fixes
+
+* meme headline and donate button ([917a818](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/917a818c8375c0c880e5c4b3bf5760698bc739f1))
+
+# [0.3.0-develop.3](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.3.0-develop.2...v0.3.0-develop.3) (2023-08-19)
+
+
+### Features
+
+* add sitemap ([599bba5](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/599bba5c352ead5981732d68a5c83cc42a40cb65))
+
+# [0.3.0-develop.2](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.3.0-develop.1...v0.3.0-develop.2) (2023-08-19)
+
+
+### Bug Fixes
+
+* grammar ([ff7b022](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/ff7b0227897db1a8a9eba3fcbe348e5b88d9c030))
+
+# [0.3.0-develop.1](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.8-develop.2...v0.3.0-develop.1) (2023-08-19)
+
+
+### Features
+
+* add grid feature for NFT's ([14dad07](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/14dad07901eea31b97ce741d4a1ab19961d15c7c))
+
+## [0.2.8-develop.2](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.8-develop.1...v0.2.8-develop.2) (2023-08-19)
+
+
+### Bug Fixes
+
+* add missing image ([0ebbc48](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/0ebbc48337ff81a2753f7f1ee01eff83168806c9))
+
+## [0.2.8-develop.1](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.7...v0.2.8-develop.1) (2023-08-18)
+
+
+### Bug Fixes
+
+* add badges ([7219604](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/721960471f6c19fcf32a20a8d205c359f13a7c3d))
+* spacing issues ([42b5ca2](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/42b5ca213fc74b88a53c8c699e9ccad466d2e795))
+
+## [0.2.5-develop.8](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.5-develop.7...v0.2.5-develop.8) (2023-08-16)
+
+
+### Bug Fixes
+
+* add badges ([7219604](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/721960471f6c19fcf32a20a8d205c359f13a7c3d))
+
+## [0.2.5-develop.7](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.5-develop.6...v0.2.5-develop.7) (2023-08-16)
+
+
+### Bug Fixes
+
+* spacing issues ([42b5ca2](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/42b5ca213fc74b88a53c8c699e9ccad466d2e795))
+
+## [0.2.5-develop.6](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.5-develop.5...v0.2.5-develop.6) (2023-08-15)
+
+
+### Bug Fixes
+
+* update gitcoin url ([a95e913](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/a95e91389981afc7efac0398165a3cb184df564b))
+
+## [0.2.5-develop.5](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.5-develop.4...v0.2.5-develop.5) (2023-08-15)
+
+
+### Bug Fixes
+
+* improved hero image ([a07e74f](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/a07e74f1901b22dc2f502699c8a96a9bda4a8cf3))
+
+## [0.2.5-develop.4](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.5-develop.3...v0.2.5-develop.4) (2023-08-15)
+
+
+### Bug Fixes
+
+* last minute details ([63fb11e](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/63fb11e1b068a68f21c92343c53b9875e384b2a8))
+* layout shifting and showing overflow ([309d19c](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/309d19c73aa1a261081000f7396ec090549b3d64))
+
+## [0.2.5-develop.3](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.5-develop.2...v0.2.5-develop.3) (2023-08-15)
+
+
+### Bug Fixes
+
+* wrong color on 'How.astro' Component ([02764ea](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/02764ea73cc27f0f5165cc10564a2fd6450a5cf4))
+
+## [0.2.5-develop.2](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.5-develop.1...v0.2.5-develop.2) (2023-08-15)
+
+## [0.2.5-develop.1](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.4...v0.2.5-develop.1) (2023-08-15)
+
+
+### Bug Fixes
+
+* add opengraph seo ([45a4a8d](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/45a4a8d7125e8c1ff7f5b18f0215305d181ef85e))
+* bring back ibm font ([ccc873d](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/ccc873d547de3e9cd8ba1067d95d5ab5cfd8a9f4))
+* grid cell style closer to design by centering the text ([f3498ec](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/f3498ec536862017b6e3acf33d136c81aa550d33))
+* gridcell style ([a1b998e](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/a1b998e4b941abf8557e08e8a3a1affb164cbf59))
+* incorrect font choice on gridcell ([115090f](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/115090fc562798ac2ecbb271b6612c6a2c03d564))
+* revert global styles to unbreak site ([6b3626b](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/6b3626b6ac685fb27664ba3952fed98e16c7ebb8))
+
+## [0.2.4](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.3...v0.2.4) (2023-08-14)
+
+
+### Bug Fixes
+
+* overall improvements of the responsive layout ([f9362fa](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/f9362fa577172a017c8df26aefc88abba042b092))
+
+## [0.2.3](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.2...v0.2.3) (2023-08-14)
+
+
+### Bug Fixes
+
+* remove scroll bars and add padding to contrast box ([0d32745](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/0d32745b1817b84211404093a0e10e7015cf6b3e))
+
+## [0.2.2](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.1...v0.2.2) (2023-08-13)
+
+
+### Bug Fixes
+
+* update download url ([1e0485d](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/1e0485d1ccb74153557dcff46856350034594ec2))
+* update learn more link ([10ebeef](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/10ebeefaed5292d492976b078d5a2dd5ef1f3c9e))
+
+## [0.2.1](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.2.0...v0.2.1) (2023-08-13)
+
+
+### Bug Fixes
+
+* update socials ([6814ca3](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/6814ca3be56753ea9159ac5f07847fe722b6f0b3))
+
+# [0.2.0](https://git.lumeweb.com/LumeWeb/lumeweb.com/compare/v0.1.0...v0.2.0) (2023-08-13)
+
+
+### Features
+
+* add analytics ([6fcce50](https://git.lumeweb.com/LumeWeb/lumeweb.com/commit/6fcce50dab4d93aaa95520f89b676f40a29ea21d))
+
+# [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.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,33 +1,4 @@
-# Astro Starter Kit: Minimal
+# Lume Web Project Site
-
-```
-npm create astro@latest -- --template minimal
-```
-
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
-[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
-[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
-
-> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
-
-## 🚀 Project Structure
-
-Inside of your Astro project, you'll see the following folders and files:
-
-```
-/
-├── public/
-├── src/
-│   └── pages/
-│       └── index.astro
-└── package.json
-```
-
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
-
-Any static assets, like images, can be placed in the `public/` directory.
 
 ## 🧞 Commands
 
@@ -41,7 +12,3 @@ All commands are run from the root of the project, from a terminal:
 | `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                     |
-
-## 👀 Want to learn more?
-
-Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

astro.config.mjs

@@ -1,9 +1,13 @@
-import { defineConfig } from 'astro/config';
+import { defineConfig } from 'astro/config'
-import tailwind from '@astrojs/tailwind';
+import tailwind from '@astrojs/tailwind'
-import react from '@astrojs/react';
+import react from '@astrojs/react'
-import image from '@astrojs/image';
+import sitemap from '@astrojs/sitemap';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind({ config: { applyBaseStyles: false } }), image(), react()],
+    site: 'https://lumeweb.com',
-});
+    integrations: [tailwind({ config: { applyBaseStyles: false } }), react(), sitemap()],
+    experimental: {
+        assets: true
+    }
+})

package.json

@@ -1,24 +1,28 @@
 {
-  "name": "lume-web",
+    "name": "@lumeweb/lumeweb.com",
     "type": "module",
-  "version": "0.0.1",
+    "version": "0.3.3",
+    "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"
+        "astro": "astro",
+        "semantic-release": "semantic-release"
     },
     "dependencies": {
-    "@astrojs/image": "^0.16.6",
         "@astrojs/react": "^2.1.1",
+        "@astrojs/sitemap": "^2.0.2",
         "@astrojs/tailwind": "^3.1.1",
         "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.1",
+        "add": "^2.0.6",
         "astro": "^2.3.2",
-    "astro-icon": "^0.8.0",
         "autoprefixer": "^10.4.14",
-    "dynamic-react-grid": "^0.2.0",
         "qrcode": "^1.5.3",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -27,6 +31,11 @@
         "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"
     }

public/favicon.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>

public/robots-dev.txt

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

public/robots.txt

@@ -1,2 +1,3 @@
 User-Agent: *
 Allow: /
+Sitemap: sitemap-index.xml

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/flag.svg

@@ -0,0 +1,10 @@
+<svg viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1051_672)">
+<path d="M11.6862 0.258338C11.3823 0.1324 11.0329 0.202275 10.8006 0.43465C9.77356 1.46084 8.10225 1.46165 7.07444 0.43465C5.41287 -1.22529 2.71131 -1.22529 1.05056 0.43465C0.897813 0.586588 0.8125 0.793776 0.8125 1.00909V11.5716C0.8125 12.0201 1.17569 12.3841 1.625 12.3841C2.07431 12.3841 2.4375 12.0201 2.4375 11.5716V7.87228C3.47019 7.06221 4.97331 7.13209 5.92556 8.08353C7.58713 9.74346 10.2895 9.74346 11.9494 8.08353C12.1022 7.93078 12.1875 7.7244 12.1875 7.50909V1.00909C12.1875 0.680026 11.9892 0.384275 11.6862 0.258338Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1051_672">
+<rect width="13" height="13" fill="white"/>
+</clipPath>
+</defs>
+</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/star.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1051_659)">
+<path d="M14.6663 6.53324C14.6663 6.66658 14.597 6.79998 14.4583 6.93331L11.5497 9.73328L12.2383 13.7999C12.2437 13.7999 12.2463 13.8666 12.2463 13.9333C12.2463 14.0666 12.217 14.1332 12.1583 14.1999C12.105 14.2666 12.025 14.3333 11.9177 14.3333C11.8163 14.3333 11.7097 14.3333 11.5977 14.2666L7.99967 12.3333L4.40194 14.2666C4.28441 14.3333 4.17754 14.3333 4.08141 14.3333C3.96921 14.3333 3.88374 14.2666 3.82501 14.1999C3.77154 14.1332 3.74487 14.0666 3.74487 13.9333C3.74487 13.9333 3.75021 13.8666 3.76087 13.7999L4.45001 9.73328L1.53334 6.93331C1.39981 6.79998 1.33301 6.66658 1.33301 6.53324C1.33301 6.33324 1.48261 6.19991 1.78174 6.19991L5.80414 5.59998L7.60701 1.93331C7.70834 1.73331 7.83967 1.59998 7.99967 1.59998C8.15967 1.59998 8.29101 1.73331 8.39234 1.93331L10.195 5.59998L14.2177 6.19991C14.517 6.19991 14.6663 6.33324 14.6663 6.53324Z" fill="#020E10"/>
+<path d="M14.6663 5.86662C14.6663 5.99995 14.597 6.13335 14.4583 6.26668L11.5497 9.06665L12.2383 13.1333C12.2437 13.1333 12.2463 13.2 12.2463 13.2667C12.2463 13.4 12.217 13.4666 12.1583 13.5333C12.105 13.6 12.025 13.6667 11.9177 13.6667C11.8163 13.6667 11.7097 13.6667 11.5977 13.6L7.99967 11.6667L4.40194 13.6C4.28441 13.6667 4.17754 13.6667 4.08141 13.6667C3.96921 13.6667 3.88374 13.6 3.82501 13.5333C3.77154 13.4666 3.74487 13.4 3.74487 13.2667C3.74487 13.2667 3.75021 13.2 3.76087 13.1333L4.45001 9.06665L1.53334 6.26668C1.39981 6.13335 1.33301 5.99995 1.33301 5.86662C1.33301 5.66662 1.48261 5.53328 1.78174 5.53328L5.80414 4.93335L7.60701 1.26668C7.70834 1.06668 7.83967 0.93335 7.99967 0.93335C8.15967 0.93335 8.29101 1.06668 8.39234 1.26668L10.195 4.93335L14.2177 5.53328C14.517 5.53328 14.6663 5.66662 14.6663 5.86662Z" fill="#020E10"/>
+</g>
+<defs>
+<clipPath id="clip0_1051_659">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</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.astro

@@ -0,0 +1,53 @@
+---
+import Button from "../ui/Button.astro";
+import FeaturedGroup from "../ui/FeaturedGroup.astro";
+---
+
+<style>
+  .custom-bg {
+    position: absolute;
+    top: 0;
+    right: -12.5%;
+    bottom: 0;
+    left: -12.5%;
+    margin: 2% 0;
+    background: var(--color-charcoal);
+    transform: matrix(1, 0.04, -0.04, 1, 0, 0);
+    z-index: -1;
+    overflow: hidden;
+    height: 500px;
+  }
+
+  .custom-bg::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);
+  }
+</style>
+
+<section id="how" class="relative overflow-hidden max-w-[100vw]">
+  <div class="custom-bg"></div>
+  <div
+    class="max-w-3xl bg-black/50 p-3 py-10 lg:bg-transparent lg:px-0 mx-10 md:mx-20 lg:mx-40"
+  >
+    <FeaturedGroup
+      subtitle="Donate via Gitcoin during funding rounds"
+      title="How should I donate?"
+      text={[
+        "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.",
+      ]}
+    />
+    <Button
+      href="https://explorer.gitcoin.co/#/round/10/0x8de918f0163b2021839a8d84954dd7e8e151326d/0x8de918f0163b2021839a8d84954dd7e8e151326d-130"
+      label="Gitcoin"
+    />
+  </div>
+</section>

src/components/Donate/How/How.astro

@@ -1,16 +0,0 @@
----
-import './How.scss';
----
-
-<section id="how" class="tilted-bg-r">
-  <div class="feature-group">
-    <h2>How should I donate?</h2>
-    <h3>Donate via Gitcoin during funding rounds</h3>
-    <p>
-      This is because they will match you up to 150%. Currently, this is on the dates: June 7, 2022 – June 22, 2022
-    </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

@@ -1,32 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#how {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin-top: 8em;
-  @include fluid-padding-lr;
-  padding-top: 14em;
-  padding-bottom: 16em;
-
-  &::before {
-    background-image: url("/src/assets/donate-gfx-right.png");
-    background-position: 85% 100%;
-    background-repeat: no-repeat;
-    background-size: contain;
-  }
-
-  .feature-group {
-    max-width: 64em;
-  }
-
-  @media screen and (max-width: 80rem) {
-    p {
-      background: rgba($color-blue-charcoal, 0.65);
-      border-radius: 0.5em;
-      padding: 0.3em 0.5em;
-      margin: -0.3em -0.5em;
-    }
-  }
-}

src/components/Donate/Jumbotron.astro

@@ -0,0 +1,18 @@
+---
+import backgroundSrc from "/src/assets/donate-jumbotron-bg.png";
+---
+
+<section
+  id="jumbotron"
+  class="relative w-full h-[420px] flex items-center justify-center max-w-[100vw] overflow-hidden"
+>
+  <img
+    src={backgroundSrc.src}
+    class="-z-10 absolute top-[50px] left-1/2 -translate-x-1/2 w-[100em] max-w-none"
+  />
+  <h1
+    class="font-display2 px-10 md:px-20 lg:px-40 text-4xl lg:text-5xl w-full max-w-5xl text-center break-words"
+  >
+    Lume is <br /> people-powered.
+  </h1>
+</section>

src/components/Donate/Jumbotron/Jumbotron.astro

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

src/components/Donate/Legal.astro

@@ -0,0 +1,19 @@
+<section id="legal" class="mx-10 lg:mx-40 pb-40">
+  <h2 class="text-3xl lg:text-4xl font-display my-10">Tax and Legal</h2>
+  <p class="text-lg lg:text-xl font-body text-body my-5">
+    <strong
+      >Please understand that, according to United States regulations for our
+      present incorporation status, donations are not currently tax-deductible.</strong
+    >
+  </p>
+  <p class="text-lg lg:text-xl font-body text-body my-5">
+    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 class="text-lg lg:text-xl font-body text-body my-5">
+    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>
+</section>

src/components/Donate/Legal/Legal.astro

@@ -1,18 +0,0 @@
----
-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

@@ -1,32 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#legal {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: 11em 0 9em;
-  @include fluid-padding-lr;
-
-  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

@@ -1,116 +1,346 @@
 ---
-import './Methods.scss';
+import QRCode from "qrcode";
-import QRCode from 'qrcode';
 
 const currencies = [];
 
-const addCurrency = async (id, title, address) => {
+const addCurrency = async (id, title, address, mainColor) => {
   currencies.push({
     id: id,
     title: title,
     address: address,
+    mainColor,
     svgLogo: await import(`./icons/${id}.svg?raw`),
-    qrSmall: await QRCode.toDataURL(address, { version: 6, scale: 1, margin: 1 }),
+    qrSmall: await QRCode.toDataURL(address, {
-    qrLarge: await QRCode.toDataURL(address, { version: 6, scale: 7, margin: 2 })
+      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(
-await addCurrency('litecoin', 'Litecoin (LTC)', 'ltc1qgk6fc4u6grqyhfzw208477ze35vrr5tcwhq8zq');
+  "bitcoin",
-await addCurrency('ethereum', 'Ethereum (ETH, USDT/USDC, ERC20)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468');
+  "Bitcoin (BTC)",
-await addCurrency('polygon', 'Polygon (MATIC)', '0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468');
+  "bc1qya2wywxmquk5nd7vvvqgckz8v2rgqfz8xf4m56",
-await addCurrency('solana', 'Solana (SOL)', '4nMRucCuqttipwQXm31vBgoaxDW6o25TnD8fj1imviCu');
+  "#f7931a"
-await addCurrency('cardano', 'Cardano (ADA)', 'addr1q9jd69s53pdy9j567a27ac6uvc2966x0rjz2l9sxy4y5w8383jl87mrdf6uuk9ja7lmagm2p4vw30sa42kjylxxrdufqucgst6');
+);
-await addCurrency('siacoin', 'Siacoin (SC)', '7506caa950cdddbaec8f465937b50324e942ac6f5280a053662e58e3cc8bdb543ab88ccd5c23');
+await addCurrency(
-await addCurrency('monero', 'Monero (XMR)', '48A33fSyFo9YAiux3KHKVBagPGvqmcr2h4oy5pufJn6NUWyZsPF6PAufmrET3gLJjsLwxfU7HU9xe8mEeCqtHqvZN3Ly12h');
+  "litecoin",
-await addCurrency('handshake', 'Handshake (HNS)', 'hs1qe67ak3j2u4yrq0qnfs2hmycxqdvaf9v5rjsxzy');
+  "Litecoin (LTC)",
-await addCurrency('cosmos', 'Cosmos (ATOM)', 'cosmos1pvy8zyzqwz2r2jl9j9d3zrfmg6dqc5hyhj6d5z');
+  "ltc1q3xxlgv04kwtpmg89vng4rhp26u2g2kpxvryyxz",
-await addCurrency('secret', 'Secret (SCRT)', 'secret18377vc3af588ggauhrpuyfd954lmmu05xqhf0y');
+  "#345d9d"
-await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQLA3RZW4XHD3ISRE7CRYCVNU4EEVAE');
+);
+await addCurrency(
+  "ethereum",
+  "Ethereum (ETH, USDT/USDC, ERC20)",
+  "0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468",
+  "#8c8c8c"
+);
+await addCurrency(
+  "polygon",
+  "Polygon (MATIC)",
+  "0x63cd2C691632720Ff2ABDD0b6AABA2466D3Fe468",
+  "#8247e5"
+);
+await addCurrency(
+  "solana",
+  "Solana (SOL)",
+  "EHuLR93VFGw1sE3ooqx6vbHraGf3CvALakDtawg5JfLv",
+  "#dc1fff"
+);
+await addCurrency(
+  "cardano",
+  "Cardano (ADA)",
+  "addr1qyju8l630c6mmlv2nl6hfm08z8a7ts3q5v7qdjazfehzje7sd2judcq2u2d634zphhlnzs58tmj24xtdxqugzhkvlnzqh2ulqt",
+  "#0033ad"
+);
+await addCurrency(
+  "siacoin",
+  "Siacoin (SC)",
+  "7aae6e3f5f0db15e6cf866ecad91da2c3d9f3a70b700111c3eb9a5b453453ff5db65024a4489",
+  "#20ee82"
+);
+await addCurrency(
+  "monero",
+  "Monero (XMR)",
+  "4AqhZzqg3dqQYMTNj71A2H8Hrew9ujjBFE4pFqAvCaRpBddNgc3dnQRbJdS5ddtnTJexyuT71gs1bBNVox6WvreQRgREY6G",
+  "#f26822"
+);
+await addCurrency(
+  "handshake",
+  "Handshake (HNS)",
+  "hs1qk5jn35m2ruqdktrj7zfkx6y7079gc2l8hu7wxu",
+  "#fff"
+);
+await addCurrency(
+  "cosmos",
+  "Cosmos (ATOM)",
+  "cosmos1cqsxu9e79y5qx6t9szwlekq40neqphxlk3ry8e",
+  "#6f7390"
+);
+await addCurrency(
+  "secret",
+  "Secret (SCRT)",
+  "secret1kv0l82a3ktp4nyndxj9xzj2x5rm7g4vnad6ka0",
+  "#fff"
+);
+await addCurrency(
+  "algorand",
+  "Algorand (ALGO)",
+  "RQSSOA5FF3WWTQ5ODEHZK6FYYMSCDXEQH4U4GLRLMD67QG3PKZ2KG6SDVU",
+  "#fff"
+);
 ---
 
+<style lang="scss">
+  @import "../../../styles/vars.scss";
+  button#copy-address {
+    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#copy-address:hover + div,
+  button#copy-address.success + div {
+    &::before {
+      content: "";
+      position: absolute;
+      inset: -0.5em;
+      padding: 0.5em;
+      background: rgba($color-blue-charcoal, 0.6);
+      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.85);
+      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#copy-address.success + div {
+    &::after {
+      content: "Copied to Clipboard";
+      color: $color-aquamarine;
+    }
+  }
+
+  @keyframes overlay-opacity {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 0.75;
+    }
+  }
+
+  @keyframes hint-opacity {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+</style>
 <section id="methods">
-  <div>
+  <div class="mx-5 md:mx-20 lg:mx-40">
-    <h2>Donate Cryptocurrency</h2>
+    <h2 class="text-3xl lg:text-4xl mb-5 mt-20">Donate Cryptocurrency</h2>
-    <div class="method-grid">
+    <div
-      {currencies.map(currency => (
+      class="flex w-full flex-col lg:flex-row lg:flex-wrap gap-y-[10px] lg:gap-x-[10px]"
-        <div id={'donate-' + currency.id}>
+    >
-          <div>
+      {
+        currencies.map((currency) => (
+          <div
+            id={"donate-" + currency.id}
+            class={`hover:ring-2 flex flex-col bg-black rounded-md p-5 w-full max-w-[calc(100vw-40px)] lg:max-w-none lg:w-[calc(50%-20px)]`}
+            style={`--tw-ring-color: ${currency.mainColor}`}
+          >
+            <div class="flex flex-row gap-x-4 w-full justify-between">
+              <div class="w-12 h-12">
                 <Fragment set:html={currency.svgLogo.default} />
-            <h3>{currency.title}</h3>
-            <img onclick={"openDialog('" + currency.qrLarge + "')"} src={currency.qrSmall}/>
               </div>
-          <div class="address">
+              <h3 class="w-full text-2xl">{currency.title}</h3>
-            <button onclick="copyToClipboard(this)"></button>
+              <img
-            <div>{currency.address}</div>
+                class="w-12 h-12"
+                onclick={"openDialog('" + currency.qrLarge + "')"}
+                src={currency.qrSmall}
+              />
+            </div>
+            <div class="flex flex-row-reverse px-5 py-2 rounded-md text-body items-start justify-between mt-4">
+              <button
+                id="copy-address"
+                class="w-7 h-7 bg-gray-500"
+                onclick="
+                                copyToClipboard(this)
+                                "
+              />
+              <div class="text-lg relative break-words max-w-[calc(100%-50px)]">
+                {currency.address}
               </div>
             </div>
-      ))}
+          </div>
-      <div id="donate-paypal">
+        ))
-        <div>
+      }
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 154.728 190.5">
+    </div>
+  </div>
+  <div class="mx-5 md:mx-20 lg:mx-40 max-w-[calc(100vw-40px)]">
+    <h2 class="text-3xl lg:text-4xl mb-10 mt-40">Donate Fiat</h2>
+    <div
+      class="flex flex-col items-center justify-between gap-y-4 lg:gap-x-4 lg:flex-row lg:flex-wrap"
+    >
+      <div
+        id="donate-paypal"
+        class={`flex flex-row justify-between items-center h-full hover:ring ring-[#0070e0] bg-black rounded-md px-10 py-5 w-full lg:w-[calc(50%-20px)]`}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-10 h-10"
+          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
-              <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"/>
+              clip-path="none"
-              <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"/>
+              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>
+            <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>
+            <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"></path>
           </g>
         </svg>
-          <h3>PayPal</h3>
+        <h3 class="ml-4 w-full text-2xl">PayPal</h3>
-          <form action="https://www.paypal.com/donate" method="post" target="_top">
+        <form
-            <input type="hidden" name="hosted_button_id" value="LKDLTQQRQV2U8">
+          action="https://www.paypal.com/donate"
-            <button class="btn-main">Donate</a>
+          method="post"
+          target="_top"
+        >
+          <input type="hidden" name="hosted_button_id" value="LKDLTQQRQV2U8" />
+          <button
+            class="text-lg bg-[#0070e0] ring-[#0070e0] hover:ring text-white hover:bg-transparent transition-[background-color] duration-150 rounded-md p-3 px-5"
+          >
+            Donate
+          </button>
         </form>
       </div>
-      </div>
+      <div
-      <div id="donate-patreon">
+        id="donate-patreon"
-        <div>
+        class="flex flex-1 flex-row justify-between items-center hover:ring ring-[#ff424d] bg-black rounded-md px-10 py-5 w-full lg:w-[calc(50%-20px)]"
-          <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
+          version="1.1"
+          viewBox="0 -4.5 256 256"
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-14 h-14"
+        >
+          <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"></path>
         </svg>
-          <h3>Patreon</h3>
+        <h3 class="w-full ml-4 mr-[60px] text-2xl">Patreon</h3>
-          <a class="btn-main" href="https://www.patreon.com/bePatron?u=71702133">Become a Patron!</a>
+        <button
+          class="text-lg bg-[#ff424d] w-full ring-[#ff424d] hover:ring text-white hover:bg-transparent transition-[background-color] duration-150 rounded-md p-3"
+          ><a
+            href="https://www.patreon.com/bePatron?u=71702133"
+            class="block -m-3 py-3">Become a Patron!</a
+          >
+        </button>
       </div>
-      </div>
+      <div
-      <div id="donate-liberapay">
+        id="donate-liberapay"
-        <div>
+        class="flex flex-row justify-between items-center hover:ring ring-[#f6c915] bg-black rounded-md px-10 py-5 w-full lg:w-[calc(50%-20px)]"
-          <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
+      >
-            <rect fill="#f6c915" width="80" height="80" rx="8"/>
+        <svg
-            <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"/>
+          viewBox="0 0 80 80"
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-10 h-10"
+        >
+          <rect fill="#f6c915" width="80" height="80" rx="8"></rect>
+          <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"
+          ></path>
         </svg>
-          <h3>Liberapay</h3>
+        <h3 class="w-full text-2xl mx-4">Liberapay</h3>
-          <a class="btn-main" href="https://liberapay.com/lumeweb/donate">Donate</a>
+        <a
+          class="text-lg bg-[#f6c915] ring-[#f6c915] hover:ring text-black hover:text-white hover:bg-transparent transition-[background-color] duration-150 rounded-md p-3 px-5"
+          href="https://liberapay.com/lumeweb/donate">Donate</a
+        >
       </div>
-      </div>
+      <div
-      <div id="donate-github">
+        id="donate-github"
-        <div>
+        class="flex flex-row justify-between items-center hover:ring ring-white bg-black rounded-md px-10 py-5 w-full lg:w-[calc(50%+3px)]"
-          <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
+          viewBox="0 0 98 96"
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-10 h-10"
+        >
+          <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"></path>
         </svg>
-          <h3>GitHub Sponsors</h3>
+        <h3 class="w-full text-2xl mx-4">GitHub Sponsors</h3>
-          <a class="btn-main" href="https://github.com/sponsors/LumeWeb">Donate</a>
+        <button
+          class="text-lg bg-white ring-white hover:ring text-black hover:text-white hover:bg-transparent transition-[background-color] duration-150 rounded-md p-3"
+          ><a
+            href="https://github.com/sponsors/LumeWeb"
+            class="block -m-3 py-3 px-5">Donate</a
+          >
+        </button>
       </div>
     </div>
   </div>
-    <p>
+  <p class="text-lg italic font-body text-body mt-5 mx-10 md:mx-20 lg:mx-40">
-      **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.**
+    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>
-    <p>
+</section>
-      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>
+<dialog id="qr-dialog" class="backdrop:bg-black/20 backdrop:backdrop-blur-sm">
-  </div>
+</dialog>
-  <dialog id="qr-dialog"></dialog>
+<script is:inline>
-  <script is:inline>
+  var msgCallback,
-    var
-      msgCallback,
     msgTimeout,
-      qrDialog = document.getElementById('qr-dialog');
+    qrDialog = document.getElementById("qr-dialog");
 
   function copyToClipboard(element) {
-      var
+    var range = document.createRange(),
-        range = document.createRange(),
       selection = window.getSelection();
 
-      if(msgCallback) {
+    if (msgCallback) {
       clearTimeout(msgTimeout);
       msgCallback();
     }
@@ -118,33 +348,32 @@ await addCurrency('algorand', 'Algorand (ALGO)', '3QBE5TZ63TF5W7V2QRJWRB72M7INQL
     range.selectNode(element.nextElementSibling); // select address container
     selection.removeAllRanges(); // clear current selection
     selection.addRange(range); // select address
-      document.execCommand('copy');                 // copy
+    document.execCommand("copy"); // copy
     selection.removeAllRanges(); // deselect
 
-      element.classList.add('success');
+    element.classList.add("success");
 
-      msgCallback = function() {
+    msgCallback = function () {
-        element.classList.remove('success');
+      element.classList.remove("success");
       msgCallback = undefined;
-      }
+    };
 
     msgTimeout = window.setTimeout(msgCallback, 5000);
   }
 
   function openDialog(qrLarge) {
-      document.body.classList.add('scroll-lock');
+    document.body.classList.add("scroll-lock");
     qrDialog.innerHTML = '<img src="' + qrLarge + '"/>';
     qrDialog.showModal();
   }
 
-    qrDialog.addEventListener('close', function() {
+  qrDialog.addEventListener("close", function () {
-      document.body.classList.remove('scroll-lock');
+    document.body.classList.remove("scroll-lock");
   });
 
-    qrDialog.addEventListener('click', function(event) {
+  qrDialog.addEventListener("click", function (event) {
     if (event.target === this) {
       this.close();
     }
   });
-  </script>
+</script>
-</section>

src/components/Donate/Methods/Methods.scss

@@ -1,287 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#methods {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  margin: 2em 0 6em;
-  padding-top: 3em;
-  @include fluid-margin-lr;
-  font-family: $font-family-jaldi;
-
-  h2 {
-    margin-bottom: 1em;
-    @include fluid-font-size(2.8125rem);
-    line-height: 122%;
-  }
-
-  .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);
-    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/Why.astro

@@ -0,0 +1,33 @@
+---
+import Button from "../ui/Button.astro";
+import FeaturedGroup from "../ui/FeaturedGroup.astro";
+import backgroud from "/src/assets/why-bg-2.png";
+---
+
+<section
+  id="why"
+  class="flex flex-col overflow-hidden relative lg:flex-row mx-10 md:mx-20 lg:mx-40"
+>
+  <img
+    src={backgroud.src}
+    class="absolute xl:relative -z-10 min-w-[1000px] h-[750px] -mx-10 md:-mx-20 lg:-mx-40"
+  />
+  <div class="py-5 px-2 lg:px-0">
+    <FeaturedGroup
+      subtitle="Why should I donate to Lume?"
+      title="Help us break the pattern"
+      text={[
+        `<ul class="space-y-3 -mb-10 text-body font-body list-disc list-inside text-xl lg:text-2xl">
+        <li class="list-item">You believe the internet should be free and open for everyone, regardless of political beliefs.</li>
+        <li class="list-item">You want a neutral web accessible to everyday people.</li>
+        <li class="list-item">You believe your data should be private and secure unless you choose to share it.</li>
+        <li class="list-item">You want to ensure that you or someone else can’t be censored or “de-platformed.”</li>
+        <li class="list-item">You think people should have free access to information no matter how they choose to access it.</li>
+        <li class="list-item">You believe in handling web abuse using legal and social means instead of censorship and restriction.</li>
+        </ul>`,
+        `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.`,
+      ]}
+    />
+    <Button label="Donate" href="#methods" />
+  </div>
+</section>

src/components/Donate/Why/Why.astro

@@ -1,24 +0,0 @@
----
-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

@@ -1,51 +0,0 @@
-@import "/src/styles/mixins.scss";
-@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/donate-why-bg.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.65);
-    }
-
-    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.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/CTO/CTO.astro

@@ -1,21 +0,0 @@
----
-import './CTO.scss';
-import avatar from '/src/assets/cto-avatar.webp';
----
-
-<section id="cto">
-  <div class="feature-group">
-    <h2>Community-Powered</h2>
-    <h3>Building a new world for your data</h3>
-    <p>
-      Right now, Lume has only one full-time developer and limited helper staff! We need help from developers, fundraisers, funders, and contributors to bring the new internet to the masses.
-    </p>
-    <div class="bio">
-      <img src={avatar.src} />
-      <div>
-        <strong>Derrick Hammer</strong><br />
-        CTO
-      </div>
-    </div>
-  </div>
-</section>

src/components/Home/CTO/CTO.scss

@@ -1,66 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#cto {
-  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% - 95em) / 2));
-    width: calc(100% - 64em - 7.5%);
-    min-width: 95em;
-    background-image: url("/src/assets/geometric-bg.webp");
-    background-position: 50% 100%;
-    background-repeat: no-repeat;
-    background-size: contain;
-    z-index: -1;
-  }
-
-  .feature-group {
-    box-sizing: content-box;
-    margin: 6em 7.5%;
-    max-width: 64em;
-  }
-
-  .bio {
-    display: inline-flex;
-    align-items: center;
-    margin-top: 1.5em;
-    gap: 1.2em;
-    font-family: $font-family-jaldi;
-    color: $color-cloud;
-    @include fluid-font-size(1.5rem);
-
-    img {
-        @include fluid-width-height(5.875rem, 5.875rem);
-    }
-
-    strong {
-        @include fluid-font-size(1.625rem);
-        line-height: 133%;
-        color: $color-white;
-    }
-  }
-
-  @media screen and (max-width: 80rem) {
-    p, .bio div {
-      background: rgba($color-blue-charcoal-2, 0.65);
-      border-radius: 0 0.5em 0.5em 0;
-      padding: 0.3em 0.5em;
-      margin: -0.3em -0.5em;
-    }
-
-    .bio {
-      margin-top: 1.27em;
-    }
-  }
-}

src/components/Home/Grid/Grid.astro

@@ -1,30 +0,0 @@
----
-import './Grid.scss';
----
-
-<section id="grid" class="feature-grid">
-  <div>
-    <h3>Web3 Universal Storage</h3>
-    <p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
-  </div>
-  <div>
-    <h3>Web3 Gateway</h3>
-    <p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
-  </div>
-  <div>
-    <h3>Build Your Site, Censorship Free</h3>
-    <p>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</p>
-  </div>
-  <div>
-    <h3>Web3 Universal Storage</h3>
-    <p>Get access to a universal network drive, powered by the Web3/dWeb cloud. Enjoy portability to any device or platform you wish.</p>
-  </div>
-  <div>
-    <h3>Web3 Gateway</h3>
-    <p>Install the Lume Web3 Extension and have a 1-click gateway into the Web3 internet on Opera, Vivaldi, Edge and Firefox.</p>
-  </div>
-  <div>
-    <h3>Build Your Site, Censorship Free</h3>
-    <p>Combining Lume and Skynet technologies, you can build a website just like you are on the Web2 internet.</p>
-  </div>
-</section>

src/components/Home/Grid/Grid.scss

@@ -1,3 +0,0 @@
-#grid {
-  padding-top: 5.5em;
-}

src/components/Home/Meme.astro

@@ -0,0 +1,34 @@
+---
+import web3myth from "/src/assets/web3-myth.png";
+---
+
+<section id="meme" class="tilted-bgs">
+  <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 Web3 Myth: Embracing True Openness</h2>
+        <h3 class="font-display text-4xl md:text-6xl font-bold">
+          Time to Walk the Talk
+      </h3>
+      <p class="font-body text-xl md:text-3xl text-body">
+
+          Let's have a heart-to-heart about Web3. There's a myth that needs to be cleared up. Some folks claim it's all about being wide open, but the reality is a bit more nuanced.
+      </p>
+        <p class="font-body text-xl md:text-3xl text-body">
+           Not every Web3 service walks the talk. Censorship can actually find its way into blockchains too. It's a surprising twist, but it's something we need to fix.</p>
+      <p class="font-body text-xl md:text-3xl text-body">
+          But hold up – we're not here to point fingers. We're here to set things straight. It's about acknowledging the facts and rolling up our sleeves. Together, we're pushing for actual openness and the kind of decentralization that counts. It's not about fancy words; it's about action.
+      </p>
+        <p class="font-body text-xl md:text-3xl text-body">
+            So, let's dive in and make Web3 what it's meant to be – no myths, just reality. Join us – it's time to turn talk into a true, open web for all.
+        </p>
+    </div>
+    <img
+      src={web3myth.src}
+      class="w-[500px] xl:w-[650px] max-h-[550px] self-center"
+      alt="Web 1"
+      style="padding-bottom: 3em"
+    />
+  </div>
+</section>

src/components/Home/Meme/Meme.astro

@@ -1,74 +0,0 @@
----
-import './Meme.scss';
-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';
----
-
-<section id="meme" class="tilted-bg">
-  <div class="feature-group">
-    <h2>
-      What is the Web?
-    </h2>
-    <h3>
-      Why Web3 matters
-    </h3>
-    <p>
-      Web3 gives people control over their data, privacy, and ownership. Lume's affordable Web3 tech aims to speed up the transition from Web2 to Web3, which matters for privacy and security.
-    </p>
-    <div>
-      <a href="#" class="btn-main">Learn More</a>
-    </div>
-  </div>
-  <div class="meme-items">
-    <div class="meme-item">
-      <div>
-        <img src={meme1.src} alt="Web 1" />
-        <h2>Web1</h2>
-      </div>
-      <p>
-        Right now, Lume has only one full-time developer and limited
-        helper staff! We need help from developers, fundraisers,
-        funders, and contributors to bring the new internet to the
-        masses.
-      </p>
-    </div>
-    <div class="meme-item">
-      <div>
-        <img src={meme2.src} />
-        <h2>Web2</h2>
-      </div>
-      <p>
-        Right now, Lume has only one full-time developer and limited
-        helper staff! We need help from developers, fundraisers,
-        funders, and contributors to bring the new internet to the
-        masses.
-      </p>
-    </div>
-    <div class="meme-item">
-      <div>
-        <img src={meme3.src} />
-        <h2>Crypto &amp; Defi</h2>
-      </div>
-      <p>
-        Right now, Lume has only one full-time developer and limited
-        helper staff! We need help from developers, fundraisers,
-        funders, and contributors to bring the new internet to the
-        masses.
-      </p>
-    </div>
-    <div class="meme-item">
-      <div>
-        <img src={meme4.src} />
-        <h2>Web3</h2>
-      </div>
-      <p>
-        Right now, Lume has only one full-time developer and limited
-        helper staff! We need help from developers, fundraisers,
-        funders, and contributors to bring the new internet to the
-        masses.
-      </p>
-    </div>
-  </div>
-</section>

src/components/Home/Meme/Meme.scss

@@ -1,96 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#meme {
-  display: flex;
-  align-items: center;
-  @include fluid-padding-lr;
-  padding-top: 12em;
-  padding-bottom: 12em;
-  gap: 10em;
-
-  .feature-group {
-    max-width: 64em;
-  }
-
-  .meme-items {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 1.5em;
-  }
-
-  .meme-item {
-    display: flex;
-    align-items: center;
-    gap: 2em;
-
-    div {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      gap: 2em;
-    }
-
-    img {
-      @include fluid-width(13.125rem);
-    }
-
-    h2 {
-      width: 8.6em;
-      @include fluid-font-size(1.5625rem);
-      font-weight: 700;
-      text-align: center;
-      color: $color-aquamarine;
-      text-transform: uppercase;
-    }
-
-    p {
-      font-family: $font-family-jaldi;
-      @include fluid-font-size(1.3125rem);
-      line-height: 123.81%;
-      color: $color-cloud;
-    }
-  }
-
-  @media screen and (max-width: 80rem) {
-    flex-direction: column;
-    gap: 5em;
-
-    .feature-group {
-      max-width: none;
-      margin: 2em 0;
-    }
-  }
-
-  @media screen and (max-width: 56rem) {
-    .feature-group {
-      max-width: 64em;
-    }
-
-    .meme-items {
-      gap: 3em;
-    }
-
-    .meme-item {
-      flex-direction: column;
-      max-width: 64em;
-
-      p {
-        text-align: center;
-      }
-
-      img {
-        @include fluid-width(11.25rem);
-      }
-    }
-  }
-
-  @media screen and (min-width: 80.000001rem) and (max-width: 100rem) {
-    .meme-item {
-      h2 {
-        width: 4.5em;
-      }
-    }
-  }
-}

src/components/Home/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/Message/Message.astro

@@ -1,12 +0,0 @@
----
-import './Message.scss';
----
-
-<section id="message">
-  <h2>
-    A message from Derrick
-  </h2>
-  <p>
-    Web3 gives people control over their data, privacy, and ownership. Lume's affordable Web3 tech aims to speed up the transition from Web2 to Web3, which matters for privacy and security.
-  </p>
-</section>

src/components/Home/Message/Message.scss

@@ -1,28 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#message {
-  padding: 5em 0;
-  @include fluid-padding-lr;
-  background: $color-aquamarine;
-  color: $color-blue-charcoal-2;
-
-  @media screen and (max-width: 47.99999rem) {
-    text-align: center;
-  }
-
-  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: 137%;
-  }
-}

src/components/Home/PoweredBy.astro

@@ -0,0 +1,39 @@
+---
+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"
+  class="flex flex-col md:flex-row gap-16 items-center justify-center"
+>
+  <h2
+    class="font-display text-xl md:text-3xl text-primary uppercase font-bold mr-5"
+  >
+    Powered By
+  </h2>
+  <div class="flex flex-row items-center gap-x-10">
+    <a
+      href="https://sia.tech"
+      title="Sia"
+      class="w-28 h-28 text-gray-300 hover:text-white transition-all ease-in"
+    >
+      <Fragment set:html={svgSia} />
+    </a>
+    <a
+      href="https://handshake.org"
+      title="Handshake"
+      class="w-20 h-20 -mt-4 text-gray-300 hover:text-white transition-all ease-in"
+    >
+      <Fragment set:html={svgHns} />
+    </a>
+    <a
+      href="https://opensource.org/osd/"
+      title="Open Source Initiative"
+      class="w-20 h-20 -mt-6 text-gray-300 hover:text-white transition-all ease-in"
+    >
+      <Fragment set:html={svgOsi} />
+    </a>
+  </div>
+</section>

src/components/Home/PoweredBy/PoweredBy.astro

@@ -1,49 +0,0 @@
----
-import './PoweredBy.scss';
----
-
-<section id="powered-by">
-  <h2>Powered By</h2>
-  <div>
-    <a href="https://sia.tech" title="Sia" class="sia-logo">
-      <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>
-    </a>
-    <a href="https://handshake.org" title="Handshake" class="hns-logo">
-      <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>
-    </a>
-    <a href="https://opensource.org/osd/" title="Open Source Initiative" class="osi-logo">
-      <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>
-    </a>
-  </div>
-</section>

src/components/Home/PoweredBy/PoweredBy.scss

@@ -1,54 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#powered-by {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4em;
-  margin: 12em 0;
-
-  @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.astro

@@ -0,0 +1,42 @@
+---
+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" class="flex flex-col items-center">
+  <h2 class="text-xl md:text-3xl font-display text-primary uppercase font-bold">
+    Get in touch
+  </h2>
+  <div class="flex flex-row items-center justify-center gap-8 mt-10">
+    <a
+      href="https://git.lumeweb.com"
+      title="Git"
+      class="w-10 h-10 -mt-1 text-gray-300 hover:text-primary transition-all ease-in"
+    >
+      <Fragment set:html={svgGit} />
+    </a>
+    <a
+      href="https://github.com/LumeWeb"
+      title="GitHub"
+      class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
+    >
+      <Fragment set:html={svgGithub} />
+    </a>
+    <a
+      href="https://discord.gg/qpC8ADp3rS"
+      title="Discord"
+      class="w-10 h-10 mt-3 text-gray-300 hover:text-primary transition-all ease-in"
+    >
+      <Fragment set:html={svgDiscord} />
+    </a>
+    <a
+      href="https://twitter.com/lumeweb3"
+      title="Twitter"
+      class="w-10 h-10 text-gray-300 hover:text-primary transition-all ease-in"
+    >
+      <Fragment set:html={svgTwitter} />
+    </a>
+  </div>
+</section>

src/components/Home/Socials/Socials.astro

@@ -1,30 +0,0 @@
----
-import './Socials.scss';
----
-
-<section id="socials">
-  <h2>Get in touch</h2>
-  <div>
-    <a href="#" title="GitHub" class="github-logo">
-      <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>
-    </a>
-    <a href="#" title="Discord" class="discord-logo">
-      <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>
-    </a>
-    <a href="#" title="Twitter" class="twitter-logo">
-      <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>
-    </a>
-    <a href="#" title="Facebook" class="facebook-logo">
-      <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-        <path fill="currentcolor" d="M16.7 39.8C7.2 38.1 0 29.9 0 20 0 9 9 0 20 0s20 9 20 20c0 9.9-7.2 18.1-16.7 19.8l-1.1-.9h-4.4l-1.1.9z"/>
-        <path fill="#031418" d="m27.8 25.6.9-5.6h-5.3v-3.9c0-1.6.6-2.8 3-2.8H29V8.2c-1.4-.2-3-.4-4.4-.4-4.6 0-7.8 2.8-7.8 7.8V20h-5v5.6h5v14.1c1.1.2 2.2.3 3.3.3 1.1 0 2.2-.1 3.3-.3V25.6h4.4z"/>
-      </svg>
-    </a>
-  </div>
-</section>

src/components/Home/Socials/Socials.scss

@@ -1,50 +0,0 @@
-@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 0 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);
-  }
-
-  .discord-logo svg {
-    @include fluid-width(3.5rem);
-  }
-
-  .twitter-logo svg {
-    @include fluid-width(3.5rem);
-  }
-
-  .facebook-logo svg {
-    @include fluid-width(3.5rem);
-  }
-}

src/components/Home/Typewriter/Typewriter.astro

@@ -1,10 +1,14 @@
 ---
-import './Typewriter.scss';
+import TypewriterContent from "./TypewriterContent.jsx";
-import TypewriterContent from './TypewriterContent.jsx';
 ---
 
-<section id="typewriter">
+<section
-  <h1>
+  id="typewriter"
+  class="w-full flex flex-row items-center justify-center"
+>
+  <h1
+    class="text-6xl md:text-9xl mb-10 min-h-[375px] px-10 text-center break-words"
+  >
     <TypewriterContent client:load />
   </h1>
 </section>

src/components/Home/Typewriter/Typewriter.scss

@@ -1,24 +0,0 @@
-@import "/src/styles/mixins.scss";
-@import "/src/styles/vars.scss";
-
-#typewriter {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 7.5%;
-
-  h1 {
-    display: flex;
-    align-items: center;
-    min-height: 2.2em;
-    margin: max(1.1em, 5rem) 0 max(0.9em, 7rem);
-    @include fluid-font-size-xs(6.25rem);
-    line-height: 110%;
-    letter-spacing: -0.06em;
-    text-align: center;
-  }
-
-  .highlight {
-    color: $color-aquamarine;
-  }
-}

src/components/Home/Typewriter/TypewriterContent.jsx

@@ -4,7 +4,7 @@ const HeaderContent = () => {
   var
     headerStrings = [
       'Access to the web <br /> for the masses',
-      'An open web for business',
+      'An open web <br /> for business',
       'Web3 for the masses',
       'Web3 for you'
     ],
@@ -12,14 +12,14 @@ const HeaderContent = () => {
     words = randomString.split(' ');
 
   return (
-    <Typewriter options={{ cursor: '<span class="highlight">_</span>' }} onInit={ (typewriter) => {
+    <Typewriter options={{ cursor: '<span class="text-primary">_</span>' }} onInit={(typewriter) => {
       typewriter
         .changeDelay(50)
         .typeString(randomString.substring(0, randomString.lastIndexOf(' ')) + ' ')
         .start();
       typewriter
-        .typeString('<span class="highlight">' + words[words.length - 1] + '</span>')
+        .typeString('<span class="text-primary">' + words[words.length - 1] + '</span>')
-    } }/>
+    }} />
   );
 };
 

src/components/Home/Vision.astro

@@ -0,0 +1,31 @@
+<section id="vision" class="bg-black/40 p-5 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>
+    <p class="font-body text-xl md:text-3xl text-body">
+        Join us in shaping tomorrow's digital world. Unite with Web3 and lets connect.
+    </p>
+    <p class="font-body text-xl md:text-3xl text-body italic">
+        We are actively building, so if you want to understand the problems we are solving and are asking "What is
+        Lume?" ...
+    </p>
+    <div class="pt-10 w-full">
+        <a
+            href="https://docs.lumeweb.com"
+            class="text-2xl w-full block text-center md:max-w-[350px] rounded-md bg-primary py-3 px-10 text-black font-body"
+        >View our Docs</a
+        >
+    </div>
+</section>

src/components/Home/Vision/Vision.astro

@@ -1,16 +0,0 @@
----
-import './Vision.scss';
----
-
-<section id="vision">
-  <div class="feature-group">
-    <h2>Our Vision</h2>
-    <h3>Make Web3 easy for everyone</h3>
-    <p>
-      Web3 offers freedom of speech, data sovereignty, and privacy. We simplify Web3 by bridging the gap between the two webs, enabling easy usage without censorship or backdoors.
-    </p>
-    <div>
-      <a href="#" class="btn-main">Download Extension</a>
-    </div>
-  </div>
-</section>