unchained/manoon-headless
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: remove styled-jsx from not-found.tsx to fix Server Component error

Browse Source 
- 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
This commit is contained in:
Unchained
2026-03-28 22:37:28 +02:00
parent 8ebfb6a6f3
commit 99a9787455
1 changed files with 6 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/not-found.tsx
View File

@@ -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>
);
}