landing changes, readme, faq

README.md

@@ -13,11 +13,11 @@
     <br />
     <br />
     <b>Download for </b>
-    <a href="">macOS</a>
+    <a href="#">macOS</a>
     ·
-    <a href="">Windows</a>
+    <a href="#">Windows</a>
     ·
-    <a href="">Linux</a>
+    <a href="#">Linux</a>
     ·
     iOS
     ·
@@ -37,13 +37,25 @@ Organize files across many devices in one place. From cloud services to offline
 For independent creatives, hoarders and those that want to own their digital footprint. Spacedrive provides a file management experience like no other, and its completely free.
 <br />
 <br />
+<p align="center">
+  <img src="https://raw.githubusercontent.com/spacedriveapp/.github/main/profile/spacedrive_screenshot.jpg" alt="Logo">
+  <br />
+  <br />
+  <img src="https://img.shields.io/discord/949090953497567312?label=Discord&color=5865F2" />
+  <a href="https://twitter.com/spacedriveapp">
+    <img src="https://img.shields.io/badge/Twitter-00acee?logo=twitter&logoColor=white" />
+  </a>
+  <a href="https://instagram.com/spacedriveapp">
+    <img src="https://img.shields.io/badge/Instagram-E4405F?logo=instagram&logoColor=white" />
+  </a>
+  <img src="https://img.shields.io/static/v1?label=Licence&message=GNU%20v3&color=000" />
+  <img src="https://img.shields.io/static/v1?label=Bundled%20Size&message=16.3MB&color=0974B4" />
+  <img src="https://img.shields.io/static/v1?label=Stage&message=Alpha&color=2BB4AB" />
+  <br />
+</p>
 
 > NOTE: Spacedrive is under active development, most of the listed features are still experimental and subject to change. Additionally, most of the links on this page are broken but will be working once the repository is made public. 
 > 
