feat: finalize UI/UX

templates/projects/brief_wizard.html

@@ -1,4 +1,4 @@
-{% extends "base.html" %}
+{% extends "portal_base.html" %}
 {% load static %}
 
 {% block title %}{{ form_title }}{% endblock %}
@@ -7,19 +7,12 @@
 <link rel="stylesheet" href="{% static 'css/brief-wizard.css' %}" />
 {% endblock %}
 
-{% block content %}
-<section class="page-hero" aria-labelledby="brief-form-heading">
-  <div class="container">
-    <div class="page-hero-content">
-      <h1 class="page-hero-title" id="brief-form-heading">{{ form_title }}</h1>
-      <p class="page-hero-subtitle">Complete each step to submit your project brief.</p>
-    </div>
-  </div>
-</section>
+{% block portal_title %}{{ form_title }}{% endblock %}
+{% block portal_subtitle %}Turn your scientific or technical challenge into a clear, review-ready scope.{% endblock %}
 
-<section class="section">
-  <div class="container container--narrow">
-    <div class="glass-card portal-card fade-in">
+{% block portal_content %}
+<div class="dashboard-form-layout dashboard-form-layout--wizard">
+  <section class="dashboard-panel dashboard-form-card">
       <form method="post" enctype="multipart/form-data" novalidate class="brief-wizard" data-brief-wizard data-initial-step="{{ initial_step }}">
         {% csrf_token %}
 
@@ -140,9 +133,18 @@
           <button type="submit" class="btn-primary btn-submit" data-wizard-submit hidden>{{ submit_label }}</button>
         </div>
       </form>
-    </div>
-  </div>
-</section>
+  </section>
+  <aside class="brief-guidance-card">
+    <span class="brief-guidance-card__eyebrow">Before you submit</span>
+    <h2>A strong brief helps us respond precisely.</h2>
+    <ul>
+      <li><span>1</span><div><strong>Define the outcome</strong><p>Focus on the scientific or technical result you need.</p></div></li>
+      <li><span>2</span><div><strong>Add useful context</strong><p>Include datasets, constraints, methods, or references.</p></div></li>
+      <li><span>3</span><div><strong>Set expectations</strong><p>Share your preferred timeline and budget range.</p></div></li>
+    </ul>
+    <p class="brief-guidance-card__note">You can review every field in the final step before submission.</p>
+  </aside>
+</div>
 {% endblock %}
 
 {% block extra_js %}