Merge pull request #207 from meghanakn473/main

Added About Us page

frontend/src/components/about.css

@@ -0,0 +1,94 @@
+body {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.about-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 80px 20px; /* Keep spacious padding */
+  background: linear-gradient(135deg, rgba(200, 233, 255, 0.5), rgba(128, 209, 255, 0.4)); /* Softer gradient */
+  min-height: 100vh;
+  font-family: 'Arial', sans-serif;
+  color: #343a40;
+}
+
+.about-container h1 {
+  font-size: 4rem; /* Keep large font size for impact */
+  color: #004085; /* Darker blue */
+  margin-bottom: 40px; /* Keep increased margin for spacing */
+  text-align: center;
+  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1); /* Enhanced text shadow for depth */
+}
+
+.about-container p {
+  font-size: 1.6rem; /* Keep increased font size for readability */
+  line-height: 1.8; /* Keep adjusted line height */
+  color: #343a40;
+  max-width: 800px;
+  text-align: center;
+  margin-bottom: 40px; /* Decreased margin for more compact layout */
+  padding: 0 20px; /* Keep horizontal padding */
+}
+
+.about-section {
+  margin: 20px 0; /* Decreased margin for tighter spacing */
+  padding: 30px; /* Decreased padding for reduced height */
+  border-radius: 15px;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(200, 220, 255, 0.8)); /* More vibrant section gradient */
+  color: #343a40;
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth */
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  width: 90%; /* Increased width for content */
+  max-width: 700px; /* Increased max-width for larger displays */
+  text-align: justify; /* Justify text */
+  border: 1px solid rgba(0, 123, 255, 0.5); /* Slightly darker border */
+}
+
+.about-section:hover {
+  transform: translateY(-10px); /* Enhanced hover effect for interactivity */
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
+}
+
+.about-section h2 {
+  font-size: 3rem; /* Keep larger font size for section headings */
+  margin-bottom: 15px; /* Adjusted margin for spacing */
+  color: #004085; /* Darker blue */
+  border-bottom: 2px solid rgba(0, 123, 255, 0.6); /* Slightly darker border */
+  padding-bottom: 5px; /* Increased padding for emphasis */
+  transition: color 0.3s ease; /* Smooth color transition */
+}
+
+.about-section h2:hover {
+  color: #007bff; /* Change color on hover for better interaction */
+}
+
+.about-section p {
+  font-size: 1.3rem; /* Keep increased font size for section content */
+  line-height: 1.6; /* Increased line height for readability */
+  margin-top: 10px; /* Adjusted margin for spacing */
+  color: #343a40;
+  text-align: justify; /* Justify text for cleaner appearance */
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .about-container h1 {
+    font-size: 3.2rem; /* Adjusted for smaller screens */
+  }
+
+  .about-section h2 {
+    font-size: 2.5rem; /* Adjusted for smaller screens */
+  }
+
+  .about-container p, .about-section p {
+    font-size: 1.1rem; /* Adjusted for smaller screens */
+  }
+
+  .about-section {
+    width: 90%; /* Full width on smaller screens for better usability */
+    padding: 20px; /* Further reduced padding for mobile devices */
+  }
+}

frontend/src/components/about.jsx

@@ -1,9 +1,41 @@
-import React from 'react'
+import React from 'react';
+import './about.css';
 
-const about = () => {
+const About = () => {
   return (
-    <div>about</div>
-  )
-}
+    <div className="about-container">
+      <h1>ABOUT US</h1>
+      <p>
+        Welcome to <span className="highlight">StationSaarthi</span>, your comprehensive navigation and assistance platform designed to revolutionize the Indian Railway Station experience. We combine advanced technology with user-centric design to ensure seamless travel for everyone.
+      </p>
+      <div className="about-section">
+        <h2>Our Mission</h2>
+        <p>
+          To provide the best user experience through cutting-edge technology and innovative design. 
+          We aim to deliver high-quality services that meet the needs of our customers.
+        </p>
+      </div>
+      <div className="about-section">
+        <h2>Our Vision</h2>
+        <p>
+          We envision a world where technology makes lives easier, bridging the gap between users and 
+          solutions through seamless experiences and intuitive design.
+        </p>
+      </div>
+      <div className="about-section">
+        <h2>What We Offer</h2>
+        <p>
+          From live train updates to navigation within railway stations, <span className="highlight">StationSaarthi</span> aims to be your ultimate travel companion. Our platform offers features like personalized recommendations, multi-language support, and much more.
+        </p>
+      </div>
+      <div className="about-section">
+        <h2>Why Choose Us?</h2>
+        <p>
+          We believe in the power of technology to transform everyday experiences. With <span className="highlight">StationSaarthi</span>, you can say goodbye to the stress of traveling and embrace a new way of exploring India’s vast railway network.
+        </p>
+      </div>
+    </div>
+  );
+};
 
-export default about
+export default About;