initial commit

app/topics/[slug]/not-found.tsx

@@ -0,0 +1,50 @@
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Header } from '@/components/header'
+import { Footer } from '@/components/footer'
+import { FileX, ArrowLeft } from 'lucide-react'
+
+export default function TopicNotFound() {
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      <main className="container pt-24 pb-16">
+        <div className="max-w-2xl mx-auto text-center">
+          <Card className="border-dashed">
+            <CardContent className="p-12">
+              <div className="w-16 h-16 bg-muted rounded-full flex items-center justify-center mx-auto mb-6">
+                <FileX className="w-8 h-8 text-muted-foreground" />
+              </div>
+              
+              <h1 className="text-3xl font-bold mb-4">Topic Post Not Found</h1>
+              <p className="text-muted-foreground mb-8 leading-relaxed">
+                The topic post you're looking for doesn't exist or may have been moved. 
+                It could be a mistyped URL or the post might have been removed.
+              </p>
+              
+              <div className="flex flex-col sm:flex-row gap-4 justify-center">
+                <Button asChild>
+                  <Link href="/topics" className="flex items-center gap-2">
+                    <ArrowLeft className="w-4 h-4" />
+                    Back to Topic
+                  </Link>
+                </Button>
+                <Button variant="outline" asChild>
+                  <Link href="/">Go Home</Link>
+                </Button>
+              </div>
+              
+              <div className="mt-8 p-4 bg-muted/50 rounded-lg">
+                <p className="text-sm text-muted-foreground">
+                  Looking for something specific? Try searching or browsing our latest articles.
+                </p>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  )
+}