fix(site-wide): performance enhancements

app/reports/[slug]/page.tsx

@@ -11,6 +11,7 @@ import type { Report } from "@/types";
 import parse from "html-react-parser";
 import { ChevronLeft, MapPin } from "lucide-react";
 import type { Metadata } from "next";
+import Image from "next/image";
 import Link from "next/link";
 
 interface ReportPageProps {
@@ -114,11 +115,14 @@ export default async function ReportPage({ params }: ReportPageProps) {
 							<h3 className="font-bold text-2xl pb-3">Summary</h3>
 							<p className="text-wrap leading-relaxed">{report.summary}</p>
 						</div>
-						<img
-							src={report.image}
-							alt="Report illustration"
-							className="rounded-2xl md:h-[420px] md:object-cover md:w-full"
-						/>
+						<div className="relative rounded-2xl md:h-[420px] h-[358px] w-full overflow-hidden">
+							<Image
+								src={report.image}
+								alt="Report illustration"
+								className="-z-10 object-cover bg-center"
+								fill
+							/>
+						</div>
 						{htmlParsedStory && (
 							<article className="prose text-vd-blue-900">
 								{htmlParsedStory}

app/reports/page.tsx

@@ -1,3 +1,8 @@
+import Image from "next/image";
+
+import hero from "@/assets/hero_img.webp";
+import noReportsImage from "@/assets/history-bg.svg";
+
 import { ReportsView } from "@/components/reports/reports-view";
 import VoicedeckStats from "@/components/reports/voicedeck-stats";
 import { siteConfig } from "@/config/site";
@@ -27,7 +32,17 @@ export default async function ReportsPage() {
 	return (
 		<main className="flex flex-col gap-4 pb-[64px] md:pb-0">
 			<section className="flex flex-col items-center p-4 md:p-8 gap-4">
-				<header className="w-full flex flex-col justify-end bg-[url('/hero_img.jpg')] bg-cover bg-center max-w-screen-xl min-[2560px]:max-w-screen-2xl h-[420px] 2xl:h-[520px] min-[2560px]:h-[720px] text-vd-beige-100 rounded-3xl p-4 md:p-8 2xl:p-16">
+				<header className="relative overflow-hidden w-full flex flex-col justify-end max-w-screen-xl min-[2560px]:max-w-screen-2xl h-[420px] 2xl:h-[520px] min-[2560px]:h-[720px] text-vd-beige-100 rounded-3xl p-4 md:p-8 2xl:p-16">
+					<Image
+						className="object-cover bg-center -z-10"
+						src={hero}
+						alt="Hero Image"
+						placeholder="blur"
+						sizes="(min-width: 2560px) 1536px, (min-width: 1400px) 1280px, 93.7vw"
+						fill
+						priority
+					/>
+
 					<h1 className="text-3xl lg:text-5xl 2xl:text-7xl font-bold text-left max-w-screen-md 2xl:max-w-screen-lg">
 						{siteConfig.title}
 					</h1>
@@ -46,12 +61,10 @@ export default async function ReportsPage() {
 					<ReportsView reports={uniqueReports} />
 				</FilterProvider>
 			) : (
-				<section className="flex flex-col items-center w-full pt-6 pb-24 md:pb-6">
-					<img
-						className="h-18 w-full md:w-96"
-						src="/history-bg.svg"
-						alt="circular pattern"
-					/>
+				<section className="flex flex-col gap-4 items-center w-full pt-6 pb-24 md:pb-6">
+					<div className="relative h-20 md:h-40 w-full">
+						<Image fill src={noReportsImage} alt="circular pattern" />
+					</div>
 					<div className="text-vd-beige-600 text-xl font-bold text-center">
 						<p>Sorry, something went wrong.</p>
 						<p>Reports cannot be displayed right now.</p>

components.json

@@ -12,7 +12,7 @@
   },
   "aliases": {
     "components": "@/components",
-		"hooks": "@/hooks",
+    "hooks": "@/hooks",
     "utils": "@/lib/utils"
   }
-}
+}

components/global/footer.tsx

@@ -1,5 +1,7 @@
 "use client";
 import { ArrowUpRight, Menu, Newspaper, X } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
 
 import { buttonVariants } from "@/components/ui/button";
 import {
@@ -12,7 +14,6 @@ import {
 } from "@/components/ui/drawer";
 import { externalLinks } from "@/config/site";
 import { cn } from "@/lib/utils";
-import Link from "next/link";
 import { WalletProfile } from "./wallet-profile";
 
 const Footer = () => {
@@ -58,8 +59,10 @@ const MobileFooter = () => {
 						<DrawerContent>
 							<DrawerHeader>
 								<div className="flex justify-center">
-									<img
+									<Image
 										className="h-10 w-10"
+										height={20}
+										width={20}
 										src={"/logo.svg"}
 										alt="VoiceDeck Logo"
 									/>
@@ -106,7 +109,13 @@ const DesktopFooter = () => {
 		<div className="hidden md:flex md:container h-32 items-center justify-between">
 			<div className="flex flex-col">
 				<Link href={"/reports"} passHref className="flex items-center gap-2">
-					<img className="h-8 w-8" src={"/logo.svg"} alt="VoiceDeck Logo" />
+					<Image
+						className="h-8 w-8"
+						height={8}
+						width={8}
+						src={"/logo.svg"}
+						alt="VoiceDeck Logo"
+					/>
 					<h3 className="text-2xl font-bold tracking-tight">VoiceDeck</h3>
 				</Link>
 				<p className="text-base font-medium pt-2">

components/reports/report-card.tsx

@@ -45,10 +45,11 @@ const ReportCard: React.FC<ReportCardProps> = ({
 				<CardHeader className="p-0">
 					<div className="relative w-full h-40 overflow-hidden rounded-t-3xl">
 						<Image
+							className="object-cover bg-center"
 							src={image}
 							alt={title}
+							sizes="(min-width: 780px) 278px, (min-width: 640px) 248px, (min-width: 420px) calc(100vw - 26px), calc(20vw + 294px)"
 							fill
-							style={{ objectFit: "cover", objectPosition: "center" }}
 						/>
 					</div>
 					<section className="flex flex-col gap-1 px-5 py-2">