fix(components): adjust spacing and class names for improved layout consistency

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-transform duration-200',
+        'flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-bg transition-transform duration-200',
         className,
         isPrimary
-          ? 'bg-dark text-paper'
+          ? 'bg-dark text-paper border-2 border-dark 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-center lg:py-32"
+  class="relative flex w-full flex-col items-center text-center lg:py-24"
 >
   <Title>
     <motion.span client:load {...getTitleAnimation(0.2)}>

src/components/Features.astro

@@ -3,12 +3,11 @@ import Title from '../components/Title.astro'
 import Description from '../components/Description.astro'
 import { Image } from 'astro:assets'
 
-import browserWorkspaces from '../assets/browser-workspaces.png'
-import browserCompactMode from '../assets/browser-compactmode.png'
-import browserSplitViews from '../assets/browser-splitview.png'
-import browserSidebar from '../assets/browser-sidebar.png'
-
+import browserSidebar from '../assets/browser-sidebar.webm'
+import browserWorkspaces from '../assets/browser-workspaces.webm'
+import browserCompactMode from '../assets/browser-compactmode.webm'
 import browserGlance from '../assets/browser-glance.webm'
+import browserSplitViews from '../assets/browser-splitview.webm'
 
 import { motion } from 'motion/react'
 import { getTitleAnimation, getZoomInAnimation } from '../animations'
@@ -18,120 +17,120 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
   id="features"
   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-start gap-12 lg:flex-row">
-    <div id="feature-list" class="flex flex-col gap-4 lg:w-1/3">
+  <div class="flex w-full flex-col items-center gap-12 lg:gap-24 xl:gap-48">
+    <div class="flex flex-col px-12 lg:px-24 xl:text-center">
       <motion.span client:load {...getTitleAnimation(0.2)}>
-        <Title>Features</Title>
+        <Title class="font-bold"
+          >How does zen keep <u class="font-extrabold">you</u><br
+            class="hidden lg:block"
+          /> always <span class="font-extrabold text-coral">organized</span
+          >?</Title
+        >
       </motion.span>
-      <motion.div
-        client:load
-        viewport={{ once: true }}
-        {...getZoomInAnimation(0.4)}
-        className="feature flex w-full cursor-pointer rounded-xl p-4 hover:bg-coral/5"
-      >
-        <div class="flex flex-col">
-          <Description class="feature-title text-2xl font-bold">
-            Workspaces
-          </Description>
-          <p class="desc mt-2 text-base font-normal">
-            With Zen, you can create multiple workspaces to keep your tabs
-            organized.
-          </p>
-        </div>
-      </motion.div>
-      <motion.div
-        client:load
-        viewport={{ once: true }}
-        {...getZoomInAnimation(0.6)}
-        className="feature flex w-full cursor-pointer rounded-xl p-4 hover:bg-coral/5"
-      >
-        <div class="flex flex-col">
-          <Description class="feature-title text-2xl font-bold">
-            Compact Mode
-          </Description>
-          <p class="desc mt-2 text-base font-normal">
-            Zen's compact mode allows you to see more of your content at once.
-          </p>
-        </div>
-      </motion.div>
-      <motion.div
-        client:load
-        viewport={{ once: true }}
-        {...getZoomInAnimation(0.8)}
-        className="feature flex w-full cursor-pointer rounded-xl p-4 hover:bg-coral/5"
-      >
-        <div class="flex flex-col">
-          <Description class="feature-title text-2xl font-bold">
-            Split Views
-          </Description>
-          <p class="desc mt-2 text-base font-normal">
-            Split your browser into multiple views to see more content at once.
-          </p>
-        </div>
-      </motion.div>
-      <motion.div
-        client:load
-        viewport={{ once: true }}
-        {...getZoomInAnimation(1)}
-        className="feature flex w-full cursor-pointer rounded-xl p-4 hover:bg-coral/5"
-      >
-        <div class="flex flex-col">
-          <Description class="feature-title text-2xl font-bold">
-            Sidebar
-          </Description>
-          <p class="desc mt-2 text-base font-normal">
-            Zen's sidebar allows you to quickly access your favourite websites.
-          </p>
-        </div>
-      </motion.div>
-      <motion.div
-        client:load
-        viewport={{ once: true }}
-        {...getZoomInAnimation(1.2)}
-        className="feature flex w-full cursor-pointer rounded-xl p-4 hover:bg-coral/5"
-      >
-        <div class="flex flex-col">
-          <Description class="feature-title text-2xl font-bold">
-            Zen Glance
-          </Description>
-          <p class="desc mt-2 text-base font-normal">
-            Preview your tabs with Zen Glance to quickly find what you're
-            looking for, without switching tabs.
-          </p>
-        </div>
-      </motion.div>
+      <Description class="mt-4 text-lg font-normal">
+        Zen is designed to help you focus on what matters most. Here are some<br
+          class="hidden lg:block"
+        /> of the features that help you stay focused.
+      </Description>
     </div>
