first commit

app/filomuz/page.tsx

@@ -0,0 +1,123 @@
+import { Navbar } from "@/components/Navbar";
+import { Footer } from "@/components/Footer";
+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";
+
+export const metadata: Metadata = {
+  title: "Geniş Vinç Filosu ve İş Makineleri Parkurumuz",
+  description: "300 tondan 500 tona kadar mobil vinçler, sepetli platformlar ve hiyap vinçlerden oluşan modern araç filomuzla hizmetinizdeyiz.",
+};
+
+const FLEET_CATEGORIES = ["Hepsi", "Mobil Vinç", "Sepetli Platform", "Hiyap", "Kule Vinç"];
+
+export default function FleetPage() {
+  return (
+    <main className="relative min-h-screen flex flex-col bg-background selection:bg-primary selection:text-on-primary">
+      <Navbar />
+      
+      {/* Hero Section */}
+      <header className="relative h-[70vh] flex items-end overflow-hidden bg-surface-container-lowest">
+        <div className="absolute inset-0 z-0">
+          <Image 
+            src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop"
+            alt="Heavy crane"
+            fill
+            className="object-cover grayscale opacity-60"
+          />
+          <div className="absolute inset-0 bg-gradient-to-t from-surface via-transparent to-transparent"></div>
+        </div>
+        <div className="relative z-10 w-full px-8 pb-16">
+          <div className="max-w-7xl mx-auto">
+            <span className="text-primary font-headline font-bold text-sm tracking-[0.3em] uppercase mb-4 block">
+              PREZİSYONEL GÜÇ
+            </span>
+            <h1 className="text-6xl md:text-8xl font-black text-on-surface uppercase tracking-tighter leading-none mb-6">
+              MAKİNE <br/><span className="text-primary">PARKURUMUZ</span>
+            </h1>
+            <div className="w-24 h-2 bg-primary"></div>
+          </div>
+        </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>
+
+      <LoadMeterSection />
+      <CTASection />
+      <Footer />
+      <FloatingWhatsApp />
+    </main>
+  );
+}