Merge pull request #4 from bhola-dev58/checkout-me

Checkout me

Author: bhola-dev58

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;