diff --git a/packages/web/src/assets/color-gradient-backdrop.svg b/packages/web/src/assets/color-gradient-backdrop.svg new file mode 100644 index 0000000..e5a4571 --- /dev/null +++ b/packages/web/src/assets/color-gradient-backdrop.svg @@ -0,0 +1 @@ + diff --git a/packages/web/src/assets/crate-glyph-dark.svg b/packages/web/src/assets/crate-glyph-dark.svg new file mode 100644 index 0000000..ccbc8b0 --- /dev/null +++ b/packages/web/src/assets/crate-glyph-dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web/src/assets/crate-glyph-light.svg b/packages/web/src/assets/crate-glyph-light.svg new file mode 100644 index 0000000..a56a66a --- /dev/null +++ b/packages/web/src/assets/crate-glyph-light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web/src/assets/crate-logo.svg b/packages/web/src/assets/crate-logo.svg new file mode 100644 index 0000000..becbbc0 --- /dev/null +++ b/packages/web/src/assets/crate-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web/src/assets/dark-crate-glyph.svg b/packages/web/src/assets/dark-crate-glyph.svg deleted file mode 100644 index 9698ca8..0000000 --- a/packages/web/src/assets/dark-crate-glyph.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/web/src/assets/dark-crate.svg b/packages/web/src/assets/dark-crate.svg deleted file mode 100644 index 8638aca..0000000 --- a/packages/web/src/assets/dark-crate.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/packages/web/src/assets/landing-gradient.svg b/packages/web/src/assets/landing-gradient.svg new file mode 100644 index 0000000..d287ec8 --- /dev/null +++ b/packages/web/src/assets/landing-gradient.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/web/src/assets/light-crate-glyph.svg b/packages/web/src/assets/light-crate-glyph.svg deleted file mode 100644 index bf2b581..0000000 --- a/packages/web/src/assets/light-crate-glyph.svg +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/web/src/assets/light-crate.svg b/packages/web/src/assets/light-crate.svg deleted file mode 100644 index fbba93a..0000000 --- a/packages/web/src/assets/light-crate.svg +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - - - - - - - - - diff --git a/packages/web/src/components/Navigation.tsx b/packages/web/src/components/Navigation.tsx index 5c684f0..a16847b 100644 --- a/packages/web/src/components/Navigation.tsx +++ b/packages/web/src/components/Navigation.tsx @@ -1,116 +1,87 @@ -import BrightCrateLogo from "../assets/light-crate.svg" -import DarkCrateLogo from "../assets/dark-crate.svg" -import { useEffect, useState } from "preact/hooks" +import crateLogo from "../assets/crate-logo.svg" import { Link } from "preact-router" import { useUserStore } from "../store/UserStore" -function CrateLogo() { - const [useDark, setUseDark] = useState(false) - - useEffect(() => { - const watcher = window.matchMedia("(prefers-color-scheme: dark)") - setUseDark(watcher.matches) - watcher.onchange = (ev) => setUseDark(ev.matches) - }, []) - - return useDark ? ( - - ) : ( - - ) -} - -export default function Navigation() { +export default function Navigation(props) { const loggedIn = useUserStore((state) => state.signedIn) return ( - <> -
+
+
-
-
-
- +
) } diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx index 33efef8..f20aff7 100644 --- a/packages/web/src/main.tsx +++ b/packages/web/src/main.tsx @@ -1,4 +1,4 @@ -import { render } from "preact" +import { Fragment, render } from "preact" import { useEffect, useErrorBoundary } from "preact/hooks" import Router, { route } from "preact-router" import AsyncRoute from "preact-async-route" @@ -86,7 +86,7 @@ const Page = (props: PageProps) => { export function App() { return ( - + } title={"Crate"}> diff --git a/packages/web/src/pages/Authenticate.tsx b/packages/web/src/pages/Authenticate.tsx index 41f0f50..26f2595 100644 --- a/packages/web/src/pages/Authenticate.tsx +++ b/packages/web/src/pages/Authenticate.tsx @@ -1,7 +1,7 @@ import Button from "../components/Button" import FormBox from "../components/FormBox" import FormInput from "../components/FormInput" -import AppleLogo from "../assets/signin-apple-logo.svg" +import appleLogo from "../assets/signin-apple-logo.svg" import { Link, route } from "preact-router" import { useState } from "preact/hooks" import { useUserStore } from "../store/UserStore" @@ -90,7 +90,7 @@ function SignInWithApple({ className="flex flex-row items-center justify-between w-full p-2 mt-4 overflow-hidden text-white align-middle bg-black h-9 hover:shadow-md transition-shadow" onClick={useApple} > - + Apple sign-in {providerText} with Apple diff --git a/packages/web/src/pages/Splash.tsx b/packages/web/src/pages/Splash.tsx index 2126d35..65b4803 100644 --- a/packages/web/src/pages/Splash.tsx +++ b/packages/web/src/pages/Splash.tsx @@ -1,6 +1,8 @@ import { Link, route } from "preact-router" -import { useEffect } from "preact/hooks" +import { useEffect, useState } from "preact/hooks" +import Navigation from "../components/Navigation" import { useUserStore } from "../store/UserStore" +import colorGradientBackdrop from "../assets/color-gradient-backdrop.svg" export default function Splash() { const loggedIn = useUserStore((state) => state.signedIn) @@ -9,44 +11,61 @@ export default function Splash() { route("/files", true) } }, [loggedIn]) + + const [[r1, r2, r3, r4, r5], setRand] = useState([1, 1, 1, 1, 1] as number[]) + useEffect(() => { + const interval = setInterval(() => { + setRand((arr) => arr.map(Math.random)) + }, 6000) + return () => clearInterval(interval) + }, []) + return ( -
-
-

- Cloud storage, - - reimagined. - -

-

- Store your files securely, with crypographically-verified guarantees - on data accessibility. Access your files on all your devices, from - anywhere in the world. Store as much data as you want. Get 1 TB of - storage for just - $10/month. -

-
-
+ <> + + +
+
+

+ Cloud storage, + + reimagined. + +

+

+ Store your files securely, with crypographically-verified guarantees + on data accessibility. Access your files on all your devices, from + anywhere in the world. Store as much data as you want. Get 1 TB of + storage for just + $10/month. +

+
Get started -
-
Learn more
-
+
+ ) } diff --git a/packages/web/vite.config.ts b/packages/web/vite.config.ts index e3cc402..1a1740e 100644 --- a/packages/web/vite.config.ts +++ b/packages/web/vite.config.ts @@ -30,13 +30,11 @@ export default defineConfig({ mode: [Mode.HTML, Mode.REACT], }), tsconfigPaths(), - magicalSvg({ - // By default, the output will be a dom element (the you can use inside the webpage). - // You can also change the output to react (or preact) to get a component you can use. - target: "preact", - // By default, the svgs are optimized with svgo. You can disable this by setting this to false. - svgo: false, - }), + //magicalSvg({ + //// By default, the output will be a dom element (the you can use inside the webpage). + //// You can also change the output to react (or preact) to get a component you can use. + //target: "preact", + //}), visualizer(), ], })