From 5be2f65d552f59ce56293058464eaeb11f533c11 Mon Sep 17 00:00:00 2001
From: Ikki <vivekprakash.st@gmail.com>
Date: Sun, 27 Oct 2024 02:38:15 +0530
Subject: [PATCH] about-page-revamp

---
 frontend/package.json                   |   2 +
 frontend/src/App.jsx                    |   3 +-
 frontend/src/Pages/AboutUs.jsx          | 226 ++++++++++--------------
 frontend/src/components/TeamSection.jsx | 159 +++++++++++++++++
 frontend/src/components/about.jsx       | 163 -----------------
 5 files changed, 258 insertions(+), 295 deletions(-)
 create mode 100644 frontend/src/components/TeamSection.jsx
 delete mode 100644 frontend/src/components/about.jsx

diff --git a/frontend/package.json b/frontend/package.json
index 104935a..4a6b2ce 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,11 +19,13 @@
     "google-translate-api-x": "^10.7.1",
     "jwt-decode": "^4.0.0",
     "leaflet": "^1.9.4",
+    "lucide-react": "^0.453.0",
     "react": "^18.3.1",
     "react-datepicker": "^7.4.0",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
     "react-leaflet": "^4.2.1",
+    "react-responsive": "^10.0.0",
     "react-router-dom": "^6.26.2",
     "shadcn-ui": "^0.2.3",
     "socket.io-client": "^4.8.0",
diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index fd17d9c..cc51905 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -17,7 +17,6 @@ import Chatbot from "./components/chatbot";
 import ContactUs from "./Pages/ContactUs";
 import Settings from "./components/Settings";
 import Help from "./components/help";
-import About from "./components/about";
 import Contributor from "./Pages/contributor";
 import Payment from "./Pages/Payment";
 import HelpAndSupport from "./Pages/HelpandSupport";
@@ -46,7 +45,7 @@ function App() {
           <Route path="/ContactUs" element={<ContactUs />} />
           <Route path="/Settings" element={<Settings />} />
           <Route path="/help" element={<Help />} />
-          <Route path="/about" element={<About />} />
+          <Route path="/about" element={<AboutUs />} />
           <Route path="/contributor" element={<Contributor />} />
           <Route path="/payment" element={<Payment />} />
           <Route path="/aboutus" element={<AboutUs />} />
diff --git a/frontend/src/Pages/AboutUs.jsx b/frontend/src/Pages/AboutUs.jsx
index accbc4d..521f558 100644
--- a/frontend/src/Pages/AboutUs.jsx
+++ b/frontend/src/Pages/AboutUs.jsx
@@ -1,9 +1,9 @@
 import React from 'react'; // Importing React
 import { useNavigate } from 'react-router-dom'; // Importing navigation function
 import backicon from '../assets/svg/backicon.svg'; // Importing back icon asset
-
+import TeamSection from '../components/TeamSection';
 // About component
-const About = () => {
+const AboutUs = () => {
   // UseNavigate hook for navigation
   const navigate = useNavigate();
 
@@ -12,15 +12,8 @@ const About = () => {
     // Navigates to the home page when back button is clicked
     navigate('/'); 
   };
-  
-
-  // Return JSX structure
   return (
-    <div 
-      className="flex flex-col items-center p-8 min-h-screen bg-gradient-to-br 
-      from-blue-100 via-blue-200 to-blue-300 text-gray-800">
-      
-      {/* Back button to navigate to home */}
+    <div className="w-full mx-auto p-8 bg-gray-100 text-gray-800">
       <button 
         onClick={HomeClick} 
         className="absolute left-4 top-4">
@@ -29,136 +22,109 @@ const About = () => {
           alt="Back" 
           className="h-12" />
       </button>
-
-      {/* Main Heading */}
-      <h1 
-        className="text-5xl font-bold text-blue-900 mb-12 text-center shadow-md">
-        ABOUT US
-      </h1>
-
-      {/* Introduction Section */}
-      <p 
-        className="text-xl leading-relaxed text-center max-w-2xl mb-12 px-4">
-        Welcome to{' '} 
-        <span className="font-bold text-blue-600"> 
-          StationSaarthi
-        </span>, 
-        your one-stop platform designed to elevate your Indian Railway Station experience. 
-        With cutting-edge technology and user-friendly design, we aim to provide smooth and efficient 
-        travel assistance for all passengers.
-      </p>
-
-      {/* Our Mission Section */}
-      <div 
-        className="w-full max-w-3xl p-8 mb-8 bg-white shadow-lg rounded-lg hover:shadow-2xl 
-        transition-transform transform hover:-translate-y-2 border border-blue-300">
-        <h2 
-          className="text-3xl font-semibold text-blue-800 mb-4 border-b-2 
-          border-blue-400 pb-2">
-          Our Mission
-        </h2>
-        <p 
-          className="text-lg leading-loose">
-          At{' '} 
-          <span className="font-bold text-blue-600">
-            StationSaarthi
-          </span>, 
-          our mission is to simplify the railway station experience by integrating advanced technology 
-          and providing real-time, actionable information to every traveler. 
-          We are committed to enhancing travel convenience for all.
+      {/* Hero Section */}
+      <section className="text-center mb-12 max-w-5xl mx-auto">
+        <h2 className="text-4xl font-bold text-gray-800">Welcome to Station Saarthi</h2>
+        <h3 className="bg-gray-900 rounded-lg text-blue-500 text-sm inline-block py-1 px-3 mt-2 font-semibold">
+          Elevate Your Railway Station Experience
+        </h3>
+        <p className="text-lg mt-4 text-gray-600">
+          StationSaarthi is your one-stop platform designed to elevate your Indian Railway Station
+          experience. With cutting-edge technology and user-friendly design, we aim to provide
+          smooth and efficient travel assistance for all passengers.
         </p>
-      </div>
+      </section>
 
-      {/* Our Vision Section */}
-      <div 
-        className="w-full max-w-3xl p-8 mb-8 bg-white shadow-lg rounded-lg hover:shadow-2xl 
-        transition-transform transform hover:-translate-y-2 border border-blue-300">
-        <h2 
-          className="text-3xl font-semibold text-blue-800 mb-4 border-b-2 
-          border-blue-400 pb-2">
-          Our Vision
-        </h2>
-        <p 
-          className="text-lg leading-loose">
-          Our vision is a future where every journey is hassle-free. 
-          We strive to create a travel ecosystem that connects passengers, railways, and services 
-          through seamless digital integration.
-        </p>
-      </div>
+      {/* Our Mission & Vision Section */}
+      <section className="flex flex-col md:flex-row gap-6 mb-12 max-w-5xl mx-auto">
+        <div className="bg-white rounded-lg p-6 shadow-md text-center w-full md:w-1/2 transition-transform duration-300 hover:scale-105">
+          <h4 className="text-xl font-semibold text-blue-600 mb-4">Our Mission</h4>
+          <p className="text-gray-700">
+            At <b>StationSaarthi</b>, our mission is to simplify the railway station experience by
+            integrating advanced technology and providing real-time, actionable information to every
+            traveler. We are committed to enhancing travel convenience for all.
+          </p>
+        </div>
+        <div className="bg-white rounded-lg p-6 shadow-md text-center w-full md:w-1/2 transition-transform duration-300 hover:scale-105">
+          <h4 className="text-xl font-semibold text-blue-600 mb-4">Our Vision</h4>
+          <p className="text-gray-700">
+            Our vision is a future where every journey is hassle-free. We strive to create a travel
+            ecosystem that connects passengers, railways, and services through seamless digital
+            integration.
+          </p>
+        </div>
+      </section>
 
       {/* What We Offer Section */}
-      <div 
-        className="w-full max-w-3xl p-8 mb-8 bg-white shadow-lg rounded-lg hover:shadow-2xl 
-        transition-transform transform hover:-translate-y-2 border border-blue-300">
-        <h2 
-          className="text-3xl font-semibold text-blue-800 mb-4 border-b-2 
-          border-blue-400 pb-2">
-          What We Offer
-        </h2>
-        <p 
-          className="text-lg leading-loose">
-          With{' '} 
-          <span className="font-bold text-blue-600">
-            StationSaarthi
-          </span>, 
-          you get access to:
-          <ul 
-            className="list-disc list-inside mt-4">
-            <li>Real-time train updates and notifications</li>
-            <li>Interactive station maps for easy navigation</li>
-            <li>Personalized travel recommendations</li>
-            <li>Multi-language support to cater to diverse passengers</li>
-            <li>Accessible services for differently-abled travelers</li>
-          </ul>
-        </p>
+      <div className="text-center my-4 mb-12 max-w-5xl mx-auto">
+        <h2 className="text-blue-600 text-3xl font-bold mb-8">What We Offer</h2>
+        <div className="flex flex-col md:flex-row justify-center space-y-8 md:space-x-8 md:space-y-0">
+          <div className="bg-white shadow-md rounded-lg p-6 w-80 mx-auto transition-transform duration-300 hover:scale-105">
+            <div className="text-blue-600 text-5xl mb-4">
+              <i className="fas fa-train"></i>
+            </div>
+            <h3 className="text-black text-xl font-bold mb-2">Real-Time Train Updates</h3>
+            <p className="text-gray-600">
+              Stay informed with live train schedules and notifications for timely travel assistance.
+            </p>
+          </div>
+          <div className="bg-white shadow-md rounded-lg p-6 w-80 mx-auto transition-transform duration-300 hover:scale-105">
+            <div className="text-blue-600 text-5xl mb-4">
+              <i className="fas fa-map-marked-alt"></i>
+            </div>
+            <h3 className="text-black text-xl font-bold mb-2">Interactive Station Maps</h3>
+            <p className="text-gray-600">
+              Navigate the station effortlessly with detailed maps, making it easier to find your way.
+            </p>
+          </div>
+          <div className="bg-white shadow-md rounded-lg p-6 w-80 mx-auto transition-transform duration-300 hover:scale-105">
+            <div className="text-blue-600 text-5xl mb-4">
+              <i className="fas fa-assistive-listening-systems"></i>
+            </div>
+            <h3 className="text-black text-xl font-bold mb-2">Accessible Services</h3>
+            <p className="text-gray-600">
+              Our platform ensures accessible services, providing support for differently-abled travelers.
+            </p>
+          </div>
+        </div>
       </div>
 
       {/* Why Choose Us Section */}
-      <div 
-        className="w-full max-w-3xl p-8 mb-8 bg-white shadow-lg rounded-lg hover:shadow-2xl 
-        transition-transform transform hover:-translate-y-2 border border-blue-300">
-        <h2 
-          className="text-3xl font-semibold text-blue-800 mb-4 border-b-2 
-          border-blue-400 pb-2">
-          Why Choose Us?
-        </h2>
-        <p 
-          className="text-lg leading-loose">
-          <span className="font-bold text-blue-600">
-            StationSaarthi{' '}
-          </span> 
-          is more than a service; it's a commitment to revolutionizing your railway station experience. 
-          We believe in technology's power to enhance every aspect of your journey, ensuring safety, 
-          comfort, and convenience at every step.
-        </p>
-      </div>
+      <div className="bg-white p-8 rounded-lg shadow-md max-w-5xl mx-auto mb-12">
+  <h2 className="text-center text-3xl font-bold text-blue-600 mb-4">Why Choose StationSaarthi?</h2>
+  <p className="text-center text-lg text-gray-700 mb-8">
+    With <span className="font-bold">StationSaarthi</span>, you’re not just navigating a station — you're embracing a revolutionary approach to travel. Our platform is designed to streamline your experience, providing you with essential resources, convenience, and tailored support.
+  </p>
+  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+    <div className="bg-white p-6 rounded-lg shadow-md text-center transition-transform duration-300 hover:scale-105">
+      <h3 className="text-black text-xl font-bold mb-2">Smart Journey Planning</h3>
+      <p className="text-gray-700">Plan your trips efficiently with our smart journey planning tools and suggestions.</p>
+    </div>
+    <div className="bg-white p-6 rounded-lg shadow-md text-center transition-transform duration-300 hover:scale-105">
+      <h3 className="text-black text-xl font-bold mb-2">User-Friendly Interface</h3>
+      <p className="text-gray-700">Enjoy a seamless experience with our intuitive and easy-to-use platform.</p>
+    </div>
+    <div className="bg-white p-6 rounded-lg shadow-md text-center transition-transform duration-300 hover:scale-105">
+      <h3 className="text-black text-xl font-bold mb-2">Community Support</h3>
+      <p className="text-gray-700">Join a community of travelers to share experiences, tips, and support for a better journey.</p>
+    </div>
+  </div>
+</div>
 
-      {/* Our Team Section */}
-      <div 
-        className="w-full max-w-3xl p-8 mb-8 bg-white shadow-lg rounded-lg hover:shadow-2xl 
-        transition-transform transform hover:-translate-y-2 border border-blue-300">
-        <h2 
-          className="text-3xl font-semibold text-blue-800 mb-4 border-b-2 
-          border-blue-400 pb-2">
-          Meet the Team
-        </h2>
-        <p 
-          className="text-lg leading-loose">
-          Our diverse team of professionals is driven by a passion for innovation. 
-          With expertise spanning technology, transportation, and user experience design, 
-          we are dedicated to making railway stations smarter, more efficient, and more 
-          enjoyable for every passenger.
-        </p>
-      </div>
 
-      {/* Footer */}
-      <div 
-        className="text-center mt-12 text-sm text-gray-600">
+      {/* Meet the Team Section */}
+      <section className="text-center mb-12 max-w-5xl mx-auto">
+        
+        
+        <TeamSection />
+      </section>
+
+      {/* Footer Section */}
+      <footer className="text-center mt-12 text-gray-500 text-sm max-w-5xl mx-auto">
         <p>© 2024 StationSaarthi | All rights reserved</p>
-      </div>
+      </footer>
     </div>
   );
-};
+}
 
-// Exporting the About component for use in other parts of the app
-export default About;
+export default AboutUs;
diff --git a/frontend/src/components/TeamSection.jsx b/frontend/src/components/TeamSection.jsx
new file mode 100644
index 0000000..72cfaba
--- /dev/null
+++ b/frontend/src/components/TeamSection.jsx
@@ -0,0 +1,159 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { ChevronLeft, ChevronRight, Star } from 'lucide-react';
+import { useMediaQuery } from 'react-responsive';
+
+const teamMembers = [
+    {
+      name: 'Rajesh Kumar',
+      role: 'Technology Lead',
+      image: 'https://media.istockphoto.com/id/613557584/photo/portrait-of-a-beautifull-smiling-man.jpg?s=612x612&w=0&k=20&c=hkCg5CrmTKOApePbPOyo1U9GexEfIJOJqoLXJIvcN8E=', // Add actual image URL
+      quote: 'Passionate about technology and travel.',
+      bio: 'With over 10 years of experience in software development, Rajesh leads our tech initiatives to enhance the travel experience.',
+    },
+    {
+      name: 'Anita Desai',
+      role: 'User Experience Designer',
+      image: 'https://www.stylecraze.com/wp-content/uploads/2013/05/Most-Beautiful-Women-In-India.jpg', // Add actual image URL
+      quote: 'Designing for users is my passion.',
+      bio: 'Anita specializes in creating user-friendly interfaces that simplify interactions and enhance accessibility.',
+    },
+    {
+      name: 'Vikram Singh',
+      role: 'Operations Manager',
+      image: 'https://english.cdn.zeenews.com/sites/default/files/2017/11/17/639329-indian-men.jpg', // Add actual image URL
+      quote: 'Optimizing processes for better efficiency.',
+      bio: 'Vikram ensures that our operations run smoothly, focusing on delivering top-notch services to travelers.',
+    },
+    {
+        name: 'Rekha Sharma',
+        role: 'UX/UI Designer',
+        image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJv1aDBUeruN6ZJwt5VqNHQx1UfUM8wShdEjGRAvW1lQxCAMG4cTgUX_ekZXDKHbAg8wQ&usqp=CAU',
+        quote: 'Creating user-centric designs.',
+        bio: 'Rekha ensures our interfaces are not only beautiful but also intuitive for users.'
+      },
+      {
+        name: 'Suresh Mehta',
+        role: 'Customer Support Lead',
+        image: 'https://cdn.openart.ai/stable_diffusion/18d45fc8e03d0f93cb1b170c810720b55d1822c7_2000x2000.webp',
+        quote: 'Ensuring a smooth journey for every passenger.',
+        bio: 'Suresh leads our customer support team, dedicated to resolving queries efficiently.'
+      },
+    // Add more team member objects as needed
+];
+
+// Duplicate the first and last members for infinite scroll effect
+const infiniteTeamMembers = teamMembers;
+
+const TeamCard = ({ member }) => (
+  <div className="rounded-lg hover:shadow-xl p-4 flex flex-col justify-between h-full transition-shadow duration-300 transform hover:scale-105 shadow-[0_2px_10px_rgba(0,0,0,0.3)] bg-white">
+    <div>
+      <div className="flex items-center mb-4">
+        <img src={member.image} alt={member.name} className="w-16 h-16 rounded-full border-2 mr-4 object-cover" />
+        <div>
+          <h3 className="text-left font-semibold text-lg text-gray-800">{member.name}</h3>
+          <p className="text-sm text-blue-600">{member.role}</p>
+        </div>
+      </div>
+      <p className="text-l font-bold mb-2 text-gray-800">"{member.quote}"</p>
+      <p className="mb-4 text-gray-600">{member.bio}</p>
+    </div>
+  </div>
+);
+
+const TeamSection = () => {
+  const [currentIndex, setCurrentIndex] = useState(1); // Start at the first real member
+  const [isTransitioning, setIsTransitioning] = useState(false);
+  const isSmallScreen = useMediaQuery({ query: '(max-width: 640px)' });
+  const isLargeScreen = useMediaQuery({ query: '(min-width: 641px)' });
+
+  const teamWidth = isSmallScreen ? 100 : 100 / 3;
+
+  const nextMember = useCallback(() => {
+    setIsTransitioning(true);
+    setCurrentIndex((prevIndex) => {
+      if (prevIndex === infiniteTeamMembers.length - 2) {
+        setTimeout(() => {
+          setIsTransitioning(false);
+          setCurrentIndex(1);
+        }, 500);
+        return prevIndex;
+      }
+      return prevIndex + 1;
+    });
+  }, []);
+
+  const prevMember = useCallback(() => {
+    setIsTransitioning(true);
+    setCurrentIndex((prevIndex) => {
+      if (prevIndex === 1) {
+        setTimeout(() => {
+          setIsTransitioning(false);
+          setCurrentIndex(infiniteTeamMembers.length - 2);
+        }, 500);
+        return prevIndex;
+      }
+      return prevIndex - 1;
+    });
+  }, []);
+
+  useEffect(() => {
+    const timer = setInterval(nextMember, 4000);
+    return () => clearInterval(timer);
+  }, [nextMember]);
+
+  return (
+    <section className="bg-white p-8 rounded-lg shadow-md max-w-5xl mx-auto overflow-hidden">
+      <div className="max-w-7xl mx-auto">
+        <h2 className="text-center text-3xl font-bold text-blue-600 mb-4">
+          Meet Our Team
+        </h2>
+        <p className="text-lg text-gray-700">
+          Our diverse team of professionals is driven by a passion for innovation. With expertise
+          spanning technology, transportation, and user experience design, we are dedicated to
+          making railway stations smarter, more efficient, and more enjoyable for every passenger.
+        </p>
+        <div className="relative mt-5">
+          <div className="overflow-visible">
+            <div
+              className={`flex transition-transform duration-500 ease-in-out ${!isTransitioning ? 'transition-none' : ''}`}
+              style={{
+                transform: `translateX(-${(currentIndex - 1) * teamWidth}%)`,
+              }}
+            >
+              {infiniteTeamMembers.map((member, index) => (
+                <div key={index} className={`w-full ${isSmallScreen ? 'flex-shrink-0' : 'sm:w-1/3 flex-shrink-0'} px-2`}>
+                  <TeamCard member={member} />
+                </div>
+              ))}
+            </div>
+          </div>
+          <button
+            onClick={prevMember}
+            className="absolute top-1/2 -left-4 transform -translate-y-1/2 rounded-full p-2 shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200 hover:shadow-lg ml-1 bg-white hover:bg-gray-100"
+          >
+            <ChevronLeft className="w-6 h-6 text-gray-600" />
+          </button>
+          <button
+            onClick={nextMember}
+            className="absolute top-1/2 -right-4 transform -translate-y-1/2 rounded-full p-2 shadow-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors duration-200 hover:shadow-lg mr-1 bg-white hover:bg-gray-100"
+          >
+            <ChevronRight className="w-6 h-6 text-gray-600" />
+          </button>
+        </div>
+        <div className="flex justify-center mt-8">
+          {infiniteTeamMembers
+            .slice(1, isLargeScreen ? infiniteTeamMembers.length-1 : infiniteTeamMembers.length)
+            .map((_, index) => (
+              <div
+                key={index}
+                onClick={() => setCurrentIndex(index + 1)}
+                className={`w-2 h-2 mx-1 rounded-full cursor-pointer transition-colors duration-200 ${index + 1 === currentIndex ? 'bg-blue-600' : 'bg-gray-300'}`}
+              />
+            ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TeamSection;
diff --git a/frontend/src/components/about.jsx b/frontend/src/components/about.jsx
deleted file mode 100644
index e165550..0000000
--- a/frontend/src/components/about.jsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import React from 'react'; // Importing React
-import { useNavigate } from 'react-router-dom'; // Importing navigation function
-import backicon from '../assets/svg/backicon.svg'; // Importing back icon asset
-
-// About component
-const About = () => {
-  // UseNavigate hook for navigation
-  const navigate = useNavigate();
-
-  // Function to handle home button click
-  const HomeClick = () => {   
-    // Navigates to the home page when back button is clicked
-    navigate('/'); 
-  };
-
-  // Return JSX structure
-  return (
-    <div 
-      className="flex flex-col items-center p-8 min-h-screen bg-gradient-to-br 
-      from-blue-100 via-blue-200 to-blue-300 text-gray-800">
-      
-      {/* Back button to navigate to home */}
-      <button 
-        onClick={HomeClick} 
-        className="absolute left-4 top-4">
-        <img 
-          src={backicon} 
-          alt="Back" 
-          className="h-12" />
-      </button>
-
-      {/* Main Heading */}
-      <h1 
-        className="text-5xl font-bold text-blue-900 mb-12 text-center shadow-md">
-        ABOUT US
-      </h1>
-
-      {/* Introduction Section */}
-      <p 
-        className="text-xl leading-relaxed text-center max-w-2xl mb-12 px-4">
-        Welcome to 
-        <span className="font-bold text-blue-600"> 
-          StationSaarthi
-        </span>, 
-        your one-stop platform designed to elevate your Indian Railway Station experience. 
-        With cutting-edge technology and user-friendly design, we aim to provide smooth and efficient 
-        travel assistance for all passengers.
-      </p>
-
-      {/* Our Mission Section */}
-      <div 
-        className="w-full max-w-3xl p-8 mb-8 bg-white shadow-lg rounded-lg hover:shadow-2xl 
-        transition-transform transform hover:-translate-y-2 border border-blue-300">
-        <h2 
-          className="text-3xl font-semibold text-blue-800 mb-4 border-b-2 
-          border-blue-400 pb-2">
-          Our Mission
-        </h2>
-        <p 
-          className="text-lg leading-loose">
-          At 
-          <span className="font-bold text-blue-600">
-            StationSaarthi
-          </span>, 
-          our mission is to simplify the railway station experience by integrating advanced technology 
-          and providing real-time, actionable information to every traveler. 
-          We are committed to enhancing travel convenience for all.
-        </p>
-      </div>
-
-      {/* Our Vision Section */}
-      <div 
-        className="w-full max-w-3xl p-8 mb-8 bg-white shadow-lg rounded-lg hover:shadow-2xl 
-        transition-transform transform hover:-translate-y-2 border border-blue-300">
-        <h2 
-          className="text-3xl font-semibold text-blue-800 mb-4 border-b-2 
-          border-blue-400 pb-2">
-          Our Vision
-        </h2>
-        <p 
-          className="text-lg leading-loose">
-          Our vision is a future where every journey is hassle-free. 
-          We strive to create a travel ecosystem that connects passengers, railways, and services 
-          through seamless digital integration.
-        </p>
-      </div>
-
-      {/* What We Offer Section */}
-      <div 
-        className="w-full max-w-3xl p-8 mb-8 bg-white shadow-lg rounded-lg hover:shadow-2xl 
-        transition-transform transform hover:-translate-y-2 border border-blue-300">
-        <h2 
-          className="text-3xl font-semibold text-blue-800 mb-4 border-b-2 
-          border-blue-400 pb-2">
-          What We Offer
-        </h2>
-        <p 
-          className="text-lg leading-loose">
-          With 
-          <span className="font-bold text-blue-600">
-            StationSaarthi
-          </span>, 
-          you get access to:
-          <ul 
-            className="list-disc list-inside mt-4">
-            <li>Real-time train updates and notifications</li>
-            <li>Interactive station maps for easy navigation</li>
-            <li>Personalized travel recommendations</li>
-            <li>Multi-language support to cater to diverse passengers</li>
-            <li>Accessible services for differently-abled travelers</li>
-          </ul>
-        </p>
-      </div>
-
-      {/* Why Choose Us Section */}
-      <div 
-        className="w-full max-w-3xl p-8 mb-8 bg-white shadow-lg rounded-lg hover:shadow-2xl 
-        transition-transform transform hover:-translate-y-2 border border-blue-300">
-        <h2 
-          className="text-3xl font-semibold text-blue-800 mb-4 border-b-2 
-          border-blue-400 pb-2">
-          Why Choose Us?
-        </h2>
-        <p 
-          className="text-lg leading-loose">
-          <span className="font-bold text-blue-600">
-            StationSaarthi
-          </span> 
-          is more than a service; it's a commitment to revolutionizing your railway station experience. 
-          We believe in technology's power to enhance every aspect of your journey, ensuring safety, 
-          comfort, and convenience at every step.
-        </p>
-      </div>
-
-      {/* Our Team Section */}
-      <div 
-        className="w-full max-w-3xl p-8 mb-8 bg-white shadow-lg rounded-lg hover:shadow-2xl 
-        transition-transform transform hover:-translate-y-2 border border-blue-300">
-        <h2 
-          className="text-3xl font-semibold text-blue-800 mb-4 border-b-2 
-          border-blue-400 pb-2">
-          Meet the Team
-        </h2>
-        <p 
-          className="text-lg leading-loose">
-          Our diverse team of professionals is driven by a passion for innovation. 
-          With expertise spanning technology, transportation, and user experience design, 
-          we are dedicated to making railway stations smarter, more efficient, and more 
-          enjoyable for every passenger.
-        </p>
-      </div>
-
-      {/* Footer */}
-      <div 
-        className="text-center mt-12 text-sm text-gray-600">
-        <p>© 2024 StationSaarthi | All rights reserved</p>
-      </div>
-    </div>
-  );
-};
-
-// Exporting the About component for use in other parts of the app
-export default About;