Update dependencies, refactor footer and header components, and enhance podcast page layout

app/layout.tsx

@@ -1,5 +1,5 @@
+import FooterSection from "@/components/footer-section";
 import Header from "@/components/header";
-import FooterSection from "@/components/sections/footer/default";
 import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";

app/page.tsx

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

app/podcast/[id]/page.tsx

@@ -1,3 +1,4 @@
+import { EpisodeCards } from "@/components/episode-cards";
 import { PodcastPlayer } from "@/components/podcast-player";
 import {
   Breadcrumb,
@@ -8,8 +9,9 @@ import {
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { Separator } from "@/components/ui/separator";
-import { Calendar, Clock, User } from "lucide-react";
+import { Calendar, CircleDot, Clock, User } from "lucide-react";
 import Image from "next/image";
+import Link from "next/link";
 
 export default function Podcast() {
   return (
@@ -44,8 +46,8 @@ export default function Podcast() {
                     قسمت اول: داستان پارچ
                   </h1>{" "}
                   <div className="flex gap-5">
-                    <div className="rounded-xl p-6 bg-muted/100">
+                    <div className="rounded-xl p-5 bg-muted/100">
-                      <p className="text-muted-foreground md:text-lg">
+                      <p className="text-muted-foreground md:text-lg text-justify">
                         پادکست “پارچ کست” یک برنامه صوتی جذاب و متنوع است که به
                         بررسی موضوعات مختلف فرهنگی، اجتماعی و علمی می‌پردازد.
                         این پادکست با میزبانی متخصصان و مهمانان مختلف، تلاش
@@ -57,15 +59,15 @@ export default function Podcast() {
                       </p>
                     </div>
                     <div className="flex flex-col w-full gap-3">
-                      <div className="flex items-center gap-1 text-sm">
+                      <div className="flex items-center gap-1 text-sm text-slate-300">
                         <Calendar size={18} className="text-gray-400" /> تاریخ
                         انتشار: 11 اسفند 1403
                       </div>
-                      <div className="flex items-center gap-1 text-sm">
+                      <div className="flex items-center gap-1 text-sm text-slate-300">
                         <Clock size={18} className="text-gray-400" /> مدت زمان:
                         64 دقیقه
                       </div>
-                      <div className="flex items-center gap-1 text-sm">
+                      <div className="flex items-center gap-1 text-sm text-slate-300">
                         <User size={18} className="text-gray-400" /> گویندگان:
                         Erfoux
                       </div>
@@ -81,7 +83,7 @@ export default function Podcast() {
                     <svg
                       stroke="currentColor"
                       fill="currentColor"
-                      stroke-width="0"
+                      strokeWidth="0"
                       viewBox="0 0 496 512"
                       height="20px"
                       width="20px"
@@ -94,7 +96,7 @@ export default function Podcast() {
                     <svg
                       stroke="currentColor"
                       fill="currentColor"
-                      stroke-width="0"
+                      strokeWidth="0"
                       viewBox="0 0 448 512"
                       height="20px"
                       width="20px"
@@ -109,23 +111,72 @@ export default function Podcast() {
           </div>
           <div className="grid gap-6 grid-cols-12">
             <div className="col-span-9">
-              <div className=" flex gap-4 flex-col">
+              <div className="flex flex-col gap-10">
-                <h3 className="text-2xl font-bold">متن کامل اپیزود</h3>
+                <div className="flex gap-4 flex-col">
-                <div className="rounded-xl p-6 bg-muted/100">
+                  <h2 className="text-2xl font-bold">متن کامل اپیزود</h2>
-                  <p className="text-muted-foreground md:text-lg">
+                  <div className="rounded-xl p-5 bg-muted/100">
-                    پادکست “پارچ کست” یک برنامه صوتی جذاب و متنوع است که به
+                    <p className="text-muted-foreground md:text-lg text-justify">
-                    بررسی موضوعات مختلف فرهنگی، اجتماعی و علمی می‌پردازد. این
+                      پادکست “پارچ کست” یک برنامه صوتی جذاب و متنوع است که به
-                    پادکست با میزبانی متخصصان و مهمانان مختلف، تلاش می‌کند تا با
+                      بررسی موضوعات مختلف فرهنگی، اجتماعی و علمی می‌پردازد. این
-                    ارائه بحث‌ها و نظرات عمیق، شنوندگان را به تفکر وادارد و
+                      پادکست با میزبانی متخصصان و مهمانان مختلف، تلاش می‌کند تا
-                    آگاهی آن‌ها را در زمینه‌های مختلف افزایش دهد. هر قسمت از
+                      با ارائه بحث‌ها و نظرات عمیق، شنوندگان را به تفکر وادارد و
-                    “پارچ کست” با رویکردی خلاقانه و engaging تولید می‌شود و هدف
+                      آگاهی آن‌ها را در زمینه‌های مختلف افزایش دهد. هر قسمت از
-                    آن ایجاد فضایی است که در آن گوش دادن به اطلاعات جدید همزمان
+                      “پارچ کست” با رویکردی خلاقانه و engaging تولید می‌شود و
-                    با لذت و سرگرمی همراه باشد.
+                      هدف آن ایجاد فضایی است که در آن گوش دادن به اطلاعات جدید
-                  </p>
+                      همزمان با لذت و سرگرمی همراه باشد.
+                    </p>
+                  </div>
+                </div>
+                <EpisodeCards section={"podcast"} />
+              </div>
+            </div>
+            <div className="col-span-3">
+              <div className="flex flex-col gap-3">
+                <div className="flex flex-col gap-3">
+                  <h4 className="text-lg font-bold mt-1">
+                    پرطرفدارترین اپیزودها
+                  </h4>
+                  <ul className="flex flex-col gap-1">
+                    <li>
+                      <Link
+                        href={"#"}
+                        className="flex items-center gap-1 text-sm text-slate-300"
+                      >
+                        <CircleDot size={10} />
+                        <span>داستان پارچ </span>
+                      </Link>
+                    </li>
+                    <li>
+                      <Link
+                        href={"#"}
+                        className="flex items-center gap-1 text-sm text-slate-300"
+                      >
+                        <CircleDot size={10} />
+                        <span>داستان پارچ </span>
+                      </Link>
+                    </li>
+                    <li>
+                      <Link
+                        href={"#"}
+                        className="flex items-center gap-1 text-sm text-slate-300"
+                      >
+                        <CircleDot size={10} />
+                        <span>داستان پارچ </span>
+                      </Link>
+                    </li>
+                    <li>
+                      <Link
+                        href={"#"}
+                        className="flex items-center gap-1 text-sm text-slate-300"
+                      >
+                        <CircleDot size={10} />
+                        <span>داستان پارچ پارچ کست </span>
+                      </Link>
+                    </li>
+                  </ul>
                 </div>
               </div>
             </div>
-            <div className="col-span-3 border">sss</div>
           </div>
         </div>
       </section>

components/episode-cards.tsx

@@ -10,7 +10,7 @@ import { Button } from "@/components/ui/button";
 import { Clock, Play } from "lucide-react";
 import Image from "next/image";
 
-export function EpisodeCards() {
+export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
   // Sample episode data
   const episodes = [
     {
@@ -22,15 +22,6 @@ export function EpisodeCards() {
       date: "18 آذر, 1403",
       image: "https://picsum.photos/200",
     },
-    {
-      id: 2,
-      title: "قسمت دوم",
-      description:
-        "هر قسمت از “پارچ کست” با رویکردی خلاقانه و engaging تولید می‌شود و هدف آن ایجاد فضایی است که در آن گوش دادن به اطلاعات جدید همزمان با لذت و سرگرمی همراه باشد.",
-      duration: "43 دقیقه",
-      date: "18 آذر, 1403",
-      image: "https://picsum.photos/200",
-    },
     {
       id: 3,
       title: "قسمت اول",
@@ -52,22 +43,36 @@ export function EpisodeCards() {
   ];
 
   return (
-    <section className="container py-12 md:py-16 lg:py-20">
+    <section
-      <div className="container px-4 md:px-6">
+      className={`${
+        section === "main" ? "container py-12 md:py-16 lg:py-20" : ""
+      }`}
+    >
+      <div className={`${section === "main" ? "container px-4 md:px-6" : ""}`}>
         <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
           <div>
-            <h2 className="text-4xl font-bold tracking-tight text-parch leading-normal">
+            <h2
+              className={`${
+                section === "main"
+                  ? "text-4xl font-bold tracking-tight text-parch leading-normal"
+                  : "text-2xl font-bold"
+              }`}
+            >
               آخرین قسمت ها
             </h2>
             <p className="text-muted-foreground">
               از جدیدترین مکالمات ما مطلع شوید
             </p>
           </div>
-          <Button variant="link" className="gap-1">
+          <Button variant="link" className="gap-1 pe-0">
             مشاهده همه قسمت ها
           </Button>
         </div>
-        <div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
+        <div
+          className={`mt-8 grid gap-6 sm:grid-cols-2 ${
+            section === "main" ? "lg:grid-cols-4" : "lg:grid-cols-3"
+          }`}
+        >
           {episodes.map((episode) => (
             <Card
               key={episode.id}

components/footer-section.tsx

@@ -1,57 +1,76 @@
+import { Github, Instagram, Twitter, Youtube } from "lucide-react";
 import Image from "next/image";
 import { Footer, FooterBottom, FooterColumn, FooterContent } from "./ui/footer";
 
 export default function FooterSection() {
   return (
     <footer className="w-full bg-background px-4">
-      <div className="mx-auto max-w-container">
+      <div className="mx-auto">
         <Footer>
-          <FooterContent>
+          <FooterContent className="container">
             <FooterColumn className="col-span-2 sm:col-span-3 md:col-span-1">
               <div className="flex items-center">
                 <Image src={"/logo.png"} width={30} height={30} alt="logo" />
-                <h3 className="text-xl font-bold">پارچ کست</h3>
+                <h3 className="text-xl font-bold text-parch">پارچ کست</h3>
               </div>
             </FooterColumn>
             <FooterColumn>
-              <h3 className="text-md pt-1 font-semibold">Product</h3>
+              <h3 className="text-md pt-1 font-semibold">همراه با ما</h3>
               <a href="/" className="text-sm text-muted-foreground">
-                Changelog
+                تماس با ما
               </a>
               <a href="/" className="text-sm text-muted-foreground">
-                Documentation
+                درباره ما
+              </a>
+              <a href="/" className="text-sm text-muted-foreground">
+                حمایت از پادکست{" "}
+              </a>
+              <a href="/" className="text-sm text-muted-foreground">
+                همکاری اسپانسر{" "}
               </a>
             </FooterColumn>
             <FooterColumn>
-              <h3 className="text-md pt-1 font-semibold">Company</h3>
+              <h3 className="text-md pt-1 font-semibold">پربازدیدترین‌ها</h3>
               <a href="/" className="text-sm text-muted-foreground">
-                About
+                داستان پارچ
               </a>
               <a href="/" className="text-sm text-muted-foreground">
-                Careers
+                داستان پارچ کست
               </a>
               <a href="/" className="text-sm text-muted-foreground">
-                Blog
+                پارچ گیمینگ
               </a>
             </FooterColumn>
             <FooterColumn>
-              <h3 className="text-md pt-1 font-semibold">شبکه های اجتماعی</h3>
+              <h3 className="text-md pt-1 font-semibold">ما را دنبال کنید</h3>
-              <a href="/" className="text-sm text-muted-foreground">
+              <span className="text-sm text-muted-foreground text-justify">
-                Discord
+                مطالب بیشتر و اطلاعات گوناگونی در شبکه‌های اجتماعی رخ منتشر
-              </a>
+                می‌شود که شما را به دنبال کردن آن‌ها دعوت می‌کنیم.
-              <a href="/" className="text-sm text-muted-foreground">
+              </span>
-                Twitter
+              <div className="flex gap-4">
-              </a>
+                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
-              <a href="/" className="text-sm text-muted-foreground">
+                  <Github size={16} />
-                Github
+                </div>
-              </a>
+                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
+                  <Twitter size={16} />
+                </div>
+                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
+                  <Instagram size={16} />
+                </div>
+                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
+                  <Youtube size={16} />
+                </div>
+              </div>
             </FooterColumn>
           </FooterContent>
           <FooterBottom>
-            <div>© 2025 پارچ کست. تمامی حقوق محفوظ است</div>
+            <div className="container flex justify-between">
-            <div className="flex items-center gap-4">
+              <div>© 2025 پارچ کست. تمامی حقوق محفوظ است</div>
-              <a href="/">سیاست حفظ حریم خصوصی</a>
+
-              <a href="/">شرایط خدمات</a>
+              <div className="flex items-center gap-4">
+                <a href="/">سیاست حفظ حریم خصوصی</a>
+                <a href="/">شرایط خدمات</a>
+              </div>
             </div>
           </FooterBottom>
         </Footer>

components/header.tsx

@@ -3,6 +3,7 @@
 import { Button } from "@/components/ui/button";
 import { Menu, Search } from "lucide-react";
 import Image from "next/image";
+import Link from "next/link";
 
 export default function Header() {
   return (
@@ -18,12 +19,12 @@ export default function Header() {
             جستجو
           </Button>
         </div>
-        <div className="hidden sm:flex items-center">
+        <Link href={"/"} className="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>
-        </div>
+        </Link>
         <div className="flex gap-2">
           <Button variant="outline" className="px-2 py-1">
             ورود

components/sections/footer/default.tsx

@@ -1,85 +0,0 @@
-import { Github, Instagram, Twitter, Youtube } from "lucide-react";
-import Image from "next/image";
-import {
-  Footer,
-  FooterBottom,
-  FooterColumn,
-  FooterContent,
-} from "../../ui/footer";
-
-export default function FooterSection() {
-  return (
-    <footer className="w-full bg-background px-4">
-      <div className="mx-auto">
-        <Footer>
-          <FooterContent className="container">
-            <FooterColumn className="col-span-2 sm:col-span-3 md:col-span-1">
-              <div className="flex items-center">
-                <Image src={"/logo.png"} width={30} height={30} alt="logo" />
-                <h3 className="text-xl font-bold text-parch">پارچ کست</h3>
-              </div>
-            </FooterColumn>
-            <FooterColumn>
-              <h3 className="text-md pt-1 font-semibold">همراه با ما</h3>
-              <a href="/" className="text-sm text-muted-foreground">
-                تماس با ما
-              </a>
-              <a href="/" className="text-sm text-muted-foreground">
-                درباره ما
-              </a>
-              <a href="/" className="text-sm text-muted-foreground">
-                حمایت از پادکست{" "}
-              </a>
-              <a href="/" className="text-sm text-muted-foreground">
-                همکاری اسپانسر{" "}
-              </a>
-            </FooterColumn>
-            <FooterColumn>
-              <h3 className="text-md pt-1 font-semibold">پربازدیدترین‌ها</h3>
-              <a href="/" className="text-sm text-muted-foreground">
-                داستان پارچ
-              </a>
-              <a href="/" className="text-sm text-muted-foreground">
-                داستان پارچ کست
-              </a>
-              <a href="/" className="text-sm text-muted-foreground">
-                پارچ گیمینگ
-              </a>
-            </FooterColumn>
-            <FooterColumn>
-              <h3 className="text-md pt-1 font-semibold">ما را دنبال کنید</h3>
-              <span className="text-sm text-muted-foreground text-justify">
-                مطالب بیشتر و اطلاعات گوناگونی در شبکه‌های اجتماعی رخ منتشر
-                می‌شود که شما را به دنبال کردن آن‌ها دعوت می‌کنیم.
-              </span>
-              <div className="flex gap-4">
-                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
-                  <Github size={16} />
-                </div>
-                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
-                  <Twitter size={16} />
-                </div>
-                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
-                  <Instagram size={16} />
-                </div>
-                <div className="flex justify-center items-center w-8 h-8 rounded-full bg-gray-700">
-                  <Youtube size={16} />
-                </div>
-              </div>
-            </FooterColumn>
-          </FooterContent>
-          <FooterBottom>
-            <div className="container flex justify-between">
-              <div>© 2025 پارچ کست. تمامی حقوق محفوظ است</div>
-
-              <div className="flex items-center gap-4">
-                <a href="/">سیاست حفظ حریم خصوصی</a>
-                <a href="/">شرایط خدمات</a>
-              </div>
-            </div>
-          </FooterBottom>
-        </Footer>
-      </div>
-    </footer>
-  );
-}

package.json

@@ -17,8 +17,8 @@
     "@radix-ui/react-slot": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.476.0",
+    "lucide-react": "^0.482.0",
-    "next": "15.2.0",
+    "next": "15.2.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwind-merge": "^3.0.2",
@@ -26,13 +26,13 @@
   },
   "devDependencies": {
     "typescript": "^5",
-    "@types/node": "^20",
+    "@types/node": "^22",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@tailwindcss/postcss": "^4",
     "tailwindcss": "^4",
     "eslint": "^9",
-    "eslint-config-next": "15.2.0",
+    "eslint-config-next": "15.2.2",
     "@eslint/eslintrc": "^3"
   }
 }