Release landing page (#1464)

* start

* not for this branch lol

* fix dates

* fix spacing

* revert mistake

* progress

* blog

* improve wording

* more blog

* more blog moment

* moreee blog

* cant spell can i

* bloggggg

* change name

* some rambling

* sentence meowment

* merge

* prep

* perfect app ui template for landing

* updated landing image

* fix border

* section

* fix query param handling

* remove apps/snapshot

* remove `WindowControls`

* Playwright in setup script

* `showControls` in a store

* better screenshot + fixed stars with fadeout

* fix show controls store mistake

* begin bento boxes

* bento box stuff

* taggrid

* release blog post: clarifying punctuation & rearrange some sentences (#1097)

* landing page wip

* Update index.tsx

* tweak

* Update pnpm-lock.yaml

* Update app.webp

* better app image + line animation wip

* wip

* tweak + image

* tweaks + 60 fps ball

* 60 fps platforms anim

* landing updates

* static globe

* tweaks

* device detect and dynamic imports

* Accessibility and minor performance improvements from Lh report.

* Update globe.webp

* Improve randomness of line animation, better cloud image

* isMobile vid support

* Update index.tsx

* new art

* docs

* docs

* Improvements and feedback

* Update index.tsx

* improvements

* quick art tweak

* updated art

* increase size

* SVG animation

* animations

* convert platforms to arr and framer motion

* new section - wip preview

* remove border app animation - more animation work

* mobile tweaks

* tweak

* duration adjustment

* animation improvements

* different floating times for other circles

* Pricing page

* tweak

* optimize images, accessibility values, svg attribute cleanup

* launch prep

* fix blog link

* adding location docs

* hover effect

* fixes to layout

* Update index.tsx

* another show controls method

* use PageLayoutContext in other file

* merge

* desktop release download api

* update publishing api

* hook up desktop releases api to landing page

* screenshot stuff

* Delete .github/scripts/setup-system.sh

* Update october-alpha-release.mdx

* rotating screenshots, fixed blog and apple download chooser

---------

Co-authored-by: Utku Bakir <74243531+utkubakir@users.noreply.github.com>
Co-authored-by: Oscar Beaumont <oscar@otbeaumont.me>
Co-authored-by: pr <pineapplerind.info@gmail.com>
Co-authored-by: ameer2468 <33054370+ameer2468@users.noreply.github.com>
Co-authored-by: Brendan Allan <brendonovich@outlook.com>

.cspell/project_words.txt

@@ -4,6 +4,7 @@ alluxio
 augusto
 automount
 benja
+Bento
 brendonovich
 chacha
 codegen

apps/landing/package.json

@@ -22,17 +22,21 @@
 		"@vercel/edge-config": "^0.1.11",
 		"autoprefixer": "^10.4.14",
 		"clsx": "^1.2.1",
-		"contentlayer": "^0.3.4",
+		"contentlayer": "^0.3.2",
+		"dayjs": "^1.11.8",
 		"drizzle-orm": "^0.26.0",
+		"framer-motion": "^10.11.5",
 		"markdown-to-jsx": "^7.2.0",
 		"md5": "^2.3.0",
 		"next": "13.4.3",
 		"next-contentlayer": "^0.3.4",
 		"react": "18.2.0",
 		"react-burger-menu": "^3.0.9",
+		"react-device-detect": "^2.2.3",
 		"react-dom": "^18.2.0",
-		"react-hook-form": "~7.45.2",
-		"react-tsparticles": "^2.10.1",
+		"react-github-btn": "^1.4.0",
+		"react-hook-form": "^7.43.9",
+		"react-tsparticles": "^2.9.3",
 		"reading-time": "^1.5.0",
 		"rehype-autolink-headings": "^6.1.1",
 		"rehype-external-links": "^2.1.0",
@@ -42,7 +46,8 @@
 		"remark-gfm": "^3.0.1",
 		"remark-math": "^5.1.1",
 		"sharp": "^0.32.1",
-		"three": "^0.154",
+		"tailwind-merge": "^1.14.0",
+		"three": "^0.153.0",
 		"tsparticles": "^2.9.3",
 		"uuid": "^9.0.0",
 		"zod": "~3.22.2"

apps/landing/posts/october-alpha-release.mdx

@@ -0,0 +1,103 @@
+---
+author: Jamie Pine
+title: October '23 Alpha Release
+tags: [News, Updates, Release]
+date: 2023-10-06
+image: images/october-23-alpha-release.png
+imageAlt: Spacedrive UI snapshot alongside logo
+---
+
+Last year, we introduced Spacedrive to the world by open-sourcing the codebase on GitHub. The reception was nothing short of phenomenal, allowing us to secure $2m in venture funding. As of today, our dedicated remote team of nine continues to grow, celebrated by almost 20,000 stars on the repository. It's with immense anticipation and excitement that we present to you the public alpha of Spacedrive.
+
+Spacedrive reimagines the traditional file explorer. Its modern interface design, cross-platform framework, and constantly expanding toolkit offer a seamless file management experience.
+
+For this alpha release, downloads are available for [macOS](), [Windows](), and [Linux](). We're aware that there are some bugs and important features yet to be incorporated such as device connectivity, multi-select, and cloud support. Despite that, there is still at lot to explore today.
+
+You start by adding local folders, network locations, and external drives into your data library. Spacedrive will keep its database in sync with the underlying file system, extracting metadata, uniquely identifying files, and generating thumbnails. This allows you to organise and search your library even when the storage locations go offline. A job manager lets you track the progress for each phase of indexing, copy/paste, encryption, media encoding, and more.
+
+For a comprehensive overview of the features included in this release, check out our [changelog](). Your participation in this alpha release will help shape the future of Spacedrive, and we can't wait for you to try it.
+
+Let's take a look at what you can do with Spacedrive today...
+
+## The Explorer
+
+The primary interface in the Spacedrive app is the Explorer—designed as a familiar interface, it is the heart of the app. From here you can explore storage locations and devices in your network. It features 4 views: Icons, List, Columns, and Media. All sidebar buttons open some variation of the Explorer.
+
+![Spacedrive Explorer](/images/explorer.png)
+
+In an upcoming release, system locations such as "Desktop", "Documents", "Downloads", "Music", etc. will be automatically added to the Explorer with indexing disabled by default. For now, you can add them manually by clicking the `Add location` button in the sidebar.
+
+## Tagging
+
+Tags are core to Spacedrive's design. Unlike folders, tags work great even when you're using many devices or storing files in different places. With tags, you can sort files easily, and even set up automatic backups, encryption, and more.
+
+We've also introduced a "tag assign mode". This handy feature lets you add tags to your files in any view. Just select your files, then click the tag you want in the bar at the bottom.¹
+
+Tags are assigned uniquely to files, so every copy of that file across your library will have the same tags. This is achieved by our content-addressable storage system, which identifies files by their content, not their location.
+
+## Albums
+
+Spacedrive will be the ultimate photo and video manager. Our personal photo libraries and camera-roll are some of the most important data we own. We've designed Albums to be the best way to manage your media, from family photos to video collaboration.²
+
+## Quick Preview
+
+Quick preview is our macOS-like way of viewing files from within Spacedrive. We plan to support many more file types than we do currently, but for now you can preview images, videos, audio, and PDFs.
+
+In a future release we will have multi-window support, which will allow you to optionally open Quick Preview as its own window. This extends to other parts of the app, such as the Job Manager, and enables multiple windows for the app itself.
+
+## File identification
+
+Spacedrive is able to understand over 250 common file types from all operating systems, and differentiate conflicting extensions by reading [magic bytes](). All files are categorized by our [Object]() kind classification. Code files never show up as video files, and all media will have thumbnails and previews. As we evolve, few file types should be unrecognizable by Spacedrive.
+
+## Search
+
+Today you can search for files by keyword across your library instantly. Our database-powered filesystem makes for a fast and responsive search experience. In the future we will add more advanced search features such as an array of filters, and boolean operators.
+
+## Multi-platform support
+
+We've designed Spacedrive with cross-platform support in mind from the start. Aside from the downloads for macOS, Windows and Linux, Spacedrive's core can be run via Docker, allowing you to easily self host a node on a web server or NAS, and control it with the same interface as the app, but in the browser through your network.
+
+We've also built a mobile app for iOS and Android, which will be available in the coming weeks. Select users will have access sooner via TestFlight and Google Play Beta.
+
+## Our cloud service
+
+At its heart, Spacedrive will always be open source and free. However, we do offer optional paid services to boost your experience. For instance, with a subscription to our cloud service, you get encrypted database and preview media backup, file transfer options, ample storage, and backup plans. These are perfect for individuals, teams, and businesses looking for better collaboration.³
+
+Connections between devices in your network are always peer-to-peer, and never go through our servers. We do not have access to your data, and we never will. Our cloud service is completely optional, and you can use Spacedrive without it.
+
+## Upcoming features
+
+- Cloud support (Dropbox, Google Drive, Mega, etc.)
+- Multi-select, drag and drop, and selection history
+- Multi-device connectivity with peer-to-peer sync
+- Spacedrop (AirDrop like experience with end-to-end encrypted internet transfer)
+- Location backup and sync between devices and clouds
+- File sharing via Spaces
+- File versioning
+- Encryption key manager
+- File encryption and encrypted containers
+- Extensions
+- Custom themes
+- Tabs and dual-pane view
+- More supported file types for Quick Preview and thumbnails
+- Machine learning for face detection, video transcription, automatic labeling and more
+
+_...and much more!_
+
+## Underlying technology
+
+Reinventing the file explorer is a tremendous task. From OS compatibility to synchronizing a highly scalable distributed database running on-device, we've tackled the most challenging engineering problems and developed entirely new technologies to realize the Spacedrive vision. Our tech stack has never been done before, yet is working beyond expectation—from developer experience to runtime performance.
+
+Our unique implementation of a VDFS (Virtual Distributed File System) has been a key enabler for Spacedrive. It allows us to abstract away the underlying file system, and provide a unified interface for all storage locations. Utilizing content addressable storage, we can provide an unprecidented view of your data across so many platforms. We've employed techniques such as constant time hashing, a novel indexing strategy to ensure that Spacedrive is fast and responsive, even with millions of files.⁴
+
+[Prisma Client Rust](), [rspc]() and [Specta]() are all libraries developed by members of our team initially for Spacedrive, but are now growing into their own communities, with Prisma officially sponsoring PCR and working closely with Tauri to improve the developer experience.
+
+## Notes:
+
+_¹ This feature is not functional until the next minor release, in the following few days._
+
+_² Collaboration and more advanced photo management features are planned for a future release._
+
+³ Our cloud service is not yet available, but will be in the coming weeks.\_
+
+_⁴ Our constant time hashing strategy generates what we call a `cas_id`. It is used to assign file paths to a unique Object. We generate this identifier using fixed size samples at specific points in the file's contents, along with the total size. This gives us high certainty that a given file is unique at the same speed regardless of file size. However, for sensitive operations, we generate a full `integrity_hash` which is hashed from the entire file contents. This is used for encryption, file sync, overwrite protection, and other operations where we need to be sure that the file has not been tampered with._

apps/landing/public/images/cloudart.svg

@@ -0,0 +1,42 @@
+<svg width="971" height="249" viewBox="0 0 971 249" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 146.095H74.6846M74.6846 146.095V248H187.161V161.425H249.699M74.6846 146.095H119.675V20.7418H226M249.699 161.425H312.236H347V138M249.699 161.425V129.411M387.82 97.3964V74.5M387.82 97.3964H347M387.82 97.3964V112.5H449.5M516.494 112.5V168.64H625.821M516.494 112.5H449.5M516.494 112.5V94.5H456V74.5M746.846 0V37.8764H638.868V52.3055M625.821 168.64H735.148V115.433H638.868V83.8691M625.821 168.64V205.615H810.733V146.095H970V79.36H896.215L869.221 52.3055H782V83.8691H638.868M625.821 168.64V135H555.5V103M638.868 52.3055H599V20.7418H501V41.3709M638.868 52.3055V83.8691M501 41.3709V62H555.5V103M501 41.3709H456V74.5M456 74.5H387.82M387.82 74.5V44.1891H339M638.868 83.8691H593.5V103H555.5M249.699 129.411V97.3964H298.349M249.699 129.411H183V79.36H226V20.7418M226 20.7418H278.943V44.1891H339M347 97.3964H298.349M347 97.3964V138M298.349 97.3964V70H339V44.1891M449.5 112.5V138H347" stroke="url(#paint0_linear_630_169)"/>
+<path d="M391.5 74.5H456V41.3333H478.5L501 41.3333V62H555.5V103H593.5V84H635.5" stroke="url(#paint1_linear_630_169)"/>
+<g filter="url(#filter0_d_630_169)">
+<path d="M392 74C392 76.2091 390.209 78 388 78C385.791 78 384 76.2091 384 74C384 71.7909 385.791 70 388 70C390.209 70 392 71.7909 392 74Z" fill="#376FA9"/>
+</g>
+<g filter="url(#filter1_d_630_169)">
+<circle cx="639" cy="84" r="4" fill="#376FA9"/>
+</g>
+<defs>
+<filter id="filter0_d_630_169" x="372" y="58" width="32" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.231373 0 0 0 0 0.443137 0 0 0 0 0.67451 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_630_169"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_630_169" result="shape"/>
+</filter>
+<filter id="filter1_d_630_169" x="623" y="68" width="32" height="32" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="6"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.235294 0 0 0 0 0.458824 0 0 0 0 0.698039 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_630_169"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_630_169" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_630_169" x1="49" y1="80.9999" x2="769.061" y2="0.547463" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343259" stop-opacity="0"/>
+<stop offset="0.593922" stop-color="#25273E"/>
+<stop offset="1" stop-color="#343259" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint1_linear_630_169" x1="633.5" y1="83.5" x2="388.5" y2="74" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4AA8FF" stop-opacity="0"/>
+<stop offset="0.552083" stop-color="#4AA8FF"/>
+<stop offset="1" stop-color="#4AA8FF" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

apps/landing/public/images/dropbox.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="43px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43 40" version="1.1" height="40px">
+ <path d="m12.5 0l-12.5 8.1 8.7 7 12.5-7.8-8.7-7.3zm-12.5 21.9l12.5 8.2 8.7-7.3-12.5-7.7-8.7 6.8zm21.2 0.9l8.8 7.3 12.4-8.1-8.6-6.9-12.6 7.7zm21.2-14.7l-12.4-8.1-8.8 7.3 12.6 7.8 8.6-7zm-21.1 16.3l-8.8 7.3-3.7-2.5v2.8l12.5 7.5 12.5-7.5v-2.8l-3.8 2.5-8.7-7.3z" fill="#007EE5"/>
+</svg>

apps/landing/public/images/google-drive.svg

@@ -0,0 +1,15 @@
+<svg width="51" height="44" viewBox="0 0 51 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_228_4903)">
+<path d="M4.17817 37.9525L6.39384 41.7225C6.85424 42.5161 7.51607 43.1397 8.29299 43.5933L16.2061 30.1008H0.379883C0.379883 30.9795 0.610082 31.8582 1.07048 32.6519L4.17817 37.9525Z" fill="#0066DA"/>
+<path d="M25.5004 14.2273L17.5873 0.734863C16.8104 1.18839 16.1485 1.81199 15.6881 2.60566L1.07048 27.5497C0.61855 28.3262 0.380485 29.2056 0.379883 30.1008H16.2061L25.5004 14.2273Z" fill="#00AC47"/>
+<path d="M42.7082 43.5933C43.4851 43.1397 44.1469 42.5161 44.6073 41.7225L45.5281 40.1635L49.9307 32.6519C50.3911 31.8582 50.6213 30.9795 50.6213 30.1008H34.7939L38.1618 36.6203L42.7082 43.5933Z" fill="#EA4335"/>
+<path d="M25.5 14.2274L33.4131 0.734978C32.6362 0.281451 31.7442 0.0546875 30.8234 0.0546875H20.1767C19.2559 0.0546875 18.3638 0.309797 17.5869 0.734978L25.5 14.2274Z" fill="#00832D"/>
+<path d="M34.7947 30.1008H16.2061L8.29297 43.5933C9.06989 44.0468 9.96191 44.2736 10.8827 44.2736H40.118C41.0388 44.2736 41.9309 44.0184 42.7078 43.5933L34.7947 30.1008Z" fill="#2684FC"/>
+<path d="M42.6211 15.0779L35.3123 2.60591C34.8519 1.81223 34.19 1.18863 33.4131 0.735107L25.5 14.2275L34.7943 30.101H50.5917C50.5917 29.2223 50.3615 28.3436 49.9011 27.5499L42.6211 15.0779Z" fill="#FFBA00"/>
+</g>
+<defs>
+<clipPath id="clip0_228_4903">
+<rect width="51" height="44" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/landing/public/images/icloud.svg

@@ -0,0 +1,14 @@
+<svg width="67" height="44" viewBox="0 0 67 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_228_4899)">
+<path d="M38.4113 0.625494C35.2125 0.63192 32.073 1.48477 29.3153 3.09647C26.5576 4.70817 24.281 7.02063 22.7193 9.79638C21.3752 9.14555 19.9 8.80633 18.4049 8.80424C16.0616 8.81037 13.7967 9.64391 12.014 11.1562C10.2314 12.6685 9.04703 14.7612 8.67213 17.0612C6.19685 18.0917 4.0831 19.8266 2.59644 22.0478C1.10979 24.2691 0.316553 26.8777 0.316406 29.5459C0.319898 33.1346 1.75664 36.5752 4.31074 39.111C6.86485 41.6468 10.3272 43.0703 13.9367 43.0686C14.5079 43.0634 15.0782 43.0226 15.6442 42.9462H53.4891C53.6879 42.9604 53.8869 42.97 54.0861 42.9749C54.276 42.9696 54.4656 42.96 54.655 42.9462H55.5613V42.8792C58.6427 42.5169 61.4839 41.0377 63.5464 38.7221C65.6089 36.4066 66.7493 33.4155 66.7515 30.3159V30.2916C66.7443 27.3479 65.7104 24.4987 63.8277 22.2342C61.945 19.9697 59.3311 18.4315 56.4359 17.8842C56.2639 13.2467 54.2892 8.85643 50.9273 5.63739C47.5654 2.41835 43.0786 0.62166 38.4113 0.625494Z" fill="url(#paint0_linear_228_4899)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_228_4899" x1="66.9532" y1="30.3503" x2="0.292015" y2="29.4255" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3E82F4"/>
+<stop offset="1" stop-color="#93DCF7"/>
+</linearGradient>
+<clipPath id="clip0_228_4899">
+<rect width="67" height="43.3008" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/landing/public/images/icons/application.svg

@@ -0,0 +1,84 @@
+<svg width="384" height="384" viewBox="0 0 384 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_999_4371)">
+<g filter="url(#filter1_ii_999_4371)">
+<path d="M336 88C336 65.92 318.08 48 296 48H88C65.92 48 48 65.92 48 88V296C48 318.08 65.92 336 88 336H296C318.08 336 336 318.08 336 296V88Z" fill="#2B2D40"/>
+<path d="M296 51C316.423 51 333 67.5769 333 88V296C333 316.423 316.423 333 296 333H88C67.5769 333 51 316.423 51 296V88C51 67.5769 67.5769 51 88 51H296Z" stroke="url(#paint0_linear_999_4371)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M296 49.5C317.252 49.5 334.5 66.7484 334.5 88V296C334.5 317.252 317.252 334.5 296 334.5H88C66.7484 334.5 49.5 317.252 49.5 296V88C49.5 66.7484 66.7484 49.5 88 49.5H296Z" stroke="url(#paint1_linear_999_4371)" stroke-width="3"/>
+<path d="M296 49.5C317.252 49.5 334.5 66.7484 334.5 88V296C334.5 317.252 317.252 334.5 296 334.5H88C66.7484 334.5 49.5 317.252 49.5 296V88C49.5 66.7484 66.7484 49.5 88 49.5H296Z" stroke="url(#paint2_linear_999_4371)" stroke-width="3"/>
+<g filter="url(#filter2_d_999_4371)">
+<path d="M312 144C312 135.2 304.8 128 296 128H88C79.2 128 72 135.2 72 144V296C72 304.8 79.2 312 88 312H296C304.8 312 312 304.8 312 296V144Z" fill="url(#paint3_linear_999_4371)"/>
+<path d="M312 144C312 135.2 304.8 128 296 128H88C79.2 128 72 135.2 72 144V296C72 304.8 79.2 312 88 312H296C304.8 312 312 304.8 312 296V144Z" fill="url(#paint4_linear_999_4371)"/>
+</g>
+<path d="M253.493 223.345L253.475 223.376L253.458 223.409C252.963 224.4 252.123 225.271 251.033 226.07L251.054 226.105L202.87 268.536C201.384 269.744 199.488 270.42 197.52 270.42C196.415 270.42 195.431 270.055 194.697 269.378L194.674 269.356L194.649 269.335C193.965 268.756 193.58 267.904 193.58 266.96V241.12V239.62H192.08H129.12C128.047 239.62 127.065 239.476 126.191 239.101C125.196 238.675 124.36 238.143 123.75 237.471L123.726 237.445L123.701 237.419C122.959 236.678 122.426 235.878 122.019 234.929C121.644 234.055 121.5 233.073 121.5 232V209.12C121.5 208.047 121.644 207.065 122.019 206.191C122.445 205.196 122.977 204.36 123.649 203.75L123.675 203.726L123.701 203.701C124.442 202.959 125.242 202.426 126.191 202.019C127.065 201.644 128.047 201.5 129.12 201.5H192.08H193.58V200V173.52C193.58 172.518 194.031 171.47 194.861 170.699L194.881 170.68L194.901 170.661C195.616 169.945 196.732 169.5 198 169.5C199.737 169.5 201.374 170.101 202.6 171.198L202.608 171.205L202.617 171.213L251.737 213.853L251.744 213.859L251.751 213.865C252.635 214.613 253.367 215.553 253.826 216.601C254.286 217.653 254.495 218.789 254.5 219.958C254.428 221.149 254.095 222.273 253.493 223.345Z" fill="#2F9FFF" stroke="url(#paint5_linear_999_4371)" stroke-width="3"/>
+<path d="M112 88C112 79.1634 104.837 72 96 72C87.1634 72 80 79.1634 80 88C80 96.8366 87.1634 104 96 104C104.837 104 112 96.8366 112 88Z" fill="#63C3F3"/>
+<path d="M160 88C160 79.1634 152.837 72 144 72C135.163 72 128 79.1634 128 88C128 96.8366 135.163 104 144 104C152.837 104 160 96.8366 160 88Z" fill="#6368F3"/>
+<path d="M208 88C208 79.1634 200.837 72 192 72C183.163 72 176 79.1634 176 88C176 96.8366 183.163 104 192 104C200.837 104 208 96.8366 208 88Z" fill="#DF63F3"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_dd_999_4371" x="42" y="45" width="300" height="300" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_999_4371"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.5"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_999_4371" result="effect2_dropShadow_999_4371"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_999_4371" result="shape"/>
+</filter>
+<filter id="filter1_ii_999_4371" x="48" y="30" width="288" height="309" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-18"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.16 0 0 0 0 0.173333 0 0 0 0 0.24 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_999_4371"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.56525 0 0 0 0 0.518576 0 0 0 0 0.69809 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_999_4371" result="effect2_innerShadow_999_4371"/>
+</filter>
+<filter id="filter2_d_999_4371" x="68" y="126" width="248" height="192" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.203922 0 0 0 0 0.2 0 0 0 0 0.286275 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_999_4371"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_999_4371" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_999_4371" x1="192" y1="48" x2="192" y2="336" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A4067" stop-opacity="0"/>
+<stop offset="1" stop-color="#3742A4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_999_4371" x1="192" y1="48" x2="192" y2="336" gradientUnits="userSpaceOnUse">
+<stop stop-color="#28293C"/>
+<stop offset="1" stop-color="#28293C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_999_4371" x1="192" y1="48" x2="192" y2="336" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#121523"/>
+</linearGradient>
+<linearGradient id="paint3_linear_999_4371" x1="192" y1="128" x2="192" y2="312" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1C1F2C"/>
+<stop offset="1" stop-color="#1C1F2C"/>
+</linearGradient>
+<linearGradient id="paint4_linear_999_4371" x1="192" y1="128" x2="192" y2="312" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1B1E2B"/>
+<stop offset="1" stop-color="#1E212F"/>
+</linearGradient>
+<linearGradient id="paint5_linear_999_4371" x1="188" y1="168" x2="188" y2="271.92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#66B8FF"/>
+<stop offset="1" stop-color="#2F9FFF"/>
+</linearGradient>
+</defs>
+</svg>

apps/landing/public/images/icons/collection.svg

@@ -0,0 +1,87 @@
+<svg width="384" height="384" viewBox="0 0 384 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_818_1886)">
+<path d="M125.083 180.6L53.5825 158.46L125.083 98.8999V180.6ZM257.423 180.6V98.8999L328.923 158.46L257.423 180.62V180.6Z" fill="#181B2A" stroke="#252938" stroke-width="3"/>
+<path d="M229.722 53.54L134.362 62.46C129.982 62.88 126.862 68.02 127.422 73.96L136.482 170.76C137.042 176.7 141.042 181.18 145.442 180.78L240.802 171.86C245.182 171.44 248.302 166.3 247.742 160.36L238.682 63.56C238.122 57.62 234.122 53.14 229.722 53.54Z" fill="#DF63F3"/>
+<path d="M291.382 84.5398L194.642 65.7798C188.502 64.5798 182.142 70.7398 180.442 79.5398L161.922 174.98C160.222 183.76 163.802 191.86 169.942 193.04L266.682 211.8C272.822 213 279.182 206.84 280.882 198.04L299.402 102.6C301.102 93.8198 297.522 85.7198 291.382 84.5398Z" fill="#6368F3"/>
+<path d="M208.062 76.4201L94.5624 96.5601C88.3024 97.6801 84.4824 105.72 86.0424 114.52L108.682 242.16C110.242 250.98 116.602 257.22 122.862 256.1L236.362 235.96C242.622 234.84 246.442 226.8 244.882 218L222.242 90.3601C220.682 81.5401 214.322 75.3001 208.062 76.4201Z" fill="#63C3F3"/>
+<g filter="url(#filter1_ii_818_1886)">
+<path d="M61.6024 147.54C55.3424 147.54 49.3824 150.26 45.2824 154.98C41.1824 159.72 39.3224 166 40.2224 172.2L61.8224 323.44C63.3424 334.08 72.4624 342 83.2024 342H299.262C310.022 342 319.122 334.1 320.642 323.44L342.242 172.2C343.122 166 341.282 159.72 337.182 154.98C333.082 150.24 327.122 147.54 320.862 147.54H61.6024Z" fill="#252838"/>
+<path d="M47.3224 156.76C50.9224 152.62 56.1224 150.24 61.6024 150.24H320.882C326.362 150.24 331.582 152.62 335.162 156.76C338.762 160.9 340.362 166.4 339.602 171.82L318.002 323.06C316.662 332.38 308.702 339.3 299.282 339.3H83.2224C73.8224 339.3 65.8424 332.38 64.5024 323.06L42.9024 171.82C42.1224 166.4 43.7424 160.9 47.3424 156.76H47.3224Z" stroke="url(#paint0_linear_818_1886)" stroke-opacity="0.3" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M46.3025 155.88C50.1425 151.44 55.7425 148.9 61.6025 148.9H320.882C326.762 148.9 332.342 151.44 336.182 155.88C340.022 160.32 341.762 166.2 340.922 172.02L319.322 323.26C317.902 333.24 309.342 340.66 299.262 340.66H83.2225C73.1425 340.66 64.6025 333.24 63.1625 323.26L41.5625 172.02C40.7225 166.2 42.4625 160.32 46.3025 155.88Z" stroke="url(#paint1_linear_818_1886)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M46.3025 155.88C50.1425 151.44 55.7425 148.9 61.6025 148.9H320.882C326.762 148.9 332.342 151.44 336.182 155.88C340.022 160.32 341.762 166.2 340.922 172.02L319.322 323.26C317.902 333.24 309.342 340.66 299.262 340.66H83.2225C73.1425 340.66 64.6025 333.24 63.1625 323.26L41.5625 172.02C40.7225 166.2 42.4625 160.32 46.3025 155.88Z" stroke="url(#paint2_linear_818_1886)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g filter="url(#filter2_dii_818_1886)">
+<path d="M126.422 222.96V245.64C126.422 251.04 133.662 255.36 142.622 255.36H239.302C248.262 255.36 255.502 251.04 255.502 245.64V222.96" stroke="#D1D3D4" stroke-width="24" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M126.422 222.96V245.64C126.422 251.04 133.662 255.36 142.622 255.36H239.302C248.262 255.36 255.502 251.04 255.502 245.64V222.96" stroke="url(#paint3_linear_818_1886)" stroke-width="12" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_dd_818_1886" x="33.7104" y="50.5151" width="315.077" height="300.785" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_818_1886"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.5"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_818_1886" result="effect2_dropShadow_818_1886"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_818_1886" result="shape"/>
+</filter>
+<filter id="filter1_ii_818_1886" x="39.7104" y="129.24" width="303.077" height="216.06" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.56525 0 0 0 0 0.518576 0 0 0 0 0.69809 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_1886"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-18"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.16 0 0 0 0 0.173333 0 0 0 0 0.24 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_818_1886" result="effect2_innerShadow_818_1886"/>
+</filter>
+<filter id="filter2_dii_818_1886" x="90.4224" y="198.96" width="201.08" height="104.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="12"/>
+<feGaussianBlur stdDeviation="12"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_818_1886"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_818_1886" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.529167 0 0 0 0 0.529167 0 0 0 0 0.529167 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect2_innerShadow_818_1886"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect2_innerShadow_818_1886" result="effect3_innerShadow_818_1886"/>
+</filter>
+<linearGradient id="paint0_linear_818_1886" x1="191.242" y1="147.24" x2="191.242" y2="342.3" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A4067" stop-opacity="0"/>
+<stop offset="1" stop-color="#3742A4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_818_1886" x1="191.242" y1="147.4" x2="191.242" y2="342.14" gradientUnits="userSpaceOnUse">
+<stop stop-color="#35344A"/>
+<stop offset="1" stop-color="#28293C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_818_1886" x1="191.242" y1="147.4" x2="191.242" y2="342.14" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#121523"/>
+</linearGradient>
+<linearGradient id="paint3_linear_818_1886" x1="190.982" y1="222.5" x2="190.982" y2="255.8" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D9D9D9"/>
+<stop offset="1" stop-color="#F5F5F5"/>
+</linearGradient>
+</defs>
+</svg>

apps/landing/public/images/icons/database.svg

@@ -0,0 +1,351 @@
+<svg width="384" height="384" viewBox="0 0 384 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_818_1877)">
+<mask id="mask0_818_1877" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="40" y="40" width="304" height="304">
+<path d="M48.4805 74.72C48.4805 55.52 112.72 40 192 40C271.28 40 335.52 55.52 335.52 74.72V82.8432C341.013 86.6831 344 90.8138 344 95.12V119.92C344 124.226 341.013 128.357 335.52 132.197V140.4C335.52 143.659 333.67 146.811 330.21 149.8C333.67 152.789 335.52 155.941 335.52 159.2V167.323C341.013 171.163 344 175.294 344 179.6V204.4C344 208.706 341.013 212.837 335.52 216.677V224.8C335.52 228.059 333.67 231.211 330.21 234.2C333.67 237.189 335.52 240.341 335.52 243.6V251.723C341.013 255.563 344 259.694 344 264V288.8C344 293.106 341.013 297.237 335.52 301.077V309.28C335.52 328.48 271.28 344 192 344C112.72 344 48.4805 328.48 48.4805 309.28V301.077C42.9868 297.237 40 293.106 40 288.8V264C40 259.694 42.9868 255.563 48.4805 251.723V243.6C48.4805 240.341 50.3309 237.189 53.7913 234.2C50.3309 231.211 48.4805 228.059 48.4805 224.8V216.677C42.9868 212.837 40 208.706 40 204.4V179.6C40 175.294 42.9868 171.163 48.4805 167.323V159.2C48.4805 155.941 50.3309 152.789 53.7912 149.8C50.3309 146.811 48.4805 143.659 48.4805 140.4V132.197C42.9868 128.357 40 124.226 40 119.92V95.2C40 90.8935 42.9868 86.7591 48.4805 82.9135V74.72Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_818_1877)">
+<g filter="url(#filter1_ii_818_1877)">
+<g filter="url(#filter2_i_818_1877)">
+<path d="M48.4805 297.68C48.4805 278.48 112.72 262.96 192 262.96C271.28 262.96 335.52 278.48 335.52 297.68V309.28C335.52 328.48 271.28 344 192 344C112.72 344 48.4805 328.48 48.4805 309.28V297.68Z" fill="#222433"/>
+<path d="M48.4805 297.68C48.4805 278.48 112.72 262.96 192 262.96C271.28 262.96 335.52 278.48 335.52 297.68V309.28C335.52 328.48 271.28 344 192 344C112.72 344 48.4805 328.48 48.4805 309.28V297.68Z" fill="url(#paint0_radial_818_1877)"/>
+<path d="M51.4805 297.68C51.4805 294.643 54.1092 290.843 61.2467 286.759C68.1557 282.805 78.353 279.146 91.2156 276.036C116.894 269.827 152.526 265.96 192 265.96C231.475 265.96 267.107 269.827 292.785 276.036C305.648 279.146 315.845 282.805 322.754 286.759C329.892 290.843 332.52 294.643 332.52 297.68V309.28C332.52 312.317 329.892 316.117 322.754 320.201C315.845 324.155 305.648 327.814 292.785 330.924C267.107 337.133 231.475 341 192 341C152.526 341 116.894 337.133 91.2156 330.924C78.353 327.814 68.1557 324.155 61.2467 320.201C54.1092 316.117 51.4805 312.317 51.4805 309.28V297.68Z" stroke="url(#paint1_linear_818_1877)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M49.9805 297.68C49.9805 293.761 53.3023 289.576 60.5017 285.457C67.5868 281.403 77.9393 277.703 90.863 274.578C116.687 268.333 152.443 264.46 192 264.46C231.558 264.46 267.314 268.333 293.138 274.578C306.062 277.703 316.414 281.403 323.499 285.457C330.699 289.576 334.02 293.761 334.02 297.68V309.28C334.02 313.199 330.699 317.383 323.499 321.503C316.414 325.557 306.062 329.257 293.138 332.382C267.314 338.627 231.558 342.5 192 342.5C152.443 342.5 116.687 338.627 90.863 332.382C77.9393 329.257 67.5868 325.557 60.5017 321.503C53.3023 317.383 49.9805 313.199 49.9805 309.28V297.68Z" stroke="url(#paint2_linear_818_1877)" stroke-width="3"/>
+<g filter="url(#filter3_i_818_1877)">
+<path d="M40 288.8C40 309.36 108.08 325.92 192 325.92C275.92 325.92 344 309.36 344 288.8V264C344 243.44 275.92 226.88 192 226.88C108.08 226.88 40 243.44 40 264V288.8Z" fill="#35A3FF"/>
+<path d="M40 288.8C40 309.36 108.08 325.92 192 325.92C275.92 325.92 344 309.36 344 288.8V264C344 243.44 275.92 226.88 192 226.88C108.08 226.88 40 243.44 40 264V288.8Z" fill="url(#paint3_radial_818_1877)"/>
+<path d="M192 322.92C150.206 322.92 112.457 318.794 85.2409 312.155C71.6096 308.83 60.7892 304.915 53.4492 300.676C45.8901 296.31 43 292.192 43 288.8V264C43 260.608 45.8901 256.49 53.4492 252.124C60.7892 247.885 71.6096 243.969 85.2409 240.644C112.457 234.006 150.206 229.88 192 229.88C233.794 229.88 271.543 234.006 298.759 240.644C312.39 243.969 323.211 247.885 330.551 252.124C338.11 256.49 341 260.608 341 264V288.8C341 292.192 338.11 296.31 330.551 300.676C323.211 304.915 312.39 308.83 298.759 312.155C271.543 318.794 233.794 322.92 192 322.92Z" stroke="url(#paint4_linear_818_1877)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M192 324.42C150.123 324.42 112.248 320.287 84.8854 313.613C71.1923 310.273 60.2158 306.316 52.699 301.975C45.0726 297.57 41.5 293.066 41.5 288.8V264C41.5 259.734 45.0726 255.23 52.699 250.825C60.2158 246.483 71.1923 242.527 84.8854 239.187C112.248 232.513 150.123 228.38 192 228.38C233.877 228.38 271.752 232.513 299.115 239.187C312.808 242.527 323.784 246.483 331.301 250.825C338.927 255.23 342.5 259.734 342.5 264V288.8C342.5 293.066 338.927 297.57 331.301 301.975C323.784 306.316 312.808 310.273 299.115 313.613C271.752 320.287 233.877 324.42 192 324.42Z" stroke="url(#paint5_linear_818_1877)" stroke-width="3"/>
+<path d="M192 324.42C150.123 324.42 112.248 320.287 84.8854 313.613C71.1923 310.273 60.2158 306.316 52.699 301.975C45.0726 297.57 41.5 293.066 41.5 288.8V264C41.5 259.734 45.0726 255.23 52.699 250.825C60.2158 246.483 71.1923 242.527 84.8854 239.187C112.248 232.513 150.123 228.38 192 228.38C233.877 228.38 271.752 232.513 299.115 239.187C312.808 242.527 323.784 246.483 331.301 250.825C338.927 255.23 342.5 259.734 342.5 264V288.8C342.5 293.066 338.927 297.57 331.301 301.975C323.784 306.316 312.808 310.273 299.115 313.613C271.752 320.287 233.877 324.42 192 324.42Z" stroke="url(#paint6_linear_818_1877)" stroke-width="3"/>
+</g>
+<g filter="url(#filter4_d_818_1877)">
+<path d="M48.4805 243.6C48.4805 224.4 112.72 208.88 192 208.88C271.28 208.88 335.52 224.4 335.52 243.6V255.2C335.52 274.4 271.28 289.92 192 289.92C112.72 289.92 48.4805 274.4 48.4805 255.2V243.6Z" fill="#444865"/>
+<path d="M48.4805 243.6C48.4805 224.4 112.72 208.88 192 208.88C271.28 208.88 335.52 224.4 335.52 243.6V255.2C335.52 274.4 271.28 289.92 192 289.92C112.72 289.92 48.4805 274.4 48.4805 255.2V243.6Z" fill="url(#paint7_radial_818_1877)"/>
+</g>
+<path d="M51.4805 243.6C51.4805 240.563 54.1092 236.763 61.2467 232.679C68.1557 228.725 78.353 225.066 91.2156 221.956C116.894 215.746 152.526 211.88 192 211.88C231.475 211.88 267.107 215.746 292.785 221.956C305.648 225.066 315.845 228.725 322.754 232.679C329.892 236.763 332.52 240.563 332.52 243.6V255.2C332.52 258.237 329.892 262.037 322.754 266.121C315.845 270.074 305.648 273.734 292.785 276.844C267.107 283.053 231.475 286.92 192 286.92C152.526 286.92 116.894 283.053 91.2156 276.844C78.353 273.734 68.1557 270.074 61.2467 266.121C54.1092 262.037 51.4805 258.237 51.4805 255.2V243.6Z" stroke="url(#paint8_linear_818_1877)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M49.9805 243.6C49.9805 239.681 53.3023 235.496 60.5017 231.377C67.5868 227.323 77.9393 223.623 90.863 220.498C116.687 214.253 152.443 210.38 192 210.38C231.558 210.38 267.314 214.253 293.138 220.498C306.062 223.623 316.414 227.323 323.499 231.377C330.699 235.496 334.02 239.681 334.02 243.6V255.2C334.02 259.119 330.699 263.303 323.499 267.423C316.414 271.477 306.062 275.177 293.138 278.302C267.314 284.547 231.558 288.42 192 288.42C152.443 288.42 116.687 284.547 90.863 278.302C77.9393 275.177 67.5868 271.477 60.5017 267.423C53.3023 263.303 49.9805 259.119 49.9805 255.2V243.6Z" stroke="url(#paint9_linear_818_1877)" stroke-width="3"/>
+<path d="M49.9805 243.6C49.9805 239.681 53.3023 235.496 60.5017 231.377C67.5868 227.323 77.9393 223.623 90.863 220.498C116.687 214.253 152.443 210.38 192 210.38C231.558 210.38 267.314 214.253 293.138 220.498C306.062 223.623 316.414 227.323 323.499 231.377C330.699 235.496 334.02 239.681 334.02 243.6V255.2C334.02 259.119 330.699 263.303 323.499 267.423C316.414 271.477 306.062 275.177 293.138 278.302C267.314 284.547 231.558 288.42 192 288.42C152.443 288.42 116.687 284.547 90.863 278.302C77.9393 275.177 67.5868 271.477 60.5017 267.423C53.3023 263.303 49.9805 259.119 49.9805 255.2V243.6Z" stroke="url(#paint10_linear_818_1877)" stroke-width="3"/>
+</g>
+<path d="M276.48 312.32C282.312 312.32 287.04 307.592 287.04 301.76C287.04 295.928 282.312 291.2 276.48 291.2C270.648 291.2 265.92 295.928 265.92 301.76C265.92 307.592 270.648 312.32 276.48 312.32Z" fill="white"/>
+<g filter="url(#filter5_i_818_1877)">
+<g filter="url(#filter6_d_818_1877)">
+<path d="M48.4805 213.2C48.4805 194 112.72 178.48 192 178.48C271.28 178.48 335.52 194 335.52 213.2V224.8C335.52 244 271.28 259.52 192 259.52C112.72 259.52 48.4805 244 48.4805 224.8V213.2Z" fill="url(#paint11_radial_818_1877)"/>
+</g>
+<path d="M51.4805 213.2C51.4805 210.163 54.1092 206.363 61.2467 202.279C68.1557 198.325 78.353 194.666 91.2156 191.556C116.894 185.347 152.526 181.48 192 181.48C231.475 181.48 267.107 185.347 292.785 191.556C305.648 194.666 315.845 198.325 322.754 202.279C329.892 206.363 332.52 210.163 332.52 213.2V224.8C332.52 227.837 329.892 231.637 322.754 235.721C315.845 239.675 305.648 243.334 292.785 246.444C267.107 252.653 231.475 256.52 192 256.52C152.526 256.52 116.894 252.653 91.2156 246.444C78.353 243.334 68.1557 239.675 61.2467 235.721C54.1092 231.637 51.4805 227.837 51.4805 224.8V213.2Z" stroke="url(#paint12_linear_818_1877)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M49.9805 213.2C49.9805 209.281 53.3023 205.096 60.5017 200.977C67.5868 196.923 77.9393 193.223 90.863 190.098C116.687 183.853 152.443 179.98 192 179.98C231.558 179.98 267.314 183.853 293.138 190.098C306.062 193.223 316.414 196.923 323.499 200.977C330.699 205.096 334.02 209.281 334.02 213.2V224.8C334.02 228.719 330.699 232.903 323.499 237.023C316.414 241.077 306.062 244.777 293.138 247.902C267.314 254.147 231.558 258.02 192 258.02C152.443 258.02 116.687 254.147 90.863 247.902C77.9393 244.777 67.5868 241.077 60.5017 237.023C53.3023 232.903 49.9805 228.719 49.9805 224.8V213.2Z" stroke="url(#paint13_linear_818_1877)" stroke-width="3"/>
+<g filter="url(#filter7_i_818_1877)">
+<path d="M40 204.4C40 224.96 108.08 241.52 192 241.52C275.92 241.52 344 224.96 344 204.4V179.6C344 159.04 275.92 142.48 192 142.48C108.08 142.48 40 159.04 40 179.6V204.4Z" fill="#35A3FF"/>
+<path d="M40 204.4C40 224.96 108.08 241.52 192 241.52C275.92 241.52 344 224.96 344 204.4V179.6C344 159.04 275.92 142.48 192 142.48C108.08 142.48 40 159.04 40 179.6V204.4Z" fill="url(#paint14_radial_818_1877)"/>
+<path d="M192 238.52C150.206 238.52 112.457 234.394 85.2409 227.755C71.6096 224.431 60.7892 220.515 53.4492 216.276C45.8901 211.91 43 207.792 43 204.4V179.6C43 176.208 45.8901 172.09 53.4492 167.724C60.7892 163.485 71.6096 159.569 85.2409 156.245C112.457 149.606 150.206 145.48 192 145.48C233.794 145.48 271.543 149.606 298.759 156.245C312.39 159.569 323.211 163.485 330.551 167.724C338.11 172.09 341 176.208 341 179.6V204.4C341 207.792 338.11 211.91 330.551 216.276C323.211 220.515 312.39 224.431 298.759 227.755C271.543 234.394 233.794 238.52 192 238.52Z" stroke="url(#paint15_linear_818_1877)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M192 240.02C150.123 240.02 112.248 235.887 84.8854 229.213C71.1923 225.873 60.2158 221.916 52.699 217.575C45.0726 213.17 41.5 208.666 41.5 204.4V179.6C41.5 175.334 45.0726 170.83 52.699 166.425C60.2158 162.084 71.1923 158.127 84.8854 154.787C112.248 148.113 150.123 143.98 192 143.98C233.877 143.98 271.752 148.113 299.115 154.787C312.808 158.127 323.784 162.084 331.301 166.425C338.927 170.83 342.5 175.334 342.5 179.6V204.4C342.5 208.666 338.927 213.17 331.301 217.575C323.784 221.916 312.808 225.873 299.115 229.213C271.752 235.887 233.877 240.02 192 240.02Z" stroke="url(#paint16_linear_818_1877)" stroke-width="3"/>
+<path d="M192 240.02C150.123 240.02 112.248 235.887 84.8854 229.213C71.1923 225.873 60.2158 221.916 52.699 217.575C45.0726 213.17 41.5 208.666 41.5 204.4V179.6C41.5 175.334 45.0726 170.83 52.699 166.425C60.2158 162.084 71.1923 158.127 84.8854 154.787C112.248 148.113 150.123 143.98 192 143.98C233.877 143.98 271.752 148.113 299.115 154.787C312.808 158.127 323.784 162.084 331.301 166.425C338.927 170.83 342.5 175.334 342.5 179.6V204.4C342.5 208.666 338.927 213.17 331.301 217.575C323.784 221.916 312.808 225.873 299.115 229.213C271.752 235.887 233.877 240.02 192 240.02Z" stroke="url(#paint17_linear_818_1877)" stroke-width="3"/>
+</g>
+<g filter="url(#filter8_d_818_1877)">
+<path d="M48.4805 159.2C48.4805 140 112.72 124.48 192 124.48C271.28 124.48 335.52 140 335.52 159.2V170.8C335.52 190 271.28 205.52 192 205.52C112.72 205.52 48.4805 190 48.4805 170.8V159.2Z" fill="#444865"/>
+<path d="M48.4805 159.2C48.4805 140 112.72 124.48 192 124.48C271.28 124.48 335.52 140 335.52 159.2V170.8C335.52 190 271.28 205.52 192 205.52C112.72 205.52 48.4805 190 48.4805 170.8V159.2Z" fill="url(#paint18_radial_818_1877)"/>
+</g>
+<path d="M51.4805 159.2C51.4805 156.163 54.1092 152.363 61.2467 148.279C68.1557 144.325 78.353 140.666 91.2156 137.556C116.894 131.347 152.526 127.48 192 127.48C231.475 127.48 267.107 131.347 292.785 137.556C305.648 140.666 315.845 144.325 322.754 148.279C329.892 152.363 332.52 156.163 332.52 159.2V170.8C332.52 173.837 329.892 177.637 322.754 181.721C315.845 185.675 305.648 189.334 292.785 192.444C267.107 198.653 231.475 202.52 192 202.52C152.526 202.52 116.894 198.653 91.2156 192.444C78.353 189.334 68.1557 185.675 61.2467 181.721C54.1092 177.637 51.4805 173.837 51.4805 170.8V159.2Z" stroke="url(#paint19_linear_818_1877)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M49.9805 159.2C49.9805 155.281 53.3023 151.096 60.5017 146.977C67.5868 142.923 77.9393 139.223 90.863 136.098C116.687 129.853 152.443 125.98 192 125.98C231.558 125.98 267.314 129.853 293.138 136.098C306.062 139.223 316.414 142.923 323.499 146.977C330.699 151.096 334.02 155.281 334.02 159.2V170.8C334.02 174.719 330.699 178.903 323.499 183.023C316.414 187.077 306.062 190.777 293.138 193.902C267.314 200.147 231.558 204.02 192 204.02C152.443 204.02 116.687 200.147 90.863 193.902C77.9393 190.777 67.5868 187.077 60.5017 183.023C53.3023 178.903 49.9805 174.719 49.9805 170.8V159.2Z" stroke="url(#paint20_linear_818_1877)" stroke-width="3"/>
+<path d="M49.9805 159.2C49.9805 155.281 53.3023 151.096 60.5017 146.977C67.5868 142.923 77.9393 139.223 90.863 136.098C116.687 129.853 152.443 125.98 192 125.98C231.558 125.98 267.314 129.853 293.138 136.098C306.062 139.223 316.414 142.923 323.499 146.977C330.699 151.096 334.02 155.281 334.02 159.2V170.8C334.02 174.719 330.699 178.903 323.499 183.023C316.414 187.077 306.062 190.777 293.138 193.902C267.314 200.147 231.558 204.02 192 204.02C152.443 204.02 116.687 200.147 90.863 193.902C77.9393 190.777 67.5868 187.077 60.5017 183.023C53.3023 178.903 49.9805 174.719 49.9805 170.8V159.2Z" stroke="url(#paint21_linear_818_1877)" stroke-width="3"/>
+</g>
+<path d="M276.48 227.92C282.312 227.92 287.04 223.192 287.04 217.36C287.04 211.528 282.312 206.8 276.48 206.8C270.648 206.8 265.92 211.528 265.92 217.36C265.92 223.192 270.648 227.92 276.48 227.92Z" fill="white"/>
+<g filter="url(#filter9_i_818_1877)">
+<g filter="url(#filter10_d_818_1877)">
+<path d="M48.4805 128.8C48.4805 109.6 112.72 94.0801 192 94.0801C271.28 94.0801 335.52 109.6 335.52 128.8V140.4C335.52 159.6 271.28 175.12 192 175.12C112.72 175.12 48.4805 159.6 48.4805 140.4V128.8Z" fill="#222433"/>
+<path d="M48.4805 128.8C48.4805 109.6 112.72 94.0801 192 94.0801C271.28 94.0801 335.52 109.6 335.52 128.8V140.4C335.52 159.6 271.28 175.12 192 175.12C112.72 175.12 48.4805 159.6 48.4805 140.4V128.8Z" fill="url(#paint22_radial_818_1877)"/>
+</g>
+<path d="M51.4805 128.8C51.4805 125.763 54.1092 121.963 61.2467 117.879C68.1557 113.925 78.353 110.266 91.2156 107.156C116.894 100.947 152.526 97.0801 192 97.0801C231.475 97.0801 267.107 100.947 292.785 107.156C305.648 110.266 315.845 113.925 322.754 117.879C329.892 121.963 332.52 125.763 332.52 128.8V140.4C332.52 143.437 329.892 147.237 322.754 151.321C315.845 155.275 305.648 158.934 292.785 162.044C267.107 168.254 231.475 172.12 192 172.12C152.526 172.12 116.894 168.254 91.2156 162.044C78.353 158.934 68.1557 155.275 61.2467 151.321C54.1092 147.237 51.4805 143.437 51.4805 140.4V128.8Z" stroke="url(#paint23_linear_818_1877)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M49.9805 128.8C49.9805 124.881 53.3023 120.697 60.5017 116.577C67.5868 112.523 77.9393 108.823 90.863 105.698C116.687 99.4534 152.443 95.5801 192 95.5801C231.558 95.5801 267.314 99.4534 293.138 105.698C306.062 108.823 316.414 112.523 323.499 116.577C330.699 120.697 334.02 124.881 334.02 128.8V140.4C334.02 144.319 330.699 148.504 323.499 152.623C316.414 156.677 306.062 160.377 293.138 163.502C267.314 169.747 231.558 173.62 192 173.62C152.443 173.62 116.687 169.747 90.863 163.502C77.9393 160.377 67.5868 156.677 60.5017 152.623C53.3023 148.504 49.9805 144.319 49.9805 140.4V128.8Z" stroke="url(#paint24_linear_818_1877)" stroke-width="3"/>
+<g filter="url(#filter11_i_818_1877)">
+<path d="M40 119.92C40 140.48 108.08 157.04 192 157.04C275.92 157.04 344 140.48 344 119.92V95.12C344 74.56 275.92 58 192 58C108.08 58 40 74.64 40 95.2V120V119.92Z" fill="#35A3FF"/>
+<path d="M40 119.92C40 140.48 108.08 157.04 192 157.04C275.92 157.04 344 140.48 344 119.92V95.12C344 74.56 275.92 58 192 58C108.08 58 40 74.64 40 95.2V120V119.92Z" fill="url(#paint25_radial_818_1877)"/>
+<path d="M192 154.04C150.206 154.04 112.457 149.914 85.2409 143.275C71.6096 139.951 60.7892 136.035 53.4492 131.796C45.8901 127.43 43 123.312 43 119.92V95.2C43 91.8068 45.8918 87.6839 53.4511 83.3105C60.7913 79.0637 71.6119 75.1387 85.2429 71.8041C112.458 65.1462 150.207 61 192 61C233.794 61 271.543 65.1263 298.759 71.7646C312.39 75.0894 323.211 79.0046 330.551 83.2441C338.11 87.61 341 91.7281 341 95.12V119.92C341 123.312 338.11 127.43 330.551 131.796C323.211 136.035 312.39 139.951 298.759 143.275C271.543 149.914 233.794 154.04 192 154.04Z" stroke="url(#paint26_linear_818_1877)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M192 155.54C150.123 155.54 112.248 151.407 84.8854 144.733C71.1923 141.393 60.2158 137.436 52.699 133.095C45.0726 128.69 41.5 124.186 41.5 119.92V95.2C41.5 90.9334 45.0734 86.4245 52.6999 82.0121C60.2169 77.6631 71.1934 73.6969 84.8864 70.347C112.249 63.6531 150.124 59.5 192 59.5C233.877 59.5 271.752 63.6332 299.115 70.3073C312.808 73.6472 323.784 77.6036 331.301 81.9452C338.927 86.35 342.5 90.854 342.5 95.12V119.92C342.5 124.186 338.927 128.69 331.301 133.095C323.784 137.436 312.808 141.393 299.115 144.733C271.752 151.407 233.877 155.54 192 155.54Z" stroke="url(#paint27_linear_818_1877)" stroke-width="3"/>
+<path d="M192 155.54C150.123 155.54 112.248 151.407 84.8854 144.733C71.1923 141.393 60.2158 137.436 52.699 133.095C45.0726 128.69 41.5 124.186 41.5 119.92V95.2C41.5 90.9334 45.0734 86.4245 52.6999 82.0121C60.2169 77.6631 71.1934 73.6969 84.8864 70.347C112.249 63.6531 150.124 59.5 192 59.5C233.877 59.5 271.752 63.6332 299.115 70.3073C312.808 73.6472 323.784 77.6036 331.301 81.9452C338.927 86.35 342.5 90.854 342.5 95.12V119.92C342.5 124.186 338.927 128.69 331.301 133.095C323.784 137.436 312.808 141.393 299.115 144.733C271.752 151.407 233.877 155.54 192 155.54Z" stroke="url(#paint28_linear_818_1877)" stroke-width="3"/>
+</g>
+<g filter="url(#filter12_d_818_1877)">
+<path d="M48.4805 74.72C48.4805 55.52 112.72 40 192 40C271.28 40 335.52 55.52 335.52 74.72V86.32C335.52 105.52 271.28 121.04 192 121.04C112.72 121.04 48.4805 105.52 48.4805 86.32V74.72Z" fill="#444865"/>
+<path d="M48.4805 74.72C48.4805 55.52 112.72 40 192 40C271.28 40 335.52 55.52 335.52 74.72V86.32C335.52 105.52 271.28 121.04 192 121.04C112.72 121.04 48.4805 105.52 48.4805 86.32V74.72Z" fill="url(#paint29_radial_818_1877)"/>
+</g>
+<path d="M51.4805 74.72C51.4805 71.6827 54.1092 67.883 61.2467 63.7988C68.1557 59.8454 78.353 56.1863 91.2156 53.076C116.894 46.8666 152.526 43 192 43C231.475 43 267.107 46.8666 292.785 53.076C305.648 56.1863 315.845 59.8454 322.754 63.7988C329.892 67.883 332.52 71.6827 332.52 74.72V86.32C332.52 89.3573 329.892 93.157 322.754 97.2412C315.845 101.195 305.648 104.854 292.785 107.964C267.107 114.173 231.475 118.04 192 118.04C152.526 118.04 116.894 114.173 91.2156 107.964C78.353 104.854 68.1557 101.195 61.2467 97.2412C54.1092 93.157 51.4805 89.3573 51.4805 86.32V74.72Z" stroke="url(#paint30_linear_818_1877)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M49.9805 74.72C49.9805 70.8013 53.3023 66.6165 60.5017 62.4969C67.5868 58.4427 77.9393 54.7432 90.863 51.618C116.687 45.3733 152.443 41.5 192 41.5C231.558 41.5 267.314 45.3733 293.138 51.618C306.062 54.7432 316.414 58.4427 323.499 62.4969C330.699 66.6165 334.02 70.8013 334.02 74.72V86.32C334.02 90.2387 330.699 94.4235 323.499 98.5431C316.414 102.597 306.062 106.297 293.138 109.422C267.314 115.667 231.558 119.54 192 119.54C152.443 119.54 116.687 115.667 90.863 109.422C77.9393 106.297 67.5868 102.597 60.5017 98.5431C53.3023 94.4235 49.9805 90.2387 49.9805 86.32V74.72Z" stroke="url(#paint31_linear_818_1877)" stroke-width="3"/>
+<path d="M49.9805 74.72C49.9805 70.8013 53.3023 66.6165 60.5017 62.4969C67.5868 58.4427 77.9393 54.7432 90.863 51.618C116.687 45.3733 152.443 41.5 192 41.5C231.558 41.5 267.314 45.3733 293.138 51.618C306.062 54.7432 316.414 58.4427 323.499 62.4969C330.699 66.6165 334.02 70.8013 334.02 74.72V86.32C334.02 90.2387 330.699 94.4235 323.499 98.5431C316.414 102.597 306.062 106.297 293.138 109.422C267.314 115.667 231.558 119.54 192 119.54C152.443 119.54 116.687 115.667 90.863 109.422C77.9393 106.297 67.5868 102.597 60.5017 98.5431C53.3023 94.4235 49.9805 90.2387 49.9805 86.32V74.72Z" stroke="url(#paint32_linear_818_1877)" stroke-width="3"/>
+</g>
+<path d="M276.48 143.44C282.312 143.44 287.04 138.712 287.04 132.88C287.04 127.048 282.312 122.32 276.48 122.32C270.648 122.32 265.92 127.048 265.92 132.88C265.92 138.712 270.648 143.44 276.48 143.44Z" fill="white"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_dd_818_1877" x="34" y="37" width="316" height="316" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_818_1877"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.5"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_818_1877" result="effect2_dropShadow_818_1877"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_818_1877" result="shape"/>
+</filter>
+<filter id="filter1_ii_818_1877" x="40" y="22" width="304" height="325" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.56525 0 0 0 0 0.518576 0 0 0 0 0.69809 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_1877"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-18"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.106498 0 0 0 0 0.140605 0 0 0 0 0.311141 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_818_1877" result="effect2_innerShadow_818_1877"/>
+</filter>
+<filter id="filter2_i_818_1877" x="40" y="208.88" width="304" height="138.12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0941176 0 0 0 0 0.45098 0 0 0 0 0.819608 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_1877"/>
+</filter>
+<filter id="filter3_i_818_1877" x="40" y="226.88" width="304" height="102.04" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.425 0 0 0 0 0.75989 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_1877"/>
+</filter>
+<filter id="filter4_d_818_1877" x="42.4805" y="208.88" width="299.04" height="93.04" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.403922 0 0 0 0 0.733333 0 0 0 0 0.996078 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_818_1877"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_818_1877" result="shape"/>
+</filter>
+<filter id="filter5_i_818_1877" x="40" y="124.48" width="304" height="138.04" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0941176 0 0 0 0 0.45098 0 0 0 0 0.819608 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_1877"/>
+</filter>
+<filter id="filter6_d_818_1877" x="42.4805" y="178.48" width="299.04" height="93.04" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.117647 0 0 0 0 0.137255 0 0 0 0 0.235294 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_818_1877"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_818_1877" result="shape"/>
+</filter>
+<filter id="filter7_i_818_1877" x="40" y="142.48" width="304" height="102.04" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.425 0 0 0 0 0.75989 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_1877"/>
+</filter>
+<filter id="filter8_d_818_1877" x="42.4805" y="124.48" width="299.04" height="93.04" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.403922 0 0 0 0 0.733333 0 0 0 0 0.996078 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_818_1877"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_818_1877" result="shape"/>
+</filter>
+<filter id="filter9_i_818_1877" x="40" y="40" width="304" height="138.12" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0941176 0 0 0 0 0.45098 0 0 0 0 0.819608 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_1877"/>
+</filter>
+<filter id="filter10_d_818_1877" x="42.4805" y="94.0801" width="299.04" height="93.04" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.117647 0 0 0 0 0.137255 0 0 0 0 0.235294 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_818_1877"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_818_1877" result="shape"/>
+</filter>
+<filter id="filter11_i_818_1877" x="40" y="58" width="304" height="102.04" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.425 0 0 0 0 0.75989 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_1877"/>
+</filter>
+<filter id="filter12_d_818_1877" x="42.4805" y="40" width="299.04" height="93.04" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.403922 0 0 0 0 0.733333 0 0 0 0 0.996078 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_818_1877"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_818_1877" result="shape"/>
+</filter>
+<radialGradient id="paint0_radial_818_1877" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(192 303.48) rotate(180) scale(143.52 496.37)">
+<stop stop-color="#222433"/>
+<stop offset="1" stop-color="#202231"/>
+</radialGradient>
+<linearGradient id="paint1_linear_818_1877" x1="192" y1="262.96" x2="192" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#212332"/>
+<stop offset="1" stop-color="#313445"/>
+</linearGradient>
+<linearGradient id="paint2_linear_818_1877" x1="192" y1="262.96" x2="192" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1A2753"/>
+<stop offset="1" stop-color="#212332"/>
+</linearGradient>
+<radialGradient id="paint3_radial_818_1877" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(192 276.4) rotate(180) scale(152 606.62)">
+<stop stop-color="#279AFF"/>
+<stop offset="1" stop-color="#168FFF"/>
+</radialGradient>
+<linearGradient id="paint4_linear_818_1877" x1="192" y1="226.88" x2="192" y2="325.92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A4067" stop-opacity="0"/>
+<stop offset="1" stop-color="#97E0FF"/>
+</linearGradient>
+<linearGradient id="paint5_linear_818_1877" x1="192" y1="226.88" x2="192" y2="325.92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#49B3FF"/>
+<stop offset="1" stop-color="#1C2290" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_818_1877" x1="192" y1="226.88" x2="192" y2="325.92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#195FB8"/>
+</linearGradient>
+<radialGradient id="paint7_radial_818_1877" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(192 249.4) rotate(180) scale(143.52 496.37)">
+<stop stop-color="#444865"/>
+<stop offset="1" stop-color="#414566"/>
+</radialGradient>
+<linearGradient id="paint8_linear_818_1877" x1="192" y1="208.88" x2="192" y2="289.92" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="1" stop-color="#363F5F"/>
+</linearGradient>
+<linearGradient id="paint9_linear_818_1877" x1="192" y1="208.88" x2="192" y2="289.92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#454755"/>
+<stop offset="1" stop-color="#222776" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint10_linear_818_1877" x1="192" y1="208.88" x2="192" y2="289.92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#195FB8"/>
+</linearGradient>
+<radialGradient id="paint11_radial_818_1877" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(192 219) rotate(180) scale(143.52 496.37)">
+<stop stop-color="#23263F"/>
+<stop offset="1" stop-color="#202231"/>
+</radialGradient>
+<linearGradient id="paint12_linear_818_1877" x1="192" y1="178.48" x2="192" y2="259.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#212332"/>
+<stop offset="1" stop-color="#313445"/>
+</linearGradient>
+<linearGradient id="paint13_linear_818_1877" x1="192" y1="178.48" x2="192" y2="259.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1A2753"/>
+<stop offset="1" stop-color="#212332"/>
+</linearGradient>
+<radialGradient id="paint14_radial_818_1877" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(192 192) rotate(180) scale(152 606.62)">
+<stop stop-color="#279AFF"/>
+<stop offset="1" stop-color="#168FFF"/>
+</radialGradient>
+<linearGradient id="paint15_linear_818_1877" x1="192" y1="142.48" x2="192" y2="241.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A4067" stop-opacity="0"/>
+<stop offset="1" stop-color="#97E0FF"/>
+</linearGradient>
+<linearGradient id="paint16_linear_818_1877" x1="192" y1="142.48" x2="192" y2="241.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#49B3FF"/>
+<stop offset="1" stop-color="#1C2290" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint17_linear_818_1877" x1="192" y1="142.48" x2="192" y2="241.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#195FB8"/>
+</linearGradient>
+<radialGradient id="paint18_radial_818_1877" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(192 165) rotate(180) scale(143.52 496.37)">
+<stop stop-color="#444865"/>
+<stop offset="1" stop-color="#414566"/>
+</radialGradient>
+<linearGradient id="paint19_linear_818_1877" x1="192" y1="124.48" x2="192" y2="205.52" gradientUnits="userSpaceOnUse">
+<stop stop-opacity="0"/>
+<stop offset="1" stop-color="#363F5F"/>
+</linearGradient>
+<linearGradient id="paint20_linear_818_1877" x1="192" y1="124.48" x2="192" y2="205.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#454755"/>
+<stop offset="1" stop-color="#222776" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint21_linear_818_1877" x1="192" y1="124.48" x2="192" y2="205.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#195FB8"/>
+</linearGradient>
+<radialGradient id="paint22_radial_818_1877" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(192 134.6) rotate(180) scale(143.52 496.37)">
+<stop stop-color="#222433"/>
+<stop offset="1" stop-color="#202231"/>
+</radialGradient>
+<linearGradient id="paint23_linear_818_1877" x1="192" y1="94.0801" x2="192" y2="175.12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#212332"/>
+<stop offset="1" stop-color="#313445"/>
+</linearGradient>
+<linearGradient id="paint24_linear_818_1877" x1="192" y1="94.0801" x2="192" y2="175.12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1A2753"/>
+<stop offset="1" stop-color="#212332"/>
+</linearGradient>
+<radialGradient id="paint25_radial_818_1877" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(192 107.52) rotate(180) scale(152 606.62)">
+<stop stop-color="#279AFF"/>
+<stop offset="1" stop-color="#168FFF"/>
+</radialGradient>
+<linearGradient id="paint26_linear_818_1877" x1="192" y1="58" x2="192" y2="157.04" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A4067" stop-opacity="0"/>
+<stop offset="1" stop-color="#97E0FF"/>
+</linearGradient>
+<linearGradient id="paint27_linear_818_1877" x1="192" y1="58" x2="192" y2="157.04" gradientUnits="userSpaceOnUse">
+<stop stop-color="#49B3FF"/>
+<stop offset="1" stop-color="#1C2290" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint28_linear_818_1877" x1="192" y1="58" x2="192" y2="157.04" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#195FB8"/>
+</linearGradient>
+<radialGradient id="paint29_radial_818_1877" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(192 80.52) rotate(180) scale(143.52 496.37)">
+<stop stop-color="#444865"/>
+<stop offset="1" stop-color="#414566"/>
+</radialGradient>
+<linearGradient id="paint30_linear_818_1877" x1="192" y1="40" x2="192" y2="121.04" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2B2B2B" stop-opacity="0"/>
+<stop offset="1" stop-color="#363F5F"/>
+</linearGradient>
+<linearGradient id="paint31_linear_818_1877" x1="192" y1="40" x2="192" y2="121.04" gradientUnits="userSpaceOnUse">
+<stop stop-color="#454755"/>
+<stop offset="1" stop-color="#222776" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint32_linear_818_1877" x1="192" y1="40" x2="192" y2="121.04" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#195FB8"/>
+</linearGradient>
+</defs>
+</svg>

apps/landing/public/images/icons/game.svg

@@ -0,0 +1,94 @@
+<svg width="384" height="384" viewBox="0 0 384 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_993_3740)">
+<mask id="mask0_993_3740" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="24" y="80" width="336" height="224">
+<path d="M320 304C342.08 304 360 286.08 360 264H359.84C359.84 261.6 359.52 259.36 359.12 257.04H359.2L335.12 119.68C331.2 97.12 311.6 80 287.92 80C277.44 80 267.84 83.36 260 89.04C252 94.72 241.84 96.48 232.48 93.68C220 90.08 206.32 88 191.92 88C177.52 88 163.84 90.08 151.36 93.68C141.92 96.48 131.84 94.72 123.84 89.04C116 83.36 106.4 80 95.92 80C72.24 80 52.64 97.12 48.72 119.68L24.64 257.04H24.72C24.32 259.36 24 261.6 24 264C24 286.08 41.92 304 64 304C82.16 304 97.28 291.84 102.16 275.36L119.92 235.28C121.76 231.2 124.88 228 128.64 226C132.24 224.08 136.56 223.28 140.88 224C156.48 226.56 173.76 228 192 228C210.24 228 227.52 226.56 243.12 224C247.44 223.28 251.76 224 255.36 226C259.2 227.92 262.24 231.2 264.08 235.28L281.84 275.36C286.72 291.84 301.84 304 320 304Z" fill="#35A3FF"/>
+</mask>
+<g mask="url(#mask0_993_3740)">
+<g filter="url(#filter1_ii_993_3740)">
+<g filter="url(#filter2_i_993_3740)">
+<path d="M320 304C342.08 304 360 286.08 360 264H359.84C359.84 261.6 359.52 259.36 359.12 257.04H359.2L335.12 119.68C331.2 97.12 311.6 80 287.92 80C277.44 80 267.84 83.36 260 89.04C252 94.72 241.84 96.48 232.48 93.68C220 90.08 206.32 88 191.92 88C177.52 88 163.84 90.08 151.36 93.68C141.92 96.48 131.84 94.72 123.84 89.04C116 83.36 106.4 80 95.92 80C72.24 80 52.64 97.12 48.72 119.68L24.64 257.04H24.72C24.32 259.36 24 261.6 24 264C24 286.08 41.92 304 64 304C82.16 304 97.28 291.84 102.16 275.36L119.92 235.28C121.76 231.2 124.88 228 128.64 226C132.24 224.08 136.56 223.28 140.88 224C156.48 226.56 173.76 228 192 228C210.24 228 227.52 226.56 243.12 224C247.44 223.28 251.76 224 255.36 226C259.2 227.92 262.24 231.2 264.08 235.28L281.84 275.36C286.72 291.84 301.84 304 320 304Z" fill="#292B3D"/>
+</g>
+<path d="M332.164 120.194L332.165 120.198L356.13 256.902C356.118 257.126 356.13 257.356 356.17 257.588C356.555 259.824 356.834 261.829 356.84 263.929C356.841 264.257 356.893 264.574 356.99 264.871C356.527 284.893 340.132 301 320 301C303.229 301 289.236 289.772 284.717 274.508L284.661 274.322L284.583 274.145L266.823 234.065L266.819 234.056L266.815 234.047C264.723 229.408 261.237 225.602 256.76 223.346C252.549 221.025 247.562 220.219 242.63 221.04C227.2 223.572 210.084 225 192 225C173.916 225 156.8 223.572 141.37 221.04C136.378 220.209 131.391 221.133 127.228 223.353C122.907 225.652 119.309 229.338 117.185 234.047L117.181 234.056L117.177 234.065L99.4172 274.145L99.3386 274.322L99.2835 274.508C94.7635 289.772 80.7715 301 64 301C43.5769 301 27 284.423 27 264C27 261.875 27.2807 259.849 27.6698 257.588L24.7132 257.079L27.6698 257.588C27.7097 257.356 27.7222 257.127 27.7099 256.902L51.6749 120.198L51.6757 120.194C55.3507 99.0434 73.7263 83 95.92 83C105.744 83 114.732 86.1461 122.08 91.4694L122.092 91.4778L122.103 91.4861C130.837 97.6869 141.864 99.6219 152.202 96.5595C164.415 93.0374 177.812 91 191.92 91C206.027 91 219.422 93.037 231.635 96.5585C241.897 99.6233 253.005 97.6855 261.737 91.4861L261.748 91.4778L261.76 91.4694C269.108 86.1461 278.096 83 287.92 83C310.114 83 328.489 99.0434 332.164 120.194ZM356.239 257.521C356.238 257.518 356.237 257.514 356.237 257.511L356.238 257.519L356.239 257.521Z" stroke="url(#paint0_linear_993_3740)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M358.471 265.5C357.682 286.057 340.749 302.5 320 302.5C302.534 302.5 287.978 290.806 283.278 274.934L283.251 274.841L283.211 274.752L265.451 234.672L265.447 234.663C263.482 230.304 260.219 226.761 256.06 224.673C252.155 222.512 247.502 221.75 242.877 222.52C227.361 225.066 210.163 226.5 192 226.5C173.837 226.5 156.639 225.066 141.123 222.52C136.468 221.745 131.816 222.606 127.936 224.676C123.894 226.825 120.535 230.269 118.553 234.663L118.549 234.672L100.789 274.752L100.749 274.841L100.722 274.934C96.0218 290.806 81.4657 302.5 64 302.5C42.7484 302.5 25.5 285.252 25.5 264C25.5 261.731 25.802 259.593 26.1982 257.295L26.5008 255.54H26.4258L50.1975 119.939L50.1979 119.937C53.9954 98.0817 72.9831 81.5 95.92 81.5C106.072 81.5 115.366 84.7531 122.96 90.2547L122.966 90.2589L122.972 90.2631C131.338 96.2034 141.892 98.051 151.781 95.1197C164.128 91.5587 177.666 89.5 191.92 89.5C206.173 89.5 219.711 91.5585 232.057 95.1192C241.868 98.0517 252.503 96.2028 260.868 90.2631L260.874 90.2589L260.88 90.2547C268.474 84.7531 277.768 81.5 287.92 81.5C310.857 81.5 329.845 98.0817 333.642 119.937L333.643 119.939L357.414 255.54H357.339L357.642 257.295C358.038 259.593 358.34 261.731 358.34 264V265.5H358.471Z" stroke="url(#paint1_linear_993_3740)" stroke-width="3"/>
+<path d="M358.471 265.5C357.682 286.057 340.749 302.5 320 302.5C302.534 302.5 287.978 290.806 283.278 274.934L283.251 274.841L283.211 274.752L265.451 234.672L265.447 234.663C263.482 230.304 260.219 226.761 256.06 224.673C252.155 222.512 247.502 221.75 242.877 222.52C227.361 225.066 210.163 226.5 192 226.5C173.837 226.5 156.639 225.066 141.123 222.52C136.468 221.745 131.816 222.606 127.936 224.676C123.894 226.825 120.535 230.269 118.553 234.663L118.549 234.672L100.789 274.752L100.749 274.841L100.722 274.934C96.0218 290.806 81.4657 302.5 64 302.5C42.7484 302.5 25.5 285.252 25.5 264C25.5 261.731 25.802 259.593 26.1982 257.295L26.5008 255.54H26.4258L50.1975 119.939L50.1979 119.937C53.9954 98.0817 72.9831 81.5 95.92 81.5C106.072 81.5 115.366 84.7531 122.96 90.2547L122.966 90.2589L122.972 90.2631C131.338 96.2034 141.892 98.051 151.781 95.1197C164.128 91.5587 177.666 89.5 191.92 89.5C206.173 89.5 219.711 91.5585 232.057 95.1192C241.868 98.0517 252.503 96.2028 260.868 90.2631L260.874 90.2589L260.88 90.2547C268.474 84.7531 277.768 81.5 287.92 81.5C310.857 81.5 329.845 98.0817 333.642 119.937L333.643 119.939L357.414 255.54H357.339L357.642 257.295C358.038 259.593 358.34 261.731 358.34 264V265.5H358.471Z" stroke="url(#paint2_linear_993_3740)" stroke-width="3"/>
+<g filter="url(#filter3_f_993_3740)">
+<path d="M86.9993 95.9998C78.0663 93.6628 42.6607 238.113 37.9993 244C55.5796 264.185 71.2931 262.725 77.9523 261.884C73.3165 230.659 71.6864 131 99.9998 113C103.657 86.2935 92.066 97.3253 86.9993 95.9998Z" fill="#343951"/>
+<path d="M254.092 87.986C257.475 85 329.629 234.498 336 240.137C311.974 259.472 287.765 262.695 278.664 261.889C289.585 210.329 245.011 96 254.092 87.986Z" fill="#343951"/>
+</g>
+<path d="M141.125 222.52C137.185 221.864 133.247 222.38 129.777 223.809C129.599 222.568 129.5 221.299 129.5 220C129.5 212.731 132.452 206.074 137.292 201.309L137.301 201.301L137.309 201.292C142.074 196.452 148.731 193.5 156 193.5H228C242.612 193.5 254.5 205.388 254.5 220C254.5 221.29 254.402 222.551 254.227 223.784C250.738 222.316 246.797 221.867 242.875 222.52C227.36 225.066 210.162 226.5 192 226.5C173.838 226.5 156.64 225.066 141.125 222.52Z" fill="#3F4563" stroke="url(#paint3_linear_993_3740)" stroke-width="3"/>
+<path d="M252 160C258.627 160 264 154.627 264 148C264 141.373 258.627 136 252 136C245.373 136 240 141.373 240 148C240 154.627 245.373 160 252 160Z" fill="#F1F2F2"/>
+<path d="M300 160C306.627 160 312 154.627 312 148C312 141.373 306.627 136 300 136C293.373 136 288 141.373 288 148C288 154.627 293.373 160 300 160Z" fill="#6368F3"/>
+<path d="M276 136C282.627 136 288 130.627 288 124C288 117.373 282.627 112 276 112C269.373 112 264 117.373 264 124C264 130.627 269.373 136 276 136Z" fill="#DF63F3"/>
+<path d="M276 184C282.627 184 288 178.627 288 172C288 165.373 282.627 160 276 160C269.373 160 264 165.373 264 172C264 178.627 269.373 184 276 184Z" fill="#63C3F3"/>
+<path d="M112.462 182.5H111.538C108.203 182.5 105.5 179.797 105.5 176.462V164C105.5 160.962 103.038 158.5 100 158.5H87.5378C84.2032 158.5 81.5 155.797 81.5 152.462V151.538C81.5 148.203 84.2032 145.5 87.5378 145.5H100C103.038 145.5 105.5 143.038 105.5 140V127.538C105.5 124.203 108.203 121.5 111.538 121.5H112.462C115.797 121.5 118.5 124.203 118.5 127.538V140C118.5 143.038 120.962 145.5 124 145.5H136.462C139.797 145.5 142.5 148.203 142.5 151.538V152.462C142.5 155.797 139.797 158.5 136.462 158.5H124C120.962 158.5 118.5 160.962 118.5 164V176.462C118.5 179.797 115.797 182.5 112.462 182.5Z" fill="white" stroke="url(#paint4_linear_993_3740)" stroke-width="3"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_dd_993_3740" x="18" y="77" width="348" height="236" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_993_3740"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.5"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_993_3740" result="effect2_dropShadow_993_3740"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_993_3740" result="shape"/>
+</filter>
+<filter id="filter1_ii_993_3740" x="24" y="62" width="336" height="245" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-18"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.122552 0 0 0 0 0.135868 0 0 0 0 0.202448 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_993_3740"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.56525 0 0 0 0 0.518576 0 0 0 0 0.69809 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_993_3740" result="effect2_innerShadow_993_3740"/>
+</filter>
+<filter id="filter2_i_993_3740" x="24" y="80" width="336" height="232" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="8"/>
+<feGaussianBlur stdDeviation="16"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.200208 0 0 0 0 0.21128 0 0 0 0 0.316458 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_993_3740"/>
+</filter>
+<filter id="filter3_f_993_3740" x="-2.00073" y="47.9419" width="378.001" height="254.35" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_993_3740"/>
+</filter>
+<linearGradient id="paint0_linear_993_3740" x1="192" y1="80" x2="192" y2="304" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A4067" stop-opacity="0"/>
+<stop offset="1" stop-color="#3742A4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_3740" x1="192" y1="80" x2="192" y2="304" gradientUnits="userSpaceOnUse">
+<stop stop-color="#28293C"/>
+<stop offset="1" stop-color="#28293C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_993_3740" x1="192" y1="80" x2="192" y2="304" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#171B2F"/>
+</linearGradient>
+<linearGradient id="paint3_linear_993_3740" x1="192" y1="192" x2="192" y2="221" gradientUnits="userSpaceOnUse">
+<stop stop-color="#363954"/>
+<stop offset="1" stop-color="#292C3F" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_993_3740" x1="112" y1="120" x2="112" y2="184" gradientUnits="userSpaceOnUse">
+<stop stop-color="#D7D7D7" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+</defs>
+</svg>

apps/landing/public/images/icons/heart.svg

@@ -0,0 +1,102 @@
+<svg width="384" height="384" viewBox="0 0 384 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_993_2798)">
+<mask id="mask0_993_2798" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="27" y="59" width="330" height="275">
+<path d="M192 333.92L144.4 301.2C124.16 287.28 56.4001 236.96 33.0401 172.72C17.2001 129.12 39.6801 80.9598 83.2801 65.0398C126.8 49.1998 174.88 71.5998 190.88 115.04C191.2 115.68 191.6 116.4 192 117.2C192.48 116.4 192.88 115.6 193.2 114.96C209.04 71.3598 257.2 49.0398 300.8 64.8798C344.4 80.7198 366.8 129.12 350.96 172.72C327.6 237.04 259.84 287.36 239.6 301.2L192 333.92Z" fill="url(#paint0_linear_993_2798)"/>
+</mask>
+<g mask="url(#mask0_993_2798)">
+<g filter="url(#filter1_ii_993_2798)">
+<g filter="url(#filter2_ii_993_2798)">
+<path d="M192 333.92L144.4 301.2C124.16 287.28 56.4001 236.96 33.0401 172.72C17.2001 129.12 39.6801 80.9598 83.2801 65.0398C126.8 49.1998 174.88 71.5998 190.88 115.04C191.2 115.68 191.6 116.4 192 117.2C192.48 116.4 192.88 115.6 193.2 114.96C209.04 71.3598 257.2 49.0398 300.8 64.8798C344.4 80.7198 366.8 129.12 350.96 172.72C327.6 237.04 259.84 287.36 239.6 301.2L192 333.92Z" fill="url(#paint1_linear_993_2798)"/>
+<path d="M188.122 116.233L188.065 116.077C172.634 74.1829 126.27 52.5862 84.3074 67.8585C42.2607 83.2123 20.5863 129.653 35.8595 171.695L188.122 116.233ZM188.122 116.233L188.197 116.381M188.122 116.233L188.197 116.381M188.197 116.381C188.363 116.714 188.547 117.062 188.721 117.391L188.757 117.46C188.947 117.821 189.133 118.174 189.317 118.541L191.761 123.43M188.197 116.381L191.761 123.43M191.761 123.43L194.573 118.743M191.761 123.43L194.573 118.743M194.573 118.743C195.112 117.844 195.555 116.959 195.869 116.329L195.883 116.301L195.961 116.147M194.573 118.743L195.961 116.147M195.961 116.147L196.02 115.984M195.961 116.147L196.02 115.984M196.02 115.984C211.29 73.9511 257.723 52.4218 299.776 67.6995C341.807 82.9696 363.419 129.641 348.14 171.695L348.14 171.696M196.02 115.984L348.14 171.696M348.14 171.696C336.674 203.267 314.236 231.561 291.991 253.767C269.774 275.944 247.933 291.868 237.907 298.723L237.901 298.728M348.14 171.696L237.901 298.728M237.901 298.728L192 330.279M237.901 298.728L192 330.279M192 330.279L146.1 298.728C136.069 291.829 114.227 275.884 92.0095 253.707C69.7637 231.501 47.3259 203.227 35.8598 171.695L192 330.279Z" stroke="url(#paint2_linear_993_2798)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M189.473 115.558L189.501 115.636L189.538 115.711C189.697 116.028 189.873 116.362 190.049 116.695L190.084 116.76C190.274 117.12 190.467 117.487 190.658 117.871L191.88 120.315L193.286 117.972C193.796 117.122 194.217 116.28 194.534 115.646L194.542 115.631L194.58 115.553L194.61 115.472C210.165 72.6555 257.462 50.7308 300.288 66.2897C343.104 81.8447 365.109 129.381 349.55 172.208C337.977 204.074 315.368 232.55 293.05 254.828C270.747 277.092 248.826 293.074 238.753 299.962L238.75 299.964L192 332.1L145.25 299.964C145.25 299.964 145.25 299.964 145.25 299.964C135.174 293.034 113.253 277.032 90.9498 254.768C68.6319 232.49 46.023 204.033 34.4499 172.208C18.8931 129.387 40.97 82.0866 83.7931 66.4494C126.534 50.8928 173.757 72.8912 189.473 115.558Z" stroke="url(#paint3_linear_993_2798)" stroke-width="3"/>
+<path d="M189.473 115.558L189.501 115.636L189.538 115.711C189.697 116.028 189.873 116.362 190.049 116.695L190.084 116.76C190.274 117.12 190.467 117.487 190.658 117.871L191.88 120.315L193.286 117.972C193.796 117.122 194.217 116.28 194.534 115.646L194.542 115.631L194.58 115.553L194.61 115.472C210.165 72.6555 257.462 50.7308 300.288 66.2897C343.104 81.8447 365.109 129.381 349.55 172.208C337.977 204.074 315.368 232.55 293.05 254.828C270.747 277.092 248.826 293.074 238.753 299.962L238.75 299.964L192 332.1L145.25 299.964C145.25 299.964 145.25 299.964 145.25 299.964C135.174 293.034 113.253 277.032 90.9498 254.768C68.6319 232.49 46.023 204.033 34.4499 172.208C18.8931 129.387 40.97 82.0866 83.7931 66.4494C126.534 50.8928 173.757 72.8912 189.473 115.558Z" stroke="url(#paint4_linear_993_2798)" stroke-width="3"/>
+</g>
+<g filter="url(#filter3_f_993_2798)">
+<path d="M191.996 302L156.015 276.935C140.715 266.271 89.4939 227.724 71.8357 178.513C59.862 145.113 76.855 108.22 109.813 96.0246C142.711 83.8904 179.055 101.05 191.15 134.327C191.392 134.817 191.694 135.369 191.996 135.982C192.359 135.369 192.662 134.756 192.903 134.266C204.877 100.866 241.282 83.7678 274.24 95.902C307.198 108.036 324.131 145.113 312.157 178.513C294.499 227.785 243.278 266.333 227.978 276.935L191.996 302Z" fill="#FF5E7B"/>
+</g>
+<g filter="url(#filter4_f_993_2798)">
+<path d="M191.998 250L174.007 237.348C166.357 231.966 140.747 212.508 131.918 187.668C125.931 170.809 134.428 152.187 150.907 146.031C167.355 139.907 185.528 148.568 191.575 165.365C191.696 165.613 191.847 165.891 191.998 166.2C192.18 165.891 192.331 165.582 192.452 165.334C198.439 148.475 216.641 139.845 233.12 145.97C249.599 152.094 258.065 170.809 252.078 187.668C243.249 212.539 217.639 231.997 209.989 237.348L191.998 250Z" fill="#FF9FB1"/>
+<path d="M191.998 250L174.007 237.348C166.357 231.966 140.747 212.508 131.918 187.668C125.931 170.809 134.428 152.187 150.907 146.031C167.355 139.907 185.528 148.568 191.575 165.365C191.696 165.613 191.847 165.891 191.998 166.2C192.18 165.891 192.331 165.582 192.452 165.334C198.439 148.475 216.641 139.845 233.12 145.97C249.599 152.094 258.065 170.809 252.078 187.668C243.249 212.539 217.639 231.997 209.989 237.348L191.998 250Z" fill="#FF869C"/>
+</g>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_dd_993_2798" x="21.9658" y="56.7861" width="340.078" height="286.134" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_993_2798"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.5"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_993_2798" result="effect2_dropShadow_993_2798"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_993_2798" result="shape"/>
+</filter>
+<filter id="filter1_ii_993_2798" x="27.9658" y="27.7861" width="328.078" height="309.134" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-32"/>
+<feGaussianBlur stdDeviation="40"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.575 0 0 0 0 0 0 0 0 0 2.05636e-07 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_993_2798"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="14"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.358333 0 0 0 0 0.358334 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_993_2798" result="effect2_innerShadow_993_2798"/>
+</filter>
+<filter id="filter2_ii_993_2798" x="27.9658" y="59.7861" width="328.078" height="278.306" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="15"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.9875 0 0 0 0 0.0125 0 0 0 0 0.0775005 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_993_2798"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4.17188"/>
+<feGaussianBlur stdDeviation="10"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.675 0 0 0 0 0.696667 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_993_2798" result="effect2_innerShadow_993_2798"/>
+</filter>
+<filter id="filter3_f_993_2798" x="20" y="44" width="344" height="306" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="24" result="effect1_foregroundBlur_993_2798"/>
+</filter>
+<filter id="filter4_f_993_2798" x="82" y="96" width="220" height="202" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="24" result="effect1_foregroundBlur_993_2798"/>
+</filter>
+<linearGradient id="paint0_linear_993_2798" x1="192.005" y1="59.7861" x2="192.005" y2="333.92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF2C3A"/>
+<stop offset="1" stop-color="#E63675"/>
+</linearGradient>
+<linearGradient id="paint1_linear_993_2798" x1="192.005" y1="59.7861" x2="192.005" y2="333.92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF2C3A"/>
+<stop offset="1" stop-color="#E63675"/>
+</linearGradient>
+<linearGradient id="paint2_linear_993_2798" x1="192.005" y1="59.7861" x2="192.005" y2="333.92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A4067" stop-opacity="0"/>
+<stop offset="1" stop-color="#FF979E"/>
+</linearGradient>
+<linearGradient id="paint3_linear_993_2798" x1="192.005" y1="59.7861" x2="192.005" y2="333.92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF4955"/>
+<stop offset="1" stop-color="#1C2290" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_993_2798" x1="192.005" y1="59.7861" x2="192.005" y2="333.92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#84282E"/>
+</linearGradient>
+</defs>
+</svg>

apps/landing/public/images/icons/image.svg

@@ -0,0 +1,88 @@
+<svg width="384" height="384" viewBox="0 0 384 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_818_1876)">
+<g filter="url(#filter1_ii_818_1876)">
+<path d="M319.2 80H64.8C46.6851 80 32 94.6851 32 112.8V271.2C32 289.315 46.6851 304 64.8 304H319.2C337.315 304 352 289.315 352 271.2V112.8C352 94.6851 337.315 80 319.2 80Z" fill="#252838"/>
+<path d="M64.8 83H319.2C335.658 83 349 96.3419 349 112.8V271.2C349 287.658 335.658 301 319.2 301H64.8C48.3419 301 35 287.658 35 271.2V112.8C35 96.3419 48.3419 83 64.8 83Z" stroke="url(#paint0_linear_818_1876)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M64.8 81.5H319.2C336.487 81.5 350.5 95.5135 350.5 112.8V271.2C350.5 288.487 336.487 302.5 319.2 302.5H64.8C47.5135 302.5 33.5 288.487 33.5 271.2V112.8C33.5 95.5135 47.5135 81.5 64.8 81.5Z" stroke="url(#paint1_linear_818_1876)" stroke-width="3"/>
+<path d="M64.8 81.5H319.2C336.487 81.5 350.5 95.5135 350.5 112.8V271.2C350.5 288.487 336.487 302.5 319.2 302.5H64.8C47.5135 302.5 33.5 288.487 33.5 271.2V112.8C33.5 95.5135 47.5135 81.5 64.8 81.5Z" stroke="url(#paint2_linear_818_1876)" stroke-width="3"/>
+<circle cx="124.595" cy="211" r="71" fill="url(#paint3_linear_818_1876)"/>
+<path d="M185.896 126.677C184.781 126.231 184 125.227 184 124C184 122.773 184.781 121.769 185.896 121.323L201.737 115.41C202.518 115.076 203.076 114.518 203.41 113.737L209.323 97.8964C209.769 96.7809 210.773 96 212 96C213.227 96 214.231 96.7809 214.677 97.8964L220.59 113.737C220.924 114.518 221.482 115.076 222.263 115.41L238.104 121.323C239.219 121.769 240 122.773 240 124C240 125.227 239.219 126.231 238.104 126.677L222.263 132.59C221.482 132.924 220.924 133.482 220.59 134.263L214.677 150.104C214.231 151.219 213.227 152 212 152C210.773 152 209.769 151.219 209.323 150.104L203.41 134.263C203.076 133.482 202.518 132.924 201.737 132.59L185.896 126.677Z" fill="#3F4563"/>
+<path d="M277.714 121.6C278.057 120.686 278.971 120 280 120C281.029 120 281.943 120.686 282.286 121.6L291.657 146.857C291.886 147.543 292.457 148.114 293.143 148.343L318.4 157.714C319.314 158.057 320 158.971 320 160C320 161.029 319.314 161.943 318.4 162.286L293.143 171.657C292.457 171.886 291.886 172.457 291.657 173.143L282.286 198.4C281.943 199.314 281.029 200 280 200C278.971 200 278.057 199.314 277.714 198.4L268.343 173.143C268.114 172.457 267.543 171.886 266.857 171.657L241.6 162.286C240.686 161.943 240 161.029 240 160C240 158.971 240.686 158.057 241.6 157.714L266.857 148.343C267.543 148.114 268.114 147.543 268.343 146.857L277.714 121.6Z" fill="#3F4563"/>
+<path d="M137.067 113.493C136.427 113.28 136 112.64 136 112C136 111.36 136.427 110.72 137.067 110.507L146.133 107.093C146.133 107.093 146.88 106.56 147.093 106.133L150.507 97.0667C150.72 96.4267 151.36 96 152 96C152.64 96 153.28 96.4267 153.493 97.0667L156.907 106.133C156.907 106.133 157.44 106.88 157.867 107.093L166.933 110.507C167.573 110.72 168 111.36 168 112C168 112.64 167.573 113.28 166.933 113.493L157.867 116.907C157.867 116.907 157.12 117.44 156.907 117.867L153.493 126.933C153.28 127.573 152.64 128 152 128C151.36 128 150.72 127.573 150.507 126.933L147.093 117.867C147.093 117.867 146.56 117.12 146.133 116.907L137.067 113.493Z" fill="#3F4563"/>
+<path d="M346 198C292.88 198.001 262.642 247.833 207.433 249.692C182.099 250.505 157.037 239.121 133.519 222.278V290H346V198Z" fill="url(#paint4_linear_818_1876)"/>
+<path d="M38 201.685C38 200.192 39.1059 198.921 40.5885 198.746C111.418 190.396 178.414 254.855 249.572 256.909C282.623 257.819 315.318 245.084 346 226.242V302H38V201.685Z" fill="#1E202D"/>
+<path d="M17.5 108C17.5 84.521 36.521 65.5 60 65.5H70C72.4853 65.5 74.5 67.5147 74.5 70V82C74.5 84.4853 72.4853 86.5 70 86.5H60C48.119 86.5 38.5 96.119 38.5 108V118C38.5 120.485 36.4853 122.5 34 122.5H22C19.5147 122.5 17.5 120.485 17.5 118V108Z" fill="#343951" stroke="url(#paint5_linear_818_1876)" stroke-width="3"/>
+<path d="M309.5 70C309.5 67.5147 311.515 65.5 314 65.5H324C347.479 65.5 366.5 84.521 366.5 108V118C366.5 120.485 364.485 122.5 362 122.5H350C347.515 122.5 345.5 120.485 345.5 118V108C345.5 96.119 335.881 86.5 324 86.5H314C311.515 86.5 309.5 84.4853 309.5 82V70Z" fill="#343951" stroke="url(#paint6_linear_818_1876)" stroke-width="3"/>
+<path d="M362 261.5C364.485 261.5 366.5 263.515 366.5 266V276C366.5 299.479 347.479 318.5 324 318.5H314C311.515 318.5 309.5 316.485 309.5 314V302C309.5 299.515 311.515 297.5 314 297.5H324C335.881 297.5 345.5 287.881 345.5 276V266C345.5 263.515 347.515 261.5 350 261.5H362Z" fill="#343951" stroke="url(#paint7_linear_818_1876)" stroke-width="3"/>
+<path d="M17.5 276V266C17.5 263.515 19.5147 261.5 22 261.5H34C36.4853 261.5 38.5 263.515 38.5 266V276C38.5 287.881 48.119 297.5 60 297.5H70C72.4853 297.5 74.5 299.515 74.5 302V314C74.5 316.485 72.4853 318.5 70 318.5H60C36.521 318.5 17.5 299.479 17.5 276Z" fill="#343951" stroke="url(#paint8_linear_818_1876)" stroke-width="3"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_dd_818_1876" x="10" y="61" width="364" height="268" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_818_1876"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.5"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_818_1876" result="effect2_dropShadow_818_1876"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_818_1876" result="shape"/>
+</filter>
+<filter id="filter1_ii_818_1876" x="16" y="46" width="352" height="277" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-18"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.16 0 0 0 0 0.173333 0 0 0 0 0.24 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_1876"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.56525 0 0 0 0 0.518576 0 0 0 0 0.69809 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_818_1876" result="effect2_innerShadow_818_1876"/>
+</filter>
+<linearGradient id="paint0_linear_818_1876" x1="192" y1="80" x2="192" y2="304" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A4067" stop-opacity="0"/>
+<stop offset="1" stop-color="#3742A4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_818_1876" x1="192" y1="80" x2="192" y2="304" gradientUnits="userSpaceOnUse">
+<stop stop-color="#28293C"/>
+<stop offset="1" stop-color="#28293C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_818_1876" x1="192" y1="80" x2="192" y2="304" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#121523"/>
+</linearGradient>
+<linearGradient id="paint3_linear_818_1876" x1="124.595" y1="140" x2="124.595" y2="219.875" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3F4563"/>
+<stop offset="1" stop-color="#3F4563" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_818_1876" x1="251.564" y1="197.032" x2="251.564" y2="290.001" gradientUnits="userSpaceOnUse">
+<stop stop-color="#252838"/>
+<stop offset="1" stop-color="#3F4563"/>
+</linearGradient>
+<linearGradient id="paint5_linear_818_1876" x1="46" y1="64" x2="46" y2="144" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414762"/>
+<stop offset="1" stop-color="#3D435E" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint6_linear_818_1876" x1="338" y1="64" x2="338" y2="144" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414762"/>
+<stop offset="1" stop-color="#3D435E" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint7_linear_818_1876" x1="338" y1="260" x2="338" y2="340" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414762"/>
+<stop offset="1" stop-color="#3D435E" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint8_linear_818_1876" x1="46" y1="260" x2="46" y2="340" gradientUnits="userSpaceOnUse">
+<stop stop-color="#414762"/>
+<stop offset="1" stop-color="#3D435E" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

apps/landing/public/images/icons/lock.svg

@@ -0,0 +1,108 @@
+<svg width="384" height="384" viewBox="0 0 384 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_919_2746)">
+<g filter="url(#filter1_ii_919_2746)">
+<path d="M122 152V118C122 80.43 152.877 50 191 50C229.123 50 260 80.43 260 118V152" stroke="#D1D3D4" stroke-width="36" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M122 152V118C122 80.43 152.877 50 191 50C229.123 50 260 80.43 260 118V152" stroke="url(#paint0_linear_919_2746)" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g filter="url(#filter2_ii_919_2746)">
+<path d="M294 148H90C71.2223 148 56 163.304 56 182.182V301.818C56 320.696 71.2223 336 90 336H294C312.778 336 328 320.696 328 301.818V182.182C328 163.304 312.778 148 294 148Z" fill="url(#paint1_linear_919_2746)"/>
+<path d="M90 151H294C311.106 151 325 164.945 325 182.182V301.818C325 319.055 311.106 333 294 333H90C72.8942 333 59 319.055 59 301.818V182.182C59 164.945 72.8942 151 90 151Z" stroke="url(#paint2_linear_919_2746)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M90 149.5H294C311.942 149.5 326.5 164.125 326.5 182.182V301.818C326.5 319.875 311.942 334.5 294 334.5H90C72.0583 334.5 57.5 319.875 57.5 301.818V182.182C57.5 164.125 72.0583 149.5 90 149.5Z" stroke="url(#paint3_linear_919_2746)" stroke-width="3"/>
+<path d="M90 149.5H294C311.942 149.5 326.5 164.125 326.5 182.182V301.818C326.5 319.875 311.942 334.5 294 334.5H90C72.0583 334.5 57.5 319.875 57.5 301.818V182.182C57.5 164.125 72.0583 149.5 90 149.5Z" stroke="url(#paint4_linear_919_2746)" stroke-width="3"/>
+</g>
+<g filter="url(#filter3_d_919_2746)">
+<mask id="path-6-inside-1_919_2746" fill="white">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M213.711 244.075C221.142 237.838 225.867 228.472 225.867 218C225.867 199.222 210.674 184 191.933 184C173.192 184 158 199.222 158 218C158 228.593 162.835 238.054 170.414 244.29L158.849 274.44C156.643 280.39 161.055 286 166.654 286H217.554C223.153 286 227.734 280.39 225.358 274.44L213.711 244.075Z"/>
+</mask>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M213.711 244.075C221.142 237.838 225.867 228.472 225.867 218C225.867 199.222 210.674 184 191.933 184C173.192 184 158 199.222 158 218C158 228.593 162.835 238.054 170.414 244.29L158.849 274.44C156.643 280.39 161.055 286 166.654 286H217.554C223.153 286 227.734 280.39 225.358 274.44L213.711 244.075Z" fill="url(#paint5_radial_919_2746)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M213.711 244.075C221.142 237.838 225.867 228.472 225.867 218C225.867 199.222 210.674 184 191.933 184C173.192 184 158 199.222 158 218C158 228.593 162.835 238.054 170.414 244.29L158.849 274.44C156.643 280.39 161.055 286 166.654 286H217.554C223.153 286 227.734 280.39 225.358 274.44L213.711 244.075Z" fill="black" fill-opacity="0.2"/>
+<path d="M213.711 244.075L211.139 241.011L208.955 242.845L209.976 245.508L213.711 244.075ZM170.414 244.29L174.149 245.722L175.181 243.032L172.955 241.201L170.414 244.29ZM158.849 274.44L155.114 273.007L155.106 273.029L155.098 273.05L158.849 274.44ZM225.358 274.44L221.624 275.873L221.633 275.898L221.643 275.923L225.358 274.44ZM216.283 247.139C224.581 240.173 229.867 229.702 229.867 218H221.867C221.867 227.242 217.702 235.503 211.139 241.011L216.283 247.139ZM229.867 218C229.867 197.021 212.891 180 191.933 180V188C208.458 188 221.867 201.424 221.867 218H229.867ZM191.933 180C170.976 180 154 197.021 154 218H162C162 201.424 175.409 188 191.933 188V180ZM154 218C154 229.838 159.408 240.415 167.873 247.379L172.955 241.201C166.261 235.694 162 227.348 162 218H154ZM166.679 242.857L155.114 273.007L162.584 275.873L174.149 245.722L166.679 242.857ZM155.098 273.05C151.89 281.704 158.367 290 166.654 290V282C163.743 282 161.396 279.076 162.6 275.83L155.098 273.05ZM166.654 290H217.554V282H166.654V290ZM217.554 290C225.699 290 232.6 281.791 229.073 272.957L221.643 275.923C222.867 278.989 220.606 282 217.554 282V290ZM229.093 273.007L217.446 242.643L209.976 245.508L221.624 275.873L229.093 273.007Z" fill="url(#paint6_linear_919_2746)" mask="url(#path-6-inside-1_919_2746)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_dd_919_2746" x="50" y="29" width="284" height="316" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_919_2746"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.5"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_919_2746" result="effect2_dropShadow_919_2746"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_919_2746" result="shape"/>
+</filter>
+<filter id="filter1_ii_919_2746" x="104" y="32" width="174" height="142.172" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4.17188"/>
+<feGaussianBlur stdDeviation="4.17188"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.529167 0 0 0 0 0.529167 0 0 0 0 0.529167 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_919_2746"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4.17188"/>
+<feGaussianBlur stdDeviation="4.17188"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_919_2746" result="effect2_innerShadow_919_2746"/>
+</filter>
+<filter id="filter2_ii_919_2746" x="56" y="148" width="272" height="192.172" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="15"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0125 0 0 0 0 0.695 0 0 0 0 0.9875 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_919_2746"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4.17188"/>
+<feGaussianBlur stdDeviation="4.17188"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.425 0 0 0 0 0.75989 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_919_2746" result="effect2_innerShadow_919_2746"/>
+</filter>
+<filter id="filter3_d_919_2746" x="141.312" y="167.312" width="101.375" height="135.375" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="8.34375"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0705882 0 0 0 0 0.760784 0 0 0 0 0.980392 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_919_2746"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_919_2746" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_919_2746" x1="191" y1="50" x2="191" y2="152" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F5F5F5"/>
+<stop offset="1" stop-color="#D9D9D9"/>
+</linearGradient>
+<linearGradient id="paint1_linear_919_2746" x1="192" y1="148" x2="192" y2="336" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2C9DFF"/>
+<stop offset="1" stop-color="#368CE6"/>
+</linearGradient>
+<linearGradient id="paint2_linear_919_2746" x1="192" y1="148" x2="192" y2="336" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A4067" stop-opacity="0"/>
+<stop offset="1" stop-color="#97E0FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_919_2746" x1="192" y1="148" x2="192" y2="336" gradientUnits="userSpaceOnUse">
+<stop stop-color="#49B3FF"/>
+<stop offset="1" stop-color="#1C2290" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_919_2746" x1="192" y1="148" x2="192" y2="336" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#285184"/>
+</linearGradient>
+<radialGradient id="paint5_radial_919_2746" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(191.933 235) rotate(90) scale(68 83.1693)">
+<stop stop-color="#075ABB"/>
+<stop offset="1" stop-color="#089AC9"/>
+</radialGradient>
+<linearGradient id="paint6_linear_919_2746" x1="192" y1="184" x2="192" y2="286" gradientUnits="userSpaceOnUse">
+<stop stop-color="#11C2FA"/>
+<stop offset="1" stop-color="#147AC4"/>
+</linearGradient>
+</defs>
+</svg>

apps/landing/public/images/icons/node.svg

@@ -0,0 +1,73 @@
+<svg width="384" height="384" viewBox="0 0 384 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_818_1884)">
+<g filter="url(#filter1_ii_818_1884)">
+<path d="M341.12 241.84V142.24C341.12 120.88 329.6 101.04 310.96 90.56L220.8 39.68C202.72 29.44 180.56 29.44 162.48 39.68L72.16 90.56C53.52 101.04 42 120.8 42 142.24V241.76C42 263.12 53.52 282.96 72.16 293.44L162.32 344.4C180.4 354.64 202.56 354.64 220.64 344.4L310.8 293.44C329.44 282.96 340.96 263.2 340.96 241.76H341.04L341.12 241.84Z" fill="#2B2D40"/>
+<path d="M338.12 142.24V238.76H337.96V241.76C337.96 262.121 327.02 280.879 309.33 290.825L309.324 290.828L219.164 341.788L219.162 341.79C201.999 351.51 180.961 351.51 163.798 341.79L163.796 341.788L73.6362 290.828L73.6302 290.825C55.9418 280.88 45 262.044 45 241.76V142.24C45 121.879 55.9399 103.121 73.6302 93.175L73.6324 93.1738L163.952 42.2938L163.958 42.2904C181.121 32.5699 202.159 32.5699 219.322 42.2904L219.326 42.2927L309.486 93.1727L309.49 93.175C327.178 103.12 338.12 121.956 338.12 142.24Z" stroke="url(#paint0_linear_818_1884)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M339.62 240.26H339.46V241.76C339.46 262.661 328.23 281.919 310.065 292.132L310.062 292.134L219.902 343.094L219.901 343.095C202.279 353.075 180.681 353.075 163.059 343.095L163.058 343.094L72.8981 292.134L72.8951 292.132C54.7309 281.92 43.5 262.582 43.5 241.76V142.24C43.5 121.339 54.7299 102.081 72.8951 91.8675L72.8962 91.8669L163.216 40.9869L163.219 40.9852C180.841 31.0049 202.439 31.0049 220.061 40.9852L220.063 40.9863L310.223 91.8663L310.225 91.8675C328.389 102.08 339.62 121.418 339.62 142.24V240.26Z" stroke="url(#paint1_linear_818_1884)" stroke-width="3"/>
+<path d="M339.62 240.26H339.46V241.76C339.46 262.661 328.23 281.919 310.065 292.132L310.062 292.134L219.902 343.094L219.901 343.095C202.279 353.075 180.681 353.075 163.059 343.095L163.058 343.094L72.8981 292.134L72.8951 292.132C54.7309 281.92 43.5 262.582 43.5 241.76V142.24C43.5 121.339 54.7299 102.081 72.8951 91.8675L72.8962 91.8669L163.216 40.9869L163.219 40.9852C180.841 31.0049 202.439 31.0049 220.061 40.9852L220.063 40.9863L310.223 91.8663L310.225 91.8675C328.389 102.08 339.62 121.418 339.62 142.24V240.26Z" stroke="url(#paint2_linear_818_1884)" stroke-width="3"/>
+<g filter="url(#filter2_i_818_1884)">
+<path d="M299.44 232V152.08C299.44 139.2 292.56 127.36 281.28 121.04L209.12 80.3198C198.16 74.2398 184.96 74.2398 174 80.3198L101.84 121.04C90.7197 127.36 83.6797 139.2 83.6797 152.08V232C83.6797 244.88 90.5597 256.72 101.84 263.04L174 303.76C184.96 309.84 198.16 309.84 209.12 303.76L281.28 263.04C292.4 256.72 299.44 244.88 299.44 232Z" fill="#242635"/>
+<path d="M250.702 145.786L250.703 145.786C257.752 149.761 262.1 157.182 262.1 165.28V218.72C262.1 226.808 257.68 234.235 250.7 238.215C250.699 238.215 250.698 238.216 250.697 238.217L202.546 265.411C202.546 265.412 202.545 265.412 202.544 265.412C195.721 269.236 187.398 269.236 180.575 265.412C180.574 265.412 180.574 265.412 180.573 265.411L132.417 238.214L132.416 238.213C125.367 234.238 121.02 226.817 121.02 218.72V165.28C121.02 157.191 125.439 149.764 132.42 145.784C132.421 145.784 132.421 145.783 132.422 145.783L180.573 118.588C180.574 118.588 180.574 118.587 180.575 118.587C187.399 114.764 195.721 114.764 202.544 118.587C202.545 118.588 202.546 118.588 202.546 118.588L250.702 145.786Z" fill="#2F9FFF" stroke="url(#paint3_linear_818_1884)" stroke-width="3"/>
+<path d="M231.6 206.72V177.28C231.6 172.56 229.04 168.16 224.88 165.84L198.16 150.8C194.08 148.56 189.2 148.56 185.12 150.8L158.4 165.84C154.24 168.16 151.68 172.56 151.68 177.28V206.72C151.68 211.44 154.24 215.84 158.4 218.16L185.12 233.2C189.2 235.44 194.08 235.44 198.16 233.2L224.88 218.16C229.04 215.84 231.6 211.44 231.6 206.72Z" fill="#242635"/>
+</g>
+</g>
+</g>
+<defs>
+<filter id="filter0_dd_818_1884" x="36" y="29" width="311.12" height="332.08" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_818_1884"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.5"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_818_1884" result="effect2_dropShadow_818_1884"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_818_1884" result="shape"/>
+</filter>
+<filter id="filter1_ii_818_1884" x="42" y="14" width="299.12" height="341.08" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-18"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.16 0 0 0 0 0.173333 0 0 0 0 0.24 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_1884"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.56525 0 0 0 0 0.518576 0 0 0 0 0.69809 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_818_1884" result="effect2_innerShadow_818_1884"/>
+</filter>
+<filter id="filter2_i_818_1884" x="83.6797" y="75.7598" width="215.76" height="244.56" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="12"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0772569 0 0 0 0 0.0823826 0 0 0 0 0.131076 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_1884"/>
+</filter>
+<linearGradient id="paint0_linear_818_1884" x1="191.56" y1="32" x2="191.56" y2="352.08" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A4067" stop-opacity="0"/>
+<stop offset="1" stop-color="#3742A4"/>
+</linearGradient>
+<linearGradient id="paint1_linear_818_1884" x1="191.56" y1="32" x2="191.56" y2="352.08" gradientUnits="userSpaceOnUse">
+<stop stop-color="#28293C"/>
+<stop offset="1" stop-color="#28293C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_818_1884" x1="191.56" y1="32" x2="191.56" y2="352.08" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#121523"/>
+</linearGradient>
+<linearGradient id="paint3_linear_818_1884" x1="191.56" y1="114.22" x2="191.56" y2="269.78" gradientUnits="userSpaceOnUse">
+<stop stop-color="#66B8FF"/>
+<stop offset="1" stop-color="#2F9FFF"/>
+</linearGradient>
+</defs>
+</svg>

apps/landing/public/images/icons/package.svg

@@ -0,0 +1,97 @@
+<svg width="384" height="384" viewBox="0 0 384 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_818_1888)">
+<g filter="url(#filter1_i_818_1888)">
+<path d="M99.8401 52.0394H284.16C310.56 52.0394 331.961 73.4405 331.961 99.8401V284.16C331.961 310.56 310.56 331.961 284.16 331.961H99.8401C73.4405 331.961 52.0394 310.56 52.0394 284.16V99.8401C52.0394 73.4405 73.4405 52.0394 99.8401 52.0394Z" fill="url(#paint0_linear_818_1888)" stroke="url(#paint1_linear_818_1888)" stroke-width="8.07889"/>
+<g filter="url(#filter2_i_818_1888)">
+<path d="M318.265 176H73.735C68.3585 176 64 179.808 64 184.505V199.496C64 204.192 68.3585 208 73.735 208H318.265C323.642 208 328 204.192 328 199.496V184.505C328 179.808 323.642 176 318.265 176Z" fill="#BF892C"/>
+</g>
+</g>
+<g opacity="0.9">
+<path d="M272 215.921C272 220.383 268.383 224 263.921 224H48V160H232.929C234.907 160 236.817 160.726 238.296 162.041L269.289 189.59C271.013 191.123 272 193.32 272 195.628V200.777C272 201.575 271.764 202.354 271.322 203.018L268 208L271.322 212.982C271.764 213.646 272 214.426 272 215.223V215.921Z" fill="url(#paint2_linear_818_1888)" fill-opacity="0.95"/>
+<path d="M272 215.921C272 220.383 268.383 224 263.921 224H48V160H232.929C234.907 160 236.817 160.726 238.296 162.041L269.289 189.59C271.013 191.123 272 193.32 272 195.628V200.777C272 201.575 271.764 202.354 271.322 203.018L268 208L271.322 212.982C271.764 213.646 272 214.426 272 215.223V215.921Z" fill="url(#paint3_linear_818_1888)"/>
+<path d="M272 215.921C272 220.383 268.383 224 263.921 224H48V160H232.929C234.907 160 236.817 160.726 238.296 162.041L269.289 189.59C271.013 191.123 272 193.32 272 195.628V200.777C272 201.575 271.764 202.354 271.322 203.018L268 208L271.322 212.982C271.764 213.646 272 214.426 272 215.223V215.921Z" fill="url(#paint4_linear_818_1888)" fill-opacity="0.2"/>
+<path d="M266.32 206.88L265.573 208L266.32 209.12L269.641 214.103C269.863 214.435 269.981 214.824 269.981 215.223V215.921C269.981 219.268 267.268 221.98 263.921 221.98H50.0197V162.02H232.929C234.413 162.02 235.845 162.564 236.954 163.55L238.296 162.041L236.954 163.55L267.947 191.099C269.24 192.249 269.981 193.897 269.981 195.628V200.777C269.981 201.176 269.863 201.566 269.641 201.897L266.32 206.88Z" stroke="url(#paint5_radial_818_1888)" stroke-width="4.03945"/>
+<g filter="url(#filter3_d_818_1888)">
+<path d="M232 160H232.928C234.907 160 236.817 160.726 238.296 162.041L269.288 189.59C271.013 191.123 272 193.32 272 195.628V196H269.223C268.426 196 267.646 195.764 266.982 195.322L262 192L256.832 195.445C256.29 195.807 255.652 196 255 196C254.348 196 253.711 195.807 253.168 195.445L248 192L243.018 195.322C242.354 195.764 241.574 196 240.777 196H240C235.582 196 232 192.418 232 188V160Z" fill="#8CCFFF"/>
+<path d="M232 160H232.928C234.907 160 236.817 160.726 238.296 162.041L269.288 189.59C271.013 191.123 272 193.32 272 195.628V196H269.223C268.426 196 267.646 195.764 266.982 195.322L262 192L256.832 195.445C256.29 195.807 255.652 196 255 196C254.348 196 253.711 195.807 253.168 195.445L248 192L243.018 195.322C242.354 195.764 241.574 196 240.777 196H240C235.582 196 232 192.418 232 188V160Z" fill="url(#paint6_linear_818_1888)"/>
+</g>
+</g>
+<rect x="80" y="76.0005" width="68.0001" height="68.0001" rx="16.1578" fill="#F8EAD8"/>
+<rect x="164" y="84.0005" width="92.0001" height="20" rx="4.03945" fill="#F8EAD8"/>
+<rect x="164" y="112" width="44.0001" height="20" rx="4.03945" fill="#F8EAD8"/>
+</g>
+<defs>
+<filter id="filter0_dd_818_1888" x="42" y="45" width="300" height="300" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_818_1888"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.5"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_818_1888" result="effect2_dropShadow_818_1888"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_818_1888" result="shape"/>
+</filter>
+<filter id="filter1_i_818_1888" x="48" y="35.8817" width="288" height="300.119" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-12.1183"/>
+<feGaussianBlur stdDeviation="14.1381"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.654167 0 0 0 0 0.418612 0 0 0 0 0.248038 0 0 0 1 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_1888"/>
+</filter>
+<filter id="filter2_i_818_1888" x="64" y="176" width="264" height="48.1578" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="16.1578"/>
+<feGaussianBlur stdDeviation="8.07889"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.516667 0 0 0 0 0.228711 0 0 0 0 0.137778 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_1888"/>
+</filter>
+<filter id="filter3_d_818_1888" x="223.921" y="160" width="56.1578" height="52.1578" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="8.07889"/>
+<feGaussianBlur stdDeviation="4.03945"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.00708333 0 0 0 0 0.0713782 0 0 0 0 0.425 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_818_1888"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_818_1888" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_818_1888" x1="192" y1="48" x2="192" y2="336" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD690"/>
+<stop offset="1" stop-color="#CEAD75"/>
+</linearGradient>
+<linearGradient id="paint1_linear_818_1888" x1="192" y1="48" x2="192" y2="336" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFE0B1"/>
+<stop offset="1" stop-color="#BB8730"/>
+</linearGradient>
+<linearGradient id="paint2_linear_818_1888" x1="134" y1="160" x2="134" y2="224" gradientUnits="userSpaceOnUse">
+<stop stop-color="#068BFF"/>
+<stop offset="1" stop-color="#1888EB"/>
+</linearGradient>
+<linearGradient id="paint3_linear_818_1888" x1="86" y1="224" x2="48" y2="224" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2599FF" stop-opacity="0"/>
+<stop offset="1" stop-color="#0358A4"/>
+</linearGradient>
+<linearGradient id="paint4_linear_818_1888" x1="160" y1="160" x2="160" y2="224" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint5_radial_818_1888" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(218 146) rotate(110.556) scale(68.3521 239.232)">
+<stop stop-color="#51B6FF"/>
+<stop offset="1" stop-color="#006BB9" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint6_linear_818_1888" x1="254" y1="174" x2="236" y2="198" gradientUnits="userSpaceOnUse">
+<stop offset="0.197917" stop-color="#6DC2FF"/>
+<stop offset="1" stop-color="#8CCFFF"/>
+</linearGradient>
+</defs>
+</svg>

apps/landing/public/images/icons/video.svg

@@ -0,0 +1,147 @@
+<svg width="384" height="384" viewBox="0 0 384 384" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_818_3772)">
+<g filter="url(#filter1_ii_818_3772)">
+<g clip-path="url(#clip0_818_3772)">
+<path d="M328 176H56C47.2 176 40 183.2 40 192V312C40 329.68 54.32 344 72 344H312C329.68 344 344 329.68 344 312V192C344 183.2 336.8 176 328 176Z" fill="url(#paint0_linear_818_3772)"/>
+<path d="M56 179H328C335.143 179 341 184.857 341 192V312C341 328.023 328.023 341 312 341H72C55.9769 341 43 328.023 43 312V192C43 184.857 48.8569 179 56 179Z" stroke="url(#paint1_linear_818_3772)" stroke-opacity="0.3" stroke-width="6"/>
+<path d="M56 177.5H328C335.972 177.5 342.5 184.028 342.5 192V312C342.5 328.851 328.852 342.5 312 342.5H72C55.1484 342.5 41.5 328.851 41.5 312V192C41.5 184.028 48.0284 177.5 56 177.5Z" stroke="url(#paint2_linear_818_3772)" stroke-width="3"/>
+<path d="M56 177.5H328C335.972 177.5 342.5 184.028 342.5 192V312C342.5 328.851 328.852 342.5 312 342.5H72C55.1484 342.5 41.5 328.851 41.5 312V192C41.5 184.028 48.0284 177.5 56 177.5Z" stroke="url(#paint3_linear_818_3772)" stroke-width="3"/>
+<g clip-path="url(#clip1_818_3772)" filter="url(#filter2_i_818_3772)">
+<mask id="mask0_818_3772" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="40" y="175" width="304" height="57">
+<path d="M344 176H40V232H344V176Z" fill="#2E3192"/>
+</mask>
+<g mask="url(#mask0_818_3772)">
+<rect width="32" height="269.885" transform="matrix(0.806067 0.591824 -0.692145 0.721758 170.805 29.1143)" fill="#232634"/>
+<rect width="44.4251" height="269.885" transform="matrix(0.806067 0.591824 -0.692145 0.721758 196.599 48.0527)" fill="white"/>
+<rect width="44.4251" height="269.885" transform="matrix(0.806067 0.591824 -0.692145 0.721758 232.408 74.3442)" fill="#1D1E2B"/>
+<rect width="44.4251" height="269.885" transform="matrix(0.806067 0.591824 -0.692145 0.721758 268.218 100.636)" fill="white"/>
+<rect width="44.4251" height="269.885" transform="matrix(0.806067 0.591824 -0.692145 0.721758 304.028 126.928)" fill="#1D1E2B"/>
+<rect width="64" height="269.885" transform="matrix(0.806067 0.591824 -0.692145 0.721758 339.837 153.22)" fill="white"/>
+</g>
+</g>
+</g>
+</g>
+<g filter="url(#filter3_ii_818_3772)">
+<path d="M42.2117 135.182C38.7811 122.379 46.379 109.219 59.1822 105.788L306.459 39.5307C319.262 36.1001 332.423 43.698 335.853 56.5012L344.135 87.4109C346.422 95.9463 341.357 104.72 332.822 107.007L77.8172 175.335C65.014 178.766 51.8539 171.168 48.4233 158.364L42.2117 135.182Z" fill="#2B2E40"/>
+<g filter="url(#filter4_i_818_3772)">
+<g clip-path="url(#clip2_818_3772)">
+<mask id="mask1_818_3772" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="38" y="41" width="309" height="133">
+<path d="M38.0679 119.728L331.709 41.0469L346.203 95.1387L52.5618 173.82L38.0679 119.728Z" fill="#2E3192"/>
+</mask>
+<g mask="url(#mask1_818_3772)">
+<rect width="64" height="269.885" transform="matrix(-0.625425 0.780284 0.855366 0.518024 167.346 -66.9785)" fill="white"/>
+<rect width="46.4251" height="269.885" transform="matrix(-0.625425 0.780284 0.855366 0.518024 127.319 -17.0405)" fill="#1D1E2A"/>
+<rect width="46.4251" height="269.885" transform="matrix(-0.625425 0.780284 0.855366 0.518024 98.2834 19.1846)" fill="white"/>
+<rect width="46.4251" height="269.885" transform="matrix(-0.625425 0.780284 0.855366 0.518024 69.248 55.4092)" fill="#1D1E2A"/>
+<rect width="46.4251" height="269.885" transform="matrix(-0.625425 0.780284 0.855366 0.518024 40.2126 91.6338)" fill="white"/>
+<rect width="24" height="269.885" transform="matrix(-0.625425 0.780284 0.855366 0.518024 11.1772 127.858)" fill="#232634"/>
+</g>
+</g>
+</g>
+</g>
+<path d="M105.898 173.46L107.161 174.725C109.261 177.253 110.5 180.433 110.5 183.92C110.5 191.891 103.972 198.42 96 198.42H56C48.0285 198.42 41.5761 191.97 41.5 184.073V143.92C41.5 135.948 48.0284 129.42 56 129.42C59.9744 129.42 63.6 131.082 66.2185 133.7C66.2188 133.7 66.2191 133.7 66.2193 133.701L105.898 173.46Z" fill="url(#paint4_linear_818_3772)" stroke="url(#paint5_linear_818_3772)" stroke-width="3"/>
+<path d="M56 152C60.4183 152 64 148.418 64 144C64 139.582 60.4183 136 56 136C51.5817 136 48 139.582 48 144C48 148.418 51.5817 152 56 152Z" fill="#636887"/>
+<path d="M56 192C60.4183 192 64 188.418 64 184C64 179.582 60.4183 176 56 176C51.5817 176 48 179.582 48 184C48 188.418 51.5817 192 56 192Z" fill="#636887"/>
+<path d="M96 192C100.418 192 104 188.418 104 184C104 179.582 100.418 176 96 176C91.5817 176 88 179.582 88 184C88 188.418 91.5817 192 96 192Z" fill="#636887"/>
+</g>
+<defs>
+<filter id="filter0_dd_818_3772" x="34" y="35.707" width="316.684" height="317.293" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_818_3772"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1.5"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_818_3772" result="effect2_dropShadow_818_3772"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_818_3772" result="shape"/>
+</filter>
+<filter id="filter1_ii_818_3772" x="40" y="158" width="304" height="189" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-18"/>
+<feGaussianBlur stdDeviation="12"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.16 0 0 0 0 0.173333 0 0 0 0 0.24 0 0 0 0.6 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_3772"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="3"/>
+<feGaussianBlur stdDeviation="3"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.56525 0 0 0 0 0.518576 0 0 0 0 0.69809 0 0 0 0.15 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_818_3772" result="effect2_innerShadow_818_3772"/>
+</filter>
+<filter id="filter2_i_818_3772" x="40" y="176" width="304" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="8.14326"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.466904 0 0 0 0 0.437708 0 0 0 0 0.55 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_3772"/>
+</filter>
+<filter id="filter3_ii_818_3772" x="41.3879" y="25.6671" width="303.297" height="150.492" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="-13.0399"/>
+<feGaussianBlur stdDeviation="8.69327"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.137838 0 0 0 0 0.12783 0 0 0 0 0.154167 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_3772"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4.07163"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.225 0 0 0 0 0.225 0 0 0 0 0.225 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="effect1_innerShadow_818_3772" result="effect2_innerShadow_818_3772"/>
+</filter>
+<filter id="filter4_i_818_3772" x="45.7953" y="43.1174" width="292.681" height="128.632" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset/>
+<feGaussianBlur stdDeviation="8.14326"/>
+<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.466904 0 0 0 0 0.437708 0 0 0 0 0.55 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="shape" result="effect1_innerShadow_818_3772"/>
+</filter>
+<linearGradient id="paint0_linear_818_3772" x1="192" y1="176" x2="192" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#35384A"/>
+<stop offset="1" stop-color="#1E202F"/>
+</linearGradient>
+<linearGradient id="paint1_linear_818_3772" x1="192" y1="176" x2="192" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#4A4067" stop-opacity="0"/>
+<stop offset="1" stop-color="#3742A4"/>
+</linearGradient>
+<linearGradient id="paint2_linear_818_3772" x1="192" y1="176" x2="192" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#28293C"/>
+<stop offset="1" stop-color="#28293C" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_818_3772" x1="192" y1="176" x2="192" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#121523" stop-opacity="0"/>
+<stop offset="1" stop-color="#121523"/>
+</linearGradient>
+<linearGradient id="paint4_linear_818_3772" x1="67.0211" y1="151.354" x2="104.793" y2="196.331" gradientUnits="userSpaceOnUse">
+<stop stop-color="#343951"/>
+<stop offset="1" stop-color="#2A2F3E"/>
+</linearGradient>
+<linearGradient id="paint5_linear_818_3772" x1="76" y1="127.92" x2="76" y2="199.92" gradientUnits="userSpaceOnUse">
+<stop stop-color="#444A67"/>
+<stop offset="1" stop-color="#7A85B9" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0_818_3772">
+<path d="M40 192C40 183.163 47.1634 176 56 176H328C336.837 176 344 183.163 344 192V344H40V192Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_818_3772">
+<rect width="304" height="48" fill="white" transform="translate(40 176)"/>
+</clipPath>
+<clipPath id="clip2_818_3772">
+<path d="M49.9364 133.112C47.6494 124.577 52.7147 115.803 61.2501 113.516L308.527 47.2584C317.063 44.9714 325.836 50.0367 328.123 58.5722L336.405 89.4818C337.549 93.7495 335.016 98.1362 330.748 99.2797L75.744 167.608C67.2085 169.895 58.4351 164.83 56.1481 156.294L49.9364 133.112Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/landing/public/images/mega.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="119.5 239.5 721 721"><circle cx="480" cy="600" r="360.5" fill="#d31b00"/><path fill="#fff" d="M267 454h85l128 130 129-130h82v293h-86V577.25L500.334 682h-40.668L355 577.25V747h-88z"/></svg>

apps/landing/public/images/outlook.svg

@@ -0,0 +1,13 @@
+<svg width="67" height="44" viewBox="0 0 67 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_228_4893)">
+<path d="M25.549 12.0393L25.5497 12.0369L39.6148 20.5463L47.9959 16.984C49.699 16.2403 51.5354 15.859 53.3908 15.8608C53.6999 15.8608 54.0055 15.875 54.3095 15.8955C53.3018 11.9269 51.1747 8.33942 48.1865 5.5689C45.1983 2.79838 41.4777 0.964142 37.4769 0.289081C33.4761 -0.38598 29.3673 0.1272 25.6498 1.76626C21.9323 3.40532 18.7662 6.09969 16.5361 9.52195C16.6078 9.52104 16.6783 9.51649 16.7502 9.51649C19.8586 9.51224 22.9064 10.3861 25.549 12.0393Z" fill="#0364B8"/>
+<path d="M25.5495 12.0371L25.5489 12.0394C22.9062 10.3862 19.8585 9.51236 16.75 9.51662C16.6782 9.51662 16.6075 9.52116 16.536 9.52207C13.4935 9.56012 10.5189 10.4348 7.93167 12.0522C5.34445 13.6695 3.24249 15.9684 1.85165 18.7018C0.460817 21.4351 -0.166307 24.4996 0.0376731 27.5659C0.241653 30.6322 1.26903 33.5844 3.00939 36.1052L15.4128 30.8333L20.9265 28.4897L33.2033 23.2716L39.6146 20.5465L25.5495 12.0371Z" fill="#0078D4"/>
+<path d="M54.3095 15.8955C54.0054 15.875 53.6999 15.8608 53.3908 15.8608C51.5354 15.859 49.6993 16.2418 47.9963 16.9854L39.6147 20.5464L42.0451 22.0167L50.0117 26.8365L53.4875 28.9394L65.3723 36.1298C66.4522 34.105 67.0119 31.8388 67 29.5388C66.9881 27.2389 66.405 24.9787 65.3042 22.9654C64.2035 20.952 62.6201 19.2498 60.6992 18.0146C58.7784 16.7795 56.5814 16.0508 54.3095 15.8955Z" fill="#1490DF"/>
+<path d="M53.4872 28.9394L50.0114 26.8365L42.0448 22.0167L39.6145 20.5464L33.2031 23.2714L20.9264 28.4896L15.4127 30.8332L3.00928 36.1051C4.55062 38.3434 6.6054 40.1717 8.99814 41.4338C11.3909 42.6959 14.0505 43.3544 16.7499 43.353H53.3905C55.8472 43.3537 58.2583 42.6826 60.3678 41.4108C62.4773 40.1391 64.2066 38.3142 65.372 36.1298L53.4872 28.9394Z" fill="#28A8EA"/>
+</g>
+<defs>
+<clipPath id="clip0_228_4893">
+<rect width="67" height="43.3529" fill="white"/>
+</clipPath>
+</defs>
+</svg>

apps/landing/public/images/s3.svg

@@ -0,0 +1,34 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="428" height="512" viewBox="0 0 428 512">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: #e25444;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        fill-rule: evenodd;
+      }
+
+      .cls-2 {
+        fill: #7b1d13;
+      }
+
+      .cls-3 {
+        fill: #58150d;
+      }
+    </style>
+  </defs>
+  <path class="cls-1" d="M378,99L295,257l83,158,34-19V118Z"/>
+  <path class="cls-2" d="M378,99L212,118,127.5,257,212,396l166,19V99Z"/>
+  <path class="cls-3" d="M43,99L16,111V403l27,12L212,257Z"/>
+  <path class="cls-1" d="M42.637,98.667l169.587,47.111V372.444L42.637,415.111V98.667Z"/>
+  <path class="cls-3" d="M212.313,170.667l-72.008-11.556,72.008-81.778,71.83,81.778Z"/>
+  <path class="cls-3" d="M284.143,159.111l-71.919,11.733-71.919-11.733V77.333"/>
+  <path class="cls-3" d="M212.313,342.222l-72.008,13.334,72.008,70.222,71.83-70.222Z"/>
+  <path class="cls-2" d="M212,16L140,54V159l72.224-20.333Z"/>
+  <path class="cls-2" d="M212.224,196.444l-71.919,7.823V309.105l71.919,8.228V196.444Z"/>
+  <path class="cls-2" d="M212.224,373.333L140.305,355.3V458.363L212.224,496V373.333Z"/>
+  <path class="cls-1" d="M284.143,355.3l-71.919,18.038V496l71.919-37.637V355.3Z"/>
+  <path class="cls-1" d="M212.224,196.444l71.919,7.823V309.105l-71.919,8.228V196.444Z"/>
+  <path class="cls-1" d="M212,16l72,38V159l-72-20V16Z"/>
+</svg>

apps/landing/src/app/api/releases/desktop/[version]/[target]/[arch]/route.ts

@@ -0,0 +1,74 @@
+import { NextResponse } from 'next/server';
+import { z } from 'zod';
+import { env } from '~/env';
+
+const version = z.union([z.literal('stable'), z.literal('alpha')]);
+const tauriTarget = z.union([z.literal('linux'), z.literal('windows'), z.literal('darwin')]);
+const tauriArch = z.union([z.literal('x86_64'), z.literal('aarch64')]);
+
+const paramsSchema = z.object({
+	target: tauriTarget,
+	arch: tauriArch,
+	version: version.or(z.string())
+});
+
+export const runtime = 'edge';
+
+export async function GET(
+	_: Request,
+	{
+		params: rawParams
+	}: {
+		params: {
+			version: string;
+			target: string;
+			arch: string;
+		};
+	}
+) {
+	const params = await paramsSchema.parseAsync(rawParams);
+
+	const release = await getRelease(params);
+
+	if (!release) return NextResponse.json({ error: 'Release not found' }, { status: 404 });
+
+	params.version = release.tag_name;
+
+	const asset = release.assets.find(({ name }: any) =>
+		name.startsWith(`Spacedrive-${params.target}-${params.arch}`)
+	);
+
+	if (!asset) return NextResponse.json({ error: 'Asset not found' }, { status: 404 });
+
+	return NextResponse.redirect(asset.browser_download_url);
+}
+
+async function getRelease({ version }: z.infer<typeof paramsSchema>): Promise<any> {
+	switch (version) {
+		case 'alpha': {
+			const data = await githubFetch(`/repos/${env.GITHUB_ORG}/${env.GITHUB_REPO}/releases`);
+
+			return data.find((d: any) => d.tag_name.includes('alpha'));
+		}
+		case 'stable':
+			return githubFetch(`/repos/${env.GITHUB_ORG}/${env.GITHUB_REPO}/releases/latest`);
+		default:
+			return githubFetch(
+				`/repos/$${env.GITHUB_ORG}/${env.GITHUB_REPO}/releases/tags/${version}`
+			);
+	}
+}
+
+const FETCH_META = {
+	headers: {
+		Authorization: `Bearer ${env.GITHUB_PAT}`,
+		Accept: 'application/vnd.github+json'
+	},
+	next: {
+		revalidate: 60
+	}
+} as RequestInit;
+
+async function githubFetch(path: string) {
+	return fetch(`https://api.github.com${path}`, FETCH_META).then((r) => r.json());
+}

apps/landing/src/components/AccessData.tsx

@@ -0,0 +1,32 @@
+import Image from 'next/image';
+import React from 'react';
+
+const AccessData = () => {
+	return (
+		<div className="my-[150px] md:my-[300px]">
+			<Image
+				width={390}
+				height={300}
+				quality={100}
+				className="mx-auto mb-10"
+				alt="data globe"
+				src="/images/globe.webp"
+			/>
+			<div className="relative">
+				<h1
+					className="bg-gradient-to-r from-white to-violet-400 bg-clip-text text-center
+						 text-[25px] font-bold text-transparent md:text-[30px]"
+				>
+					Access data from anywhere
+				</h1>
+				<p className="mx-auto w-full max-w-[800px] text-center text-sm text-ink-faint md:text-lg">
+					users can enjoy the freedom of accessing their important files, documents, and
+					media assets from any device with an internet connection, ensuring productivity
+					and convenience on the go.
+				</p>
+			</div>
+		</div>
+	);
+};
+
+export default AccessData;

apps/landing/src/components/AppEmbed.tsx

@@ -0,0 +1,82 @@
+import clsx from 'clsx';
+import { useEffect, useRef, useState } from 'react';
+import { getWindow } from '~/utils/util';
+
+const AppEmbed = () => {
+	const [showApp, setShowApp] = useState(false);
+	const [iFrameAppReady, setIframeAppReady] = useState(false);
+	const [forceImg, setForceImg] = useState(false);
+	const [imgFallback, setImageFallback] = useState(false);
+	// const iFrame = useRef<HTMLIFrameElement>(null);
+	const window = getWindow()!;
+
+	// useEffect(() => {
+	// 	function handleResize() {
+	// 		if (window.innerWidth < 1000) {
+	// 			setForceImg(true);
+	// 		} else if (forceImg) {
+	// 			setForceImg(false);
+	// 		}
+	// 	}
+	// 	window.addEventListener('resize', handleResize);
+	// 	handleResize();
+	// 	return () => window.removeEventListener('resize', handleResize);
+	// }, [forceImg, window]);
+
+	// after five minutes kill the live demo
+	// useEffect(() => {
+	// 	const timer = setTimeout(() => {
+	// 		setIframeAppReady(false);
+	// 	}, 300000);
+	// 	return () => clearTimeout(timer);
+	// }, []);
+
+	// useEffect(() => {
+	// 	function handleEvent(e: any) {
+	// 		if (e.data === 'spacedrive-hello') {
+	// 			if (!iFrameAppReady) setIframeAppReady(true);
+	// 		}
+	// 	}
+	// 	window.addEventListener('message', handleEvent, false);
+	// 	setShowApp(true);
+
+	// 	return () => window.removeEventListener('message', handleEvent);
+	// }, [iFrameAppReady, window]);
+
+	// useEffect(() => {
+	// 	setTimeout(() => {
+	// 		if (!iFrameAppReady) setImageFallback(true);
+	// 	}, 1500);
+	// }, [iFrameAppReady]);
+
+	const renderImage = (imgFallback && !iFrameAppReady) || forceImg;
+
+	const renderBloom = renderImage || iFrameAppReady;
+
+	return (
+		<div className="w-screen">
+			{/* {renderBloom && ( */}
+			<div className="relative mx-auto max-w-full sm:w-full sm:max-w-[1400px]">
+				<div className="bloom burst bloom-one" />
+				<div className="bloom burst bloom-three" />
+				<div className="bloom burst bloom-two" />
+			</div>
+			{/* )} */}
+			<div className="z-30 mt-8 flex h-[255px] w-full px-6 sm:mt-20 sm:h-[428px] md:h-[428px] lg:h-[628px]">
+				<div className="relative m-auto flex h-full w-full max-w-7xl rounded-lg border border-black transition-opacity">
+					<div className="z-30 flex w-full rounded-lg border-t border-app-line/50 bg-app/30 backdrop-blur">
+						<img className="rounded-lg" src="/images/test.png" />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export const AppEmbedPlaceholder = () => {
+	return (
+		<div className="relative z-30 mt-8 h-[228px] w-screen px-5 sm:mt-16 sm:h-[428px] md:h-[428px] lg:h-[628px]" />
+	);
+};
+
+export default AppEmbed;

apps/landing/src/components/BentoBoxes.tsx

@@ -0,0 +1,219 @@
+import dynamic from 'next/dynamic';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useMemo } from 'react';
+import { Button, tw } from '@sd/ui';
+import { useWindowSize } from '~/hooks/useWindowSize';
+import { MagicCard, MagicContainer } from './MagicCard';
+import PlatformsArt from './PlatformsArt';
+import SpacedropArt from './SpacedropArt';
+
+const Heading = tw.h1`z-30 text-center font-semibold leading-tight text-white text-lg`;
+const Text = tw.p`leading-2 text-zinc-500 z-30 mb-8 mt-1 max-w-4xl text-center text-[14px] lg:leading-8"`;
+
+interface Props {
+	rowSpan?: number;
+	colSpan?: number;
+	className?: string;
+	bgUrl?: string;
+	children?: React.ReactNode;
+}
+
+const BentoBox = ({ rowSpan = 1, colSpan = 1, className = '', children, bgUrl = '' }: Props) => (
+	<div
+		className="rounded-[12px] border border-white/10"
+		style={{
+			gridRow: `span ${rowSpan}`,
+			gridColumn: `span ${colSpan}`,
+			backgroundImage: `url('${bgUrl}')`,
+			backgroundSize: 'cover',
+			backgroundPosition: 'center',
+			backgroundRepeat: 'no-repeat',
+			height: '420px'
+		}}
+	>
+		<MagicCard className={className}>{children}</MagicCard>
+	</div>
+);
+
+// const AppFrameOuter = tw.div`relative m-auto flex w-full max-w-7xl rounded-lg border border-black transition-opacity`;
+// const AppFrameInner = tw.div`z-30 flex w-full rounded-lg border-t border-app-line/50 bg-app/30 backdrop-blur`;
+
+const GitHubButton = dynamic(() => import('react-github-btn'), { ssr: false });
+
+const BentoBoxes = () => {
+	const { width } = useWindowSize();
+	const particleCount = useMemo(() => {
+		if (width) {
+			return width > 768 ? 50 : 25;
+		}
+		return 50;
+	}, [width]);
+	return (
+		<MagicContainer
+			className="flex h-fit w-full max-w-7xl auto-rows-[420px] flex-col gap-4
+		 lg:grid lg:grid-cols-6"
+		>
+			<BentoBox colSpan={4} className="p-6" bgUrl="images/bento/encrypt-bg.webp">
+				<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 h-full w-full" />
+				<div className="relative z-20">
+					<Heading>Encryption</Heading>
+					<Text className="mx-auto max-w-[417px]">
+						Your files and folders are fully encrypted through our algorithm, preventing
+						unauthorized access and guaranteed protection.
+					</Text>
+				</div>
+				<div className="flex h-[80%] w-auto items-start justify-center">
+					<Image
+						className="mx-auto"
+						alt="Encryption"
+						loading="lazy"
+						width={200}
+						height={300}
+						quality={100}
+						src="/images/bento/lock.webp"
+					/>
+				</div>
+			</BentoBox>
+			<BentoBox colSpan={2} className="p-6">
+				<div className="flex h-[75%] w-auto items-center justify-center">
+					<Image
+						className="mx-auto mt-3 brightness-125"
+						alt="Powerful tags"
+						width={300}
+						quality={100}
+						loading="lazy"
+						height={100}
+						src="/images/bento/tags.webp"
+					/>
+				</div>
+				<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 h-full w-full" />
+
+				<div className="relative z-[40] mt-2 md:mt-7">
+					<Heading>Powerful tags</Heading>
+					<Text>
+						Create and apply tags to your files and folders, and instantly locate
+						desired content through filterable tags.
+					</Text>
+				</div>
+			</BentoBox>
+			<BentoBox colSpan={2} className="p-6">
+				<div className="relative z-30">
+					<Heading>Search everything</Heading>
+					<Text className="mx-auto max-w-[417px]">
+						Easily find your files and folders through our search
+					</Text>
+				</div>
+				<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 h-full w-full" />
+				<div className="flex h-[80%] w-auto items-start justify-center">
+					<Image
+						className="mx-auto brightness-110"
+						alt="Search"
+						width={340}
+						loading="lazy"
+						height={300}
+						quality={100}
+						src="/images/bento/search.webp"
+					/>
+				</div>
+			</BentoBox>
+			<BentoBox colSpan={2} className="p-6">
+				<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 h-full w-full" />
+				<div className="flex h-[80%] w-auto items-center justify-center">
+					<Image
+						className="mx-auto brightness-125"
+						alt="Library"
+						width={340}
+						height={300}
+						loading="lazy"
+						quality={100}
+						src="/images/bento/library.webp"
+					/>
+				</div>
+				<div className="relative z-30 mt-[30px]">
+					<Heading>Full Ownership & Control</Heading>
+					<Text className="mx-auto">Make Spacedrive yours</Text>
+				</div>
+			</BentoBox>
+			<BentoBox colSpan={2} className="p-6">
+				<div className="relative z-30">
+					<Heading>Spacedrop</Heading>
+					<Text className="mx-auto max-w-[417px]">
+						Send files to other devices quickly and easily
+					</Text>
+				</div>
+				<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 h-full w-full" />
+				<div className="flex h-[80%] w-auto items-center justify-center">
+					<div
+						style={
+							{
+								'--floatduration': '4s'
+							} as React.CSSProperties
+						}
+						className="floating"
+					>
+						<SpacedropArt />
+					</div>
+				</div>
+			</BentoBox>
+			<BentoBox
+				colSpan={3}
+				className="h-[354px] p-6 brightness-110 lg:h-auto"
+				bgUrl="images/bento/opensource-bg.webp"
+			>
+				<div className="relative z-30">
+					<Heading>Free & Opensource</Heading>
+					<Text className="mx-auto">
+						Developers and users can contribute with new ideas and features
+					</Text>
+				</div>
+				<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 h-[420px] w-full" />
+				<div className="absolute-center relative z-40 mt-[40px] md:mt-0">
+					<Link target="_blank" href="https://github.com/spacedriveapp/spacedrive">
+						<Button
+							size="lg"
+							className="contribute-drop-shadow mx-auto mb-4 block cursor-pointer border-0
+							 bg-gradient-to-r from-emerald-400 to-cyan-500 text-sm text-black !transition-all !duration-200"
+						>
+							{`<>`} Contribute
+						</Button>
+					</Link>
+					<GitHubButton
+						href="https://github.com/spacedriveapp/spacedrive"
+						data-size="large"
+						data-show-count="true"
+						aria-label="Star spacedriveapp/spacedrive on GitHub"
+					>
+						Star
+					</GitHubButton>
+				</div>
+			</BentoBox>
+			<BentoBox colSpan={3} className="relative p-6">
+				<div
+					style={
+						{
+							'--floatduration': '4s'
+						} as React.CSSProperties
+					}
+					className="floating mx-auto flex
+						h-[300px] w-full max-w-[500px]"
+				>
+					<PlatformsArt />
+				</div>
+				<div
+					className="absolute-center h-[120px] w-[300px] bg-gradient-to-r
+					from-fuchsia-500 from-10% to-blue-500 opacity-10 blur-[175px]"
+				/>
+				<div className="relative z-30">
+					<Heading>Cross platform</Heading>
+					<Text className="mx-auto max-w-[400px]">
+						Windows, macOS, Linux, iOS, Android, and the web. Spacedrive is everywhere.
+					</Text>
+				</div>
+				<div className="bento-radial-gradient-fade absolute right-0 top-0 z-20 h-full w-full" />
+			</BentoBox>
+		</MagicContainer>
+	);
+};
+
+export default BentoBoxes;

apps/landing/src/components/CloudStorage.tsx

@@ -0,0 +1,92 @@
+import clsx from 'clsx';
+import { useInView } from 'framer-motion';
+import Image from 'next/image';
+import React, { useRef } from 'react';
+import CloudStorageArt from './CloudStorageArt';
+
+const CloudStorage = () => {
+	const ref = useRef<HTMLDivElement>(null);
+	const isInView = useInView(ref, {
+		amount: 0.5,
+		once: true
+	});
+
+	return (
+		<div
+			ref={ref}
+			className={clsx(
+				'relative mt-[200px] w-full max-w-[960px] opacity-0  md:mt-[250px]',
+				isInView && 'fade-in-heading'
+			)}
+		>
+			<div className="absolute-horizontal-center top-[-100px] h-[248px] w-[500px] md:top-[-55px] md:w-[960px]">
+				<div className="relative right-[270px] z-10 md:right-0">
+					<CloudStorageArt />
+				</div>
+				<Image
+					src="/images/cloudgradient.webp"
+					className="absolute left-0 right-0 top-[-100px] mx-auto"
+					width={560}
+					height={200}
+					alt="cloud gradient"
+				/>
+			</div>
+			<div className="mt-[60px] flex w-full flex-col flex-wrap items-center justify-center gap-5 md:flex-row">
+				<CloudCard title="Dropbox" logoUrl="/images/dropbox.svg" imageWidth={49} />
+				<CloudCard title="iCloud" logoUrl="/images/icloud.svg" />
+				<CloudCard
+					title="Google drive"
+					logoUrl="/images/google-drive.svg"
+					imageWidth={53}
+				/>
+				<div className="flex w-full flex-col justify-center gap-5 md:flex-row">
+					<CloudCard imageWidth={45} title="Mega" logoUrl="/images/mega.svg" />
+					<CloudCard title="Amazon S3" logoUrl="/images/s3.svg" imageWidth={40} />
+				</div>
+			</div>
+			<h1
+				className="mt-[50px] bg-gradient-to-r from-white to-blue-400 bg-clip-text text-center text-[30px] font-bold
+						 leading-10 text-transparent"
+			>
+				Coming soon
+			</h1>
+			<h1
+				className="bg-gradient-to-r from-white to-blue-300 bg-clip-text
+						  text-center text-[20px] text-transparent md:text-[40px] md:leading-[50px]"
+			>
+				Combine all storage locations & clouds
+			</h1>
+		</div>
+	);
+};
+
+interface Props {
+	logoUrl: string;
+	title: string;
+	imageWidth?: number;
+	children?: React.ReactNode;
+}
+
+const CloudCard = ({ logoUrl, title, imageWidth = 70, children }: Props) => {
+	return (
+		<div
+			className="flex w-full flex-col justify-center rounded-md border border-[#161524]
+			 bg-[#080710]/30 py-6 text-center backdrop-blur-sm transition-all duration-200 hover:brightness-125 md:h-[165px] md:basis-[30%]"
+		>
+			{children}
+			<div className="relative z-10">
+				<Image
+					width={imageWidth}
+					height={100}
+					quality={100}
+					alt="cloud storage"
+					className="mx-auto"
+					src={logoUrl}
+				/>
+				<p className="mt-3 font-semibold">{title}</p>
+			</div>
+		</div>
+	);
+};
+
+export default CloudStorage;

apps/landing/src/components/CloudStorageArt.tsx

@@ -0,0 +1,126 @@
+const CloudStorageArt = () => {
+	return (
+		<svg
+			width="971"
+			height="249"
+			viewBox="0 0 971 249"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M0 146.095H74.6846M74.6846 146.095V248H187.161V161.425H249.699M74.6846 146.095H119.675V20.7418H226M249.699 161.425H312.236H347V138M249.699 161.425V129.411M387.82 97.3964V74.5M387.82 97.3964H347M387.82 97.3964V112.5H449.5M516.494 112.5V168.64H625.821M516.494 112.5H449.5M516.494 112.5V94.5H456V74.5M746.846 0V37.8764H638.868V52.3055M625.821 168.64H735.148V115.433H638.868V83.8691M625.821 168.64V205.615H810.733V146.095H970V79.36H896.215L869.221 52.3055H782V83.8691H638.868M625.821 168.64V135H555.5V103M638.868 52.3055H599V20.7418H501V41.3709M638.868 52.3055V83.8691M501 41.3709V62H555.5V103M501 41.3709H456V74.5M456 74.5H387.82M387.82 74.5V44.1891H339M638.868 83.8691H593.5V103H555.5M249.699 129.411V97.3964H298.349M249.699 129.411H183V79.36H226V20.7418M226 20.7418H278.943V44.1891H339M347 97.3964H298.349M347 97.3964V138M298.349 97.3964V70H339V44.1891M449.5 112.5V138H347"
+				stroke="url(#paint0_linear_630_169)"
+			/>
+			<path
+				className="gradient-path"
+				d="M391.5 74.5H456V41.3333H478.5L501 41.3333V62H555.5V103H593.5V84H635.5"
+				stroke="url(#paint1_linear_630_169)"
+			/>
+			<g className="circle-two" filter="url(#filter0_d_630_169)">
+				<circle cx="388" cy="74" r="4" fill="#376FA9" className="circle-two" />
+			</g>
+
+			<g className="circle-one" filter="url(#filter1_d_630_169)">
+				<circle className="circle-one" cx="639" cy="84" r="4" fill="#376FA9" />
+			</g>
+			<defs>
+				<filter
+					id="filter0_d_630_169"
+					x="372"
+					y="58"
+					width="32"
+					height="32"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset />
+					<feGaussianBlur stdDeviation="6" />
+					<feComposite in2="hardAlpha" operator="out" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 0.231373 0 0 0 0 0.443137 0 0 0 0 0.67451 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="BackgroundImageFix"
+						result="effect1_dropShadow_630_169"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_dropShadow_630_169"
+						result="shape"
+					/>
+				</filter>
+				<filter
+					id="filter1_d_630_169"
+					x="623"
+					y="68"
+					width="32"
+					height="32"
+					filterUnits="userSpaceOnUse"
+					colorInterpolationFilters="sRGB"
+				>
+					<feFlood floodOpacity="0" result="BackgroundImageFix" />
+					<feColorMatrix
+						in="SourceAlpha"
+						type="matrix"
+						values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+						result="hardAlpha"
+					/>
+					<feOffset />
+					<feGaussianBlur stdDeviation="6" />
+					<feComposite in2="hardAlpha" operator="out" />
+					<feColorMatrix
+						type="matrix"
+						values="0 0 0 0 0.235294 0 0 0 0 0.458824 0 0 0 0 0.698039 0 0 0 1 0"
+					/>
+					<feBlend
+						mode="normal"
+						in2="BackgroundImageFix"
+						result="effect1_dropShadow_630_169"
+					/>
+					<feBlend
+						mode="normal"
+						in="SourceGraphic"
+						in2="effect1_dropShadow_630_169"
+						result="shape"
+					/>
+				</filter>
+				<linearGradient
+					id="paint0_linear_630_169"
+					x1="49"
+					y1="80.9999"
+					x2="769.061"
+					y2="0.547463"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#343259" stopOpacity="0" />
+					<stop offset="0.593922" stopColor="#25273E" />
+					<stop offset="1" stopColor="#343259" stopOpacity="0" />
+				</linearGradient>
+				<linearGradient
+					id="paint1_linear_630_169"
+					x1="633.5"
+					y1="83.5"
+					x2="388.5"
+					y2="74"
+					gradientUnits="userSpaceOnUse"
+				>
+					<stop stopColor="#4AA8FF" stopOpacity="0" />
+					<stop offset="0.552083" stopColor="#4AA8FF" />
+					<stop offset="1" stopColor="#4AA8FF" stopOpacity="0" />
+				</linearGradient>
+			</defs>
+		</svg>
+	);
+};
+
+export default CloudStorageArt;

apps/landing/src/components/CyclingImage.tsx

@@ -0,0 +1,47 @@
+import Image, { ImageProps } from 'next/image';
+import React, { useEffect, useState } from 'react';
+
+interface CyclingImageProps extends Omit<ImageProps, 'src'> {
+	images: string[];
+}
+
+const CyclingImage: React.FC<CyclingImageProps> = ({ images, width, height, ...imgProps }) => {
+	const [currentIndex, setCurrentIndex] = useState(0);
+	const [isHovering, setIsHovering] = useState(false);
+
+	console.log({ isHovering });
+
+	useEffect(() => {
+		let timeoutId: number;
+		if (isHovering && images.length > 1) {
+			const nextIndex = (currentIndex + 1) % images.length;
+			const img = new window.Image();
+			img.src = images[nextIndex];
+			img.onload = () => {
+				timeoutId = window.setTimeout(() => setCurrentIndex(nextIndex), 1500);
+			};
+		}
+		return () => window.clearTimeout(timeoutId);
+	}, [isHovering, currentIndex, images]);
+
+	return (
+		<div onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}>
+			{images.map((src, index) => (
+				<div
+					key={src}
+					style={{
+						display: index === currentIndex ? 'block' : 'none',
+						position: 'relative',
+						width: '100%',
+						maxWidth: width,
+						height
+					}}
+				>
+					<Image {...imgProps} src={src} alt="" width={width} height={height} />
+				</div>
+			))}
+		</div>
+	);
+};
+
+export default CyclingImage;

apps/landing/src/components/DocsLayout.tsx

@@ -1,5 +1,4 @@
 import { CaretRight, List, X } from '@phosphor-icons/react';
-import Link from 'next/link';
 import { PropsWithChildren, useState } from 'react';
 import { slide as Menu } from 'react-burger-menu';
 import { Button } from '@sd/ui';

apps/landing/src/components/DotPattern.tsx

@@ -0,0 +1,52 @@
+import { useId } from 'react';
+import { cn } from './MagicCard';
+
+interface DotPatternProps {
+	width?: any;
+	height?: any;
+	x?: any;
+	y?: any;
+	cx?: any;
+	cy?: any;
+	cr?: any;
+	className?: string;
+	[key: string]: any;
+}
+export function DotPattern({
+	width = 16,
+	height = 16,
+	x = 0,
+	y = 0,
+	cx = 1,
+	cy = 1,
+	cr = 1,
+	className,
+	...props
+}: DotPatternProps) {
+	const id = useId();
+
+	return (
+		<svg
+			aria-hidden="true"
+			className={cn('absolute inset-0 h-full w-full fill-gray-400/30', className)}
+			{...props}
+		>
+			<defs>
+				<pattern
+					id={id}
+					width={width}
+					height={height}
+					patternUnits="userSpaceOnUse"
+					patternContentUnits="userSpaceOnUse"
+					x={x}
+					y={y}
+				>
+					<circle id="pattern-circle" cx={cy} cy={cy} r={cr} />
+				</pattern>
+			</defs>
+			<rect width="100%" height="100%" strokeWidth={0} fill={`url(#${id})`} />
+		</svg>
+	);
+}
+
+export default DotPattern;

apps/landing/src/components/DownloadToday.tsx

@@ -0,0 +1,39 @@
+import clsx from 'clsx';
+import { useInView } from 'framer-motion';
+import { Download } from '@phosphor-icons/react';
+import React, { useRef } from 'react';
+import { Button } from '@sd/ui';
+
+interface Props {
+	isWindows?: boolean;
+}
+
+const DownloadToday = ({ isWindows }: Props) => {
+	const ref = useRef<HTMLDivElement>(null);
+	const isInView = useInView(ref, {
+		amount: 0.5,
+		once: true
+	});
+	return (
+		<div
+			ref={ref}
+			className={clsx(
+				'relative mb-[150px] mt-10 flex h-[250px] w-full max-w-7xl flex-col justify-center bg-app-box/30 opacity-0',
+				'overflow-hidden rounded-md p-2 text-center md:mb-[250px] md:h-[350px]',
+				isInView && 'fade-in-heading'
+			)}
+		>
+			<div className="relative z-10">
+				<h1 className="mx-auto w-full max-w-[500px] text-[20px] font-semibold leading-tight md:text-[30px]">
+					Ready to get organized?
+				</h1>
+				<Button className="mx-auto mt-5 flex gap-2" variant="accent" size="md">
+					<Download size={20} />
+					{isWindows ? 'Download on Windows' : 'Download on Mac'}
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default DownloadToday;

apps/landing/src/components/Footer.tsx

@@ -19,6 +19,7 @@ function FooterLink(props: PropsWithChildren<{ link: string; blank?: boolean }>)
 			target={props.blank ? '_blank' : ''}
 			className="text-gray-300 duration-300 hover:text-white hover:opacity-50"
 			rel="noreferrer"
+			{...props}
 		>
 			{props.children}
 		</Link>
@@ -27,12 +28,22 @@ function FooterLink(props: PropsWithChildren<{ link: string; blank?: boolean }>)
 
 export function Footer() {
 	return (
-		<footer id="footer" className="z-50 w-screen border-t border-gray-550 pt-3 backdrop-blur">
+		<footer id="footer" className="relative z-50 w-screen overflow-hidden pt-3 backdrop-blur">
+			<Image
+				alt="footer gradient"
+				className="absolute bottom-0 left-0 z-[-1]"
+				quality={100}
+				width={0}
+				height={0}
+				src="/images/footergradient.webp"
+				style={{ width: '100%', height: '400px' }}
+				sizes="100vw"
+			/>
 			<div className="min-h-64 m-auto grid max-w-[100rem] grid-cols-2 gap-6 p-8 pb-20 pt-10 text-white sm:grid-cols-2 lg:grid-cols-6">
 				<div className="col-span-2">
 					<Image alt="Spacedrive logo" src={Logo} className="mb-5 h-10 w-10" />
 
-					<h3 className="mb-1 text-xl font-bold">Spacedrive</h3>
+					<h1 className="mb-1 text-xl font-bold">Spacedrive</h1>
 					<p className="text-sm text-gray-350 opacity-50">
 						&copy; Copyright {new Date().getFullYear()} Spacedrive Technology Inc.
 					</p>
@@ -40,26 +51,35 @@ export function Footer() {
 						<FooterLink link="https://x.com/spacedriveapp">
 							<Twitter className="h-6 w-6" />
 						</FooterLink>
-						<FooterLink link="https://discord.gg/gTaF2Z44f5">
+						<FooterLink aria-label="discord" link="https://discord.gg/gTaF2Z44f5">
 							<Discord className="h-6 w-6" />
 						</FooterLink>
-						<FooterLink link="https://instagram.com/spacedriveapp">
+						<FooterLink
+							aria-label="instagram"
+							link="https://instagram.com/spacedriveapp"
+						>
 							<Instagram className="h-6 w-6" />
 						</FooterLink>
-						<FooterLink link="https://github.com/spacedriveapp">
+						<FooterLink aria-label="github" link="https://github.com/spacedriveapp">
 							<Github className="h-6 w-6" />
 						</FooterLink>
-						<FooterLink link="https://opencollective.com/spacedrive">
+						<FooterLink
+							aria-label="open collective"
+							link="https://opencollective.com/spacedrive"
+						>
 							<Opencollective className="h-6 w-6" />
 						</FooterLink>
-						<FooterLink link="https://twitch.tv/jamiepinelive">
+						<FooterLink
+							aria-label="twitch stream"
+							link="https://twitch.tv/jamiepinelive"
+						>
 							<Twitch className="h-6 w-6" />
 						</FooterLink>
 					</div>
 				</div>
 
 				<div className="col-span-1 flex flex-col space-y-2">
-					<h3 className="mb-1 text-xs font-bold uppercase ">About</h3>
+					<h1 className="mb-1 text-xs font-bold uppercase ">About</h1>
 
 					<FooterLink link="/team">Team</FooterLink>
 					<FooterLink link="/docs/product/resources/faq">FAQ</FooterLink>
@@ -68,7 +88,7 @@ export function Footer() {
 					<FooterLink link="/blog">Blog</FooterLink>
 				</div>
 				<div className="pointer-events-none col-span-1 flex flex-col space-y-2">
-					<h3 className="mb-1 text-xs font-bold uppercase">Downloads</h3>
+					<h1 className="mb-1 text-xs font-bold uppercase">Downloads</h1>
 					<div className="col-span-1 flex flex-col space-y-2 opacity-50">
 						<FooterLink link="#">macOS</FooterLink>
 						<FooterLink link="#">Windows</FooterLink>
@@ -78,7 +98,7 @@ export function Footer() {
 					</div>
 				</div>
 				<div className="col-span-1 flex flex-col space-y-2">
-					<h3 className="mb-1 text-xs font-bold uppercase ">Developers</h3>
+					<h1 className="mb-1 text-xs font-bold uppercase ">Developers</h1>
 					<FooterLink link="/docs/product/getting-started/introduction">
 						Documentation
 					</FooterLink>
@@ -96,7 +116,7 @@ export function Footer() {
 					</div>
 				</div>
 				<div className="col-span-1 flex flex-col space-y-2">
-					<h3 className="mb-1 text-xs font-bold uppercase ">Org</h3>
+					<h1 className="mb-1 text-xs font-bold uppercase ">Org</h1>
 					<FooterLink blank link="https://opencollective.com/spacedrive">
 						Open Collective
 					</FooterLink>
@@ -114,6 +134,10 @@ export function Footer() {
 					</div>
 				</div>
 			</div>
+			<div className="absolute top-0 flex h-1 w-full flex-row items-center justify-center opacity-100">
+				<div className="h-[1px] w-1/2 bg-gradient-to-r from-transparent to-white/10"></div>
+				<div className="h-[1px] w-1/2 bg-gradient-to-l from-transparent to-white/10"></div>
+			</div>
 		</footer>
 	);
 }

apps/landing/src/components/HomeCTA.tsx

@@ -1,177 +1,29 @@
-import { ReactComponent as Alert } from '@sd/assets/svgs/alert.svg';
-import { Github } from '@sd/assets/svgs/brands';
-import { ReactComponent as Info } from '@sd/assets/svgs/info.svg';
-import { ReactComponent as Spinner } from '@sd/assets/svgs/spinner.svg';
+import { IconProps } from '@phosphor-icons/react';
 import clsx from 'clsx';
-import { useState } from 'react';
-import { useForm } from 'react-hook-form';
-import { Button, Input } from '@sd/ui';
+import { Button, ButtonBaseProps } from '@sd/ui';
 
-interface WaitlistInputs {
-	email: string;
+interface Props extends ButtonBaseProps {
+	className?: string;
+	text: string;
+	icon?: IconProps;
+	onClick?: () => void;
 }
 
-export function HomeCTA() {
-	const { register, handleSubmit } = useForm<WaitlistInputs>();
-
-	const [loading, setLoading] = useState(false);
-	const [showWaitlistInput, setShowWaitlistInput] = useState(false);
-	const [waitlistError, setWaitlistError] = useState('');
-	const [waitlistSubmitted, setWaitlistSubmitted] = useState(false);
-
-	async function handleWaitlistSubmit({ email }: WaitlistInputs) {
-		if (!email.trim().length) return;
-
-		setLoading(true);
-
-		try {
-			const req = await fetch(`https://app.spacedrive.com/api/v1/waitlist`, {
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({ email })
-			});
-
-			if (!req.ok) {
-				return setWaitlistError('An error occurred. Please try again.');
-			}
-
-			const response = (await req.json()) as { success: boolean; message: string };
-
-			if (!response.success) {
-				return setWaitlistError(response.message);
-			}
-			setWaitlistSubmitted(true);
-		} catch (e: any) {
-			throw new Error(e.message);
-		} finally {
-			setLoading(false);
-		}
-		// Remove error after a few seconds
-		setTimeout(() => {
-			setWaitlistError('');
-		}, 5000);
-	}
-
+export function HomeCTA({ className, text, icon, ...props }: Props) {
 	return (
-		<>
-			<div className="animation-delay-2 z-30 flex h-10 flex-row items-center space-x-4 fade-in">
-				{!showWaitlistInput ? (
-					<>
-						<Button
-							onClick={() => setShowWaitlistInput(true)}
-							className="z-30 cursor-pointer border-0"
-							variant="gray"
-						>
-							Join Waitlist
-						</Button>
-						<Button
-							href="https://github.com/spacedriveapp/spacedrive"
-							target="_blank"
-							className="z-30 cursor-pointer"
-							variant="accent"
-						>
-							<Github className="-ml-1 mr-2 mt-[-4px] inline h-5 w-5" fill="white" />
-							Star on GitHub
-						</Button>
-					</>
-				) : (
-					<form onSubmit={handleSubmit(handleWaitlistSubmit)}>
-						<div className="flex flex-col justify-center">
-							{(waitlistError || waitlistSubmitted) && (
-								<div
-									className={clsx({
-										'my-2 flex flex-row items-center rounded-md border-2 px-2':
-											true,
-										'border-red-900 bg-red-800/20': waitlistError,
-										'border-green-900 bg-green-800/20': !waitlistError,
-										'-mt-2': waitlistSubmitted
-									})}
-								>
-									{waitlistError ? (
-										<Alert className="mr-1 w-5 fill-red-500" />
-									) : (
-										<Info className="mr-1 w-5 fill-green-500" />
-									)}
-									<p
-										className={clsx({
-											'text-sm': true,
-											'text-red-500': waitlistError,
-											'text-green-500': !waitlistError
-										})}
-									>
-										{waitlistError || 'You have been added to the waitlist'}
-									</p>
-								</div>
-							)}
-							<div className="flex flex-row">
-								<Input
-									{...register('email')}
-									type="email"
-									autoFocus
-									autoComplete="off"
-									placeholder="Enter your email"
-									className={clsx({
-										'hidden': waitlistSubmitted,
-										'rounded-r-none': !waitlistSubmitted
-									})}
-									size="lg"
-									disabled={waitlistSubmitted}
-								/>
-								{!waitlistSubmitted && (
-									<Button
-										onClick={() => setShowWaitlistInput(true)}
-										className={clsx(
-											'z-30 cursor-pointer rounded-l-none border-0',
-											{
-												'cursor-default opacity-50': loading
-											}
-										)}
-										disabled={loading}
-										variant="accent"
-										type="submit"
-									>
-										{loading ? (
-											<Spinner className="h-6 w-6 animate-spin fill-white text-white text-opacity-40" />
-										) : (
-											'Submit'
-										)}
-									</Button>
-								)}
-							</div>
-						</div>
-					</form>
-				)}
-			</div>
-			<p
-				className={clsx(
-					'animation-delay-3 z-30 px-6 text-center text-sm text-gray-400 fade-in',
-					{
-						'mt-10': waitlistError,
-						'mt-3': !waitlistError
-					}
-				)}
-			>
-				{showWaitlistInput ? (
-					<>
-						We&apos;ll keep your place in the queue for early access.
-						<br />
-						<br />
-					</>
-				) : waitlistSubmitted ? (
-					<>
-						You have been added to the waitlist.
-						<br />
-						<br />
-					</>
-				) : (
-					<>
-						Coming soon on macOS, Windows and Linux.
-						<br />
-						Shortly after to iOS & Android.
-					</>
-				)}
-			</p>
-		</>
+		<Button
+			size="lg"
+			className={clsx(
+				'home-button-border-gradient relative z-30 flex cursor-pointer items-center gap-2 !rounded-[7px] border-0 !bg-[#2F3152]/30 py-2 text-sm !backdrop-blur-lg hover:brightness-110 md:text-[16px]',
+				className
+			)}
+			{...props}
+		>
+			<>
+				{icon && icon}
+				{text}
+			</>
+		</Button>
 	);
 }
 

apps/landing/src/components/MagicCard.tsx

@@ -0,0 +1,246 @@
+'use client';
+
+import clsx, { ClassValue } from 'clsx';
+import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
+
+interface MousePosition {
+	x: number;
+	y: number;
+}
+
+function useMousePosition(): MousePosition {
+	const [mousePosition, setMousePosition] = useState<MousePosition>({
+		x: 0,
+		y: 0
+	});
+
+	useEffect(() => {
+		const handleMouseMove = (event: globalThis.MouseEvent) => {
+			setMousePosition({ x: event.clientX, y: event.clientY });
+		};
+
+		window.addEventListener('mousemove', handleMouseMove);
+
+		return () => {
+			window.removeEventListener('mousemove', handleMouseMove);
+		};
+	}, []);
+
+	return mousePosition;
+}
+
+interface MagicContainerProps {
+	children?: ReactNode;
+	className?: any;
+	style?: CSSProperties;
+}
+
+const MagicContainer = ({ children, className, style }: MagicContainerProps) => {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const mousePosition = useMousePosition();
+	const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+	const containerSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 });
+	const [boxes, setBoxes] = useState<Array<HTMLElement>>([]);
+
+	useEffect(() => {
+		init();
+		containerRef.current &&
+			setBoxes(Array.from(containerRef.current.children).map((el) => el as HTMLElement));
+	}, []);
+
+	useEffect(() => {
+		init();
+		window.addEventListener('resize', init);
+
+		return () => {
+			window.removeEventListener('resize', init);
+		};
+	}, [setBoxes]);
+
+	useEffect(() => {
+		onMouseMove();
+	}, [mousePosition]);
+
+	const init = () => {
+		if (containerRef.current) {
+			containerSize.current.w = containerRef.current.offsetWidth;
+			containerSize.current.h = containerRef.current.offsetHeight;
+		}
+	};
+
+	const onMouseMove = () => {
+		if (containerRef.current) {
+			const rect = containerRef.current.getBoundingClientRect();
+			const { w, h } = containerSize.current;
+			const x = mousePosition.x - rect.left;
+			const y = mousePosition.y - rect.top;
+			const inside = x < w && x > 0 && y < h && y > 0;
+
+			mouse.current.x = x;
+			mouse.current.y = y;
+			boxes.forEach((box) => {
+				const boxX = -(box.getBoundingClientRect().left - rect.left) + mouse.current.x;
+				const boxY = -(box.getBoundingClientRect().top - rect.top) + mouse.current.y;
+				box.style.setProperty('--mouse-x', `${boxX}px`);
+				box.style.setProperty('--mouse-y', `${boxY}px`);
+
+				if (inside) {
+					box.style.setProperty('--opacity', `1`);
+				} else {
+					box.style.setProperty('--opacity', `0`);
+				}
+			});
+		}
+	};
+
+	return (
+		<div style={style} className={className} ref={containerRef}>
+			{children}
+		</div>
+	);
+};
+
+interface MagicCardProps {
+	/**
+	 * @default div
+	 * @type React.ElementType
+	 * @description
+	 * The component to render the card as
+	 * */
+	as?: React.ElementType;
+	/**
+	 * @default ""
+	 * @type string
+	 * @description
+	 * The className of the card
+	 */
+	className?: string;
+
+	/**
+	 * @default ""
+	 * @type ReactNode
+	 * @description
+	 * The children of the card
+	 * */
+	children?: ReactNode;
+
+	/**
+	 * @default 600
+	 * @type number
+	 * @description
+	 * The size of the spotlight effect in pixels
+	 * */
+	size?: number;
+
+	/**
+	 * ]@default "#475569"
+	 * @type string
+	 * @description
+	 * The border color of the card
+	 */
+	borderColor?: string;
+
+	/**
+	 * @default 1
+	 * @type number
+	 * @description
+	 * The border width of the card
+	 * */
+	borderWidth?: number;
+
+	/**
+	 * @default 16
+	 * @type number
+	 * @description
+	 * The border radius of the card
+	 * */
+	borderRadius?: number;
+
+	/**
+	 * @default true
+	 * @type boolean
+	 * @description
+	 * Whether to show the spotlight
+	 * */
+	spotlight?: boolean;
+
+	/**
+	 * @default "rgba(255,255,255,0.03)"
+	 * @type string
+	 * @description
+	 * The color of the spotlight
+	 * */
+	spotlightColor?: string;
+
+	/**
+	 * @default true
+	 * @type boolean
+	 * @description
+	 * Whether to isolate the card which is being hovered
+	 * */
+	isolated?: boolean;
+
+	/**
+	 * @default "transparent"
+	 * @type string
+	 * @description
+	 * The background of the card
+	 * */
+	background?: string;
+}
+
+const MagicCard = ({
+	as: Component = 'div',
+	className,
+	children,
+	size = 600,
+	borderColor = 'rgba(86,114,157, 0.2)',
+	borderWidth = 1,
+	borderRadius = 10,
+	spotlight = true,
+	spotlightColor = 'rgba(86,114,157, 0.01)',
+	isolated = false,
+	background = 'rgba(255,255,255,0.03)'
+}: MagicCardProps) => {
+	const spotlightStyles =
+		'before:pointer-events-none before:absolute before:w-full before:h-full before:rounded-[var(--border-radius)] before:top-0 before:left-0 before:duration-500 before:transition-opacity before:bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),var(--spotlight-color),transparent_40%)] before:z-[3] before:blur-xs';
+
+	const borderStyles =
+		'after:pointer-events-none after:absolute after:w-full after:h-full after:rounded-[var(--border-radius)] after:top-0 after:left-0 after:duration-500 after:transition-opacity after:bg-[radial-gradient(var(--mask-size)_circle_at_var(--mouse-x)_var(--mouse-y),var(--border-color),transparent_40%)] after:z-[1]';
+	return (
+		<Component
+			style={{
+				'--border-radius': `${borderRadius}px`,
+				'--border-width': `${borderWidth}px`,
+				'--border-color': `${borderColor}`,
+				'--mask-size': `${size}px`,
+				'--spotlight-color': `${spotlightColor}`,
+				background
+			}}
+			className={cn(
+				'relative h-full w-full overflow-hidden rounded-[var(--border-radius)] transition-all duration-200 hover:brightness-[1.25]',
+				isolated && [borderStyles, 'after:opacity-0 after:hover:opacity-100'],
+				isolated &&
+					spotlight && [spotlightStyles, 'before:opacity-0 before:hover:opacity-100'],
+				!isolated && [borderStyles, 'after:opacity-[var(--opacity)]'],
+				!isolated && spotlight && [spotlightStyles, 'before:opacity-[var(--opacity)]']
+			)}
+		>
+			<div
+				className={cn(
+					'absolute inset-[var(--border-width)] z-[2] rounded-[var(--border-radius)]',
+					className
+				)}
+			>
+				{children}
+			</div>
+		</Component>
+	);
+};
+
+export { MagicCard, MagicContainer };

apps/landing/src/components/NavBar.tsx

@@ -16,7 +16,7 @@ function NavLink(props: PropsWithChildren<{ link?: string }>) {
 		<Link
 			href={props.link ?? '#'}
 			target={props.link?.startsWith('http') ? '_blank' : undefined}
-			className="cursor-pointer p-4 text-gray-300 no-underline transition hover:text-gray-50"
+			className="cursor-pointer p-4 text-[11pt] text-gray-300 no-underline transition hover:text-gray-50"
 			rel="noreferrer"
 		>
 			{props.children}
@@ -58,12 +58,7 @@ export default function NavBar() {
 	}, []);
 
 	return (
-		<div
-			className={clsx(
-				'fixed z-[55] h-16 w-full px-2 transition',
-				isAtTop ? 'bg-transparent' : 'backdrop-blur'
-			)}
-		>
+		<div className={'navbar-blur fixed z-[55] h-16 w-full !bg-black/10 px-2 transition'}>
 			<div className="relative m-auto flex h-full max-w-[100rem] items-center p-5">
 				<Link href="/" className="absolute flex flex-row items-center">
 					<Image alt="Spacedrive logo" src={Logo} className="z-30 mr-3 h-8 w-8" />
@@ -73,6 +68,7 @@ export default function NavBar() {
 				<div className="m-auto hidden space-x-4 text-white lg:block ">
 					<NavLink link="/roadmap">Roadmap</NavLink>
 					<NavLink link="/team">Team</NavLink>
+					{/* <NavLink link="/pricing">Pricing</NavLink> */}
 					<NavLink link="/blog">Blog</NavLink>
 					<NavLink link="/docs/product/getting-started/introduction">Docs</NavLink>
 					<div className="relative inline">
@@ -87,7 +83,11 @@ export default function NavBar() {
 				<div className="flex-1 lg:hidden" />
 				<Dropdown.Root
 					button={
-						<Button className="ml-[140px] hover:!bg-transparent" size="icon">
+						<Button
+							aria-label="mobile-menu"
+							className="ml-[140px] hover:!bg-transparent"
+							size="icon"
+						>
 							<DotsThreeVertical weight="bold" className="h-6 w-6 " />
 						</Button>
 					}
@@ -115,6 +115,9 @@ export default function NavBar() {
 						<Dropdown.Item icon={User} {...link('/team', router)}>
 							Team
 						</Dropdown.Item>
+						{/* <Dropdown.Item icon={Money} {...link('/pricing', router)}>
+							Pricing
+						</Dropdown.Item> */}
 						<Dropdown.Item icon={Chat} {...link('/blog', router)}>
 							Blog
 						</Dropdown.Item>
@@ -136,10 +139,16 @@ export default function NavBar() {
 				</Dropdown.Root>
 
 				<div className="absolute right-3 hidden flex-row space-x-5 lg:flex">
-					<Link href="https://discord.gg/gTaF2Z44f5" target="_blank" rel="noreferrer">
+					<Link
+						aria-label="discord"
+						href="https://discord.gg/gTaF2Z44f5"
+						target="_blank"
+						rel="noreferrer"
+					>
 						<Discord className="h-6 w-6 text-white opacity-100 duration-300 hover:opacity-50" />
 					</Link>
 					<Link
+						aria-label="github"
 						href="https://github.com/spacedriveapp/spacedrive"
 						target="_blank"
 						rel="noreferrer"
@@ -149,8 +158,8 @@ export default function NavBar() {
 				</div>
 			</div>
 			<div className="absolute bottom-0 flex h-1 w-full flex-row items-center justify-center pt-4 opacity-100">
-				<div className="h-[1px] w-1/2 bg-gradient-to-r from-transparent to-white/30"></div>
-				<div className="h-[1px] w-1/2 bg-gradient-to-l from-transparent to-white/30"></div>
+				<div className="h-[1px] w-1/2 bg-gradient-to-r from-transparent to-white/10"></div>
+				<div className="h-[1px] w-1/2 bg-gradient-to-l from-transparent to-white/10"></div>
 			</div>
 		</div>
 	);

apps/landing/src/components/NewBanner.tsx

@@ -1,9 +1,12 @@
+import clsx from 'clsx';
 import Link from 'next/link';
+import { Newspaper } from '@phosphor-icons/react';
 
 export interface NewBannerProps {
 	headline: string;
 	href: string;
 	link: string;
+	className?: string;
 }
 
 const NewBanner: React.FC<NewBannerProps> = (props) => {
@@ -12,13 +15,19 @@ const NewBanner: React.FC<NewBannerProps> = (props) => {
 	return (
 		<aside
 			onClick={() => (window.location.href = href)}
-			className="fade-in-whats-new z-10 mb-5 flex w-10/12 cursor-pointer flex-row rounded-full border border-gray-550/50 bg-gray-800/50 px-5 py-1.5 text-xs transition hover:border-blue-200/50 hover:bg-gray-750 sm:w-auto sm:text-base"
+			className={clsx(
+				props.className,
+				'news-banner-border-gradient news-banner-glow animation-delay-1 fade-in-whats-new z-10 mb-5 flex w-fit cursor-pointer flex-row rounded-full bg-black/10 px-5 py-2.5 text-xs backdrop-blur-md  transition hover:bg-purple-900/20 sm:w-auto sm:text-base'
+			)}
 		>
-			<strong className="truncate font-semibold text-gray-350">{headline}</strong>
-			<div role="separator" className="h-22 mx-4 w-[1px] bg-gray-500" />
+			<div className="flex items-center gap-2">
+				<Newspaper weight="fill" className="text-white " size={20} />
+				<p className="font-regular truncate text-white">{headline}</p>
+			</div>
+			<div role="separator" className="h-22 mx-4 w-[1px] bg-zinc-700/70" />
 			<Link
 				href={href}
-				className="font-regular shrink-0 bg-gradient-to-r from-primary-400 to-blue-600 bg-clip-text text-transparent decoration-primary-600"
+				className="font-regular shrink-0 bg-gradient-to-r from-violet-400 to-fuchsia-400 bg-clip-text text-transparent decoration-primary-600"
 			>
 				{link} <span aria-hidden="true">&rarr;</span>
 			</Link>

apps/landing/src/components/Space.tsx

@@ -9,8 +9,8 @@ const Stars = (props: any) => {
 	const [sphere] = useState(() => randomInSphere(new Float32Array(35000), { radius: 1 }));
 	useFrame((_, delta) => {
 		if (ref.current) {
-			ref.current.rotation.x -= delta / 100;
-			ref.current.rotation.y -= delta / 100;
+			ref.current.rotation.x -= delta / 300;
+			ref.current.rotation.y -= delta / 300;
 		}
 	});
 	return (
@@ -52,7 +52,7 @@ function ShootingStar() {
 
 export const Space: FunctionComponent = () => {
 	return (
-		<div className="absolute z-0 h-screen w-screen opacity-50">
+		<div className="fixed z-0 w-screen h-screen bg-black opacity-50">
 			<Canvas camera={{ position: [0, 0, 0] }}>
 				<ShootingStar />
 				<ShootingStar />

apps/landing/src/components/WormHole.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import clsx from 'clsx';
+import Image from 'next/image';
+import React from 'react';
+
+const WormHole = () => {
+	return (
+		<div
+			className="relative mb-[225px] mt-[240px] flex w-full max-w-[800px] items-center justify-center sm:mb-[220px]
+					 sm:mt-[250px] md:mb-[280px] md:mt-[340px] lg:my-[400px]"
+		>
+			<div
+				className="absolute top-[-150px] w-full max-w-[450px] rotate-[300deg] sm:top-[-200px]
+						 sm:max-w-[500px] md:top-[-200px] lg:top-auto lg:mr-[250px] lg:max-w-full lg:rotate-0"
+			>
+				<div className="absolute left-[200px] top-[50px] z-10 h-full w-full">
+					<Image
+						width={30}
+						height={45}
+						quality={100}
+						alt="heart"
+						className="heart"
+						src="/images/icons/heart.svg"
+					/>
+				</div>
+				<div className="absolute left-[200px] top-[50px] z-10 h-full w-full">
+					<Image
+						width={40}
+						height={45}
+						quality={100}
+						alt="game"
+						className="game"
+						src="/images/icons/game.svg"
+					/>
+				</div>
+				<div
+					className="absolute top-[-100px] z-10
+				h-full w-full
+				sm:left-[200px] sm:top-[10px]"
+				>
+					<Image
+						width={40}
+						height={45}
+						quality={100}
+						alt="image"
+						className="image"
+						src="/images/icons/image.svg"
+					/>
+				</div>
+				<div
+					className="absolute left-[120px] top-[-50px]
+				z-10 h-full w-full
+				sm:left-[200px] sm:top-[-10px]"
+				>
+					<Image
+						width={40}
+						height={45}
+						quality={100}
+						alt="lock"
+						className="lock"
+						src="/images/icons/lock.svg"
+					/>
+				</div>
+				<div
+					className="absolute left-[200px] top-[350px] z-10 h-full
+				 w-full lg:left-[200px] lg:top-[300px]"
+				>
+					<Image
+						width={40}
+						height={45}
+						quality={100}
+						alt="video"
+						className="videoicon"
+						src="/images/icons/video.svg"
+					/>
+				</div>
+				<div className="absolute left-[200px] top-[150px] z-10 h-full w-full">
+					<Image
+						width={40}
+						height={45}
+						quality={100}
+						alt="application"
+						className="appicon"
+						src="/images/icons/application.svg"
+					/>
+				</div>
+				<div className="absolute left-[120px] top-[50px] z-10 h-full w-full lg:left-[200px] lg:top-[120px]">
+					<Image
+						width={40}
+						height={45}
+						quality={100}
+						alt="collection"
+						className="collection"
+						src="/images/icons/collection.svg"
+					/>
+				</div>
+				<div className="absolute left-[120px] top-[50px] z-10 h-full w-full sm:left-[200px] sm:top-[300px] lg:left-[200px] lg:top-[420px]">
+					<Image
+						width={40}
+						height={45}
+						quality={100}
+						alt="node"
+						className="node"
+						src="/images/icons/node.svg"
+					/>
+				</div>
+				<div
+					className="absolute
+					left-[60px] top-[-190px]
+				z-10 h-full w-full sm:left-[50px] sm:top-[50px] lg:left-[200px] lg:top-[490px]"
+				>
+					<Image
+						width={40}
+						height={45}
+						quality={100}
+						alt="texturedmesh"
+						className="texturedmesh"
+						src="/images/icons/texturedmesh.png"
+					/>
+				</div>
+				<div
+					className="absolute left-[120px] top-[50px]
+				 z-10 h-full w-full md:left-[200px] md:top-[350px]"
+				>
+					<Image
+						width={40}
+						height={45}
+						quality={100}
+						alt="database"
+						className="database"
+						src="/images/icons/database.svg"
+					/>
+				</div>
+				<div className="absolute left-[100px] top-[-200px] z-10 h-full w-full sm:left-[150px] sm:top-[50px]">
+					<Image
+						width={40}
+						height={45}
+						quality={100}
+						alt="package"
+						className="package"
+						src="/images/icons/package.svg"
+					/>
+				</div>
+				<Image
+					loading="eager"
+					width={1500}
+					height={626}
+					quality={100}
+					alt="wormhole"
+					src="/images/wormhole.webp"
+				/>
+			</div>
+			<div
+				className={clsx(
+					'worm-hole-border-gradient relative top-[100px] z-[20] flex w-full max-w-[500px] flex-col rounded-lg',
+					'items-center justify-center gap-2 bg-gradient-to-r from-[#080710]/0 to-[#080710]/50 p-8 backdrop-blur-sm'
+				)}
+			>
+				<h1 className="bg-gradient-to-r from-white to-indigo-300 bg-clip-text text-[20px] font-bold text-transparent">
+					Heading
+				</h1>
+				<p className="text-center text-sm text-gray-400">
+					Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, iure ea dolores
+					atque unde fugit ad libero debitis nemo quis culpa sequi illum aliquam iusto
+					harum quo laborum ducimus voluptas Lorem, ipsum dolor sit amet consectetur
+					adipisicing elit. Similique eos, voluptatum, ipsam facilis placeat tempore
+					consequuntur officia distinctio voluptate blanditiis tenetur, animi ut ea
+					laboriosam laborum culpa autem accusantium reprehenderit!
+				</p>
+			</div>
+		</div>
+	);
+};
+
+export default WormHole;

apps/landing/src/hooks/useWindowSize.ts

@@ -0,0 +1,40 @@
+import { useState, useEffect
+ } from "react";
+
+ /*
+ A simple hook that returns the window size
+ */
+
+ type hookReturn = {
+	width: number | null;
+	height: number | null;
+	  };
+
+export const useWindowSize = (): hookReturn => {
+	  const [windowSize, setWindowSize] = useState<hookReturn>({
+		width: null,
+		height: null,
+	  });
+
+  useEffect(() => {
+	if (typeof window === 'undefined') {
+	  return;
+	}
+	const handleResize = () => {
+	  setWindowSize({
+		width: window.innerWidth,
+		height: window.innerHeight,
+	  });
+	};
+
+	window.addEventListener('load', handleResize);
+	window.addEventListener('resize', handleResize);
+
+	return () => {
+		window.removeEventListener('resize', handleResize)
+		window.removeEventListener('load', handleResize)
+	};
+  }, [windowSize.width, windowSize.height]);
+
+  return windowSize;
+}

apps/landing/src/pages/blog/[slug].tsx

@@ -1,4 +1,5 @@
 import { allPosts } from '@contentlayer/generated';
+import dayjs from 'dayjs';
 import { InferGetStaticPropsType } from 'next';
 import { useMDXComponent } from 'next-contentlayer/hooks';
 import Head from 'next/head';
@@ -66,7 +67,7 @@ export default function PostPage({ post }: InferGetStaticPropsType<typeof getSta
 							</h1>
 							<p className="m-0 mt-2">
 								by <b>{post.author}</b> &middot;{' '}
-								{new Date(post.date).toLocaleDateString()}
+								{dayjs(post.date).format('MM/DD/YYYY')}
 							</p>
 						</div>
 						<div className="flex flex-wrap gap-2">

apps/landing/src/pages/blog/index.tsx

@@ -1,4 +1,5 @@
 import { allPosts } from '@contentlayer/generated';
+import dayjs from 'dayjs';
 import { InferGetStaticPropsType } from 'next';
 import Head from 'next/head';
 import Image from 'next/image';
@@ -24,12 +25,12 @@ export default function BlogPage({ posts }: InferGetStaticPropsType<typeof getSt
 						Get the latest from Spacedrive.
 					</p>
 				</section>
-				<section className="animation-delay-2 mt-8 grid grid-cols-1 gap-4 will-change-transform fade-in sm:grid-cols-1 lg:grid-cols-1">
+				<section className="animation-delay-2 mt-8 grid grid-cols-1 will-change-transform fade-in sm:grid-cols-1 lg:grid-cols-1">
 					{posts.map((post) => (
 						<Link
 							key={post.slug}
 							href={post.url}
-							className="relative z-0 flex cursor-pointer flex-col gap-2 overflow-hidden rounded-xl border border-gray-500 transition-colors"
+							className="relative z-0 mb-10 flex cursor-pointer flex-col gap-2 overflow-hidden rounded-xl border border-gray-500 transition-colors"
 						>
 							{post.image && (
 								<Image
@@ -47,7 +48,7 @@ export default function BlogPage({ posts }: InferGetStaticPropsType<typeof getSt
 								{/* <p className="line-clamp-3 my-2">{post.excerpt}</p> */}
 								<p className="m-0 text-white">
 									by {post.author} &middot;{' '}
-									{new Date(post.date).toLocaleDateString()}
+									{dayjs(post.date).format('MM/DD/YYYY')}
 								</p>
 								<div className="mt-4 flex flex-wrap gap-2">
 									{post.tags.map((tag) => (

apps/landing/src/pages/index.tsx

@@ -1,165 +1,297 @@
-import { ReactComponent as Info } from '@sd/assets/svgs/info.svg';
+/* eslint-disable tailwindcss/enforces-negative-arbitrary-values */
+
+/* eslint-disable tailwindcss/classnames-order */
+
+/* eslint-disable jsx-a11y/alt-text */
+import { AndroidLogo, Globe, LinuxLogo, WindowsLogo } from '@phosphor-icons/react';
+import { Apple, Github } from '@sd/assets/svgs/brands';
 import clsx from 'clsx';
+import { motion } from 'framer-motion';
+import dynamic from 'next/dynamic';
 import Head from 'next/head';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
+import Image from 'next/image';
 import { useEffect, useState } from 'react';
-import AppImage from '~/components/AppImage';
-import HomeCTA from '~/components/HomeCTA';
+import { Tooltip, TooltipProvider, tw } from '@sd/ui';
 import NewBanner from '~/components/NewBanner';
 import PageWrapper from '~/components/PageWrapper';
-import { detectWebGLContext, getWindow } from '~/utils/util';
+import { Space } from '~/components/Space';
 
-interface SectionProps {
-	orientation: 'left' | 'right';
-	heading?: string;
-	description?: string | React.ReactNode;
-	children?: React.ReactNode;
-	className?: string;
-}
+import CyclingImage from '../components/CyclingImage';
 
-function Section(props: SectionProps = { orientation: 'left' }) {
-	const info = (
-		<div className="px-4 py-10 sm:px-10">
-			{props.heading && <h1 className="text-2xl font-black sm:text-4xl">{props.heading}</h1>}
-			{props.description && (
-				<p className="text-md mt-5 text-gray-450 sm:text-xl">{props.description}</p>
-			)}
-		</div>
-	);
-	return (
-		<div className={clsx('my-10 grid grid-cols-1 lg:my-44 lg:grid-cols-2', props.className)}>
-			{props.orientation === 'right' ? (
-				<>
-					{info}
-					{props.children}
-				</>
-			) : (
-				<>
-					{props.children}
-					{info}
-				</>
-			)}
-		</div>
-	);
-}
+const HomeCTA = dynamic(() => import('~/components/HomeCTA'), {
+	ssr: false
+});
+
+const ExplainerHeading = tw.h1`z-30 mb-3 px-2 text-center text-3xl font-black leading-tight text-white`;
+const ExplainerText = tw.p`leading-2 z-30 mb-8 mt-1 max-w-4xl text-center text-gray-450"`;
+
+const AppFrameOuter = tw.div`relative m-auto flex w-full max-w-7xl rounded-lg transition-opacity`;
+const AppFrameInner = tw.div`z-30 flex w-full rounded-lg border-t border-app-line/50 backdrop-blur`;
+
+const platforms = [
+	{ name: 'iOS and macOS', icon: Apple, href: '/api/releases/desktop/stable/darwin/x86_64' },
+	{ name: 'Windows', icon: WindowsLogo, href: '/api/releases/desktop/stable/windows/x86_64' },
+	{ name: 'Linux', icon: LinuxLogo, href: '/api/releases/desktop/stable/linux/x86_64' },
+	{ name: 'Android', icon: AndroidLogo },
+	{ name: 'Web', icon: Globe }
+];
 
 export default function HomePage() {
-	const [unsubscribedFromWaitlist, setUnsubscribedFromWaitlist] = useState(false);
-	const [background, setBackground] = useState<JSX.Element | null>(null);
+	const [opacity, setOpacity] = useState(0.6);
+	const [downloadMacOs, setDownloadMacOS] = useState(false);
+	const [deviceOs, setDeviceOs] = useState<null | {
+		isWindows: boolean;
+		isMacOs: boolean;
+		isMobile: boolean;
+		isLinux: boolean;
+	}>(null);
 
-	const router = useRouter();
+	const appleArch: 'aarch64' | 'x86' = 'aarch64';
 
 	useEffect(() => {
-		if (!getWindow()) return;
-		const cuid = router.query.wunsub;
-		if (!cuid) return;
 		(async () => {
-			console.log('Unsubscribing from waitlist', process.env.NODE_ENV);
-
-			const prod = process.env.NODE_ENV === 'production';
-
-			const req = await fetch(`https://app.spacedrive.com/api/v1/waitlist?cuid=${cuid}`, {
-				method: 'DELETE'
+			const os = await import('react-device-detect').then(
+				({ isWindows, isMacOs, isMobile }) => {
+					return { isWindows, isMacOs, isMobile };
+				}
+			);
+			setDeviceOs({
+				isWindows: os.isWindows,
+				isMacOs: os.isMacOs,
+				isMobile: os.isMobile,
+				isLinux: !os.isWindows && !os.isMacOs && !os.isMobile
 			});
-
-			if (req.ok) {
-				setUnsubscribedFromWaitlist(true);
-				window.history.replaceState(
-					{},
-					'',
-					prod ? 'https://spacedrive.com' : 'http://localhost:3001'
-				);
-
-				setTimeout(() => {
-					setUnsubscribedFromWaitlist(false);
-				}, 5000);
-			} else if (req.status >= 400 && req.status < 500) {
-				alert('An error occurred while unsubscribing from waitlist');
-			}
 		})();
-	}, [router.query.wunsub]);
+		const fadeStart = 300; // start fading out at 100px
+		const fadeEnd = 1300; // end fading out at 300px
 
-	useEffect(() => {
-		if (!(getWindow() && background == null)) return;
-		(async () => {
-			if (detectWebGLContext()) {
-				const Space = (await import('~/components/Space')).Space;
-				setBackground(<Space />);
+		const handleScroll = () => {
+			const currentScrollY = window.scrollY;
+
+			if (currentScrollY <= fadeStart) {
+				setOpacity(0.6);
+			} else if (currentScrollY <= fadeEnd) {
+				const range = fadeEnd - fadeStart;
+				const diff = currentScrollY - fadeStart;
+				const ratio = diff / range;
+				setOpacity(0.6 - ratio);
 			} else {
-				console.warn('Fallback to Bubbles background due WebGL not being available');
-				const Bubbles = (await import('~/components/Bubbles')).Bubbles;
-				setBackground(<Bubbles />);
+				setOpacity(0);
 			}
-		})();
-	}, [background]);
+		};
+
+		window.addEventListener('scroll', handleScroll);
+
+		return () => {
+			window.removeEventListener('scroll', handleScroll);
+		};
+	}, []);
 
 	return (
-		<PageWrapper>
-			<div className="flex w-full flex-col items-center px-4">
-				<Head>
-					<title>Spacedrive — A file manager from the future.</title>
-					<meta
-						name="description"
-						content="Combine your drives and clouds into one database that you can organize and explore from any device. Designed for creators, hoarders and the painfully disorganized."
-					/>
-				</Head>
-				<div className="mt-22 lg:mt-28" id="content" aria-hidden="true" />
-				<div className="mt-24 lg:mt-8" />
-				<NewBanner
-					headline="Spacedrive raises $2M led by OSS Capital"
-					href="/blog/spacedrive-funding-announcement"
-					link="Read post"
+		<TooltipProvider>
+			<Head>
+				<title>Spacedrive — A file manager from the future.</title>
+				<meta
+					name="description"
+					content="Combine your drives and clouds into one database that you can organize and explore from any device. Designed for creators, hoarders and the painfully disorganized."
 				/>
-
-				{unsubscribedFromWaitlist && (
-					<div
-						className={
-							'my-2 flex flex-row items-center rounded-md border-2 border-green-900 bg-green-800/20 px-2'
-						}
-					>
-						<Info className="mr-1 w-5 fill-green-500" />
-						<p className={'text-sm text-green-500'}>
-							You have been unsubscribed from the waitlist
-						</p>
-					</div>
-				)}
-
-				<h1 className="fade-in-heading z-30 mb-3 px-2 text-center text-4xl font-black leading-tight text-white md:text-7xl">
-					A file explorer from the future.
-				</h1>
-				<p className="animation-delay-1 fade-in-heading text-md leading-2 z-30 mb-8 mt-1 max-w-4xl text-center text-gray-450 lg:text-lg lg:leading-8">
-					Combine your drives and clouds into one database that you can organize and
-					explore from any device.
-					<br />
-					<span className="hidden sm:block">
-						Designed for creators, hoarders and the painfully disorganized.
-					</span>
-				</p>
-				<HomeCTA />
-				<AppImage />
-				<Section
-					orientation="right"
-					heading="Never leave a file behind."
-					className="z-30 mt-0 sm:mt-8"
-					description={
-						<>
-							Spacedrive accounts for every file you own, uniquely fingerprinting and
-							extracting metadata so you can sort, tag, backup and share files without
-							limitations of any one cloud provider.
-							<br />
-							<br />
-							<Link
-								className="text-primary-600 transition hover:text-primary-500"
-								href="/docs/product/getting-started/introduction"
-							>
-								Find out more →
-							</Link>
-						</>
-					}
+				<meta
+					property="og:image"
+					content="https://raw.githubusercontent.com/spacedriveapp/.github/main/profile/spacedrive_icon.png"
 				/>
-				{background}
+				<meta
+					name="keywords"
+					content="files,file manager,spacedrive,file explorer,vdfs,distributed filesystem,cas,content addressable storage,virtual filesystem,photos app, video organizer,video encoder,tags,tag based filesystem"
+				/>
+				<meta name="author" content="Spacedrive Technology Inc." />
+			</Head>
+			<div style={{ opacity }}>
+				<Space />
 			</div>
-		</PageWrapper>
+
+			<PageWrapper>
+				{/* <div
+					className="absolute-horizontal-center h-[140px] w-[60%] overflow-hidden
+				rounded-full bg-gradient-to-r from-indigo-500 to-fuchsia-500 opacity-60 blur-[80px] md:blur-[150px]"
+				/> */}
+				<Image
+					loading="eager"
+					className="absolute-horizontal-center fade-in"
+					width={1278}
+					height={626}
+					alt="l"
+					src="/images/headergradient.webp"
+				/>
+				<div className="flex w-full flex-col items-center px-4">
+					<div className="mt-22 lg:mt-28" id="content" aria-hidden="true" />
+					<div className="mt-24 lg:mt-8" />
+					<NewBanner
+						headline="Alpha release is finally here!"
+						href="/blog/october-alpha-release"
+						link="Read post"
+						className="mt-[50px] lg:mt-0"
+					/>
+
+					<h1 className="fade-in-heading z-30 mb-3 bg-clip-text px-2 text-center text-4xl font-bold leading-tight text-white md:text-5xl lg:text-7xl">
+						One Explorer. All Your Files.
+					</h1>
+					<p className="animation-delay-1 fade-in-heading text-md leading-2 z-30 mb-8 mt-1 max-w-4xl text-center text-gray-450 lg:text-lg lg:leading-8">
+						Unify files from all your devices and clouds into a single, easy-to-use
+						explorer.
+						<br />
+						<span className="hidden sm:block">
+							Designed for creators, hoarders and the painfully disorganized.
+						</span>
+					</p>
+					<div className="flex flex-row gap-3">
+						{deviceOs?.isMacOs ? (
+							<HomeCTA
+								icon={<Apple />}
+								text="Download for Mac"
+								onClick={() => setDownloadMacOS(!downloadMacOs)}
+							/>
+						) : (
+							<a
+								target="_blank"
+								href={`/api/releases/desktop/stable/${
+									deviceOs?.isLinux ? 'linux' : 'windows'
+								}/${appleArch}`}
+							>
+								<HomeCTA
+									icon={deviceOs?.isWindows ? <WindowsLogo /> : <Apple />}
+									className="z-5 relative"
+									text={`Download for ${deviceOs?.isWindows ? 'Windows' : 'Mac'}`}
+								/>
+							</a>
+						)}
+						{!downloadMacOs && (
+							<a
+								target="_blank"
+								href="https://www.github.com/spacedriveapp/spacedrive"
+							>
+								<HomeCTA
+									icon={<Github />}
+									className="z-5 relative"
+									text="Star on GitHub"
+								/>
+							</a>
+						)}
+					</div>
+
+					{downloadMacOs && (
+						<div className="mb-2 mt-4 flex flex-row gap-3 fade-in">
+							<a href="/api/releases/desktop/stable/macos/aarch64">
+								<HomeCTA
+									size="md"
+									className="z-5 relative !py-1 !text-sm"
+									text="Apple Silicon"
+								/>
+							</a>
+							<a href="/api/releases/desktop/stable/macos/x86">
+								<HomeCTA
+									size="md"
+									className="z-5 relative !py-1 !text-sm"
+									text="Apple Intel"
+								/>
+							</a>
+						</div>
+					)}
+					<p
+						className={clsx(
+							'animation-delay-3 z-30 mt-3 px-6 text-center text-sm text-gray-400 fade-in'
+						)}
+					>
+						Alpha v0.1.4 <span className="mx-2 opacity-50">|</span> macOS 12+
+					</p>
+					<div className="relative z-10 mt-5 flex gap-3">
+						{platforms.map((platform, i) => (
+							<motion.div
+								initial={{ opacity: 0, y: 20 }}
+								animate={{ opacity: 1, y: 0 }}
+								transition={{ delay: i * 0.2, ease: 'easeInOut' }}
+								key={platform.name}
+							>
+								<Platform
+									icon={platform.icon}
+									href={platform.href}
+									label={platform.name}
+								/>
+							</motion.div>
+						))}
+					</div>
+					<div className="pb-6 xs:pb-24">
+						<div
+							className="xl2:relative z-30 flex h-[255px] w-full px-6
+						 sm:h-[428px] md:mt-[75px] md:h-[428px] lg:h-auto"
+						>
+							<Image
+								loading="eager"
+								className="absolute-horizontal-center animation-delay-2 top-[380px] fade-in xs:top-[180px] md:top-[130px]"
+								width={1200}
+								height={626}
+								alt="l"
+								src="/images/appgradient.webp"
+							/>
+							<AppFrameOuter
+								className=" relative mt-10 overflow-hidden
+							transition-transform duration-700 ease-in-out hover:-translate-y-4 hover:scale-[1.02] md:mt-0"
+							>
+								<AppFrameInner>
+									<CyclingImage
+										loading="eager"
+										width={1278}
+										height={626}
+										alt="spacedrive app"
+										className="rounded-lg"
+										images={[
+											'/images/app/1.webp',
+											'/images/app/2.webp',
+											'/images/app/3.webp',
+											'/images/app/4.webp',
+											'/images/app/5.webp',
+											'/images/app/10.webp',
+											'/images/app/6.webp',
+											'/images/app/7.webp',
+											'/images/app/8.webp',
+											'/images/app/9.webp'
+										]}
+									/>
+									<Image
+										loading="eager"
+										className="pointer-events-none absolute opacity-100 transition-opacity duration-1000 ease-in-out hover:opacity-0 md:w-auto"
+										width={2278}
+										height={626}
+										alt="l"
+										src="/images/appgradientoverlay.png"
+									/>
+								</AppFrameInner>
+							</AppFrameOuter>
+						</div>
+					</div>
+
+					{/* <WormHole /> */}
+					{/* <BentoBoxes /> */}
+					{/* <CloudStorage /> */}
+					{/* <DownloadToday isWindows={deviceOs?.isWindows} /> */}
+					{/* <div className="h-[100px] sm:h-[200px] w-full" /> */}
+				</div>
+			</PageWrapper>
+		</TooltipProvider>
 	);
 }
+
+interface Props {
+	icon: any;
+	href?: string;
+	label: string;
+}
+
+const Platform = ({ icon: Icon, href, label }: Props) => {
+	return (
+		<Tooltip label={label}>
+			<a aria-label={label} href={href} target="_blank">
+				<Icon size={25} className="h-[25px] opacity-80" weight="fill" />
+			</a>
+		</Tooltip>
+	);
+};

apps/landing/src/pages/pricing.tsx

@@ -0,0 +1,184 @@
+import { Check } from '@phosphor-icons/react';
+import clsx from 'clsx';
+import Head from 'next/head';
+import Image from 'next/image';
+import React, { useState } from 'react';
+import { Button, Switch } from '@sd/ui';
+import PageWrapper from '~/components/PageWrapper';
+import { Space } from '~/components/Space';
+
+export default function PricingPage() {
+	const [toggle, setToggle] = useState<boolean>(false);
+	return (
+		<>
+			<Head>
+				<title>Pricing - Spacedrive</title>
+				<meta name="description" content="Spacedrive pricing and packages" />
+			</Head>
+			<div className="opacity-60">
+				<Space />
+			</div>
+			<PageWrapper>
+				<Image
+					loading="eager"
+					className="absolute-horizontal-center top-0 fade-in"
+					width={1278}
+					height={626}
+					alt="l"
+					src="/images/headergradient.webp"
+				/>
+				<div className="z-5 relative mt-48">
+					<h1
+						className="fade-in-heading mb-3 bg-gradient-to-r from-white from-40% to-indigo-400 to-60% bg-clip-text px-2 text-center text-4xl
+				font-bold leading-tight text-transparent"
+					>
+						Pricing
+					</h1>
+					<p className="animation-delay-1 fade-in-heading text-md leading-2 z-30 mx-auto mb-8 mt-1 max-w-2xl px-2 text-center text-gray-450 lg:text-lg lg:leading-8">
+						Spacedrive can be used for free as you like. Upgrading gives you access to
+						early features, and this is placeholder text
+					</p>
+					<div className="fade-in-heading animation-delay-2 mx-auto flex w-full items-center justify-center gap-3">
+						<p className="text-sm font-medium text-white">Monthly</p>
+						<Switch onCheckedChange={setToggle} checked={toggle} size="lg" />
+						<p className="text-sm font-medium text-white">Yearly</p>
+					</div>
+					<div
+						className="fade-in-heading animation-delay-2 mx-auto mb-[200px] mt-[75px] flex
+							 w-full max-w-[1000px] flex-col items-center justify-center gap-10 px-2 md:flex-row"
+					>
+						<PackageCard
+							features={[
+								'lorem ipsum text',
+								'lorem ipsum text',
+								'lorem ipsum text',
+								'lorem ipsum text',
+								'lorem ipsum text',
+								'lorem ipsum text'
+							]}
+							subTitle="Free for everyone"
+							toggle={toggle}
+							name="Free"
+						/>
+						<PackageCard
+							features={[
+								'lorem ipsum text',
+								'lorem ipsum text',
+								'lorem ipsum text',
+								'lorem ipsum text',
+								'lorem ipsum text',
+								'lorem ipsum text'
+							]}
+							toggle={toggle}
+							name="Pro"
+							price={{
+								monthly: '14.99',
+								yearly: '99.99'
+							}}
+						/>
+						<PackageCard
+							features={[
+								'lorem ipsum text',
+								'lorem ipsum text',
+								'lorem ipsum text',
+								'lorem ipsum text',
+								'lorem ipsum text',
+								'lorem ipsum text'
+							]}
+							subTitle="Contact sales"
+							toggle={toggle}
+							name="Enterprise"
+						/>
+					</div>
+				</div>
+			</PageWrapper>
+		</>
+	);
+}
+
+interface Props {
+	features: string[];
+	name: 'Free' | 'Pro' | 'Enterprise';
+	subTitle?: string;
+	price?: {
+		monthly: string;
+		yearly: string;
+	};
+	toggle: boolean;
+}
+
+const PackageCard = ({ features, name, price, toggle, subTitle }: Props) => {
+	const duration = toggle ? 'year' : 'month';
+	return (
+		<div
+			className={clsx(
+				'h-auto w-full max-w-[300px] bg-[#0E0D1B]',
+				'relative rounded-md',
+				name === 'Pro'
+					? 'pro-card-border-gradient pro-card-shadow'
+					: 'border border-[#222041]'
+			)}
+		>
+			{name === 'Pro' && (
+				<div
+					className="pro-card-border-gradient popular-shadow absolute-horizontal-center top-[-12px]
+				 rounded-[6px] bg-[#0E0D1B] px-5 py-1"
+				>
+					<p className="text-[10px] font-medium uppercase text-white">Popular</p>
+				</div>
+			)}
+			<div className="z-2 relative h-fit">
+				<div className="mx-auto h-[138px] w-[99.4%] border-b border-b-[#222041]">
+					<div className="flex flex-col items-center justify-center py-6">
+						<p className="text-md mb-4 uppercase text-[#A7ADD2]">{name}</p>
+						{price && (
+							<>
+								<p className="text-2xl font-bold leading-[1] text-white">
+									${toggle ? price.yearly : price.monthly}
+								</p>
+								<p className="text-md text-[#A7ADD2]">per {duration}</p>
+							</>
+						)}
+						{subTitle && (
+							<p className="text-2xl font-bold leading-[1] text-white">{subTitle}</p>
+						)}
+					</div>
+				</div>
+				<div className="h-full px-3 pb-8 pt-14 text-center">
+					<div className="mx-auto mb-20 flex h-[200px] w-fit flex-col items-start justify-center gap-3">
+						{name === 'Pro' && (
+							<p className="text-sm text-white">
+								Everything in <b>Free</b>, plus...
+							</p>
+						)}
+						{name === 'Enterprise' && (
+							<p className="text-sm text-white">
+								Everything in <b>Pro</b>, plus...
+							</p>
+						)}
+						{features.map((feature, index) => (
+							<div key={index} className="flex items-center justify-center gap-2.5">
+								<div className="flex h-5 w-5 items-center justify-center rounded-full border border-[#353252] bg-[#2A2741]">
+									<Check weight="bold" size={12} color="white" />
+								</div>
+								<p className="text-sm text-white">{feature}</p>
+							</div>
+						))}
+					</div>
+					<Button
+						className={clsx(
+							'h-[35px] px-3',
+							name === 'Pro' &&
+								'to-blur-500 border-0 bg-gradient-to-r from-violet-500'
+						)}
+						variant="accent"
+					>
+						{(name === 'Free' && 'Try for free') ||
+							(name === 'Pro' && 'Subscribe') ||
+							(name === 'Enterprise' && 'Contact us')}
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+};

apps/landing/src/pages/roadmap.tsx

@@ -30,8 +30,6 @@ const items = [
 			'Tasks to be performed via a queue system with multi-threaded workers, such as indexing, identifying, generating preview media and moving files. With a Job Manager interface for tracking progress, pausing and restarting jobs.'
 	},
 	{
-		when: 'Alpha',
-		subtext: 'Q2 2022',
 		completed: true,
 		title: 'Explorer',
 		description:
@@ -51,39 +49,41 @@ const items = [
 	},
 	{
 		completed: true,
+		title: 'Search',
+		description: 'Deep search into your filesystem with a keybind, including offline locations.'
+	},
+	{
+		completed: true,
+		title: 'Media View',
+		description: 'Turn any directory into a camera roll including media from subdirectories'
+	},
+	{
+		when: '0.1.0 Alpha',
+		subtext: 'June 2023',
 		title: 'Key manager',
 		description:
 			'View, mount, unmount and hide keys. Mounted keys can be used to instantly encrypt and decrypt any files on your node.'
 	},
 	{
-		when: 'Present Day',
+		when: '0.2.0',
 		title: 'Spacedrop',
 		description: 'Drop files between devices and contacts on a keybind like AirDrop.'
 	},
 	{
-		title: 'Search',
-		description: 'Deep search into your filesystem with a keybind, including offline locations.'
-	},
-	{
-		title: 'Photos',
-		description: 'Photos and video albums similar to Apple/Google photos.'
-	},
-	{
-		when: '0.1.0 Beta',
-		subtext: 'Q2 2023',
 		title: 'Realtime library synchronization',
 		description: 'Automatically synchronized libraries across devices via P2P connections.'
 	},
+	{
+		when: '0.3.0',
+		title: 'Cloud integration',
+		description:
+			'Index & backup to Apple Photos, Google Drive, Dropbox, OneDrive & Mega + easy API for the community to add more.'
+	},
 	{
 		title: 'Media encoder',
 		description:
 			'Encode video and audio into various formats, use Tags to automate. Built with FFmpeg.'
 	},
-	{
-		title: 'Cloud integration',
-		description:
-			'Index & backup to Apple Photos, Google Drive, Dropbox, OneDrive & Mega + easy API for the community to add more.'
-	},
 	{
 		title: 'Hosted Spaces',
 		description: 'Host select Spaces on our cloud to share with friends or publish on the web.'

apps/web/package.json

@@ -15,6 +15,8 @@
 		"@sd/client": "workspace:*",
 		"@sd/interface": "workspace:*",
 		"@tanstack/react-query": "^4.35",
+		"html-to-image": "^1.11.11",
+		"html2canvas": "^1.4.1",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-router-dom": "6.9.0"

apps/web/src/App.tsx

@@ -1,10 +1,12 @@
 import { hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 import { RspcProvider } from '@sd/client';
 import { Platform, PlatformProvider, routes, SpacedriveInterface } from '@sd/interface';
+import { useShowControls } from '@sd/interface/hooks';
 
 import demoData from './demoData.json';
+import ScreenshotWrapper from './ScreenshotWrapper';
 
 // TODO: Restore this once TS is back up to functionality in rspc.
 // const wsClient = createWSClient({
@@ -29,8 +31,7 @@ const spacedriveURL = (() => {
 	} else if (import.meta.env.DEV) {
 		currentURL.host = 'localhost:8080';
 	}
-	currentURL.pathname = 'spacedrive';
-	return currentURL.href;
+	return `${currentURL.origin}/spacedrive`;
 })();
 
 const platform: Platform = {
@@ -76,6 +77,9 @@ const queryClient = new QueryClient({
 const router = createBrowserRouter(routes);
 
 function App() {
+	const domEl = useRef<HTMLDivElement>(null);
+	const { isEnabled: showControls } = useShowControls();
+
 	useEffect(() => window.parent.postMessage('spacedrive-hello', '*'), []);
 
 	if (import.meta.env.VITE_SD_DEMO_MODE === 'true') {
@@ -83,15 +87,17 @@ function App() {
 	}
 
 	return (
-		<div className="App">
-			<RspcProvider queryClient={queryClient}>
-				<PlatformProvider platform={platform}>
-					<QueryClientProvider client={queryClient}>
-						<SpacedriveInterface router={router} />
-					</QueryClientProvider>
-				</PlatformProvider>
-			</RspcProvider>
-		</div>
+		<ScreenshotWrapper showControls={!!showControls}>
+			<div ref={domEl} className="App">
+				<RspcProvider queryClient={queryClient}>
+					<PlatformProvider platform={platform}>
+						<QueryClientProvider client={queryClient}>
+							<SpacedriveInterface router={router} />
+						</QueryClientProvider>
+					</PlatformProvider>
+				</RspcProvider>
+			</div>
+		</ScreenshotWrapper>
 	);
 }
 

apps/web/src/ScreenshotWrapper.tsx

@@ -0,0 +1,70 @@
+import * as htmlToImage from 'html-to-image';
+import React, { useEffect, useRef } from 'react';
+
+const ScreenshotWrapper = ({
+	showControls,
+	children
+}: {
+	showControls: boolean;
+	children: React.ReactNode;
+}) => {
+	const domEl = useRef(null);
+
+	const downloadImage = async () => {
+		const style = document.createElement('style');
+		style.innerHTML = `
+            ::-webkit-scrollbar {
+                display: none;
+            }
+            body, .no-scrollbar, .custom-scroll {
+                overflow: hidden !important;
+                -ms-overflow-style: none;
+                scrollbar-width: none;
+            }
+        `;
+		document.head.appendChild(style);
+
+		if (!domEl.current) return;
+		const dataUrl = await htmlToImage.toPng(domEl.current);
+
+		document.head.removeChild(style);
+
+		const link = document.createElement('a');
+		link.download = 'test.png';
+		link.href = dataUrl;
+		link.click();
+	};
+
+	useEffect(() => {
+		if (showControls) {
+			window.document.body.style.backgroundColor = 'black';
+			window.addEventListener('keyup', (e) => {
+				if (e.key === 'k') {
+					downloadImage();
+				}
+			});
+			return () => window.removeEventListener('keyup', downloadImage);
+		}
+	}, [showControls]);
+
+	return (
+		<div
+			ref={showControls ? domEl : null}
+			style={
+				showControls
+					? {
+							width: '1278px',
+							height: '626px',
+							margin: '0 auto',
+							position: 'relative',
+							overflow: 'hidden'
+					  }
+					: {}
+			}
+		>
+			{children}
+		</div>
+	);
+};
+
+export default ScreenshotWrapper;