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.

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

layout #457

Closed
wants to merge 6 commits into from
Closed
Changes from all commits
Commits
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
1 change: 0 additions & 1 deletion backend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion frontend/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions frontend/package.json
Original file line number Diff line number Diff line change
@@ -29,6 +29,7 @@
"react-leaflet": "^4.2.1",
"react-responsive": "^10.0.0",
"react-router-dom": "^6.26.2",
"react-scripts": "^5.0.1",
"shadcn-ui": "^0.2.3",
"sitemap": "^8.0.0",
"socket.io-client": "^4.8.0",
11 changes: 10 additions & 1 deletion frontend/src/Pages/Herosection.css
Original file line number Diff line number Diff line change
@@ -15,7 +15,16 @@ body {
position: relative;
overflow-y: auto;
}

@keyframes fadeInSlideDown {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInSlideUp {
0% { opacity: 0; transform: translateY(20px); }
100% { opacity: 1; transform: translateY(0); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
body {
201 changes: 91 additions & 110 deletions frontend/src/Pages/Herosection.jsx
Original file line number Diff line number Diff line change
@@ -1,65 +1,45 @@
import React from "react";
import React, { useEffect, useState } from "react";
import "./Herosection.css";
import ThemeToggle from "../components/ThemeToggle"
import logo from "../assets/stationsaarthi.svg";
import navigationsvg from "../assets/svg/navigation.svg";
import bookingsvg from "../assets/svg/bookings.svg";
import stationsvg from "../assets/svg/station.svg";
import noticationsvg from "../assets/svg/notification.svg";
import mapsvg from "../assets/svg/3dmap.svg";
import schedulesvg from "../assets/svg/schedule.svg";
import searchsvg from "../assets/svg/search.svg";
import contributorsvg from "../assets/svg/contributor.svg";
import { useNavigate } from "react-router-dom";
import HamburgerMenu from "./hamburger";
import contributorsvg from "../assets/svg/contributor.svg";
import chatbotsvg from "../assets/svg/chatbot.svg";
import Chatbot from "../components/chatbot";
import Navbar from "../components/navbar";
import Language from "../components/language";
import { FaUserAlt } from "react-icons/fa";
import { FaUserAlt, FaArrowUp } from "react-icons/fa";
import Popup from "../components/popup";
import GoogleTranslate from "./GoogleTranslate";

const Herosection = () => {
const navigate = useNavigate();
const [showTopButton, setShowTopButton] = useState(false);

const LoginClick = () => {
navigate("/Login"); // Navigates to the login page
};
const RegisterClick = () => {
navigate("/Register"); // Navigates to the login page
};
const StationCLick = () => {
navigate("/Stations"); // Navigates to the login page
};
const UserCLick = () => {
navigate("/user"); // Navigates to the login page
};
const NavigationCLick = () => {
navigate("/Navigation"); // Navigates to the login page
};
const BookingCLick = () => {
navigate("/Booking"); // Navigates to the login page
};
const MapCLick = () => {
navigate("/3DMap"); // Navigates to the login page
};
const ScheduleCLick = () => {
navigate("/Schedule"); // Navigates to the login page
};
const NotificationCLick = () => {
navigate("/Notification"); // Navigates to the login page
};
const ContributorCLick = () => {
navigate("/contributor"); // Navigates to the login page
const LoginClick = () => navigate("/Login");
const RegisterClick = () => navigate("/Register");
const StationCLick = () => navigate("/Stations");
const UserCLick = () => navigate("/user");
const NavigationCLick = () => navigate("/Navigation");
const BookingCLick = () => navigate("/Booking");
const MapCLick = () => navigate("/3DMap");
const ScheduleCLick = () => navigate("/Schedule");
const NotificationCLick = () => navigate("/Notification");
const ContributorCLick = () => navigate("/contributor");

const scrollToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};

return (
<>
<div className="relative z-50 flex items-center justify-between gap-[88vw]">
<div className="flex flex-col gap-x-2">
<div>
<Navbar />
<ThemeToggle />
</div>

<div className="flex items-center justify-center">
@@ -68,47 +48,60 @@ const Herosection = () => {
</div>

<button type="submit" onClick={UserCLick} className="">
<FaUserAlt className="bg-blue-200 dark:bg-black border-2 text-blue-600 dark:text-white border-blue-200 rounded-full w-[55px] h-[55px] p-2 shadow-lg mr-2" />
<FaUserAlt className="bg-blue-200 border-2 text-blue-600 border-blue-200 rounded-full w-[55px] h-[55px] p-2 shadow-lg mr-2" />
</button>
</div>
</div>
<div
className="translate relative z-50 flex items-center"
style={{ marginLeft: "70px", top: "-100px" }}
>
<GoogleTranslate />
</div>

<h1 className="pl-4 text-4xl font-black text-center text-white">
Namaste !! Yatree{" "}
<Language />

{/* Greeting Text */}
<h1
className="pl-4 text-4xl font-black text-center text-slate-100 mt-12"
style={{
textShadow: "4px 2px 4px rgba(0, 0, 0, 0.7)", // Adds a soft shadow for readability
opacity: 0,
animation: "fadeInSlideDown 1s ease-out forwards", // Subtle animation effect
}}
>
Namaste !! Yatree
</h1>

<div className="relative flex items-center justify-center bg-center bg-cover herosection">
<div className="relative z-10 grid justify-items-center">
<img src={logo} alt="" srcset="" style={{ height: "40vh" }} />
<h1 className="text-2xl font-extrabold text-white text-center">
Station Saarthi : Your Platform Guide
</h1>
<img
src={logo}
alt="Station Saarthi Logo"
style={{ height: "40vh" }}
/>
<h2
className="text-2xl font-extrabold text-zinc-300 text-center mt-4"
style={{
textShadow: "6px 2px 6px rgba(0, 0, 0, 0.7)", // Similar shadow effect for consistency
opacity: 0,
animation: "fadeInSlideUp 1s ease-out forwards",
animationDelay: "0.5s", // Delay for staggered effect
}}
>
Station Saarthi: Your Platform Guide
</h2>
</div>
{/* <img src={bg} alt="whitishbg" style={{ position: "absolute", bottom: 0 }} />
<img src={bgmobile} alt="" style={{ position: "absolute", bottom: 0, zIndex: "10" }} className="md:hidden" /> */}
</div>
<br></br>

<div className="dark:bg-black grid grid-cols-3 gap-2 pb-10 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center ">
<br />

<div className="grid grid-cols-3 gap-2 pb-10 mt-32 md:flex md:flex-row md:justify-evenly justify-items-center ">
<div
type="submit"
onClick={ContributorCLick}
className="fixed flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer left-3 -bottom-8 md:-bottom-5"
className="fixed flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer left-3 -bottom-8 md:-bottom-5"
>
<img
src={contributorsvg}
alt=""
className="
bg-blue-200 border-2 border-blue-100 rounded-full dark:bg-black
w-[64px] h-[64px] p-2
"
className="bg-blue-200 border-2 border-blue-100 rounded-full w-[64px] h-[64px] p-2"
/>
<h1 className="text-xs font-bold text-black dark:text-white">Contributors</h1>
<h1 className="text-xs font-bold text-black">Contributors</h1>
</div>

<div
@@ -119,13 +112,13 @@ const Herosection = () => {
<img
src={navigationsvg}
alt=""
srcset=""
className="dark:bg-black bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
/>
<button className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 dark:bg-white rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">
<h1 className="font-bold text-white dark:text-black">Navigation</h1>
<button className="w-24 py-1 mt-2 font-semibold text-white bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">
<h1 className="font-bold text-white">Navigation</h1>
</button>
</div>

<div
type="submit"
onClick={BookingCLick}
@@ -134,17 +127,13 @@ const Herosection = () => {
<img
src={bookingsvg}
alt=""
srcset=""
className="bg-blue-200 border-2 dark:bg-black border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg "
className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
/>
<button
type="submit"
onClick={BookingCLick}
className="w-20 py-1 mt-2 font-semibold dark:bg-white text-white transition-all duration-300 ease-in-out bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
>
<h1 className="font-bold text-white dark:text-black">Booking</h1>
<button className="w-20 py-1 mt-2 font-semibold text-white bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">
<h1 className="font-bold text-white">Booking</h1>
</button>
</div>

<div
type="submit"
onClick={StationCLick}
@@ -153,31 +142,25 @@ const Herosection = () => {
<img
src={stationsvg}
alt=""
srcset=""
className="bg-blue-200 dark:bg-black border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
/>
<button className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 dark:bg-white rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">
<h1 className="font-bold text-white dark:text-black">Station</h1>
<button className="w-20 py-1 mt-2 font-semibold text-white bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">
<h1 className="font-bold text-white">Station</h1>
</button>
</div>

<div
type="submit"
onClick={MapCLick}
className="flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer transition-all hover:translate-y-2 duration-300 "
className="flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer transition-all hover:translate-y-2 duration-300"
>
<img
src={mapsvg}
alt=""
srcset=""
className="bg-blue-200 dark:bg-black border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
/>{" "}
<button
type="submit"
onClick={MapCLick}
className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 dark:bg-white rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
>
{" "}
<h1 className="font-bold text-white dark:text-black">3D Map</h1>
className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
/>
<button className="w-20 py-1 mt-2 font-semibold text-white bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">
<h1 className="font-bold text-white">3D Map</h1>
</button>
</div>

@@ -189,16 +172,10 @@ const Herosection = () => {
<img
src={schedulesvg}
alt=""
srcset=""
className="bg-blue-200 dark:bg-black border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
/>
<button
type="submit"
onClick={ScheduleCLick}
className="w-20 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 dark:bg-white rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
>
{" "}
<h1 className="font-bold text-white dark:text-black">Schedule</h1>
<button className="w-20 py-1 mt-2 font-semibold text-white bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">
<h1 className="font-bold text-white">Schedule</h1>
</button>
</div>

@@ -210,26 +187,30 @@ const Herosection = () => {
<img
src={noticationsvg}
alt=""
srcset=""
className="bg-blue-200 dark:bg-black border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg "
/>{" "}
<button
type="submit"
onClick={NotificationCLick}
className="w-24 py-1 mt-2 font-semibold text-white transition-all duration-300 ease-in-out bg-blue-500 dark:bg-white rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50"
>
{" "}
<h1 className="font-bold text-white dark:text-black">Notification</h1>
className="bg-blue-200 border-2 border-blue-200 rounded-full w-[64px] h-[64px] p-2 shadow-lg"
/>
<button className="w-24 py-1 mt-2 font-semibold text-white bg-blue-500 rounded-lg shadow-md cursor-pointer hover:bg-blue-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-300 focus:ring-opacity-50">
<h1 className="font-bold text-white">Notification</h1>
</button>
</div>
</div>
<div className="fixed dark:bg-black flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer right-5 -bottom-8 md:-bottom-7">

<div className="fixed flex flex-col items-center justify-center py-8 my-auto rounded-full cursor-pointer right-5 -bottom-8 md:-bottom-7">
<Popup />
<Chatbot />
<h1 className="text-xs font-bold text-black dark:text-white">Saarthi</h1>
<h1 className="text-xs font-bold text-black">Saarthi</h1>
</div>

{showTopButton && (
<button
onClick={scrollToTop}
className="fixed right-4 bottom-16 bg-blue-500 text-white w-12 h-12 rounded-full shadow-md hover:bg-blue-600 transition duration-300 flex items-center justify-center"
>
<FaArrowUp />
</button>
)}
</>
);
};

export default Herosection;
export default Herosection;