feat: add StrategicEvents, AtAGlance, and VideocastPodcast sections to home page
This commit is contained in:
alireza
parent
238464e073
commit
896cc662ab
File diff suppressed because it is too large
Load Diff
|
|
@ -31,8 +31,8 @@ export default function StrategicEvents() {
|
|||
<div style={{ direction: 'rtl' }}>
|
||||
{/* heading */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28, justifyContent: 'flex-start' }}>
|
||||
<div style={{ width: 4, height: 30, background: GOLD, borderRadius: 2, order: 2 }} />
|
||||
<h2 style={{ fontSize: 'clamp(20px,2.2vw,28px)', fontWeight: 900, color: NAVY, letterSpacing: '-0.5px', margin: 0, order: 1 }}>
|
||||
<div style={{ width: 4, height: 30, background: GOLD, borderRadius: 2 }} />
|
||||
<h2 style={{ fontSize: 'clamp(20px,2.2vw,28px)', fontWeight: 900, color: NAVY, letterSpacing: '-0.5px', margin: 0 }}>
|
||||
دیدهبان رویدادهای راهبردی
|
||||
</h2>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -63,13 +63,12 @@ export default function AtAGlanceSection({ embedded = false }: { embedded?: bool
|
|||
<section id="at-a-glance" style={{ background: '#faf7f4', padding: '52px 0', overflow: 'hidden', scrollMarginTop: '90px' }} dir={isFa ? 'rtl' : 'ltr'}>
|
||||
<div className="max-w-7xl mx-auto px-12 max-md:px-5">
|
||||
|
||||
{/* heading with gold rule (hidden when embedded in a page that has its own header) */}
|
||||
{!embedded && (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, justifyContent: 'flex-start', marginBottom: 24 }}>
|
||||
<h2 style={{ fontSize: 'clamp(22px, 2.2vw, 30px)', fontWeight: 900, color: NAVY, letterSpacing: '-0.5px', margin: 0, order: isFa ? 1 : 2 }}>
|
||||
<div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2 }} />
|
||||
<h2 style={{ fontSize: 'clamp(22px, 2.2vw, 30px)', fontWeight: 900, color: NAVY, letterSpacing: '-0.5px', margin: 0 }}>
|
||||
{T.heading}
|
||||
</h2>
|
||||
<div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2, order: isFa ? 2 : 1 }} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { useState } from 'react'
|
||||
import { useLang } from '@/context/LangContext'
|
||||
import { Download, BookOpen, Podcast, Clock, Calendar, Play, ChevronLeft, ChevronRight } from 'lucide-react'
|
||||
|
||||
const NAVY = '#032340'
|
||||
const GOLD = '#CD9E53'
|
||||
|
|
@ -41,7 +42,7 @@ const VIDEOS = [
|
|||
},
|
||||
]
|
||||
|
||||
const POD_HASHTAGS = ['#هوش _ مصنوعی', '#عدم _ قطعیت']
|
||||
const POD_HASHTAGS = ['#هوش_مصنوعی', '#عدم_قطعیت']
|
||||
|
||||
const PODCASTS = [
|
||||
{
|
||||
|
|
@ -73,13 +74,13 @@ const PODCASTS = [
|
|||
const T = {
|
||||
fa: {
|
||||
videoLabel: 'ویدیوکست', videoSub: 'آخرین گفتگوهای تصویری اندیشکده',
|
||||
podLabel: 'پادکست', podSub: 'شنیدنیهای اندیشکده فولاد آینده',
|
||||
watchAll: 'همه ویدیوها ←', listenAll: 'همه قسمتها ←',
|
||||
podLabel: 'پادکستها', podSub: 'شنیدنیهای اندیشکده فولاد آینده',
|
||||
watchAll: 'همه ویدیوها ←', listenAll: 'مشاهده همه',
|
||||
},
|
||||
en: {
|
||||
videoLabel: 'Videocast', videoSub: 'Latest video conversations from the Institute',
|
||||
podLabel: 'Podcast', podSub: 'Audio episodes from Future Steel Institute',
|
||||
watchAll: 'All videos →', listenAll: 'All episodes →',
|
||||
podLabel: 'Podcasts', podSub: 'Audio episodes from Future Steel Institute',
|
||||
watchAll: 'All videos →', listenAll: 'View All',
|
||||
},
|
||||
}
|
||||
|
||||
|
|
@ -106,8 +107,8 @@ export default function VideocastPodcastSection({ only }: { only?: 'video' | 'po
|
|||
|
||||
{/* heading */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 24, justifyContent: 'flex-start' }}>
|
||||
<div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2, order: lang === 'fa' ? 2 : 1 }} />
|
||||
<h2 style={{ fontSize: 'clamp(20px,2.2vw,28px)', fontWeight: 900, letterSpacing: '-0.5px', color: NAVY, margin: 0, order: lang === 'fa' ? 1 : 2 }}>{t.videoLabel}</h2>
|
||||
<div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2 }} />
|
||||
<h2 style={{ fontSize: 'clamp(20px,2.2vw,28px)', fontWeight: 900, letterSpacing: '-0.5px', color: NAVY, margin: 0 }}>{t.videoLabel}</h2>
|
||||
</div>
|
||||
|
||||
{/* featured player */}
|
||||
|
|
@ -208,104 +209,412 @@ export default function VideocastPodcastSection({ only }: { only?: 'video' | 'po
|
|||
{/* heading */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 24, gap: 12 }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2, order: lang === 'fa' ? 2 : 1 }} />
|
||||
<h2 style={{ fontSize: 'clamp(20px,2.2vw,28px)', fontWeight: 900, letterSpacing: '-0.5px', color: NAVY, margin: 0, order: lang === 'fa' ? 1 : 2 }}>{t.podLabel}</h2>
|
||||
<div style={{ width: 4, height: 28, background: GOLD, borderRadius: 2 }} />
|
||||
<h2 style={{ fontSize: 'clamp(20px,2.2vw,28px)', fontWeight: 900, letterSpacing: '-0.5px', color: NAVY, margin: 0 }}>{t.podLabel}</h2>
|
||||
</div>
|
||||
<button style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 700, color: GOLD, background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit' }}>
|
||||
⊕ {t.listenAll}
|
||||
<button style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 8,
|
||||
direction: 'ltr',
|
||||
fontSize: 13,
|
||||
fontWeight: 700,
|
||||
color: GOLD,
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
fontFamily: 'inherit'
|
||||
}}>
|
||||
<div style={{
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: '50%',
|
||||
border: `1px solid ${GOLD}`,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: GOLD
|
||||
}}>
|
||||
{lang === 'fa' ? <ChevronLeft size={14} strokeWidth={2.5} /> : <ChevronRight size={14} strokeWidth={2.5} />}
|
||||
</div>
|
||||
<span>{t.listenAll}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── featured player card (light) ── */}
|
||||
<div style={{
|
||||
display: 'flex', flexDirection: lang === 'fa' ? 'row' : 'row-reverse', gap: 22, alignItems: 'stretch',
|
||||
background: '#efe9e1', borderRadius: 18, padding: 22, marginBottom: 32, direction: 'ltr',
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: 24,
|
||||
alignItems: 'stretch',
|
||||
background: '#efe9e1',
|
||||
borderRadius: 18,
|
||||
padding: 24,
|
||||
marginBottom: 32,
|
||||
direction: lang === 'fa' ? 'rtl' : 'ltr',
|
||||
}} className="max-md:!flex-col">
|
||||
{/* cover + rating — first DOM child → right in RTL */}
|
||||
<div style={{ flexShrink: 0, width: 150 }} className="max-md:!w-full max-md:!self-center max-md:!max-w-[200px]">
|
||||
<img src={pod.cover} alt="" style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: 12, display: 'block', marginBottom: 8 }} />
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6 }}>
|
||||
{/* cover + rating container */}
|
||||
<div style={{
|
||||
flexShrink: 0,
|
||||
width: 170,
|
||||
background: '#032340',
|
||||
borderRadius: 16,
|
||||
padding: 12,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}} className="max-md:!w-full max-md:!max-w-[200px] max-md:!self-center">
|
||||
<img src={pod.cover} alt="" style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', borderRadius: 10, display: 'block', marginBottom: 12 }} />
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, width: '100%' }}>
|
||||
<span style={{ color: GOLD, fontSize: 13, letterSpacing: 1 }}>★★★★★</span>
|
||||
<span style={{ fontSize: 11, fontWeight: 700, color: NAVY }}>{pod.rating}</span>
|
||||
<span style={{ fontSize: 12, fontWeight: 700, color: '#fff' }}>{pod.rating}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* player body — left */}
|
||||
<div style={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', direction: 'rtl' }}>
|
||||
{/* top icons + episode + title */}
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, marginBottom: 12 }}>
|
||||
<div style={{ display: 'flex', gap: 8 }}>
|
||||
<span style={{ width: 34, height: 34, borderRadius: 9, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, color: NAVY }}>⬇</span>
|
||||
<span style={{ width: 34, height: 34, borderRadius: 9, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 15, color: NAVY }}>🔖</span>
|
||||
</div>
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<div style={{ fontSize: 11, fontWeight: 800, color: GOLD, marginBottom: 4 }}>{pod.epNum}</div>
|
||||
<h3 style={{ fontSize: 'clamp(15px,1.6vw,20px)', fontWeight: 900, color: NAVY, margin: 0, lineHeight: 1.4 }}>{pod[lang].title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* play + date */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
|
||||
<button aria-label="play" style={{
|
||||
flexShrink: 0, width: 38, height: 38, borderRadius: '50%', border: 'none', cursor: 'pointer',
|
||||
background: GOLD, display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
{/* player body */}
|
||||
<div style={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'space-between',
|
||||
padding: '4px 0'
|
||||
}}>
|
||||
<div style={{ width: 0, height: 0, borderTop: '7px solid transparent', borderBottom: '7px solid transparent', borderRight: '11px solid #fff', marginRight: 2 }} />
|
||||
{/* Top Row: Buttons on the far left, Episode number on the right */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%',
|
||||
marginBottom: 6,
|
||||
direction: 'ltr'
|
||||
}}>
|
||||
{/* Download + Bookmark outline circular buttons */}
|
||||
<div style={{ display: 'flex', gap: 10 }}>
|
||||
<button style={{
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: '50%',
|
||||
border: '1px solid rgba(3, 35, 64, 0.18)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'transparent',
|
||||
color: NAVY,
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s'
|
||||
}} className="hover:!bg-[#fff] hover:!border-transparent">
|
||||
<Download size={16} strokeWidth={2} />
|
||||
</button>
|
||||
<div style={{ flex: 1, height: 1, background: 'rgba(3,35,64,0.15)' }} />
|
||||
<div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: 'rgba(3,35,64,0.6)' }}>
|
||||
{pod.date} <span style={{ color: GOLD }}>📅</span>
|
||||
<button style={{
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: '50%',
|
||||
border: '1px solid rgba(3, 35, 64, 0.18)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
background: 'transparent',
|
||||
color: NAVY,
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.2s'
|
||||
}} className="hover:!bg-[#fff] hover:!border-transparent">
|
||||
<BookOpen size={16} strokeWidth={2} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Episode number */}
|
||||
<div style={{
|
||||
fontSize: 12,
|
||||
fontWeight: 800,
|
||||
color: GOLD,
|
||||
textAlign: lang === 'fa' ? 'right' : 'left',
|
||||
direction: lang === 'fa' ? 'rtl' : 'ltr'
|
||||
}}>
|
||||
{pod.epNum}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* waveform + times */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10, direction: 'ltr' }}>
|
||||
<span style={{ fontSize: 10, color: 'rgba(3,35,64,0.55)', flexShrink: 0 }}>۰۲:۳۱</span>
|
||||
<div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 2, height: 26, overflow: 'hidden' }}>
|
||||
{Array.from({ length: 64 }).map((_, i) => {
|
||||
const h = 5 + Math.abs(Math.sin(i * 1.7)) * 18
|
||||
return <span key={i} style={{ flex: 1, height: h, borderRadius: 1, background: i < 14 ? GOLD : 'rgba(3,35,64,0.22)' }} />
|
||||
})}
|
||||
{/* Title Row */}
|
||||
<div style={{ textAlign: lang === 'fa' ? 'right' : 'left', marginBottom: 6 }}>
|
||||
<h3 style={{
|
||||
fontSize: 'clamp(16px, 1.8vw, 22px)',
|
||||
fontWeight: 900,
|
||||
color: NAVY,
|
||||
margin: 0,
|
||||
lineHeight: 1.4
|
||||
}}>
|
||||
{pod[lang].title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
{/* Date Row (directly under Title) */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: lang === 'fa' ? 'flex-start' : 'flex-end',
|
||||
alignItems: 'center',
|
||||
marginBottom: 12
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
fontSize: 12,
|
||||
color: 'rgba(3, 35, 64, 0.65)',
|
||||
fontWeight: 600,
|
||||
flexDirection: lang === 'fa' ? 'row' : 'row-reverse'
|
||||
}}>
|
||||
<Calendar size={14} color={GOLD} />
|
||||
<span>{pod.date}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Separator line */}
|
||||
<div style={{
|
||||
height: 1,
|
||||
background: 'rgba(3, 35, 64, 0.1)',
|
||||
marginBottom: 16
|
||||
}} />
|
||||
|
||||
{/* Play button + Waveform row */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 16,
|
||||
flexDirection: lang === 'fa' ? 'row-reverse' : 'row',
|
||||
width: '100%'
|
||||
}}>
|
||||
{/* Play button */}
|
||||
<button
|
||||
aria-label="play"
|
||||
style={{
|
||||
flexShrink: 0,
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: '50%',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
background: GOLD,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
transition: 'transform 0.2s, background-color 0.2s'
|
||||
}}
|
||||
className="hover:!scale-105 hover:!bg-[#b88d46]"
|
||||
>
|
||||
<Play size={18} fill="#fff" color="#fff" style={{ marginLeft: 2 }} />
|
||||
</button>
|
||||
|
||||
{/* Waveform container */}
|
||||
<div style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
direction: 'ltr',
|
||||
width: '100%'
|
||||
}}>
|
||||
<span style={{ fontSize: 11, color: 'rgba(3, 35, 64, 0.6)', fontWeight: 700, flexShrink: 0 }}>۰۲:۳۱</span>
|
||||
<div style={{
|
||||
flex: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 3,
|
||||
height: 26,
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
{[
|
||||
4, 6, 8, 10, 7, 5, 8, 12, 15, 18, 14, 10, 8, 12, 16, 20, 22, 17, 12, 9,
|
||||
12, 15, 18, 22, 24, 20, 15, 11, 8, 12, 15, 17, 20, 22, 18, 14, 10, 8, 12, 15,
|
||||
19, 21, 16, 12, 9, 11, 14, 18, 20, 16, 11, 8, 6, 9, 12, 15, 17, 13, 9, 7,
|
||||
10, 13, 16, 18, 14, 10, 8, 11, 14, 16, 13, 9, 7, 10, 13, 16, 18, 14, 10, 7
|
||||
].map((h, i) => (
|
||||
<span
|
||||
key={i}
|
||||
style={{
|
||||
flex: 1,
|
||||
height: h,
|
||||
borderRadius: 1.5,
|
||||
background: i < 20 ? GOLD : 'rgba(3, 35, 64, 0.18)',
|
||||
minWidth: 2,
|
||||
transition: 'background-color 0.2s'
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<span style={{ fontSize: 11, color: 'rgba(3, 35, 64, 0.6)', fontWeight: 700, flexShrink: 0 }}>{pod.duration}</span>
|
||||
</div>
|
||||
<span style={{ fontSize: 10, color: 'rgba(3,35,64,0.55)', flexShrink: 0 }}>{pod.duration}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── episode list (left) + description (right) ── */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 40 }} className="max-lg:!grid-cols-1 max-lg:!gap-8">
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1.2fr',
|
||||
gap: 40,
|
||||
direction: lang === 'fa' ? 'rtl' : 'ltr'
|
||||
}} className="max-lg:!grid-cols-1 max-lg:!gap-8">
|
||||
|
||||
{/* episode list — first DOM → right in RTL */}
|
||||
<div style={{ order: lang === 'fa' ? 2 : 1, display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
{PODCASTS.map((p, i) => (
|
||||
<button key={p.id} onClick={() => setActivePod(i)} style={{
|
||||
display: 'flex', alignItems: 'center', gap: 14, width: '100%', cursor: 'pointer',
|
||||
background: i === activePod ? '#fff' : 'transparent', border: 'none', borderRadius: 12, padding: 10,
|
||||
boxShadow: i === activePod ? '0 12px 30px -18px rgba(3,35,64,0.3)' : 'none',
|
||||
flexDirection: lang === 'fa' ? 'row-reverse' : 'row', textAlign: lang === 'fa' ? 'right' : 'left',
|
||||
{/* episode list — first DOM → left in LTR, left in RTL via order */}
|
||||
<div style={{
|
||||
order: lang === 'fa' ? 2 : 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 16
|
||||
}}>
|
||||
<img src={p.cover} alt="" style={{ width: 92, height: 64, borderRadius: 10, objectFit: 'cover', flexShrink: 0, display: 'block' }} />
|
||||
<div style={{ flex: 1, minWidth: 0, direction: 'rtl' }}>
|
||||
<div style={{ fontSize: 13.5, fontWeight: 900, color: NAVY, marginBottom: 5, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{p[lang].title}</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(3,35,64,0.5)', lineHeight: 1.7, display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden' }}>{p[lang].body}</div>
|
||||
{PODCASTS.filter((_, idx) => idx !== activePod).map((p) => {
|
||||
const originalIndex = PODCASTS.findIndex(item => item.id === p.id);
|
||||
return (
|
||||
<button
|
||||
key={p.id}
|
||||
onClick={() => setActivePod(originalIndex)}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 16,
|
||||
width: '100%',
|
||||
cursor: 'pointer',
|
||||
background: '#FAF8F5',
|
||||
border: '1px solid rgba(3, 35, 64, 0.04)',
|
||||
borderRadius: 16,
|
||||
padding: 16,
|
||||
flexDirection: lang === 'fa' ? 'row-reverse' : 'row',
|
||||
textAlign: lang === 'fa' ? 'right' : 'left',
|
||||
transition: 'all 0.2s'
|
||||
}}
|
||||
className="hover:!bg-[#fff] hover:!border-transparent hover:!shadow-[0_8px_20px_-8px_rgba(3,35,64,0.15)]"
|
||||
>
|
||||
<img
|
||||
src={p.cover}
|
||||
alt=""
|
||||
style={{
|
||||
width: 120,
|
||||
height: 80,
|
||||
borderRadius: 12,
|
||||
objectFit: 'cover',
|
||||
flexShrink: 0,
|
||||
display: 'block'
|
||||
}}
|
||||
/>
|
||||
<div style={{
|
||||
flex: 1,
|
||||
minWidth: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 8,
|
||||
direction: lang === 'fa' ? 'rtl' : 'ltr'
|
||||
}}>
|
||||
{/* Top Row inside card text: Title & Duration */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
width: '100%'
|
||||
}}>
|
||||
<div style={{
|
||||
fontSize: 14.5,
|
||||
fontWeight: 900,
|
||||
color: NAVY,
|
||||
margin: 0
|
||||
}}>
|
||||
{p[lang].title}
|
||||
</div>
|
||||
<span style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 10, color: GOLD, flexShrink: 0, alignSelf: 'flex-start' }}>
|
||||
{p.duration} ⏱
|
||||
<span style={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 4,
|
||||
fontSize: 11,
|
||||
color: GOLD,
|
||||
fontWeight: 700,
|
||||
flexShrink: 0,
|
||||
direction: 'ltr'
|
||||
}}>
|
||||
<Clock size={12} strokeWidth={2.5} />
|
||||
<span>{p.duration}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div style={{
|
||||
fontSize: 12,
|
||||
color: 'rgba(3, 35, 64, 0.55)',
|
||||
lineHeight: 1.8,
|
||||
display: '-webkit-box',
|
||||
WebkitLineClamp: 2,
|
||||
WebkitBoxOrient: 'vertical',
|
||||
overflow: 'hidden',
|
||||
textAlign: 'justify'
|
||||
}}>
|
||||
{p[lang].body}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* description — second DOM → left in RTL */}
|
||||
<div style={{ order: lang === 'fa' ? 1 : 2, direction: 'rtl' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, justifyContent: 'flex-start' }}>
|
||||
<span style={{ fontSize: 16 }}>🎙</span>
|
||||
<h3 style={{ fontSize: 'clamp(16px,1.6vw,22px)', fontWeight: 900, color: NAVY, margin: 0, lineHeight: 1.4 }}>{pod[lang].title}</h3>
|
||||
{/* description — second DOM → right in LTR, right in RTL via order */}
|
||||
<div style={{
|
||||
order: lang === 'fa' ? 1 : 2,
|
||||
direction: lang === 'fa' ? 'rtl' : 'ltr'
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 12,
|
||||
marginBottom: 16,
|
||||
justifyContent: 'flex-start'
|
||||
}}>
|
||||
{lang === 'fa' ? (
|
||||
<>
|
||||
<h3 style={{ fontSize: 'clamp(16px, 1.6vw, 22px)', fontWeight: 900, color: NAVY, margin: 0, lineHeight: 1.4, flex: 1, textAlign: 'right' }}>
|
||||
{pod[lang].title}
|
||||
</h3>
|
||||
<div style={{ width: 34, height: 34, borderRadius: '50%', border: `1.5px solid ${GOLD}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: GOLD, flexShrink: 0 }}>
|
||||
<Podcast size={16} strokeWidth={2.5} />
|
||||
</div>
|
||||
<p style={{ fontSize: 13, lineHeight: 2.1, color: 'rgba(3,35,64,0.72)', margin: '0 0 16px', textAlign: 'justify' }}>{pod[lang].body}</p>
|
||||
<div style={{ fontSize: 12.5, fontWeight: 800, color: GOLD, marginBottom: 10 }}>مهمان برنامه: {pod[lang].guest}</div>
|
||||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
|
||||
{POD_HASHTAGS.map((h, i) => <span key={i} style={{ fontSize: 12, fontWeight: 700, color: GOLD }}>{h}</span>)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ width: 34, height: 34, borderRadius: '50%', border: `1.5px solid ${GOLD}`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: GOLD, flexShrink: 0 }}>
|
||||
<Podcast size={16} strokeWidth={2.5} />
|
||||
</div>
|
||||
<h3 style={{ fontSize: 'clamp(16px, 1.6vw, 22px)', fontWeight: 900, color: NAVY, margin: 0, lineHeight: 1.4, flex: 1, textAlign: 'left' }}>
|
||||
{pod[lang].title}
|
||||
</h3>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<p style={{
|
||||
fontSize: 13.5,
|
||||
lineHeight: 2.1,
|
||||
color: 'rgba(3, 35, 64, 0.75)',
|
||||
margin: '0 0 18px',
|
||||
textAlign: 'justify',
|
||||
direction: lang === 'fa' ? 'rtl' : 'ltr'
|
||||
}}>
|
||||
{pod[lang].body}
|
||||
</p>
|
||||
<div style={{
|
||||
fontSize: 13.5,
|
||||
fontWeight: 800,
|
||||
color: GOLD,
|
||||
marginBottom: 12,
|
||||
textAlign: lang === 'fa' ? 'right' : 'left'
|
||||
}}>
|
||||
{lang === 'fa' ? 'مهمان برنامه: ' : 'Guest: '}{pod[lang].guest}
|
||||
</div>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
gap: 16,
|
||||
flexWrap: 'wrap',
|
||||
direction: lang === 'fa' ? 'rtl' : 'ltr',
|
||||
justifyContent: lang === 'fa' ? 'flex-start' : 'flex-end'
|
||||
}}>
|
||||
{POD_HASHTAGS.map((h, i) => (
|
||||
<span key={i} style={{ fontSize: 12, fontWeight: 700, color: GOLD }}>
|
||||
{h}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue