animations

src/app/download/page.tsx

@@ -10,13 +10,13 @@ export default function Download() {
       <div className="flex flex-col bg-[url('/background.png')] bg-center bg-no-repeat h-52">
         <Header />
 
-        <h1 className="text-5xl font-black m-auto w-max font-['Panton']">
+        <h1 className="text-5xl font-black m-auto w-max font-['Panton'] fade-in">
           DOWNLOAD
         </h1>
       </div>
 
-      <div className="w-full h-full flex flex-col items-center pt-6">
-        Release downloads aren't available yet :(
+      <div className="w-full h-full flex flex-col items-center pt-6 fade-in-up">
+        The launcher isn't available yet :(
         <Link
           href="https://github.com/saturnclientmc/saturnclient/releases/"
           target="_blank"

src/app/globals.css

@@ -84,3 +84,46 @@ body {
 ::selection {
   background: #e2bf7d;
 }
+
+@keyframes fadeInUp {
+  0% {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in-up {
+  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes fadeInDown {
+  0% {
+    opacity: 0;
+    transform: translateY(-40px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in-down {
+  animation: fadeInDown 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}

src/app/news/page.tsx

@@ -1,29 +1,8 @@
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 import listNews from "@/lib/news";
-import Image from "next/image";
 import Link from "next/link";
 
-// const newsList = [
-//   {
-//     authors: [],
-//     title: "Hello World",
-//     description: "lorem ipsum ipsum lorem",
-//     image: "/background.png",
-//     date: "2025-04-16",
-//     id: "",
-//   },
-// ];
-
-// const newsList = Array(3 * 6).fill({
-//   authors: [],
-//   title: "Hello World",
-//   description: "lorem ipsum ipsum lorem",
-//   image: "/background.png",
-//   date: "2025-04-16",
-//   id: "",
-// });
-
 const newsList = listNews();
 
 export default function News() {
@@ -32,7 +11,7 @@ export default function News() {
       <div className="flex flex-col bg-[url('/background.png')] bg-center bg-no-repeat h-52">
         <Header />
 
-        <h1 className="text-5xl font-black m-auto w-max font-['Panton']">
+        <h1 className="text-5xl font-black m-auto w-max font-['Panton'] fade-in">
           CLIENT NEWS
         </h1>
       </div>
@@ -41,7 +20,7 @@ export default function News() {
         TODO: implement search and filtering
       </div>
 
-      <div className="py-8 px-5 w-full grid grid-rows-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
+      <div className="py-8 px-5 w-full grid grid-rows-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 fade-in-up">
         {newsList.map((news, i) => (
           <Link
             href={`/news/${news.id}`}

src/app/page.tsx

@@ -22,16 +22,24 @@ export default function Home() {
       <Header />
 
       <div className="flex-1 flex flex-col text-2xl mt-40 items-center">
-        <Image src="/logo.png" alt="Logo" width={240} height={240} />
-        <h1 className="text-5xl font-black font-['Panton']">Saturn Client</h1>
-        <p className="text-xl text-white mix-blend-difference font-['Panton']">
+        <Image
+          src="/logo.png"
+          alt="Logo"
+          width={240}
+          height={240}
+          className="fade-in-up"
+        />
+        <h1 className="text-5xl font-black font-['Panton'] fade-in-up">
+          Saturn Client
+        </h1>
+        <p className="text-xl text-white mix-blend-difference font-['Panton'] fade-in-up">
           The best open source Minecraft client
         </p>
 
         {/* Download button */}
         <Link
           href="/download"
-          className="hover:cursor-pointer mt-10 relative bg-red border text-white py-4 px-6 rounded-xl backdrop-blur-xs w-max group transition-colors duration-300 hover:text-[#e2bf7d] animate-fadeIn"
+          className="hover:cursor-pointer mt-10 relative bg-red border text-white py-4 px-6 rounded-xl backdrop-blur-xs w-max group transition-colors duration-300 hover:text-[#e2bf7d] fade-in"
         >
           Download
         </Link>

src/components/Header.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 
 export default function Header() {
   return (
-    <header className="text-white bg-white/5 backdrop-blur-xl py-4 text-center w-max mx-auto px-6 rounded-2xl mt-2">
+    <header className="text-white bg-white/5 backdrop-blur-xl py-4 text-center w-max mx-auto px-6 rounded-2xl mt-2 fade-in-down">
       <div className="flex flex-row w-max mx-auto gap-4">
         <Link href="/">
           <House className="transition-colors duration-300 hover:text-[#e2bf7d] animate-fadeIn" />