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
|
||||
const Login = lazy(() => import("./pages/Auth/Login"));
|
||||
const SignUp = lazy(() => import("./pages/Auth/SignUp"));
|
||||
const LandingPage = lazy(() => import("./pages/LandingPage"));
|
||||
const Dashboard = lazy(() => import("./pages/Dashboard"));
|
||||
const VehicleList = lazy(() => import("./pages/VehicleList"));
|
||||
const AdminList = lazy(() => import("./pages/AdminList"));
|
||||
|
|
@ -43,7 +44,7 @@ export default function AppRouter() {
|
|||
<Suspense fallback={<LoadingComponent />}>
|
||||
<BaseRoutes>
|
||||
{/* Default Route */}
|
||||
<Route element={<Navigate to="/login" replace />} index />
|
||||
<Route path="" element={<LandingPage /> } />
|
||||
|
||||
{/* Auth Routes */}
|
||||
<Route path="">
|
||||
|
|
@ -110,7 +111,11 @@ export default function AppRouter() {
|
|||
/>
|
||||
<Route
|
||||
path="external-station-list"
|
||||
element={<ProtectedRoute component={<ExternalStationList />} />}
|
||||
element={
|
||||
<ProtectedRoute
|
||||
component={<ExternalStationList />}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Route>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue