ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 09:20:00 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(layout): improve height to reduce empty spaces

Browse source
This commit is contained in:
taroj1205 2024-11-03 11:54:50 +13:00
parent 2497ccd9ed
commit aa235204c6
19 changed files with 74 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/app/about/page.tsx
View file

@ -5,13 +5,12 @@ import "../privacy-policy/markdown.css";
export default function PrivacyPolicy() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div
id="policy"
className="py-42 mx-auto my-52 flex min-h-screen w-full flex-col p-10 lg:w-1/3 lg:p-0"
>
<Markdown>
{`
<div
id="policy"
className="py-42 mx-auto my-52 flex min-h-screen w-full flex-col p-10 lg:w-1/3 lg:p-0"
>
<Markdown>
{`
# Main Developer Team
These are the most active developers in the project. Awesome people that make Zen Browser possible, the order is not important, all of them are a big part of the project.
@ -38,8 +37,7 @@ These are the most active developers in the project. Awesome people that make Ze
*These are the site contributors:*
![Contributors](https://contributors-img.web.app/image?repo=zen-browser/www)
`}
</Markdown>
</div>
</main>
</Markdown>
</div>
);
}

6
src/app/branding-assets/page.tsx
View file

@ -1,9 +1,5 @@
import { BrandingAssets } from "@/components/branding-assets";
export default function BrandingAssetsPage() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<BrandingAssets />
</main>
);
return <BrandingAssets />;
}

6
src/app/create-theme/page.tsx
View file

@ -1,9 +1,5 @@
import CreateThemePage from "@/components/create-theme";
export default function BrandingAssetsPage() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<CreateThemePage />
</main>
);
return <CreateThemePage />;
}

6
src/app/download/page.tsx
View file

@ -1,9 +1,5 @@
import DownloadPage from "@/components/download/download";
export default function Download() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<DownloadPage />
</main>
);
return <DownloadPage />;
}

8
src/app/layout.tsx
View file

@ -63,10 +63,12 @@ export default async function RootLayout({
disableTransitionOnChange
>
<StyledComponentsRegistry>
<div className="mt-5">
{children}
<div className="flex min-h-screen flex-col">
<Navigation />
<main className="flex h-full min-h-[1000px] flex-1 flex-col items-center justify-center py-4">
{children}
</main>
<Footer />
<Navigation /> {/* At the bottom of the page */}
</div>
</StyledComponentsRegistry>
</ThemeProvider>

6
src/app/mods/[theme]/page.tsx
View file

@ -47,9 +47,5 @@ export default async function ThemeInfoPage({
params: { theme: string };
}) {
const { theme } = params;
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<ThemePage themeID={theme} />
</main>
);
return <ThemePage themeID={theme} />;
}

6
src/app/mods/page.tsx
View file

@ -2,9 +2,5 @@ import MarketplacePage from "@/components/marketplace";
import { getAllThemes } from "@/lib/mods";
export default async function ThemesMarketplace() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<MarketplacePage themes={await getAllThemes()} />
</main>
);
return <MarketplacePage themes={await getAllThemes()} />;
}

4
src/app/page.tsx
View file

@ -3,9 +3,9 @@ import Header from "@/components/header";
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-start overflow-x-hidden">
<>
<Header />
<Features />
</main>
</>
);
}

24
src/app/privacy-policy/page.tsx
View file

@ -4,13 +4,12 @@ import "./markdown.css";
export default function PrivacyPolicy() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div
id="policy"
className="py-42 mx-auto my-52 flex min-h-screen w-full flex-col p-10 lg:w-1/3 lg:p-0"
>
<Markdown>
{`
<div
id="policy"
className="py-42 mx-auto my-52 flex w-full flex-col p-10 lg:w-1/3 lg:p-0"
>
<Markdown>
{`
# Privacy Policy
* Last updated: 2024-08-12
@ -23,7 +22,7 @@ Zen Browser is designed with privacy in mind. We do not collect, store, or share
* Crash reports can be sent to Mozilla Firefox. But, we do not collect any crash reports. Crash reports are sent securely to Mozilla Firefox to help improve the stability of the browser. They do not contain any personal information.
### **1.1. No Telemetry**
We do not collect any telemetry data.
We do not collect any telemetry data.
However, you can opt-in to share telemetry data to Mozilla for the improvement of FireFox (the base upon which the Zen Browser is built). It will be treated in accordance with their Privacy Policy which you can read about [here](https://www.mozilla.org/en-US/privacy/).
@ -44,13 +43,13 @@ Zen Browser stores certain data locally on your device to enhance your browsing
Any customizations, settings, and preferences you make within Zen Browser are stored locally on your device. We do not have access to or control over this data.
## 3. Sync Feature
Zen Browser offers a "Sync" feature, this is implemented using Mozilla Firefox's Sync feature. This feature allows you to synchronize your bookmarks, history, passwords, and other data across multiple devices. For this feature to work, your data is encrypted and stored on Mozilla’s servers and is treated in accordance with their Privacy Policy. We, at Zen, cannot view any of this data.
Zen Browser offers a "Sync" feature, this is implemented using Mozilla Firefox's Sync feature. This feature allows you to synchronize your bookmarks, history, passwords, and other data across multiple devices. For this feature to work, your data is encrypted and stored on Mozilla’s servers and is treated in accordance with their Privacy Policy. We, at Zen, cannot view any of this data.
* [Mozilla Firefox Sync](https://www.mozilla.org/en-US/privacy/mozilla-accounts/)
* [This is how we store your passwords](https://support.mozilla.org/en-US/kb/how-firefox-securely-saves-passwords#:~:text=Firefox%20Desktop%20encrypts%20your%20passwords,cryptography%20to%20obscure%20your%20passwords.)
## 4. Data Security
Although Zen Browser does not collect your data, we are committed to protecting the information that is stored locally on your device and, if you use the Sync feature, the encrypted data stored on Mozilla's servers. We recommend that you use secure passwords, enable device encryption, and regularly update your software to ensure your data remains safe.
Although Zen Browser does not collect your data, we are committed to protecting the information that is stored locally on your device and, if you use the Sync feature, the encrypted data stored on Mozilla's servers. We recommend that you use secure passwords, enable device encryption, and regularly update your software to ensure your data remains safe.
* Note that most of the security measures are taken care by Mozilla Firefox.
@ -88,8 +87,7 @@ If you have any questions or concerns about this Privacy Policy or Zen Browser,
---
By using Zen Browser, you agree to this Privacy Policy. Remember, with Zen, your privacy is in your hands.`}
</Markdown>
</div>
</main>
</Markdown>
</div>
);
}

