50 lines
2.1 KiB
TypeScript
50 lines
2.1 KiB
TypeScript
import Link from 'next/link';
|
|
import SafeImage from '@/components/SafeImage';
|
|
import styles from './resources.module.css';
|
|
import { resources } from '@/data/resources';
|
|
|
|
export const metadata = {
|
|
title: 'Resources - SocialBuddy',
|
|
description: 'Guides, tips, and strategies to master social media marketing.',
|
|
};
|
|
|
|
export default function ResourcesPage() {
|
|
return (
|
|
<main className={styles.page}>
|
|
{/* Standardized Hero Section */}
|
|
<section className={styles.hero}>
|
|
<div className={styles.container}>
|
|
<div className={styles.heroContent}>
|
|
<h1 className={styles.heroTitle}>Resources</h1>
|
|
<div className={styles.breadcrumbs}>
|
|
<Link href="/">Home</Link> <span>/</span> <span className={styles.breadcrumbActive}>Resources</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div className={styles.container}>
|
|
<div className={styles.grid}>
|
|
{resources.map((resource) => (
|
|
<Link key={resource.id} href={`/resources/${resource.slug}`} className={styles.card}>
|
|
<div className={styles.imageWrapper}>
|
|
<SafeImage
|
|
src={resource.image}
|
|
alt={resource.title}
|
|
className={styles.image}
|
|
fallbackSrc={`https://placehold.co/600x400/png?text=${encodeURIComponent(resource.category)}`}
|
|
/>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<span className={styles.category}>{resource.category}</span>
|
|
<h2 className={styles.title}>{resource.title}</h2>
|
|
<p className={styles.excerpt}>{resource.excerpt}</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|