Enhance styles for footer and episode cards, add transition effects, and adjust header layout for improved responsiveness

components/header.tsx

@@ -10,7 +10,8 @@ import ToggleLanguage from "./toggle-language";
 export default function Header() {
   return (
     <div className="mx-auto backdrop-blur-xs left-1/2 -translate-x-1/2 fixed w-full z-10">
-      <header className="px-4 md:px-6 flex p-3 md:p-4 w-full shrink-0 items-center justify-between">
+      <header className="px-4 md:px-6 flex p-3 md:p-4 w-full shrink-0 items-center justify-between relative">
+        {/* Left Section */}
         <div className="flex gap-2">
           <Button variant="ghost" className="px-2 py-1">
             <Menu />
@@ -23,12 +24,17 @@ export default function Header() {
           <ModeToggle />
           <ToggleLanguage />
         </div>
-        <Link href={"/"} className="hidden sm:flex items-center">
+        <Link
+          href={"/"}
+          className="absolute left-1/2 -translate-x-1/2 hidden sm:flex items-center"
+        >
           <Image src={"/logo.png"} width={30} height={30} alt="logo" />
           <h1 className="font-bold tracking-tighter leading-normal pe-2 text-xl text-parch">
             پارچ کست
           </h1>
         </Link>
+
+        {/* Right Section */}
         <div className="flex gap-2">
           <Button variant="outline" className="px-2 py-1">
             ورود