www/src/components/Community.astro
Shintaro Jokagi c82ae06030
refactor(app): improve layout consistency and responsiveness across pages
The changes focus on standardizing layouts, spacing, and container usage
throughout the site while enhancing responsive behavior. Key improvements
include:

- Unified container usage for consistent page widths
- Standardized section padding and gaps
- Removed redundant padding/margin classes
- Better responsive grid layouts
- Consistent text alignment and spacing
- Cleaner flexbox structures
2025-05-15 12:43:48 +12:00

79 lines
2.2 KiB
Text

---
import Image from 'astro/components/Image.astro'
import { Check, Github } from 'lucide-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 { 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 text-start md:text-center lg:py-36 gap-6 py-12"
>
<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">
<Github class="size-4" />
<span>{community.lists.freeAndOpenSource.title}</span>
</Button>
</motion.span>
<motion.div
client:load
{...getTitleAnimation(1)}
className="flex items-center gap-4"
>
<Check class="size-4" />
<span>{community.lists.simpleYetPowerful.title}</span>
</motion.div>
<motion.div
client:load
{...getTitleAnimation(1.2)}
className="flex items-center gap-4"
>
<Check 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>