-    <div class="relative m-auto items-center lg:w-2/3 lg:pl-20">
-      <div class="ml-auto" id="feature-list-image">
-        <Image
-          src={browserWorkspaces}
-          alt="Browser Workspaces"
-          class="rounded-xl border-4 border-white shadow"
-        />
-        <Image
-          src={browserCompactMode}
-          alt="Browser Compact Mode"
-          class="rounded-xl border-4 border-white shadow"
-        />
-        <Image
-          src={browserSplitViews}
-          alt="Browser Split Views"
-          class="rounded-xl border-4 border-white shadow"
-        />
-        <Image
-          src={browserSidebar}
-          alt="Browser Sidebar"
-          class="rounded-xl border-4 border-white shadow"
-        />
-        <video
-          src={browserGlance}
-          autoplay
-          loop
-          muted
-          playsinline
-          class="absolute left-0 top-0 h-full w-full rounded-xl border-4 border-white object-cover shadow"
-        ></video>
+
+    <div class="long-feature">
+      <div class="lg:p-24">
+        <Description class="feature-title text-6xl font-bold">
+          Workspaces
+        </Description>
+        <p class="desc mt-2 text-xl font-normal">
+          With Zen, you can create multiple workspaces to keep your tabs
+          organized.
+        </p>
       </div>
+      <video
+        src={browserWorkspaces}
+        autoplay
+        loop
+        muted
+        playsinline
+        preload="none"
+        class="w-full rounded-xl border-4 border-white object-cover shadow"
+      ></video>
+    </div>
+    <div class="long-feature xl:!flex-row-reverse">
+      <div class="lg:p-24">
+        <Description class="feature-title text-6xl font-bold">
+          Compact Mode
+        </Description>
+        <p class="desc mt-2 text-xl font-normal">
+          Zen's compact mode allows you to focus on your work without any
+          distractions.
+        </p>
+      </div>
+      <video
+        src={browserCompactMode}
+        autoplay
+        loop
+        muted
+        playsinline
+        preload="none"
+        class="w-full rounded-xl border-4 border-white object-cover shadow"
+      ></video>
+    </div>
+    <div class="long-feature">
+      <div class="lg:p-24">
+        <Description class="feature-title text-6xl font-bold">
+          Zen Glance
+        </Description>
+        <p class="desc mt-2 text-xl font-normal">
+          Zen's glance feature allows you to view links without <i>actually</i>
+          opening them.
+        </p>
+      </div>
+      <video
+        src={browserGlance}
+        autoplay
+        loop
+        muted
+        playsinline
+        preload="none"
+        class="w-full rounded-xl border-4 border-white object-cover shadow"
+      ></video>
+    </div>
+    <div class="long-feature xl:!flex-row-reverse">
+      <div class="lg:p-24">
+        <Description class="feature-title text-6xl font-bold whitespace-nowrap">
+          Split Views
+        </Description>
+        <p class="desc mt-2 text-xl font-normal">
+          Zen's split view feature allows you to view multiple tabs at once.
+        </p>
+      </div>
+      <video
+        src={browserSplitViews}
+        autoplay
+        loop
+        muted
+        playsinline
+        preload="none"
+        class="w-full rounded-xl border-4 border-white object-cover shadow"
+      ></video>
+    </div>
+    <div class="long-feature">
+      <div class="lg:p-24">
+        <Description class="feature-title text-6xl font-bold">
+          Sidebar
+        </Description>
+        <p class="desc mt-2 text-xl font-normal">
+          Zen's sidebar feature allows you to view all your tabs in one place.
+        </p>
+      </div>
+      <video
+        src={browserSidebar}
+        autoplay
+        loop
+        muted
+        playsinline
+        preload="none"
+        class="w-full rounded-xl border-4 border-white object-cover shadow"
+      ></video>
     </div>
   </div>
 </section>
@@ -186,4 +185,8 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
   .feature[active] {
     @apply bg-coral/10;
   }
+
+  .long-feature {
+    @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;
+  }
 </style>

src/components/HomeExtras.astro

@@ -39,7 +39,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
 </section>
 <section
   id="customization"
-  class="relative flex w-full flex-col gap-16 overflow-y-hidden px-4 py-36 pt-24 lg:flex-row lg:px-12 xl:px-24"
+  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"
 >
   <div>
     <motion.span client:load {...getTitleAnimation(0.2)}>
@@ -56,10 +56,10 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
         limit.
       </Description>
     </motion.span>
-    <div class="mt-4 flex">
+    <div class="mt-4 flex gap-4">
       <motion.span client:load {...getTitleAnimation(0.6)}>
         <Button isPrimary href="/customization">
-          Learn More
+          Zen Mods
           <ArrowRight className="size-4" />
         </Button>
       </motion.span>

src/release-notes/stable.json

@@ -363,9 +363,7 @@
     "version": "1.0.0-a.13",
     "date": "05/08/2024",
     "extra": "This is a smaller release to fix some bugs and improve some small details.\n\nIm going to try doing more frequent releases from now on, see how it goes.",
-    "features": [
-      "Allow to remember sidebar width even after collapsing it."
-    ],
+    "features": ["Allow to remember sidebar width even after collapsing it."],
     "fixes": [
       {
         "description": "Task Manager Icon Missing in Flatpak Version",
@@ -921,9 +919,7 @@
     "image": true,
     "workflowId": 11000317603,
     "extra": "This update addresses some significant issues with the previous release.\n\nWe appreciate your patience and support!",
-    "features": [
-      "Added a new system for handling keyboard shortcuts"
-    ],
+    "features": ["Added a new system for handling keyboard shortcuts"],
     "fixes": [
       {
         "description": "The New Tab button is not visible",
@@ -980,9 +976,7 @@
       "Enabled container tabs by default",
       "Improved Expand Tabs on Hover layout"
     ],
-    "themeChanges": [
-      "Toggle inputs will not use the themed tertiary color"
-    ],
+    "themeChanges": ["Toggle inputs will not use the themed tertiary color"],
     "breakingChanges": [
       "The keyboard shortcuts will be overriden by the defaults ones in this update"
     ],
@@ -1279,9 +1273,7 @@
         "issue": 2156
       }
     ],
-    "breakingChanges": [
-      "Removed Show Expand Button option from settings"
-    ],
+    "breakingChanges": ["Removed Show Expand Button option from settings"],
     "themeChanges": [
       "The variable '--zen-main-browser-background' will now contain the generated gradient",
       "Added the 'unread' attribute for background tabs that haven't been accessed yet"
@@ -1384,9 +1376,7 @@
         "description": "Fixed wrong aligment on glance action buttons"
       }
     ],
-    "features": [
-      "No new features, sorry"
-    ]
+    "features": ["No new features, sorry"]
   },
   {
     "version": "1.0.1-a.17",
@@ -2090,4 +2080,4 @@
     "workflowId": 12856540987,
     "date": "19/01/2025"
   }
-]
+]

src/release-notes/twilight.json

@@ -4,4 +4,4 @@
   "extra": "",
   "fixes": [],
   "features": []
-}
+}