100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
import Image from "next/image";
|
|
import { ChevronRight } from "lucide-react";
|
|
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export function Blog() {
|
|
const t = useTranslations();
|
|
const blogPosts = [
|
|
{
|
|
id: 1,
|
|
image: "/images/img14.webp",
|
|
category: "Tips & Trick",
|
|
title: t("home.blog.articles.article1"),
|
|
author: "John Doe",
|
|
date: "July 24, 2025",
|
|
},
|
|
{
|
|
id: 2,
|
|
image: "/images/img15.webp",
|
|
category: "Insight",
|
|
title: t("home.blog.articles.article2"),
|
|
author: "John Doe",
|
|
date: "July 24, 2025",
|
|
},
|
|
{
|
|
id: 3,
|
|
image: "/images/img16.webp",
|
|
category: "News",
|
|
title: t("home.blog.articles.article3"),
|
|
author: "John Doe",
|
|
date: "July 24, 2025",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="bg-[#1f1f1f] py-45">
|
|
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
{/* Header */}
|
|
<div className="mb-12 text-center">
|
|
<div className="mb-4 flex items-center justify-center gap-2">
|
|
<DotAnimatsiya />
|
|
<span className="text-sm font-semibold tracking-wider text-white uppercase">
|
|
{t("home.blog.title")}
|
|
</span>
|
|
</div>
|
|
<h2
|
|
className="bg-linear-to-br from-white via-white to-black
|
|
text-transparent bg-clip-text text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl"
|
|
>
|
|
{t("home.blog.subtitle")}
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Blog Cards Grid */}
|
|
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 max-sm:place-items-center">
|
|
{blogPosts.map((post) => (
|
|
<article key={post.id} className="group">
|
|
{/* Image Container */}
|
|
<div className="relative mb-6 aspect-4/2 md:aspect-4/3 overflow-hidden rounded-lg">
|
|
<Image
|
|
src={post.image || "/placeholder.svg"}
|
|
alt={post.title}
|
|
fill
|
|
className="object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
{/* Category Badge */}
|
|
<div className="absolute bottom-4 left-4">
|
|
<span className="rounded bg-red-600 px-4 py-2 text-sm font-medium text-white">
|
|
{post.category}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div>
|
|
<h3 className="mb-3 text-lg font-bold leading-tight tracking-wide text-white uppercase md:text-xl">
|
|
{post.title}
|
|
</h3>
|
|
<p className="mb-4 text-sm text-gray-400">
|
|
<span className="text-gray-500">by </span>
|
|
<span className="text-white">{post.author}</span>
|
|
<span className="mx-2 text-gray-500">•</span>
|
|
<span className="text-gray-400">{post.date}</span>
|
|
</p>
|
|
<a
|
|
href="#"
|
|
className="inline-flex items-center gap-1 text-sm font-semibold tracking-wider text-red-600 uppercase transition-colors hover:text-red-500"
|
|
>
|
|
{t("home.blog.readMore")}
|
|
<ChevronRight className="h-4 w-4" />
|
|
</a>
|
|
</div>
|
|
</article>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|