refactor: replace css fade animations with gsap, optimize post page animations and mobile responsiveness

src/pages/[...posts_slug].astro

@@ -3,7 +3,7 @@ import type { CollectionEntry } from 'astro:content'
 import { getCollection, render } from 'astro:content'
 import Comments from '@/components/Comments/index.astro'
 import PostDate from '@/components/PostDate.astro'
-import GoBack from '@/components/Widgets/GoBack.astro'
+import BackButton from '@/components/Widgets/BackButton.astro'
 import TOC from '@/components/Widgets/TOC.astro'
 import { allLocales, defaultLocale, moreLocales } from '@/config'
 import { getTagPath } from '@/i18n/path'
@@ -109,7 +109,7 @@ const { Content, headings, remarkPluginFrontmatter } = await render(post)
   <article class="heti mb-12.6">
     <div class="relative">
       <!-- Go Back Button On Desktop -->
-      <GoBack />
+      <BackButton />
       <!-- Title -->
       <h1 class="post-title">
         <span
@@ -123,8 +123,8 @@ const { Content, headings, remarkPluginFrontmatter } = await render(post)
 
     <!-- Date -->
     <div
-      class="animation-fade-in mb-16.3 block c-primary font-time"
-      style="--animation-distance: 1rem;"
+      id="gsap-post-page-date"
+      class="mb-16.3 block c-primary font-time"
       transition:name={`time-${post.data.abbrlink || post.id}-${lang}`}
       data-disable-theme-transition
     >
@@ -137,26 +137,25 @@ const { Content, headings, remarkPluginFrontmatter } = await render(post)
     <!-- TOC -->
     {post.data.toc && <TOC headings={headings} />}
     <!-- Content -->
-     <div class="animation-fade-up">
+     <div id="gsap-post-page-content">
       <Content />
     </div>
   </article>
 
   <!-- Tags -->
   {post.data.tags && post.data.tags.length > 0 && (
-    <div
-      class="animation-fade-in uno-decorative-line"
-      style="--animation-delay: 0.8s;"
-    ></div>
-    <div class="uno-tags-wrapper">
-      {post.data.tags.map((tag: string) => (
-        <a
-          href={getTagPath(tag, lang)}
-          class="uno-tags-style"
-        >
-          {tag}
-        </a>
-      ))}
+    <div id="gsap-post-page-tags">
+      <div class="uno-decorative-line"></div>
+      <div class="uno-tags-wrapper">
+        {post.data.tags.map((tag: string) => (
+          <a
+            href={getTagPath(tag, lang)}
+            class="uno-tags-style"
+          >
+            {tag}
+          </a>
+        ))}
+      </div>
     </div>
   )}
   <!-- Comments -->