fix(components): improve layout and spacing in Button, Community, Features, and HomeExtras components for better responsiveness

src/components/Button.astro

@@ -17,10 +17,10 @@ const {
       {...extra}
       href={href}
       class:list={[
-        'flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-bg transition-transform duration-200',
+        'transition-bg flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200',
         className,
         isPrimary
-          ? 'bg-dark text-paper border-2 border-dark hover:bg-paper hover:text-dark'
+          ? 'border-2 border-dark bg-dark text-paper hover:bg-paper hover:text-dark'
           : isAlert
             ? 'bg-red-300 text-dark'
             : !isBordered

src/components/Community.astro

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

src/components/Features.astro

@@ -18,14 +18,13 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
   class="relative flex w-full flex-col px-4 py-36 lg:px-12 xl:px-24"
 >
   <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">
+    <div class="flex w-full flex-col px-2 md:px-12 lg:px-24 xl:text-center">
       <motion.span client:load {...getTitleAnimation(0.2)}>
         <Description class="text-6xl font-bold"
-          >How does zen <br
+          >How does zen <br class="lg:hidden" />keep <u class="font-extrabold"
-          class="lg:hidden"
+            >you</u
-        />keep <u class="font-extrabold">you</u><br
+          ><br class="hidden lg:block" /> always <span
-            class="hidden lg:block"
+            class="font-extrabold text-coral">organized</span
-          /> always <span class="font-extrabold text-coral">organized</span
           >?</Description
         >
       </motion.span>
@@ -38,7 +37,9 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
 
     <div class="long-feature">
       <div class="lg:p-24">
-        <Description class="feature-title text-5xl md:text-6xl font-bold whitespace-nowrap">
+        <Description
+          class="feature-title whitespace-nowrap text-5xl font-bold md:text-6xl"
+        >
           Workspaces
         </Description>
         <p class="desc mt-2 text-xl font-normal">
@@ -53,12 +54,11 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-xl border-4 border-white object-cover shadow"></video>
-      ></video>
     </div>
     <div class="long-feature xl:!flex-row-reverse">
       <div class="lg:p-24">
-        <Description class="feature-title text-5xl md:text-6xl font-bold">
+        <Description class="feature-title text-5xl font-bold md:text-6xl">
           Compact Mode
         </Description>
         <p class="desc mt-2 text-xl font-normal">
@@ -73,12 +73,13 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-xl border-4 border-white object-cover shadow"></video>
-      ></video>
     </div>
     <div class="long-feature">
       <div class="lg:p-24">
-        <Description class="feature-title text-5xl md:text-6xl font-bold whitespace-nowrap">
+        <Description
+          class="feature-title whitespace-nowrap text-5xl font-bold md:text-6xl"
+        >
           Zen Glance
         </Description>
         <p class="desc mt-2 text-xl font-normal">
@@ -93,12 +94,13 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-xl border-4 border-white object-cover shadow"></video>
-      ></video>
     </div>
     <div class="long-feature xl:!flex-row-reverse">
       <div class="lg:p-24">
-        <Description class="feature-title text-5xl md:text-6xl font-bold whitespace-nowrap whitespace-nowrap">
+        <Description
+          class="feature-title whitespace-nowrap text-5xl font-bold md:text-6xl"
+        >
           Split Views
         </Description>
         <p class="desc mt-2 text-xl font-normal">
@@ -112,12 +114,11 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-xl border-4 border-white object-cover shadow"></video>
-      ></video>
     </div>
     <div class="long-feature">
       <div class="lg:p-24">
-        <Description class="feature-title text-5xl md:text-6xl font-bold">
+        <Description class="feature-title text-5xl font-bold md:text-6xl">
           Sidebar
         </Description>
         <p class="desc mt-2 text-xl font-normal">
@@ -131,8 +132,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
         muted
         playsinline
         preload="none"
-        class="rounded-xl border-4 border-white object-cover shadow"
+        class="rounded-xl border-4 border-white object-cover shadow"></video>
-      ></video>
     </div>
   </div>
 </section>
@@ -166,16 +166,15 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
   changeFeature(0)
 </script>
 <style>
-
   .long-feature {
-    @apply relative flex w-full flex-col items-center gap-10 px-4 md:px-12 lg:px-24 xl:px-0 2xl:px-24 xl:flex-row xl:gap-32;
+    @apply relative flex w-full flex-col items-center gap-10 px-4 md:px-12 lg:px-24 xl:flex-row xl:gap-32 xl:px-0 2xl:px-24;
 
     & > div:first-child {
       @apply xl:min-w-[40%];
     }
 
     & video {
-      @apply xl:h-[32rem] xl:h-96 2xl:h-[32rem];
+      @apply xl:h-96 xl:h-[32rem] 2xl:h-[32rem];
     }
   }
 </style>

src/components/HomeExtras.astro

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