Merge branch 'feature/web-vitals-optimization' into dev

src/app/[locale]/about/page.tsx

@@ -5,6 +5,7 @@ import { getPageMetadata } from "@/lib/i18n/pageMetadata";
 import { isValidLocale, DEFAULT_LOCALE, type Locale } from "@/lib/i18n/locales";
 import { getPageKeywords } from "@/lib/seo/keywords";
 import { Metadata } from "next";
+import Image from "next/image";
 
 const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://manoonoils.com";
 
@@ -67,10 +68,13 @@ export default async function AboutPage({ params }: AboutPageProps) {
         </div>
 
         <div className="relative h-[400px] md:h-[500px] overflow-hidden">
-          <img
+          <Image
             src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=2000&auto=format&fit=crop"
             alt={metadata.about.productionAlt}
-            className="w-full h-full object-cover"
+            fill
+            priority
+            className="object-cover"
+            sizes="100vw"
           />
           <div className="absolute inset-0 bg-black/20" />
         </div>

src/app/[locale]/layout.tsx

@@ -60,7 +60,7 @@ export default async function LocaleLayout({
       <Script
         src="/api/script.js"
         data-site-id={RYBBIT_SITE_ID}
-        strategy="afterInteractive"
+        strategy="lazyOnload"
       />
       <NextIntlClientProvider messages={messages}>
         {children}

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>

src/app/globals.css

@@ -53,8 +53,7 @@
   --color-cta-hover: #333333;
   --color-overlay: rgba(0, 0, 0, 0.4);
   
-  --font-display: 'DM Sans', sans-serif;
-  --font-body: 'Inter', sans-serif;
+  /* Font variables will be set by next/font in layout.tsx */
   
   --transition-fast: 150ms ease;
   --transition-base: 250ms ease;
@@ -66,26 +65,9 @@
   --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
 }
 
-/* ============================================
-   FONT IMPORTS
-   ============================================ */
-
-@font-face {
-  font-family: 'DM Sans';
-  src: url('https://fonts.gstatic.com/s/dmsans/v15/rP2tp2ywxg089UriI5-g4vlH9VoD8CmcqZG40F9JadbnoEwAopxhS2f3ZGMZpg.woff2') format('woff2');
-  font-weight: 400 700;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: 'Inter';
-  src: url('https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_EeA.woff2') format('woff2');
-  font-weight: 400 700;
-  font-display: swap;
-}
-
 /* ============================================
    BASE STYLES (in Tailwind base layer)
+   Fonts loaded via next/font in layout.tsx
    ============================================ */
 
 @layer base {
@@ -266,6 +248,38 @@
   }
 }
 
+/* ============================================
+   SCROLL INDICATOR ANIMATION
+   ============================================ */
+
+@keyframes scrollBounce {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(8px); }
+}
+
+.scroll-indicator {
+  animation: scrollBounce 1.5s ease-in-out infinite;
+}
+
+/* ============================================
+   FADE SLIDE UP ANIMATION
+   ============================================ */
+
+@keyframes fadeSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fadeSlideUp {
+  animation: fadeSlideUp 0.6s ease-out both;
+}
+
 /* ============================================
    UTILITIES
    ============================================ */

src/app/layout.tsx

@@ -1,9 +1,22 @@
 import "./globals.css";
 import type { Metadata, Viewport } from "next";
+import { DM_Sans, Inter } from "next/font/google";
 import ErrorBoundary from "@/components/providers/ErrorBoundary";
 import { SUPPORTED_LOCALES } from "@/lib/i18n/locales";
 import { OrganizationSchema } from "@/components/seo";
 
+const dmSans = DM_Sans({
+  subsets: ["latin"],
+  variable: "--font-display",
+  display: "swap",
+});
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-body",
+  display: "swap",
+});
+
 const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://manoonoils.com";
 
 export const metadata: Metadata = {
@@ -39,7 +52,7 @@ export default async function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html suppressHydrationWarning>
+    <html suppressHydrationWarning className={`${dmSans.variable} ${inter.variable}`}>
       <body className="antialiased" suppressHydrationWarning>
         <ErrorBoundary>
           {children}