mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 09:20:00 +02:00
fix(features): fix features order
This commit is contained in:
taroj1205
parent
97e9ff35c8
commit
f87ef1aba8
1 changed files with 118 additions and 119 deletions
|
|
@ -61,135 +61,134 @@ import Video from './Video.astro'
|
|||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
/>
|
||||
<div class="long-feature xl:!flex-row-reverse">
|
||||
<div class="lg:p-24">
|
||||
<Description class="feature-title text-5xl font-bold md:text-6xl">
|
||||
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}
|
||||
poster={browserCompactModePoster.src}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
/>
|
||||
</div>
|
||||
<div class="long-feature xl:!flex-row-reverse">
|
||||
<div class="lg:p-24">
|
||||
<Description class="feature-title text-5xl font-bold md:text-6xl">
|
||||
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>
|
||||
<div class="long-feature">
|
||||
<div class="lg:p-24">
|
||||
<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">
|
||||
Zen's glance feature allows you to view links without <i>actually</i
|
||||
>
|
||||
opening them.
|
||||
</p>
|
||||
</div>
|
||||
<Video
|
||||
src={browserGlance}
|
||||
poster={browserGlancePoster.src}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
/>
|
||||
<Video
|
||||
src={browserCompactMode}
|
||||
poster={browserCompactModePoster.src}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
/>
|
||||
</div>
|
||||
<div class="long-feature">
|
||||
<div class="lg:p-24">
|
||||
<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">
|
||||
Zen's glance feature allows you to view links without <i>actually</i>
|
||||
opening them.
|
||||
</p>
|
||||
</div>
|
||||
<div class="long-feature xl:!flex-row-reverse">
|
||||
<div class="lg:p-24">
|
||||
<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">
|
||||
Zen's split view feature allows you to view multiple tabs at once.
|
||||
</p>
|
||||
</div>
|
||||
<Video
|
||||
src={browserSplitViews}
|
||||
poster={browserSplitViewsPoster.src}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
/>
|
||||
<Video
|
||||
src={browserGlance}
|
||||
poster={browserGlancePoster.src}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
/>
|
||||
</div>
|
||||
<div class="long-feature xl:!flex-row-reverse">
|
||||
<div class="lg:p-24">
|
||||
<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">
|
||||
Zen's split view feature allows you to view multiple tabs at once.
|
||||
</p>
|
||||
</div>
|
||||
<div class="long-feature">
|
||||
<div class="lg:p-24">
|
||||
<Description class="feature-title text-5xl font-bold md:text-6xl">
|
||||
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}
|
||||
poster={browserSidebarPoster.src}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
/>
|
||||
<Video
|
||||
src={browserSplitViews}
|
||||
poster={browserSplitViewsPoster.src}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
/>
|
||||
</div>
|
||||
<div class="long-feature">
|
||||
<div class="lg:p-24">
|
||||
<Description class="feature-title text-5xl font-bold md:text-6xl">
|
||||
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}
|
||||
poster={browserSidebarPoster.src}
|
||||
autoplay
|
||||
loop
|
||||
muted
|
||||
playsinline
|
||||
preload="none"
|
||||
class="rounded-xl border-4 border-white object-cover shadow"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function changeFeature(index: number) {
|
||||
document
|
||||
.querySelectorAll('#feature-list .feature')
|
||||
.forEach((feature: any, i) => {
|
||||
if (i === index) {
|
||||
feature.setAttribute('active', '')
|
||||
} else {
|
||||
feature.removeAttribute('active')
|
||||
}
|
||||
})
|
||||
document
|
||||
.querySelectorAll('#feature-list-image > *')
|
||||
.forEach((img: any, i) => {
|
||||
img.style.opacity = i === index ? 1 : 0
|
||||
img.classList.toggle('absolute', i !== index)
|
||||
img.classList.toggle('hidden', i !== index)
|
||||
})
|
||||
}
|
||||
|
||||
</section>
|
||||
<script>
|
||||
function changeFeature(index: number) {
|
||||
document
|
||||
.querySelectorAll('#feature-list .feature')
|
||||
.forEach((feature: any, i) => {
|
||||
feature.addEventListener('click', () => {
|
||||
changeFeature(i)
|
||||
})
|
||||
if (i === index) {
|
||||
feature.setAttribute('active', '')
|
||||
} else {
|
||||
feature.removeAttribute('active')
|
||||
}
|
||||
})
|
||||
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:flex-row xl:gap-32 xl:px-0 2xl:px-24;
|
||||
document
|
||||
.querySelectorAll('#feature-list-image > *')
|
||||
.forEach((img: any, i) => {
|
||||
img.style.opacity = i === index ? 1 : 0
|
||||
img.classList.toggle('absolute', i !== index)
|
||||
img.classList.toggle('hidden', i !== index)
|
||||
})
|
||||
}
|
||||
|
||||
& > div:first-child {
|
||||
@apply xl:min-w-[40%];
|
||||
}
|
||||
document
|
||||
.querySelectorAll('#feature-list .feature')
|
||||
.forEach((feature: any, i) => {
|
||||
feature.addEventListener('click', () => {
|
||||
changeFeature(i)
|
||||
})
|
||||
})
|
||||
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:flex-row xl:gap-32 xl:px-0 2xl:px-24;
|
||||
|
||||
& video {
|
||||
@apply xl:h-96 2xl:h-[32rem];
|
||||
}
|
||||
& > div:first-child {
|
||||
@apply xl:min-w-[40%];
|
||||
}
|
||||
</style>
|
||||
</section>
|
||||
|
||||
& video {
|
||||
@apply xl:h-96 2xl:h-[32rem];
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue