mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
refactor(layout): improve height to reduce empty spaces
This commit is contained in:
parent
2497ccd9ed
commit
aa235204c6
19 changed files with 74 additions and 104 deletions
|
@ -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:*
|
||||

|
||||
`}
|
||||
</Markdown>
|
||||
</div>
|
||||
</main>
|
||||
</Markdown>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 />;
|
||||
}
|
||||
|
|
|
@ -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 />;
|
||||
}
|
||||
|
|
|
@ -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 />;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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} />;
|
||||
}
|
||||
|
|
|
@ -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()} />;
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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 />;
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 />
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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!"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue