Add Neon AI Branding (#15)

* feat: add Neon.ai branding and copyright footers to UI

Add neon-logo.png asset. Replace generic footer with Neon.ai copyright and patents link on HomePage, CanvasPage, ChatPage welcome state, and Sidebar. Add Powered by Neon.ai to Login page.

Made-with: Cursor

* Refactor Copyright Notice to one imported definition

* Enhance Login Component with Copyright Notice and Layout Adjustments

- Added CopyrightNotice component to the Login page footer.
- Refactored layout structure by renaming 'login-container' to 'login-content' for clarity.
- Updated CSS styles for improved layout and footer presentation.

---------

Co-authored-by: NeonClary <askclary@gmail.com>
Co-authored-by: Neon:ryan <ryan@neon.ai>

phd-advisor-frontend/src/components/CopyrightNotice.js

@@ -0,0 +1,38 @@
+import React from 'react';
+
+const CopyrightNotice = ({ variant = 'footer', className = '' }) => {
+  const isSidebar = variant === 'sidebar';
+  const textClass = isSidebar ? 'sidebar-copyright-text' : 'footer-text';
+  const patentsClass = isSidebar ? 'sidebar-patents-link' : 'footer-patents-link';
+  const combinedClass = className ? `${textClass} ${className}` : textClass;
+
+  return (
+    <p className={combinedClass}>
+      {'\u00A9 '}
+      {isSidebar ? (
+        'Neon.ai'
+      ) : (
+        <a
+          href="https://neon.ai"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="footer-neon-link"
+        >
+          <img src="/neon-logo.png" alt="" className="footer-neon-logo" />
+          Neon.ai
+        </a>
+      )}
+      , {'\u00A9 '}University of Colorado Boulder. All rights reserved.{' '}
+      <a
+        href="https://www.neon.ai/contact"
+        target="_blank"
+        rel="noopener noreferrer"
+        className={patentsClass}
+      >
+        Patents and licensing.
+      </a>
+    </p>
+  );
+};
+
+export default CopyrightNotice;

phd-advisor-frontend/src/components/Login.js

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { Eye, EyeOff, Mail, Lock, ArrowRight, BookOpen, Phone } from 'lucide-react';
 import { useAppConfig } from '../contexts/AppConfigContext';
+import CopyrightNotice from './CopyrightNotice';
 import '../styles/Login.css';
 
 const Login = ({ onNavigateToSignup, onNavigateToHome }) => {
@@ -97,7 +98,8 @@ const Login = ({ onNavigateToSignup, onNavigateToHome }) => {
 
   return (
     <div className="login-page">
-      <div className="login-container">
+      <div className="login-content">
+        <div className="login-container">
         {/* Header */}
         <div className="login-header">
           <div className="logo-container">
@@ -247,8 +249,18 @@ const Login = ({ onNavigateToSignup, onNavigateToHome }) => {
               Sign up here
             </button>
           </p>
+          <div className="login-powered-by">
+            <a href="https://neon.ai" target="_blank" rel="noopener noreferrer" className="footer-neon-link">
+              <img src="/neon-logo.png" alt="" className="footer-neon-logo" />
+              Powered by Neon.ai
+            </a>
+          </div>
         </div>
       </div>
+      </div>
+      <footer className="login-page-footer">
+        <CopyrightNotice className="login-page-copyright" />
+      </footer>
     </div>
   );
 };

phd-advisor-frontend/src/components/Sidebar.js

@@ -14,6 +14,7 @@ import {
   FileText
 } from 'lucide-react';
 import { useAppConfig } from '../contexts/AppConfigContext';
+import CopyrightNotice from './CopyrightNotice';
 import '../styles/Sidebar.css';
 
 const Sidebar = ({ 
@@ -346,6 +347,21 @@ const Sidebar = ({
             </div>
           )}
         </div>
+
+        {/* Footer */}
+        <div className={`sidebar-footer ${isCollapsed ? 'collapsed' : ''}`}>
+          <a 
+            href="https://neon.ai" 
+            target="_blank" 
+            rel="noopener noreferrer" 
+            className="sidebar-neon-link"
+            title="Neon.ai"
+          >
+            <img src="/neon-logo.png" alt="" className="sidebar-neon-logo" />
+            {!isCollapsed && <span className="sidebar-neon-text">Neon.ai</span>}
+          </a>
+          {!isCollapsed && <CopyrightNotice variant="sidebar" />}
+        </div>
       </div>
       
       {isMobileOpen && (

phd-advisor-frontend/src/pages/CanvasPage.js

@@ -16,6 +16,7 @@ import {
   Printer
 } from 'lucide-react';
 import { useAppConfig } from '../contexts/AppConfigContext';
+import CopyrightNotice from '../components/CopyrightNotice';
 import '../styles/CanvasPage.css';
 
 // Section icons mapping
@@ -402,22 +403,33 @@ const CanvasPage = ({ user, authToken, onNavigateToChat, onSignOut }) => {
         </div>
         
         <div className="header-actions">
-          <button 
-            onClick={handleRefreshCanvas}
-            disabled={isRefreshing || isUpdating}
-            className={`refresh-button ${(isRefreshing || isUpdating) ? 'disabled' : ''}`}
-          >
-            <RefreshCw className={`refresh-icon ${(isRefreshing || isUpdating) ? 'spinning' : ''}`} />
-            {(isRefreshing || isUpdating) ? 'Refreshing...' : 'Refresh Canvas'}
-          </button>
-          
-          <button 
-            className="action-button print-button"
-            onClick={handlePrint}
+          <div className="header-buttons">
+            <button 
+              onClick={handleRefreshCanvas}
+              disabled={isRefreshing || isUpdating}
+              className={`refresh-button ${(isRefreshing || isUpdating) ? 'disabled' : ''}`}
+            >
+              <RefreshCw className={`refresh-icon ${(isRefreshing || isUpdating) ? 'spinning' : ''}`} />
+              {(isRefreshing || isUpdating) ? 'Refreshing...' : 'Refresh Canvas'}
+            </button>
+            
+            <button 
+              className="action-button print-button"
+              onClick={handlePrint}
+            >
+              <Printer className="action-icon" />
+              Print
+            </button>
+          </div>
+          <a 
+            href="https://neon.ai" 
+            target="_blank" 
+            rel="noopener noreferrer" 
+            className="canvas-powered-by"
           >
-            <Printer className="action-icon" />
-            Print
-          </button>
+            <img src="/neon-logo.png" alt="" className="canvas-powered-by-logo" />
+            Powered by Neon.ai
+          </a>
         </div>
       </div>
 
@@ -500,6 +512,11 @@ const CanvasPage = ({ user, authToken, onNavigateToChat, onSignOut }) => {
         )}
       </div>
 
+      {/* Copyright Footer */}
+      <footer className="canvas-copyright-footer">
+        <CopyrightNotice />
+      </footer>
+
       {/* Print Footer */}
       {isPrintView && (
         <div className="print-footer">

phd-advisor-frontend/src/pages/HomePage.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { MessageCircle, ArrowRight } from 'lucide-react';
 import AdvisorCard from '../components/AdvisorCard';
 import ThemeToggle from '../components/ThemeToggle';
+import CopyrightNotice from '../components/CopyrightNotice';
 import { useAppConfig } from '../contexts/AppConfigContext';
 
 const HomePage = ({ onNavigateToChat, isAuthenticated }) => {
@@ -80,9 +81,7 @@ const HomePage = ({ onNavigateToChat, isAuthenticated }) => {
       {/* Footer */}
       <footer className="footer">
         <div className="footer-content">
-          <p className="footer-text">
-            {config.app.footer_text}
-          </p>
+          <CopyrightNotice />
         </div>
       </footer>
     </div>

phd-advisor-frontend/src/styles/CanvasPage.css

@@ -90,10 +90,37 @@
 }
 
 .header-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 8px;
+}
+
+.header-buttons {
   display: flex;
   gap: 1rem;
 }
 
+.canvas-powered-by {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--text-tertiary);
+  font-size: 12px;
+  text-decoration: none;
+  transition: opacity 0.2s ease;
+}
+
+.canvas-powered-by:hover {
+  opacity: 0.8;
+}
+
+.canvas-powered-by-logo {
+  height: 1em;
+  width: auto;
+  vertical-align: middle;
+}
+
 .print-view .header-actions {
   display: none;
 }
@@ -541,4 +568,12 @@
   .stat-item {
     min-width: auto;
   }
+}
+
+/* Canvas Copyright Footer */
+.canvas-copyright-footer {
+  padding: 24px;
+  text-align: center;
+  border-top: 1px solid var(--border-light, #e5e7eb);
+  margin-top: 32px;
 }

phd-advisor-frontend/src/styles/Login.css

@@ -4,9 +4,34 @@
   min-height: 100vh;
   background: var(--bg-gradient);
   display: flex;
+  flex-direction: column;
+  padding: 24px 16px;
+}
+
+.login-content {
+  flex: 1;
+  display: flex;
   align-items: center;
   justify-content: center;
-  padding: 24px 16px;
+  width: 100%;
+}
+
+.login-page-footer {
+  flex-shrink: 0;
+  width: 100%;
+  padding-top: 24px;
+  display: flex;
+  justify-content: center;
+}
+
+.login-page-copyright {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 0 16px 8px 16px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--text-tertiary);
+  text-align: center;
 }
 
 .login-container {
@@ -334,7 +359,7 @@
 /* Footer */
 .login-footer {
   text-align: center;
-  padding: 24px 32px 32px 32px;
+  padding: 24px 32px 16px 32px;
   border-top: 1px solid var(--border-primary);
   background: var(--bg-secondary);
 }
@@ -345,6 +370,18 @@
   margin: 0;
 }
 
+.login-powered-by {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--border-secondary);
+  text-align: center;
+}
+
+.login-powered-by .footer-neon-link {
+  font-size: 13px;
+  color: var(--text-tertiary);
+}
+
 .link-btn {
   background: none;
   border: none;

phd-advisor-frontend/src/styles/Sidebar.css

@@ -588,6 +588,73 @@
   background: var(--bg-tertiary-dark, #4b5563);
 }
 
+/* Sidebar Footer */
+.sidebar-footer {
+  flex-shrink: 0;
+  padding: 20px;
+  border-top: 1px solid var(--border-light, #e5e7eb);
+  background: var(--bg-primary, #ffffff);
+}
+
+.dark .sidebar-footer {
+  border-top-color: var(--border-dark, #374151);
+  background: var(--bg-primary-dark, #1f2937);
+}
+
+.sidebar-neon-link {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+  color: var(--text-primary, #111827);
+  text-decoration: none;
+  font-size: 28px;
+  font-weight: bold;
+  transition: opacity 0.2s ease;
+}
+
+.sidebar-neon-link:hover {
+  opacity: 0.8;
+}
+
+.dark .sidebar-neon-link {
+  color: var(--text-primary-dark, #f9fafb);
+}
+
+.sidebar-neon-logo {
+  height: 1em;
+  width: auto;
+  flex-shrink: 0;
+}
+
+.sidebar-copyright-text {
+  margin: 8px 0 0 0;
+  font-size: 10px;
+  line-height: 1.4;
+  color: var(--text-secondary, #6b7280);
+}
+
+.dark .sidebar-copyright-text {
+  color: var(--text-secondary-dark, #9ca3af);
+}
+
+.sidebar-patents-link {
+  color: var(--text-secondary, #6b7280);
+  text-decoration: underline;
+}
+
+.dark .sidebar-patents-link {
+  color: var(--text-secondary-dark, #9ca3af);
+}
+
+.sidebar-footer.collapsed .sidebar-neon-link {
+  justify-content: center;
+}
+
+.sidebar-footer.collapsed .sidebar-neon-logo {
+  height: 28px;
+}
+
 /* Tooltip for collapsed state */
 .session-item.collapsed {
   position: relative;

phd-advisor-frontend/src/styles/components.css

@@ -886,6 +886,33 @@
   margin: 0;
 }
 
+.footer-neon-link {
+  color: var(--text-secondary);
+  text-decoration: none;
+  transition: opacity 0.2s ease;
+}
+
+.footer-neon-link:hover {
+  opacity: 0.8;
+}
+
+.footer-neon-logo {
+  height: 1em;
+  width: auto;
+  vertical-align: text-bottom;
+  margin-right: 2px;
+}
+
+.footer-patents-link {
+  color: var(--text-secondary);
+  text-decoration: underline;
+  transition: opacity 0.2s ease;
+}
+
+.footer-patents-link:hover {
+  opacity: 0.8;
+}
+
 .rag-info-overlay {
   position: absolute;
   top: 100%;