first commit

components/LoadMeterSection.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+const METERS = [
+  { label: "Ağır Yük Transferi", value: 85 },
+  { label: "Mobil Vinç Operasyonları", value: 95 },
+];
+
+export function LoadMeterSection() {
+  return (
+    <section className="py-24 md:py-32 px-6 md:px-12 bg-surface flex flex-col items-center">
+      <div className="w-full max-w-5xl">
+        <motion.div 
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-center mb-16 md:mb-24"
+        >
+          <span className="font-label text-xs uppercase tracking-[0.3em] text-primary font-bold mb-4 block">Operasyonel Güç</span>
+          <h3 className="font-headline text-3xl md:text-5xl font-bold uppercase tracking-tight text-white text-balance leading-none">Projeleriniz İçin Optimum Güç Hesabı</h3>
+        </motion.div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-24">
+          {METERS.map((m, idx) => (
+            <div key={m.label} className="flex flex-col">
+              <div className="flex justify-between font-label text-[10px] md:text-xs uppercase tracking-[0.2em] mb-6 font-bold">
+                <span className="text-white/60">{m.label}</span>
+                <span className="text-primary">{m.value}% Verimlilik</span>
+              </div>
+              <div className="h-4 md:h-6 w-full bg-surface-container-highest relative overflow-hidden">
+                <motion.div 
+                  initial={{ width: 0 }}
+                  whileInView={{ width: `${m.value}%` }}
+                  transition={{ duration: 1.5, delay: idx * 0.3, ease: "circOut" }}
+                  viewport={{ once: true }}
+                  className="h-full bg-primary relative"
+                >
+                    <div className="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.1)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.1)_50%,rgba(255,255,255,0.1)_75%,transparent_75%,transparent)] bg-[length:20px_20px]"></div>
+                </motion.div>
+              </div>
+              <p className="mt-4 text-xs text-on-surface-variant font-body leading-relaxed max-w-xs uppercase tracking-tighter">Sektör standartlarının üzerinde performans ve güvenlik marjı.</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}