fix: revert HeroVideo aspect-ratio, fix ProblemSection scroll animation with useEffect

feat(performance): optimize Core Web Vitals with CSS animations and lazy analytics
- Replace framer-motion with CSS animations in TrustBadges, AsSeenIn, ProblemSection - Create AnalyticsProvider client component for OpenPanel lazy-loading - Fix HeroVideo CLS with explicit aspect-ratio (4/3) - Remove deprecated swcMinify from next.config (enabled by default) - Add optimizePackageImports for better tree-shaking
2026-04-01 06:43:43 +02:00 · 2026-04-01 06:14:49 +02:00 · 2026-04-01 05:17:48 +02:00 · 2026-04-01 05:17:36 +02:00 · 2026-04-01 05:15:42 +02:00
7 changed files with 129 additions and 107 deletions
--- a/next.config.ts
+++ b/next.config.ts
@@ -69,7 +69,7 @@ const nextConfig: NextConfig = {
    ],
  },
  experimental: {
-    optimizePackageImports: ["lucide-react", "framer-motion"],
+    optimizePackageImports: ["lucide-react", "framer-motion", "clsx", "motion"],
  },
 };

--- a/src/app/[locale]/layout.tsx
+++ b/src/app/[locale]/layout.tsx
@@ -2,10 +2,9 @@ import { Metadata } from "next";
 import { NextIntlClientProvider } from "next-intl";
 import { getMessages, setRequestLocale } from "next-intl/server";
 import { SUPPORTED_LOCALES, DEFAULT_LOCALE, isValidLocale } from "@/lib/i18n/locales";
-import { OpenPanelComponent } from "@openpanel/nextjs";
 import Script from "next/script";
+import AnalyticsProvider from "@/components/providers/AnalyticsProvider";

-// Rybbit configuration
 const RYBBIT_SITE_ID = process.env.NEXT_PUBLIC_RYBBIT_SITE_ID || "1";

 const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://manoonoils.com";
@@ -50,13 +49,7 @@ export default async function LocaleLayout({

  return (
    <>
-      <OpenPanelComponent
-        clientId={process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID || ""}
-        trackScreenViews={true}
-        trackOutgoingLinks={true}
-        apiUrl="/api/op"
-        scriptUrl="/api/op1"
-      />
+      <AnalyticsProvider clientId={process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID || ""} />
      <Script
        src="/api/script.js"
        data-site-id={RYBBIT_SITE_ID}
--- a/src/components/home/AsSeenIn.tsx
+++ b/src/components/home/AsSeenIn.tsx
@@ -1,6 +1,5 @@
 "use client";

-import { motion } from "framer-motion";
 import { useTranslations } from "next-intl";

 const mediaLogos = [
@@ -40,15 +39,9 @@ export default function AsSeenIn() {
  return (
    <section className="py-12 bg-[#1a1a1a] overflow-hidden border-y border-white/10">
      <div className="container mx-auto px-4 mb-8">
-        <motion.p
-          className="text-center text-[10px] uppercase tracking-[0.4em] text-[#c9a962] font-bold"
-          initial={{ opacity: 0 }}
-          whileInView={{ opacity: 1 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.6 }}
-        >
+        <p className="text-center text-[10px] uppercase tracking-[0.4em] text-[#c9a962] font-bold animate-fade-in">
          {t("title")}
-        </motion.p>
+        </p>
      </div>

      <div className="relative">
@@ -56,29 +49,30 @@ export default function AsSeenIn() {
        <div className="absolute right-0 top-0 bottom-0 w-32 bg-gradient-to-l from-[#1a1a1a] to-transparent z-10 pointer-events-none" />

        <div className="flex overflow-hidden">
-          <motion.div
-            className="flex items-center gap-16"
-            animate={{
-              x: [0, -50 + "%"],
-            }}
-            transition={{
-              x: {
-                repeat: Infinity,
-                repeatType: "loop",
-                duration: 30,
-                ease: "linear",
-              },
-            }}
-          >
-            {mediaLogos.map((logo, index) => (
-              <LogoItem key={`first-${index}`} name={logo.name} />
+          <div className="flex items-center gap-16 animate-marquee">
+            {[...mediaLogos, ...mediaLogos].map((logo, index) => (
+              <LogoItem key={`${logo.name}-${index}`} name={logo.name} />
            ))}
-            {mediaLogos.map((logo, index) => (
-              <LogoItem key={`second-${index}`} name={logo.name} />
-            ))}
-          </motion.div>
+          </div>
        </div>
      </div>
+
+      <style>{`
+        @keyframes marquee {
+          0% { transform: translateX(0); }
+          100% { transform: translateX(-50%); }
+        }
+        .animate-marquee {
+          animation: marquee 30s linear infinite;
+        }
+        @keyframes fade-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        .animate-fade-in {
+          animation: fade-in 0.6s ease-out forwards;
+        }
+      `}</style>
    </section>
  );
-}
+}
--- a/src/components/home/ProblemSection.tsx
+++ b/src/components/home/ProblemSection.tsx
@@ -1,22 +1,36 @@
 "use client";

-import { motion } from "framer-motion";
 import { useTranslations } from "next-intl";
+import { useEffect, useRef } from "react";

 export default function ProblemSection() {
  const t = useTranslations("ProblemSection");
  const problems = t.raw("problems") as Array<{ problem: string; description: string }>;
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("animate-visible");
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    const animatedElements = sectionRef.current?.querySelectorAll(".animate-on-scroll");
+    animatedElements?.forEach((el) => observer.observe(el));
+
+    return () => observer.disconnect();
+  }, []);

  return (
-    <section className="py-24 bg-gradient-to-b from-[#fefcfb] to-[#faf9f7]">
+    <section ref={sectionRef} className="py-24 bg-gradient-to-b from-[#fefcfb] to-[#faf9f7]">
      <div className="container mx-auto px-4">
-        <motion.div
-          className="max-w-3xl mx-auto text-center"
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.6 }}
-        >
+        <div className="max-w-3xl mx-auto text-center animate-on-scroll">
          <span className="text-xs uppercase tracking-[0.3em] text-[#c9a962] mb-4 block font-medium">
            {t("title")}
          </span>
@@ -27,18 +41,14 @@ export default function ProblemSection() {
            {t("description")}
          </p>
          <div className="w-16 h-1 bg-gradient-to-r from-[#c9a962] to-[#FFD700] mx-auto mt-8 rounded-full" />
-        </motion.div>
+        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8 max-w-5xl mx-auto mt-16">
          {problems.map((item, index) => (
-            <motion.div
+            <div
              key={index}
-              className="relative text-center p-8 bg-white rounded-3xl shadow-lg border border-[#f0ede8] hover:shadow-2xl hover:border-[#c9a962]/30 transition-all duration-500 group"
-              initial={{ opacity: 0, y: 30 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
-              whileHover={{ y: -5 }}
+              className="relative text-center p-8 bg-white rounded-3xl shadow-lg border border-[#f0ede8] hover:shadow-2xl hover:border-[#c9a962]/30 transition-all duration-500 group animate-on-scroll"
+              style={{ animationDelay: `${index * 100}ms` }}
            >
              <div className="absolute top-0 left-1/2 -translate-x-1/2 w-20 h-1 bg-gradient-to-r from-[#c9a962] to-[#FFD700] rounded-b-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" />

@@ -61,10 +71,29 @@ export default function ProblemSection() {
              </div>
              <h3 className="text-lg font-semibold text-[#1a1a1a] mb-3">{item.problem}</h3>
              <p className="text-sm text-[#666666] leading-relaxed">{item.description}</p>
-            </motion.div>
+            </div>
          ))}
        </div>
      </div>
+
+      <style>{`
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .animate-on-scroll {
+          opacity: 0;
+        }
+        .animate-on-scroll.animate-visible {
+          animation: fadeInUp 0.5s ease-out forwards;
+        }
+      `}</style>
    </section>
  );
-}
+}
--- a/src/components/home/TrustBadges.tsx
+++ b/src/components/home/TrustBadges.tsx
@@ -1,6 +1,5 @@
 "use client";

-import { motion } from "framer-motion";
 import { useTranslations } from "next-intl";

 export default function TrustBadges() {
@@ -9,21 +8,8 @@ export default function TrustBadges() {
  return (
    <section className="py-16 bg-gradient-to-b from-[#fefcfb] to-[#faf9f7]">
      <div className="container mx-auto px-4">
-        <motion.div
-          className="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6"
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true }}
-          transition={{ duration: 0.6 }}
-        >
-          <motion.div
-            className="flex flex-col items-center text-center p-5 bg-white rounded-2xl shadow-md border border-[#f0ede8] hover:shadow-xl hover:border-[#c9a962]/30 transition-all duration-300"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.4, delay: 0 }}
-            whileHover={{ y: -3 }}
-          >
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
+          <div className="flex flex-col items-center text-center p-5 bg-white rounded-2xl shadow-md border border-[#f0ede8] hover:shadow-xl hover:border-[#c9a962]/30 transition-all duration-300 animate-fadeSlideUp" style={{ animationDelay: "0s" }}>
            <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#faf9f7] to-[#f5f0e8] flex items-center justify-center shadow-sm mb-4 border border-[#e8e4dc]">
              <svg className="w-6 h-6 text-yellow-400" viewBox="0 0 24 24" fill="currentColor">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
@@ -38,16 +24,9 @@ export default function TrustBadges() {
            <p className="text-xs text-[#888888] mt-0.5">
              {t("basedOnReviews")}
            </p>
-          </motion.div>
+          </div>

-          <motion.div
-            className="flex flex-col items-center text-center p-5 bg-white rounded-2xl shadow-md border border-[#f0ede8] hover:shadow-xl hover:border-[#c9a962]/30 transition-all duration-300"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.4, delay: 0.1 }}
-            whileHover={{ y: -3 }}
-          >
+          <div className="flex flex-col items-center text-center p-5 bg-white rounded-2xl shadow-md border border-[#f0ede8] hover:shadow-xl hover:border-[#c9a962]/30 transition-all duration-300 animate-fadeSlideUp" style={{ animationDelay: "0.1s" }}>
            <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#faf9f7] to-[#f5f0e8] flex items-center justify-center shadow-sm mb-4 border border-[#e8e4dc]">
              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="#c9a962" strokeWidth="1.5">
                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
@@ -62,16 +41,9 @@ export default function TrustBadges() {
            <p className="text-xs text-[#888888] mt-0.5">
              {t("worldwide")}
            </p>
-          </motion.div>
+          </div>

-          <motion.div
-            className="flex flex-col items-center text-center p-5 bg-white rounded-2xl shadow-md border border-[#f0ede8] hover:shadow-xl hover:border-[#c9a962]/30 transition-all duration-300"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.4, delay: 0.2 }}
-            whileHover={{ y: -3 }}
-          >
+          <div className="flex flex-col items-center text-center p-5 bg-white rounded-2xl shadow-md border border-[#f0ede8] hover:shadow-xl hover:border-[#c9a962]/30 transition-all duration-300 animate-fadeSlideUp" style={{ animationDelay: "0.2s" }}>
            <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#faf9f7] to-[#f5f0e8] flex items-center justify-center shadow-sm mb-4 border border-[#e8e4dc]">
              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="#7eb89e" strokeWidth="1.5">
                <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75L11.25 15 15 9.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
@@ -86,19 +58,12 @@ export default function TrustBadges() {
            <p className="text-xs text-[#888888] mt-0.5">
              {t("noAdditives")}
            </p>
-          </motion.div>
+          </div>

-          <motion.div
-            className="flex flex-col items-center text-center p-5 bg-white rounded-2xl shadow-md border border-[#f0ede8] hover:shadow-xl hover:border-[#c9a962]/30 transition-all duration-300"
-            initial={{ opacity: 0, y: 20 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ duration: 0.4, delay: 0.3 }}
-            whileHover={{ y: -3 }}
-          >
+          <div className="flex flex-col items-center text-center p-5 bg-white rounded-2xl shadow-md border border-[#f0ede8] hover:shadow-xl hover:border-[#c9a962]/30 transition-all duration-300 animate-fadeSlideUp" style={{ animationDelay: "0.3s" }}>
            <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-[#faf9f7] to-[#f5f0e8] flex items-center justify-center shadow-sm mb-4 border border-[#e8e4dc]">
              <svg className="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="#e8967a" strokeWidth="1.5">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0v1.875c0 .621-.504 1.125-1.125 1.125H4.125A1.125 1.125 0 013 16.875v-1.875m12-9.375v-6.75m0 4.5v-4.5m0 0h-12" />
              </svg>
            </div>
            <p className="text-2xl lg:text-3xl font-bold bg-gradient-to-r from-[#1a1a1a] to-[#4a4a4a] bg-clip-text text-transparent tracking-tight">
@@ -110,9 +75,26 @@ export default function TrustBadges() {
            <p className="text-xs text-[#888888] mt-0.5">
              {t("ordersOver")}
            </p>
-          </motion.div>
-        </motion.div>
+          </div>
+        </div>
      </div>
+
+      <style>{`
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+        .animate-fadeSlideUp {
+          opacity: 0;
+          animation: fadeInUp 0.5s ease-out forwards;
+        }
+      `}</style>
    </section>
  );
-}
+}
--- a/src/components/providers/AnalyticsProvider.tsx
+++ b/src/components/providers/AnalyticsProvider.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import dynamic from "next/dynamic";
+
+const OpenPanelComponent = dynamic(
+  () => import("@openpanel/nextjs").then((mod) => mod.OpenPanelComponent),
+  { ssr: false }
+);
+
+interface AnalyticsProviderProps {
+  clientId: string;
+}
+
+export default function AnalyticsProvider({ clientId }: AnalyticsProviderProps) {
+  return (
+    <OpenPanelComponent
+      clientId={clientId}
+      trackScreenViews={true}
+      trackOutgoingLinks={true}
+      apiUrl="/api/op"
+      scriptUrl="/api/op1"
+    />
+  );
+}
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -1,7 +1,7 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";

-export function proxy(request: NextRequest) {
+export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  const url = request.nextUrl.pathname;
Author	SHA1	Message	Date
Unchained	3c9c091c46	fix: revert HeroVideo aspect-ratio, fix ProblemSection scroll animation with useEffect Some checks are pending Build and Deploy / build (push) Waiting to run Details	2026-04-01 06:43:43 +02:00
Unchained	27af03ba3a	feat(performance): optimize Core Web Vitals with CSS animations and lazy analytics - Replace framer-motion with CSS animations in TrustBadges, AsSeenIn, ProblemSection - Create AnalyticsProvider client component for OpenPanel lazy-loading - Fix HeroVideo CLS with explicit aspect-ratio (4/3) - Remove deprecated swcMinify from next.config (enabled by default) - Add optimizePackageImports for better tree-shaking	2026-04-01 06:14:49 +02:00
Unchained	ad20ffe588	Merge branch 'dev' Some checks failed Build and Deploy / build (push) Has been cancelled Details	2026-04-01 05:17:48 +02:00
Unchained	13301dca12	fix: use middleware.ts instead of proxy.ts for build compatibility	2026-04-01 05:17:36 +02:00
Unchained	e57169a807	fix: revert proxy back to middleware for Next.js build compatibility	2026-04-01 05:15:42 +02:00