mirror/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive.git synced 2026-05-02 20:34:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

New Navbar & Banner

Browse Source
This commit is contained in:
Arnab Chakraborty
2024-08-30 18:51:27 -04:00
parent d891a56cac
commit 2108ff0c8e
11 changed files with 113 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/landing/src/app/NewBanner.tsx → apps/landing/src/app/Banner.tsx
View File

@@ -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 && (

2
apps/landing/src/app/Downloads/Platform.tsx
View File

@@ -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;

132
apps/landing/src/app/NavBar/index.tsx
View File

@@ -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>
);
}

2
apps/landing/src/app/blog/[slug]/page.tsx
View File

@@ -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

2
apps/landing/src/app/blog/page.tsx
View File

@@ -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>

2
apps/landing/src/app/docs/Markdown.tsx
View File

@@ -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
)}
>

10
apps/landing/src/app/layout.tsx
View File

@@ -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>

15
apps/landing/src/app/page.tsx
View File

@@ -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.

2
apps/landing/src/app/roadmap/page.tsx
View File

@@ -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?

2
apps/landing/src/components/Markdown.tsx
View File

@@ -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
)}
>

2
packages/ui/style/tailwind.js
View File

@@ -126,7 +126,7 @@ module.exports = function (app, options) {
850: '#08090D',
900: '#060609',
950: '#030303'
}
},
},
extend: {
transitionTimingFunction: {