From 99a9787455a8c3c95d477af9f6bc05e93af23519 Mon Sep 17 00:00:00 2001
From: Unchained <unchained@nodecrew.me>
Date: Sat, 28 Mar 2026 22:37:28 +0200
Subject: [PATCH] fix: remove styled-jsx from not-found.tsx to fix Server
 Component error

- Remove styled-jsx global styles that don't work in Server Components
- Remove custom fadeInUp CSS animations
- Simplify animation classes to use Tailwind defaults or none
- Fix Server Component compatibility issues
---
 src/app/not-found.tsx | 32 ++++++--------------------------
 1 file changed, 6 insertions(+), 26 deletions(-)

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 5616de8..b1823f3 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -59,9 +59,7 @@ export default async function NotFoundPage() {
       {/* 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]"
-          >
+          <div className="animate-fade-in">
             <h1 className="text-4xl sm:text-5xl lg:text-6xl font-serif italic text-[#1A1A1A] mb-4 leading-tight">
               {t("title")}
             </h1>
@@ -90,8 +88,7 @@ export default async function NotFoundPage() {
       <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" }}
+            className="text-center mb-12"
           >
             <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
               Popular
@@ -111,9 +108,8 @@ export default async function NotFoundPage() {
                 return (
                   <div
                     key={product.id}
-                    className="group opacity-0 translate-y-5"
+                    className="group"
                     style={{ 
-                      animation: `fadeInUp 0.5s ease-out ${index * 100}ms forwards` 
                     }}
                   >
                     <Link href={`/${validLocale}/products/${product.slug}`} className="block">
@@ -175,8 +171,7 @@ export default async function NotFoundPage() {
       <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" }}
+            className="text-center mb-12"
           >
             <span className="text-xs tracking-[0.3em] uppercase text-[#6B7280] mb-4 block">
               Testimonials
@@ -190,8 +185,7 @@ export default async function NotFoundPage() {
             {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` }}
+                className="bg-white rounded-lg p-6 shadow-sm"
               >
                 <div className="flex gap-1 mb-4">
                   {[...Array(5)].map((_, i) => (
@@ -227,8 +221,7 @@ export default async function NotFoundPage() {
       <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" }}
+            className=""
           >
             <h2 className="font-serif italic text-3xl sm:text-4xl lg:text-5xl text-[#1A1A1A] mb-4 tracking-tight">
               {t("finalCTATitle")}
@@ -261,19 +254,6 @@ export default async function NotFoundPage() {
           `,
         }}
       />
-
-      <style jsx global>{`
-        @keyframes fadeInUp {
-          from {
-            opacity: 0;
-            transform: translateY(20px);
-          }
-          to {
-            opacity: 1;
-            transform: translateY(0);
-          }
-        }
-      `}</style>
     </div>
   );
 }