feat(performance): Core Web Vitals optimizations

- Font optimization: Replace @font-face with next/font/google (DM Sans, Inter) for faster font loading and no render-blocking
- Image optimization: Add Unsplash to remotePatterns, configure AVIF/WebP formats, add device/image sizes
- Convert native <img> tags to next/image with proper sizing and priority for LCP images
- Add optimizePackageImports for lucide-react and framer-motion to reduce bundle size
- Fix CLS: Urgency message uses fixed min-height instead of animated height
- Fix CLS: ProductCard quick-add button uses opacity instead of translate for hover
- Convert HeroVideo scroll indicator to CSS animation
- Script loading: Rybbit uses lazyOnload strategy for better INP

src/app/[locale]/page.tsx

@@ -14,6 +14,7 @@ import { getPageMetadata } from "@/lib/i18n/pageMetadata";
 import { isValidLocale, DEFAULT_LOCALE, getSaleorLocale, type Locale } from "@/lib/i18n/locales";
 import { getPageKeywords, getBrandKeywords } from "@/lib/seo/keywords";
 import { Metadata } from "next";
+import Image from "next/image";
 
 const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://manoonoils.com";
 
@@ -157,10 +158,12 @@ export default async function Homepage({ params }: { params: Promise<{ locale: s
                   </a>
                 </div>
                 <div className="relative aspect-[4/3] bg-[#e8f0f5] rounded-lg overflow-hidden">
-                  <img
+                  <Image
                     src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=800&auto=format&fit=crop"
                     alt={metadata.home.productionAlt}
-                    className="w-full h-full object-cover"
+                    fill
+                    className="object-cover"
+                    sizes="(max-width: 768px) 100vw, 50vw"
                   />
                 </div>
               </div>