feat: Add navigation link to return to creator page in PaymentCompleted and PaymentFailed views, update styles for improved layout

frontend/src/views/PaymentFailed.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="container">
     <div class="card">
-      <h1>{{ t('title') }}</h1>
-      <p>{{ t('message') }}</p>
-      <div class="card-actions">
-        <button class="action-button" @click="goBack()">
-          {{ t('retry') }}
+      <!-- Navigation Link at the top -->
+      <div class="navigation-link">
+        <button class="link-button" @click="goBack()">
+          <v-icon>mdi-arrow-left</v-icon>
+          {{ t('returnToCreator') }}
         </button>
       </div>
+      
+      <h1>{{ t('title') }}</h1>
+      <p>{{ t('message') }}</p>
     </div>
   </div>
 </template>
@@ -31,54 +34,77 @@ function goBack() {
   "en": {
     "title": "Payment Failed",
     "message": "We couldn't process your payment.",
-    "retry": "Try Again"
+    "retry": "Try Again",
+    "returnToCreator": "Return to creator page"
   },
   "fr": {
     "title": "Échec du paiement",
     "message": "Nous n'avons pas pu traiter votre paiement.",
-    "retry": "Réessayer"
+    "retry": "Réessayer",
+    "returnToCreator": "Retourner à la page du créateur"
   },
   "es": {
     "title": "Pago fallido",
     "message": "No pudimos procesar su pago.",
-    "retry": "Intentar de nuevo"
+    "retry": "Intentar de nuevo",
+    "returnToCreator": "Volver a la página del creador"
   }
 }
 </i18n>
 
 <style scoped>
 .container {
-  @apply min-h-screen;
   @apply flex items-center justify-center;
+  @apply p-5;
 }
 
 .card {
   @apply bg-hSurface text-hOnSurface;
   @apply p-8;
   @apply font-sans;
-  @apply rounded-3xl;
+  @apply rounded-2xl;
+  @apply shadow-2xl;
+  @apply relative;
+  @apply w-full;
+  @apply max-w-2xl;
 }
 
-.card-actions {
-  @apply flex items-center justify-end;
+.card::before {
+  content: '';
+  @apply absolute inset-0;
+  @apply rounded-2xl;
+  @apply p-[1px];
+  background: linear-gradient(135deg, rgba(64, 64, 64, 1) 0%, rgba(64, 64, 64, 0) 20%, rgba(64, 64, 64, 0.5) 100%);
+  mask: linear-gradient(#fff 0 0) content-box,
+  linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+.navigation-link {
+  @apply flex items-center;
+  @apply mb-6;
+}
+
+.link-button {
+  @apply flex items-center gap-2;
+  @apply text-hutopyPrimary hover:text-hutopySecondary;
+  @apply transition-colors;
+  @apply duration-300;
+  @apply font-medium;
 }
 
 h1 {
   @apply text-6xl;
   @apply font-medium;
   @apply mb-8;
+  @apply text-center;
 }
 
 p {
   @apply text-lg;
   @apply font-medium;
   @apply mb-8;
-}
-
-.action-button {
-  @apply bg-hPrimary text-hOnPrimary;
-  @apply p-4 m-4;
-  @apply text-lg;
-  @apply rounded-xl;
+  @apply text-center;
 }
 </style>