Refactor layout and component structures for improved responsiveness; adjust padding and container classes across multiple components

app/layout.tsx

@@ -41,7 +41,7 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <Header />
-          {children}
+          <div className="min-h-screen">{children}</div>
           <FooterSection />
         </ThemeProvider>
       </body>

app/page.tsx

@@ -5,7 +5,7 @@ import { SubscribeSection } from "@/components/subscribe-section";
 
 export default function Home() {
   return (
-    <main className="min-h-screen">
+    <main>
       <PodcastHero />
       <EpisodeCards section="main" />
       <AboutPodcast />

app/podcast/[id]/page.tsx

@@ -15,9 +15,9 @@ import Link from "next/link";
 
 export default function Podcast() {
   return (
-    <main className="container min-h-screen">
+    <main>
-      <section className="relative pt-20 pb-16 md:pt-36 md:pb-24">
+      <section className="relative pt-24 pb-16 lg:pt-36 md:pb-24">
-        <div className="container px-4 md:px-6">
+        <div className="container">
           <div className="grid gap-6 grid-cols-3 lg:gap-12 mb-16">
             <div className="aspect-square overflow-hidden rounded-xl bg-muted">
               <Image

components/about-podcast.tsx

@@ -3,7 +3,7 @@ import Image from "next/image";
 export function AboutPodcast() {
   return (
     <section className="backdrop-blur-xs py-12 md:py-16 lg:py-20">
-      <div className="container px-4 md:px-6">
+      <div className="container">
         <div className="grid gap-6 lg:grid-cols-[400px_1fr] lg:gap-12 xl:grid-cols-[450px_1fr]">
           <div className="space-y-4 ml-auto">
             <Image

components/episode-cards.tsx

@@ -46,7 +46,7 @@ export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
     <section
       className={`${section === "main" ? "py-12 md:py-16 lg:py-20" : ""}`}
     >
-      <div className={`${section === "main" ? "container px-4 md:px-6" : ""}`}>
+      <div className={`${section === "main" ? "container" : ""}`}>
         <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
           <div>
             <h2
@@ -67,7 +67,7 @@ export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
           </Button>
         </div>
         <div
-          className={`mt-8 grid gap-6 sm:grid-cols-2 ${
+          className={`mt-8 grid md:gap-6 gap-4 grid-cols-2 ${
             section === "main" ? "lg:grid-cols-4" : "lg:grid-cols-3"
           }`}
         >

components/podcast-hero.tsx

@@ -4,8 +4,8 @@ import Image from "next/image";
 
 export function PodcastHero() {
   return (
-    <section className="relative pt-20 pb-16 md:pt-36 md:pb-24">
+    <section className="relative pt-24 pb-16 lg:pt-36 md:pb-24">
-      <div className="container px-4 md:px-6">
+      <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">

components/podcast-player.tsx

@@ -12,14 +12,55 @@ import {
   Volume2,
 } from "lucide-react";
 import Image from "next/image";
-import { useState } from "react";
+import { useRef, useState, useEffect } from "react";
 
 export function PodcastPlayer() {
+  const audioRef = useRef<HTMLAudioElement>(null);
   const [isPlaying, setIsPlaying] = useState(false);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [duration, setDuration] = useState(0); // Add duration state
+
+  // Update current time and duration as the audio plays
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) return;
+
+    const updateTime = () => setCurrentTime(audio.currentTime);
+    const updateDuration = () => setDuration(audio.duration);
+
+    audio.addEventListener("timeupdate", updateTime);
+    audio.addEventListener("loadedmetadata", updateDuration);
+
+    return () => {
+      audio.removeEventListener("timeupdate", updateTime);
+      audio.removeEventListener("loadedmetadata", updateDuration);
+    };
+  }, []);
+
+  const handlePlaying = () => {
+    if (isPlaying) {
+      audioRef.current?.pause();
+    } else {
+      audioRef.current?.play();
+    }
+    setIsPlaying(!isPlaying);
+  };
+
+  const formatTime = (time: number) => {
+    if (isNaN(time)) return "0:00"; // Handle NaN case
+    const minutes = Math.floor(time / 60);
+    const seconds = Math.floor(time % 60);
+    return `${minutes}:${seconds.toString().padStart(2, "0")}`;
+  };
 
   return (
     <div className="fixed bottom-0 left-0 right-0 border-t bg-background p-4">
-      <div className="mx-auto flex max-w-7xl items-center justify-between">
+      <audio
+        src="http://webaudioapi.com/samples/audio-tag/chrono.mp3"
+        className="hidden"
+        ref={audioRef}
+      />
+      <div className="mx-auto flex container items-center justify-between">
         <div className="flex items-center gap-4">
           <Image
             src="https://picsum.photos/48"
@@ -36,18 +77,18 @@ export function PodcastPlayer() {
         <div className="flex flex-col items-center gap-1 md:w-1/2">
           <div className="flex items-center gap-2">
             <Button variant="ghost" size="icon" className="h-8 w-8">
-              <SkipBack className="h-4 w-4" />
+              <SkipForward className="h-4 w-4" />
-              <span className="sr-only">Previous</span>
+              <span className="sr-only">Next</span>
             </Button>
             <Button variant="ghost" size="icon" className="h-8 w-8">
-              <Rewind className="h-4 w-4" />
+              <FastForward className="h-4 w-4" />
-              <span className="sr-only">Rewind</span>
+              <span className="sr-only">Fast Forward</span>
             </Button>
             <Button
               variant="outline"
               size="icon"
               className="h-10 w-10 rounded-full"
-              onClick={() => setIsPlaying(!isPlaying)}
+              onClick={handlePlaying}
             >
               {isPlaying ? (
                 <Pause className="h-5 w-5" />
@@ -57,21 +98,32 @@ export function PodcastPlayer() {
               <span className="sr-only">{isPlaying ? "Pause" : "Play"}</span>
             </Button>
             <Button variant="ghost" size="icon" className="h-8 w-8">
-              <FastForward className="h-4 w-4" />
+              <Rewind className="h-4 w-4" />
-              <span className="sr-only">Fast Forward</span>
+              <span className="sr-only">Rewind</span>
             </Button>
             <Button variant="ghost" size="icon" className="h-8 w-8">
-              <SkipForward className="h-4 w-4" />
+              <SkipBack className="h-4 w-4" />
-              <span className="sr-only">Next</span>
+              <span className="sr-only">Previous</span>
             </Button>
           </div>
           <div className="flex w-full items-center gap-2">
             <div className="text-xs tabular-nums text-muted-foreground">
-              62:00
+              {formatTime(duration)} {/* Use duration state */}
             </div>
-            <Slider defaultValue={[33]} max={100} step={1} className="w-full" />
+            <Slider
+              value={[currentTime]}
+              max={duration}
+              step={1}
+              className="w-full"
+              onValueChange={(value) => {
+                if (audioRef.current) {
+                  audioRef.current.currentTime = value[0];
+                  setCurrentTime(value[0]);
+                }
+              }}
+            />
             <div className="text-xs tabular-nums text-muted-foreground">
-              12:34
+              {formatTime(currentTime)}
             </div>
           </div>
         </div>

components/subscribe-section.tsx

@@ -5,8 +5,8 @@ import { Headphones, Mail } from "lucide-react";
 export function SubscribeSection() {
   return (
     <section className="py-12 md:py-16 lg:py-20 border-b">
-      <div className="container px-4 md:px-6">
+      <div className="container">
-        <div className="mx-auto max-w-2xl text-center">
+        <div className="mx-auto   text-center">
           <div className="flex justify-center">
             <div className="rounded-full bg-primary/10 p-3">
               <Headphones className="h-6 w-6 text-primary" />
@@ -19,7 +19,7 @@ export function SubscribeSection() {
             در خبرنامه ما مشترک شوید و از انتشار قسمت های جدید مطلع شوید منتشر
             شد.
           </p>
-          <div className="mt-6 flex flex-col gap-2 sm:flex-row">
+          <div className="mt-6 flex gap-2 flex-row">
             <Input
               placeholder="ایمیل خود را وارد کنید"
               type="email"