refactor(components): remove translate-y-20 class for improved layout consistency

src/components/Community.astro

@@ -23,28 +23,28 @@ const {
     {
       community.title.map(title =>
         title !== '\n' ? (
-          <span class="translate-y-20 opacity-0 blur-sm">{title}</span>
+          <span class="opacity-0 blur-sm">{title}</span>
         ) : (
           <br class="hidden md:block" />
         )
       )
     }
   </h2>
-  <p class="translate-y-20 text-base opacity-80 blur-sm lg:w-1/2 lg:px-0">
+  <p class="text-base opacity-80 blur-sm lg:w-1/2 lg:px-0">
     {community.description}
   </p>
   <div class="flex w-full flex-wrap gap-3 sm:gap-10 md:justify-center">
-    <span class="community__button translate-y-20 opacity-0 blur-sm">
+    <span class="community__button opacity-0 blur-sm">
       <Button class:list={['px-4']} href="https://github.com/zen-browser">
         <GitHubIcon class="size-4" />
         <span>{community.lists.freeAndOpenSource.title}</span>
       </Button>
     </span>
-    <div class="community__button flex translate-y-20 items-center gap-4 opacity-0 blur-sm">
+    <div class="community__button flex items-center gap-4 opacity-0 blur-sm">
       <CheckIcon class="size-4" />
       <span>{community.lists.simpleYetPowerful.title}</span>
     </div>
-    <div class="community__button flex translate-y-20 items-center gap-4 opacity-0 blur-sm">
+    <div class="community__button flex items-center gap-4 opacity-0 blur-sm">
       <CheckIcon class="size-4" />
       <span>{community.lists.privateAndAlwaysUpToDate.title}</span>
     </div>
@@ -53,7 +53,7 @@ const {
     <Image
       src={ComImage}
       alt={community.images.community.alt}
-      class="translate-y-20 rounded-3xl opacity-0 shadow-md blur-sm lg:mx-auto dark:opacity-80"
+      class="rounded-3xl opacity-0 shadow-md blur-sm lg:mx-auto dark:opacity-80"
     />
   </span>
 </section>

src/components/Features.astro

@@ -57,12 +57,12 @@ const featureList = [
             case '\n':
               return <br class="hidden md:block" />
             default:
-              return <span class="translate-y-20 opacity-0 blur-sm">{title}</span>
+              return <span class="opacity-0 blur-sm">{title}</span>
           }
         })
       }
     </h2>
-    <p class="max-w-2xl translate-y-20 text-base opacity-80 blur-sm sm:text-lg">
+    <p class="max-w-2xl text-base opacity-80 blur-sm sm:text-lg">
       {features.description}
     </p>
   </div>
@@ -75,15 +75,15 @@ const featureList = [
           class={`flex w-full flex-col items-center gap-6 xl:gap-12 ${index % 2 === 0 ? 'xl:flex-row-reverse' : 'xl:flex-row'}`}
         >
           <div class="flex flex-col items-center gap-4">
-            <h3 class="translate-y-20 text-2xl font-bold opacity-0 blur-sm sm:text-3xl xl:text-4xl">
+            <h3 class="text-2xl font-bold opacity-0 blur-sm sm:text-3xl xl:text-4xl">
               {feature.title}
             </h3>
-            <p class="translate-y-20 text-base leading-relaxed opacity-80 blur-sm sm:text-lg">
+            <p class="text-base leading-relaxed opacity-80 blur-sm sm:text-lg">
               {feature.description}
             </p>
           </div>
           <Video
-            class="max-h-[450px] w-[800px] translate-y-20 rounded-xl border-2 border-dark object-cover opacity-0 shadow-lg blur-sm"
+            class="max-h-[450px] w-[800px] rounded-xl border-2 border-dark object-cover opacity-0 shadow-lg blur-sm"
             name={feature.video}
             autoplay
             loop

src/components/Hero.astro

@@ -26,12 +26,7 @@ const {
         {
           hero.title.map(title =>
             title.text !== '\n' ? (
-              <span
-                class:list={[
-                  'translate-y-20 opacity-0 blur-sm',
-                  title.highlight && 'italic text-coral',
-                ]}
-              >
+              <span class:list={['opacity-0 blur-sm', title.highlight && 'italic text-coral']}>
                 {title.text}
               </span>
             ) : (
@@ -40,28 +35,31 @@ const {
           )
         }
       </Title>
-      <p class="translate-y-20 px-12 text-center opacity-0 blur-sm lg:px-0">
+      <p class="px-12 text-center opacity-0 blur-sm lg:px-0">
         {hero.description[0]}
         <br class="hidden sm:inline" />
         {hero.description[1]}
       </p>
     </div>
     <div
-      class="hero__link-group flex w-2/3 flex-col items-center justify-center gap-3 sm:gap-6 md:w-fit md:flex-row"
+      class="flex w-2/3 flex-col items-center justify-center gap-3 sm:gap-6 md:w-fit md:flex-row"
     >
       <Button
-        class="w-fit translate-y-20 opacity-0 blur-sm"
+        class="hero__link-group_button w-fit opacity-0 blur-sm"
         href={getLocalePath('/download')}
         isPrimary
       >
         {hero.buttons.beta}
         <ArrowRightIcon class="size-4" />
       </Button>
-      <Button href={getLocalePath('/donate')} class="w-fit translate-y-20 opacity-0 blur-sm">
+      <Button
+        href={getLocalePath('/donate')}
+        class="hero__link-group_button w-fit opacity-0 blur-sm"
+      >
         {hero.buttons.support}
       </Button>
     </div>
-    <SocialMediaStrip class="translate-y-20 blur-sm" opacity={0} />
+    <SocialMediaStrip class="blur-sm" opacity={0} />
   </div>
   <Video
     name="hero-video"
@@ -70,7 +68,7 @@ const {
     muted
     playsinline
     preload="none"
-    class="translate-y-20 rounded-xl opacity-0 blur-sm"
+    class="rounded-xl opacity-0 blur-sm"
   />
 </header>
 
@@ -81,7 +79,7 @@ const {
     const debug = false
 
     const elements = document.querySelectorAll(
-      '#header h1 span, #header p, #header .hero__link-group a, #header video, #header ul'
+      '#header h1 span, #header p, #header .hero__link-group_button, #header video, #header ul'
     )
 
     animate(elements, {
@@ -89,12 +87,12 @@ const {
       opacity: element => {
         // if ul is the element, return 0.8
         if (element.tagName === 'UL') {
-          return 0.8
+          return { from: 0.001, to: 0.8 }
         }
-        return 1
+        return { from: 0.001, to: 1 }
       },
-      translateY: 0,
-      filter: 'blur(0px)',
+      translateY: { from: 20, to: 0 },
+      filter: { from: 'blur(4px)', to: 'blur(0px)' },
       duration: 300,
       delay: stagger(150),
       easing: 'easeOutQuart',

src/components/Sponsors.astro

@@ -18,16 +18,12 @@ const {
 
 <section id="sponsors" class:list={['py-12', !showSponsors && 'hidden']}>
   <div class="flex flex-col items-center gap-6 text-center">
-    <h3 class="translate-y-20 text-4xl font-bold opacity-0 blur-sm sm:text-6xl">
+    <h3 class="text-4xl font-bold opacity-0 blur-sm sm:text-6xl">
       {sponsors.title}
     </h3>
-    <p class="translate-y-20 text-base opacity-80 blur-sm" set:html={sponsors.description} />
+    <p class="text-base opacity-80 blur-sm" set:html={sponsors.description} />
     <div class="sponsors__sponsor relative mt-8 flex items-center justify-center">
-      <a
-        href={sponsors.sponsors['tuta'].url}
-        target="_blank"
-        class="w-fit translate-y-20 opacity-0 blur-sm"
-      >
+      <a href={sponsors.sponsors['tuta'].url} target="_blank" class="w-fit opacity-0 blur-sm">
         <Image
           src={tutaLogo}
           alt={sponsors.sponsors['tuta'].name}