feat: support page

package.json

@@ -18,7 +18,7 @@
     "copy-files": "bash ./scripts/copy-files.sh",
     "build-website": "nx run @trustvc/temp-trustvc-website:build && npm run copy-files",
     "clean": "nx clear-cache && nx run-many --target=clean",
-    "dev": "nx run-many --target=dev",
+    "dev": "nx run-many --target=dev --exclude=@trustvc/w3c-cli",
     "precommit": "lint-staged",
     "cli:install": "npm install --prefix apps/w3c-cli",
     "cli:dev": "npm run dev --prefix apps/w3c-cli",

packages/temp-trustvc-website/src/App.tsx

@@ -8,6 +8,8 @@ import Navigation from '@/components/Navigation';
 import Index from './pages/Index';
 import Gallery from './pages/Gallery';
 import Support from './pages/Support';
+import SuccessPage from './pages/SuccessPage';
+import ErrorPage from './pages/ErrorPage';
 import News from './pages/News';
 import Contact from './pages/Contact';
 import TradeTrust from './pages/TradeTrust';
@@ -26,6 +28,9 @@ const App = () => (
           <Navigation />
           <Routes>
             <Route path="/" element={<Index />} />
+            <Route path="/support" element={<Support />} />
+            <Route path="/support/success" element={<SuccessPage />} />
+            <Route path="/support/error" element={<ErrorPage />} />
             {/* <Route path="/contact" element={<Contact />} /> */}
             {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
             <Route path="*" element={<NotFound />} />

packages/temp-trustvc-website/src/components/Navigation.tsx

@@ -49,21 +49,19 @@ const Navigation = () => {
           </Link>
 
           {/* Navigation Links */}
-          {/* <div className="hidden md:flex items-center justify-end mr-4 flex-1">
+          <div className="hidden md:flex items-center justify-end mr-4 flex-1">
             <div className="flex items-center space-x-8">
-              <a
-                href="https://afa-cdi.atlassian.net/servicedesk/customer/portal/10/group/-1"
-                target="_blank"
-                rel="noopener noreferrer"
+              <Link
+                to="/support"
                 className={cn(
-                  'hover:text-primary transition-colors',
-                  isActive('/support') ? 'text-primary font-medium' : 'text-muted-foreground',
+                  'bg-gradient-trust bg-clip-text text-transparent font-medium hover:opacity-80 transition-opacity',
+                  isActive('/support') && 'opacity-100',
                 )}
               >
                 Support
-              </a>
+              </Link>
             </div>
-          </div> */}
+          </div>
 
           {/* Right Side Items */}
           <div className="flex items-center space-x-4">

packages/temp-trustvc-website/src/pages/ErrorPage.tsx

@@ -0,0 +1,39 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { useNavigate } from "react-router-dom"
+
+export default function ErrorPage() {
+  const navigate = useNavigate()
+
+  return (
+    <div className="min-h-screen pt-24 pb-16">
+      <div className="container mx-auto px-6">
+        <div className="text-center mb-16">
+          <h1 className="text-5xl font-bold mb-6 text-destructive">
+            Submission Failed
+          </h1>
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+            There was an error submitting your support request. Please try again.
+          </p>
+        </div>
+
+        <Card className="bg-background/50 backdrop-blur-glass border border-border/50 max-w-2xl mx-auto">
+          <CardHeader>
+            <CardTitle className="text-2xl text-destructive">Error</CardTitle>
+            <CardDescription>
+              Something went wrong. Please try submitting your request again.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex justify-center p-6">
+            <Button 
+              onClick={() => navigate("/support")}
+              className="w-full max-w-xs bg-gradient-trust hover:opacity-90"
+            >
+              Try Again
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}

packages/temp-trustvc-website/src/pages/SuccessPage.tsx

@@ -0,0 +1,52 @@
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { useNavigate, useLocation } from "react-router-dom"
+
+export default function SuccessPage() {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { ticketId } = location.state || {}
+
+  return (
+    <div className="min-h-screen pt-24 pb-16">
+      <div className="container mx-auto px-6">
+        <div className="text-center mb-16">
+          <h1 className="text-5xl font-bold mb-6">
+            Thank You!
+          </h1>
+          <p className="text-xl text-muted-foreground max-w-3xl mx-auto">
+            {ticketId
+              ? `Your support ticket ${ticketId} has been created successfully. We'll get back to you soon.`
+              : "Your support request has been submitted successfully. We'll get back to you soon."
+            }
+          </p>
+        </div>
+
+        <Card className="bg-background/50 backdrop-blur-glass border border-border/50 max-w-2xl mx-auto">
+          <CardHeader>
+            <CardTitle className="text-2xl">Submission Successful</CardTitle>
+            <CardDescription>
+              Thank you for reaching out to us.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4 p-6 text-center">
+            {ticketId && (
+              <p className="text-sm font-medium text-primary">
+                Ticket ID: <span className="font-bold">{ticketId}</span>
+              </p>
+            )}
+            <p className="text-muted-foreground text-sm">
+              You will receive an email confirmation shortly.
+            </p>
+            <Button
+              onClick={() => navigate("/")}
+              className="w-full max-w-xs bg-gradient-trust hover:opacity-90"
+            >
+              Back to Home
+            </Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}