feat: add high-converting 404 page with bestsellers, testimonials, and urgency messages

- Create conversion-optimized 404 page with multiple sections
- Add NotFound translations for en, sr, de, fr locales
- Implement rotating urgency messages component
- Display first 4 products as bestsellers with product cards
- Show 6 rotating testimonials from ProductReviews
- Include TrustBadges for social proof
- Add OpenPanel tracking for 404 page views
- Final CTA section with link to all products

SEO: Returns proper 404 status while converting lost traffic into customers

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

@@ -0,0 +1,277 @@
+import { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { getProducts, getProductImage, getProductPrice } from "@/lib/saleor";
+import { getSaleorLocale, isValidLocale, DEFAULT_LOCALE } from "@/lib/i18n/locales";
+import type { Locale } from "@/lib/i18n/locales";
+import type { Product } from "@/types/saleor";
+import Link from "next/link";
+import Image from "next/image";
+import { Star, ArrowRight } from "lucide-react";
+import TrustBadges from "@/components/home/TrustBadges";
+import UrgencyMessages from "@/components/404/UrgencyMessages";
+import { headers } from "next/headers";
+
+export const metadata: Metadata = {
+  title: "Page Not Found | ManoonOils",
+  description: "Discover our bestselling natural oils for hair and skin care.",
+};
+
+interface NotFoundPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function NotFoundPage({ params }: NotFoundPageProps) {
+  const { locale } = await params;
+  const validLocale = isValidLocale(locale) ? locale : DEFAULT_LOCALE;
+  const t = await getTranslations({ locale: validLocale, namespace: "NotFound" });
+  const productReviewT = await getTranslations({ locale: validLocale, namespace: "ProductReviews" });
+  
+  const saleorLocale = getSaleorLocale(validLocale as Locale);
+  
+  // Fetch products
+  let products: Product[] = [];
+  try {
+    products = await getProducts(saleorLocale);
+  } catch (error) {
+    console.error("Error fetching products for 404 page:", error);
+  }
+  
+  // Get first 4 products as bestsellers
+  const bestsellers = products.slice(0, 4);
+  
+  // Get product reviews for rotation
+  const productReviews = productReviewT.raw("reviews") as Array<{
+    id: number;
+    name: string;
+    location: string;
+    text: string;
+    rating: number;
+  }>;
+
+  // Track 404 page view via OpenPanel (client-side will handle this)
+  const headersList = await headers();
+  const referer = headersList.get("referer") || "";
+
+  return (
+    <div className="min-h-screen bg-white">
+      {/* Hero Section */}
+      <section className="pt-24 pb-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-b from-gray-50 to-white">
+        <div className="max-w-4xl mx-auto text-center">
+          <div
+            className="opacity-0 translate-y-5 animate-[fadeInUp_0.6s_ease-out_forwards]"
+          >
+            <h1 className="text-4xl sm:text-5xl lg:text-6xl font-serif italic text-[#1A1A1A] mb-4 leading-tight">
+              {t("title")}
+            </h1>
+            <p className="text-xl sm:text-2xl text-[#666666] mb-8 font-light">
+              {t("subtitle")}
+            </p>
+            
+            <Link
+              href={`/${validLocale}/products`}
+              className="inline-flex items-center gap-2 px-8 py-4 bg-[#1A1A1A] text-white text-sm uppercase tracking-[0.15em] font-medium hover:bg-[#333333] transition-colors duration-300"
+            >
+              {t("shopBestsellers")}
+              <ArrowRight className="w-4 h-4" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Trust Badges */}
+      <TrustBadges />
+
+      {/* Urgency Messages */}
+      <UrgencyMessages />
+
+      {/* Bestsellers Section */}
+      <section className="py-16 sm:py-20 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-7xl mx-auto">
+          <div
+            className="text-center mb-12 opacity-0 translate-y-5"
+            style={{ animation: "fadeInUp 0.6s ease-out forwards" }}
+          >
+            <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
+              Popular
+            </span>
+            <h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight">
+              {t("bestsellersTitle")}
+            </h2>
+          </div>
+
+          {bestsellers.length > 0 ? (
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-8">
+              {bestsellers.map((product, index) => {
+                const image = getProductImage(product);
+                const price = getProductPrice(product);
+                const isAvailable = product.variants?.[0]?.quantityAvailable > 0;
+
+                return (
+                  <div
+                    key={product.id}
+                    className="group opacity-0 translate-y-5"
+                    style={{ 
+                      animation: `fadeInUp 0.5s ease-out ${index * 100}ms forwards` 
+                    }}
+                  >
+                    <Link href={`/${validLocale}/products/${product.slug}`} className="block">
+                      <div className="relative w-full aspect-square bg-[#f8f9fa] overflow-hidden mb-4">
+                        {image ? (
+                          <Image
+                            src={image}
+                            alt={product.name}
+                            fill
+                            className="object-cover object-center transition-transform duration-700 ease-out group-hover:scale-105"
+                            sizes="(max-width: 768px) 50vw, 25vw"
+                          />
+                        ) : (
+                          <div className="absolute inset-0 flex items-center justify-center text-[#999999]">
+                            <span className="text-sm">No Image</span>
+                          </div>
+                        )}
+
+                        {!isAvailable && (
+                          <div className="absolute inset-0 bg-white/80 flex items-center justify-center">
+                            <span className="text-sm uppercase tracking-[0.1em] text-[#666666]">
+                              Out of Stock
+                            </span>
+                          </div>
+                        )}
+
+                        <div className="absolute inset-x-0 bottom-0 p-4 translate-y-full group-hover:translate-y-0 transition-transform 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) => e.preventDefault()}
+                          >
+                            Quick Add
+                          </button>
+                        </div>
+                      </div>
+
+                      <div className="text-center">
+                        <h3 className="text-[15px] font-medium text-[#1a1a1a] mb-1 group-hover:text-[#666666] transition-colors line-clamp-1">
+                          {product.name}
+                        </h3>
+                        <p className="text-[14px] text-[#666666]">
+                          {price || "Contact for price"}
+                        </p>
+                      </div>
+                    </Link>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <p className="text-[#666666]">No products available at the moment.</p>
+            </div>
+          )}
+        </div>
+      </section>
+
+      {/* Testimonials Section */}
+      <section className="py-16 sm:py-20 px-4 sm:px-6 lg:px-8 bg-[#F0F7FA]">
+        <div className="max-w-7xl mx-auto">
+          <div 
+            className="text-center mb-12 opacity-0 translate-y-5"
+            style={{ animation: "fadeInUp 0.6s ease-out forwards" }}
+          >
+            <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
+              Testimonials
+            </span>
+            <h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] tracking-tight">
+              {t("testimonialsTitle")}
+            </h2>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {productReviews.slice(0, 6).map((review, index) => (
+              <div
+                key={review.id}
+                className="bg-white rounded-lg p-6 shadow-sm opacity-0 translate-y-5"
+                style={{ animation: `fadeInUp 0.6s ease-out ${index * 0.1}s forwards` }}
+              >
+                <div className="flex gap-1 mb-4">
+                  {[...Array(5)].map((_, i) => (
+                    <Star
+                      key={i}
+                      className={`w-4 h-4 ${
+                        i < review.rating
+                          ? "fill-amber-400 text-amber-400"
+                          : "fill-gray-200 text-gray-200"
+                      }`}
+                    />
+                  ))}
+                </div>
+                <p className="text-[#1A1A1A] mb-4 text-sm leading-relaxed">
+                  &ldquo;{review.text}&rdquo;
+                </p>
+                <div className="flex items-center gap-3">
+                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-[#c9a962] to-[#e8967a] flex items-center justify-center text-white font-medium text-sm">
+                    {review.name.charAt(0)}
+                  </div>
+                  <div>
+                    <p className="font-medium text-[#1A1A1A] text-sm">{review.name}</p>
+                    <p className="text-xs text-[#6B7280]">{review.location}</p>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Final CTA Section */}
+      <section className="py-16 sm:py-24 px-4 sm:px-6 lg:px-8">
+        <div className="max-w-4xl mx-auto text-center">
+          <div
+            className="opacity-0 translate-y-5"
+            style={{ animation: "fadeInUp 0.6s ease-out forwards" }}
+          >
+            <h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] mb-4 tracking-tight">
+              {t("finalCTATitle")}
+            </h2>
+            <p className="text-lg sm:text-xl text-[#666666] mb-8 font-light">
+              {t("finalCTASubtitle")}
+            </p>
+            
+            <Link
+              href={`/${validLocale}/products`}
+              className="inline-flex items-center gap-2 px-10 py-4 bg-[#1A1A1A] text-white text-sm uppercase tracking-[0.15em] font-medium hover:bg-[#333333] transition-colors duration-300"
+            >
+              {t("viewAllProducts")}
+              <ArrowRight className="w-4 h-4" />
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* OpenPanel Tracking Script */}
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `
+            if (typeof window !== 'undefined' && window.op) {
+              window.op('track', '404_page_view', {
+                url: window.location.pathname,
+                referrer: '${referer}'
+              });
+            }
+          `,
+        }}
+      />
+
+      <style jsx global>{`
+        @keyframes fadeInUp {
+          from {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          to {
+            opacity: 1;
+            transform: translateY(0);
+          }
+        }
+      `}</style>
+    </div>
+  );
+}

src/components/404/UrgencyMessages.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useTranslations } from "next-intl";
+
+export default function UrgencyMessages() {
+  const t = useTranslations("NotFound");
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const messages = [
+    t("urgency1"),
+    t("urgency2"),
+    t("urgency3", { amount: "3,000" }),
+    t("urgency4"),
+    t("urgency5"),
+  ];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % messages.length);
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, [messages.length]);
+
+  return (
+    <div className="bg-gradient-to-r from-amber-50 to-orange-50 border-y border-amber-100 py-3 overflow-hidden">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <AnimatePresence mode="wait">
+          <motion.p
+            key={currentIndex}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            transition={{ duration: 0.5 }}
+            className="text-center text-sm sm:text-base text-amber-800 font-medium"
+          >
+            {messages[currentIndex]}
+          </motion.p>
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

src/i18n/messages/de.json

@@ -384,5 +384,20 @@
     "orderNumber": "Bestellnummer",
     "confirmationEmail": "Sie erhalten in Kürze eine Bestätigungs-E-Mail. Wir werden Sie kontaktieren, um Nachnahme zu arrangieren.",
     "continueShoppingBtn": "Weiter einkaufen"
+  },
+  "NotFound": {
+    "title": "Wir konnten diese Seite nicht finden...",
+    "subtitle": "...aber wir haben etwas Besseres für Sie gefunden",
+    "shopBestsellers": "Bestseller Shoppen",
+    "bestsellersTitle": "Unsere Bestseller Shoppen",
+    "testimonialsTitle": "Schließen Sie sich 50.000+ zufriedenen Kunden an",
+    "finalCTATitle": "Bereit, Ihre Reise zu beginnen?",
+    "finalCTASubtitle": "Entdecken Sie den natürlichen Unterschied",
+    "viewAllProducts": "Alle Produkte Shoppen",
+    "urgency1": "🔥 500+ Menschen kaufen gerade unsere Bestseller",
+    "urgency2": "⚡ Nur noch 50 Flaschen unseres beliebtesten Serums",
+    "urgency3": "📦 Kostenloser Versand bei Bestellungen über {amount}",
+    "urgency4": "⭐ 4,9/5 Bewertung von 50.000+ zufriedenen Kunden",
+    "urgency5": "🚀 Bestellungen werden innerhalb von 24 Stunden versandt"
   }
 }

