Update dependencies, refactor footer and header components, and enhance podcast page layout
This commit is contained in:
parent
57ddd04cf7
commit
73112f6680
9 changed files with 145 additions and 154 deletions
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export default function Home() {
|
|||
return (
|
||||
<main className="min-h-screen">
|
||||
<PodcastHero />
|
||||
<EpisodeCards />
|
||||
<EpisodeCards section="main" />
|
||||
<AboutPodcast />
|
||||
<SubscribeSection />
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<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">
|
||||
پادکست “پارچ کست” یک برنامه صوتی جذاب و متنوع است که به
|
||||
بررسی موضوعات مختلف فرهنگی، اجتماعی و علمی می‌پردازد.
|
||||
این پادکست با میزبانی متخصصان و مهمانان مختلف، تلاش
|
||||
|
|
@ -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">
|
||||
<h3 className="text-2xl font-bold">متن کامل اپیزود</h3>
|
||||
<div className="rounded-xl p-6 bg-muted/100">
|
||||
<p className="text-muted-foreground md:text-lg">
|
||||
پادکست “پارچ کست” یک برنامه صوتی جذاب و متنوع است که به
|
||||
بررسی موضوعات مختلف فرهنگی، اجتماعی و علمی می‌پردازد. این
|
||||
پادکست با میزبانی متخصصان و مهمانان مختلف، تلاش می‌کند تا با
|
||||
ارائه بحث‌ها و نظرات عمیق، شنوندگان را به تفکر وادارد و
|
||||
آگاهی آن‌ها را در زمینه‌های مختلف افزایش دهد. هر قسمت از
|
||||
“پارچ کست” با رویکردی خلاقانه و engaging تولید می‌شود و هدف
|
||||
آن ایجاد فضایی است که در آن گوش دادن به اطلاعات جدید همزمان
|
||||
با لذت و سرگرمی همراه باشد.
|
||||
</p>
|
||||
<div className="flex flex-col gap-10">
|
||||
<div className="flex gap-4 flex-col">
|
||||
<h2 className="text-2xl font-bold">متن کامل اپیزود</h2>
|
||||
<div className="rounded-xl p-5 bg-muted/100">
|
||||
<p className="text-muted-foreground md:text-lg text-justify">
|
||||
پادکست “پارچ کست” یک برنامه صوتی جذاب و متنوع است که به
|
||||
بررسی موضوعات مختلف فرهنگی، اجتماعی و علمی می‌پردازد. این
|
||||
پادکست با میزبانی متخصصان و مهمانان مختلف، تلاش می‌کند تا
|
||||
با ارائه بحث‌ها و نظرات عمیق، شنوندگان را به تفکر وادارد و
|
||||
آگاهی آن‌ها را در زمینه‌های مختلف افزایش دهد. هر قسمت از
|
||||
“پارچ کست” با رویکردی خلاقانه و engaging تولید می‌شود و
|
||||
هدف آن ایجاد فضایی است که در آن گوش دادن به اطلاعات جدید
|
||||
همزمان با لذت و سرگرمی همراه باشد.
|
||||
</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>
|
||||
|
|
|
|||
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
|
@ -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">
|
||||
<div className="container px-4 md:px-6">
|
||||
<section
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<a href="/" className="text-sm text-muted-foreground">
|
||||
Discord
|
||||
</a>
|
||||
<a href="/" className="text-sm text-muted-foreground">
|
||||
Twitter
|
||||
</a>
|
||||
<a href="/" className="text-sm text-muted-foreground">
|
||||
Github
|
||||
</a>
|
||||
<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>© 2025 پارچ کست. تمامی حقوق محفوظ است</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<a href="/">سیاست حفظ حریم خصوصی</a>
|
||||
<a href="/">شرایط خدمات</a>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
ورود
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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",
|
||||
"next": "15.2.0",
|
||||
"lucide-react": "^0.482.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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue