mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
66 lines
2.1 KiB
Text
66 lines
2.1 KiB
Text
---
|
|
import Description from '../components/Description.astro'
|
|
import Button from '../components/Button.astro'
|
|
import { motion } from 'motion/react'
|
|
import { Github, Check } from 'lucide-astro'
|
|
import { getTitleAnimation } from '../animations'
|
|
import ComImage from '../assets/ComImage.png'
|
|
import Image from 'astro/components/Image.astro'
|
|
---
|
|
|
|
<section
|
|
id="Community"
|
|
class="relative flex w-full flex-col items-center px-4 text-start md:px-0 md:text-center lg:pt-36"
|
|
>
|
|
<Description class="mb-2 px-4 text-6xl font-bold">
|
|
<motion.span client:load {...getTitleAnimation(0.2)}> Our </motion.span>
|
|
<motion.span client:load {...getTitleAnimation(0.4)}> Core </motion.span>
|
|
<motion.span client:load {...getTitleAnimation(0.6)}> Values </motion.span>
|
|
</Description>
|
|
<motion.p
|
|
client:load
|
|
{...getTitleAnimation(0.6)}
|
|
className="px-4 md:px-24 lg:w-1/2 lg:px-0"
|
|
>
|
|
We make it not only a priority, but a necessity to ensure that Zen always
|
|
provides the best experience for you. We are committed to making Zen the
|
|
most beautiful, productive, and privacy-focused browser out there.
|
|
</motion.p>
|
|
<div
|
|
class="mt-6 flex w-full flex-wrap gap-3 px-4 sm:gap-10 sm:px-0 md:justify-center"
|
|
>
|
|
<motion.span client:load {...getTitleAnimation(0.8)}>
|
|
<Button class:list={['px-4']} href="https://github.com/zen-browser">
|
|
<Github class="size-4" />
|
|
<span>Free and open-source</span>
|
|
</Button>
|
|
</motion.span>
|
|
<motion.div
|
|
client:load
|
|
{...getTitleAnimation(1)}
|
|
className="flex items-center gap-4"
|
|
>
|
|
<Check class="size-4" />
|
|
<span>Simple yet powerful</span>
|
|
</motion.div>
|
|
<motion.div
|
|
client:load
|
|
{...getTitleAnimation(1.2)}
|
|
className="flex items-center gap-4"
|
|
>
|
|
<Check class="size-4" />
|
|
<span>Private and always up-to-date</span>
|
|
</motion.div>
|
|
</div>
|
|
<motion.span
|
|
className="flex max-w-full px-8 lg:max-w-none lg:flex-none lg:px-0"
|
|
client:load
|
|
{...getTitleAnimation(1.4)}
|
|
>
|
|
<Image
|
|
src={ComImage}
|
|
alt="Community"
|
|
class="my-24 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80"
|
|
/>
|
|
</motion.span>
|
|
</section>
|