Started the Rework

app/page.tsx

@@ -1,14 +1,17 @@
-"use client"
 // LandingPage.tsx
+"use client"
 import React, { useState, useEffect, useRef } from 'react';
 import Header from './Header';
+import AI from './AI';
+import FAQ from './Faq';
+import Documentation from './Documentation';
 import History from './History';
 import Models from './Models';
-import InputBackend from './InputBackend';
 import './styles/master.css';
 
 const LandingPage: React.FC = () => {
   const [showDivs, setShowDivs] = useState(true);
+  const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation'>('AI');
   const conversationRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -40,16 +43,33 @@ const LandingPage: React.FC = () => {
     setShowDivs(prevState => !prevState);
   };
 
+  const handleViewChange = (view: 'AI' | 'FAQ' | 'Documentation') => {
+    setView(view);
+    // Optionally hide the History/Models section when changing view
+    if (view !== 'AI') {
+      setShowDivs(false);
+    }
+  };
+
   return (
     <div className="App">
-      <Header toggleDivs={toggleDivs} showDivs={showDivs} />
+      <Header
+        toggleDivs={toggleDivs}
+        showDivs={showDivs}
+        onViewChange={handleViewChange}
+        showHistoryModelsToggle={view === 'AI'}
+      />
       <div className="container">
-        <div className={`left-panel ${showDivs ? '' : 'hidden'}`}>
-          <History />
-          <Models />
-        </div>
+        {view === 'AI' && (
+          <div className={`left-panel ${showDivs ? '' : 'hidden'}`}>
+            <History />
+            <Models />
+          </div>
+        )}
         <div className={`conversation-container ${showDivs ? 'expanded' : 'collapsed'}`}>
-          <InputBackend />
+          {view === 'AI' && <AI />}
+          {view === 'FAQ' && <FAQ />}
+          {view === 'Documentation' && <Documentation />}
         </div>
       </div>
     </div>