feat: update conclusion.html and index.html for improved navigation and user journey clarity; enhance styles in style.css for better layout and responsiveness

Author: Tkemper2

web/conclusion.html

@@ -71,19 +71,19 @@ <h2>Final Verdict</h2>
     it is the conversation around it.
   </blockquote>
 
-  <hr />
+
 
   <div class="cta-container">
   <div class="cta-button">
-    <a href="./index.html/">Back to Introduction</a>
+    <a href="./index.html/">Introduction</a>
   </div>
 
   <div class="cta-button">
-    <a href="./community/#/User_community">Explore User Communities</a>
+    <a href="./community/#/User_community">User Journey</a>
   </div>
 
   <div class="cta-button">
-    <a href="./conclusion.html">Read Results & Conclusions</a>
+    <a href="./conclusion.html">Network Journey</a>
   </div>
 </div>
 </body>

web/index.html

@@ -68,7 +68,6 @@ <h2>Our Research Questions</h2>
     </ul>
   </div>
 
-  <hr />
 
 <h2>Two Ways to Explore the Data</h2>
 
@@ -112,18 +111,23 @@ <h2>Two Ways to Explore the Data</h2>
       but because <em>you observe it emerge</em>.
     </li>
   </ul>
+</div>
+     <!-- Integrated choice -->
+    <div class="cta-container">
+  <div class="cta-button">
+    <a href="./viz/">Network Journey</a>
+  </div>
 
-  <!-- Integrated choice -->
-  <div class="journey-choice">
-    <a href="./viz/" class="journey-btn network">
-      Start the Network Journey
-    </a>
+  <div class="cta-button">
+    <a href="./community/#/User_community">User Journey</a>
 
-    <a href="./community/#/User_community" class="journey-btn user">
-      Start the User Journey
-    </a>
   </div>
-</div>
+  <div class="cta-button">
+    <a href="conclusion.html">Conclusion</a>
+
+  </div>
+
+
 
 
 </body>

web/public/viz/index.html

@@ -528,7 +528,15 @@ <h3>The Community Pathfinder</h3>
                     <div id="carouselContainer"></div>
                 </div>
             </div>
-        </section>>
+        </section>
+
+        <nav class="top-nav">
+            <div class="container nav-inner">
+            <a class="nav-btn" href="index.html">Intro</a>
+            <a class="nav-btn" href="/user_community">User Community</a>
+            <a class="nav-btn nav-btn-accent" href="conclusion.html">Conclusion</a>
+            </div>
+        </nav>
 
 
 

web/public/viz/style.css

@@ -909,4 +909,51 @@ code {
     font-family: monospace;
     color: #FF8080;
     /* Light red for code */
+}
+
+.top-nav{
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  padding: 6px 0;
+  background: rgba(0,0,0,0.35);
+  backdrop-filter: blur(14px);
+  -webkit-backdrop-filter: blur(14px);
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+}
+
+.nav-inner{
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  justify-content: center; /* center buttons */
+}
+
+.nav-btn{
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  border-radius: 12px;
+  text-decoration: none;
+  color: rgba(255,255,255,0.9);
+  background: rgba(255,255,255,0.07);
+  border: 1px solid rgba(255,255,255,0.12);
+  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
+}
+
+.nav-btn:hover{
+  transform: translateY(-1px);
+  background: rgba(255,255,255,0.11);
+  border-color: rgba(255,255,255,0.20);
+}
+
+.nav-btn-accent{
+  background: rgba(231, 76, 60, 0.22);
+  border-color: rgba(231, 76, 60, 0.40);
+}
+
+.nav-btn-accent:hover{
+  background: rgba(231, 76, 60, 0.30);
+  border-color: rgba(231, 76, 60, 0.60);
 }

web/src/pages/User_community.jsx

@@ -60,7 +60,7 @@ export default function User_community() {
 
   return (
     <>
-      <BackgroundCommentFlow />
+      <BackgroundNodes />
 
       <div className="page">
         {/* HERO */}

web/style.css

@@ -106,22 +106,30 @@ blockquote {
 
 /* ---------- Call-to-Action Buttons ---------- */
 .cta-wrapper {
-  min-height: 60vh;              /* controls vertical placement */
+  min-height: 60vh;
   display: flex;
-  justify-content: center;       /* center vertically */
+  justify-content: center;   /* horizontal centering */
+  align-items: center;       /* vertical centering */
 }
 
 .cta-container {
   display: flex;
   gap: 36px;
-  flex-wrap: wrap; /* wraps on small screens */
-  margin-top: 48px;
-    margin-bottom: 80px;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: 64px;
+  margin-bottom: 120px;
 }
 
 .cta-button a {
-  display: inline-block;
-  padding: 10px 32px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  min-width: 180px;   /* 👈 key line */
+  padding: 12px 16px;
+
   font-weight: 600;
   text-decoration: none;
   color: white;
@@ -134,40 +142,4 @@ blockquote {
 .cta-button a:hover {
   transform: translateY(-3px);
   box-shadow: 0 14px 30px rgba(231, 76, 60, 0.35);
-}
-
-.journey-choice {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20px;
-  margin-top: 30px;
-}
-
-.journey-btn {
-  display: block;
-  text-align: center;
-  padding: 16px 18px;
-  border-radius: 12px;
-  font-weight: 600;
-  text-decoration: none;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
-}
-
-/* Network = analyst-led */
-.journey-btn.network {
-  background: rgba(231, 76, 60, 0.08);
-  border: 1px solid rgba(231, 76, 60, 0.35);
-  color: #b93a2e;
-}
-
-/* User = exploratory */
-.journey-btn.user {
-  background: rgba(44, 62, 80, 0.06);
-  border: 1px solid rgba(44, 62, 80, 0.3);
-  color: #2c3e50;
-}
-
-.journey-btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
 }