From 2108ff0c8e95c537d03dad0c9859aec4cbc16ee7 Mon Sep 17 00:00:00 2001
From: Arnab Chakraborty <11457760+Rocky43007@users.noreply.github.com>
Date: Fri, 30 Aug 2024 18:51:27 -0400
Subject: [PATCH] New Navbar & Banner

---
 .../src/app/{NewBanner.tsx => Banner.tsx}     |  10 +-
 apps/landing/src/app/Downloads/Platform.tsx   |   2 +-
 apps/landing/src/app/NavBar/index.tsx         | 132 ++++++++++++------
 apps/landing/src/app/blog/[slug]/page.tsx     |   2 +-
 apps/landing/src/app/blog/page.tsx            |   2 +-
 apps/landing/src/app/docs/Markdown.tsx        |   2 +-
 apps/landing/src/app/layout.tsx               |  10 +-
 apps/landing/src/app/page.tsx                 |  15 +-
 apps/landing/src/app/roadmap/page.tsx         |   2 +-
 apps/landing/src/components/Markdown.tsx      |   2 +-
 packages/ui/style/tailwind.js                 |   2 +-
 11 files changed, 113 insertions(+), 68 deletions(-)
 rename apps/landing/src/app/{NewBanner.tsx => Banner.tsx} (61%)

diff --git a/apps/landing/src/app/NewBanner.tsx b/apps/landing/src/app/Banner.tsx
similarity index 61%
rename from apps/landing/src/app/NewBanner.tsx
rename to apps/landing/src/app/Banner.tsx
index 7c120234d..99f4b4d9b 100644
--- a/apps/landing/src/app/NewBanner.tsx
+++ b/apps/landing/src/app/Banner.tsx
@@ -1,15 +1,15 @@
-import { Newspaper } from '@phosphor-icons/react/dist/ssr';
+import { Star } from '@phosphor-icons/react/dist/ssr';
 import clsx from 'clsx';
 import Link from 'next/link';
 
