feat: Add new design closer to gremiumhub landing

legalconsenthub/app/components/FormStepperWithNavigation.vue

@@ -99,38 +99,55 @@
           </div>
         </UCard>
 
-        <div class="flex gap-2 justify-between">
-          <UButton leading-icon="i-lucide-arrow-left" :disabled="!stepper?.hasPrev" @click="handleNavigate('backward')">
-            {{ $t('applicationForms.navigation.previous') }}
-          </UButton>
+        <!-- Navigation Section -->
+        <div class="mt-8">
+          <div class="nav-separator" />
+          <div class="flex flex-col sm:flex-row gap-3 justify-between items-stretch sm:items-center">
+            <!-- Previous Button -->
+            <UButton
+              leading-icon="i-lucide-arrow-left"
+              :disabled="!stepper?.hasPrev"
+              variant="soft"
+              color="neutral"
+              size="lg"
+              class="order-2 sm:order-1 rounded-xl"
+              @click="handleNavigate('backward')"
+            >
+              {{ $t('applicationForms.navigation.previous') }}
+            </UButton>
 
-          <div class="flex flex-wrap items-center gap-1.5">
-            <UButton
-              trailing-icon="i-lucide-save"
-              :disabled="disabled"
-              variant="outline"
-              size="lg"
-              @click="emit('save')"
-            >
-              {{ $t('applicationForms.navigation.save') }}
-            </UButton>
-            <UButton
-              v-if="stepper?.hasNext"
-              trailing-icon="i-lucide-arrow-right"
-              size="lg"
-              @click="handleNavigate('forward')"
-            >
-              {{ $t('applicationForms.navigation.next') }}
-            </UButton>
-            <UButton
-              v-if="!stepper?.hasNext"
-              trailing-icon="i-lucide-send-horizontal"
-              :disabled="disabled"
-              size="lg"
-              @click="emit('submit')"
-            >
-              {{ $t('applicationForms.navigation.submit') }}
-            </UButton>
+            <!-- Primary Actions -->
+            <div class="nav-button-group order-1 sm:order-2">
+              <UButton
+                trailing-icon="i-lucide-save"
+                :disabled="disabled"
+                variant="outline"
+                size="lg"
+                class="rounded-xl font-semibold"
+                @click="emit('save')"
+              >
+                {{ $t('applicationForms.navigation.save') }}
+              </UButton>
+              <UButton
+                v-if="stepper?.hasNext"
+                trailing-icon="i-lucide-arrow-right"
+                size="lg"
+                class="bg-gradient-to-br from-teal-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg shadow-teal-500/25 hover:from-cyan-500 hover:to-violet-500 hover:shadow-xl hover:shadow-violet-500/30 transition-all duration-200"
+                @click="handleNavigate('forward')"
+              >
+                {{ $t('applicationForms.navigation.next') }}
+              </UButton>
+              <UButton
+                v-if="!stepper?.hasNext"
+                trailing-icon="i-lucide-send-horizontal"
+                :disabled="disabled"
+                size="lg"
+                class="bg-gradient-to-br from-teal-500 to-cyan-500 text-white font-semibold rounded-xl shadow-lg shadow-teal-500/25 hover:from-cyan-500 hover:to-violet-500 hover:shadow-xl hover:shadow-violet-500/30 transition-all duration-200"
+                @click="emit('submit')"
+              >
+                {{ $t('applicationForms.navigation.submit') }}
+              </UButton>
+            </div>
           </div>
         </div>
       </div>