From cac1331831eef5d01056d9281e2d821f54d32108 Mon Sep 17 00:00:00 2001 From: Zetax Date: Tue, 25 Feb 2025 15:51:17 +0100 Subject: [PATCH 1/3] Website redesign Redesigned landing page, Navbar, Footer and Download-Beta page, added theme selector for light (default) and dark mode --- app/Buttons.tsx | 1 - app/download-beta/page.tsx | 223 +- app/globals.css | 30 + app/layout.tsx | 12 +- app/{download-beta => }/twinkle.css | 0 components/landingpage/Footer.tsx | 181 +- components/landingpage/LandingPage.tsx | 643 +-- components/theme-provider.tsx | 47 + components/theme-toggle.tsx | 21 + components/ui/icons.tsx | 28 + components/ui/navbar.tsx | 70 + components/ui/sparke.tsx | 25 + lib/utils.ts | 21 + pnpm-lock.yaml | 6653 ++++++++++++++++++++++++ public/void/slice_of_void_light.png | Bin 0 -> 887840 bytes 15 files changed, 7346 insertions(+), 609 deletions(-) rename app/{download-beta => }/twinkle.css (100%) create mode 100644 components/theme-provider.tsx create mode 100644 components/theme-toggle.tsx create mode 100644 components/ui/icons.tsx create mode 100644 components/ui/navbar.tsx create mode 100644 components/ui/sparke.tsx create mode 100644 pnpm-lock.yaml create mode 100644 public/void/slice_of_void_light.png diff --git a/app/Buttons.tsx b/app/Buttons.tsx index 01715f0..9d2b4e8 100644 --- a/app/Buttons.tsx +++ b/app/Buttons.tsx @@ -3,7 +3,6 @@ import { IoLogoGithub } from "react-icons/io" import posthog from "posthog-js" import { waitlistLink, githubStarLink } from "@/components/links" -import { FaDiscord } from "react-icons/fa" export const StarOnGithubButton = ({ label = undefined, posthogLabel }: { label?: string, posthogLabel?: string }) => { //
diff --git a/app/download-beta/page.tsx b/app/download-beta/page.tsx index 5759b80..7e7c80a 100644 --- a/app/download-beta/page.tsx +++ b/app/download-beta/page.tsx @@ -2,78 +2,29 @@ /* eslint-disable @next/next/no-img-element */ import { discordLink, downloadOfOS, releaseLink } from '@/components/links'; -import { useMemo, useState } from 'react'; import { FaApple, FaLinux, FaWindows } from 'react-icons/fa'; -import './twinkle.css' import Image from 'next/image'; import posthog from 'posthog-js'; - - -const generatePseudoRandomPositions = (numToGenerate: number, seed: number) => { - const prng = (seed: number) => { - let value = seed; - return () => { - value = (value * 16807) % 2147483647; - return value / 2147483647; - }; - }; - const random = prng(seed); - const positions: { left: number, top: number, startOffset: number, duration: number }[] = []; - for (let i = 0; i < numToGenerate; i++) { - positions.push({ - left: random() * 100, - top: random() * 100, - startOffset: random() * 1, - duration: 1.5 + random() * 2, - }); - } - return positions; -}; - - -const SparkleOverlay = ({ number, seed }: { number: number, seed: number }) => { - const sparklePositions = useMemo(() => generatePseudoRandomPositions(number, seed), [number, seed]); - - return ( -
- {sparklePositions.map((position, i) => ( -
- ))} -
- ); -}; - - +import { SparkleOverlay } from '@/components/ui/sparke'; const DownloadButton = ({ url, tag, defaultFileName = 'Void-Installer', children, className }: { url: string, tag: string, defaultFileName?: string, children: React.ReactNode, className?: string }) => { - return ( { posthog.capture('Click Download', { url, tag }) }} > - {children} + + {children} + +
- - ); }; @@ -128,102 +79,76 @@ const FloatingElement = () => { // TODO need to add this to opengraph, sitemap, metdata, etc, it's 100% private right now const DownloadBetaPage = () => { - return
- -
- - - - - {/* left: text */} -
- {/* title */} -

-
- {`Download Void.`} -
-

- - {/* desc */} -
- {`Try the beta edition of Void, and help us improve by providing `} - - feedback - ! + return ( +
+
+ {/* Grid background */} +
+
- {/* buttons */} -
- -
- - - - - Download for Mac - - - - - - - - - - Intel - - - - +
+
+ {/* Title */} +
+

+ Download Void +

+

+ Try the beta edition of Void, and help us improve by providing{' '} + + feedback + ! +

+
+ + {/* Download buttons */} +
+
+ + + Download for Mac + + + + + + Intel + + +
+ +
+ + + Download for Windows + + +
+
+ + {/* Floating logo */} +
+ +
+
+ + {/* Footer */} +
+

+ Alternatively, download Void from the source on{' '} + + GitHub + . +

- -
- - - - - Download for Windows - - - - - {/* - - - - Linux - - - - */} -
- -
+
- - {/* right: floater */} -
- -
- - - - - - {/* desc */} -
- {`Alternatively, download Void from the source on `} - - GitHub - {`.`}
- - -} + ); +}; export default DownloadBetaPage diff --git a/app/globals.css b/app/globals.css index b5c61c9..06a66a1 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,3 +1,33 @@ @tailwind base; @tailwind components; @tailwind utilities; + +:root { + --background: #ffffff; + --foreground: #171717; +} + +:root[class~="dark"] { + --background: #0a0a0a; + --foreground: #ededed; +} + +body { + color: var(--foreground); + background: var(--background); +} + +/* Add theme-aware utility classes */ +@layer utilities { + .text-primary { + @apply text-gray-900 dark:text-white; + } + + .bg-primary { + @apply bg-white dark:bg-black; + } + + .border-primary { + @apply border-gray-200 dark:border-white/20; + } +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index bf96106..3506e52 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -8,6 +8,8 @@ import "./globals.css"; import { Footer } from "@/components/landingpage/Footer"; import { Header } from "@/components/landingpage/Header"; import { CSPostHogProvider } from '../components/providers' +import Navbar from "@/components/ui/navbar"; +import { ThemeProvider } from "@/components/theme-provider"; // const inter = Inter({ subsets: ["latin"] }); @@ -43,14 +45,16 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
{/* in dark mode, text-black is not the default */} -
- {children} -
+ + + {children} +
+
- + ); } diff --git a/app/download-beta/twinkle.css b/app/twinkle.css similarity index 100% rename from app/download-beta/twinkle.css rename to app/twinkle.css diff --git a/components/landingpage/Footer.tsx b/components/landingpage/Footer.tsx index 34aca2d..387aa2d 100644 --- a/components/landingpage/Footer.tsx +++ b/components/landingpage/Footer.tsx @@ -1,48 +1,151 @@ 'use client' -import { FaDiscord } from "react-icons/fa" -import { changelogLink, discordLink, downloadLink, emailLink, githubLink, support_email, waitlistLink } from "../links" -import { IoLogoGithub } from "react-icons/io" import Image from "next/image" - -export const Footer = () => { - - return (<> - -