Add fade animation to site header

Author: pdelfan

src/app/(auth)/login/layout.tsx

@@ -13,7 +13,7 @@ export default async function InventoryLayout({
 }) {
   return (
     <>
-      <main className="relative z-10 min-h-[100svh] flex items-center justify-center animate-fade animate-delay-300 animate-duration-[600ms]">
+      <main className="relative z-10 min-h-[100svh] flex items-center justify-center animate-fade animate-delay-500 animate-duration-[600ms]">
         {children}
       </main>
       <Image

src/app/(site)/about/page.tsx

@@ -5,7 +5,7 @@ import Link from "next/link";
 export default function Page() {
   return (
     <main className="mx-auto mt-0 p-5 md:mt-16">
-      <header className="mx-auto flex max-w-xl items-center justify-between">
+      <header className="mx-auto flex max-w-xl items-center justify-between animate-fade">
         <div className="flex items-center gap-3">
           <Image
             src="/ouranos.svg"

src/app/page.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 export default function Home() {
   return (
     <main className="mx-auto mt-0 p-5 md:mt-16">
-      <header className="mx-auto flex max-w-xl items-center justify-between">
+      <header className="mx-auto flex max-w-xl items-center justify-between animate-fade">
         <div className="flex items-center gap-3">
           <Image
             src="/ouranos.svg"

src/components/forms/loginForm/LoginForm.tsx

@@ -57,7 +57,7 @@ export default function LoginForm() {
 
   if (isRedirecting) {
     return (
-      <section className="bg-skin-base border border-skin-base shadow-2xl shadow-primary-light/30 max-w-xs rounded-2xl p-5">
+      <section className="bg-skin-base border border-skin-base/30 shadow-2xl shadow-primary-light/30 max-w-xs rounded-2xl p-5">
         <Image
           src="/logo.svg"
           alt="Ouranos logo"
@@ -79,7 +79,7 @@ export default function LoginForm() {
   }
 
   return (
-    <section className="bg-skin-base border border-skin-base max-w-xs rounded-2xl p-5 shadow-2xl shadow-primary-light/30">
+    <section className="bg-skin-base border border-skin-base/30 max-w-xs rounded-2xl p-5 shadow-2xl shadow-primary-light/30">
       <Image
         src="/logo.svg"
         alt="Ouranos logo"