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

Feat: update layout styles for improved responsiveness and adjust color values in Tailwind configuration

Browse source
This commit is contained in:
mr. M 2024-11-21 19:17:32 +01:00
parent a86130fc07
commit 4ea6828ce4
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
2 changed files with 9 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/pages/index.astro
View file

@ -8,67 +8,23 @@ import { Github, Lock, Check, HeartHandshake, Shield } from 'lucide-astro'
<Layout title="Welcome to Zen">
<main>
<header id="header" class="h-screen w-full flex flex-col items-center gap-24 pt-36 overflow-hidden">
<header id="header" class="h-screen w-full text-center flex flex-col items-center gap-24 md:gap-[15%] pt-24 md:pt-[15%] overflow-hidden">
<div class="flex flex-col items-center">
<Title class:list={["text-center"]}>The browser made for <i>you</i></Title>
<Description class:list={["text-center"]}>Beautifully designed, privacy-focused, and packed with features.<br />We care about your experience, not your data.</Description>
<div class="gap-6 flex mt-6">
<div class="gap-6 md:flex mt-6">
<Button isPrimary>Download</Button>
<Button>mods page</Button>
</div>
</div>
<img src="/assets/browser.png" alt="Zen browser" class="" />
</header>
<div class="h-screen bg-dark text-paper flex gap-24 justify-center items-center p-24">
<div class:list={["w-1/3 ml-24"]}>
<div class="h-screen bg-dark text-paper flex flex-col lg:flex-row overflow-hidden lg:gap-24 justify-center items-center lg:p-24">
<div class:list={["lg:w-1/3 m-24 lg:m-0 lg:ml-24"]}>
<Title>Designed to maximize your productivity</Title>
<Description>Our browser is designed to be as minimal as possible, so you can focus on what matters most.</Description>
</div>
<img src="/assets/browser.png" alt="Zen browser" class:list={["w-1/2"]} />
</div>
<div class="lg:h-screen">
<div class="lg:flex w-full h-full">
<div class="w-full bg-zen-blue border-r border-dark p-24 lg:py-0 flex items-center justify-center flex-col">
<div>
<div class="flex gap-2">
<Lock />
<HeartHandshake />
<Shield />
</div>
<Title>Private, Open Source, and Secure</Title>
<Description>Our browser is built on the Firefox engine, so you can trust that your data is safe and secure.</Description>
<div class="mt-4">
<Description class="flex gap-2">
<Check />
Always on the latest Firefox
</Description>
<Description class="flex gap-2">
<Check />
No accounts needed, no tracking and no ads
</Description>
<Description class="flex gap-2">
<Check />
Open source and community-driven
</Description>
</div>
<div class="flex gap-4 mt-6">
<Button isBordered>
<Github />
Source Code
</Button>
<Button>
Learn more
</Button>
</div>
</div>
</div>
<div class="w-full bg-zen-green border-l border-dark p-24 lg:py-0 flex items-center justify-center flex-col">
</div>
</div>
<div class="w-full border-2 border-dark bg-coral py-4 flex">
</div>
<img src="/assets/browser.png" alt="Zen browser" class:list={["lg:w-2/3 transform rotate-1"]} />
</div>
</main>
</Layout>

4
tailwind.config.mjs
View file

@ -8,8 +8,8 @@ export default {
"coral": "#F76F53",
"dark": "#202020",
"button-primary": "#c95d47",
"zen-blue": "#537CF7",
"zen-green": "#53F77F",
"zen-blue": "#6287f5",
"zen-green": "#63f78b",
},
},
},