src/i18n/messages/en.json

@@ -431,5 +431,20 @@
     "orderNumber": "Order Number",
     "confirmationEmail": "You will receive a confirmation email shortly. We will contact you to arrange Cash on Delivery.",
     "continueShoppingBtn": "Continue Shopping"
+  },
+  "NotFound": {
+    "title": "We couldn't find that page...",
+    "subtitle": "...but we found something better for you",
+    "shopBestsellers": "Shop Bestsellers",
+    "bestsellersTitle": "Shop Our Bestsellers",
+    "testimonialsTitle": "Join 50,000+ Happy Customers",
+    "finalCTATitle": "Ready to Start Your Journey?",
+    "finalCTASubtitle": "Discover the natural difference",
+    "viewAllProducts": "Shop All Products",
+    "urgency1": "🔥 500+ people are shopping our bestsellers right now",
+    "urgency2": "⚡ Only 50 bottles left of our most popular serum",
+    "urgency3": "📦 Free shipping on orders over {amount}",
+    "urgency4": "⭐ 4.9/5 rating from 50,000+ happy customers",
+    "urgency5": "🚀 Orders ship within 24 hours"
   }
 }

src/i18n/messages/fr.json

@@ -384,5 +384,20 @@
     "orderNumber": "Numéro de Commande",
     "confirmationEmail": "Vous recevrez bientôt un email de confirmation. Nous vous contacterons pour organiser le paiement contre-remboursement.",
     "continueShoppingBtn": "Continuer les Achats"
+  },
+  "NotFound": {
+    "title": "Nous n'avons pas trouvé cette page...",
+    "subtitle": "...mais nous avons trouvé quelque chose de mieux pour vous",
+    "shopBestsellers": "Acheter les Best-sellers",
+    "bestsellersTitle": "Acheter Nos Best-sellers",
+    "testimonialsTitle": "Rejoignez 50 000+ Clients Satisfaits",
+    "finalCTATitle": "Prêt à Commencer Votre Voyage?",
+    "finalCTASubtitle": "Découvrez la différence naturelle",
+    "viewAllProducts": "Voir Tous les Produits",
+    "urgency1": "🔥 500+ personnes achètent nos best-sellers en ce moment",
+    "urgency2": "⚡ Plus que 50 bouteilles de notre sérum le plus populaire",
+    "urgency3": "📦 Livraison gratuite pour les commandes supérieures à {amount}",
+    "urgency4": "⭐ Note de 4,9/5 de 50 000+ clients satisfaits",
+    "urgency5": "🚀 Les commandes sont expédiées sous 24 heures"
   }
 }

src/i18n/messages/sr.json

@@ -430,5 +430,20 @@
     "orderNumber": "Broj narudžbine",
     "confirmationEmail": "Uскoro ćete primiti email potvrde. Kontaktiraćemo vas da dogovorimo pouzećem plaćanje.",
     "continueShoppingBtn": "Nastavi kupovinu"
+  },
+  "NotFound": {
+    "title": "Nismo mogli da pronađemo tu stranicu...",
+    "subtitle": "...ali smo pronašli nešto bolje za vas",
+    "shopBestsellers": "Kupi Najprodavanije",
+    "bestsellersTitle": "Kupi Naše Najprodavanije Proizvode",
+    "testimonialsTitle": "Pridruži se 50,000+ Zadovoljnih Kupaca",
+    "finalCTATitle": "Spremni da Zapocnete Svoje Putovanje?",
+    "finalCTASubtitle": "Otkrijte prirodnu razliku",
+    "viewAllProducts": "Pogledaj Sve Proizvode",
+    "urgency1": "🔥 500+ ljudi kupuje naše najprodavanije proizvode upravo sada",
+    "urgency2": "⚡ Preostalo samo 50 bočica našeg najpopularnijeg seruma",
+    "urgency3": "📦 Besplatna dostava za porudžbine preko {amount} RSD",
+    "urgency4": "⭐ Ocena 4.9/5 od 50,000+ zadovoljnih kupaca",
+    "urgency5": "🚀 Porudžbine se šalju u roku od 24 sata"
   }
 }