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

2026-03-31 13:22:45 +02:00
parent 66829aeffd 1c5ec1a271
commit e87c655a5b
9 changed files with 135 additions and 106 deletions
--- a/next.config.ts
+++ b/next.config.ts
@@ -37,6 +37,9 @@ const nextConfig: NextConfig = {
    ];
  },
  images: {
+    formats: ["image/avif", "image/webp"],
+    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    remotePatterns: [
      {
        protocol: "https",
@@ -58,8 +61,16 @@ const nextConfig: NextConfig = {
        hostname: "**.saleor.cloud",
        pathname: "/**",
      },
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+        pathname: "/**",
+      },
    ],
  },
+  experimental: {
+    optimizePackageImports: ["lucide-react", "framer-motion"],
+  },
 };

 export default withNextIntl(nextConfig);
--- a/src/app/[locale]/about/page.tsx
+++ b/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>
--- a/src/app/[locale]/layout.tsx
+++ b/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}
--- a/src/app/[locale]/page.tsx
+++ b/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>
--- a/src/app/globals.css
+++ b/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
   ============================================ */
--- a/src/app/layout.tsx
+++ b/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}
--- a/src/components/home/HeroVideo.tsx
+++ b/src/components/home/HeroVideo.tsx
@@ -1,7 +1,7 @@
 "use client";

-import { motion } from "framer-motion";
 import Link from "next/link";
+import Image from "next/image";
 import { useTranslations } from "next-intl";
 import { ChevronDown } from "lucide-react";

@@ -23,30 +23,23 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
  return (
    <section className="relative min-h-screen w-full overflow-hidden">
      {/* Background Image with Overlay */}
-      <div 
-        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
-        style={{
-          backgroundImage: `url('https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=2574&auto=format&fit=crop')`,
-        }}
-      >
+      <div className="absolute inset-0">
+        <Image
+          src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=2574&auto=format&fit=crop"
+          alt=""
+          fill
+          priority
+          className="object-cover"
+          sizes="100vw"
+        />
        <div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-black/70" />
      </div>

-      {/* Content */}
+      {/* Content - Visible immediately, animations are enhancements */}
      <div className="relative z-10 min-h-screen flex flex-col items-center justify-center text-center text-white px-4 py-20">
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.3 }}
-          className="max-w-4xl mx-auto"
-        >
+        <div className="max-w-4xl mx-auto animate-fadeSlideUp">
          {/* Social Proof Micro */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.4 }}
-            className="flex items-center justify-center gap-2 mb-6"
-          >
+          <div className="flex items-center justify-center gap-2 mb-6 animate-fadeSlideUp" style={{ animationDelay: "0.1s" }}>
            <div className="flex">
              {[1, 2, 3, 4, 5].map((star) => (
                <svg key={star} className="w-4 h-4 fill-yellow-400 text-yellow-400" viewBox="0 0 24 24">
@@ -57,36 +50,30 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
            <span className="text-sm text-white/80">
              {t("lovedBy")}
            </span>
-          </motion.div>
+          </div>

-          {/* Main Heading - Outcome Focused */}
-          <motion.h1
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.5 }}
-            className="text-4xl md:text-6xl lg:text-7xl font-medium mb-6 tracking-tight leading-tight"
+          {/* Main Heading */}
+          <h1
+            className="text-4xl md:text-6xl lg:text-7xl font-medium mb-6 tracking-tight leading-tight animate-fadeSlideUp"
+            style={{ animationDelay: "0.2s" }}
          >
            {t("transformHeadline")}
            <br />
            <span className="text-white/90">{t("withNaturalOils")}</span>
-          </motion.h1>
+          </h1>

-          {/* Subtitle - Expands on how */}
-          <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.7 }}
-            className="text-lg md:text-xl text-white/80 mb-8 font-light max-w-2xl mx-auto leading-relaxed"
+          {/* Subtitle */}
+          <p
+            className="text-lg md:text-xl text-white/80 mb-8 font-light max-w-2xl mx-auto leading-relaxed animate-fadeSlideUp"
+            style={{ animationDelay: "0.3s" }}
          >
            {t("subtitleText")}
-          </motion.p>
+          </p>

-          {/* CTA Button - Action verb + value */}
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.9 }}
-            className="flex flex-col sm:flex-row items-center justify-center gap-4"
+          {/* CTA Buttons */}
+          <div
+            className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fadeSlideUp"
+            style={{ animationDelay: "0.4s" }}
          >
            <Link
              href={`${localePath}/products`}
@@ -100,14 +87,12 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
            >
              {t("learnStory")}
            </Link>
