first commit
This commit is contained in:
111
components/FleetSection.tsx
Normal file
111
components/FleetSection.tsx
Normal file
@@ -0,0 +1,111 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const VEHICLES = [
|
||||
{
|
||||
title: "Liebherr LTM 1100",
|
||||
category: "Mobil Teleskopik Vinç",
|
||||
specs: [
|
||||
{ label: "Kapasite", value: "100 TON" },
|
||||
{ label: "Bom Uzunluğu", value: "60 METRE" },
|
||||
],
|
||||
status: "Mevcut",
|
||||
statusColor: "bg-primary text-on-primary",
|
||||
image: "https://lh3.googleusercontent.com/aida-public/AB6AXuDz5b4r2KouL9upv0olAupqoFkF2Irw10VTeLh8XSl4F94ujjrHJ6keKViHybvoJlR3RgL-WrvsCYDjKNuVYUdALEH7KEjvZmZm40mxJWzQGN_aFUEllY41CpcYxAmHjiyrkgTKgEh9qZuDQ62Pzi-sffDKM9dv8bNg3YWH-ypFworfKyQiaXgLS0wucMj9LpVlzzl2zXrKv6WTv8hJr986CWoKM8b1mTI8ajgq_2oF9vltwrfrZDT8LYEKtgGSmIM84AAlzqZXwMU",
|
||||
},
|
||||
{
|
||||
title: "Hiyap 75 Ton",
|
||||
category: "Kamyon Üstü Vinç",
|
||||
specs: [
|
||||
{ label: "Kapasite", value: "75 TON" },
|
||||
{ label: "Erişim", value: "35 METRE" },
|
||||
],
|
||||
status: "Mevcut",
|
||||
statusColor: "bg-primary text-on-primary",
|
||||
image: "https://lh3.googleusercontent.com/aida-public/AB6AXuCTUgbJ7VOHrnV2PY8AX4lAxBfdbp3hP7HdMRv4RJsWYQv6_coiWlqlodtyBjta-2PoSZnOXc1pKQHpbZGS9_6VLIUPyZ-sUH15ENiBjf466dq7GpPBHpS1uqFXm44tK_ZJ0okneK2mtHwo5h459sPzZ5iXakBitbs70sI0X86VQm2dePia2r1weEXW6Znhn8pOcB_hwLybrmfyEhr-b47X20UbQrbSFp2WCIGZUv4IsAlgn775KDuQH96BvaSLC56kOZG8Q5S9Tu0",
|
||||
},
|
||||
{
|
||||
title: "Teleskopik Platform",
|
||||
category: "Yüksek İrtifa Erişimi",
|
||||
specs: [
|
||||
{ label: "Yükseklik", value: "45 METRE" },
|
||||
{ label: "Sepet Kapasitesi", value: "300 KG" },
|
||||
],
|
||||
status: "Bakımda",
|
||||
statusColor: "bg-error-container text-white",
|
||||
image: "https://lh3.googleusercontent.com/aida-public/AB6AXuBfXE8_qXbdFXu-5NJjxR_il3lZOkzp6NaLTMMtNr_1_dO0ohKzutRHZLm3Rs3xuwheOE_PUWTDxIavnRfKcdCpASPX9AlxSuZFWaZKax5RWmgLnIBk-ojo_XghFLjC1ES1ACDK-PdB901GE3AxkMj-lWSFkbU8PaUhJ9XxizBHb4BVtvej64-5uXmm9e99Cax1_Xs8_Hm9L7uR8PRX5teGng9Q1gxbGbFCAQw5WG3cZrPESDEbj4osSFEwW8lokMlO0uB9xsaGZxw",
|
||||
},
|
||||
];
|
||||
|
||||
export function FleetSection() {
|
||||
return (
|
||||
<section className="py-24 md:py-32 bg-surface-container-low overflow-hidden" id="Fleet">
|
||||
<div className="px-6 md:px-12 mb-16 md:mb-24 flex flex-col md:flex-row justify-between items-start md:items-end gap-8">
|
||||
<div>
|
||||
<h2 className="font-headline text-5xl md:text-8xl font-bold tracking-tighter text-stroke uppercase leading-none">Makine Parkuru</h2>
|
||||
<h3 className="font-headline text-3xl md:text-5xl font-bold text-white -mt-4 md:-mt-8">Modern ve Güçlü Filo</h3>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="h-1 w-12 bg-primary"></div>
|
||||
<div className="h-1 w-4 bg-primary/30"></div>
|
||||
<div className="h-1 w-4 bg-primary/30"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-6 md:gap-12 overflow-x-auto no-scrollbar px-6 md:px-12 pb-12 cursor-grab active:cursor-grabbing">
|
||||
{VEHICLES.map((v, idx) => (
|
||||
<motion.div
|
||||
key={v.title}
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: idx * 0.1, duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="min-w-[320px] md:min-w-[500px] bg-surface-container-lowest flex flex-col group shadow-2xl"
|
||||
>
|
||||
<div className="h-64 md:h-96 overflow-hidden relative">
|
||||
<img
|
||||
className="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-1000 group-hover:scale-105"
|
||||
src={v.image}
|
||||
alt={v.title}
|
||||
/>
|
||||
<div className={cn("absolute top-0 left-0 px-4 py-2 font-label text-[10px] font-bold uppercase tracking-widest", v.statusColor)}>
|
||||
{v.status}
|
||||
</div>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-surface-container-lowest via-transparent to-transparent opacity-60"></div>
|
||||
</div>
|
||||
<div className="p-8 md:p-12">
|
||||
<div className="flex justify-between items-start mb-8">
|
||||
<div>
|
||||
<h4 className="font-headline text-2xl md:text-3xl font-bold text-white mb-2 uppercase tracking-tight">{v.title}</h4>
|
||||
<span className="font-label text-xs text-primary uppercase tracking-[0.2em] font-bold">{v.category}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-px bg-outline-variant/20">
|
||||
{v.specs.map(spec => (
|
||||
<div key={spec.label} className="bg-surface-container-lowest p-6 transition-colors hover:bg-surface-container-low">
|
||||
<span className="block font-label text-[10px] text-on-surface-variant uppercase mb-2 tracking-widest">{spec.label}</span>
|
||||
<span className="font-headline font-bold text-xl md:text-2xl text-white">{spec.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="w-full mt-8 py-4 font-headline font-bold uppercase tracking-widest text-xs border border-white/5 hover:bg-white hover:text-black transition-all">
|
||||
Teknik Katalog
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
{/* Visual cue for more items */}
|
||||
<div className="min-w-[100px] flex items-center justify-center">
|
||||
<span className="font-headline text-white/10 text-9xl font-black select-none">NEXT</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="px-6 md:px-12 mt-8 flex items-center gap-4">
|
||||
<span className="font-label text-[10px] uppercase tracking-widest text-on-surface-variant">Kaydırarak inceleyin</span>
|
||||
<div className="h-px flex-1 bg-white/5"></div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user