Implement sidebar component with context management for state handling; add new UI elements including tooltip, skeleton, and sheet components; update package dependencies and enhance global styles for improved responsiveness.

components/podcast-hero.tsx

@@ -35,7 +35,8 @@ export function PodcastHero() {
             <div className="flex flex-col gap-2 min-[400px]:flex-row">
               <Button
                 size="lg"
-                className="gap-2 border-parch text-blue-parch bg-white"
+                className="gap-2 dark:hover:bg-gray-200 dark:bg-foreground text-blue-parch cursor-pointer transition"
+                variant={"outline"}
               >
                 <span>اکنون گوش کن</span>
                 <Play className="h-4 w-4" />