Changed The Header Structure and deleted unused fonts

app/components/Credits.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+
+const Credits: React.FC = () => {
+  return (
+    <div className="credits-container">
+      <section id="credits" className="credits-section">
+        <h1 className="title">Credits</h1>
+
+        <h2 className="subtitle">Icons</h2>
+        <p className="paragraph">
+          This project utilizes the following icon resources:
+        </p>
+        <a
+          href="https://www.svgrepo.com/author/Solar%20Icons/"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Solar Icons
+        </a>
+        <a
+          href="https://www.svgrepo.com/author/Dazzle%20UI/"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Dazzle UI
+        </a>
+
+        <h2 className="subtitle">Fonts</h2>
+        <p className="paragraph">
+          The fonts used in this project are provided by:
+        </p>
+        <a
+          href="https://github.com/itfoundry/Poppins"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Poppins
+        </a>
+        <a
+          href="https://openfontlicense.org"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Inconsolata, Merriweather, Noto Sans, Noto Serif, Playfair Display, Bangers, Caveat, Frederika the Great, Sofadi One, Zilla Slab Highlight
+        </a>
+        <a
+          href="http://www.apache.org/licenses/LICENSE-2.0"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Roboto, Rock Salt
+        </a>
+        <a
+          href="https://ubuntu.com/legal/font-licence"
+          className="credit-btn"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Ubuntu
+        </a>
+      </section>
+    </div>
+  );
+};
+
+export default Credits;

app/components/Header.tsx

@@ -1,26 +1,25 @@
-// Header.tsx
 import React, { useState } from 'react';
 import Login from './Login';
 
 interface HeaderProps {
-  onViewChange: (view: 'AI' | 'FAQ' | 'Documentation') => void;
+  onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; // Include 'Credits'
   showDivs: boolean;
   toggleDivs: () => void;
   showHistoryModelsToggle: boolean;
-  showToggle: boolean; // Add this prop
+  showToggle: boolean;
 }
 
 const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
-  const [menuOpen, setMenuOpen] = useState(false)
-  
-  const toggleMenu = () => {
-    setMenuOpen(!menuOpen)
-  }
+  const [menuOpen, setMenuOpen] = useState(false);
 
-  const buttonClicked = (page: "AI" | "Documentation" | "FAQ") => {
-    onViewChange(page)
-    toggleMenu()
-  }
+  const toggleMenu = () => {
+    setMenuOpen(!menuOpen);
+  };
+
+  const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { // Add 'Credits' to the options here
+    onViewChange(page);
+    toggleMenu();
+  };
 
   return (
     <>
@@ -30,17 +29,19 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
           <span></span>
           <span></span>
         </div>
-        <nav className={`nav-links ${menuOpen ? "active":""}`}>
-            <button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
-            <button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
-            {showToggle && showHistoryModelsToggle && (
-              <button onClick={toggleDivs} className="nav-btn">
-                {showDivs ? 'Hide History/Models' : 'Show History/Models'}
-              </button>
-            )}
-          </nav>
+        <nav className={`nav-links ${menuOpen ? "active" : ""}`}>
+        <button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
+          <button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
+          <button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
+          <button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button> {/* Add Credits tab */}
+          {showToggle && showHistoryModelsToggle && (
+            <button onClick={toggleDivs} className="nav-btn">
+              {showDivs ? 'Hide History/Models' : 'Show History/Models'}
+            </button>
+          )}
+        </nav>
         <button onClick={() => onViewChange('AI')} className="header-button header-logo">
-          
+          {/* AI logo or text */}
         </button>
         <div className="login-button">
           <Login /> 

app/page.tsx

@@ -6,11 +6,12 @@ import FAQ from './components/Faq'; // Ensure the import path is correct
 import Documentation from './components/Documentation'; // Ensure the import path is correct
 import History from './components/History';
 import Models from './components/Models';
+import Credits from './components/Credits';
 import './styles/master.css';
 
 const LandingPage: React.FC = () => {
   const [showDivs, setShowDivs] = useState(true);
-  const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation'>('AI');
+  const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
   const conversationRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -42,7 +43,7 @@ const LandingPage: React.FC = () => {
     setShowDivs(prevState => !prevState);
   };
 
-  const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation') => {
+  const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => { // Added 'Credits' here as well
     setView(view);
     if (view !== 'AI') {
       setShowDivs(false);
@@ -70,6 +71,7 @@ const LandingPage: React.FC = () => {
         {view === 'AI' && <AI />}
         {view === 'FAQ' && <FAQ />}
         {view === 'Documentation' && <Documentation />}
+        {view === 'Credits' && <Credits />} {/* Now Credits will render properly */}
       </div>
     </div>
   );

app/styles/credit.css

@@ -0,0 +1,52 @@
+/* Styling for the credits container */
+.credits-container {
+    padding: 2rem;
+  }
+  
+  .credits-section {
+    max-width: 900px;
+    height: 80vh;
+    margin: 0 auto;
+    background: var(--doc-background-color); /* Use variable for background */
+    padding: 2rem;
+    border-radius: 8px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
+    overflow-y: scroll;
+  }
+  
+  .title {
+    font-size: 2rem;
+    color: var(--doc-title-color); /* Use variable for title color */
+    margin-bottom: 1.5rem;
+  }
+  
+  .subtitle {
+    font-size: 1.5rem;
+    color: var(--doc-subtitle-color); /* Use variable for subtitle color */
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+  }
+  
+  .paragraph {
+    font-size: 1rem;
+    color: var(--doc-paragraph-color); /* Use variable for paragraph color */
+    margin-bottom: 1.5rem;
+    line-height: 1.6;
+  }
+  
+  /* Styling for the credit buttons */
+  .credit-btn {
+    display: inline-block;
+    padding: 10px 15px;
+    margin: 10px 5px;
+    background-color: var(--button-background-color); /* Button background */
+    color: var(--button-text-color); /* Button text */
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+  }
+  
+  .credit-btn:hover {
+    background-color: var(--button-hover-background-color); /* Button hover */
+  }
+  

app/styles/master.css

@@ -15,4 +15,5 @@
 @import './Login.css';
 @import './Settings.css';
 @import './fonts.css';
+@import './credit.css';
 @import './responsive.css';