115 lines
4.8 KiB
TypeScript
115 lines
4.8 KiB
TypeScript
import { ArrowRightIcon } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const blogPosts = [
|
|
{
|
|
id: 1,
|
|
title: "آینده توسعه وب",
|
|
date: "۱۳ آذر ۱۴۰۳",
|
|
description:
|
|
"آخرین روندهای فناوری فرانت‌اند و بک‌اند را بررسی می‌کنیم؛ از ابزارهای کدنویسی مبتنی بر هوش مصنوعی تا فریم‌ورک‌های مدرن.",
|
|
image:
|
|
"/block-media/shadcnblocks/block/photos/nubelson-fernandes-tAJYoec13xk-unsplash.jpg",
|
|
imageAlt: "توسعه‌دهنده در حال کدنویسی",
|
|
href: "#",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "تسلط بر بهینه‌سازی کارایی رابط کاربری",
|
|
date: "۱۵ آذر ۱۴۰۳",
|
|
description:
|
|
"نگاهی عمیق به memoization، بارگذاری هوشمند و مدیریت state کارآمد برای اپلیکیشن‌های رابط کاربری سریع‌تر.",
|
|
image:
|
|
"/block-media/shadcnblocks/block/photos/jason-goodman-ZJlfUi5rTDU-unsplash.jpg",
|
|
imageAlt: "کد روی صفحه نمایش",
|
|
href: "#",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "اصول طراحی رابط کاربری/تجربه کاربری برای ۱۴۰۴",
|
|
date: "۲۰ آذر ۱۴۰۳",
|
|
description:
|
|
"استراتژی‌های کلیدی برای ساخت رابط‌هایی شهودی و زیبا که کاربر را جذب می‌کنند و تعامل را در سال پیش رو افزایش می‌دهند.",
|
|
image:
|
|
"/block-media/shadcnblocks/block/photos/studio-republic-fotKKqWNMQ4-unsplash.jpg",
|
|
imageAlt: "طرح‌های رابط کاربری/تجربه کاربری روی کاغذ",
|
|
href: "#",
|
|
},
|
|
];
|
|
|
|
interface Blog30Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Blog30 = ({ className }: Blog30Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("bg-background py-32", className)}>
|
|
<div className="container">
|
|
<h1 className="mb-12 max-w-lg text-start font-sans text-2xll font-extrabold tracking-tight text-foreground md:text-2xll">
|
|
محتوای تازه ما را کشف کنید
|
|
</h1>
|
|
|
|
<div className="flex flex-col">
|
|
{blogPosts.map((post, index) => (
|
|
<div
|
|
key={post.id}
|
|
className="flex flex-col items-center gap-16 md:flex-row"
|
|
>
|
|
<div className="flex h-80 w-full items-center justify-center overflow-hidden rounded-3xl bg-muted md:w-140">
|
|
<img
|
|
src={post.image}
|
|
className="h-full w-full object-cover"
|
|
alt={post.imageAlt}
|
|
/>
|
|
</div>
|
|
<Card className="border-none shadow-none">
|
|
<CardContent className="p-0">
|
|
<div
|
|
className={cn(
|
|
"mb-5 flex h-90 items-start border-b py-10 md:mb-0 lg:gap-32",
|
|
index == 0 && "md:border-t",
|
|
)}
|
|
>
|
|
<div className="flex h-full w-full flex-col items-start justify-between pe-8 text-start">
|
|
<h2 className="text-xl font-bold tracking-tight text-foreground md:text-3xl">
|
|
{post.title}
|
|
</h2>
|
|
<p className="mt-2 text-sm font-semibold tracking-wide text-muted-foreground">
|
|
{post.date}
|
|
</p>
|
|
</div>
|
|
<div className="flex h-full w-full flex-col items-start justify-between gap-6 text-start">
|
|
<p className="text-lg leading-relaxed font-normal tracking-tight text-muted-foreground md:text-xl">
|
|
{post.description}
|
|
</p>
|
|
<Button
|
|
variant="ghost"
|
|
className="inline-flex items-center justify-center gap-4 px-0 text-primary transition-all ease-in-out hover:gap-6 hover:text-accent-foreground"
|
|
asChild
|
|
>
|
|
<a
|
|
href={post.href}
|
|
className="inline-flex items-center gap-4 text-lg font-semibold tracking-tight"
|
|
>
|
|
ادامه مطلب
|
|
<ArrowRightIcon className="rtl:rotate-180" />
|
|
</a>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Blog30 };
|