mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 17:30:01 +02:00
style: improve layout and responsiveness of Hero, HomeExtras, and NavBar components
This commit is contained in:
parent
aa5c4f6ad0
commit
3023e4c60e
3 changed files with 28 additions and 14 deletions
|
@ -25,10 +25,10 @@ function getTitleAnimation() {
|
|||
|
||||
<header
|
||||
id="header"
|
||||
class="flex py-56 min-h-screen w-full flex-col items-center gap-24 text-center gap-[20%] lg:gap-[15%]"
|
||||
class="flex py-32 md:py-56 md:min-h-screen w-full flex-col items-center text-center gap-[20%] lg:gap-[15%]"
|
||||
>
|
||||
<div class="flex flex-col items-center h-full justify-center">
|
||||
<Title class='text-left px-12 lg:px-0 lg:text-center leading-[108px] md:!text-9xl !font-normal'>
|
||||
<Title class='text-left px-12 lg:px-0 md:text-center leading-[108px] md:!text-7xl lg:!text-9xl !font-normal'>
|
||||
<motion.span client:load {...getTitleAnimation()}>
|
||||
Welcome
|
||||
</motion.span>
|
||||
|
@ -47,14 +47,14 @@ function getTitleAnimation() {
|
|||
</motion.span>
|
||||
</Title>
|
||||
<motion.span client:load {...getTitleAnimation()}>
|
||||
<Description class='text-left px-12 lg:px-0 lg:text-center'
|
||||
<Description class='text-left px-12 lg:px-0 md:text-center'
|
||||
>Beautifully designed, privacy-focused, and packed with features.<br
|
||||
/>We care about your experience, not your data.</Description
|
||||
>
|
||||
</motion.span>
|
||||
<div class="mt-6 gap-3 sm:gap-6 flex flex-row">
|
||||
<div class="w-2/3 md:w-fit mt-6 gap-3 sm:gap-6 flex flex-col md:flex-row">
|
||||
<motion.span client:load {...getTitleAnimation()}>
|
||||
<Button href="/download" isPrimary>
|
||||
<Button class="w-full" href="/download" isPrimary>
|
||||
Download
|
||||
<ArrowRight class="size-4" />
|
||||
</Button>
|
||||
|
|
|
@ -12,11 +12,11 @@ import { ArrowRight } from 'lucide-astro';
|
|||
|
||||
<section
|
||||
id="customization"
|
||||
class="flex w-full px-4 lg:px-12 xl:px-24 py-36 pt-24 gap-16 flex-col lg:flex-row relative"
|
||||
class="flex w-full px-4 lg:px-12 xl:px-24 py-36 pt-24 gap-16 flex-col lg:flex-row relative overflow-y-hidden"
|
||||
>
|
||||
<div>
|
||||
<Title>Customizable to<br />the last pixel</Title>
|
||||
<Description class="px-4 lg:px-0 lg:w-1/2">
|
||||
<Title>Customizable<br class="md:hidden" /> to <br class="hidden md:block" />the last pixel</Title>
|
||||
<Description class="lg:px-0 lg:w-1/2">
|
||||
Zen Browser is designed to be customizable. You can change every aspect of the browser to suit your needs. Literally, your imagination is the limit.
|
||||
</Description>
|
||||
<div class="flex mt-4">
|
||||
|
@ -26,7 +26,7 @@ import { ArrowRight } from 'lucide-astro';
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-1/2 flex hidden lg:block" id="browser-images">
|
||||
<div class="relative ml-16 h-32 lg:mx-0 lg:w-1/2 flex" id="browser-images">
|
||||
<Image src={browserCollapsed} alt="Zen browser" class="w-2/3 rounded-md shadow-md absolute top-[5%] left-[65%] -translate-x-1/2" />
|
||||
<Image src={browseMultiToolbar} alt="Zen browser" class="w-2/3 rounded-md mx-auto absolute top-1/2 left-1/2 transform -translate-x-1/2" />
|
||||
<Image src={browserSingleToolbar} alt="Zen browser" class="w-2/3 rounded-md shadow-md absolute top-[15%] left-[10%] z-10 -translate-x-1/2" />
|
||||
|
@ -51,5 +51,19 @@ import { ArrowRight } from 'lucide-astro';
|
|||
transform: rotate(-5deg) scale(1.05) translateX(-50%) translateY(-10%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
& img:nth-child(1) {
|
||||
transform: rotate(5deg) scale(1.05) translateX(-52%) translateY(-10%);
|
||||
}
|
||||
|
||||
& img:nth-child(2) {
|
||||
transform: rotate(2deg) scale(1.05) translateX(-50%) translateY(10%);
|
||||
}
|
||||
|
||||
& img:nth-child(3) {
|
||||
transform: rotate(-5deg) scale(1.05) translateX(-50%) translateY(-10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -13,11 +13,11 @@ import Logo from './Logo.astro';
|
|||
class="fixed flex justify-between w-full items-center lg:pt-6 lg:px-6 z-10 top-0 left-0"
|
||||
>
|
||||
<Astronav>
|
||||
<MenuItems class="w-fit lg:rounded-full border-dark border-b-2 lg:border-2 p-2 backdrop-blur-2xl bg-paper dark:bg-paper dark:shadow-md mx-auto flex gap-2 lg:gap-20">
|
||||
<MenuItems class="w-full lg:w-fit lg:rounded-full border-dark border-b-2 lg:border-2 p-2 backdrop-blur-2xl bg-paper dark:bg-paper dark:shadow-md mx-auto flex gap-2 lg:gap-20">
|
||||
<a class="font-bold text-lg items-center flex gap-2" href="/">
|
||||
<Logo class="text-dark" /> <span class="hidden lg:block">zen browser</span>
|
||||
</a>
|
||||
<div class="gap-6 flex items-center">
|
||||
<div class="gap-6 flex items-center text-xs lg:text-base">
|
||||
<Dropdown class="group">
|
||||
<button class="flex items-center">
|
||||
<span>Getting Started</span>
|
||||
|
@ -102,12 +102,12 @@ import Logo from './Logo.astro';
|
|||
<span>Mods</span>
|
||||
</a>
|
||||
</div>
|
||||
<Button href="/download" isPrimary>
|
||||
<span class="hidden lg:block">
|
||||
<Button href="/download" class="ml-auto" isPrimary>
|
||||
<span class="hidden md:flex items-center gap-2">
|
||||
Download
|
||||
<ArrowRight class="size-4" />
|
||||
</span>
|
||||
<span class="lg:hidden">
|
||||
<span class="md:hidden">
|
||||
<Download class="size-4" />
|
||||
</span>
|
||||
</Button>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue