style: improve layout and responsiveness of Hero, HomeExtras, and NavBar components

This commit is contained in:
mr. M 2024-12-11 18:53:27 +01:00
parent aa5c4f6ad0
commit 3023e4c60e
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
3 changed files with 28 additions and 14 deletions

View file

@ -25,10 +25,10 @@ function getTitleAnimation() {
<header <header
id="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"> <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()}> <motion.span client:load {...getTitleAnimation()}>
Welcome Welcome
</motion.span> </motion.span>
@ -47,14 +47,14 @@ function getTitleAnimation() {
</motion.span> </motion.span>
</Title> </Title>
<motion.span client:load {...getTitleAnimation()}> <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 >Beautifully designed, privacy-focused, and packed with features.<br
/>We care about your experience, not your data.</Description />We care about your experience, not your data.</Description
> >
</motion.span> </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()}> <motion.span client:load {...getTitleAnimation()}>
<Button href="/download" isPrimary> <Button class="w-full" href="/download" isPrimary>
Download Download
<ArrowRight class="size-4" /> <ArrowRight class="size-4" />
</Button> </Button>

View file

@ -12,11 +12,11 @@ import { ArrowRight } from 'lucide-astro';
<section <section
id="customization" 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> <div>
<Title>Customizable to<br />the last pixel</Title> <Title>Customizable<br class="md:hidden" /> to <br class="hidden md:block" />the last pixel</Title>
<Description class="px-4 lg:px-0 lg:w-1/2"> <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. 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> </Description>
<div class="flex mt-4"> <div class="flex mt-4">
@ -26,7 +26,7 @@ import { ArrowRight } from 'lucide-astro';
</Button> </Button>
</div> </div>
</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={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={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" /> <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%); 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> </style>

View file

@ -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" class="fixed flex justify-between w-full items-center lg:pt-6 lg:px-6 z-10 top-0 left-0"
> >
<Astronav> <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="/"> <a class="font-bold text-lg items-center flex gap-2" href="/">
<Logo class="text-dark" /> <span class="hidden lg:block">zen browser</span> <Logo class="text-dark" /> <span class="hidden lg:block">zen browser</span>
</a> </a>
<div class="gap-6 flex items-center"> <div class="gap-6 flex items-center text-xs lg:text-base">
<Dropdown class="group"> <Dropdown class="group">
<button class="flex items-center"> <button class="flex items-center">
<span>Getting Started</span> <span>Getting Started</span>
@ -102,12 +102,12 @@ import Logo from './Logo.astro';
<span>Mods</span> <span>Mods</span>
</a> </a>
</div> </div>
<Button href="/download" isPrimary> <Button href="/download" class="ml-auto" isPrimary>
<span class="hidden lg:block"> <span class="hidden md:flex items-center gap-2">
Download Download
<ArrowRight class="size-4" /> <ArrowRight class="size-4" />
</span> </span>
<span class="lg:hidden"> <span class="md:hidden">
<Download class="size-4" /> <Download class="size-4" />
</span> </span>
</Button> </Button>