adding file

Author: bhola-dev58

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: support@aidebug.com</p>
+        <p>🌐 Visit: github.com/bhola-dev58</p>
+      </div>
+    </div>
+  );
+};
+
+export default AboutUs;