Add confirmation page on contact request

src/app/app.routes.ts

@@ -15,6 +15,9 @@
       }, {
         path: "contact",
         loadComponent: () => import("./pages/contact/contact").then(m => m.ContactPage),
+      }, {
+        path: "thanks",
+        loadComponent: () => import("./pages/confirmation/confirmation").then(m => m.ConfirmationPage),
       },
     ],
   },

src/app/pages/confirmation/confirmation.html

@@ -0,0 +1,42 @@
+<app-section
+  label="Message Sent"
+  maxWidth="max-w-2xl"
+  sectionId="confirmation"
+  variant="hero"
+>
+  <div class="pt-12 flex flex-col items-center text-center gap-8">
+
+    <!-- Animated icon -->
+    <div class="relative flex items-center justify-center">
+      <div class="absolute w-28 h-28 rounded-full bg-brand-500/10 animate-ping" style="animation-duration: 2.5s;"></div>
+      <div class="relative w-20 h-20 rounded-full bg-white/8 border border-white/15 flex items-center justify-center">
+        <i class="fas fa-paper-plane text-3xl text-brand-400 -rotate-12"></i>
+      </div>
+    </div>
+
+    <!-- Copy -->
+    <div class="space-y-3 max-w-md">
+      <h1 class="text-4xl font-display font-bold text-white tracking-tight">
+        We'll be in touch.
+      </h1>
+      <p class="text-lg text-slate-300 leading-relaxed">
+        Thanks for reaching out. Someone from our team will get back to you shortly.
+      </p>
+    </div>
+
+    <!-- Divider -->
+    <div class="w-16 h-px bg-white/15"></div>
+
+    <!-- Actions -->
+    <div class="flex flex-col sm:flex-row items-center gap-4">
+      <a
+        class="group bg-gradient-brand text-white px-8 py-3.5 rounded-xl font-semibold transition-all shadow-lg shadow-brand-600/30 hover:shadow-xl hover:shadow-brand-600/40 hover:-translate-y-0.5 flex items-center gap-2"
+        routerLink="/"
+      >
+        <i class="fas fa-arrow-left group-hover:-translate-x-0.5 transition-transform text-sm"></i>
+        <span>Back to home</span>
+      </a>
+    </div>
+
+  </div>
+</app-section>

src/app/pages/confirmation/confirmation.ts

@@ -0,0 +1,14 @@
+import { Component } from "@angular/core";
+import { RouterLink } from "@angular/router";
+import { SectionComponent } from "../../layout/section/section";
+
+/** Email sent confirmation page. */
+@Component({
+  selector: "app-confirmation-page",
+  imports: [
+    SectionComponent,
+    RouterLink
+  ],
+  templateUrl: "confirmation.html",
+})
+export class ConfirmationPage {}

src/app/pages/contact/sections/contact-form/contact-form.html

@@ -8,39 +8,41 @@
 >
   <!-- Push below the fixed navbar -->
   <div class="pt-12">
-    <form action="https://formsubmit.co/7672b3e7b4a4aad40c6a713f146283b0" class="space-y-5" method="POST">
-      <input name="_honey" style="display:none" type="text">
+    <form action="https://formsubmit.co/7672b3e7b4a4aad40c6a713f146283b0" class="space-y-5" method="POST" ngNoForm>
+      <input autocomplete="off" name="_honey" style="display:none" tabindex="-1" type="text">
+
+      <!-- FormSubmit configuration -->
+      <input name="_subject" type="hidden" value="New contact form submission">
+      <input name="_captcha" type="hidden" value="false">
+      <input name="_next" type="hidden" value="https://betterhpc.com/thanks">
+      <input name="_template" type="hidden" value="table">
 
       <div class="grid sm:grid-cols-2 gap-5">
         <input
-          [(ngModel)]="formData.name"
           class="w-full bg-white/[0.07] border border-white/15 rounded-xl px-5 py-4 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent transition-all"
           name="name"
           placeholder="Your name"
           required
           type="text">
         <input
-          [(ngModel)]="formData.email"
           class="w-full bg-white/[0.07] border border-white/15 rounded-xl px-5 py-4 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent transition-all"
           name="email"
           placeholder="Email"
           required
           type="email">
       </div>
       <input
-        [(ngModel)]="formData.institution"
         class="w-full bg-white/[0.07] border border-white/15 rounded-xl px-5 py-4 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent transition-all"
         name="institution"
         placeholder="Institution (optional)"
         type="text">
       <textarea
-        [(ngModel)]="formData.message"
         class="w-full bg-white/[0.07] border border-white/15 rounded-xl px-5 py-4 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent transition-all resize-none"
         name="message"
         placeholder="How can we help?"
         required
         rows="5">
-        </textarea>
+      </textarea>
       <button
         class="group w-full bg-gradient-brand text-white py-4 rounded-xl font-semibold transition-all shadow-lg shadow-brand-600/30 hover:shadow-xl hover:shadow-brand-600/40 hover:-translate-y-0.5 flex items-center justify-center gap-2 cursor-pointer"
         type="submit">

src/app/pages/contact/sections/contact-form/contact-form.ts

@@ -1,11 +1,10 @@
 import { Component } from "@angular/core";
-import { FormsModule } from "@angular/forms";
 import { SectionComponent } from "../../../../layout/section/section";
 
 /** Contact form section with dark hero-style background. */
 @Component({
   selector: "app-contact-form",
-  imports: [FormsModule, SectionComponent],
+  imports: [SectionComponent],
   templateUrl: "contact-form.html",
 })
 export class ContactForm {