mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
fix(components): improve layout and spacing in Button, Community, Features, and HomeExtras components for better responsiveness
This commit is contained in:
parent
b2fa0fcc40
commit
cc3b3d42b7
4 changed files with 35 additions and 33 deletions
|
@ -17,10 +17,10 @@ const {
|
|||
{...extra}
|
||||
href={href}
|
||||
class:list={[
|
||||
'flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-bg transition-transform duration-200',
|
||||
'transition-bg flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200',
|
||||
className,
|
||||
isPrimary
|
||||
? 'bg-dark text-paper border-2 border-dark hover:bg-paper hover:text-dark'
|
||||
? 'border-2 border-dark bg-dark text-paper hover:bg-paper hover:text-dark'
|
||||
: isAlert
|
||||
? 'bg-red-300 text-dark'
|
||||
: !isBordered
|
||||
|
|
|
@ -9,7 +9,7 @@ import { getTitleAnimation } from '../animations'
|
|||
|
||||
<section
|
||||
id="Community"
|
||||
class="relative flex w-full flex-col items-center text-start md:text-center px-4 md:px-0 lg:py-24"
|
||||
class="relative flex w-full flex-col items-center px-4 text-start md:px-0 md:text-center lg:py-24"
|
||||
>
|
||||
<Title class="px-4 font-bold">
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
|
@ -27,7 +27,7 @@ import { getTitleAnimation } from '../animations'
|
|||
collection.
|
||||
</motion.p>
|
||||
<div
|
||||
class="mt-6 flex w-full flex-wrap md:justify-center gap-3 px-4 sm:gap-10 sm:px-0"
|
||||
class="mt-6 flex w-full flex-wrap gap-3 px-4 sm:gap-10 sm:px-0 md:justify-center"
|
||||
>
|
||||
<motion.span client:load {...getTitleAnimation(0.8)}>
|
||||
<Button class:list={['px-4']} href="https://github.com/zen-browser">
|
||||
|
|
|
@ -18,14 +18,13 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
|
|||
class="relative flex w-full flex-col px-4 py-36 lg:px-12 xl:px-24"
|
||||
>
|
||||
<div class="flex w-full flex-col items-center gap-24 xl:gap-48">
|
||||
<div class="w-full flex flex-col px-2 md:px-12 lg:px-24 xl:text-center">
|
||||
<div class="flex w-full flex-col px-2 md:px-12 lg:px-24 xl:text-center">
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
<Description class="text-6xl font-bold"
|
||||
>How does zen <br
|
||||
class="lg:hidden"
|
||||
/>keep <u class="font-extrabold">you</u><br
|
||||
class="hidden lg:block"
|
||||
/> always <span class="font-extrabold text-coral">organized</span
|
||||
>How does zen <br class="lg:hidden" />keep <u class="font-extrabold"
|
||||
>you</u
|
||||
><br class="hidden lg:block" /> always <span
|
||||
class="font-extrabold text-coral">organized</span
|
||||
>?</Description
|
||||
>
|
||||
</motion.span>
|
||||
|
@ -38,7 +37,9 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
|
|||
|
||||
<div class="long-feature">
|
||||
<div class="lg:p-24">
|
||||
<Description class="feature-title text-5xl md:text-6xl font-bold whitespace-nowrap">
|
||||
<Description
|
||||
class="feature-title whitespace-nowrap text-5xl font-bold md:text-6xl"
|
||||
>
|
||||
Workspaces
|
||||
</Description>
|
||||
<p class="desc mt-2 text-xl font-normal">
|
||||
|
@ -53,12 +54,11 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
|
|||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
></video>
|
||||
class="rounded-xl border-4 border-white object-cover shadow"></video>
|
||||
</div>
|
||||
<div class="long-feature xl:!flex-row-reverse">
|
||||
<div class="lg:p-24">
|
||||
<Description class="feature-title text-5xl md:text-6xl font-bold">
|
||||
<Description class="feature-title text-5xl font-bold md:text-6xl">
|
||||
Compact Mode
|
||||
</Description>
|
||||
<p class="desc mt-2 text-xl font-normal">
|
||||
|
@ -73,12 +73,13 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
|
|||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
></video>
|
||||
class="rounded-xl border-4 border-white object-cover shadow"></video>
|
||||
</div>
|
||||
<div class="long-feature">
|
||||
<div class="lg:p-24">
|
||||
<Description class="feature-title text-5xl md:text-6xl font-bold whitespace-nowrap">
|
||||
<Description
|
||||
class="feature-title whitespace-nowrap text-5xl font-bold md:text-6xl"
|
||||
>
|
||||
Zen Glance
|
||||
</Description>
|
||||
<p class="desc mt-2 text-xl font-normal">
|
||||
|
@ -93,12 +94,13 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
|
|||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
></video>
|
||||
class="rounded-xl border-4 border-white object-cover shadow"></video>
|
||||
</div>
|
||||
<div class="long-feature xl:!flex-row-reverse">
|
||||
<div class="lg:p-24">
|
||||
<Description class="feature-title text-5xl md:text-6xl font-bold whitespace-nowrap whitespace-nowrap">
|
||||
<Description
|
||||
class="feature-title whitespace-nowrap text-5xl font-bold md:text-6xl"
|
||||
>
|
||||
Split Views
|
||||
</Description>
|
||||
<p class="desc mt-2 text-xl font-normal">
|
||||
|
@ -112,12 +114,11 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
|
|||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
></video>
|
||||
class="rounded-xl border-4 border-white object-cover shadow"></video>
|
||||
</div>
|
||||
<div class="long-feature">
|
||||
<div class="lg:p-24">
|
||||
<Description class="feature-title text-5xl md:text-6xl font-bold">
|
||||
<Description class="feature-title text-5xl font-bold md:text-6xl">
|
||||
Sidebar
|
||||
</Description>
|
||||
<p class="desc mt-2 text-xl font-normal">
|
||||
|
@ -131,8 +132,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
|
|||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
></video>
|
||||
class="rounded-xl border-4 border-white object-cover shadow"></video>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
@ -166,16 +166,15 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
|
|||
changeFeature(0)
|
||||
</script>
|
||||
<style>
|
||||
|
||||
.long-feature {
|
||||
@apply relative flex w-full flex-col items-center gap-10 px-4 md:px-12 lg:px-24 xl:px-0 2xl:px-24 xl:flex-row xl:gap-32;
|
||||
|
||||
@apply relative flex w-full flex-col items-center gap-10 px-4 md:px-12 lg:px-24 xl:flex-row xl:gap-32 xl:px-0 2xl:px-24;
|
||||
|
||||
& > div:first-child {
|
||||
@apply xl:min-w-[40%];
|
||||
}
|
||||
|
||||
& video {
|
||||
@apply xl:h-[32rem] xl:h-96 2xl:h-[32rem];
|
||||
@apply xl:h-96 xl:h-[32rem] 2xl:h-[32rem];
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -14,8 +14,8 @@ import { ArrowRight } from 'lucide-astro'
|
|||
import { getTitleAnimation, getZoomInAnimation } from '../animations'
|
||||
---
|
||||
|
||||
<section id="sponsors" class="px-4 lg:py-32 lg:flex-row lg:px-12 xl:px-24">
|
||||
<div class="mx-auto flex flex-col px-6 lg:px-0 lg:text-center lg:w-1/2">
|
||||
<section id="sponsors" class="px-4 lg:flex-row lg:px-12 lg:py-32 xl:px-24">
|
||||
<div class="mx-auto flex flex-col px-6 lg:w-1/2 lg:px-0 lg:text-center">
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
<Title class="font-bold">Our Sponsors</Title>
|
||||
</motion.span>
|
||||
|
@ -39,7 +39,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
|
|||
</section>
|
||||
<section
|
||||
id="customization"
|
||||
class="relative flex w-full flex-col lg:gap-12 overflow-y-hidden px-10 py-36 pt-24 lg:flex-row md:px-12 xl:px-52"
|
||||
class="relative flex w-full flex-col overflow-y-hidden px-10 py-36 pt-24 md:px-12 lg:flex-row lg:gap-12 xl:px-52"
|
||||
>
|
||||
<div>
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
|
@ -65,7 +65,10 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
|
|||
</motion.span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative mt-32 md:mt-52 lg:mt-0 ml-16 flex h-32 lg:mx-0 lg:w-1/2" id="browser-images">
|
||||
<div
|
||||
class="relative ml-16 mt-32 flex h-32 md:mt-52 lg:mx-0 lg:mt-0 lg:w-1/2"
|
||||
id="browser-images"
|
||||
>
|
||||
<Image
|
||||
src={browserCollapsed}
|
||||
alt="Zen browser"
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue