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

app/globals.css

@@ -165,6 +165,7 @@ body {
 }
 
 .border-parch:hover {
+  transition: 0.5s;
   background: linear-gradient(var(--background), var(--background)) padding-box,
     linear-gradient(to right, #21c796, #0385ce, #0d40bf) border-box;
   border: 1px solid transparent;

components/episode-cards.tsx

@@ -74,7 +74,7 @@ export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
           {episodes.map((episode) => (
             <Card
               key={episode.id}
-              className="flex flex-col overflow-hidden pt-0 border-parch"
+              className="flex flex-col overflow-hidden pt-0 border-parch cursor-pointer"
             >
               <div className="aspect-video w-full overflow-hidden">
                 <Image

components/footer-section.tsx

@@ -51,25 +51,25 @@ export default function FooterSection() {
               <div className="flex gap-4">
                 <Link
                   href={"/"}
-                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition"
+                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 border-parch transition"
                 >
                   <Github size={16} />
                 </Link>
                 <Link
                   href={"/"}
-                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition"
+                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 border-parch transition"
                 >
                   <Twitter size={16} />
                 </Link>
                 <Link
                   href={"/"}
-                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition"
+                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 border-parch transition"
                 >
                   <Instagram size={16} />
                 </Link>
                 <Link
                   href={"/"}
-                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 hover:bg-blue-900 transition"
+                  className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700 border-parch transition"
                 >
                   <Youtube size={16} />
                 </Link>

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">
             ورود