mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
Feat: update layout styles for improved responsiveness and adjust color values in Tailwind configuration
This commit is contained in:
parent
a86130fc07
commit
4ea6828ce4
2 changed files with 9 additions and 53 deletions
|
@ -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>
|
||||
|
|
|
@ -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",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue