complete share section and content of podcast

app/globals.css

@@ -141,7 +141,7 @@ body {
   background: url("../public/pattern.svg"),
     linear-gradient(rgba(58, 58, 58, 1) 0%, rgba(10, 10, 10, 1) 15%);
   background-blend-mode: color-burn;
-  background-size: 15%;
+  background-size: 20%;
 }
 
 .bg-parch {
@@ -158,6 +158,12 @@ body {
   color: #0d40bf;
 }
 
+.border-parch-active {
+  background: linear-gradient(var(--background), var(--background)) padding-box,
+    linear-gradient(to right, #21c796, #0385ce, #0d40bf) border-box;
+  border: 1px solid transparent;
+}
+
 .border-parch:hover {
   background: linear-gradient(var(--background), var(--background)) padding-box,
     linear-gradient(to right, #21c796, #0385ce, #0d40bf) border-box;

app/podcast/[id]/page.tsx

@@ -1,3 +1,4 @@
+import { PodcastPlayer } from "@/components/podcast-player";
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -6,16 +7,17 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
 import { Calendar, Clock, User } from "lucide-react";
 import Image from "next/image";
 
 export default function Podcast() {
   return (
-    <main className="min-h-screen">
+    <main className="container min-h-screen">
       <section className="relative pt-20 pb-16 md:pt-36 md:pb-24">
         <div className="container px-4 md:px-6">
-          <div className="grid gap-6 grid-cols-3 lg:gap-12 ">
-            <div className="mx-auto aspect-square overflow-hidden rounded-xl bg-muted">
+          <div className="grid gap-6 grid-cols-3 lg:gap-12 mb-16">
+            <div className="aspect-square overflow-hidden rounded-xl bg-muted">
               <Image
                 src="https://picsum.photos/450/450"
                 alt="Podcast Cover Art"
@@ -38,12 +40,12 @@ export default function Podcast() {
                   </BreadcrumbList>
                 </Breadcrumb>
                 <div className="flex flex-col gap-4">
-                  <h1 className="text-3xl font-bold sm:text-4xl leading-normal pe-2">
+                  <h1 className="text-3xl font-bold sm:text-3xl leading-normal pe-2">
                     قسمت اول: داستان پارچ
                   </h1>{" "}
                   <div className="flex gap-5">
                     <div className="rounded-xl p-6 bg-muted/100">
-                      <p className="text-muted-foreground md:text-xl">
+                      <p className="text-muted-foreground md:text-lg">
                         پادکست “پارچ کست” یک برنامه صوتی جذاب و متنوع است که به
                         بررسی موضوعات مختلف فرهنگی، اجتماعی و علمی می‌پردازد.
                         این پادکست با میزبانی متخصصان و مهمانان مختلف، تلاش
@@ -71,10 +73,63 @@ export default function Podcast() {
                   </div>
                 </div>
               </div>
+              <Separator className="mt-5" />
+              <div className="flex items-center gap-3">
+                <h5>اشتراک گذاری:</h5>
+                <div className="flex gap-2">
+                  <div className="border p-2 rounded-lg border-parch-active">
+                    <svg
+                      stroke="currentColor"
+                      fill="currentColor"
+                      stroke-width="0"
+                      viewBox="0 0 496 512"
+                      height="20px"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"></path>
+                    </svg>
+                  </div>
+                  <div className="border p-2 rounded-lg border-parch-active">
+                    <svg
+                      stroke="currentColor"
+                      fill="currentColor"
+                      stroke-width="0"
+                      viewBox="0 0 448 512"
+                      height="20px"
+                      width="20px"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"></path>
+                    </svg>
+                  </div>
+                </div>
+              </div>
             </div>
           </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>
+              </div>
+            </div>
+            <div className="col-span-3 border">sss</div>
+          </div>
         </div>
       </section>
+      <PodcastPlayer />
     </main>
   );
 }

components/about-podcast.tsx

@@ -2,9 +2,9 @@ import Image from "next/image";
 
 export function AboutPodcast() {
   return (
-    <section className="bg-muted/50 py-12 md:py-16 lg:py-20">
+    <section className="container bg-muted/50 py-12 md:py-16 lg:py-20">
       <div className="container px-4 md:px-6">
-        <div className="grid gap-6 lg:grid-cols-2 lg:gap-12">
+        <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
               src="https://picsum.photos/450/450"

components/episode-cards.tsx

@@ -52,7 +52,7 @@ export function EpisodeCards() {
   ];
 
   return (
-    <section className="py-12 md:py-16 lg:py-20">
+    <section className="container py-12 md:py-16 lg:py-20">
       <div className="container px-4 md:px-6">
         <div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
           <div>

components/header.tsx

@@ -6,8 +6,8 @@ import Image from "next/image";
 
 export default function Header() {
   return (
-    <div className="mx-auto px-4 md:px-6 lg:px-8 fixed w-full z-10">
-      <header className="container flex h-20 w-full shrink-0 items-center justify-between">
+    <div className="container mx-auto left-1/2 -translate-x-1/2 fixed w-full z-10">
+      <header className="px-4 md:px-6 flex h-20 w-full shrink-0 items-center justify-between">
         <div className="flex gap-2">
           <Button variant="ghost" className="px-2 py-1">
             <Menu />

components/podcast-hero.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 
 export function PodcastHero() {
   return (
-    <section className="relative pt-20 pb-16 md:pt-36 md:pb-24">
+    <section className="container relative pt-20 pb-16 md:pt-36 md:pb-24">
       <div className="container px-4 md:px-6">
         <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">
@@ -42,7 +42,7 @@ export function PodcastHero() {
               </Button>
             </div>
           </div>
-          <div className="mx-auto aspect-square overflow-hidden rounded-xl bg-muted lg:order-last">
+          <div className="aspect-square overflow-hidden rounded-xl bg-muted lg:order-last">
             <Image
               src="https://picsum.photos/450/450"
               alt="Podcast Cover Art"

components/podcast-player.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { Slider } from "@/components/ui/slider";
+import {
+  FastForward,
+  Pause,
+  Play,
+  Rewind,
+  SkipBack,
+  SkipForward,
+  Volume2,
+} from "lucide-react";
+import Image from "next/image";
+import { useState } from "react";
+
+export function PodcastPlayer() {
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  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">
+        <div className="flex items-center gap-4">
+          <Image
+            src="https://picsum.photos/48"
+            alt="Episode Cover"
+            width={48}
+            height={48}
+            className="rounded-md"
+          />
+          <div>
+            <h4 className="text-sm font-medium">قسمت اول: داستان پارچ</h4>
+            <p className="text-xs text-muted-foreground">Efoux</p>
+          </div>
+        </div>
+        <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" />
+              <span className="sr-only">Previous</span>
+            </Button>
+            <Button variant="ghost" size="icon" className="h-8 w-8">
+              <Rewind className="h-4 w-4" />
+              <span className="sr-only">Rewind</span>
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              className="h-10 w-10 rounded-full"
+              onClick={() => setIsPlaying(!isPlaying)}
+            >
+              {isPlaying ? (
+                <Pause className="h-5 w-5" />
+              ) : (
+                <Play className="h-5 w-5" />
+              )}
+              <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" />
+              <span className="sr-only">Fast Forward</span>
+            </Button>
+            <Button variant="ghost" size="icon" className="h-8 w-8">
+              <SkipForward className="h-4 w-4" />
+              <span className="sr-only">Next</span>
+            </Button>
+          </div>
+          <div className="flex w-full items-center gap-2">
+            <div className="text-xs tabular-nums text-muted-foreground">
+              62:00
+            </div>
+            <Slider defaultValue={[33]} max={100} step={1} className="w-full" />
+            <div className="text-xs tabular-nums text-muted-foreground">
+              12:34
+            </div>
+          </div>
+        </div>
+        <div className="hidden items-center gap-2 md:flex">
+          <Volume2 className="h-4 w-4 text-muted-foreground" />
+          <Slider defaultValue={[70]} max={100} step={1} className="w-20" />
+        </div>
+      </div>
+    </div>
+  );
+}

components/subscribe-section.tsx

@@ -4,7 +4,7 @@ import { Headphones, Mail } from "lucide-react";
 
 export function SubscribeSection() {
   return (
-    <section className="py-12 md:py-16 lg:py-20 border-b">
+    <section className="container py-12 md:py-16 lg:py-20 border-b">
       <div className="container px-4 md:px-6">
         <div className="mx-auto max-w-2xl text-center">
           <div className="flex justify-center">

components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

components/ui/slider.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import * as SliderPrimitive from "@radix-ui/react-slider"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }

package.json

@@ -12,6 +12,8 @@
     "@radix-ui/react-avatar": "^1.1.3",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-separator": "^1.1.2",
+    "@radix-ui/react-slider": "^1.2.3",
     "@radix-ui/react-slot": "^1.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",