fix(404): add redirects for broken URLs and custom not-found page

- Add permanent redirects for /products/manoon to /products
- Strip malformed /contact suffix from product URLs
- Create custom branded 404 page with product navigation
- Add NotFound translations for en and sr locales

k8s/deployment.yaml

@@ -130,6 +130,8 @@ spec:
           value: "https://rybbit.nodecrew.me"
         - name: NEXT_PUBLIC_RYBBIT_SITE_ID
           value: "1"
+        - name: RYBBIT_API_KEY
+          value: "rb_NgFoMtHeohWoJULLiKqSEJmdghSrhJajgseSWQLjfxyeUJcFfQvUrfYwdllSTsLx"
         resources:
           limits:
             cpu: 500m

next.config.ts

@@ -5,6 +5,32 @@ const withNextIntl = createNextIntlPlugin();
 
 const nextConfig: NextConfig = {
   output: 'standalone',
+  async redirects() {
+    return [
+      // Fix malformed URLs with /contact appended to product slugs
+      {
+        source: '/:locale(en|sr)/products/:slug*/contact',
+        destination: '/:locale/products/:slug*',
+        permanent: true,
+      },
+      {
+        source: '/products/:slug*/contact',
+        destination: '/products/:slug*',
+        permanent: true,
+      },
+      // Redirect old/removed product "manoon" to products listing
+      {
+        source: '/:locale(en|sr)/products/manoon',
+        destination: '/:locale/products',
+        permanent: true,
+      },
+      {
+        source: '/products/manoon',
+        destination: '/products',
+        permanent: true,
+      },
+    ];
+  },
   async rewrites() {
     const rybbitHost = process.env.NEXT_PUBLIC_RYBBIT_HOST || "https://rybbit.nodecrew.me";
     return [
@@ -14,7 +40,7 @@ const nextConfig: NextConfig = {
       },
       {
         source: "/api/track",
-        destination: `${rybbitHost}/api/track`,
+        destination: "/api/rybbit/track",
       },
       {
         source: "/api/site/tracking-config/:id",
@@ -63,7 +89,7 @@ const nextConfig: NextConfig = {
     ],
   },
   experimental: {
-    optimizePackageImports: ["lucide-react", "framer-motion"],
+    optimizePackageImports: ["lucide-react", "framer-motion", "clsx", "motion"],
   },
 };
 

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,17 +49,11 @@ export default async function LocaleLayout({
 
   return (
     <>
-      <OpenPanelComponent
+      <AnalyticsProvider clientId={process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID || ""} />
-        clientId={process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID || ""}
-        trackScreenViews={true}
-        trackOutgoingLinks={true}
-        apiUrl="/api/op"
-        scriptUrl="/api/op1"
-      />
       <Script
         src="/api/script.js"
         data-site-id={RYBBIT_SITE_ID}
-        strategy="lazyOnload"
+        strategy="afterInteractive"
       />
       <NextIntlClientProvider messages={messages}>
         {children}

src/app/[locale]/not-found.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useTranslations, useLocale } from "next-intl";
+import Header from "@/components/layout/Header";
+import Footer from "@/components/layout/Footer";
+import Link from "next/link";
+import { Home, Search, Package } from "lucide-react";
+
+export default function NotFoundPage() {
+  const t = useTranslations("NotFound");
+  const locale = useLocale();
+  const basePath = `/${locale}`;
+
+  return (
+    <>
+      <Header locale={locale} />
+      <main className="min-h-screen bg-white">
+        <div className="pt-[180px] lg:pt-[200px] pb-20 px-4">
+          <div className="max-w-2xl mx-auto text-center">
+            {/* 404 Code */}
+            <div className="text-[120px] lg:text-[180px] font-light text-black/5 leading-none select-none mb-4">
+              404
+            </div>
+            
+            <h1 className="text-2xl lg:text-3xl font-medium mb-4">
+              {t("title")}
+            </h1>
+            <p className="text-[#666666] mb-10 max-w-md mx-auto">
+              {t("description")}
+            </p>
+
+            {/* Quick Links */}
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
+              <Link
+                href={`${basePath}/products`}
+                className="flex items-center gap-2 px-6 py-3 bg-black text-white text-sm uppercase tracking-[0.1em] hover:bg-[#333333] transition-colors w-full sm:w-auto justify-center"
+              >
+                <Package className="w-4 h-4" />
+                {t("browseProducts")}
+              </Link>
+              <Link
+                href={basePath}
+                className="flex items-center gap-2 px-6 py-3 border border-black text-black text-sm uppercase tracking-[0.1em] hover:bg-black hover:text-white transition-colors w-full sm:w-auto justify-center"
+              >
+                <Home className="w-4 h-4" />
+                {t("goHome")}
+              </Link>
+            </div>
+
+            {/* Search Suggestion */}
+            <div className="p-6 bg-[#f8f8f8] rounded-sm">
+              <div className="flex items-center gap-3 mb-3 text-[#666666]">
+                <Search className="w-5 h-5" />
+                <span className="text-sm font-medium uppercase tracking-[0.1em]">
+                  {t("lookingFor")}
+                </span>
+              </div>
+              <p className="text-sm text-[#666666]">
+                {t("searchSuggestion")}
+              </p>
+            </div>
+          </div>
+        </div>
+      </main>
+      <Footer locale={locale} />
+    </>
+  );
+}

src/app/[locale]/page.tsx

@@ -16,6 +16,8 @@ import { getPageKeywords, getBrandKeywords } from "@/lib/seo/keywords";
 import { Metadata } from "next";
 import Image from "next/image";
 
+export const revalidate = 3600;
+
 const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://manoonoils.com";
 
 export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {

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

@@ -9,6 +9,8 @@ import { isValidLocale, DEFAULT_LOCALE, getSaleorLocale, type Locale } from "@/l
 import { getPageKeywords } from "@/lib/seo/keywords";
 import { Metadata } from "next";
 
+export const revalidate = 3600;
+
 const baseUrl = process.env.NEXT_PUBLIC_SITE_URL || "https://manoonoils.com";
 
 interface ProductsPageProps {

src/app/api/op/track/route.ts

@@ -1,22 +0,0 @@
-import { NextResponse } from "next/server";
-
-const OPENPANEL_API_URL = "https://op.nodecrew.me/api";
-
-export async function POST(request: Request) {
-  try {
-    const body = await request.json();
-    const response = await fetch(`${OPENPANEL_API_URL}/track`, {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(body),
-    });
-
-    const data = await response.json();
-    return NextResponse.json(data, { status: response.status });
-  } catch (error) {
-    console.error("[OpenPanel] Track error:", error);
-    return NextResponse.json({ error: "Failed to track event" }, { status: 500 });
-  }
-}

src/app/api/op1/route.ts

@@ -1,24 +0,0 @@
-import { NextResponse } from "next/server";
-
-const OPENPANEL_SCRIPT_URL = "https://op.nodecrew.me/op1.js";
-
-export async function GET(request: Request) {
-  const url = new URL(request.url);
-  const searchParams = url.search;
-
-  try {
-    const response = await fetch(`${OPENPANEL_SCRIPT_URL}${searchParams}`);
-    const content = await response.text();
-    
-    return new NextResponse(content, {
-      status: 200,
-      headers: {
-        "Content-Type": "application/javascript",
-        "Cache-Control": "public, max-age=86400, stale-while-revalidate=86400",
-      },
-    });
-  } catch (error) {
-    console.error("[OpenPanel] Failed to fetch script:", error);
-    return new NextResponse("/* OpenPanel script unavailable */", { status: 500 });
-  }
-}

src/app/api/rybbit/track/route.ts

@@ -0,0 +1,86 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const RYBBIT_API_URL = process.env.NEXT_PUBLIC_RYBBIT_HOST || "https://rybbit.nodecrew.me";
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    
+    // Get all possible IP sources for debugging
+    const cfConnectingIp = request.headers.get("cf-connecting-ip");
+    const xForwardedFor = request.headers.get("x-forwarded-for");
+    const xRealIp = request.headers.get("x-real-ip");
+    const nextJsIp = request.ip;
+    
+    // Use the first available IP in priority order
+    const clientIp = 
+      cfConnectingIp ||           // Cloudflare (most reliable)
+      xForwardedFor?.split(",")[0]?.trim() || // First IP in chain
+      xRealIp ||                  // Nginx/Traefik
+      nextJsIp ||                 // Next.js fallback
+      "unknown";
+
+    const userAgent = request.headers.get("user-agent") || "";
+
+    console.log("[Rybbit Proxy] IP Debug:", {
+      cfConnectingIp,
+      xForwardedFor,
+      xRealIp,
+      nextJsIp,
+      finalIp: clientIp,
+      userAgent: userAgent?.substring(0, 50),
+    });
+
+    // Build headers to forward
+    const forwardHeaders: Record<string, string> = {
+      "Content-Type": "application/json",
+      "X-Forwarded-For": clientIp,
+      "X-Real-IP": clientIp,
+      "User-Agent": userAgent,
+    };
+
+    // Forward original CF headers if present
+    const cfCountry = request.headers.get("cf-ipcountry");
+    const cfRay = request.headers.get("cf-ray");
+    
+    if (cfCountry) forwardHeaders["CF-IPCountry"] = cfCountry;
+    if (cfRay) forwardHeaders["CF-Ray"] = cfRay;
+
+    console.log("[Rybbit Proxy] Forwarding to Rybbit with headers:", Object.keys(forwardHeaders));
+
+    const response = await fetch(`${RYBBIT_API_URL}/api/track`, {
+      method: "POST",
+      headers: forwardHeaders,
+      body: JSON.stringify(body),
+    });
+
+    const data = await response.text();
+    console.log("[Rybbit Proxy] Response:", response.status, data.substring(0, 100));
+    
+    return new NextResponse(data, {
+      status: response.status,
+      headers: {
+        "Content-Type": "application/json",
+        "Access-Control-Allow-Origin": "*",
+      },
+    });
+  } catch (error) {
+    console.error("[Rybbit Proxy] Error:", error);
+    return new NextResponse(
+      JSON.stringify({ error: "Proxy error" }),
+      { status: 500, headers: { "Content-Type": "application/json" } }
+    );
+  }
+}
+
+// Handle CORS preflight
+export async function OPTIONS() {
+  return new NextResponse(null, {
+    status: 200,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Access-Control-Allow-Methods": "POST, OPTIONS",
+      "Access-Control-Allow-Headers": "Content-Type",
+    },
+  });
+}

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
+        <p className="text-center text-[10px] uppercase tracking-[0.4em] text-[#c9a962] font-bold animate-fade-in">
-          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 }}
-        >
           {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
+          <div className="flex items-center gap-16 animate-marquee">
-            className="flex items-center gap-16"
+            {[...mediaLogos, ...mediaLogos].map((logo, index) => (
-            animate={{
+              <LogoItem key={`${logo.name}-${index}`} name={logo.name} />
-              x: [0, -50 + "%"],
-            }}
-            transition={{
-              x: {
-                repeat: Infinity,
-                repeatType: "loop",
-                duration: 30,
-                ease: "linear",
-              },
-            }}
-          >
-            {mediaLogos.map((logo, index) => (
-              <LogoItem key={`first-${index}`} name={logo.name} />
             ))}
-            {mediaLogos.map((logo, index) => (
+          </div>
-              <LogoItem key={`second-${index}`} name={logo.name} />
-            ))}
-          </motion.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>
   );
 }

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
+        <div className="max-w-3xl mx-auto text-center animate-on-scroll">
-          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 }}
-        >
           <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"
+              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"
-              initial={{ opacity: 0, y: 30 }}
+              style={{ animationDelay: `${index * 100}ms` }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 0.5, delay: index * 0.1 }}
-              whileHover={{ y: -5 }}
             >
               <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>
   );
 }

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
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6">
-          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" }}>
-          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="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
+          <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" }}>
-            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="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
+          <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" }}>
-            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="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
+          <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" }}>
-            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="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>
+          </div>
-        </motion.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>
   );
 }

src/components/product/ProductCard.tsx

@@ -38,6 +38,7 @@ export default function ProductCard({ product, index = 0, locale = "sr" }: Produ
               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"
+              loading={index < 4 ? "eager" : "lazy"}
             />
           ) : (
             <div className="absolute inset-0 flex items-center justify-center text-[#999999]">

src/components/providers/AnalyticsProvider.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+// AnalyticsProvider - placeholder for future analytics integrations
+// Currently only Rybbit is used via the script tag in layout.tsx
+
+interface AnalyticsProviderProps {
+  clientId?: string;
+}
+
+export default function AnalyticsProvider({ clientId }: AnalyticsProviderProps) {
+  // No-op component - Rybbit is loaded via next/script in layout.tsx
+  return null;
+}

src/i18n/messages/en.json

@@ -464,5 +464,13 @@
       "description": "Pay via bank transfer",
       "comingSoon": "Coming soon"
     }
+  },
+  "NotFound": {
+    "title": "Page Not Found",
+    "description": "The page you're looking for doesn't exist or has been moved.",
+    "browseProducts": "Browse Products",
+    "goHome": "Go Home",
+    "lookingFor": "Can't find what you're looking for?",
+    "searchSuggestion": "Try browsing our product collection or contact us for assistance."
   }
 }

