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

src/components/Community.astro

@@ -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">

src/components/Features.astro

@@ -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">

src/components/Hero.astro

@@ -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>

src/components/HomeExtras.astro

@@ -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"