109 lines
3.7 KiB
TypeScript
109 lines
3.7 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import Link from 'next/link';
|
|||
|
|
import { motion } from 'framer-motion';
|
|||
|
|
import { useLocale } from '@/lib/i18n/locale-context';
|
|||
|
|
import { SectionHeader } from '@/components/ui/SectionHeader';
|
|||
|
|
import { cn } from '@/lib/utils';
|
|||
|
|
|
|||
|
|
const FA_DIGITS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'] as const;
|
|||
|
|
const toFa = (n: number) =>
|
|||
|
|
n.toString().replace(/\d/g, (d) => FA_DIGITS[Number(d)]);
|
|||
|
|
|
|||
|
|
const CATEGORY_COLOR: Record<string, string> = {
|
|||
|
|
LLM: 'text-magenta border-magenta/30 bg-magenta/5',
|
|||
|
|
Automation: 'text-violet border-violet/30 bg-violet/5',
|
|||
|
|
'Google Stack': 'text-cyan border-cyan/30 bg-cyan/5',
|
|||
|
|
Infra: 'text-emerald border-emerald/30 bg-emerald/5',
|
|||
|
|
Mobile: 'text-electric border-electric/30 bg-electric/5',
|
|||
|
|
Strategy: 'text-electric border-electric/30 bg-electric/5',
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export function Blog() {
|
|||
|
|
const { t, locale } = useLocale();
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<section id="blog" className="relative px-5 py-28 sm:px-8">
|
|||
|
|
<div className="mx-auto max-w-7xl">
|
|||
|
|
<SectionHeader
|
|||
|
|
eyebrow={t.blog.eyebrow}
|
|||
|
|
title={t.blog.title}
|
|||
|
|
sub={t.blog.sub}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div className="mt-14 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
|||
|
|
{t.blog.items.map((post, i) => (
|
|||
|
|
<motion.article
|
|||
|
|
key={post.slug}
|
|||
|
|
initial={{ opacity: 0, y: 24 }}
|
|||
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|||
|
|
viewport={{ once: true, margin: '-60px' }}
|
|||
|
|
transition={{
|
|||
|
|
duration: 0.55,
|
|||
|
|
ease: [0.22, 1, 0.36, 1],
|
|||
|
|
delay: 0.04 * i,
|
|||
|
|
}}
|
|||
|
|
className="glass group relative flex flex-col p-6 transition-shadow duration-300 hover:shadow-glow-electric"
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<span
|
|||
|
|
className={cn(
|
|||
|
|
'rounded-full border px-2.5 py-0.5 font-mono text-[0.65rem] uppercase tracking-wider',
|
|||
|
|
CATEGORY_COLOR[post.category] ?? 'text-slate-300 border-white/10 bg-white/[0.03]',
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{post.category}
|
|||
|
|
</span>
|
|||
|
|
<span className="font-mono text-[0.7rem] text-slate-500">
|
|||
|
|
{locale === 'fa' ? toFa(post.readTime) : post.readTime}{' '}
|
|||
|
|
{t.blog.readTimeSuffix}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h3
|
|||
|
|
className={cn(
|
|||
|
|
'mt-5 font-display text-[1.05rem] font-semibold leading-snug text-white transition-colors group-hover:text-electric',
|
|||
|
|
locale === 'fa' && 'font-fa',
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
<Link href={`/blog/${post.slug}`} className="after:absolute after:inset-0">
|
|||
|
|
{post.title}
|
|||
|
|
</Link>
|
|||
|
|
</h3>
|
|||
|
|
|
|||
|
|
<p className="mt-3 grow text-[0.92rem] leading-relaxed text-slate-400">
|
|||
|
|
{post.excerpt}
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<span className="mt-5 inline-flex items-center gap-1.5 font-mono text-[0.72rem] uppercase tracking-wider text-electric">
|
|||
|
|
{t.blog.readMore}
|
|||
|
|
<Arrow locale={locale} />
|
|||
|
|
</span>
|
|||
|
|
</motion.article>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function Arrow({ locale }: { locale: 'fa' | 'en' }) {
|
|||
|
|
return (
|
|||
|
|
<svg
|
|||
|
|
viewBox="0 0 24 24"
|
|||
|
|
width="12"
|
|||
|
|
height="12"
|
|||
|
|
fill="none"
|
|||
|
|
stroke="currentColor"
|
|||
|
|
strokeWidth="2.4"
|
|||
|
|
strokeLinecap="round"
|
|||
|
|
strokeLinejoin="round"
|
|||
|
|
className={locale === 'fa' ? 'rotate-180' : ''}
|
|||
|
|
aria-hidden
|
|||
|
|
>
|
|||
|
|
<path d="M5 12 H19" />
|
|||
|
|
<path d="M13 6 L19 12 L13 18" />
|
|||
|
|
</svg>
|
|||
|
|
);
|
|||
|
|
}
|