mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
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
This commit is contained in:
parent
1c56e00c6f
commit
c82ae06030
19 changed files with 108 additions and 98 deletions
|
@ -19,9 +19,9 @@ const {
|
|||
|
||||
<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"
|
||||
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 px-4 text-6xl font-bold">
|
||||
<Description class="mb-2 text-6xl font-bold">
|
||||
<motion.span client:load {...getTitleAnimation(0.2)}>
|
||||
{community.title[0]}
|
||||
</motion.span>
|
||||
|
@ -35,12 +35,12 @@ const {
|
|||
<motion.p
|
||||
client:load
|
||||
{...getTitleAnimation(0.6)}
|
||||
className="px-4 md:px-24 lg:w-1/2 lg:px-0"
|
||||
className="lg:w-1/2 lg:px-0"
|
||||
>
|
||||
{community.description}
|
||||
</motion.p>
|
||||
<div
|
||||
class="mt-6 flex w-full flex-wrap gap-3 px-4 sm:gap-10 sm:px-0 md:justify-center"
|
||||
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">
|
||||
|
@ -66,14 +66,14 @@ const {
|
|||
</motion.div>
|
||||
</div>
|
||||
<motion.span
|
||||
className="flex max-w-full px-8 lg:max-w-none lg:flex-none lg:px-0"
|
||||
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="my-24 rounded-3xl shadow-md lg:mx-auto lg:w-3/4 dark:opacity-80"
|
||||
class="rounded-3xl shadow-md lg:mx-auto dark:opacity-80"
|
||||
/>
|
||||
</motion.span>
|
||||
</section>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue