From 2a4897cc102a02191857d482c162fa99762ce8b3 Mon Sep 17 00:00:00 2001
From: unknown <you@example.com>
Date: Tue, 15 Jul 2025 19:55:25 +0530
Subject: [PATCH] Modified

---
 src/App.tsx              |  6 ++-
 src/pages/Home/About.tsx | 79 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 84 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Home/About.tsx

diff --git a/src/App.tsx b/src/App.tsx
index b845538..6f404ac 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,7 @@
+
 import { BrowserRouter as Router, Routes, Route} from 'react-router-dom'
 import Landing from './pages/Home/Home'
+import About from './pages/Home/About'
 import './App.css'
 
 function App() {
@@ -7,9 +9,11 @@ function App() {
     <Router>
       <Routes>
         <Route path="/" element={<Landing />} />
+        <Route path="/About" element={<About />} />
       </Routes>
     </Router>
   )
 }
 
-export default App
\ No newline at end of file
+export default App
+
diff --git a/src/pages/Home/About.tsx b/src/pages/Home/About.tsx
new file mode 100644
index 0000000..c2b8952
--- /dev/null
+++ b/src/pages/Home/About.tsx
@@ -0,0 +1,79 @@
+import React from "react";
+
+const AboutPage: React.FC = () => {
+  return (
+    <div style={styles.container}>
+      <div style={styles.card}>
+        <h1 style={styles.heading}>🛒 About This Project</h1>
+        <p style={styles.paragraph}>
+          The <strong>E-Commerce Equipment Dashboard</strong> is a powerful and responsive web application designed to streamline how users explore and manage industrial and commercial equipment for sale online. Whether you're a small business, a supplier, or an equipment reseller, this platform brings clarity, efficiency, and convenience to the buying experience.
+        </p>
+
+        <h2 style={styles.subheading}>🎯 Purpose</h2>
+        <p style={styles.paragraph}>
+          The primary aim of this project is to enhance the equipment e-commerce experience by providing:
+        </p>
+        <ul style={styles.list}>
+          <li>🔹 A visual catalog of available equipment with detailed specs</li>
+          <li>🔹 Real-time inventory and price updates</li>
+          <li>🔹 A smooth, user-friendly interface optimized for all devices</li>
+        </ul>
+
+        <h2 style={styles.subheading}>🛠 Tech Stack</h2>
+        <ul style={styles.list}>
+          <li>⚛ React with TypeScript</li>
+          <li>📦 RESTful APIs (for product and inventory data)</li>
+          <li>🎨 Inline CSS with responsive and modern styling</li>
+        </ul>
+
+        <h2 style={styles.subheading}>📌 Disclaimer</h2>
+        <p style={styles.paragraph}>
+          This application is a demo built for educational and demonstration purposes. All equipment listings and prices are mock data and should not be considered real or up-to-date.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+const styles: { [key: string]: React.CSSProperties } = {
+  container: {
+    background: "linear-gradient(to bottom right, #1a1a1a, #333)",
+    minHeight: "100vh",
+    color: "#fff",
+    padding: "40px 20px",
+    fontFamily: "Arial, sans-serif",
+    boxSizing: "border-box",
+  },
+  card: {
+    background: "#2e2e2e",
+    padding: "30px",
+    maxWidth: "800px",
+    margin: "auto",
+    borderRadius: "12px",
+    boxShadow: "0 0 12px rgba(255, 215, 0, 0.4)",
+  },
+  heading: {
+    color: "#FFD700",
+    marginBottom: "20px",
+    fontSize: "32px",
+    textAlign: "center",
+  },
+  subheading: {
+    color: "#FFCC00",
+    marginTop: "30px",
+    marginBottom: "10px",
+    fontSize: "20px",
+  },
+  paragraph: {
+    fontSize: "16px",
+    lineHeight: "1.6",
+  },
+  list: {
+    listStyle: "none",
+    paddingLeft: 0,
+    fontSize: "16px",
+    lineHeight: "1.8",
+  },
+};
+
+export default AboutPage;