From daac21acb5adbbb4cad1f60f25fa714782e0fa77 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Thu, 17 Apr 2025 19:04:01 +0200
Subject: [PATCH] animations

---
 src/app/download/page.tsx |  6 +++---
 src/app/globals.css       | 43 +++++++++++++++++++++++++++++++++++++++
 src/app/news/page.tsx     | 25 ++---------------------
 src/app/page.tsx          | 16 +++++++++++----
 src/components/Header.tsx |  2 +-
 5 files changed, 61 insertions(+), 31 deletions(-)

diff --git a/src/app/download/page.tsx b/src/app/download/page.tsx
index a1b159f..d10cf9c 100644
--- a/src/app/download/page.tsx
+++ b/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"
diff --git a/src/app/globals.css b/src/app/globals.css
index e7695fe..f30df8d 100644
--- a/src/app/globals.css
+++ b/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;
+}
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
index 64c3944..748bc46 100644
--- a/src/app/news/page.tsx
+++ b/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}`}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 6f94ef1..b99fdf9 100644
--- a/src/app/page.tsx
+++ b/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>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 3e4d3d8..17acdc4 100644
--- a/src/components/Header.tsx
+++ b/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" />