initial commit

app/error.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import { useEffect } from 'react'
+import Link from 'next/link'
+import { Header } from '@/components/header'
+import { Footer } from '@/components/footer'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent } from '@/components/ui/card'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { RefreshCcw, Home, AlertTriangle, Server } from 'lucide-react'
+
+interface ErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('Application error:', error)
+  }, [error])
+
+  return (
+    <div className="min-h-screen bg-background flex flex-col">
+      <Header />
+      <main className="flex-1 flex items-center justify-center py-12">
+        <div className="container max-w-2xl text-center">
+          {/* Error Visual */}
+          <div className="mb-8">
+            <div className="flex items-center justify-center space-x-4 mb-6">
+              <div className="w-16 h-16 bg-red-100 dark:bg-red-950/20 rounded-lg flex items-center justify-center">
+                <AlertTriangle className="w-8 h-8 text-red-600" />
+              </div>
+              <div className="text-6xl font-bold text-red-600">500</div>
+            </div>
+            <h1 className="text-3xl font-bold tracking-tight mb-4">Something Went Wrong</h1>
+            <p className="text-xl text-muted-foreground mb-8">
+              We encountered an unexpected error. Our team has been notified and is working on a fix.
+            </p>
+          </div>
+
+          {/* Error Details */}
+          <Alert className="mb-6 border-red-200 bg-red-50 dark:bg-red-950/10 text-left">
+            <AlertTriangle className="h-4 w-4 text-red-600" />
+            <AlertDescription className="text-red-800 dark:text-red-200">
+              <div className="space-y-2">
+                <p><strong>Error:</strong> {error.message || 'An unexpected error occurred'}</p>
+                {error.digest && (
+                  <p className="text-xs opacity-75"><strong>Error ID:</strong> {error.digest}</p>
+                )}
+              </div>
+            </AlertDescription>
+          </Alert>
+
+          {/* Recovery Actions */}
+          <Card>
+            <CardContent className="pt-6 space-y-6">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <Button onClick={reset} className="h-12">
+                  <RefreshCcw className="w-4 h-4 mr-2" />
+                  Try Again
+                </Button>
+                
+                <Button asChild variant="outline" className="h-12">
+                  <Link href="/">
+                    <Home className="w-4 h-4 mr-2" />
+                    Go Home
+                  </Link>
+                </Button>
+              </div>
+
+              <div className="text-sm text-muted-foreground">
+                <p className="mb-2">If the problem persists, you can:</p>
+                <div className="flex flex-wrap justify-center gap-4">
+                  <a href="/contact" className="text-primary hover:underline">Contact Support</a>
+                  <a href="/feedback" className="text-primary hover:underline">Report Issue</a>
+                  <a href="https://status.siliconpin.com" className="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Check Status</a>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Technical Details */}
+          <details className="mt-8 text-left">
+            <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground mb-2">
+              Technical Details (for developers)
+            </summary>
+            <div className="p-4 bg-muted rounded-lg text-sm">
+              <pre className="whitespace-pre-wrap break-words">
+                <strong>Error Message:</strong> {error.message}
+                {error.stack && (
+                  <>
+                    <br /><br />
+                    <strong>Stack Trace:</strong>
+                    <br />
+                    {error.stack}
+                  </>
+                )}
+              </pre>
+            </div>
+          </details>
+        </div>
+      </main>
+      <Footer />
+    </div>
+  )
+}