78 lines
3.3 KiB
TypeScript
78 lines
3.3 KiB
TypeScript
import Link from "next/link";
|
|
import { ArrowUpRight } from "lucide-react";
|
|
import { SectionHeading } from "@/components/shared/SectionHeading";
|
|
|
|
const blogPosts = [
|
|
{
|
|
title: "How to Build a Custom AI Model for Your Business",
|
|
image: "https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/portrait-confident-man.jpg", // Placeholder
|
|
category: "AI Technology",
|
|
date: "March 15, 2025",
|
|
link: "/blog/custom-ai-model",
|
|
},
|
|
{
|
|
title: "The Future of Machine Learning in Enterprise",
|
|
image: "https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2025/02/Group-18301.jpg", // Placeholder
|
|
category: "Machine Learning",
|
|
date: "April 2, 2025",
|
|
link: "/blog/machine-learning-enterprise",
|
|
},
|
|
{
|
|
title: "Ethics in AI: What You Need to Know",
|
|
image: "https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/3d-woman-shape-glowing-with-bright-holographic-colors-1-min.png", // Placeholder
|
|
category: "AI Ethics",
|
|
date: "April 10, 2025",
|
|
link: "/blog/ethics-in-ai",
|
|
},
|
|
];
|
|
|
|
export function BlogSection() {
|
|
return (
|
|
<section className="bg-[#F8F9FA] px-[20px] py-[80px] md:py-[120px]">
|
|
<div className="mx-auto max-w-[1260px]">
|
|
<div className="mb-[60px] flex flex-col items-center text-center">
|
|
<SectionHeading
|
|
subtitle="blog"
|
|
title="Exploring the world of artificial intelligence with Aiero blogging"
|
|
titleClassName="max-w-[800px] text-aiero-dark"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-[30px] md:grid-cols-2 lg:grid-cols-3">
|
|
{blogPosts.map((post, index) => (
|
|
<div key={index} className="group flex flex-col overflow-hidden rounded-[25px] border border-aiero-card-border bg-white transition-shadow duration-300 hover:shadow-xl">
|
|
<div className="relative h-[250px] w-full overflow-hidden">
|
|
<img
|
|
src={post.image}
|
|
alt={post.title}
|
|
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
|
|
/>
|
|
<div className="absolute left-[20px] top-[20px] rounded-full bg-white px-[15px] py-[5px] text-[12px] font-bold tracking-wide text-aiero-dark uppercase font-[var(--font-sora)]">
|
|
{post.category}
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col p-[30px]">
|
|
<div className="mb-[15px] text-[14px] text-aiero-text-muted">
|
|
{post.date}
|
|
</div>
|
|
<h4 className="mb-[20px] text-[22px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)] transition-colors group-hover:text-aiero-accent-teal">
|
|
<Link href={post.link}>{post.title}</Link>
|
|
</h4>
|
|
<div className="mt-auto">
|
|
<Link
|
|
href={post.link}
|
|
className="inline-flex items-center gap-[10px] text-[15px] font-bold text-aiero-dark font-[var(--font-sora)] hover:text-aiero-accent-teal"
|
|
>
|
|
Read more
|
|
<ArrowUpRight className="h-[18px] w-[18px]" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|