Skip to content

Commit

Permalink
Merge pull request #443 from IkkiOcean/aboutus
Browse files Browse the repository at this point in the history 
Revamped About Us Page, Added cards and Carousel with dedicated Sections
  • Loading branch information
@dhairyagothi
dhairyagothi authored Oct 27, 2024
2 parents e29fc0f + 5be2f65 commit f2b9c5e
Show file tree
Hide file tree
Showing 5 changed files with 258 additions and 295 deletions.
2 changes: 2 additions & 0 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
3 changes: 1 addition & 2 deletions frontend/src/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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 />} />
Expand Down
226 changes: 96 additions & 130 deletions frontend/src/Pages/AboutUs.jsx
View file
Original file line number Diff line number Diff line change
@@ -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();

Expand All @@ -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">
Expand All @@ -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;
Loading

0 comments on commit f2b9c5e

Please sign in to comment.