Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revamped About Us Page, Added cards and Carousel with dedicated Sections #443

Merged
merged 1 commit into from
Oct 27, 2024
Merged

Revamped About Us Page, Added cards and Carousel with dedicated Sections #443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading