From 5b33ede980d60662b0fe2e47d7f30e6cc660b070 Mon Sep 17 00:00:00 2001
From: Unchained <unchained@nodecrew.me>
Date: Sat, 28 Mar 2026 22:44:41 +0200
Subject: [PATCH] fix: make 404 page fully server-side compatible

- Remove TrustBadges and UrgencyMessages client components
- Convert to pure Server Component with no client dependencies
- Remove onClick handlers and use div elements instead of buttons
- Simplify product card hover to use CSS-only transitions
- Remove [locale]/not-found.tsx (root one handles all locales)
- Static display of first urgency message instead of rotation
---
 src/app/[locale]/not-found.tsx | 279 ---------------------------------
 src/app/not-found.tsx          |  70 ++++-----
 2 files changed, 27 insertions(+), 322 deletions(-)
 delete mode 100644 src/app/[locale]/not-found.tsx

diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx
deleted file mode 100644
index 5616de8..0000000
--- a/src/app/[locale]/not-found.tsx
+++ /dev/null
@@ -1,279 +0,0 @@
-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.",
-};
-
-export default async function NotFoundPage() {
-  // Get locale from URL path
-  const headersList = await headers();
-  const pathname = headersList.get("x-invoke-path") || headersList.get("x-matched-path") || "/";
-  
-  // Extract locale from path (e.g., /en/products → en, /sr/products → sr)
-  const pathSegments = pathname.split("/").filter(Boolean);
-  const potentialLocale = pathSegments[0];
-  const validLocale = isValidLocale(potentialLocale) ? potentialLocale : 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 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 * 100}ms 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>
-  );
-}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index b1823f3..4f0524c 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -7,8 +7,6 @@ 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 = {
@@ -51,15 +49,21 @@ export default async function NotFoundPage() {
     rating: number;
   }>;
 
-  // Track 404 page view via OpenPanel (client-side will handle this)
-  const referer = headersList.get("referer") || "";
+  // Get urgency messages
+  const urgencyMessages = [
+    t("urgency1"),
+    t("urgency2"),
+    t("urgency3", { amount: "3,000" }),
+    t("urgency4"),
+    t("urgency5"),
+  ];
 
   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="animate-fade-in">
+          <div>
             <h1 className="text-4xl sm:text-5xl lg:text-6xl font-serif italic text-[#1A1A1A] mb-4 leading-tight">
               {t("title")}
             </h1>
@@ -78,18 +82,19 @@ export default async function NotFoundPage() {
         </div>
       </section>
 
-      {/* Trust Badges */}
-      <TrustBadges />
-
-      {/* Urgency Messages */}
-      <UrgencyMessages />
+      {/* Urgency Messages - Static display of first message */}
+      <div className="bg-gradient-to-r from-amber-50 to-orange-50 border-y border-amber-100 py-3">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <p className="text-center text-sm sm:text-base text-amber-800 font-medium">
+            {urgencyMessages[0]}
+          </p>
+        </div>
+      </div>
 
       {/* 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"
-          >
+          <div className="text-center mb-12">
             <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
               Popular
             </span>
@@ -100,7 +105,7 @@ export default async function NotFoundPage() {
 
           {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) => {
+              {bestsellers.map((product) => {
                 const image = getProductImage(product);
                 const price = getProductPrice(product);
                 const isAvailable = product.variants?.[0]?.quantityAvailable > 0;
@@ -109,8 +114,6 @@ export default async function NotFoundPage() {
                   <div
                     key={product.id}
                     className="group"
-                    style={{ 
-                    }}
                   >
                     <Link href={`/${validLocale}/products/${product.slug}`} className="block">
                       <div className="relative w-full aspect-square bg-[#f8f9fa] overflow-hidden mb-4">
@@ -137,12 +140,9 @@ export default async function NotFoundPage() {
                         )}
 
                         <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 className="w-full py-3 bg-black text-white text-xs uppercase tracking-[0.1em] text-center">
+                            View Product
+                          </div>
                         </div>
                       </div>
 
@@ -170,9 +170,7 @@ export default async function NotFoundPage() {
       {/* 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"
-          >
+          <div className="text-center mb-12">
             <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
               Testimonials
             </span>
@@ -182,7 +180,7 @@ export default async function NotFoundPage() {
           </div>
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {productReviews.slice(0, 6).map((review, index) => (
+            {productReviews.slice(0, 6).map((review) => (
               <div
                 key={review.id}
                 className="bg-white rounded-lg p-6 shadow-sm"
@@ -199,9 +197,11 @@ export default async function NotFoundPage() {
                     />
                   ))}
                 </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)}
@@ -220,9 +220,7 @@ export default async function NotFoundPage() {
       {/* 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=""
-          >
+          <div>
             <h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] mb-4 tracking-tight">
               {t("finalCTATitle")}
             </h2>
@@ -240,20 +238,6 @@ export default async function NotFoundPage() {
           </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}'
-              });
-            }
-          `,
-        }}
-      />
     </div>
   );
 }