src/i18n/messages/sr.json

@@ -463,5 +463,13 @@
       "description": "Platite putem bankovnog transfera",
       "comingSoon": "Uskoro dostupno"
     }
+  },
+  "NotFound": {
+    "title": "Stranica Nije Pronađena",
+    "description": "Stranica koju tražite ne postoji ili je premeštena.",
+    "browseProducts": "Pregledaj Proizvode",
+    "goHome": "Početna Strana",
+    "lookingFor": "Ne možete da pronađete ono što tražite?",
+    "searchSuggestion": "Pokušajte da pregledate našu kolekciju proizvoda ili nas kontaktirajte za pomoć."
   }
 }

src/lib/analytics.ts

@@ -1,6 +1,5 @@
 "use client";
 
-import { useOpenPanel } from "@openpanel/nextjs";
 import { useCallback } from "react";
 import {
   trackRybbitProductView,
@@ -19,106 +18,6 @@ import {
 } from "@/lib/services/RybbitService";
 
 export function useAnalytics() {
-  const op = useOpenPanel();
-
-  // Helper to track with both OpenPanel and Rybbit
-  const trackDual = useCallback((
-    eventName: string, 
-    openPanelData: Record<string, any>
-  ) => {
-    // OpenPanel tracking
-    try {
-      op.track(eventName, openPanelData);
-    } catch (e) {
-      console.error("[OpenPanel] Tracking error:", e);
-    }
-
-    // Rybbit tracking (fire-and-forget)
-    try {
-      switch (eventName) {
-        case "product_viewed":
-          trackRybbitProductView({
-            id: openPanelData.product_id,
-            name: openPanelData.product_name,
-            price: openPanelData.price,
-            currency: openPanelData.currency,
-            category: openPanelData.category,
-          });
-          break;
-        case "add_to_cart":
-          trackRybbitAddToCart({
-            id: openPanelData.product_id,
-            name: openPanelData.product_name,
-            price: openPanelData.price,
-            currency: openPanelData.currency,
-            quantity: openPanelData.quantity,
-            variant: openPanelData.variant,
-          });
-          break;
-        case "remove_from_cart":
-          trackRybbitRemoveFromCart({
-            id: openPanelData.product_id,
-            name: openPanelData.product_name,
-            quantity: openPanelData.quantity,
-          });
-          break;
-        case "cart_view":
-          trackRybbitCartView({
-            total: openPanelData.cart_total,
-            currency: openPanelData.currency,
-            item_count: openPanelData.item_count,
-          });
-          break;
-        case "checkout_started":
-          trackRybbitCheckoutStarted({
-            total: openPanelData.cart_total,
-            currency: openPanelData.currency,
-            item_count: openPanelData.item_count,
-            items: openPanelData.items,
-          });
-          break;
-        case "checkout_step":
-          trackRybbitCheckoutStep(openPanelData.step, openPanelData);
-          break;
-        case "order_completed":
-          trackRybbitOrderCompleted({
-            order_id: openPanelData.order_id,
-            order_number: openPanelData.order_number,
-            total: openPanelData.total,
-            currency: openPanelData.currency,
-            item_count: openPanelData.item_count,
-            shipping_cost: openPanelData.shipping_cost,
-            customer_email: openPanelData.customer_email,
-            payment_method: openPanelData.payment_method,
-          });
-          break;
-        case "search":
-          trackRybbitSearch(openPanelData.query, openPanelData.results_count);
-          break;
-        case "external_link_click":
-          trackRybbitExternalLink(openPanelData.url, openPanelData.label);
-          break;
-        case "wishlist_add":
-          trackRybbitWishlistAdd({
-            id: openPanelData.product_id,
-            name: openPanelData.product_name,
-          });
-          break;
-        case "user_login":
-          trackRybbitUserLogin(openPanelData.method);
-          break;
-        case "user_register":
-          trackRybbitUserRegister(openPanelData.method);
-          break;
-        case "newsletter_signup":
-          trackRybbitNewsletterSignup(openPanelData.email, openPanelData.source);
-          break;
-      }
-    } catch (e) {
-      console.warn("[Rybbit] Tracking error:", e);
-    }
-  }, [op]);
-
   const trackProductView = useCallback((product: {
     id: string;
     name: string;
@@ -126,15 +25,14 @@ export function useAnalytics() {
     currency: string;
     category?: string;
   }) => {
-    trackDual("product_viewed", {
+    trackRybbitProductView({
-      product_id: product.id,
+      id: product.id,
-      product_name: product.name,
+      name: product.name,
       price: product.price,
       currency: product.currency,
       category: product.category,
-      source: "client",
     });
-  }, [trackDual]);
+  }, []);
 
   const trackAddToCart = useCallback((product: {
     id: string;
@@ -144,42 +42,39 @@ export function useAnalytics() {
     quantity: number;
     variant?: string;
   }) => {
-    trackDual("add_to_cart", {
+    trackRybbitAddToCart({
-      product_id: product.id,
+      id: product.id,
-      product_name: product.name,
+      name: product.name,
       price: product.price,
       currency: product.currency,
       quantity: product.quantity,
       variant: product.variant,
-      source: "client",
     });
-  }, [trackDual]);
+  }, []);
 
   const trackRemoveFromCart = useCallback((product: {
     id: string;
     name: string;
     quantity: number;
   }) => {
-    trackDual("remove_from_cart", {
+    trackRybbitRemoveFromCart({
-      product_id: product.id,
+      id: product.id,
-      product_name: product.name,
+      name: product.name,
       quantity: product.quantity,
-      source: "client",
     });
-  }, [trackDual]);
+  }, []);
 
   const trackCartView = useCallback((cart: {
     total: number;
     currency: string;
     item_count: number;
   }) => {
-    trackDual("cart_view", {
+    trackRybbitCartView({
-      cart_total: cart.total,
+      total: cart.total,
       currency: cart.currency,
       item_count: cart.item_count,
-      source: "client",
     });
-  }, [trackDual]);
+  }, []);
 
   const trackCheckoutStarted = useCallback((cart: {
     total: number;
@@ -192,22 +87,17 @@ export function useAnalytics() {
       price: number;
     }>;
   }) => {
-    trackDual("checkout_started", {
+    trackRybbitCheckoutStarted({
-      cart_total: cart.total,
+      total: cart.total,
       currency: cart.currency,
       item_count: cart.item_count,
       items: cart.items,
-      source: "client",
     });
-  }, [trackDual]);
+  }, []);
 
   const trackCheckoutStep = useCallback((step: string, data?: Record<string, unknown>) => {
-    trackDual("checkout_step", {
+    trackRybbitCheckoutStep(step, data);
-      step,
+  }, []);
-      ...data,
-      source: "client",
-    });
-  }, [trackDual]);
 
   const trackOrderCompleted = useCallback(async (order: {
     order_id: string;
@@ -221,8 +111,8 @@ export function useAnalytics() {
   }) => {
     console.log("[Analytics] Tracking order:", order.order_number);
 
-    // Track with both OpenPanel and Rybbit
+    // Rybbit tracking
-    trackDual("order_completed", {
+    trackRybbitOrderCompleted({
       order_id: order.order_id,
       order_number: order.order_number,
       total: order.total,
@@ -231,20 +121,8 @@ export function useAnalytics() {
       shipping_cost: order.shipping_cost,
       customer_email: order.customer_email,
       payment_method: order.payment_method,
-      source: "client",
     });
 
-    // OpenPanel revenue tracking
-    try {
-      op.revenue(order.total, {
-        currency: order.currency,
-        transaction_id: order.order_number,
-        source: "client",
-      });
-    } catch (e) {
-      console.error("[OpenPanel] Revenue tracking error:", e);
-    }
-
     // Server-side tracking for reliability
     try {
       const response = await fetch("/api/analytics/track-order", {
@@ -268,73 +146,48 @@ export function useAnalytics() {
     } catch (e) {
       console.error("[Server Analytics] API call failed:", e);
     }
-  }, [op, trackDual]);
+  }, []);
 
   const trackSearch = useCallback((query: string, results_count: number) => {
-     trackDual("search", {
+    trackRybbitSearch(query, results_count);
-       query,
+  }, []);
-       results_count,
-       source: "client",
-     });
-  }, [trackDual]);
 
   const trackExternalLink = useCallback((url: string, label?: string) => {
-    trackDual("external_link_click", {
+    trackRybbitExternalLink(url, label);
-      url,
+  }, []);
-      label,
-      source: "client",
-    });
-  }, [trackDual]);
 
   const trackWishlistAdd = useCallback((product: {
     id: string;
     name: string;
   }) => {
-    trackDual("wishlist_add", {
+    trackRybbitWishlistAdd({
-      product_id: product.id,
+      id: product.id,
-      product_name: product.name,
+      name: product.name,
-      source: "client",
     });
-  }, [trackDual]);
+  }, []);
 
   const trackUserLogin = useCallback((method: string) => {
-    trackDual("user_login", {
+    trackRybbitUserLogin(method);
-      method,
+  }, []);
-      source: "client",
-    });
-  }, [trackDual]);
 
   const trackUserRegister = useCallback((method: string) => {
-    trackDual("user_register", {
+    trackRybbitUserRegister(method);
-      method,
+  }, []);
-      source: "client",
-    });
-  }, [trackDual]);
 
   const trackNewsletterSignup = useCallback((email: string, source: string) => {
-    trackDual("newsletter_signup", {
+    trackRybbitNewsletterSignup(email, source);
-      email,
+  }, []);
-      source,
-    });
-  }, [trackDual]);
 
-  const identifyUser = useCallback((user: {
+  // No-op placeholder for identifyUser (OpenPanel removed)
+  const identifyUser = useCallback((_user: {
     profileId: string;
     email?: string;
     firstName?: string;
     lastName?: string;
   }) => {
-    try {
+    // OpenPanel was removed - this is now a no-op
-      op.identify({
+    // User identification is handled by Rybbit automatically via cookies
-        profileId: user.profileId,
+  }, []);
-        firstName: user.firstName,
-        lastName: user.lastName,
-        email: user.email,
-      });
-    } catch (e) {
-      console.error("[OpenPanel] Identify error:", e);
-    }
-  }, [op]);
 
   return {
     trackProductView,

src/lib/analytics/core/AnalyticsTracker.ts

@@ -0,0 +1,112 @@
+"use client";
+
+import type { AnalyticsEvent, AnalyticsProvider, UserData } from "./types";
+
+export class AnalyticsTracker {
+  private providers: AnalyticsProvider[] = [];
+
+  addProvider(provider: AnalyticsProvider): void {
+    this.providers.push(provider);
+  }
+
+  track(event: AnalyticsEvent): void {
+    for (const provider of this.providers) {
+      try {
+        provider.track(event);
+      } catch (e) {
+        console.error(`[Analytics] ${provider.name} tracking error:`, e);
+      }
+    }
+  }
+
+  identify(user: UserData): void {
+    for (const provider of this.providers) {
+      if (provider.identify) {
+        try {
+          provider.identify(user);
+        } catch (e) {
+          console.error(`[Analytics] ${provider.name} identify error:`, e);
+        }
+      }
+    }
+  }
+
+  async revenue(amount: number, currency: string, properties?: Record<string, unknown>): Promise<void> {
+    const promises: Promise<void>[] = [];
+    for (const provider of this.providers) {
+      if (provider.revenue) {
+        promises.push(
+          provider.revenue(amount, currency, properties).catch((e) => {
+            console.error(`[Analytics] ${provider.name} revenue error:`, e);
+          })
+        );
+      }
+    }
+    await Promise.all(promises);
+  }
+
+  productViewed(product: { id: string; name: string; price: number; currency: string; category?: string; variant?: string }) {
+    this.track({ type: "product_viewed", product });
+  }
+
+  addToCart(product: { id: string; name: string; price: number; currency: string; quantity: number; variant?: string }) {
+    this.track({ type: "add_to_cart", product });
+  }
+
+  removeFromCart(product: { id: string; name: string; quantity: number }) {
+    this.track({ type: "remove_from_cart", product });
+  }
+
+  cartViewed(cart: { total: number; currency: string; item_count: number }) {
+    this.track({ type: "cart_view", cart });
+  }
+
+  checkoutStarted(cart: { total: number; currency: string; item_count: number; items?: Array<{ id: string; name: string; quantity: number; price: number }> }) {
+    this.track({ type: "checkout_started", cart });
+  }
+
+  checkoutStep(step: string, data?: Record<string, unknown>) {
+    this.track({ type: "checkout_step", step, data });
+  }
+
+  orderCompleted(order: { order_id: string; order_number: string; total: number; currency: string; item_count: number; shipping_cost?: number; coupon_code?: string; customer_email?: string; payment_method?: string }) {
+    this.track({ type: "order_completed", order });
+    this.revenue(order.total, order.currency, {
+      transaction_id: order.order_number,
+      order_id: order.order_id,
+    });
+  }
+
+  searchPerformed(query: string, results_count: number) {
+    this.track({ type: "search", query, results_count });
+  }
+
+  externalLinkClicked(url: string, label?: string) {
+    this.track({ type: "external_link_click", url, label });
+  }
+
+  wishlistAdded(product: { id: string; name: string }) {
+    this.track({ type: "wishlist_add", product });
+  }
+
+  userLoggedIn(method: string) {
+    this.track({ type: "user_login", method });
+  }
+
+  userRegistered(method: string) {
+    this.track({ type: "user_register", method });
+  }
+
+  newsletterSignedUp(email: string, source: string) {
+    this.track({ type: "newsletter_signup", email, source });
+  }
+}
+
+let trackerInstance: AnalyticsTracker | null = null;
+
+export function getTracker(): AnalyticsTracker {
+  if (!trackerInstance) {
+    trackerInstance = new AnalyticsTracker();
+  }
+  return trackerInstance;
+}

src/lib/analytics/core/types.ts

@@ -0,0 +1,62 @@
+export interface ProductData {
+  id: string;
+  name: string;
+  price: number;
+  currency: string;
+  category?: string;
+  variant?: string;
+}
+
+export interface CartData {
+  total: number;
+  currency: string;
+  item_count: number;
+  items?: Array<{
+    id: string;
+    name: string;
+    quantity: number;
+    price: number;
+  }>;
+}
+
+export interface OrderData {
+  order_id: string;
+  order_number: string;
+  total: number;
+  currency: string;
+  item_count: number;
+  shipping_cost?: number;
+  coupon_code?: string;
+  customer_email?: string;
+  payment_method?: string;
+}
+
+export interface UserData {
+  profileId: string;
+  email?: string;
+  firstName?: string;
+  lastName?: string;
+}
+
+export type AnalyticsEvent =
+  | { type: "product_viewed"; product: ProductData }
+  | { type: "add_to_cart"; product: ProductData & { quantity: number } }
+  | { type: "remove_from_cart"; product: { id: string; name: string; quantity: number } }
+  | { type: "cart_view"; cart: CartData }
+  | { type: "checkout_started"; cart: CartData }
+  | { type: "checkout_step"; step: string; data?: Record<string, unknown> }
+  | { type: "order_completed"; order: OrderData }
+  | { type: "search"; query: string; results_count: number }
+  | { type: "external_link_click"; url: string; label?: string }
+  | { type: "wishlist_add"; product: { id: string; name: string } }
+  | { type: "user_login"; method: string }
+  | { type: "user_register"; method: string }
+  | { type: "newsletter_signup"; email: string; source: string };
+
+export interface AnalyticsProvider {
+  name: string;
+  track(event: AnalyticsEvent): void;
+  identify?(user: UserData): void;
+  revenue?(amount: number, currency: string, properties?: Record<string, unknown>): Promise<void>;
+  isAvailable(): boolean;
+}

src/lib/analytics/hooks/useAnalytics.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useOpenPanel } from "@openpanel/nextjs";
+import { getTracker, AnalyticsTracker } from "../core/AnalyticsTracker";
+import { OpenPanelProvider } from "../providers/OpenPanelProvider";
+import { RybbitProvider } from "../providers/RybbitProvider";
+
+let initialized = false;
+
+export function useAnalytics(): AnalyticsTracker {
+  const op = useOpenPanel();
+  const [isReady, setIsReady] = useState(false);
+  const trackerRef = useRef<AnalyticsTracker | null>(null);
+
+  useEffect(() => {
+    if (!initialized) {
+      const tracker = getTracker();
+      tracker.addProvider(new OpenPanelProvider(op));
+      tracker.addProvider(new RybbitProvider());
+      trackerRef.current = tracker;
+      initialized = true;
+      setIsReady(true);
+    }
+  }, [op]);
+
+  return trackerRef.current || getTracker();
+}

src/lib/analytics/index.ts

@@ -0,0 +1,5 @@
+export { AnalyticsTracker, getTracker } from "./core/AnalyticsTracker";
+export type { AnalyticsEvent, AnalyticsProvider, ProductData, CartData, OrderData, UserData } from "./core/types";
+export { OpenPanelProvider } from "./providers/OpenPanelProvider";
+export { RybbitProvider } from "./providers/RybbitProvider";
+export { useAnalytics } from "./hooks/useAnalytics";

src/lib/analytics/providers/OpenPanelProvider.ts

@@ -0,0 +1,146 @@
+"use client";
+
+import type { AnalyticsEvent, AnalyticsProvider, UserData } from "../core/types";
+
+export class OpenPanelProvider implements AnalyticsProvider {
+  name = "OpenPanel";
+  private op: ReturnType<typeof import("@openpanel/nextjs").useOpenPanel>;
+  private isClient: boolean;
+
+  constructor(op: ReturnType<typeof import("@openpanel/nextjs").useOpenPanel>) {
+    this.op = op;
+    this.isClient = typeof window !== "undefined";
+  }
+
+  isAvailable(): boolean {
+    return this.isClient;
+  }
+
+  track(event: AnalyticsEvent): void {
+    if (!this.isAvailable()) return;
+
+    switch (event.type) {
+      case "product_viewed":
+        this.op.track("product_viewed", {
+          product_id: event.product.id,
+          product_name: event.product.name,
+          price: event.product.price,
+          currency: event.product.currency,
+          category: event.product.category,
+        });
+        break;
+
+      case "add_to_cart":
+        this.op.track("add_to_cart", {
+          product_id: event.product.id,
+          product_name: event.product.name,
+          price: event.product.price,
+          currency: event.product.currency,
+          quantity: event.product.quantity,
+          variant: event.product.variant,
+        });
+        break;
+
+      case "remove_from_cart":
+        this.op.track("remove_from_cart", {
+          product_id: event.product.id,
+          product_name: event.product.name,
+          quantity: event.product.quantity,
+        });
+        break;
+
+      case "cart_view":
+        this.op.track("cart_view", {
+          cart_total: event.cart.total,
+          currency: event.cart.currency,
+          item_count: event.cart.item_count,
+        });
+        break;
+
+      case "checkout_started":
+        this.op.track("checkout_started", {
+          cart_total: event.cart.total,
+          currency: event.cart.currency,
+          item_count: event.cart.item_count,
+          items: event.cart.items,
+        });
+        break;
+
+      case "checkout_step":
+        this.op.track("checkout_step", {
+          step: event.step,
+          ...event.data,
+        });
+        break;
+
+      case "order_completed":
+        this.op.track("order_completed", {
+          order_id: event.order.order_id,
+          order_number: event.order.order_number,
+          total: event.order.total,
+          currency: event.order.currency,
+          item_count: event.order.item_count,
+          shipping_cost: event.order.shipping_cost,
+          coupon_code: event.order.coupon_code,
+          customer_email: event.order.customer_email,
+          payment_method: event.order.payment_method,
+        });
+        break;
+
+      case "search":
+        this.op.track("search", {
+          query: event.query,
+          results_count: event.results_count,
+        });
+        break;
+
+      case "external_link_click":
+        this.op.track("external_link_click", {
+          url: event.url,
+          label: event.label,
+        });
+        break;
+
+      case "wishlist_add":
+        this.op.track("wishlist_add", {
+          product_id: event.product.id,
+          product_name: event.product.name,
+        });
+        break;
+
+      case "user_login":
+        this.op.track("user_login", {
+          method: event.method,
+        });
+        break;
+
+      case "user_register":
+        this.op.track("user_register", {
+          method: event.method,
+        });
+        break;
+
+      case "newsletter_signup":
+        this.op.track("newsletter_signup", {
+          email: event.email,
+          source: event.source,
+        });
+        break;
+    }
+  }
+
+  identify(user: UserData): void {
+    if (!this.isAvailable()) return;
+    this.op.identify({
+      profileId: user.profileId,
+      firstName: user.firstName,
+      lastName: user.lastName,
+      email: user.email,
+    });
+  }
+
+  async revenue(amount: number, currency: string, properties?: Record<string, unknown>): Promise<void> {
+    if (!this.isAvailable()) return;
+    await this.op.revenue(amount, { currency, ...properties });
+  }
+}

src/lib/analytics/providers/RybbitProvider.ts

@@ -0,0 +1,233 @@
+"use client";
+
+import type { AnalyticsEvent, AnalyticsProvider, UserData } from "../core/types";
+
+declare global {
+  interface Window {
+    rybbit?: {
+      event: (eventName: string, eventData?: Record<string, any>) => void;
+      pageview: () => void;
+    };
+  }
+}
+
+type QueuedEvent = {
+  eventName: string;
+  properties?: Record<string, unknown>;
+};
+
+export class RybbitProvider implements AnalyticsProvider {
+  name = "Rybbit";
+  private isClient: boolean;
+  private eventQueue: QueuedEvent[] = [];
+  private flushInterval: ReturnType<typeof setInterval> | null = null;
+  private initialized = false;
+
+  constructor() {
+    this.isClient = typeof window !== "undefined";
+    
+    if (this.isClient) {
+      console.log("[RybbitProvider] Constructor called");
+      // Start checking for rybbit availability
+      this.startFlushInterval();
+      
+      // Also try to flush immediately in case script is already loaded
+      setTimeout(() => this.tryFlushQueue(), 100);
+    }
+  }
+
+  private startFlushInterval() {
+    // Check every 500ms for up to 15 seconds
+    let attempts = 0;
+    const maxAttempts = 30;
+    
+    this.flushInterval = setInterval(() => {
+      attempts++;
+      const available = this.isAvailable();
+      
+      if (available && !this.initialized) {
+        console.log("[RybbitProvider] Script became available, flushing queue");
+        this.initialized = true;
+      }
+      
+      this.tryFlushQueue();
+      
+      if (available || attempts >= maxAttempts) {
+        this.stopFlushInterval();
+        if (attempts >= maxAttempts && !available) {
+          console.warn("[RybbitProvider] Max attempts reached, script not loaded. Queue size:", this.eventQueue.length);
+        }
+      }
+    }, 500);
+  }
+
+  private stopFlushInterval() {
+    if (this.flushInterval) {
+      clearInterval(this.flushInterval);
+      this.flushInterval = null;
+    }
+  }
+
+  private tryFlushQueue() {
+    if (!this.isAvailable() || this.eventQueue.length === 0) {
+      return;
+    }
+
+    console.log(`[RybbitProvider] Flushing ${this.eventQueue.length} queued events`);
+    
+    // Flush all queued events
+    while (this.eventQueue.length > 0) {
+      const event = this.eventQueue.shift();
+      if (event) {
+        this.sendEvent(event.eventName, event.properties);
+      }
+    }
+  }
+
+  isAvailable(): boolean {
+    return this.isClient && typeof window.rybbit?.event === "function";
+  }
+
+  private sendEvent(eventName: string, properties?: Record<string, unknown>): void {
+    try {
+      window.rybbit!.event(eventName, properties);
+      console.log(`[Rybbit] Event sent: ${eventName}`);
+    } catch (e) {
+      console.warn(`[Rybbit] Tracking error for ${eventName}:`, e);
+    }
+  }
+
+  private trackEvent(eventName: string, properties?: Record<string, unknown>): void {
+    if (!this.isClient) return;
+
+    if (this.isAvailable()) {
+      this.sendEvent(eventName, properties);
+    } else {
+      // Queue the event for later
+      this.eventQueue.push({ eventName, properties });
+      console.log(`[Rybbit] Queued event: ${eventName}, queue size: ${this.eventQueue.length}`);
+    }
+  }
+
+  track(event: AnalyticsEvent): void {
+    switch (event.type) {
+      case "product_viewed":
+        this.trackEvent("product_view", {
+          product_id: event.product.id,
+          product_name: event.product.name,
+          price: event.product.price,
+          currency: event.product.currency,
+          category: event.product.category,
+          variant: event.product.variant,
+        });
+        break;
+
+      case "add_to_cart":
+        this.trackEvent("add_to_cart", {
+          product_id: event.product.id,
+          product_name: event.product.name,
+          price: event.product.price,
+          currency: event.product.currency,
+          quantity: event.product.quantity,
+          variant: event.product.variant,
+        });
+        break;
+
+      case "remove_from_cart":
+        this.trackEvent("remove_from_cart", {
+          product_id: event.product.id,
+          product_name: event.product.name,
+          quantity: event.product.quantity,
+        });
+        break;
+
+      case "cart_view":
+        this.trackEvent("cart_view", {
+          cart_total: event.cart.total,
+          currency: event.cart.currency,
+          item_count: event.cart.item_count,
+        });
+        break;
+
+      case "checkout_started":
+        this.trackEvent("checkout_started", {
+          cart_total: event.cart.total,
+          currency: event.cart.currency,
+          item_count: event.cart.item_count,
+          items: event.cart.items,
+        });
+        break;
+
+      case "checkout_step":
+        this.trackEvent("checkout_step", {
+          step: event.step,
+          ...event.data,
+        });
+        break;
+
+      case "order_completed":
+        this.trackEvent("order_completed", {
+          order_id: event.order.order_id,
+          order_number: event.order.order_number,
+          total: event.order.total,
+          currency: event.order.currency,
+          item_count: event.order.item_count,
+          shipping_cost: event.order.shipping_cost,
+          coupon_code: event.order.coupon_code,
+          customer_email: event.order.customer_email,
+          payment_method: event.order.payment_method,
+          revenue: event.order.total,
+        });
+        break;
+
+      case "search":
+        this.trackEvent("search", {
+          query: event.query,
+          results_count: event.results_count,
+        });
+        break;
+
+      case "external_link_click":
+        this.trackEvent("external_link_click", {
+          url: event.url,
+          label: event.label,
+        });
+        break;
+
+      case "wishlist_add":
+        this.trackEvent("wishlist_add", {
+          product_id: event.product.id,
+          product_name: event.product.name,
+        });
+        break;
+
+      case "user_login":
+        this.trackEvent("user_login", {
+          method: event.method,
+        });
+        break;
+
+      case "user_register":
+        this.trackEvent("user_register", {
+          method: event.method,
+        });
+        break;
+
+      case "newsletter_signup":
+        this.trackEvent("newsletter_signup", {
+          email: event.email,
+          source: event.source,
+        });
+        break;
+    }
+  }
+
+  identify(_user: UserData): void {
+    // Rybbit doesn't have explicit identify - it's handled automatically via cookies
+  }
+
+  revenue?(_amount: number, _currency: string, _properties?: Record<string, unknown>): Promise<void> {
+    // Revenue is tracked via order_completed event
+    return Promise.resolve();
+  }
+}

src/middleware.ts

@@ -0,0 +1,35 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export function middleware(request: NextRequest) {
+  const response = NextResponse.next();
+
+  const url = request.nextUrl.pathname;
+
+  if (
+    url.startsWith("/sr") ||
+    url.startsWith("/en") ||
+    url.startsWith("/de") ||
+    url.startsWith("/fr") ||
+    url === "/"
+  ) {
+    if (
+      !url.includes("/checkout") &&
+      !url.includes("/cart") &&
+      !url.includes("/api/")
+    ) {
+      response.headers.set(
+        "Cache-Control",
+        "public, max-age=3600, stale-while-revalidate=86400"
+      );
+    }
+  }
+
+  return response;
+}
+
+export const config = {
+  matcher: [
+    "/((?!_next/static|_next/image|favicon.ico|icon.png|robots.txt|sitemap.xml).*)",
+  ],
+};