ayrisdev/aydogannakliyat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: implement fleet filtering logic on fleet page

Browse Source
This commit is contained in:
ayrisdev
2026-04-12 13:33:04 +03:00
parent 5bde02502d
commit 4da0dbd0a6
2 changed files with 105 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
app/filomuz/page.tsx
View File

@@ -4,9 +4,9 @@ import { FloatingWhatsApp } from "@/components/FloatingWhatsApp";
import { CTASection } from "@/components/CTASection";
import { LoadMeterSection } from "@/components/LoadMeterSection";
import Image from "next/image";
import { cn } from "@/lib/utils";
import { Metadata } from "next";
import { FLEET_ITEMS } from "@/lib/data";
import { FleetList } from "@/components/FleetList";
export const metadata: Metadata = {
title: "Geniş Vinç Filosu ve İş Makineleri Parkurumuz",
@@ -44,75 +44,7 @@ export default function FleetPage() {
</div>
</header>
{/* Filter System */}
<section className="bg-surface-container border-y border-outline-variant/10">
<div className="max-w-7xl mx-auto px-8 py-6">
<div className="flex flex-wrap items-center gap-4">
<span className="text-on-surface-variant font-headline text-xs uppercase tracking-widest mr-4">Filtrele:</span>
{FLEET_CATEGORIES.map((category, index) => (
<button
key={index}
className={cn(
"px-5 py-2 text-xs font-bold uppercase tracking-wider transition-all",
index === 0
? "bg-primary text-on-primary"
: "bg-surface-container-highest text-on-surface-variant hover:text-primary"
)}
>
{category}
</button>
))}
</div>
</div>
</section>
{/* Fleet Grid */}
<section className="max-w-7xl mx-auto px-8 py-20">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-px bg-outline-variant/10">
{FLEET_ITEMS.map((item, index) => (
<div
key={index}
className="group relative bg-surface-container-low border border-outline-variant/10 overflow-hidden flex flex-col"
>
<div className="aspect-[4/3] overflow-hidden relative">
<Image
src={item.image}
alt={item.name}
fill
className="object-cover transition-transform duration-700 group-hover:scale-110"
/>
<div className={cn(
"absolute top-4 left-4 px-3 py-1 text-[10px] font-black uppercase tracking-tighter",
item.status === "Müsait" ? "bg-primary text-on-primary" : "bg-error text-on-error"
)}>
{item.status}
</div>
</div>
<div className="p-8 flex-1 flex flex-col">
<h3 className="text-2xl font-black text-on-surface uppercase tracking-tight mb-2">
{item.name}
</h3>
<p className="text-on-surface-variant text-sm mb-6 font-light">
{item.description}
</p>
<div className="grid grid-cols-2 gap-4 border-t border-outline-variant/10 pt-6 mt-auto">
<div>
<span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Kapasite</span>
<span className="text-on-surface font-headline font-bold text-xl">{item.capacity}</span>
</div>
<div>
<span className="block text-primary text-[10px] uppercase tracking-widest mb-1">Erişim</span>
<span className="text-on-surface font-headline font-bold text-xl">{item.reach}</span>
</div>
</div>
<button className="mt-8 w-full bg-surface-container-highest text-primary py-4 text-xs font-black uppercase tracking-[0.2em] hover:bg-primary hover:text-on-primary transition-all duration-300">
İncele
</button>
</div>
</div>
))}
</div>
</section>
<FleetList items={FLEET_ITEMS} categories={FLEET_CATEGORIES} />
<LoadMeterSection />
<CTASection />