dev-jaanvi #1
BIN
public/home-img.png
Normal file
BIN
public/home-img.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1 MiB |
BIN
public/home.png
Normal file
BIN
public/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 120 KiB |
228
src/pages/LandingPage/index.tsx
Normal file
228
src/pages/LandingPage/index.tsx
Normal file
|
|
@ -0,0 +1,228 @@
|
||||||
|
import React from "react";
|
||||||
|
import { Box, Button, Container, Grid, Typography } from "@mui/material";
|
||||||
|
import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation
|
||||||
|
import SearchIcon from "@mui/icons-material/Search";
|
||||||
|
|
||||||
|
const LandingPage = () => {
|
||||||
|
const navigate = useNavigate(); // Initialize useNavigate
|
||||||
|
|
||||||
|
const handleLoginClick = () => {
|
||||||
|
navigate("/login"); // Redirect to the login page
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
background: `radial-gradient(circle at top left, rgba(125,121,87,0.992) 10%, rgba(67,92,106,0.8) 40%, rgba(55,47,65,1) 70%),
|
||||||
|
radial-gradient(circle at center, rgba(109, 102, 102, 0.7) 0%, rgba(67,92,106,0.6) 50%, rgba(55,47,65,0.9) 70%),
|
||||||
|
radial-gradient(circle at top right, rgba(61,42,87,1) 30%, rgba(55,47,65,1) 60%, rgba(40,40,40,0.8) 70%)`,
|
||||||
|
color: "white",
|
||||||
|
minHeight: "100vh",
|
||||||
|
fontFamily: "Inter",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Navbar */}
|
||||||
|
<Box
|
||||||
|
component="nav"
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "space-between",
|
||||||
|
alignItems: "center",
|
||||||
|
py: 2,
|
||||||
|
px: 3,
|
||||||
|
maxWidth: "1200px",
|
||||||
|
mx: "auto",
|
||||||
|
fontFamily: "Inter",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/evLogo.png"
|
||||||
|
alt="DigiEv Logo"
|
||||||
|
style={{ height: "40px" }}
|
||||||
|
/>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SearchIcon
|
||||||
|
sx={{
|
||||||
|
fontSize: "24px",
|
||||||
|
cursor: "pointer",
|
||||||
|
color: "#364056",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="button" // Changed to "button" to avoid form submission
|
||||||
|
onClick={handleLoginClick} // Trigger navigation on click
|
||||||
|
sx={{
|
||||||
|
backgroundColor: "#52ACDF",
|
||||||
|
color: "white",
|
||||||
|
borderRadius: "8px",
|
||||||
|
width: "117px",
|
||||||
|
fontFamily: "Inter",
|
||||||
|
textTransform: "none",
|
||||||
|
"&:hover": { backgroundColor: "#439BC1" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Login
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Hero Section */}
|
||||||
|
<Container
|
||||||
|
sx={{
|
||||||
|
py: 8,
|
||||||
|
justifyContent: "space-between",
|
||||||
|
fontFamily: "Inter",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Grid
|
||||||
|
container
|
||||||
|
spacing={4}
|
||||||
|
alignItems="center"
|
||||||
|
justifyContent="center"
|
||||||
|
>
|
||||||
|
{/* Text Section */}
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={12}
|
||||||
|
md={6}
|
||||||
|
sx={{
|
||||||
|
height: { xs: "auto", md: "400px" },
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Inter",
|
||||||
|
fontWeight: 600,
|
||||||
|
fontSize: "40px",
|
||||||
|
lineHeight: "120%",
|
||||||
|
letterSpacing: "0px",
|
||||||
|
marginBottom: "16px",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Empower Your Business With{" "}
|
||||||
|
<Box component="span" sx={{ color: "#52ACDF" }}>
|
||||||
|
Digital Evolution
|
||||||
|
</Box>
|
||||||
|
.
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
sx={{
|
||||||
|
fontFamily: "Inter",
|
||||||
|
color: "#CACACA",
|
||||||
|
marginBottom: "24px",
|
||||||
|
fontWeight: 400,
|
||||||
|
fontSize: "20px",
|
||||||
|
lineHeight: "120%",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
DigiEv is your one-stop destination for transforming
|
||||||
|
challenges into opportunities through innovative
|
||||||
|
technology, seamless integration, and expert
|
||||||
|
solutions.
|
||||||
|
</Typography>
|
||||||
|
<Button
|
||||||
|
type="submit"
|
||||||
|
sx={{
|
||||||
|
backgroundColor: "#52ACDF",
|
||||||
|
color: "white",
|
||||||
|
borderRadius: "8px",
|
||||||
|
width: "117px",
|
||||||
|
textTransform: "none",
|
||||||
|
fontFamily: "Inter",
|
||||||
|
"&:hover": { backgroundColor: "#439BC1" },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Get in Touch
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
{/* Image Section */}
|
||||||
|
<Grid
|
||||||
|
item
|
||||||
|
xs={12}
|
||||||
|
md={6}
|
||||||
|
sx={{
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src="/home.png"
|
||||||
|
alt="Dashboard"
|
||||||
|
style={{
|
||||||
|
maxHeight: "100%",
|
||||||
|
maxWidth: "100%",
|
||||||
|
objectFit: "contain",
|
||||||
|
borderRadius: "8px",
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Container>
|
||||||
|
<Container maxWidth="lg">
|
||||||
|
{" "}
|
||||||
|
<Grid container spacing={4} textAlign="center">
|
||||||
|
{" "}
|
||||||
|
<Grid item xs={12} md={4}>
|
||||||
|
{" "}
|
||||||
|
<Typography
|
||||||
|
variant="h3"
|
||||||
|
fontWeight="bold"
|
||||||
|
color="#1e88e5"
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
50+{" "}
|
||||||
|
</Typography>{" "}
|
||||||
|
<Typography variant="body2" color="gray">
|
||||||
|
{" "}
|
||||||
|
Successful Digital Transformations{" "}
|
||||||
|
</Typography>{" "}
|
||||||
|
</Grid>{" "}
|
||||||
|
<Grid item xs={12} md={4}>
|
||||||
|
{" "}
|
||||||
|
<Typography
|
||||||
|
variant="h3"
|
||||||
|
fontWeight="bold"
|
||||||
|
color="#1e88e5"
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
100%{" "}
|
||||||
|
</Typography>{" "}
|
||||||
|
<Typography variant="body2" color="gray">
|
||||||
|
{" "}
|
||||||
|
Client Satisfaction{" "}
|
||||||
|
</Typography>{" "}
|
||||||
|
</Grid>{" "}
|
||||||
|
<Grid item xs={12} md={4}>
|
||||||
|
{" "}
|
||||||
|
<Typography
|
||||||
|
variant="h3"
|
||||||
|
fontWeight="bold"
|
||||||
|
color="#1e88e5"
|
||||||
|
>
|
||||||
|
{" "}
|
||||||
|
20+{" "}
|
||||||
|
</Typography>{" "}
|
||||||
|
<Typography variant="body2" color="gray">
|
||||||
|
{" "}
|
||||||
|
Global Partnerships{" "}
|
||||||
|
</Typography>{" "}
|
||||||
|
</Grid>{" "}
|
||||||
|
</Grid>{" "}
|
||||||
|
</Container>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LandingPage;
|
||||||
|
|
@ -9,6 +9,7 @@ import DashboardLayout from "./layouts/DashboardLayout";
|
||||||
// Page imports
|
// Page imports
|
||||||
const Login = lazy(() => import("./pages/Auth/Login"));
|
const Login = lazy(() => import("./pages/Auth/Login"));
|
||||||
const SignUp = lazy(() => import("./pages/Auth/SignUp"));
|
const SignUp = lazy(() => import("./pages/Auth/SignUp"));
|
||||||
|
const LandingPage = lazy(() => import("./pages/LandingPage"));
|
||||||
const Dashboard = lazy(() => import("./pages/Dashboard"));
|
const Dashboard = lazy(() => import("./pages/Dashboard"));
|
||||||
const VehicleList = lazy(() => import("./pages/VehicleList"));
|
const VehicleList = lazy(() => import("./pages/VehicleList"));
|
||||||
const AdminList = lazy(() => import("./pages/AdminList"));
|
const AdminList = lazy(() => import("./pages/AdminList"));
|
||||||
|
|
@ -43,7 +44,7 @@ export default function AppRouter() {
|
||||||
<Suspense fallback={<LoadingComponent />}>
|
<Suspense fallback={<LoadingComponent />}>
|
||||||
<BaseRoutes>
|
<BaseRoutes>
|
||||||
{/* Default Route */}
|
{/* Default Route */}
|
||||||
<Route element={<Navigate to="/login" replace />} index />
|
<Route path="" element={<LandingPage /> } />
|
||||||
|
|
||||||
{/* Auth Routes */}
|
{/* Auth Routes */}
|
||||||
<Route path="">
|
<Route path="">
|
||||||
|
|
@ -110,7 +111,11 @@ export default function AppRouter() {
|
||||||
/>
|
/>
|
||||||
<Route
|
<Route
|
||||||
path="external-station-list"
|
path="external-station-list"
|
||||||
element={<ProtectedRoute component={<ExternalStationList />} />}
|
element={
|
||||||
|
<ProtectedRoute
|
||||||
|
component={<ExternalStationList />}
|
||||||
|
/>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</Route>
|
</Route>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue