fix(components): adjust spacing and class names for improved layout consistency

This commit is contained in:
mr. M 2025-01-19 23:04:47 +01:00
parent ced299c8f6
commit b9eb8f9606
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
15 changed files with 131 additions and 138 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 752 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 792 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 895 KiB

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 809 KiB

Binary file not shown.

View file

@ -17,10 +17,10 @@ const {
{...extra}
href={href}
class:list={[
'flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200',
'flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-bg transition-transform duration-200',
className,
isPrimary
? 'bg-dark text-paper'
? 'bg-dark text-paper border-2 border-dark hover:bg-paper hover:text-dark'
: isAlert
? 'bg-red-300 text-dark'
: !isBordered

View file

@ -9,7 +9,7 @@ import { getTitleAnimation } from '../animations'
<section
id="Community"
class="relative flex w-full flex-col items-center text-center lg:py-32"
class="relative flex w-full flex-col items-center text-center lg:py-24"
>
<Title>
<motion.span client:load {...getTitleAnimation(0.2)}>

View file

@ -3,12 +3,11 @@ import Title from '../components/Title.astro'
import Description from '../components/Description.astro'
import { Image } from 'astro:assets'
import browserWorkspaces from '../assets/browser-workspaces.png'
import browserCompactMode from '../assets/browser-compactmode.png'
import browserSplitViews from '../assets/browser-splitview.png'
import browserSidebar from '../assets/browser-sidebar.png'
import browserSidebar from '../assets/browser-sidebar.webm'
import browserWorkspaces from '../assets/browser-workspaces.webm'
import browserCompactMode from '../assets/browser-compactmode.webm'
import browserGlance from '../assets/browser-glance.webm'
import browserSplitViews from '../assets/browser-splitview.webm'
import { motion } from 'motion/react'
import { getTitleAnimation, getZoomInAnimation } from '../animations'
@ -18,120 +17,120 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
id="features"
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-start gap-12 lg:flex-row">
<div id="feature-list" class="flex flex-col gap-4 lg:w-1/3">
<div class="flex w-full flex-col items-center gap-12 lg:gap-24 xl:gap-48">
<div class="flex flex-col px-12 lg:px-24 xl:text-center">
<motion.span client:load {...getTitleAnimation(0.2)}>
<Title>Features</Title>
<Title class="font-bold"
>How does zen keep <u class="font-extrabold">you</u><br
class="hidden lg:block"
/> always <span class="font-extrabold text-coral">organized</span
>?</Title
>
</motion.span>
<motion.div
client:load
viewport={{ once: true }}
{...getZoomInAnimation(0.4)}
className="feature flex w-full cursor-pointer rounded-xl p-4 hover:bg-coral/5"
>
<div class="flex flex-col">
<Description class="feature-title text-2xl font-bold">
Workspaces
</Description>
<p class="desc mt-2 text-base font-normal">
With Zen, you can create multiple workspaces to keep your tabs
organized.
</p>
</div>
</motion.div>
<motion.div
client:load
viewport={{ once: true }}
{...getZoomInAnimation(0.6)}
className="feature flex w-full cursor-pointer rounded-xl p-4 hover:bg-coral/5"
>
<div class="flex flex-col">
<Description class="feature-title text-2xl font-bold">
Compact Mode
</Description>
<p class="desc mt-2 text-base font-normal">
Zen's compact mode allows you to see more of your content at once.
</p>
</div>
</motion.div>
<motion.div
client:load
viewport={{ once: true }}
{...getZoomInAnimation(0.8)}
className="feature flex w-full cursor-pointer rounded-xl p-4 hover:bg-coral/5"
>
<div class="flex flex-col">
<Description class="feature-title text-2xl font-bold">
Split Views
</Description>
<p class="desc mt-2 text-base font-normal">
Split your browser into multiple views to see more content at once.
</p>
</div>
</motion.div>
<motion.div
client:load
viewport={{ once: true }}
{...getZoomInAnimation(1)}
className="feature flex w-full cursor-pointer rounded-xl p-4 hover:bg-coral/5"
>
<div class="flex flex-col">
<Description class="feature-title text-2xl font-bold">
Sidebar
</Description>
<p class="desc mt-2 text-base font-normal">
Zen's sidebar allows you to quickly access your favourite websites.
</p>
</div>
</motion.div>
<motion.div
client:load
viewport={{ once: true }}
{...getZoomInAnimation(1.2)}
className="feature flex w-full cursor-pointer rounded-xl p-4 hover:bg-coral/5"
>
<div class="flex flex-col">
<Description class="feature-title text-2xl font-bold">
Zen Glance
</Description>
<p class="desc mt-2 text-base font-normal">
Preview your tabs with Zen Glance to quickly find what you're
looking for, without switching tabs.
</p>
</div>
</motion.div>
<Description class="mt-4 text-lg font-normal">
Zen is designed to help you focus on what matters most. Here are some<br
class="hidden lg:block"
/> of the features that help you stay focused.
</Description>
</div>
<div class="relative m-auto items-center lg:w-2/3 lg:pl-20">
<div class="ml-auto" id="feature-list-image">
<Image
src={browserWorkspaces}
alt="Browser Workspaces"
class="rounded-xl border-4 border-white shadow"
/>
<Image
src={browserCompactMode}
alt="Browser Compact Mode"
class="rounded-xl border-4 border-white shadow"
/>
<Image
src={browserSplitViews}
alt="Browser Split Views"
class="rounded-xl border-4 border-white shadow"
/>
<Image
src={browserSidebar}
alt="Browser Sidebar"
class="rounded-xl border-4 border-white shadow"
/>
<video
src={browserGlance}
autoplay
loop
muted
playsinline
class="absolute left-0 top-0 h-full w-full rounded-xl border-4 border-white object-cover shadow"
></video>
<div class="long-feature">
<div class="lg:p-24">
<Description class="feature-title text-6xl font-bold">
Workspaces
</Description>
<p class="desc mt-2 text-xl font-normal">
With Zen, you can create multiple workspaces to keep your tabs
organized.
</p>
</div>
<video
src={browserWorkspaces}
autoplay
loop
muted
playsinline
preload="none"
class="w-full 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-6xl font-bold">
Compact Mode
</Description>
<p class="desc mt-2 text-xl font-normal">
Zen's compact mode allows you to focus on your work without any
distractions.
</p>
</div>
<video
src={browserCompactMode}
autoplay
loop
muted
playsinline
preload="none"
class="w-full 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-6xl font-bold">
Zen Glance
</Description>
<p class="desc mt-2 text-xl font-normal">
Zen's glance feature allows you to view links without <i>actually</i>
opening them.
</p>
</div>
<video
src={browserGlance}
autoplay
loop
muted
playsinline
preload="none"
class="w-full 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-6xl font-bold whitespace-nowrap">
Split Views
</Description>
<p class="desc mt-2 text-xl font-normal">
Zen's split view feature allows you to view multiple tabs at once.
</p>
</div>
<video
src={browserSplitViews}
autoplay
loop
muted
playsinline
preload="none"
class="w-full 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-6xl font-bold">
Sidebar
</Description>
<p class="desc mt-2 text-xl font-normal">
Zen's sidebar feature allows you to view all your tabs in one place.
</p>
</div>
<video
src={browserSidebar}
autoplay
loop
muted
playsinline
preload="none"
class="w-full rounded-xl border-4 border-white object-cover shadow"
></video>
</div>
</div>
</section>
@ -186,4 +185,8 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
.feature[active] {
@apply bg-coral/10;
}
.long-feature {
@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;
}
</style>

View file

@ -39,7 +39,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
</section>
<section
id="customization"
class="relative flex w-full flex-col gap-16 overflow-y-hidden px-4 py-36 pt-24 lg:flex-row lg:px-12 xl:px-24"
class="relative flex w-full flex-col gap-12 overflow-y-hidden px-4 py-36 pt-24 lg:flex-row lg:px-12 xl:px-52"
>
<div>
<motion.span client:load {...getTitleAnimation(0.2)}>
@ -56,10 +56,10 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
limit.
</Description>
</motion.span>
<div class="mt-4 flex">
<div class="mt-4 flex gap-4">
<motion.span client:load {...getTitleAnimation(0.6)}>
<Button isPrimary href="/customization">
Learn More
Zen Mods
<ArrowRight className="size-4" />
</Button>
</motion.span>

View file

@ -363,9 +363,7 @@
"version": "1.0.0-a.13",
"date": "05/08/2024",
"extra": "This is a smaller release to fix some bugs and improve some small details.\n\nIm going to try doing more frequent releases from now on, see how it goes.",
"features": [
"Allow to remember sidebar width even after collapsing it."
],
"features": ["Allow to remember sidebar width even after collapsing it."],
"fixes": [
{
"description": "Task Manager Icon Missing in Flatpak Version",
@ -921,9 +919,7 @@
"image": true,
"workflowId": 11000317603,
"extra": "This update addresses some significant issues with the previous release.\n\nWe appreciate your patience and support!",
"features": [
"Added a new system for handling keyboard shortcuts"
],
"features": ["Added a new system for handling keyboard shortcuts"],
"fixes": [
{
"description": "The New Tab button is not visible",
@ -980,9 +976,7 @@
"Enabled container tabs by default",
"Improved Expand Tabs on Hover layout"
],
"themeChanges": [
"Toggle inputs will not use the themed tertiary color"
],
"themeChanges": ["Toggle inputs will not use the themed tertiary color"],
"breakingChanges": [
"The keyboard shortcuts will be overriden by the defaults ones in this update"
],
@ -1279,9 +1273,7 @@
"issue": 2156
}
],
"breakingChanges": [
"Removed Show Expand Button option from settings"
],
"breakingChanges": ["Removed Show Expand Button option from settings"],
"themeChanges": [
"The variable '--zen-main-browser-background' will now contain the generated gradient",
"Added the 'unread' attribute for background tabs that haven't been accessed yet"
@ -1384,9 +1376,7 @@
"description": "Fixed wrong aligment on glance action buttons"
}
],
"features": [
"No new features, sorry"
]
"features": ["No new features, sorry"]
},
{
"version": "1.0.1-a.17",
@ -2090,4 +2080,4 @@
"workflowId": 12856540987,
"date": "19/01/2025"
}
]
]

View file

@ -4,4 +4,4 @@
"extra": "",
"fixes": [],
"features": []
}
}