From 05bda29cb1f5e9c09982efcdfc3190a6cb0068b8 Mon Sep 17 00:00:00 2001
From: Remi <73385395+itsrubberduck@users.noreply.github.com>
Date: Sun, 5 Oct 2025 16:17:41 +0200
Subject: [PATCH] Refine hero background and feedback interactions

---
 app/pages/feedback.vue | 12 +++++++++---
 app/pages/index.vue    | 35 +++++++++++++++++++++++++----------
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/app/pages/feedback.vue b/app/pages/feedback.vue
index 275df9b..f1831d2 100644
--- a/app/pages/feedback.vue
+++ b/app/pages/feedback.vue
@@ -29,7 +29,7 @@
         <div class="flex flex-wrap items-center justify-center gap-3 text-sm text-white/60">
           <span class="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1.5">
             <v-icon icon="mdi-bell-ring" size="18" class="text-cyan-300"/>
-            Honest takes only – thanks!
+            Candid notes welcome — thank you!
           </span>
           <a class="inline-flex items-center gap-2 text-cyan-200 transition hover:text-cyan-100" href="mailto:info@opensquawk.de">
             <v-icon icon="mdi-email-fast" size="18"/>
@@ -217,8 +217,14 @@
                   :disabled="submissionState === 'submitting'"
                   class="inline-flex items-center justify-center gap-2 rounded-2xl bg-cyan-400 px-6 py-3 text-base font-semibold text-slate-950 shadow-[0_16px_40px_rgba(56,189,248,0.35)] transition hover:bg-cyan-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300/70 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent disabled:cursor-not-allowed disabled:opacity-70 disabled:hover:bg-cyan-400"
               >
-                <v-icon :icon="submissionState === 'submitting' ? 'mdi-dots-circle' : 'mdi-send'" size="20" class="text-slate-950"/>
-                <span>{{ submissionState === 'submitting' ? 'Sending…' : 'Send feedback' }}</span>
+                <template v-if="submissionState === 'submitting'">
+                  <v-progress-circular indeterminate size="18" width="2" color="white"/>
+                  <span>Sending…</span>
+                </template>
+                <template v-else>
+                  <v-icon icon="mdi-send" size="20" class="text-white"/>
+                  <span>Send feedback</span>
+                </template>
               </button>
             </div>
           </form>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index a178570..d3bc89d 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -144,10 +144,12 @@
               </NuxtLink>
             </div>
           </div>
-          <div class="hero-form w-full max-w-xl lg:justify-self-end
-         backdrop-blur-md
-" data-aos="fade-left" data-aos-delay="140">
-            <form class="rounded-2xl border border-white/10 bg-black/40 p-4 sm:p-5 space-y-4"
+          <div
+              class="hero-form w-full max-w-lg lg:justify-self-end"
+              data-aos="fade-left"
+              data-aos-delay="140"
+          >
+            <form class="hero-form-panel rounded-3xl p-5 sm:p-6 space-y-4"
                   @submit.prevent="submitUpdates">
               <div class="space-y-3">
                 <h3 class="text-2xl font-semibold">
@@ -1905,26 +1907,39 @@ onMounted(async () => {
 }
 
 .gradient-hero {
-  background: radial-gradient(1200px 600px at 10% -10%, rgba(6, 182, 212, .35), transparent),
-  radial-gradient(900px 480px at 100% 10%, rgba(59, 130, 246, .25), transparent),
-  linear-gradient(180deg, #0b1020 0%, #0b1020 60%, #0a0f1c 100%);
+  background: radial-gradient(1200px 600px at 12% -20%, rgba(6, 182, 212, .32), transparent),
+  radial-gradient(900px 520px at 100% 5%, rgba(59, 130, 246, .22), transparent),
+  linear-gradient(180deg, rgba(11, 16, 32, 0.92) 0%, rgba(11, 16, 32, 0.94) 42%, rgba(11, 16, 32, 0.98) 68%, #0a0f1c 100%);
 }
 
 .gradient-hero::after {
   content: '';
   position: absolute;
   inset: 0;
-  background: url('/img/learn/modules/img6.jpeg') center/cover no-repeat;
-  opacity: 0.45;
+  background: linear-gradient(180deg, rgba(7, 11, 24, 0.55) 0%, rgba(9, 14, 28, 0.78) 55%, rgba(11, 16, 32, 0.95) 100%),
+  url('/img/bridge/goldengate_front.jpeg') center/cover no-repeat;
+  opacity: 1;
   pointer-events: none;
   z-index: 0;
 }
 
 .hero-overlay {
-  background: linear-gradient(90deg, rgba(11, 16, 32, 0.9) 0%, rgba(11, 16, 32, 0.68) 45%, rgba(11, 16, 32, 0.15) 100%);
+  background: linear-gradient(90deg, rgba(11, 16, 32, 0.88) 0%, rgba(11, 16, 32, 0.62) 46%, rgba(11, 16, 32, 0.22) 100%);
   z-index: 1;
 }
 
+.hero-form {
+  position: relative;
+  z-index: 2;
+}
+
+.hero-form-panel {
+  background: linear-gradient(140deg, rgba(15, 23, 42, 0.72), rgba(12, 20, 38, 0.48));
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  backdrop-filter: blur(24px);
+  box-shadow: 0 42px 120px rgba(5, 12, 32, 0.45);
+}
+
 .glass {
   background: rgba(255, 255, 255, .06);
   backdrop-filter: blur(10px);