fix: resolve broken image URLs and add missing sizes prop to all Image components

This commit is contained in:
2026-04-12 13:43:57 +03:00
parent 49e62e2156
commit ae4677d27e
8 changed files with 18 additions and 7 deletions

View File

@@ -24,9 +24,10 @@ export default function FleetPage() {
<header className="relative h-[70vh] flex items-end overflow-hidden bg-surface-container-lowest"> <header className="relative h-[70vh] flex items-end overflow-hidden bg-surface-container-lowest">
<div className="absolute inset-0 z-0"> <div className="absolute inset-0 z-0">
<Image <Image
src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop" src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
alt="Heavy crane" alt="Heavy crane"
fill fill
sizes="100vw"
className="object-cover grayscale opacity-60" className="object-cover grayscale opacity-60"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-surface via-transparent to-transparent"></div> <div className="absolute inset-0 bg-gradient-to-t from-surface via-transparent to-transparent"></div>

View File

@@ -50,9 +50,10 @@ export default function AboutPage() {
<section className="relative h-[60vh] flex items-center justify-center overflow-hidden"> <section className="relative h-[60vh] flex items-center justify-center overflow-hidden">
<div className="absolute inset-0 z-0"> <div className="absolute inset-0 z-0">
<Image <Image
src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop" src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
alt="Crane at sunset" alt="Crane at sunset"
fill fill
sizes="100vw"
className="object-cover grayscale opacity-60" className="object-cover grayscale opacity-60"
/> />
<div className="absolute inset-0 bg-gradient-to-b from-surface/40 to-surface/90"></div> <div className="absolute inset-0 bg-gradient-to-b from-surface/40 to-surface/90"></div>
@@ -78,6 +79,7 @@ export default function AboutPage() {
src="https://images.unsplash.com/photo-1578319439584-104c94d37305?q=80&w=2070&auto=format&fit=crop" src="https://images.unsplash.com/photo-1578319439584-104c94d37305?q=80&w=2070&auto=format&fit=crop"
alt="Crane operation" alt="Crane operation"
fill fill
sizes="(max-width: 768px) 100vw, 50vw"
className="object-cover grayscale hover:grayscale-0 transition-all duration-700" className="object-cover grayscale hover:grayscale-0 transition-all duration-700"
/> />
</div> </div>

View File

@@ -51,9 +51,10 @@ export default function ServicesPage() {
<section className="relative h-[60vh] flex items-center justify-start overflow-hidden px-8 md:px-16 border-b border-outline-variant/10"> <section className="relative h-[60vh] flex items-center justify-start overflow-hidden px-8 md:px-16 border-b border-outline-variant/10">
<div className="absolute inset-0 z-0"> <div className="absolute inset-0 z-0">
<Image <Image
src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop" src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
alt="Cranes at sunset" alt="Cranes at sunset"
fill fill
sizes="100vw"
className="object-cover opacity-40 grayscale" className="object-cover opacity-40 grayscale"
/> />
<div className="absolute inset-0 bg-gradient-to-r from-background via-background/80 to-transparent"></div> <div className="absolute inset-0 bg-gradient-to-r from-background via-background/80 to-transparent"></div>
@@ -110,6 +111,7 @@ export default function ServicesPage() {
src={service.image} src={service.image}
alt={service.title} alt={service.title}
fill fill
sizes="(max-width: 768px) 100vw, 25vw"
className="object-contain object-right-bottom" className="object-contain object-right-bottom"
/> />
</div> </div>

View File

@@ -22,6 +22,7 @@ export default function ContactPage() {
src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?q=80&w=2070&auto=format&fit=crop" src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?q=80&w=2070&auto=format&fit=crop"
alt="Industrial machinery" alt="Industrial machinery"
fill fill
sizes="100vw"
className="object-cover grayscale" className="object-cover grayscale"
/> />
<div className="absolute inset-0 bg-gradient-to-r from-surface via-surface/80 to-transparent"></div> <div className="absolute inset-0 bg-gradient-to-r from-surface via-surface/80 to-transparent"></div>
@@ -111,6 +112,7 @@ export default function ContactPage() {
src="https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?q=80&w=2066&auto=format&fit=crop" src="https://images.unsplash.com/photo-1526778548025-fa2f459cd5c1?q=80&w=2066&auto=format&fit=crop"
alt="Dalaman map mockup" alt="Dalaman map mockup"
fill fill
sizes="100vw"
className="object-cover grayscale contrast-125 brightness-50 opacity-80" className="object-cover grayscale contrast-125 brightness-50 opacity-80"
/> />
</div> </div>

View File

@@ -73,6 +73,7 @@ export function FleetList({ items, categories }: FleetListProps) {
src={item.image} src={item.image}
alt={item.name} alt={item.name}
fill fill
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
className="object-cover transition-transform duration-700 group-hover:scale-110" className="object-cover transition-transform duration-700 group-hover:scale-110"
/> />
<div className={cn( <div className={cn(
@@ -141,6 +142,7 @@ export function FleetList({ items, categories }: FleetListProps) {
src={selectedItem.image} src={selectedItem.image}
alt={selectedItem.name} alt={selectedItem.name}
fill fill
sizes="(max-width: 1024px) 100vw, 50vw"
className="object-cover" className="object-cover"
/> />
</div> </div>

View File

@@ -18,10 +18,11 @@ export function Hero() {
<div className="absolute inset-0 z-0"> <div className="absolute inset-0 z-0">
<div className="absolute inset-0 bg-background/40 backdrop-blur-sm z-10" /> <div className="absolute inset-0 bg-background/40 backdrop-blur-sm z-10" />
<Image <Image
src="https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop" src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
alt="Industrial crane" alt="Industrial crane"
fill fill
priority priority
sizes="100vw"
className="object-cover grayscale brightness-50" className="object-cover grayscale brightness-50"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/20 z-20" /> <div className="absolute inset-0 bg-gradient-to-t from-background via-transparent to-background/20 z-20" />

View File

@@ -14,7 +14,7 @@ const SERVICES = [
{ {
title: "Mobil Vinç", title: "Mobil Vinç",
description: "300-500 ton kapasiteli teleskopik vinç çözümleri.", description: "300-500 ton kapasiteli teleskopik vinç çözümleri.",
image: "https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop" image: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
}, },
{ {
title: "Sepetli Platform", title: "Sepetli Platform",
@@ -59,6 +59,7 @@ export function ServicesPreview() {
src={service.image} src={service.image}
alt={service.title} alt={service.title}
fill fill
sizes="(max-width: 768px) 100vw, 33vw"
className="object-cover grayscale group-hover:grayscale-0 group-hover:scale-110 transition-all duration-1000 z-0" className="object-cover grayscale group-hover:grayscale-0 group-hover:scale-110 transition-all duration-1000 z-0"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent z-10" /> <div className="absolute inset-0 bg-gradient-to-t from-background via-background/20 to-transparent z-10" />

View File

@@ -21,7 +21,7 @@ export const SERVICES = [
{ {
title: "Mobil Vinç Kiralama", title: "Mobil Vinç Kiralama",
description: "500 tona kadar kaldırma kapasitesine sahip geniş filomuzla, en zorlu şantiye koşullarında yüksek hassasiyetli operasyonlar.", description: "500 tona kadar kaldırma kapasitesine sahip geniş filomuzla, en zorlu şantiye koşullarında yüksek hassasiyetli operasyonlar.",
image: "https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop" image: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop"
}, },
{ {
title: "Sepetli Platform", title: "Sepetli Platform",
@@ -46,7 +46,7 @@ export const FLEET_ITEMS = [
description: "Endüstriyel ağır kaldırma operasyonları için maksimum stabilite ve erişim gücü.", description: "Endüstriyel ağır kaldırma operasyonları için maksimum stabilite ve erişim gücü.",
capacity: "300 Ton", capacity: "300 Ton",
reach: "78 Metre", reach: "78 Metre",
image: "https://images.unsplash.com/photo-1541625602330-2277a4c4b282?q=80&w=2070&auto=format&fit=crop", image: "https://images.unsplash.com/photo-1504307651254-35680f356dfd?q=80&w=2070&auto=format&fit=crop",
status: "Müsait", status: "Müsait",
category: "Mobil Vinç" category: "Mobil Vinç"
}, },