18
src/app/release-notes/[version]/page.tsx
View file

@ -28,16 +28,14 @@ export default function ReleaseNotePage({
if (!releaseNote) {
return (
<main className="flex min-h-screen flex-col items-center justify-center">
<div className="flex h-screen flex-wrap items-center justify-center">
<h1 className="mt-12 text-4xl font-bold">Release note not found</h1>
<a href="/release-notes">
<Button className="mt-4 items-center justify-center">
Back to release notes
</Button>
</a>
</div>
</main>
<div className="flex flex-wrap items-center justify-center">
<h1 className="mt-12 text-4xl font-bold">Release note not found</h1>
<a href="/release-notes">
<Button className="mt-4 items-center justify-center">
Back to release notes
</Button>
</a>
</div>
);
}

46
src/app/release-notes/page.tsx
View file

@ -19,29 +19,27 @@ export const metadata: Metadata = {
export default function ReleaseNotes() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<div className="py-42 flex min-h-screen flex-col justify-center px-10 lg:px-10 xl:px-10 2xl:w-3/5">
<h1 className="mt-48 text-4xl font-bold">Release Notes</h1>
<p className="mt-8 text-lg text-muted-foreground">
Stay up to date with the latest changes to Zen Browser! Since the{" "}
<a className="text-blue-500" href="#1.0.0-a.1">
first release
</a>{" "}
till{" "}
<a
className="text-blue-500"
href={`/release-notes/${releaseNotes[0].version}`}
>
{releaseNotes[0].version}
</a>
, we've been working hard to make Zen Browser the best it can be.
<br />
<br /> Thanks everyone for your feedback! ❤️
</p>
{releaseNotes.map((releaseNote) => (
<ReleaseNoteElement key={releaseNote.version} data={releaseNote} />
))}
</div>
</main>
<div className="py-42 flex min-h-screen flex-col justify-center px-10 lg:px-10 xl:px-10 2xl:w-3/5">
<h1 className="mt-48 text-4xl font-bold">Release Notes</h1>
<p className="mt-8 text-lg text-muted-foreground">
Stay up to date with the latest changes to Zen Browser! Since the{" "}
<a className="text-blue-500" href="#1.0.0-a.1">
first release
</a>{" "}
till{" "}
<a
className="text-blue-500"
href={`/release-notes/${releaseNotes[0].version}`}
>
{releaseNotes[0].version}
</a>
, we've been working hard to make Zen Browser the best it can be.
<br />
<br /> Thanks everyone for your feedback! ❤️
</p>
{releaseNotes.map((releaseNote) => (
<ReleaseNoteElement key={releaseNote.version} data={releaseNote} />
))}
</div>
);
}

6
src/app/welcome/page.tsx
View file

@ -1,9 +1,5 @@
import WelcomePage from "@/components/welcome";
export default function Download() {
return (
<main className="flex min-h-screen flex-col items-center justify-start">
<WelcomePage />
</main>
);
return <WelcomePage />;
}

2
src/components/download/download.tsx
View file

@ -155,7 +155,7 @@ export default function DownloadPage() {
href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
/>
<div className="relative flex h-screen w-full flex-col items-center justify-center overflow-hidden lg:flex-row">
<div className="relative flex w-full flex-col items-center justify-center overflow-hidden lg:flex-row">
<div className="mx-auto flex w-full flex-col justify-center p-10 md:p-20 lg:w-1/2 lg:p-0 2xl:w-1/3">
<AlertModal
open={alertOpen}

6
src/components/features.tsx
View file

@ -37,7 +37,7 @@ function Question() {
export default function Features() {
return (
<section className="w-full flex-col" id="features">
<section className="w-full flex-col pt-28" id="features">
<BrowserComplexityExample />
<div className="mx-auto mt-16 flex w-full flex-col bg-surface shadow md:w-5/6 md:rounded-md lg:w-3/4 lg:flex-row">
<div className="flex-1 p-5 lg:p-12">
@ -303,7 +303,7 @@ export default function Features() {
/>
</div>
<div className="mx-auto mt-36 flex w-full flex-col md:w-5/6 lg:w-3/4">
<div className="flex flex-col justify-center items-center text-center p-16">
<div className="flex flex-col items-center justify-center p-16 text-center">
<h2 className="text-4xl font-medium text-gray-800 dark:text-gray-100">
Introducing Zen Glance{" 👀"}
</h2>
@ -318,7 +318,7 @@ export default function Features() {
</Link>
</div>
</div>
<video className="rounded-md object-cover w-full" loop autoPlay muted>
<video className="w-full rounded-md object-cover" loop autoPlay muted>
<source src="/vids/glance.webm" type="video/webm" />
</video>
</div>

2
src/components/header.tsx
View file

@ -9,7 +9,7 @@ export default function Header() {
<>
<section
id="hero"
className="relative mx-auto flex min-h-screen max-w-7xl flex-col justify-center px-6 text-center md:mt-[-50px] md:px-8"
className="relative mx-auto flex min-h-svh max-w-7xl flex-col justify-center px-6 text-center md:mt-[-50px] md:px-8"
>
<div className="relative">
<CoolHeaderText />

8
src/components/marketplace.tsx
View file

@ -120,9 +120,9 @@ function MarketplacePage({ themes }: { themes: ZenTheme[] }) {
const isNextNavigationDisabled = currentPage >= totalPages;
return (
<div className="relative mx-auto flex h-full w-full flex-col lg:flex-row">
<div className="relative mx-auto flex h-full w-full flex-grow flex-col lg:flex-row">
{/* Sidebar */}
<div className="relative w-full flex-shrink-0 bg-surface px-10 py-48 shadow dark:bg-[#121212] lg:mt-24 lg:w-fit lg:rounded-br-lg lg:rounded-tr-lg lg:py-32 xl:w-1/3 2xl:w-1/4">
<div className="relative w-full flex-1 bg-surface px-10 py-48 shadow dark:bg-[#121212] lg:mt-24 lg:w-fit lg:rounded-br-lg lg:rounded-tr-lg lg:py-32 xl:w-1/3 2xl:w-1/4">
<StickyBox
className="h-fit min-w-52 text-xs text-muted-foreground lg:mb-0"
offsetTop={120}
@ -145,7 +145,7 @@ function MarketplacePage({ themes }: { themes: ZenTheme[] }) {
</div>
{/* Main content */}
<div className="flex w-full flex-col pt-16 lg:w-auto">
<div className="flex w-full flex-col justify-between pt-16 lg:w-auto">
{/* Mods Grid */}
<div className="grid w-full grid-cols-1 gap-8 px-5 pt-6 lg:w-auto lg:gap-y-16 lg:px-10 xl:w-auto xl:grid-cols-2 2xl:grid-cols-3 3xl:grid-cols-4">
{loadedThemes.map((theme) => (
@ -154,7 +154,7 @@ function MarketplacePage({ themes }: { themes: ZenTheme[] }) {
</div>
{/* Pagination */}
<div className="my-8 flex items-center justify-center">
<div className="my-8 flex w-full items-center justify-center">
<Pagination>
<PaginationContent>
<PaginationItem

2
src/components/navigation.tsx
View file

@ -118,7 +118,7 @@ ListItem.displayName = "ListItem2";
export function Navigation() {
const latestRelease = releaseNotes[0];
return (
<div className="border-grey fixed left-0 top-0 z-40 flex w-full items-center justify-center border-b bg-background p-2">
<div className="border-grey sticky left-0 top-0 z-40 flex w-full items-center justify-center border-b bg-background p-2">
<MobileNav />
<NavigationMenu>
<NavigationMenuList className="hidden w-full items-center justify-between gap-32 py-3 sm:flex">

2
src/components/release-note.tsx
View file

@ -70,7 +70,7 @@ export default function ReleaseNoteElement({ data }: { data: ReleaseNote }) {
return (
<section
className={ny(
"relative flex flex-col border-t lg:flex-row",
"relative flex flex-col border-t pt-28 lg:flex-row",
data.version == releaseNotes[0].version ? "mt-24 pt-24" : "mt-36 pt-36",
)}
id={data.version}

2
src/components/welcome.tsx
View file

@ -5,7 +5,7 @@ import WordPullUp from "./ui/word-pull-up";
export default function WelcomePage() {
return (
<div className="relative flex min-h-screen w-full flex-col items-center justify-center">
<div className="relative flex w-full flex-col items-center justify-center">
<WordPullUp
className="text-center text-6xl"
words="Welcome to Zen Browser!"