61 lines
2.2 KiB
TypeScript
61 lines
2.2 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { blogs } from "@/data/blogs";
|
|
|
|
export const metadata = {
|
|
title: "Blog | VG Fence Products",
|
|
description: "Read our latest articles about fencing installation, maintenance, and product choices for your next project.",
|
|
alternates: {
|
|
canonical: "/blog"
|
|
}
|
|
};
|
|
|
|
export default function BlogPage() {
|
|
return (
|
|
<div className="blog-index-page">
|
|
{/* ── INNER BANNER ── */}
|
|
<section className="inner-banner fade-up">
|
|
<div className="inner-banner-content">
|
|
<h1 className="section-h2">Our <span>Blog</span></h1>
|
|
<div className="banner-breadcrumb" style={{ marginTop: '30px', marginBottom: '0' }}>
|
|
<Link href="/">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
|
|
Home
|
|
</Link>
|
|
<span className="separator">/</span>
|
|
<span>Blog</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ── BLOG GRID ── */}
|
|
<section className="blog-grid-section">
|
|
<div className="blog-grid">
|
|
{blogs.map((blog) => (
|
|
<Link href={`/blog/${blog.slug}`} key={blog.id} className="blog-card post-card">
|
|
<div className="blog-card-img">
|
|
<Image
|
|
src={blog.image}
|
|
alt={blog.title}
|
|
fill
|
|
style={{ objectFit: 'cover' }}
|
|
/>
|
|
<div className="blog-card-category">{blog.category}</div>
|
|
</div>
|
|
<div className="blog-card-body">
|
|
<div className="blog-card-date">{blog.date}</div>
|
|
<h3 className="blog-card-title">{blog.title}</h3>
|
|
<p className="blog-card-excerpt">{blog.excerpt}</p>
|
|
<div className="blog-card-footer">
|
|
<span className="read-more">Read Article <i className="arrow-icon">→</i></span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
);
|
|
}
|