fix(components): update Hero, Community, and Features components for improved layout and responsiveness

This commit is contained in:
mr. M 2025-01-19 23:35:49 +01:00
parent 45f611a126
commit b2fa0fcc40
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
6 changed files with 24 additions and 17 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 64 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 60 KiB

Before After
Before After

View file

@ -9,9 +9,9 @@ import { getTitleAnimation } from '../animations'
<section
id="Community"
class="relative flex w-full flex-col items-center text-center lg:py-24"
class="relative flex w-full flex-col items-center text-start md:text-center px-4 md:px-0 lg:py-24"
>
<Title>
<Title class="px-4 font-bold">
<motion.span client:load {...getTitleAnimation(0.2)}>
Community
</motion.span>
@ -20,14 +20,14 @@ import { getTitleAnimation } from '../animations'
<motion.p
client:load
{...getTitleAnimation(0.6)}
className="px-4 lg:w-1/2 lg:px-0"
className="px-4 md:px-24 lg:w-1/2 lg:px-0"
>
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.
</motion.p>
<div
class="mt-6 flex w-full flex-wrap justify-center gap-3 px-4 sm:gap-10 sm:px-0"
class="mt-6 flex w-full flex-wrap md:justify-center gap-3 px-4 sm:gap-10 sm:px-0"
>
<motion.span client:load {...getTitleAnimation(0.8)}>
<Button class:list={['px-4']} href="https://github.com/zen-browser">

View file

@ -20,13 +20,13 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
<div class="flex w-full flex-col items-center gap-24 xl:gap-48">
<div class="w-full flex flex-col px-2 md:px-12 lg:px-24 xl:text-center">
<motion.span client:load {...getTitleAnimation(0.2)}>
<Title class="font-bold"
<Description class="text-6xl font-bold"
>How does zen <br
class="lg:hidden"
/>keep <u class="font-extrabold">you</u><br
class="hidden lg:block"
/> always <span class="font-extrabold text-coral">organized</span
>?</Title
>?</Description
>
</motion.span>
<Description class="mt-4 text-lg font-normal">
@ -38,7 +38,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
<div class="long-feature">
<div class="lg:p-24">
<Description class="feature-title text-6xl font-bold whitespace-nowrap">
<Description class="feature-title text-5xl md:text-6xl font-bold whitespace-nowrap">
Workspaces
</Description>
<p class="desc mt-2 text-xl font-normal">
@ -58,7 +58,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
</div>
<div class="long-feature xl:!flex-row-reverse">
<div class="lg:p-24">
<Description class="feature-title text-6xl font-bold">
<Description class="feature-title text-5xl md:text-6xl font-bold">
Compact Mode
</Description>
<p class="desc mt-2 text-xl font-normal">
@ -78,7 +78,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
</div>
<div class="long-feature">
<div class="lg:p-24">
<Description class="feature-title text-6xl font-bold whitespace-nowrap">
<Description class="feature-title text-5xl md:text-6xl font-bold whitespace-nowrap">
Zen Glance
</Description>
<p class="desc mt-2 text-xl font-normal">
@ -98,7 +98,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
</div>
<div class="long-feature xl:!flex-row-reverse">
<div class="lg:p-24">
<Description class="feature-title text-6xl font-bold whitespace-nowrap whitespace-nowrap">
<Description class="feature-title text-5xl md:text-6xl font-bold whitespace-nowrap whitespace-nowrap">
Split Views
</Description>
<p class="desc mt-2 text-xl font-normal">
@ -117,7 +117,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
</div>
<div class="long-feature">
<div class="lg:p-24">
<Description class="feature-title text-6xl font-bold">
<Description class="feature-title text-5xl md:text-6xl font-bold">
Sidebar
</Description>
<p class="desc mt-2 text-xl font-normal">

View file

@ -4,6 +4,7 @@ import Description from '../components/Description.astro'
import Button from '../components/Button.astro'
import { Image } from 'astro:assets'
import myImage from '../assets/browsers.png'
import myImageLight from '../assets/browsers-light.png'
import { ArrowRight } from 'lucide-astro'
import { motion } from 'motion/react'
import { getTitleAnimation } from '../animations'
@ -76,7 +77,13 @@ function getHeroTitleAnimation() {
<Image
src={myImage}
alt="Zen browser"
class="mx-auto mb-24"
class="mx-auto mb-24 hidden dark:block"
loading="eager"
/>
<Image
src={myImageLight}
alt="Zen browser"
class="mx-auto mb-24 block dark:hidden"
loading="eager"
/>
</motion.span>

View file

@ -14,10 +14,10 @@ import { ArrowRight } from 'lucide-astro'
import { getTitleAnimation, getZoomInAnimation } from '../animations'
---
<section id="sponsors" class="px-4 py-44 pt-32 lg:flex-row lg:px-12 xl:px-24">
<div class="mx-auto flex flex-col items-center text-center lg:w-1/2">
<section id="sponsors" class="px-4 lg:py-32 lg:flex-row lg:px-12 xl:px-24">
<div class="mx-auto flex flex-col px-6 lg:px-0 lg:text-center lg:w-1/2">
<motion.span client:load {...getTitleAnimation(0.2)}>
<Title>Our Sponsors</Title>
<Title class="font-bold">Our Sponsors</Title>
</motion.span>
<motion.span client:load {...getTitleAnimation(0.4)}>
<Description>
@ -39,7 +39,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
</section>
<section
id="customization"
class="relative flex w-full flex-col gap-12 overflow-y-hidden px-4 py-36 pt-24 lg:flex-row lg:px-12 xl:px-52"
class="relative flex w-full flex-col lg:gap-12 overflow-y-hidden px-10 py-36 pt-24 lg:flex-row md:px-12 xl:px-52"
>
<div>
<motion.span client:load {...getTitleAnimation(0.2)}>
@ -65,7 +65,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
</motion.span>
</div>
</div>
<div class="relative ml-16 flex h-32 lg:mx-0 lg:w-1/2" id="browser-images">
<div class="relative mt-32 md:mt-52 lg:mt-0 ml-16 flex h-32 lg:mx-0 lg:w-1/2" id="browser-images">
<Image
src={browserCollapsed}
alt="Zen browser"