fix(seo): resolve pagespeed insights performance and accessibility issues
- Add priority to hero image and replace css background-image with Next.js Image component for faster LCP - Add aria-label and aria-expanded to mobile menu button in Navbar - Add aria-label to social media links in Footer - Replace css background-image with Next.js Image component in CTA and Services sections
This commit is contained in:
+21
-12
@@ -119,10 +119,14 @@ export default function HomeClient({ lang, dict }: { lang: string; dict: any })
|
|||||||
|
|
||||||
{/* ── Hero ── */}
|
{/* ── Hero ── */}
|
||||||
<section className="relative h-screen flex items-center justify-center overflow-hidden moy-grain">
|
<section className="relative h-screen flex items-center justify-center overflow-hidden moy-grain">
|
||||||
<div
|
<div className="absolute inset-0 scale-105">
|
||||||
className="absolute inset-0 bg-cover bg-center bg-no-repeat scale-105"
|
<Image
|
||||||
style={{ backgroundImage: `url(${HERO_BG})` }}
|
src={HERO_BG}
|
||||||
>
|
alt="Moy Group Hero"
|
||||||
|
fill
|
||||||
|
priority
|
||||||
|
className="object-cover object-center"
|
||||||
|
/>
|
||||||
<div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/30 to-black/60" />
|
<div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/30 to-black/60" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -246,9 +250,12 @@ export default function HomeClient({ lang, dict }: { lang: string; dict: any })
|
|||||||
whileHover={{ y: -10 }}
|
whileHover={{ y: -10 }}
|
||||||
className="group relative h-80 overflow-hidden cursor-pointer"
|
className="group relative h-80 overflow-hidden cursor-pointer"
|
||||||
>
|
>
|
||||||
<div
|
<Image
|
||||||
className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
|
src={service.bg}
|
||||||
style={{ backgroundImage: `url(${service.bg})` }}
|
alt={service.title}
|
||||||
|
fill
|
||||||
|
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 20vw"
|
||||||
|
className="absolute inset-0 object-cover object-center transition-transform duration-700 group-hover:scale-110"
|
||||||
/>
|
/>
|
||||||
<div className="absolute inset-0 bg-gradient-to-t from-[var(--color-moy-dark)] via-[var(--color-moy-dark)]/50 to-transparent" />
|
<div className="absolute inset-0 bg-gradient-to-t from-[var(--color-moy-dark)] via-[var(--color-moy-dark)]/50 to-transparent" />
|
||||||
|
|
||||||
@@ -380,12 +387,14 @@ export default function HomeClient({ lang, dict }: { lang: string; dict: any })
|
|||||||
|
|
||||||
{/* ── CTA Banner ── */}
|
{/* ── CTA Banner ── */}
|
||||||
<section className="relative py-32 overflow-hidden bg-[var(--color-moy-dark)]">
|
<section className="relative py-32 overflow-hidden bg-[var(--color-moy-dark)]">
|
||||||
<div
|
<div className="absolute inset-0 opacity-20">
|
||||||
className="absolute inset-0 bg-cover bg-center opacity-20"
|
<Image
|
||||||
style={{
|
src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&q=60&w=1600"
|
||||||
backgroundImage: `url(https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&q=60&w=1600)`,
|
alt="Moy Group CTA Background"
|
||||||
}}
|
fill
|
||||||
|
className="object-cover object-center"
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
<div className="absolute inset-0 bg-gradient-to-r from-[var(--color-moy-dark)] via-transparent to-[var(--color-moy-dark)]" />
|
<div className="absolute inset-0 bg-gradient-to-r from-[var(--color-moy-dark)] via-transparent to-[var(--color-moy-dark)]" />
|
||||||
|
|
||||||
<div className="relative max-w-3xl mx-auto px-6 text-center">
|
<div className="relative max-w-3xl mx-auto px-6 text-center">
|
||||||
|
|||||||
@@ -15,10 +15,10 @@ export default function Footer({ lang, dict }: { lang: Locale; dict: any }) {
|
|||||||
{dict.description}
|
{dict.description}
|
||||||
</p>
|
</p>
|
||||||
<div className="flex gap-4 pt-4">
|
<div className="flex gap-4 pt-4">
|
||||||
<a href="#" className="text-gray-400 hover:text-[var(--color-moy-gold)] transition-colors">
|
<a href="#" aria-label="Instagram" className="text-gray-400 hover:text-[var(--color-moy-gold)] transition-colors">
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" /></svg>
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" /><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" /><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" /></svg>
|
||||||
</a>
|
</a>
|
||||||
<a href="#" className="text-gray-400 hover:text-[var(--color-moy-gold)] transition-colors">
|
<a href="#" aria-label="Facebook" className="text-gray-400 hover:text-[var(--color-moy-gold)] transition-colors">
|
||||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg>
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" /></svg>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -80,6 +80,8 @@ export default function Navbar({ lang, dict }: { lang: Locale; dict: any }) {
|
|||||||
|
|
||||||
{/* Mobile menu button */}
|
{/* Mobile menu button */}
|
||||||
<button
|
<button
|
||||||
|
aria-label={mobileMenuOpen ? "Menüyü kapat" : "Menüyü aç"}
|
||||||
|
aria-expanded={mobileMenuOpen}
|
||||||
className="md:hidden text-white"
|
className="md:hidden text-white"
|
||||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user