81 lines
2.9 KiB
TypeScript
81 lines
2.9 KiB
TypeScript
|
||
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
|
||
import { Button } from "@/components/ui/button"
|
||
import Image from "next/image"
|
||
|
||
const products = [
|
||
{
|
||
id: 1,
|
||
name: "Ev Tipi Çelik Kasa",
|
||
image: "/images/safe-1.jpg",
|
||
category: "Ev",
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "Ofis Tipi Yanmaz Kasa",
|
||
image: "/images/safe-2.jpg",
|
||
category: "Ofis",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "Otel Odası Kasası",
|
||
image: "/images/safe-3.jpg",
|
||
category: "Otel",
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "Silah Kasası (Tüfek)",
|
||
image: "/images/safe-4.jpg",
|
||
category: "Özel",
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "Kuyumcu Kasası",
|
||
image: "/images/safe-5.jpg",
|
||
category: "Ticari",
|
||
},
|
||
{
|
||
id: 6,
|
||
name: "Duvar İçi Gizli Kasa",
|
||
image: "/images/safe-6.jpg",
|
||
category: "Ev",
|
||
},
|
||
]
|
||
|
||
export default function ProductsPage() {
|
||
return (
|
||
<div className="container py-12 md:py-24">
|
||
<div className="flex flex-col items-center mb-12 text-center">
|
||
<h1 className="text-4xl font-bold tracking-tight mb-4 font-outfit">Ürün Koleksiyonumuz</h1>
|
||
<p className="text-muted-foreground max-w-2xl">
|
||
Güvenliğiniz için en son teknoloji ile üretilmiş, sertifikalı çelik kasa çözümlerimizi inceleyin.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{products.map((product) => (
|
||
<Card key={product.id} className="overflow-hidden border-0 shadow-md hover:shadow-xl transition-all duration-300">
|
||
<div className="aspect-[4/5] relative bg-slate-100 dark:bg-slate-800">
|
||
{/* Placeholder for real images */}
|
||
<div className="absolute inset-0 flex items-center justify-center text-slate-400">
|
||
<span className="text-sm">Görsel: {product.name}</span>
|
||
</div>
|
||
</div>
|
||
<CardHeader className="p-4">
|
||
<div className="flex justify-between items-start">
|
||
<div>
|
||
<span className="text-xs font-medium text-slate-500 uppercase tracking-wider">{product.category}</span>
|
||
<CardTitle className="text-lg mt-1">{product.name}</CardTitle>
|
||
</div>
|
||
</div>
|
||
</CardHeader>
|
||
<CardFooter className="p-4 pt-0">
|
||
<Button className="w-full">Detayları İncele</Button>
|
||
</CardFooter>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|