added Landing page

.prettierignore

@@ -2,6 +2,7 @@
 !/server.mjs
 !/packages
 !/documentation
+!/landing
 packages/**/*.json
 packages/**/*.js
 packages/**/*.cjs

landing/.eslintrc.js

@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ['@remix-run/eslint-config', '@remix-run/eslint-config/node']
+}

landing/.gitignore

@@ -0,0 +1,7 @@
+.DS_Store
+node_modules
+
+/.cache
+/build
+/public/build
+.env

landing/README.md

@@ -0,0 +1,51 @@
+# Welcome to Remix!
+
+- [Remix Docs](https://remix.run/docs)
+
+## Development
+
+Start the Remix development asset server and the Express server by running:
+
+```sh
+npm run dev
+```
+
+This starts your app in development mode, which will purge the server require cache when Remix rebuilds assets so you don't need a process manager restarting the express server.
+
+## Deployment
+
+First, build your app for production:
+
+```sh
+npm run build
+```
+
+Then run the app in production mode:
+
+```sh
+npm start
+```
+
+Now you'll need to pick a host to deploy it to.
+
+### DIY
+
+If you're familiar with deploying express applications you should be right at home just make sure to deploy the output of `remix build`
+
+- `build/`
+- `public/build/`
+
+### Using a Template
+
+When you ran `npx create-remix@latest` there were a few choices for hosting. You can run that again to create a new project, then copy over your `app/` folder to the new project that's pre-configured for your target server.
+
+```sh
+cd ..
+# create a new project, and pick a pre-configured host
+npx create-remix@latest
+cd my-new-remix-app
+# remove the new project's app (not the old one!)
+rm -rf app
+# copy your app over
+cp -R ../my-old-remix-app/app app
+```

landing/app/components/hero.tsx

@@ -0,0 +1,23 @@
+import logo from '../../public/logo.svg'
+
+const Hero: React.FC = () => {
+  return (
+    <div className="h-auto flex flex-col items-center justify-center text-center space-y-12 pt-40 pb-32">
+      <img src={logo} className="h-24 w-24 invert" alt="Twake on matrix Logo" />
+      <h1 className="sm:text-4xl xl:text-4xl font-bold text-white max-w-4xl xl:max-w-5xl">
+        An open network for secure, decentralized communication
+      </h1>
+      <a
+        type="button"
+        className="py-4 px-8 bg-gray-200 hover:bg-cyan-500 hover:text-zinc-200 rounded-full text-xl"
+        href="https://to.twake.app/"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        Invite to matrix
+      </a>
+    </div>
+  )
+}
+
+export default Hero

landing/app/components/matrix-info.tsx

@@ -0,0 +1,62 @@
+const MatrixInfo: React.FC = () => {
+  return (
+    <div className="bg-zinc-200 h-auto w-full flex flex-col items-center justify-center py-28 px-10">
+      <div className="flex flex-col sm:space-y-5 md:flex-row items-center justify-center space-x-1 md:space-x-10 xl:space-x-36 2xl:px-96 xl:px-48 lg:px-24 px-0">
+        <div className="md:basis-1/3 basis-1 flex flex-col items-center justify-center italic text-lg space-y-3 pb-10">
+          <h1 className="font-bold text-lg">Imagine a world...</h1>
+          <span>
+            ...where it is as simple to message or call anyone as it is to send
+            them an email.
+          </span>
+          <span>
+            ...where you can communicate without being forced to install the
+            same app.
+          </span>
+          <span>...where you can choose who hosts your communication.</span>
+          <span>
+            ...where your conversations are secured by E2E encryption.
+          </span>
+          <span>
+            ...where there's a simple standard HTTP API for sharing real-time
+            data on the web.
+          </span>
+        </div>
+        <div className="md:basis-1/2 basis-1 flex flex-col items-center justify-center text-center sm:space-y-7 text-xl font-sans xl:pl-20">
+          <h1 className="text-3xl font-bold">This is Matrix.</h1>
+          <p>
+            Matrix is an open source project that publishes the{' '}
+            <a
+              href="https://matrix.org/docs/spec"
+              target="_blank"
+              rel="noreferrer noopener"
+              className="text-sky-500"
+            >
+              Matrix open standard
+            </a>{' '}
+            for secure, decentralised, real-time communication, and its Apache
+            licensed{' '}
+            <a
+              href="https://github.com/matrix-org"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-sky-500"
+            >
+              reference implementations.
+            </a>
+          </p>
+          <p>
+            Maintained by the non-profit Matrix.org Foundation, we aim to create
+            an open platform which is as independent, vibrant and evolving as
+            the Web itself... but for communication.
+          </p>
+          <p>
+            As of June 2019, Matrix is out of beta, and the protocol is fully
+            suitable for production usage.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default MatrixInfo

landing/app/components/nav.tsx

@@ -0,0 +1,62 @@
+import logo from '../../public/logo.svg'
+import gitlab from '../../public/gitlab.svg'
+
+const Nav: React.FC = () => {
+  return (
+    <nav className="bg-gray-100 bg-clip-border shadow-sm shadow-slate-800 h-20 w-full flex justify-between items-center fixed">
+      <div className="inline-flex">
+        <a href="/" title="Twake on matrix">
+          <div className="pl-4">
+            <img src={logo} alt="Twake on matrix logo" className="w-14 h-14" />
+          </div>
+        </a>
+      </div>
+      <div className="flex-auto">
+        <div className="flex justify-end md:items-center relative">
+          <div className="flex md:mr-4 md:items-center items-end space-x-10">
+            <a
+              href="https://twake.app/"
+              title="Twake"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              Twake
+            </a>
+            <a
+              href="https://linagora.com/"
+              title="Linagora"
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              LINAGORA
+            </a>
+          </div>
+        </div>
+      </div>
+      <div className="flex-initial">
+        <div className="flex md:justify-end md:items-center">
+          <div className="flex md:mr-4 md:items-center">
+            <div className="block relative">
+              <a
+                type="button"
+                className="py-2 md:px-3 px-1 rounded-full relative"
+                target="_blank"
+                href="https://ci.linagora.com/publicgroup/oss/twake/tom-server"
+                rel="noreferrer noopener"
+                title="GitLab public repository"
+              >
+                <img
+                  src={gitlab}
+                  className="w-14 h-14"
+                  alt="GitLab public repository"
+                />
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}
+
+export default Nav

landing/app/entry.client.tsx

@@ -0,0 +1,18 @@
+/**
+ * By default, Remix will handle hydrating your app on the client for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.client
+ */
+
+import { RemixBrowser } from '@remix-run/react'
+import { startTransition, StrictMode } from 'react'
+import { hydrateRoot } from 'react-dom/client'
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>
+  )
+})

landing/app/entry.server.tsx

@@ -0,0 +1,120 @@
+/**
+ * By default, Remix will handle generating the HTTP Response for you.
+ * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
+ * For more information, see https://remix.run/file-conventions/entry.server
+ */
+
+import { PassThrough } from 'node:stream'
+
+import type { EntryContext } from '@remix-run/node'
+import { Response } from '@remix-run/node'
+import { RemixServer } from '@remix-run/react'
+import isbot from 'isbot'
+import { renderToPipeableStream } from 'react-dom/server'
+
+const ABORT_DELAY = 5_000
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+): Promise<unknown> {
+  return isbot(request.headers.get('user-agent'))
+    ? await handleBotRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      )
+    : await handleBrowserRequest(
+        request,
+        responseStatusCode,
+        responseHeaders,
+        remixContext
+      )
+}
+
+async function handleBotRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+): Promise<Response> {
+  return await new Promise((resolve, reject) => {
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        onAllReady() {
+          const body = new PassThrough()
+
+          responseHeaders.set('Content-Type', 'text/html')
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: responseStatusCode
+            })
+          )
+
+          pipe(body)
+        },
+        onShellError(error: unknown) {
+          reject(error)
+        },
+        onError(error: unknown) {
+          responseStatusCode = 500
+          console.error(error)
+        }
+      }
+    )
+
+    setTimeout(abort, ABORT_DELAY)
+  })
+}
+
+async function handleBrowserRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+): Promise<Response> {
+  return await new Promise((resolve, reject) => {
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        onShellReady() {
+          const body = new PassThrough()
+
+          responseHeaders.set('Content-Type', 'text/html')
+
+          resolve(
+            new Response(body, {
+              headers: responseHeaders,
+              status: responseStatusCode
+            })
+          )
+
+          pipe(body)
+        },
+        onShellError(error: unknown) {
+          reject(error)
+        },
+        onError(error: unknown) {
+          console.error(error)
+          responseStatusCode = 500
+        }
+      }
+    )
+
+    setTimeout(abort, ABORT_DELAY)
+  })
+}