From 87ee52d1cf082e9e55e42c867b49e3b175246ed7 Mon Sep 17 00:00:00 2001
From: Daniel Perrefort <djperrefort@gmail.com>
Date: Sat, 6 Jun 2026 08:00:55 -0400
Subject: [PATCH 1/2] Adds placeholder confirmation page when email is sent

---
 src/app/app.routes.ts                            |  3 +++
 src/app/pages/confirmation/confirmation.html     |  0
 src/app/pages/confirmation/confirmation.ts       |  9 +++++++++
 .../sections/contact-form/contact-form.html      | 16 +++++++++-------
 .../sections/contact-form/contact-form.ts        |  3 +--
 5 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 src/app/pages/confirmation/confirmation.html
 create mode 100644 src/app/pages/confirmation/confirmation.ts

diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
index c6a374e..dd63412 100644
--- a/src/app/app.routes.ts
+++ b/src/app/app.routes.ts
@@ -15,6 +15,9 @@ export const routes: Routes = [
       }, {
         path: "contact",
         loadComponent: () => import("./pages/contact/contact").then(m => m.ContactPage),
+      }, {
+        path: "thanks",
+        loadComponent: () => import("./pages/confirmation/confirmation").then(m => m.ConfirmationPage),
       },
     ],
   },
diff --git a/src/app/pages/confirmation/confirmation.html b/src/app/pages/confirmation/confirmation.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/confirmation/confirmation.ts b/src/app/pages/confirmation/confirmation.ts
new file mode 100644
index 0000000..0eb482c
--- /dev/null
+++ b/src/app/pages/confirmation/confirmation.ts
@@ -0,0 +1,9 @@
+import { Component } from "@angular/core";
+
+/** Email sent confirmation page. */
+@Component({
+  selector: "app-confirmation-page",
+  imports: [],
+  templateUrl: "confirmation.html",
+})
+export class ConfirmationPage {}
diff --git a/src/app/pages/contact/sections/contact-form/contact-form.html b/src/app/pages/contact/sections/contact-form/contact-form.html
index 4a68682..c069f9b 100644
--- a/src/app/pages/contact/sections/contact-form/contact-form.html
+++ b/src/app/pages/contact/sections/contact-form/contact-form.html
@@ -8,19 +8,23 @@
 >
   <!-- 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"
@@ -28,19 +32,17 @@
           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">
diff --git a/src/app/pages/contact/sections/contact-form/contact-form.ts b/src/app/pages/contact/sections/contact-form/contact-form.ts
index aa6334f..5e2cea9 100644
--- a/src/app/pages/contact/sections/contact-form/contact-form.ts
+++ b/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 {

From 267e2400df3464d6be6b3adb59f494a562fa4f3c Mon Sep 17 00:00:00 2001
From: Daniel Perrefort <djperrefort@gmail.com>
Date: Sat, 6 Jun 2026 08:09:58 -0400
Subject: [PATCH 2/2] Adds content to confirmation page

---
 src/app/pages/confirmation/confirmation.html | 42 ++++++++++++++++++++
 src/app/pages/confirmation/confirmation.ts   |  7 +++-
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/app/pages/confirmation/confirmation.html b/src/app/pages/confirmation/confirmation.html
index e69de29..37c6a20 100644
--- a/src/app/pages/confirmation/confirmation.html
+++ b/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>
diff --git a/src/app/pages/confirmation/confirmation.ts b/src/app/pages/confirmation/confirmation.ts
index 0eb482c..f7f20f7 100644
--- a/src/app/pages/confirmation/confirmation.ts
+++ b/src/app/pages/confirmation/confirmation.ts
@@ -1,9 +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: [],
+  imports: [
+    SectionComponent,
+    RouterLink
+  ],
   templateUrl: "confirmation.html",
 })
 export class ConfirmationPage {}