Checkout me

README.md

@@ -1,4 +1,5 @@
-# under-working
+
+# How to run the project
 
 RUN Backend project
 ```
@@ -7,6 +8,11 @@ uvicorn main:app --reload
 ```
 
 To Run frontend project
+**Install depandencies**
+```bash
+npm install
+```
+Run this command to run the project
 ```bash
 npm start
 ```

frontend/src/App.js

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Routes, Route, useNavigate } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route, useNavigate, Link } from 'react-router-dom';
 import CodeEditor from './components/CodeEditor';
+import AboutUs from './pages/AboutUs';   // ✅ Import AboutUs page
+
 import './App.css';
 
 const Navbar = () => {
@@ -10,9 +12,10 @@ const Navbar = () => {
         <span className="logo">AI Debug</span>
       </div>
       <div className="navbar-links">
-        <a href="https://github.com/your-repo" target="_blank" rel="noopener noreferrer">GitHub</a>
+        <a href="https://github.com/bhola-dev58" target="_blank" rel="noopener noreferrer">GitHub</a>
         <a href="#features">Features</a>
-        <a href="#about">About</a>
+        {/* ✅ Use Link instead of <a> for routing */}
+        <Link to="/about">About</Link>
       </div>
     </nav>
   );
@@ -93,6 +96,7 @@ function App() {
       <Routes>
         <Route path="/" element={<Home />} />
         <Route path="/debug" element={<CodeEditor />} />
+        <Route path="/about" element={<AboutUs />} />  {/* ✅ Add About page route */}
       </Routes>
     </Router>
   );

frontend/src/components/about.js

@@ -0,0 +1,65 @@
+import React from "react";
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
+
+const AboutUs = () => {
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white flex flex-col items-center p-8">
+      <motion.h1
+        className="text-4xl font-bold mb-6 text-center"
+        initial={{ opacity: 0, y: -30 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.7 }}
+      >
+        About Us
+      </motion.h1>
+
+      <Card className="max-w-3xl bg-gray-700/40 backdrop-blur-md shadow-xl rounded-2xl">
+        <CardContent className="p-6">
+          <motion.p
+            className="text-lg leading-relaxed mb-4"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.3 }}
+          >
+            Welcome to <span className="font-semibold text-blue-400">AI-Based Code Debugger</span>,
+            your intelligent coding companion. Our mission is to empower developers by providing
+            real-time debugging assistance, code optimization suggestions, and AI-powered insights
+            to make programming faster and smarter.
+          </motion.p>
+
+          <motion.p
+            className="text-lg leading-relaxed mb-4"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.6 }}
+          >
+            We are passionate about bridging the gap between human creativity and artificial
+            intelligence. With a focus on accuracy, usability, and innovation, we aim to revolutionize
+            the way developers debug and enhance their code.
+          </motion.p>
+
+          <motion.p
+            className="text-lg leading-relaxed"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.9 }}
+          >
+            Join us on our journey to build the future of coding with AI. Whether you are a student,
+            beginner, or experienced professional, our platform is designed to support you at every
+            stage of development.
+          </motion.p>
+
+          <div className="mt-6 flex justify-center">
+            <Button className="px-6 py-2 text-lg rounded-2xl bg-blue-500 hover:bg-blue-600 transition">
+              Learn More
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default AboutUs;

frontend/src/pages/AboutUs.css

@@ -0,0 +1,37 @@
+.about-container {
+  max-width: 800px;
+  margin: 60px auto;
+  padding: 20px;
+  background: #1e1e1e;
+  color: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.about-title {
+  font-size: 2.5rem;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-align: center;
+  color: #4dabf7;
+}
+
+.about-text {
+  font-size: 1.1rem;
+  line-height: 1.6;
+  margin-bottom: 16px;
+}
+
+.highlight {
+  color: #4dabf7;
+  font-weight: bold;
+}
+
+.about-footer {
+  margin-top: 30px;
+  font-size: 0.95rem;
+  text-align: center;
+  border-top: 1px solid #444;
+  padding-top: 15px;
+  color: #ccc;
+}

frontend/src/pages/AboutUs.js

@@ -0,0 +1,36 @@
+// src/pages/AboutUs.js
+import React from "react";
+import "./AboutUs.css"; // ✅ optional separate CSS if you want custom styles
+
+const AboutUs = () => {
+  return (
+    <div className="about-container">
+      <h1 className="about-title">About Us</h1>
+      <p className="about-text">
+        Welcome to <span className="highlight">AI Debug</span>, your
+        AI-powered debugging companion. Our mission is to help developers find
+        and fix bugs smarter and faster with real-time insights and code
+        suggestions.
+      </p>
+
+      <p className="about-text">
+        Whether you’re a beginner learning to code or an experienced developer
+        working on large projects, our platform provides intelligent
+        recommendations, performance optimizations, and bug detection powered by
+        AI.
+      </p>
+
+      <p className="about-text">
+        We believe in making coding easier, more efficient, and accessible to
+        everyone. 🚀
+      </p>
+
+      <div className="about-footer">
+        <p>📩 Contact us: [email protected]</p>
+        <p>🌐 Visit: github.com/bhola-dev58</p>
+      </div>
+    </div>
+  );
+};
+
+export default AboutUs;