ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-07 17:05:32 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: implement motion animations for Community and Hero components

Browse source
This commit is contained in:
mr. M 2024-12-11 21:16:07 +01:00
parent 54346338d1
commit 20f3d76579
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
3 changed files with 42 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/Community.astro
View file

@ -2,36 +2,46 @@
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 { motion } from 'motion/react';
import {
Github,
Check,
} from 'lucide-astro'
import { getTitleAnimation } from '../animations'
---
<section
id="Community"
class="flex w-full flex-col items-center text-center relative"
>
<Title>Community Driven</Title>
<Description class="px-4 lg:px-0 lg:w-1/2">
<Title>
<motion.span client:load viewport={{ once: true }} {...getTitleAnimation(0.2)}>
Community
</motion.span>
<motion.span client:load viewport={{ once: true }} {...getTitleAnimation(0.4)}>
Driven
</motion.span>
</Title>
<motion.p client:load viewport={{ once: true }} {...getTitleAnimation(0.6)} className="px-4 lg:px-0 lg:w-1/2">
We are a community-driven project. We listen to our users and build the
features they want. Zen focuses on privacy and customization, not on data collection.
</Description>
</motion.p>
<div class="mt-6 gap-3 px-4 sm:px-0 w-full sm:gap-10 flex flex-wrap justify-center">
<Button class:list={['px-4']} href="https://github.com/zen-browser">
<Github class="size-4" />
<span>View on Github</span>
</Button>
<div class="flex items-center gap-4">
<motion.span client:load viewport={{ once: true }} {...getTitleAnimation(0.8)}>
<Button class:list={['px-4']} href="https://github.com/zen-browser">
<Github class="size-4" />
<span>View on Github</span>
</Button>
</motion.span>
<motion.div client:load viewport={{ once: true }} {...getTitleAnimation(1)} className="flex items-center gap-4">
<Check class="size-4" />
<span>Fully Customizable</span>
</div>
<div class="flex items-center gap-4">
</motion.div>
<motion.div client:load viewport={{ once: true }} {...getTitleAnimation(1.2)} className="flex items-center gap-4">
<Check class="size-4" />
<span>Privacy Focused</span>
</div>
</motion.div>
</div>
</section>