mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 08:55:32 +02:00
66 lines
2.2 KiB
Text
66 lines
2.2 KiB
Text
---
|
|
import Image from "astro/components/Image.astro"
|
|
import { motion } from "motion/react"
|
|
import { getTitleAnimation } from "~/animations"
|
|
import ComImage from "~/assets/ComImage.png"
|
|
import Button from "~/components/Button.astro"
|
|
import Description from "~/components/Description.astro"
|
|
import CheckIcon from "~/icons/CheckIcon.astro"
|
|
import GitHubIcon from "~/icons/GitHubIcon.astro"
|
|
import { getLocale, getUI } from "~/utils/i18n"
|
|
|
|
const locale = getLocale(Astro)
|
|
|
|
const {
|
|
routes: {
|
|
index: { community },
|
|
},
|
|
} = getUI(locale)
|
|
---
|
|
|
|
<section
|
|
id="Community"
|
|
class="relative flex w-full flex-col items-center gap-6 py-12 text-start md:text-center lg:py-36"
|
|
>
|
|
<Description class="mb-2 text-6xl font-bold">
|
|
<motion.span client:load {...getTitleAnimation(0.2)}>
|
|
{community.title[0]}
|
|
</motion.span>
|
|
<motion.span client:load {...getTitleAnimation(0.4)}>
|
|
{community.title[1]}
|
|
</motion.span>
|
|
<motion.span client:load {...getTitleAnimation(0.6)}>
|
|
{community.title[2]}
|
|
</motion.span>
|
|
</Description>
|
|
<motion.p client:load {...getTitleAnimation(0.6)} className="lg:w-1/2 lg:px-0">
|
|
{community.description}
|
|
</motion.p>
|
|
<div class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center">
|
|
<motion.span client:load {...getTitleAnimation(0.8)}>
|
|
<Button class:list={["px-4"]} href="https://github.com/zen-browser">
|
|
<GitHubIcon class="size-4" />
|
|
<span>{community.lists.freeAndOpenSource.title}</span>
|
|
</Button>
|
|
</motion.span>
|
|
<motion.div client:load {...getTitleAnimation(1)} className="flex items-center gap-4">
|
|
<CheckIcon class="size-4" />
|
|
<span>{community.lists.simpleYetPowerful.title}</span>
|
|
</motion.div>
|
|
<motion.div client:load {...getTitleAnimation(1.2)} className="flex items-center gap-4">
|
|
<CheckIcon class="size-4" />
|
|
<span>{community.lists.privateAndAlwaysUpToDate.title}</span>
|
|
</motion.div>
|
|
</div>
|
|
<motion.span
|
|
className="flex max-w-full lg:max-w-none lg:flex-none"
|
|
client:load
|
|
{...getTitleAnimation(1.4)}
|
|
>
|
|
<Image
|
|
src={ComImage}
|
|
alt={community.images.community.alt}
|
|
class="rounded-3xl shadow-md lg:mx-auto dark:opacity-80"
|
|
/>
|
|
</motion.span>
|
|
</section>
|