Refactor episode cards, footer, podcast hero, player, and subscribe section for improved responsiveness; adjust padding, text sizes, and layout classes

components/episode-cards.tsx

@@ -44,37 +44,37 @@ export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
 
   return (
     <section
-      className={`${section === "main" ? "py-12 md:py-16 lg:py-20" : ""}`}
+      className={`${section === "main" ? "py-8 md:py-16 lg:py-20" : ""}`}
     >
       <div className={`${section === "main" ? "container" : ""}`}>
-        <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
+        <div className="flex items-start justify-between gap-4 flex-row md:items-center">
           <div>
             <h2
               className={`${
                 section === "main"
-                  ? "text-4xl font-bold tracking-tight text-parch leading-normal"
+                  ? "lg:text-4xl md:text-3xl text-2xl font-bold tracking-tight text-parch leading-normal"
                   : "text-2xl font-bold"
               }`}
             >
               آخرین قسمت ها
             </h2>
-            <p className="text-muted-foreground">
+            <p className="text-muted-foreground text-sm md:text-base">
               از جدیدترین مکالمات ما مطلع شوید
             </p>
           </div>
-          <Button variant="link" className="gap-1 pe-0">
+          <Button variant="link" className="gap-1 pe-0 text-xs md:text-sm">
             مشاهده همه قسمت ها
           </Button>
         </div>
         <div
-          className={`mt-8 grid md:gap-6 gap-4 grid-cols-2 ${
+          className={`mt-8 grid lg:gap-6 md:gap-4 gap-2 grid-cols-2 ${
             section === "main" ? "lg:grid-cols-4" : "lg:grid-cols-3"
           }`}
         >
           {episodes.map((episode) => (
             <Card
               key={episode.id}
-              className="flex flex-col overflow-hidden pt-0 border-parch cursor-pointer"
+              className="flex flex-col overflow-hidden pt-0 border-parch cursor-pointer md:pb-6 pb-3 md:gap-6 gap-3"
             >
               <div className="aspect-video w-full overflow-hidden">
                 <Image
@@ -85,23 +85,31 @@ export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
                   className="h-full w-full object-cover transition-all hover:scale-105"
                 />
               </div>
-              <CardHeader>
+              <CardHeader className="md:px-6 px-2">
-                <CardTitle>{episode.title}</CardTitle>
+                <CardTitle className="text-sm md:text-base">
-                <CardDescription>{episode.date}</CardDescription>
+                  {episode.title}
+                </CardTitle>
+                <CardDescription className="text-xs md:text-sm">
+                  {episode.date}
+                </CardDescription>
               </CardHeader>
-              <CardContent>
+              <CardContent className="md:px-6 px-2 text-xs md:text-sm">
                 <p className="line-clamp-3 text-sm text-muted-foreground">
                   {episode.description}
                 </p>
               </CardContent>
-              <CardFooter className="flex items-center justify-between">
+              <CardFooter className="flex items-center justify-between md:px-6 px-2">
-                <div className="flex items-center text-sm text-muted-foreground">
+                <div className="flex items-center text-muted-foreground text-xs md:text-sm">
-                  <Clock className="ml-1 h-4 w-4" />
+                  <Clock className="ml-1 md:h-4 md:w-4 h-3.5 w-3.5" />
                   {episode.duration}
                 </div>
-                <Button size="sm" variant="ghost" className="gap-1">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  className="gap-1 text-xs md:text-sm"
+                >
                   پخش
-                  <Play className="h-4 w-4" />
+                  <Play className="md:h-4 md:w-4 h-3.5 w-3.5" />
                 </Button>
               </CardFooter>
             </Card>

components/footer-section.tsx

@@ -42,7 +42,7 @@ export default function FooterSection() {
                 پارچ گیمینگ
               </a>
             </FooterColumn>
-            <FooterColumn>
+            <FooterColumn className="col-span-2 sm:col-span-3 md:col-span-1">
               <h3 className="text-md pt-1 font-semibold">ما را دنبال کنید</h3>
               <span className="text-sm text-muted-foreground text-justify">
                 مطالب بیشتر و اطلاعات گوناگونی در شبکه‌های اجتماعی رخ منتشر

components/podcast-hero.tsx

@@ -4,17 +4,17 @@ import Image from "next/image";
 
 export function PodcastHero() {
   return (
-    <section className="relative pt-24 pb-16 lg:pt-36 md:pb-24">
+    <section className="relative pt-20 pb-4 md:pt-24 md:pb-16 lg:pt-36 lg::pb-24">
       <div className="container">
         <div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_450px]">
           <div className="flex flex-col justify-center space-y-4">
             <div className="space-y-2">
-              <div className="flex items-center -ms-2">
+              <div className="flex items-center lg:-ms-2 mb-3 -ms-1">
                 <Image
                   src={"/logo.png"}
                   width={55}
                   height={55}
-                  className="mt-2"
+                  className="md:w-auto md:h-auto w-9 h-9 lg:mt-2"
                   alt="logo"
                 />
                 <h1 className="text-parch text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl leading-normal pe-2">

components/podcast-player.tsx

@@ -24,6 +24,7 @@ export function PodcastPlayer() {
   useEffect(() => {
     const audio = audioRef.current;
     if (!audio) return;
+    audioRef.current?.load();
 
     const updateTime = () => setCurrentTime(audio.currentTime);
     const updateDuration = () => setDuration(audio.duration);
@@ -114,7 +115,7 @@ export function PodcastPlayer() {
               value={[currentTime]}
               max={duration}
               step={1}
-              className="w-full"
+              className="w-full mx-2"
               onValueChange={(value) => {
                 if (audioRef.current) {
                   audioRef.current.currentTime = value[0];

components/subscribe-section.tsx

@@ -6,7 +6,7 @@ export function SubscribeSection() {
   return (
     <section className="py-12 md:py-16 lg:py-20 border-b">
       <div className="container">
-        <div className="mx-auto   text-center">
+        <div className="mx-auto max-w-2xl text-center">
           <div className="flex justify-center">
             <div className="rounded-full bg-primary/10 p-3">
               <Headphones className="h-6 w-6 text-primary" />
@@ -27,7 +27,7 @@ export function SubscribeSection() {
             />
             <Button className="bg-parch">
               مشترک شوید
-              <Mail className="mr-2 h-4 w-4" />
+              <Mail className="md:mr-2 h-4 w-4" />
             </Button>
           </div>
         </div>