-export interface NewBannerProps {
+export interface BannerProps {
 	headline: string;
 	href?: string;
 	link?: string;
 	className?: string;
 }
 
-export function NewBanner(props: NewBannerProps) {
+export function Banner(props: BannerProps) {
 	const { headline, href, link } = props;
 
 	return (
@@ -17,11 +17,11 @@ export function NewBanner(props: NewBannerProps) {
 			href={href ?? '/'}
 			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 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'
+				'animation-delay-1 fade-in-whats-new z-10 mb-5 flex w-fit flex-row rounded-full border-[1.5px] border-yellow-700 bg-yellow-600 px-5 py-2.5 text-xs backdrop-blur-md transition sm:w-auto sm:text-base'
 			)}
 		>
 			<div className="flex items-center gap-2">
-				<Newspaper weight="fill" className="text-white" size={20} />
+				<Star weight="fill" className="text-white" size={20} />
 				<p className="font-regular truncate text-white">{headline}</p>
 			</div>
 			{link && (
diff --git a/apps/landing/src/app/Downloads/Platform.tsx b/apps/landing/src/app/Downloads/Platform.tsx
index 69d7473e2..be65681e8 100644
--- a/apps/landing/src/app/Downloads/Platform.tsx
+++ b/apps/landing/src/app/Downloads/Platform.tsx
@@ -8,7 +8,7 @@ import { Tooltip } from '@sd/ui';
 export type Platform = {
 	name: string;
 	os?: string;
-	icon: Icon | FunctionComponent<any>;
+	icon: React.ElementType<any> | Icon;
 	version?: string;
 	links?: Array<{ name: string; arch: string }>;
 	disabled?: boolean;
diff --git a/apps/landing/src/app/NavBar/index.tsx b/apps/landing/src/app/NavBar/index.tsx
index 7b91946ed..2fde75116 100644
--- a/apps/landing/src/app/NavBar/index.tsx
+++ b/apps/landing/src/app/NavBar/index.tsx
@@ -1,3 +1,4 @@
+import { Cloud } from '@phosphor-icons/react/dist/ssr';
 import { Discord, Github } from '@sd/assets/svgs/brands';
 import Image from 'next/image';
 import Link from 'next/link';
@@ -9,54 +10,87 @@ import { MobileDropdown } from './MobileDropdown';
 
 export function NavBar() {
 	return (
-		<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 size-8" />
-					<h3 className="text-xl font-bold text-white">Spacedrive</h3>
-				</Link>
+		// <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 size-8" />
+		// 			<h3 className="text-xl font-bold text-white">Spacedrive</h3>
+		// 		</Link>
 
-				<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">
-						<NavLink link="/careers">Careers</NavLink>
-						{positions.length > 0 ? (
-							<span className="absolute -right-2 -top-1 rounded-md bg-primary/80 px-[5px] text-xs">
-								{` ${positions.length} `}
-							</span>
-						) : null}
+		// 		<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">
+		// 				<NavLink link="/careers">Careers</NavLink>
+		// 				{positions.length > 0 ? (
+		// 					<span className="absolute -right-2 -top-1 rounded-md bg-primary/80 px-[5px] text-xs">
+		// 						{` ${positions.length} `}
+		// 					</span>
+		// 				) : null}
+		// 			</div>
+		// 		</div>
+		// 		<div className="flex-1 lg:hidden" />
+		// 		<MobileDropdown />
+		// 		<div className="absolute right-3 hidden flex-row space-x-5 lg:flex">
+		// 			<Link
+		// 				aria-label="discord"
+		// 				href="https://discord.gg/gTaF2Z44f5"
+		// 				target="_blank"
+		// 				rel="noreferrer"
+		// 			>
+		// 				<Discord className="size-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"
+		// 			>
+		// 				<Github className="size-6 text-white opacity-100 duration-300 hover:opacity-50" />
+		// 			</Link>
+		// 		</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-px w-1/2 bg-gradient-to-r from-transparent to-white/10"></div>
+		// 		<div className="h-px w-1/2 bg-gradient-to-l from-transparent to-white/10"></div>
+		// 	</div>
+		// </div>
+		<nav className="fixed z-[100] w-full items-center justify-center p-10 transition">
+			<div className="flex w-full content-between items-center rounded-[10px] border border-[#1e1e2600] bg-[#141419] px-[24px] py-[12px]">
+				<div className="flex items-center gap-[26px]">
+					<Link href="/" className="flex flex-row items-center">
+						<Image
+							alt="Spacedrive logo"
+							src={Logo}
+							className="z-30 mr-[6.7px] size-8"
+						/>
+						<h3 className="mr-[13.38] text-xl font-bold text-white">Spacedrive</h3>
+					</Link>
+					<div className="flex items-center gap-[10px]">
+						<NavLink link="/explorer">Explorer</NavLink>
+						<NavLink link="/cloud">Cloud</NavLink>
+						<NavLink link="/teams">Teams</NavLink>
+						<NavLink link="/assistant">
+							Assistant <NewIcon />
+						</NavLink>
+						<NavLink link="/store">Store</NavLink>
+						<NavLink link="/use-cases">Use Cases</NavLink>
+						<NavLink link="/blog">Blog</NavLink>
+						<NavLink link="/docs/product/getting-started/introduction">Docs</NavLink>
 					</div>
 				</div>
-				<div className="flex-1 lg:hidden" />
-				<MobileDropdown />
-				<div className="absolute right-3 hidden flex-row space-x-5 lg:flex">
-					<Link
-						aria-label="discord"
-						href="https://discord.gg/gTaF2Z44f5"
-						target="_blank"
-						rel="noreferrer"
-					>
-						<Discord className="size-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"
-					>
-						<Github className="size-6 text-white opacity-100 duration-300 hover:opacity-50" />
-					</Link>
-				</div>
+				<div className="flex-1" />
+				<Link href="/">
+					<button className="inline-flex items-center justify-center gap-[10px] rounded-xl bg-slate-800 p-2">
+						<Cloud />
+						<p>Cloud Login</p>
+					</button>
+				</Link>
 			</div>
-			<div className="absolute bottom-0 flex h-1 w-full flex-row items-center justify-center pt-4 opacity-100">
-				<div className="h-px w-1/2 bg-gradient-to-r from-transparent to-white/10"></div>
-				<div className="h-px w-1/2 bg-gradient-to-l from-transparent to-white/10"></div>
-			</div>
-		</div>
+		</nav>
 	);
 }
 
@@ -65,10 +99,18 @@ function NavLink(props: PropsWithChildren<{ link?: string }>) {
 		<Link
 			href={props.link ?? '#'}
 			target={props.link?.startsWith('http') ? '_blank' : undefined}
-			className="cursor-pointer p-4 text-[11pt] text-gray-300 no-underline transition hover:text-gray-50"
+			className="inline-flex cursor-pointer items-center justify-center gap-[6px] p-4 text-[11pt] text-gray-300 no-underline transition hover:text-gray-50"
 			rel="noreferrer"
 		>
 			{props.children}
 		</Link>
 	);
 }
+
+function NewIcon() {
+	return (
+		<div className="flex items-center justify-center rounded-[4px] bg-[#3397EB] px-1 py-[0.01rem] text-xs">
+			NEW
+		</div>
+	);
+}
diff --git a/apps/landing/src/app/blog/[slug]/page.tsx b/apps/landing/src/app/blog/[slug]/page.tsx
index e22b8a3e4..d7fa954b4 100644
--- a/apps/landing/src/app/blog/[slug]/page.tsx
+++ b/apps/landing/src/app/blog/[slug]/page.tsx
@@ -43,7 +43,7 @@ export default function Page({ params }: Props) {
 	const MDXContent = useMDXComponent(post.body.code);
 
 	return (
-		<div className="lg:prose-xs container prose m-auto mb-20 max-w-4xl p-5 pt-14 dark:prose-invert">
+		<div className="lg:prose-xs container prose prose-invert m-auto mb-20 max-w-4xl p-5 pt-14">
 			<>
 				<figure>
 					<Image
diff --git a/apps/landing/src/app/blog/page.tsx b/apps/landing/src/app/blog/page.tsx
index 877604424..cb4c89eea 100644
--- a/apps/landing/src/app/blog/page.tsx
+++ b/apps/landing/src/app/blog/page.tsx
@@ -11,7 +11,7 @@ export const metadata = {
 
 export default function Page() {
 	return (
-		<div className="lg:prose-xs container prose m-auto mb-20 flex max-w-4xl flex-col p-4 pt-32 dark:prose-invert prose-a:no-underline">
+		<div className="lg:prose-xs container prose prose-invert m-auto mb-20 flex max-w-4xl flex-col p-4 pt-32 prose-a:no-underline">
 			<section>
 				<h1 className="fade-in-heading m-0">Blog</h1>
 				<p className="fade-in-heading animation-delay-1">Get the latest from Spacedrive.</p>
diff --git a/apps/landing/src/app/docs/Markdown.tsx b/apps/landing/src/app/docs/Markdown.tsx
index 148637e3a..304438a6f 100644
--- a/apps/landing/src/app/docs/Markdown.tsx
+++ b/apps/landing/src/app/docs/Markdown.tsx
@@ -12,7 +12,7 @@ export function Markdown(props: PropsWithChildren<MarkdownPageProps>) {
 			<article
 				id="content"
 				className={clsx(
-					'lg:prose-xs prose text-[15px] dark:prose-invert prose-h1:text-[3.25em] prose-a:text-primary prose-a:no-underline prose-blockquote:rounded prose-blockquote:bg-gray-600 prose-code:rounded-md prose-code:bg-gray-650 prose-code:p-1 prose-code:font-normal prose-code:text-gray-400 prose-code:before:hidden prose-code:after:hidden prose-table:border-b prose-table:border-gray-500 prose-tr:even:bg-gray-700 prose-th:p-2 prose-td:border-l prose-td:border-gray-500 prose-td:p-2 prose-td:last:border-r prose-img:rounded sm:text-[16px]',
+					'lg:prose-xs prose prose-invert text-[15px] prose-h1:text-[3.25em] prose-a:text-primary prose-a:no-underline prose-blockquote:rounded prose-blockquote:bg-gray-600 prose-code:rounded-md prose-code:bg-gray-650 prose-code:p-1 prose-code:font-normal prose-code:text-gray-400 prose-code:before:hidden prose-code:after:hidden prose-table:border-b prose-table:border-gray-500 prose-tr:even:bg-gray-700 prose-th:p-2 prose-td:border-l prose-td:border-gray-500 prose-td:p-2 prose-td:last:border-r prose-img:rounded sm:text-[16px]',
 					props.articleClassNames
 				)}
 			>
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
index cd427dc10..08dff7058 100644
--- a/apps/landing/src/app/layout.tsx
+++ b/apps/landing/src/app/layout.tsx
@@ -26,12 +26,12 @@ export const metadata: Metadata = {
 };
 
 export const viewport: Viewport = {
-	themeColor: { color: '#E751ED', media: 'not screen' }
+	themeColor: { color: '#0E0E12', media: 'not screen' }
 };
 
 export default function Layout({ children }: PropsWithChildren) {
 	return (
-		<html lang="en" className="dark scroll-smooth">
+		<html lang="en" className="scroll-smooth text-white">
 			<head>
 				<PlausibleProvider
 					domain="spacedrive.com"
@@ -42,11 +42,9 @@ export default function Layout({ children }: PropsWithChildren) {
 			</head>
 			<body>
 				<Providers>
-					<div className="overflow-hidden dark:bg-[#030014]/60">
+					<div className="overflow-hidden bg-[#0E0E12]">
 						<NavBar />
-						<main className="dark z-10 m-auto max-w-[100rem] dark:text-white">
-							{children}
-						</main>
+						<main className="z-10 m-auto max-w-[100rem]">{children}</main>
 						<Footer />
 					</div>
 				</Providers>
diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx
index c98385bcc..a270e565e 100644
--- a/apps/landing/src/app/page.tsx
+++ b/apps/landing/src/app/page.tsx
@@ -5,8 +5,8 @@ import { toTitleCase } from '~/utils/util';
 
 import { getLatestRelease, getReleaseFrontmatter, githubFetch } from './api/github';
 import { Background } from './Background';
+import { Banner } from './Banner';
 import { Downloads } from './Downloads';
-import { NewBanner } from './NewBanner';
 
 export const metadata = {
 	title: 'Spacedrive — A file manager from the future.',
@@ -27,22 +27,27 @@ export default async function Page() {
 
 	return (
 		<>
-			<Background />
-			<Image
+			{/* <Background /> */}
+			{/* <Image
 				loading="eager"
 				className="absolute-horizontal-center fade-in"
 				width={1278}
 				height={626}
 				alt="l"
 				src="/images/misc/header-gradient.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
+				{/* <NewBanner
 					headline={`Alpha ${release.tag_name} is out!`}
 					className="mt-[50px] lg:mt-0"
 					href={`/docs/changelog/alpha/${release.tag_name}`}
+				/> */}
+				<Banner
+					headline={`30k+ stars on GitHub`}
+					className="mt-[50px] lg:mt-0"
+					href={`/docs/changelog/alpha/${release.tag_name}`}
 				/>
 				<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.
diff --git a/apps/landing/src/app/roadmap/page.tsx b/apps/landing/src/app/roadmap/page.tsx
index 85951e3b5..52cd3d499 100644
--- a/apps/landing/src/app/roadmap/page.tsx
+++ b/apps/landing/src/app/roadmap/page.tsx
@@ -11,7 +11,7 @@ export const metadata = {
 
 export default function Page() {
 	return (
-		<div className="lg:prose-xs container prose m-auto mb-20 flex max-w-4xl flex-col gap-20 p-4 pt-32 dark:prose-invert">
+		<div className="lg:prose-xs container prose prose-invert m-auto mb-20 flex max-w-4xl flex-col gap-20 p-4 pt-32">
 			<section className="flex flex-col items-center">
 				<h1 className="fade-in-heading mb-0 text-center text-5xl leading-snug">
 					What's next for Spacedrive?
diff --git a/apps/landing/src/components/Markdown.tsx b/apps/landing/src/components/Markdown.tsx
index 755ff7966..1f461a386 100644
--- a/apps/landing/src/components/Markdown.tsx
+++ b/apps/landing/src/components/Markdown.tsx
@@ -12,7 +12,7 @@ function MarkdownPage(props: PropsWithChildren<MarkdownPageProps>) {
 			<article
 				id="content"
 				className={clsx(
-					'lg:prose-xs prose text-[15px] dark:prose-invert prose-h1:text-[3.25em] prose-a:text-primary prose-a:no-underline prose-blockquote:rounded prose-blockquote:bg-gray-600 prose-code:rounded-md prose-code:bg-gray-650 prose-code:p-1 prose-code:font-normal prose-code:text-gray-400 prose-code:before:hidden prose-code:after:hidden prose-table:border-b prose-table:border-gray-500 prose-tr:even:bg-gray-700 prose-th:p-2 prose-td:border-l prose-td:border-gray-500 prose-td:p-2 prose-td:last:border-r prose-img:rounded sm:text-[16px]',
+					'lg:prose-xs prose prose-invert text-[15px] prose-h1:text-[3.25em] prose-a:text-primary prose-a:no-underline prose-blockquote:rounded prose-blockquote:bg-gray-600 prose-code:rounded-md prose-code:bg-gray-650 prose-code:p-1 prose-code:font-normal prose-code:text-gray-400 prose-code:before:hidden prose-code:after:hidden prose-table:border-b prose-table:border-gray-500 prose-tr:even:bg-gray-700 prose-th:p-2 prose-td:border-l prose-td:border-gray-500 prose-td:p-2 prose-td:last:border-r prose-img:rounded sm:text-[16px]',
 					props.articleClassNames
 				)}
 			>
diff --git a/packages/ui/style/tailwind.js b/packages/ui/style/tailwind.js
index 2cb264f14..7398981cf 100644
--- a/packages/ui/style/tailwind.js
+++ b/packages/ui/style/tailwind.js
@@ -126,7 +126,7 @@ module.exports = function (app, options) {
 						850: '#08090D',
 						900: '#060609',
 						950: '#030303'
-					}
+					},
 				},
 				extend: {
 					transitionTimingFunction: {