-          </motion.div>
+          </div>

          {/* Trust Indicators */}
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ delay: 1.2, duration: 0.8 }}
-            className="flex flex-wrap items-center justify-center gap-6 mt-12 text-sm text-white/60"
+          <div
+            className="flex flex-wrap items-center justify-center gap-6 mt-12 text-sm text-white/60 animate-fadeSlideUp"
+            style={{ animationDelay: "0.5s" }}
          >
            <div className="flex items-center gap-2">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -127,26 +112,21 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
              </svg>
              <span>{t("crueltyFree")}</span>
            </div>
-          </motion.div>
-        </motion.div>
+          </div>
+        </div>
      </div>

      {/* Scroll Indicator */}
-      <motion.button
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 1.5, duration: 0.8 }}
+      <button
        onClick={scrollToContent}
-        className="absolute bottom-10 left-1/2 -translate-x-1/2 text-white/60 hover:text-white transition-colors cursor-pointer"
+        className="absolute bottom-10 left-1/2 -translate-x-1/2 text-white/60 hover:text-white transition-colors cursor-pointer opacity-0 animate-fade-in"
+        style={{ animationDelay: "1.5s", animationFillMode: "forwards" }}
        aria-label="Scroll to content"
      >
-        <motion.div
-          animate={{ y: [0, 8, 0] }}
-          transition={{ repeat: Infinity, duration: 1.5, ease: "easeInOut" }}
-        >
+        <div className="scroll-indicator">
          <ChevronDown className="w-6 h-6" strokeWidth={1.5} />
-        </motion.div>
-      </motion.button>
+        </div>
+      </button>
    </section>
  );
 }
--- a/src/components/product/ProductCard.tsx
+++ b/src/components/product/ProductCard.tsx
@@ -32,11 +32,12 @@ export default function ProductCard({ product, index = 0, locale = "sr" }: Produ
      <Link href={`/${locale}/products/${localized.slug}`} className="group block">
        <div className="relative w-full aspect-square bg-[#f8f9fa] overflow-hidden mb-4">
          {image ? (
-            <img
+            <Image
              src={image}
              alt={localized.name}
-              className="w-full h-full object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
-              loading="lazy"
+              fill
+              className="object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
+              sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
            />
          ) : (
            <div className="absolute inset-0 flex items-center justify-center text-[#999999]">
@@ -52,7 +53,7 @@ export default function ProductCard({ product, index = 0, locale = "sr" }: Produ
            </div>
          )}

-          <div className="absolute inset-x-0 bottom-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform duration-300">
+          <div className="absolute inset-x-0 bottom-0 p-4 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <button
              className="w-full py-3 bg-black text-white text-xs uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors"
              onClick={(e) => {
--- a/src/components/product/ProductDetail.tsx
+++ b/src/components/product/ProductDetail.tsx
@@ -245,10 +245,12 @@ export default function ProductDetail({ product, relatedProducts, bundleProducts
                          : "border-transparent hover:border-[#999999]"
                      }`}
                    >
-                      <img
+                      <Image
                        src={image.url}
                        alt={image.alt || localized.name}
-                        className="w-full h-full object-cover"
+                        fill
+                        className="object-cover"
+                        sizes="100px"
                      />
                    </button>
                  ))}
@@ -256,10 +258,13 @@ export default function ProductDetail({ product, relatedProducts, bundleProducts
              )}

              <div className="relative w-full aspect-square bg-[#f8f9fa] overflow-hidden flex-1">
-                <img
+                <Image
                  src={images[selectedImage].url}
                  alt={images[selectedImage].alt || localized.name}
-                  className="w-full h-full object-cover"
+                  fill
+                  priority
+                  className="object-cover"
+                  sizes="(max-width: 768px) 100vw, 50vw"
                />

                {images.length > 1 && (
@@ -307,17 +312,15 @@ export default function ProductDetail({ product, relatedProducts, bundleProducts
              transition={{ duration: 0.6, delay: 0.2 }}
              className="lg:pl-8"
            >
-              <motion.div
+              <div className="min-h-[52px] flex items-center">
+                <div
+                  className="bg-white/80 backdrop-blur-sm text-[#1a1a1a] py-3 px-4 rounded-lg mb-4 text-sm font-medium text-left w-full"
                  key={urgencyIndex}
-                initial={{ opacity: 0, y: -10 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: 10 }}
-                transition={{ duration: 0.3 }}
-                className="bg-white/80 backdrop-blur-sm text-[#1a1a1a] py-3 rounded-lg mb-4 text-sm font-medium text-left"
                >
                  <span className="mr-2">{urgencyMessages[urgencyIndex].icon}</span>
                  {urgencyMessages[urgencyIndex].text}
-              </motion.div>
+                </div>
+              </div>

              <h1 className="text-3xl md:text-4xl font-medium mb-4 tracking-tight">
                {localized.name}