Kabuswe
Mulenga

1// Next.js App Router Page Component with TypeScript
2import { Metadata } from 'next';
3import { getProducts } from '@/lib/api';
4import ProductCard from '@/components/ProductCard';
5
6// Static metadata for SEO optimization
7export const metadata: Metadata = {
8  title: 'Our Products | DIGICOM',
9  description: 'Browse our comprehensive range of IT solutions and services',
10  openGraph: {
11    images: ['/images/products-banner.jpg'],
12  },
13};
14
15// Server Component with data fetching
16export default async function ProductsPage() {
17  // Data fetching using Server Components
18  const products = await getProducts();
19  
20  return (
21    <main className="container mx-auto px-4 py-8">
22      <h1 className="text-3xl font-bold mb-8 text-center">
23        Our Products
24      </h1>
25      
26      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
27        {products.map((product) => (
28          <ProductCard 
29            key={product.id}
30            product={product}
31          />
32        ))}
33      </div>
34    </main>
35  );
36}