now make the actual terminal working nd another divs for bugs explainatio nadn one terminal for fixed code

index.html

@@ -201,58 +201,197 @@
       </div>
     </div>
   </div>
-
-  <!-- Code Editor Demo -->
+  <!-- Interactive Code Section -->
   <div class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
-    <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
-      <div class="mb-8 lg:mb-0">
-        <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
-          <span class="block">See the magic in</span>
-          <span class="block gradient-text">action</span>
-        </h2>
-        <p class="mt-3 text-lg text-gray-300">
-          Our AI analyzes your code as you type, providing instant feedback and suggestions to improve your code quality and efficiency.
-        </p>
-        <div class="mt-8">
-          <div class="inline-flex rounded-md shadow">
-            <a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-primary hover:bg-primary/90">
-              Try it yourself
-            </a>
+    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+      <!-- Original Code Editor -->
+      <div class="code-editor p-4 glow lg:col-span-1">
+        <div class="flex items-center mb-4">
+          <div class="flex space-x-2 mr-4">
+            <div class="w-3 h-3 rounded-full bg-red-500"></div>
+            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+          </div>
+          <div class="text-sm text-gray-400">input.js</div>
+        </div>
+        <textarea id="codeInput" class="w-full h-64 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded focus:outline-none focus:ring-2 focus:ring-primary" spellcheck="false">
+function calculateTotal(items) {
+  if (!Array.isArray(items)) {
+    throw new Error('Items must be an array');
+  }
+
+  let total = 0;
+  items.forEach(item => {
+    const price = Number(item.price) || 0;
+    total += price * (item.quantity || 1);
+  });
+
+  return total;
+}</textarea>
+        <button onclick="analyzeCode()" class="mt-4 w-full bg-primary hover:bg-primary/90 text-white py-2 px-4 rounded-md font-medium">
+          Analyze Code
+        </button>
+      </div>
+
+      <!-- Bug Explanation Terminal -->
+      <div class="code-editor p-4 glow lg:col-span-1">
+        <div class="flex items-center mb-4">
+          <div class="flex space-x-2 mr-4">
+            <div class="w-3 h-3 rounded-full bg-red-500"></div>
+            <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
+            <div class="w-3 h-3 rounded-full bg-green-500"></div>
+          </div>
+          <div class="text-sm text-gray-400">Bug Analysis</div>
+        </div>
+        <div id="bugTerminal" class="w-full h-64 bg-gray-800 text-gray-300 font-mono text-sm p-4 rounded overflow-y-auto">
+          <div class="text-green-400">$ Waiting for code analysis...</div>
+        </div>
+        <div class="mt-4 p-3 bg-gray-800 rounded text-sm text-gray-300">
+          <div class="flex items-start">
+            <i data-feather="info" class="text-blue-400 mr-2 mt-0.5 flex-shrink-0"></i>
+            <div>
+              <span class="font-medium">AI Insights:</span> The analyzer will detect potential bugs, security issues, and optimization opportunities.
+            </div>
           </div>
         </div>
       </div>
-      <div class="code-editor p-4 glow">
+
+      <!-- Fixed Code Editor -->
+      <div class="code-editor p-4 glow lg:col-span-1">
         <div class="flex items-center mb-4">
           <div class="flex space-x-2 mr-4">
             <div class="w-3 h-3 rounded-full bg-red-500"></div>
             <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
             <div class="w-3 h-3 rounded-full bg-green-500"></div>
           </div>
-          <div class="text-sm text-gray-400">example.js</div>
+          <div class="text-sm text-gray-400">fixed.js</div>
         </div>
-        <pre class="text-gray-300 text-sm font-mono overflow-x-auto">
+        <pre id="fixedCode" class="text-gray-300 text-sm font-mono h-64 overflow-auto bg-gray-800 p-4 rounded">
+<span class="text-gray-500">// Fixed code will appear here after analysis</span></pre>
+        <button onclick="applyFix()" class="mt-4 w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md font-medium flex items-center justify-center">
+          <i data-feather="check-circle" class="mr-2"></i> Apply Fix
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    function analyzeCode() {
+      const code = document.getElementById('codeInput').value;
+      const bugTerminal = document.getElementById('bugTerminal');
+      
+      // Clear terminal
+      bugTerminal.innerHTML = '<div class="text-green-400">$ Analyzing code...</div>';
+      
+      // Simulate AI analysis
+      setTimeout(() => {
+        bugTerminal.innerHTML = `
+          <div class="text-green-400">$ Code analysis complete</div>
+          <div class="text-yellow-400">$ Found 2 potential issues:</div>
+          <div class="mt-2">
+            <div class="text-red-400">1. Line 3: Missing input validation for 'items' array elements</div>
+            <div class="text-gray-400 ml-4">- Items should be validated for required properties (price, quantity)</div>
+          </div>
+          <div class="mt-2">
+            <div class="text-red-400">2. Line 7: Potential floating point precision issue</div>
+            <div class="text-gray-400 ml-4">- Consider using toFixed(2) for currency calculations</div>
+          </div>
+          <div class="mt-4 text-green-400">$ Suggested fixes available</div>
+        `;
+        
+        // Update fixed code
+        document.getElementById('fixedCode').innerHTML = `
 <span class="text-purple-400">function</span> <span class="text-yellow-300">calculateTotal</span>(items) {
-  <span class="text-gray-500">// AI suggests adding parameter validation</span>
   <span class="text-green-400">if</span> (!Array.isArray(items)) {
     <span class="text-green-400">throw</span> <span class="text-purple-400">new</span> <span class="text-blue-400">Error</span>(<span class="text-orange-300">'Items must be an array'</span>);
   }
 
   <span class="text-purple-400">let</span> total = <span class="text-blue-400">0</span>;
   items.forEach(item => {
-    <span class="text-gray-500">// AI detects potential NaN issue</span>
+    <span class="text-green-400">if</span> (!item.price || !item.quantity) {
+      <span class="text-green-400">throw</span> <span class="text-purple-400">new</span> <span class="text-blue-400">Error</span>(<span class="text-orange-300">'Items must have price and quantity'</span>);
+    }
     <span class="text-purple-400">const</span> price = <span class="text-blue-400">Number</span>(item.price) || <span class="text-blue-400">0</span>;
-    total += price * (item.quantity || <span class="text-blue-400">1</span>);
+    total += <span class="text-blue-400">Number</span>((price * (item.quantity || <span class="text-blue-400">1</span>)).toFixed(<span class="text-blue-400">2</span>));
   });
 
-  <span class="text-gray-500">// AI suggests adding return type annotation</span>
   <span class="text-green-400">return</span> total;
-}</pre>
-        <div class="mt-4 p-3 bg-gray-800 rounded text-sm text-gray-300">
+}`;
+      }, 1500);
+    }
+    
+    function applyFix() {
+      const fixedCode = document.getElementById('fixedCode').textContent;
+      document.getElementById('codeInput').value = fixedCode;
+      
+      const bugTerminal = document.getElementById('bugTerminal');
+      bugTerminal.innerHTML = `
+        <div class="text-green-400">$ Fix applied successfully!</div>
+        <div class="text-gray-400 mt-2">Original code has been replaced with the fixed version.</div>
+        <div class="text-green-400 mt-4">$ Ready for new analysis</div>
+      `;
+    }
+  </script>
+  <!-- Code Explanation Section -->
+  <div class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto bg-gray-800/50 rounded-lg">
+    <div class="text-center mb-12">
+      <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
+        <span class="gradient-text">Code Explanation</span>
+      </h2>
+      <p class="mt-3 max-w-2xl mx-auto text-lg text-gray-300">
+        Our AI breaks down your code line by line for better understanding and learning.
+      </p>
+    </div>
+    
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+      <div class="code-editor p-4">
+        <div class="flex items-center mb-4">
+          <div class="text-sm text-gray-400">Code Breakdown</div>
+        </div>
+        <div id="codeExplanation" class="text-gray-300 text-sm font-mono space-y-4">
+          <div>
+            <div class="text-primary font-medium">Function Declaration:</div>
+            <div class="text-gray-400 ml-4">Defines a function named 'calculateTotal' that takes an 'items' parameter</div>
+          </div>
+          <div>
+            <div class="text-primary font-medium">Input Validation:</div>
+            <div class="text-gray-400 ml-4">Checks if 'items' is an array, throws error if not</div>
+          </div>
+          <div>
+            <div class="text-primary font-medium">Total Calculation:</div>
+            <div class="text-gray-400 ml-4">Iterates through items array, converts prices to numbers, handles missing quantities</div>
+          </div>
+          <div>
+            <div class="text-primary font-medium">Return Value:</div>
+            <div class="text-gray-400 ml-4">Returns the calculated total after processing all items</div>
+          </div>
+        </div>
+      </div>
+      
+      <div class="code-editor p-4">
+        <div class="flex items-center mb-4">
+          <div class="text-sm text-gray-400">Optimization Tips</div>
+        </div>
+        <div class="text-gray-300 text-sm font-mono space-y-4">
+          <div class="flex items-start">
+            <i data-feather="zap" class="text-yellow-400 mr-2 mt-0.5 flex-shrink-0"></i>
+            <div>
+              <div class="font-medium">Use reduce() instead of forEach:</div>
+              <div class="text-gray-400">Could make the total calculation more concise</div>
+            </div>
+          </div>
+          <div class="flex items-start">
+            <i data-feather="alert-triangle" class="text-red-400 mr-2 mt-0.5 flex-shrink-0"></i>
+            <div>
+              <div class="font-medium">Watch for floating point math:</div>
+              <div class="text-gray-400">Currency calculations should use fixed decimal places</div>
+            </div>
+          </div>
           <div class="flex items-start">
-            <i data-feather="alert-circle" class="text-yellow-400 mr-2 mt-0.5 flex-shrink-0"></i>
+            <i data-feather="code" class="text-blue-400 mr-2 mt-0.5 flex-shrink-0"></i>
             <div>
-              <span class="font-medium">AI Suggestion:</span> Consider adding JSDoc comments for better documentation. 
-              <button class="ml-2 text-primary text-xs">Apply suggestion</button>
+              <div class="font-medium">Add TypeScript:</div>
+              <div class="text-gray-400">Would catch type issues at compile time</div>
             </div>
           </div>
         </div>
@@ -261,7 +400,7 @@
   </div>
 
   <!-- CTA Section -->
-  <div class="bg-gradient-to-r from-primary/20 to-secondary/20 py-16 px-4 sm:px-6 lg:px-8">
+<div class="bg-gradient-to-r from-primary/20 to-secondary/20 py-16 px-4 sm:px-6 lg:px-8">
     <div class="max-w-3xl mx-auto text-center">
       <h2 class="text-3xl font-extrabold text-white sm:text-4xl">
         Ready to revolutionize your coding workflow?