mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
fix(components): adjust spacing and class names for improved layout consistency
This commit is contained in:
parent
ced299c8f6
commit
b9eb8f9606
15 changed files with 131 additions and 138 deletions
Binary file not shown.
Before Width: | Height: | Size: 752 KiB |
BIN
src/assets/browser-compactmode.webm
Normal file
BIN
src/assets/browser-compactmode.webm
Normal file
Binary file not shown.
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 792 KiB |
BIN
src/assets/browser-sidebar.webm
Normal file
BIN
src/assets/browser-sidebar.webm
Normal file
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 895 KiB |
BIN
src/assets/browser-splitview.webm
Normal file
BIN
src/assets/browser-splitview.webm
Normal file
Binary file not shown.
Binary file not shown.
Before Width: | Height: | Size: 809 KiB |
BIN
src/assets/browser-workspaces.webm
Normal file
BIN
src/assets/browser-workspaces.webm
Normal file
Binary file not shown.
|
@ -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
|
||||
|
|
|
@ -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)}>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
}
|
||||
]
|
||||
]
|
||||
|
|
|
@ -4,4 +4,4 @@
|
|||
"extra": "",
|
||||
"fixes": [],
|
||||
"features": []
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue