feat: implement dark mode infrastructure, optimize images, and add SEO structured data

app/components/ReadBooks.tsx

@@ -4,6 +4,7 @@ import { motion } from "framer-motion";
 import { BookCheck, Star, ChevronDown, ChevronUp } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useLocale, useTranslations } from "next-intl";
+import Image from "next/image";
 
 interface BookReview {
   id: string;
@@ -134,11 +135,12 @@ const ReadBooks = () => {
                 className="flex-shrink-0"
               >
                 <div className="relative w-20 h-[7.5rem] sm:w-24 sm:h-32 rounded-lg overflow-hidden shadow-lg border-2 border-white/50">
-                  <img
+                  <Image
                     src={review.book_image}
                     alt={review.book_title}
-                    className="w-full h-full object-cover"
-                    loading="lazy"
+                    fill
+                    className="object-cover"
+                    sizes="(max-width: 640px) 80px, 96px"
                   />
                   <div className="absolute inset-0 bg-gradient-to-tr from-white/20 via-transparent to-white/10 pointer-events-none" />
                 </div>