42 lines
1.6 KiB
TypeScript
42 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { ArrowLeftIcon } from 'lucide-react';
|
|
import { Reveal } from '../Reveal';
|
|
import { ButtonLink } from '../Button';
|
|
import { ArticleCard } from '../ArticleCard';
|
|
import { ARTICLES } from '../../data/site';
|
|
|
|
export function Articles() {
|
|
return (
|
|
<section className="bg-char py-24 lg:py-32" aria-labelledby="articles-title">
|
|
<div className="mx-auto max-w-site px-6 lg:px-10">
|
|
<Reveal className="max-w-2xl text-right">
|
|
<p className="text-sm font-light text-copper">وبلاگ</p>
|
|
<h2 id="articles-title" className="mt-5 text-section font-bold text-ivory">
|
|
آخرین مقالات
|
|
</h2>
|
|
<p className="mt-5 text-base font-light leading-9 text-ivory/60">
|
|
یادداشتهای تیم معماری، اجرا و سرمایهگذاری آرامش پلازا درباره آنچه در کارگاه و بازار میگذرد.
|
|
</p>
|
|
<div className="mt-6 h-px w-24 bg-copper/70" />
|
|
</Reveal>
|
|
|
|
<div className="mt-14 grid gap-6 lg:grid-cols-3">
|
|
{ARTICLES.slice(0, 3).map((article, i) =>
|
|
<Reveal key={article.slug} delay={0.06 * i} className="h-full">
|
|
<ArticleCard article={article} />
|
|
</Reveal>
|
|
)}
|
|
</div>
|
|
|
|
<Reveal delay={0.1}>
|
|
<div className="mt-12 flex justify-center">
|
|
<ButtonLink to="/blog" variant="outline" className="font-light">
|
|
همه مقالات
|
|
<ArrowLeftIcon className="h-4 w-4" />
|
|
</ButtonLink>
|
|
</div>
|
|
</Reveal>
|
|
</div>
|
|
</section>);
|
|
|
|
} |