50 lines
2.3 KiB
TypeScript
50 lines
2.3 KiB
TypeScript
"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>
|
||
);
|
||
}
|