diff --git a/resources/views/article.blade.php b/resources/views/article.blade.php
index fd59875d..76acb7ec 100644
--- a/resources/views/article.blade.php
+++ b/resources/views/article.blade.php
@@ -1,7 +1,7 @@
 <x-layout title="Blog">
     {{-- Hero --}}
     <section
-        class="mx-auto mt-10 w-full max-w-3xl md:mt-14"
+        class="mx-auto mt-10 w-full max-w-5xl"
         aria-labelledby="article-title"
     >
         <header class="relative grid place-items-center text-center">
@@ -15,17 +15,11 @@ class="absolute top-0 right-1/2 -z-30 h-60 w-60 translate-x-1/2 rounded-full blu
             <div
                 x-init="
                     () => {
-                        motion.inView($el, (element) => {
-                            motion.animate(
+                        motion.inView($el, () => {
+                            gsap.fromTo(
                                 $el,
-                                {
-                                    opacity: [0, 1],
-                                    x: [5, 0],
-                                },
-                                {
-                                    duration: 0.7,
-                                    ease: motion.easeOut,
-                                },
+                                { autoAlpha: 0, x: 5 },
+                                { autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
                             )
                         })
                     }
@@ -33,7 +27,7 @@ class="absolute top-0 right-1/2 -z-30 h-60 w-60 translate-x-1/2 rounded-full blu
             >
                 <a
                     href="{{ route('blog') }}"
-                    class="inline-flex items-center gap-2 opacity-60 transition duration-200 will-change-transform hover:-translate-x-0.5 hover:opacity-100"
+                    class="inline-flex items-center gap-2 opacity-60 transition duration-200 hover:-translate-x-0.5 hover:opacity-100"
                     aria-label="Return to blog listing"
                 >
                     <x-icons.right-arrow
@@ -49,22 +43,16 @@ class="size-3 shrink-0 -scale-x-100"
                 id="article-title"
                 x-init="
                     () => {
-                        motion.inView($el, (element) => {
-                            motion.animate(
+                        motion.inView($el, () => {
+                            gsap.fromTo(
                                 $el,
-                                {
-                                    opacity: [0, 1],
-                                    x: [-5, 0],
-                                },
-                                {
-                                    duration: 0.7,
-                                    ease: motion.easeOut,
-                                },
+                                { autoAlpha: 0, x: -5 },
+                                { autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
                             )
                         })
                     }
                 "
-                class="mt-8 text-3xl font-extrabold will-change-transform sm:text-4xl"
+                class="mt-8 text-3xl font-bold sm:text-4xl"
             >
                 {{ $article->title }}
             </h1>
@@ -88,59 +76,30 @@ class="text-sm"
         </header>
 
         {{-- Divider --}}
-        <div
-            x-init="
-                () => {
-                    motion.inView($el, (element) => {
-                        motion.animate(
-                            $el,
-                            {
-                                opacity: [0, 1],
-                                x: [5, 0],
-                            },
-                            {
-                                duration: 0.7,
-                                ease: motion.easeOut,
-                            },
-                        )
-                    })
-                }
-            "
-            class="flex items-center pt-3.5 pb-3 will-change-transform"
-            aria-hidden="true"
-        >
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-            <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-        </div>
+        <x-divider />
 
-        {{-- Content --}}
-        <article
-            x-init="
-                () => {
-                    motion.inView($el, (element) => {
-                        motion.animate(
-                            $el,
-                            {
-                                opacity: [0, 1],
-                                y: [5, 0],
-                            },
-                            {
-                                duration: 0.7,
-                                ease: motion.easeOut,
-                            },
-                        )
-                    })
-                }
-            "
-            class="prose dark:prose-headings:text-white mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400"
-            aria-labelledby="article-title"
-        >
-            {!! App\Support\CommonMark\CommonMark::convertToHtml($article->content) !!}
-        </article>
+        <div class="mt-2 flex items-start gap-5">
+            {{-- Content --}}
+            <article
+                x-init="
+                    () => {
+                        motion.inView($el, () => {
+                            gsap.fromTo(
+                                $el,
+                                { autoAlpha: 0, y: 5 },
+                                { autoAlpha: 1, y: 0, duration: 0.7, ease: 'power1.out' },
+                            )
+                        })
+                    }
+                "
+                class="prose max-w-none grow text-gray-600 dark:text-gray-400 dark:prose-headings:text-white"
+                aria-labelledby="article-title"
+            >
+                {!! App\Support\CommonMark\CommonMark::convertToHtml($article->content) !!}
+            </article>
+
+            {{-- Sidebar --}}
+            <x-blog.sidebar />
+        </div>
     </section>
 </x-layout>
diff --git a/resources/views/blog.blade.php b/resources/views/blog.blade.php
index 36e511a9..71df6d04 100644
--- a/resources/views/blog.blade.php
+++ b/resources/views/blog.blade.php
@@ -1,9 +1,6 @@
 <x-layout title="Blog">
-    {{-- Hero --}}
-    <section
-        class="mt-10 md:mt-14"
-        aria-labelledby="hero-heading"
-    >
+    <section class="mx-auto mt-10 w-full max-w-3xl">
+        {{-- Hero --}}
         <header class="relative z-0 grid place-items-center text-center">
             {{-- Primary Heading --}}
             <h1
@@ -11,183 +8,184 @@ class="mt-10 md:mt-14"
                 x-init="
                     () => {
                         motion.inView($el, (element) => {
-                            motion.animate(
+                            gsap.fromTo(
                                 $el,
                                 {
-                                    opacity: [0, 1],
-                                    y: [-10, 0],
+                                    autoAlpha: 0,
+                                    y: -10,
                                 },
                                 {
+                                    autoAlpha: 1,
+                                    y: 0,
                                     duration: 0.7,
-                                    ease: motion.easeOut,
+                                    ease: 'power1.out',
                                 },
                             )
                         })
                     }
                 "
-                class="text-3xl font-extrabold will-change-transform sm:text-4xl"
+                class="text-3xl font-bold sm:text-4xl"
             >
                 Blog
             </h1>
-
             {{-- Introduction Description --}}
             <h2
                 x-init="
                     () => {
                         motion.inView($el, (element) => {
-                            motion.animate(
+                            gsap.fromTo(
                                 $el,
                                 {
-                                    opacity: [0, 1],
-                                    y: [10, 0],
+                                    autoAlpha: 0,
+                                    y: 10,
                                 },
                                 {
+                                    autoAlpha: 1,
+                                    y: 0,
                                     duration: 0.7,
-                                    ease: motion.easeOut,
+                                    ease: 'power1.out',
                                 },
                             )
                         })
                     }
                 "
-                class="mx-auto max-w-2xl pt-4 text-base/relaxed text-gray-600 will-change-transform sm:text-lg/relaxed dark:text-gray-400"
+                class="mx-auto max-w-2xl pt-4 text-base/relaxed text-gray-600 sm:text-lg/relaxed dark:text-gray-400"
             >
                 Welcome to our blog! Here, we share insights, updates, and
                 stories from our community. Stay tuned for the latest news and
                 articles.
             </h2>
-
-            {{-- Blurred circle - Decorative --}}
-            <div
-                class="absolute -top-1/2 right-0 -z-20 h-60 w-60 rounded-full bg-violet-300/60 blur-[150px] md:right-1/2 md:w-80 dark:bg-violet-500/20"
-                aria-hidden="true"
-            ></div>
-
-            {{-- Blurred circle - Decorative --}}
-            <div
-                class="absolute top-1/2 left-0 -z-30 h-60 w-60 rounded-full bg-orange-200/60 blur-[150px] md:left-1/2 md:w-80 dark:bg-slate-500/50"
-                aria-hidden="true"
-            ></div>
         </header>
-    </section>
 
-    {{-- Articles --}}
-    <section
-        class="relative z-10 mx-auto mt-10 w-full max-w-xl px-5"
-        aria-labelledby="blog-articles-heading"
-    >
-        {{-- Semantic heading for section (visually hidden) --}}
-        <h2
-            id="blog-articles-heading"
-            class="sr-only"
-        >
-            Blog Articles
-        </h2>
+        {{-- Divider --}}
+        <x-divider />
 
-        {{-- List --}}
-        <div
-            x-init="
-                () => {
-                    motion.inView($el, (element) => {
-                        motion.animate(
-                            Array.from($el.children),
-                            {
-                                x: [-50, 0],
-                                opacity: [0, 1],
-                            },
-                            {
-                                duration: 0.7,
-                                ease: motion.circOut,
-                                delay: motion.stagger(0.1),
-                            },
-                        )
-                    })
-                }
-            "
-            class="flex flex-col gap-5"
+        {{-- Articles --}}
+        <section
+            class="relative z-10 mt-2"
+            aria-labelledby="blog-articles-heading"
         >
-            @foreach ($articles as $article)
-                <x-article-card
-                    :title="$article->title"
-                    :url="route('article', $article)"
-                    :date="$article->published_at"
+            {{-- Semantic heading for section (visually hidden) --}}
+            <h2
+                id="blog-articles-heading"
+                class="sr-only"
+            >
+                Blog Articles
+            </h2>
+            {{-- Main --}}
+            <div class="flex items-start gap-5">
+                {{-- List --}}
+                <div
+                    x-init="
+                        () => {
+                            motion.inView($el, (element) => {
+                                gsap.fromTo(
+                                    $el.children,
+                                    {
+                                        x: -50,
+                                        autoAlpha: 0,
+                                    },
+                                    {
+                                        x: 0,
+                                        autoAlpha: 1,
+                                        duration: 0.7,
+                                        ease: 'circ.out',
+                                        stagger: 0.1,
+                                    },
+                                )
+                            })
+                        }
+                    "
+                    class="flex grow flex-col gap-5"
                 >
-                    {{ $article->excerpt }}
-                </x-article-card>
-            @endforeach
-        </div>
+                    @foreach ($articles as $article)
+                        <x-blog.article-card
+                            :title="$article->title"
+                            :url="route('article', $article)"
+                            :date="$article->published_at"
+                        >
+                            {{ $article->excerpt }}
+                        </x-blog.article-card>
+                    @endforeach
+                </div>
 
-        {{-- Pagination --}}
-        <nav
-            class="flex items-center justify-between gap-5 pt-2.5"
-            aria-label="Blog pagination"
-        >
-            {{-- Previous --}}
-            <div
-                x-init="
-                    () => {
-                        motion.inView($el, (element) => {
-                            motion.animate(
-                                $el,
-                                {
-                                    opacity: [0, 1],
-                                    x: [-10, 0],
-                                },
-                                {
-                                    duration: 0.7,
-                                    ease: motion.easeOut,
-                                },
-                            )
-                        })
-                    }
-                "
-                class="will-change-transform"
-            >
-                @if (! $articles->onFirstPage())
-                    <a
-                        href="{{ $articles->previousPageUrl() }}"
-                        class="inline-block p-1.5 opacity-60 transition duration-200 hover:opacity-100"
-                        aria-label="Go to previous page"
-                        rel="prev"
-                    >
-                        <span class="sr-only">Navigate to</span>
-                        Previous
-                    </a>
-                @endif
+                {{-- Sidebar --}}
+                <x-blog.sidebar />
             </div>
-
-            {{-- Next --}}
-            <div
-                x-init="
-                    () => {
-                        motion.inView($el, (element) => {
-                            motion.animate(
-                                $el,
-                                {
-                                    opacity: [0, 1],
-                                    x: [10, 0],
-                                },
-                                {
-                                    duration: 0.7,
-                                    ease: motion.easeOut,
-                                },
-                            )
-                        })
-                    }
-                "
-                class="will-change-transform"
+            {{-- Pagination --}}
+            <nav
+                class="flex items-center justify-between gap-5 pt-2.5"
+                aria-label="Blog pagination"
             >
-                @if (! $articles->onLastPage())
-                    <a
-                        href="{{ $articles->nextPageUrl() }}"
-                        class="inline-block p-1.5 opacity-80 transition duration-200 hover:opacity-100"
-                        aria-label="Go to next page"
-                        rel="next"
-                    >
-                        <span class="sr-only">Navigate to</span>
-                        Next
-                    </a>
-                @endif
-            </div>
-        </nav>
+                {{-- Previous --}}
+                <div
+                    x-init="
+                        () => {
+                            motion.inView($el, (element) => {
+                                gsap.fromTo(
+                                    $el,
+                                    {
+                                        autoAlpha: 0,
+                                        x: -10,
+                                    },
+                                    {
+                                        autoAlpha: 1,
+                                        x: 0,
+                                        duration: 0.7,
+                                        ease: 'power1.out',
+                                    },
+                                )
+                            })
+                        }
+                    "
+                >
+                    @if (! $articles->onFirstPage())
+                        <a
+                            href="{{ $articles->previousPageUrl() }}"
+                            class="inline-block p-1.5 opacity-60 transition duration-200 hover:opacity-100"
+                            aria-label="Go to previous page"
+                            rel="prev"
+                        >
+                            <span class="sr-only">Navigate to</span>
+                            Previous
+                        </a>
+                    @endif
+                </div>
+                {{-- Next --}}
+                <div
+                    x-init="
+                        () => {
+                            motion.inView($el, (element) => {
+                                gsap.fromTo(
+                                    $el,
+                                    {
+                                        autoAlpha: 0,
+                                        x: 10,
+                                    },
+                                    {
+                                        autoAlpha: 1,
+                                        x: 0,
+                                        duration: 0.7,
+                                        ease: 'power1.out',
+                                    },
+                                )
+                            })
+                        }
+                    "
+                >
+                    @if (! $articles->onLastPage())
+                        <a
+                            href="{{ $articles->nextPageUrl() }}"
+                            class="inline-block p-1.5 opacity-80 transition duration-200 hover:opacity-100"
+                            aria-label="Go to next page"
+                            rel="next"
+                        >
+                            <span class="sr-only">Navigate to</span>
+                            Next
+                        </a>
+                    @endif
+                </div>
+            </nav>
+        </section>
     </section>
 </x-layout>
diff --git a/resources/views/components/article-card.blade.php b/resources/views/components/blog/article-card.blade.php
similarity index 77%
rename from resources/views/components/article-card.blade.php
rename to resources/views/components/blog/article-card.blade.php
index 3eea9265..9bc3024e 100644
--- a/resources/views/components/article-card.blade.php
+++ b/resources/views/components/blog/article-card.blade.php
@@ -10,21 +10,21 @@ class="block"
     aria-labelledby="article-title-{{ Str::slug($title) }}"
 >
     <article
-        class="group relative z-0 block overflow-hidden rounded-2xl bg-gray-200/40 p-7 transition duration-300 hover:bg-violet-100 dark:bg-mirage/50 dark:hover:bg-violet-500/10"
+        class="group relative z-0 block overflow-hidden rounded-2xl bg-zinc-200/60 p-7 transition duration-300 hover:bg-violet-200/60 dark:bg-mirage dark:hover:bg-violet-500/10"
     >
         {{-- Header --}}
         <div class="flex items-start justify-between gap-10">
             {{-- Title --}}
             <h3
                 id="article-title-{{ Str::slug($title) }}"
-                class="line-clamp-4 max-w-xs text-xl font-semibold leading-relaxed"
+                class="line-clamp-4 max-w-xs text-xl leading-relaxed font-semibold"
             >
                 {{ $title }}
             </h3>
 
             {{-- Arrow --}}
             <x-icons.right-arrow
-                class="-ml-5 mt-2 size-3.5 shrink-0 transition duration-300 will-change-transform group-hover:translate-x-1"
+                class="mt-2 -ml-5 size-3.5 shrink-0 transition duration-300 will-change-transform group-hover:translate-x-1"
                 aria-hidden="true"
             />
         </div>
@@ -53,7 +53,7 @@ class="shrink-0 text-sm opacity-50"
 
         {{-- Blur decoration --}}
         <div
-            class="absolute -left-10 -top-10 -z-50 h-3/4 w-40 rounded-full bg-violet-50 opacity-0 blur-3xl transition duration-300 group-hover:opacity-100 dark:bg-white/15"
+            class="absolute -top-10 -left-10 -z-50 h-3/4 w-40 rounded-full bg-white opacity-0 blur-3xl transition duration-300 group-hover:opacity-100 dark:bg-white/15"
         ></div>
     </article>
 </a>
diff --git a/resources/views/components/blog/sidebar.blade.php b/resources/views/components/blog/sidebar.blade.php
new file mode 100644
index 00000000..dca9d6ad
--- /dev/null
+++ b/resources/views/components/blog/sidebar.blade.php
@@ -0,0 +1,93 @@
+<aside
+    x-init="
+        () => {
+            motion.inView($el, () => {
+                gsap.fromTo(
+                    $el,
+                    { autoAlpha: 0, x: 5 },
+                    { autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
+                )
+            })
+        }
+    "
+    class="sticky top-20 right-0 hidden max-w-52 shrink-0 min-[850px]:block"
+>
+    <a
+        href="{{ route('pricing') }}"
+        class="group relative z-0 grid place-items-center overflow-hidden rounded-2xl bg-gray-100 px-4 pt-10 text-center text-pretty transition duration-200 hover:bg-gray-200/70 hover:ring-1 hover:ring-black/60 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
+    >
+        {{-- Logo --}}
+        <div>
+            <x-logo class="h-5" />
+            <span class="sr-only">NativePHP</span>
+        </div>
+
+        {{-- Tagline --}}
+        <div class="mt-3">
+            Bring your
+            <strong>Laravel</strong>
+            skills to
+            <strong>mobile apps.</strong>
+        </div>
+
+        {{-- Iphone --}}
+        <div class="mt-4 -mb-25">
+            <img
+                src="{{ Vite::asset('resources/images/home/iphone.webp') }}"
+                alt=""
+                aria-hidden="true"
+                class="w-25 transition duration-200 will-change-transform group-hover:-translate-y-1 dark:brightness-80 dark:contrast-150"
+                width="92"
+                height="190"
+                loading="lazy"
+            />
+        </div>
+
+        {{-- Star 1 --}}
+        <x-icons.star
+            class="absolute top-6 right-3 z-10 w-4 -rotate-7 text-white dark:w-3 dark:text-slate-300"
+        />
+        {{-- Star 2 --}}
+        <x-icons.star
+            class="absolute top-3 right-14 z-10 w-3 rotate-5 text-white dark:w-2 dark:text-slate-300"
+        />
+        {{-- Star 3 --}}
+        <x-icons.star
+            class="absolute top-2.5 right-7.5 z-10 w-2.5 text-white dark:w-2 dark:text-slate-300"
+        />
+        {{-- White blur --}}
+        <div class="absolute top-5 -right-10 -z-5">
+            <div
+                class="h-5 w-36 rotate-30 rounded-full bg-white/80 blur-md dark:bg-white/5"
+            ></div>
+        </div>
+        {{-- Sky blur --}}
+        <div class="absolute top-5 -right-20 -z-10">
+            <div
+                class="h-15 w-36 rotate-30 rounded-full bg-sky-300 blur-xl dark:bg-sky-500/30"
+            ></div>
+        </div>
+        {{-- Violet blur --}}
+        <div class="absolute -top-10 -right-5 -z-10">
+            <div
+                class="h-15 w-36 rotate-30 rounded-full bg-violet-300 blur-xl dark:bg-violet-400/30"
+            ></div>
+        </div>
+    </a>
+
+    {{-- Sponsors --}}
+    <h3 class="mt-3 flex items-center gap-1.5 opacity-60">
+        {{-- Icon --}}
+        <x-icons.star-circle class="size-6" />
+        {{-- Label --}}
+        <div>Sponsors</div>
+    </h3>
+    {{-- List --}}
+    <div class="space-y-3 pt-2.5">
+        <x-sponsors.lists.docs.featured-sponsors />
+    </div>
+    {{-- List --}}
+    <div class="space-y-3 pt-2.5">
+        <x-sponsors.lists.docs.corporate-sponsors />
+    </div>
+</aside>
diff --git a/resources/views/components/divider.blade.php b/resources/views/components/divider.blade.php
new file mode 100644
index 00000000..643648d6
--- /dev/null
+++ b/resources/views/components/divider.blade.php
@@ -0,0 +1,19 @@
+<div
+    x-init="
+        () => {
+            motion.inView($el, () => {
+                gsap.fromTo(
+                    $el,
+                    { autoAlpha: 0, x: 5 },
+                    { autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
+                )
+            })
+        }
+    "
+    class="flex items-center pt-3.5 pb-3"
+    aria-hidden="true"
+>
+    <div class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"></div>
+    <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
+    <div class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"></div>
+</div>
diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
index 484314dd..94a62d98 100644
--- a/resources/views/components/footer.blade.php
+++ b/resources/views/components/footer.blade.php
@@ -94,7 +94,7 @@ class="flex flex-wrap items-center justify-center gap-2.5 *:opacity-0"
             >
                 <a
                     href="/newsletter"
-                    class="group dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud relative z-0 flex max-w-105 items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pr-7 pl-6 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10"
+                    class="group relative z-0 flex max-w-105 items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pr-7 pl-6 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
                 >
                     {{-- Decorative circle --}}
                     <div
@@ -273,14 +273,14 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
                         </a>
                     </li>
                     {{--
-                    <li>
+                        <li>
                         <a
-                            href="https://github.com/nativephp/mobile"
-                            class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
+                        href="https://github.com/nativephp/mobile"
+                        class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
                         >
-                            GitHub
+                        GitHub
                         </a>
-                    </li>
+                        </li>
                     --}}
                 </ul>
             </section>
@@ -329,14 +329,7 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
     </div>
 
     {{-- Divider --}}
-    <div
-        class="flex items-center pt-3 pb-3"
-        aria-hidden="true"
-    >
-        <div class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"></div>
-        <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
-        <div class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"></div>
-    </div>
+    <x-divider />
 
     {{-- Copyright --}}
     <section
diff --git a/resources/views/components/home/hero.blade.php b/resources/views/components/home/hero.blade.php
index 66c4efc4..705f0294 100644
--- a/resources/views/components/home/hero.blade.php
+++ b/resources/views/components/home/hero.blade.php
@@ -4,7 +4,7 @@ class="mt-2"
     role="region"
 >
     <div
-        class="relative z-0 flex flex-col overflow-hidden rounded-2xl bg-gradient-to-t from-[#E0E5EB] to-[#F9F9F9] px-5 pt-8 pb-10 ring-1 ring-zinc-200/50 lg:px-10 lg:pt-8 lg:pb-17 xl:pt-10 dark:from-slate-950 dark:to-slate-900 dark:ring-slate-800"
+        class="relative z-0 flex flex-col overflow-hidden rounded-2xl bg-gradient-to-t from-[#E0E5EB] to-[#F9F9F9] px-5 pt-8 pb-10 ring-1 ring-zinc-200/50 lg:px-10 lg:pt-10 lg:pb-17 xl:pt-13 2xl:px-15 dark:from-slate-950 dark:to-slate-900 dark:ring-slate-800"
     >
         {{-- Demo app --}}
         <div
@@ -28,7 +28,7 @@ class="order-last mt-7 flex justify-center text-xs lg:order-first lg:mt-0 lg:-mb
                         })
                     }
                 "
-                class="flex flex-wrap justify-center gap-2 lg:flex-col lg:items-end lg:gap-1.5"
+                class="flex flex-wrap justify-center gap-2 lg:flex-col lg:items-end lg:gap-1.5 xl:gap-2"
             >
                 <p
                     class="w-full text-center font-light lg:w-auto dark:font-extralight"
@@ -42,10 +42,10 @@ class="w-full text-center font-light lg:w-auto dark:font-extralight"
                         href="https://play.google.com/store/apps/details?id=com.nativephp.kitchensinkapp"
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="flex items-center gap-2 rounded-xl bg-white/70 px-3 py-2.5 backdrop-blur-md transition duration-200 will-change-transform hover:scale-98 hover:bg-white dark:bg-slate-500/25 dark:hover:bg-slate-500/40"
+                        class="flex items-center gap-2.5 rounded-xl bg-white/70 px-3 py-2.5 backdrop-blur-md transition duration-200 will-change-transform hover:scale-98 hover:bg-white dark:bg-slate-500/25 dark:hover:bg-slate-500/40"
                     >
                         <x-icons.play-store
-                            class="h-4.5 2xl:h-5"
+                            class="h-4.5"
                             aria-hidden="true"
                         />
                         <div>Play Store</div>
@@ -56,7 +56,7 @@ class="h-4.5 2xl:h-5"
                         href="https://testflight.apple.com/join/vm9Qtshy"
                         target="_blank"
                         rel="noopener noreferrer"
-                        class="flex items-center gap-2 rounded-xl bg-white/70 px-3 py-2.5 backdrop-blur-md transition duration-200 will-change-transform hover:scale-98 hover:bg-white dark:bg-slate-500/25 dark:hover:bg-slate-500/40"
+                        class="flex items-center gap-2.5 rounded-xl bg-white/70 px-3 py-2.5 backdrop-blur-md transition duration-200 will-change-transform hover:scale-98 hover:bg-white dark:bg-slate-500/25 dark:hover:bg-slate-500/40"
                     >
                         <x-icons.app-store
                             class="h-4.5 2xl:h-5"
@@ -66,20 +66,20 @@ class="h-4.5 2xl:h-5"
                     </a>
                 </div>
                 {{--
-                <div>
+                    <div>
                     <a
-                        href="https://github.com/nativephp/kitchen-sink-mobile"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="flex items-center gap-2 rounded-xl bg-white/70 px-3 py-2.5 backdrop-blur-md transition duration-200 will-change-transform hover:scale-98 hover:bg-white dark:bg-slate-500/25 dark:hover:bg-slate-500/40"
+                    href="https://github.com/nativephp/kitchen-sink-mobile"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="flex items-center gap-2 rounded-xl bg-white/70 px-3 py-2.5 backdrop-blur-md transition duration-200 will-change-transform hover:scale-98 hover:bg-white dark:bg-slate-500/25 dark:hover:bg-slate-500/40"
                     >
-                        <x-icons.github
-                            class="h-4.5 2xl:h-5"
-                            aria-hidden="true"
-                        />
-                        <div>Source code</div>
+                    <x-icons.github
+                    class="h-4.5 2xl:h-5"
+                    aria-hidden="true"
+                    />
+                    <div>Source code</div>
                     </a>
-                </div>
+                    </div>
                 --}}
             </div>
         </div>
@@ -100,7 +100,7 @@ class="relative z-0 w-full self-center justify-self-center [grid-area:1/-1] dark
                     />
                     {{-- Window --}}
                     <div
-                        class="2xs:scale-75 xs:scale-100 relative -top-3 z-1 flex h-40 w-70 scale-60 flex-col self-center justify-self-center overflow-hidden rounded-md [grid-area:1/-1] 2xl:scale-120"
+                        class="relative -top-3 z-1 flex h-40 w-70 scale-60 flex-col self-center justify-self-center overflow-hidden rounded-md [grid-area:1/-1] 2xs:scale-75 xs:scale-100 2xl:scale-120"
                     >
                         {{-- Header --}}
                         <div
@@ -323,7 +323,7 @@ class="size-5 2xl:size-6"
                         )
                     }
                 "
-                class="xs:text-3xl 2xs:text-2xl relative text-xl font-bold text-gray-700 lg:text-4xl 2xl:text-5xl dark:text-white"
+                class="relative text-xl font-bold text-gray-700 2xs:text-2xl xs:text-3xl lg:text-4xl 2xl:text-5xl dark:text-white"
             >
                 Build
 
@@ -507,7 +507,7 @@ class="mt-2 w-35 rounded-2xl 2xl:w-40"
                         )
                     }
                 "
-                class="xs:text-lg xs:mt-5 mx-auto mt-4 max-w-4xl text-center leading-relaxed text-gray-600 2xl:text-xl dark:text-zinc-400"
+                class="mx-auto mt-4 max-w-4xl text-center leading-relaxed text-gray-600 xs:mt-5 xs:text-lg 2xl:text-xl dark:text-zinc-400"
                 aria-describedby="hero-title"
             >
                 Bring your
@@ -561,7 +561,7 @@ class="mt-4 w-full max-w-55"
                 <div class="transition duration-300">
                     <a
                         href="/docs/mobile/1/getting-started/introduction"
-                        class="group dark:bg-haiti relative isolate z-0 flex h-15 items-center justify-between gap-3 overflow-hidden rounded-3xl bg-gray-900 px-5 leading-snug text-white transition duration-200 ease-in-out will-change-transform hover:bg-gray-800 2xl:h-17 2xl:px-7 dark:hover:bg-indigo-900/50"
+                        class="group relative isolate z-0 flex h-15 items-center justify-between gap-3 overflow-hidden rounded-3xl bg-gray-900 px-5 leading-snug text-white transition duration-200 ease-in-out will-change-transform hover:bg-gray-800 2xl:h-17 2xl:px-7 dark:bg-haiti dark:hover:bg-indigo-900/50"
                         aria-label="Get started with NativePHP documentation for mobile apps"
                     >
                         {{-- Label --}}
diff --git a/resources/views/privacy-policy.blade.php b/resources/views/privacy-policy.blade.php
index 79397924..050501ea 100644
--- a/resources/views/privacy-policy.blade.php
+++ b/resources/views/privacy-policy.blade.php
@@ -56,35 +56,7 @@ class="text-sm"
         </header>
 
         {{-- Divider --}}
-        <div
-            x-init="
-                () => {
-                    motion.inView($el, (element) => {
-                        motion.animate(
-                            $el,
-                            {
-                                opacity: [0, 1],
-                                x: [5, 0],
-                            },
-                            {
-                                duration: 0.7,
-                                ease: motion.easeOut,
-                            },
-                        )
-                    })
-                }
-            "
-            class="flex items-center pt-3.5 pb-3 will-change-transform"
-            aria-hidden="true"
-        >
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-            <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-        </div>
+        <x-divider />
 
         {{-- Content --}}
         <article
@@ -105,7 +77,7 @@ class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
                     })
                 }
             "
-            class="prose dark:prose-headings:text-white mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400"
+            class="prose mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400 dark:prose-headings:text-white"
             aria-labelledby="article-title"
         >
             <p>
diff --git a/resources/views/sponsoring.blade.php b/resources/views/sponsoring.blade.php
index 9e379fa4..7abad8e5 100644
--- a/resources/views/sponsoring.blade.php
+++ b/resources/views/sponsoring.blade.php
@@ -7,7 +7,7 @@ class="mx-auto mt-10 w-full max-w-3xl px-5 md:mt-14"
         <header class="relative grid place-items-center text-center">
             {{-- Blurred circle - Decorative --}}
             <div
-                class="absolute right-1/2 top-0 -z-30 h-60 w-60 translate-x-1/2 rounded-full blur-[150px] md:w-80 dark:bg-slate-500/50"
+                class="absolute top-0 right-1/2 -z-30 h-60 w-60 translate-x-1/2 rounded-full blur-[150px] md:w-80 dark:bg-slate-500/50"
                 aria-hidden="true"
             ></div>
 
@@ -38,35 +38,7 @@ class="mt-8 text-3xl font-extrabold will-change-transform sm:text-4xl"
         </header>
 
         {{-- Divider --}}
-        <div
-            x-init="
-                () => {
-                    motion.inView($el, (element) => {
-                        motion.animate(
-                            $el,
-                            {
-                                opacity: [0, 1],
-                                x: [5, 0],
-                            },
-                            {
-                                duration: 0.7,
-                                ease: motion.easeOut,
-                            },
-                        )
-                    })
-                }
-            "
-            class="flex items-center pb-3 pt-3.5 will-change-transform"
-            aria-hidden="true"
-        >
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-            <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-        </div>
+        <x-divider />
 
         {{-- Content --}}
         <article
@@ -91,53 +63,81 @@ class="prose mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-
             aria-labelledby="article-title"
         >
             <p>
-                NativePHP is an organization backed by a team of dedicated employees, maintainers, and contributors who commit their time to
-                ensure its continued development and improvement. Currently, we operate two major projects: NativePHP for Mobile and
-                NativePHP for Desktop. Together, we can continue to grow NativePHP and ensure it remains a valuable tool for the community.
+                NativePHP is an organization backed by a team of dedicated
+                employees, maintainers, and contributors who commit their time
+                to ensure its continued development and improvement. Currently,
+                we operate two major projects: NativePHP for Mobile and
+                NativePHP for Desktop. Together, we can continue to grow
+                NativePHP and ensure it remains a valuable tool for the
+                community.
             </p>
 
             <h2>NativePHP for Mobile</h2>
 
             <p>
-                If you're interested in NativePHP for Mobile, you can <a href="/mobile">purchase a license</a>, which is the best way you can
-                support both projects of the NativePHP organization. These funds are used to cover the costs of development, infrastructure,
-                and community initiatives for both projects.
+                If you're interested in NativePHP for Mobile, you can
+                <a href="/mobile">purchase a license</a>
+                , which is the best way you can support both projects of the
+                NativePHP organization. These funds are used to cover the costs
+                of development, infrastructure, and community initiatives for
+                both projects.
             </p>
 
             <h2>NativePHP for Desktop</h2>
 
             <p>
-                NativePHP for Desktop is a free, open source project available under an MIT license. We encourage and appreciate any
-                contributions to the project, whether it's through code, documentation, spreading the word, or a financial sponsorship.
-                We provide the following ways of making an easy financial contribution:
+                NativePHP for Desktop is a free, open source project available
+                under an MIT license. We encourage and appreciate any
+                contributions to the project, whether it's through code,
+                documentation, spreading the word, or a financial sponsorship.
+                We provide the following ways of making an easy financial
+                contribution:
             </p>
 
             <ul>
-                <li><a href="https://opencollective.com/nativephp">OpenCollective</a></li>
+                <li>
+                    <a href="https://opencollective.com/nativephp">
+                        OpenCollective
+                    </a>
+                </li>
             </ul>
 
             <p>
-                All contributions are welcome, at any amount, as a one-off payment or on a recurring schedule. These funds are used to
+                All contributions are welcome, at any amount, as a one-off
+                payment or on a recurring schedule. These funds are used to
                 support the maintainers of the Desktop project.
             </p>
 
             <p>
-                All monthly sponsors above $10/month will be bestowed the <b>Sponsor</b> role on the NativePHP
-                <a href="https://discord.gg/X62tWNStZK">Discord</a>, granting access to private channels, early access to new releases, and
-                discounts on future premium services.
+                All monthly sponsors above $10/month will be bestowed the
+                <b>Sponsor</b>
+                role on the NativePHP
+                <a href="https://discord.gg/X62tWNStZK">Discord</a>
+                , granting access to private channels, early access to new
+                releases, and discounts on future premium services.
             </p>
 
             <h2>Corporate Partners</h2>
 
             <p>
-                If your organization is using NativePHP, we strongly encourage you to consider a Corporate Sponsorship. This level of
-                support will provide your team with the added benefits of increased levels of support, hands-on help directly from the
-                maintainers of NativePHP and promotion of your brand as a supporter of cutting-edge open source work.
+                If your organization is using NativePHP, we strongly encourage
+                you to consider a Corporate Sponsorship. This level of support
+                will provide your team with the added benefits of increased
+                levels of support, hands-on help directly from the maintainers
+                of NativePHP and promotion of your brand as a supporter of
+                cutting-edge open source work.
             </p>
 
             <p>
-                For more details, please view our <a href="/partners">partners page</a> or email us at
-                <a href="mailto:partners@nativephp.com?subject=Corporate%20Sponsorship">partners@nativephp.com</a>.
+                For more details, please view our
+                <a href="/partners">partners page</a>
+                or email us at
+                <a
+                    href="mailto:partners@nativephp.com?subject=Corporate%20Sponsorship"
+                >
+                    partners@nativephp.com
+                </a>
+                .
             </p>
         </article>
     </section>
diff --git a/resources/views/terms-of-service.blade.php b/resources/views/terms-of-service.blade.php
index e7cad05e..0ad5b8a1 100644
--- a/resources/views/terms-of-service.blade.php
+++ b/resources/views/terms-of-service.blade.php
@@ -56,35 +56,7 @@ class="text-sm"
         </header>
 
         {{-- Divider --}}
-        <div
-            x-init="
-                () => {
-                    motion.inView($el, (element) => {
-                        motion.animate(
-                            $el,
-                            {
-                                opacity: [0, 1],
-                                x: [5, 0],
-                            },
-                            {
-                                duration: 0.7,
-                                ease: motion.easeOut,
-                            },
-                        )
-                    })
-                }
-            "
-            class="flex items-center pt-3.5 pb-3 will-change-transform"
-            aria-hidden="true"
-        >
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-            <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-        </div>
+        <x-divider />
 
         {{-- Content --}}
         <article
@@ -105,7 +77,7 @@ class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
                     })
                 }
             "
-            class="prose dark:prose-headings:text-white mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400"
+            class="prose mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400 dark:prose-headings:text-white"
             aria-labelledby="article-title"
         >
             <p>