diff --git a/src/App.tsx b/src/App.tsx index 936fed2..84ec41d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,8 @@ + import { BrowserRouter as Router, Routes, Route} from 'react-router-dom' import Landing from './pages/Home/Home' + +import About from './pages/Home/About' import Dashboard from './pages/Dashboard' import './App.css' import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; @@ -11,6 +14,7 @@ function App() { } /> + } /> } /> } /> } /> @@ -19,4 +23,5 @@ function App() { ); } -export default App; +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 ( +
+
+

🛒 About This Project

+

+ The E-Commerce Equipment Dashboard 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. +

+ +

🎯 Purpose

+

+ The primary aim of this project is to enhance the equipment e-commerce experience by providing: +

+
    +
  • 🔹 A visual catalog of available equipment with detailed specs
  • +
  • 🔹 Real-time inventory and price updates
  • +
  • 🔹 A smooth, user-friendly interface optimized for all devices
  • +
+ +

🛠 Tech Stack

+
    +
  • âš› React with TypeScript
  • +
  • 📦 RESTful APIs (for product and inventory data)
  • +
  • 🎨 Inline CSS with responsive and modern styling
  • +
+ +

📌 Disclaimer

+

+ 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. +

+
+
+ ); +}; + +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;