-<br />
-
-<img src="https://raw.githubusercontent.com/spacedriveapp/.github/main/profile/spacedrive_screenshot.jpg" alt="Logo">
-
 
 # What is a VDFS?
 A VDFS (virtual distributed filesystem) is a filesystem designed to work atop a variety of storage layers. It is not restricted to a single machine, with a uniform API to manipulate and access content across many devices. It achieves this by maintaining a virtual index of all storage locations, synchronizing the database between clients in realtime. This implementation also uses [CAS](https://en.wikipedia.org/wiki/Content-addressable_storage) (Content-addressable storage) to uniquely identify files, while keeping record of logical file paths relative to the storage locations. 
@@ -84,7 +96,6 @@ Many of us have multiple cloud accounts, drives that aren’t backed up and data
 # Developer Installation Instructions
 This environment uses [Cargo](https://doc.rust-lang.org/cargo/getting-started/installation.html) and [pnpm](https://pnpm.io/installation). Ensure you have them installed before continuing.
 
-- `$ cargo install prisma-client-rust-cli`
 - `$ git clone https://github.com/spacedriveapp/spacedrive`
 - `$ cd spacedrive`
 - `$ pnpm i`
@@ -93,12 +104,9 @@ This environment uses [Cargo](https://doc.rust-lang.org/cargo/getting-started/in
 To quickly run only the desktop app after `prep` you can use:
 - `$ pnpm desktop dev`
 
-If you are making changes to any TS packages you must run their respective dev environments too, for example: 
-- `$ pnpm core dev`
-- `$ pnpm ui dev`
-  
-Or to run everything specific to desktop app development just run:
-- `$ pnpm dev`
+To run the landing page
+- `$ pnpm web dev` - runs the web app for the embed
+- `$ pnpm landing dev`
 
 If you are having issues ensure you are using the following versions of Rust and Node:
 - Rust version: **1.58.1**
@@ -106,25 +114,27 @@ If you are having issues ensure you are using the following versions of Rust and
 
 # Architecture
 This project is using what I'm calling the **"PRRTT"** stack (Prisma, Rust, React, TypeScript, Tauri). 
-- Prisma on the front-end? 🤯 Made possible thanks to [prisma-client-rust](), developed by [Brendonovich](). Gives us access to the powerful migration CLI in development, along with the Prisma syntax for our schema. The application bundles with the Prisma query engine and codegen for a beautiful Rust API. Our lightweight migration runner is custom built for a desktop app context.
+- Prisma on the front-end? 🤯 Made possible thanks to [prisma-client-rust](https://github.com/brendonovich/prisma-client-rust), developed by [Brendonovich](https://github.com/brendonovich). Gives us access to the powerful migration CLI in development, along with the Prisma syntax for our schema. The application bundles with the Prisma query engine and codegen for a beautiful Rust API. Our lightweight migration runner is custom built for a desktop app context.
 - Tauri allows us to create a pure Rust native OS webview, without the overhead of your average Electron app. This brings the bundle size and average memory usage down dramatically. It also contributes to a more native feel, especially on macOS due to Safari's close integration with the OS. 
 - The core (`sdcore`) is written in pure Rust.
 
 ## Monorepo structure: 
 
 ### Apps:
-- `desktop`: A [Tauri](https://nextjs.org) app.
-- `mobile`: A [React Native](https://nextjs.org) app.
-- `web`: A [Next.js](https://nextjs.org) app.
+- `desktop`: A [Tauri](https://tauri.studio) app.
+- `mobile`: A [React Native](https://reactnative.dev/) app.
+- `web`: A [React](https://reactjs.org) webapp.
+- `landing`: A [React](https://reactjs.org) app using Vite SSR & Vite pages.
 
 ### Core:
-- `core`: The [Rust]() core, referred to internally as `sdcore`. Contains filesystem, database and networking logic. Can be deployed in a variety of host applications.
+- `core`: The [Rust](#) core, referred to internally as `sdcore`. Contains filesystem, database and networking logic. Can be deployed in a variety of host applications.
 
 ### Packages:
-- `client`: The [TypeScript]() Typescript client handling dataflow between UI and the Rust core.
-- `ui`: A [React Native]() / [RNW]() Component library.
+- `client`: A [TypeScript](#) client library to handle dataflow via RPC between UI and the Rust core.
+- `ui`: A [React]([#](https://reactjs.org)) Shared component library.
+- `interface`: The complete user interface in React (used by apps `desktop`, `web` and `landing`)
 - `config`: `eslint` configurations (includes `eslint-config-next`, `eslint-config-prettier` and all `tsconfig.json` configs used throughout the monorepo.
-- `macos`: A [Swift]() Native binary for MacOS system extensions.
-- `ios`: A [Swift]() Native binary (planned).
-- `windows`: A [C#]() Native binary (planned).
-- `android`: A [Kotlin]() Native binary (planned).
+- `macos`: A [Swift](#) Native binary for MacOS system extensions.
+- `ios`: A [Swift](#) Native binary (planned).
+- `windows`: A [C#](#) Native binary (planned).
+- `android`: A [Kotlin](#) Native binary (planned).

apps/landing/src/App.tsx

@@ -7,6 +7,38 @@ import { ReactComponent as AppleLogo } from './assets/apple.svg';
 import { ReactComponent as AppLogo } from './assets/app-logo.svg';
 import NavBar from './components/NavBar';
 
+interface SectionProps {
+  orientation: 'left' | 'right';
+  heading?: string;
+  description?: string;
+  children?: React.ReactNode;
+}
+
+function Section(props: SectionProps = { orientation: 'left' }) {
+  let info = (
+    <div className="p-10">
+      {props.heading && <h1 className="text-4xl font-black">{props.heading}</h1>}
+      {props.description && <p className="mt-5 text-xl text-gray-450">{props.description}</p>}
+    </div>
+  );
+  let children = <div className="p-10 ">{props.children}</div>;
+  return (
+    <div className="grid grid-cols-2 my-44">
+      {props.orientation === 'right' ? (
+        <>
+          {info}
+          {children}
+        </>
+      ) : (
+        <>
+          {children}
+          {info}
+        </>
+      )}
+    </div>
+  );
+}
+
 function App() {
   return (
     <div>
@@ -16,8 +48,10 @@ function App() {
         <h1 className="text-4xl font-black leading-snug text-center md:text-6xl mt-36">
           The file explorer from the future
         </h1>
-        <p className="max-w-5xl mt-1 mb-8 text-lg text-center text-gray-450">
-          Spacedrive is the first file explorer that puts the full power of the cloud in your hands.
+        <p className="max-w-3xl mt-1 mb-8 text-lg text-center text-gray-450">
+          Spacedrive allows you to manage files across all devices, drives and clouds at once.
+          <br />
+          Designed for creators, hoarders and the painfully disorganized.
         </p>
         <div className="flex flex-row space-x-4">
           {/* <Button className="px-2">
@@ -44,16 +78,24 @@ function App() {
           height={600}
           src="http://localhost:8002?library_id=9068c6ec-cf90-451b-bb30-4174781e7bc6"
         />
-        <div className="grid grid-cols-2 my-44">
-          <div className="p-10">
-            <h1 className="text-4xl font-black">See the bigger picture</h1>
-            <p className="mt-5 text-xl text-gray-450">
-              Using content addressable storage in a virtual distributed filesystem, Spacedrive
-              securely combines the storage capacity and processing power of your devices into one.
-            </p>
-          </div>
-          <div className="p-10 "></div>
-        </div>
+        <Section
+          orientation="right"
+          heading="It's one big catalogue"
+          description="Using content addressable storage in a virtual distributed filesystem, Spacedrive securely
+    combines the storage capacity and processing power of your devices into one."
+        />
+        <Section
+          orientation="left"
+          heading="It's one big catalogue"
+          description="Using content addressable storage in a virtual distributed filesystem, Spacedrive securely
+    combines the storage capacity and processing power of your devices into one."
+        />
+        <Section
+          orientation="right"
+          heading="It's one big catalogue"
+          description="Using content addressable storage in a virtual distributed filesystem, Spacedrive securely
+    combines the storage capacity and processing power of your devices into one."
+        />
         <div className="h-[500px]" />
       </div>
       <Bubbles />

apps/landing/src/components/NavBar.tsx

@@ -39,10 +39,11 @@ export default function NavBar() {
 
         <div className="space-x-4 text-white mx-28">
           <NavLink>Product</NavLink>
-          <NavLink>Developers</NavLink>
           <NavLink>Documentation</NavLink>
           <NavLink>Support</NavLink>
-          <NavLink>Download</NavLink>
+          <NavLink>FAQ</NavLink>
+          <NavLink>Changelog</NavLink>
+          <NavLink>Blog</NavLink>
         </div>
       </div>
     </div>

docs/product/faq.md

@@ -1,3 +1,9 @@
+
+
+##  What is it?
+
+Spacedrive is a cross platform app that allows you to manage files across all devices, drives and clouds at once. Check out the [readme](https://github.com/spacedriveapp) for more detailed info.
+
 ## Can I download it yet?
 
 Only if you compile it yourself, but it is not stable yet. Follow [@spacedriveapp](https://twitter.com/spacedriveapp) for updates!
@@ -8,7 +14,7 @@ This software is aimed at independent creatives such as filmmakers, streamers, m
 
 ## Why do I need this?
 
-In the same way we use finance apps to consolidate our books, Spacedrive consolidates files and the metadata associated with them. If you have external hard drives, cloud accounts and more than one device—you'll get a birds eye view of every file you own and the ability to create folders, tags and albums that contain files from all different locations. 
+In the same way we use finance apps to consolidate our books, Spacedrive consolidates files and the metadata associated with them. If you have external hard drives, cloud accounts and more than one device—you'll get a birds eye view of every file you own. With the ability to create folders, tags and albums that contain files from all different locations. 
 
 ## What makes this different to Dropbox or Google Drive?
 

packages/interface/src/components/file/Sidebar.tsx

@@ -113,11 +113,6 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
           <Icon component={CirclesFour} />
           Content
         </SidebarLink>
-
-        <SidebarLink to="media">
-          <Icon component={MonitorPlay} />
-          Albums
-        </SidebarLink>
         {/* <SidebarLink to="explorer">
           <Icon component={MonitorPlay} />
           Explorer