www/src/components/Features.astro
mr. M a1be27be82
Some checks failed
Upload to bunny / upload (1.22.3) (push) Has been cancelled
Update dependencies, fix typos, and enhance layout with new components
2024-12-06 15:07:53 +01:00

127 lines
No EOL
4.2 KiB
Text

---
import Title from '../components/Title.astro'
import Description from '../components/Description.astro'
import Button from '../components/Button.astro'
import Circles from '../components/Circles.astro'
import { Image } from 'astro:assets'
import myImage from '../assets/browser.png'
import {
Github,
Check,
} from 'lucide-astro'
---
<section
id="features"
class="flex min-h-screen w-full px-4 lg:px-12 xl:px-24 py-36 flex-col relative"
>
<div class="flex flex-col lg:flex-row w-full items-start gap-12">
<div id="feature-list" class="lg:w-1/3 flex flex-col gap-4">
<Title>Features</Title>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col">
<Description class="feature-title font-bold text-2xl">
Workspaces
</Description>
<p class="desc text-base font-normal mt-2">
With Zen, you can create multiple workspaces to keep your tabs organized.
</p>
</div>
</div>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col">
<Description class="feature-title font-bold text-2xl">
Compact Mode
</Description>
<p class="desc text-base font-normal mt-2">
Zen's compact mode allows you to see more of your content at once.
</p>
</div>
</div>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col">
<Description class="feature-title font-bold text-2xl">
Split Views
</Description>
<p class="desc text-base font-normal mt-2">
Split your browser into multiple views to see more content at once.
</p>
</div>
</div>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col">
<Description class="feature-title font-bold text-2xl">
Sidebar
</Description>
<p class="desc text-base font-normal mt-2">
Zen's sidebar allows you to quickly access your favourite websites.
</p>
</div>
</div>
<div class="feature flex hover:bg-coral/5 rounded-xl p-4 w-full cursor-pointer">
<div class="flex flex-col">
<Description class="feature-title font-bold text-2xl">
Zen Glance
</Description>
<p class="desc text-base font-normal mt-2">
Preview your tabs with Zen Glance to quickly find what you're looking for, without switching tabs.
</p>
</div>
</div>
</div>
<div class="relative lg:w-2/3 lg:pl-20 items-center m-auto">
<div class="bg-coral rounded-xl ml-auto" id="feature-list-image">
<img src="/browser.webp" alt="" class="object-fit">
<img src="/browser.webp" alt="" class="object-fit">
<img src="/browser.webp" alt="" class="object-fit">
<img src="/browser.webp" alt="" class="object-fit">
<img src="/browser.webp" alt="" class="object-fit">
</div>
</div>
</div>
</section>
<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 img').forEach((img: any, i) => {
img.style.opacity = i === index ? 1 : 0;
img.classList.toggle('absolute', i !== index);
});
}
window.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('#feature-list .feature').forEach((feature: any, i) => {
feature.addEventListener('click', () => {
changeFeature(i);
});
});
changeFeature(0);
});
</script>
<style>
.feature {
user-select: none;
transition: background-color 0.1s ease-in-out;
}
.feature p {
transition: max-height 0.2s ease-in-out, margin-top 0.1s ease-in-out;
}
.feature:not([active]) .desc {
max-height: 0;
overflow: hidden;
pointer-events: none;
margin-top: 0;
}
.feature[active] {
@apply bg-coral/10;
}
</style>