1388 lines
30 KiB
TypeScript
1388 lines
30 KiB
TypeScript
import {
|
|
Box,
|
|
Button,
|
|
Card,
|
|
CardContent,
|
|
Container,
|
|
Grid,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import { useNavigate } from "react-router-dom";
|
|
import SearchIcon from "@mui/icons-material/Search";
|
|
import EvStationIcon from "@mui/icons-material/EvStation";
|
|
import BatteryChargingFullIcon from "@mui/icons-material/BatteryChargingFull";
|
|
import LocationOnIcon from "@mui/icons-material/LocationOn";
|
|
const features = [
|
|
{
|
|
icon: <EvStationIcon fontSize="large" />,
|
|
title: "Seamless Charging Experience",
|
|
description:
|
|
"Find and book EV charging stations effortlessly with DigiEv's smart platform.",
|
|
},
|
|
{
|
|
icon: <BatteryChargingFullIcon fontSize="large" />,
|
|
title: "Real-Time Availability",
|
|
description:
|
|
"Check live station availability and optimize your route for an efficient charge.",
|
|
},
|
|
{
|
|
icon: <LocationOnIcon fontSize="large" />,
|
|
title: "Widespread Network",
|
|
description:
|
|
"Access a vast network of EV stations across multiple locations with ease.",
|
|
},
|
|
{
|
|
icon: <SearchIcon fontSize="large" />,
|
|
title: "Smart Search Functionality",
|
|
description:
|
|
"Find EV stations nearby with advanced filters for location, availability, and pricing.",
|
|
},
|
|
];
|
|
|
|
const LandingPage = () => {
|
|
const navigate = useNavigate();
|
|
|
|
const handleLoginClick = () => {
|
|
navigate("/login");
|
|
};
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
background: {
|
|
lg: " #111111",
|
|
sm: " #111111",
|
|
md: " #111111",
|
|
xs: " #000000",
|
|
},
|
|
color: "white",
|
|
fontFamily: "Gilory",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
}}
|
|
>
|
|
{/* Navbar */}
|
|
<Box
|
|
component="nav"
|
|
sx={{
|
|
position: "fixed",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
zIndex: 1100,
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
py: 2,
|
|
px: { xs: 2, sm: 3, md: 6 },
|
|
// background:
|
|
// "linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(30, 44, 47, 0.2) 100%)",
|
|
background: "#141615",
|
|
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
|
|
fontFamily: "Gilory",
|
|
}}
|
|
>
|
|
<img
|
|
src="/evLogo.png"
|
|
alt="DigiEv Logo"
|
|
style={{
|
|
height: "40px",
|
|
width: "auto",
|
|
}}
|
|
/>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: { xs: 1, sm: 2 },
|
|
}}
|
|
>
|
|
<SearchIcon
|
|
sx={{
|
|
fontSize: { xs: "20px", sm: "24px" },
|
|
cursor: "pointer",
|
|
color: "#364056",
|
|
}}
|
|
/>
|
|
<Button
|
|
type="button"
|
|
onClick={handleLoginClick}
|
|
sx={{
|
|
backgroundColor: "#52ACDF",
|
|
color: "#FFFFFF",
|
|
borderRadius: "6px",
|
|
width: { xs: "90px", sm: "117px" },
|
|
fontFamily: "Gilory",
|
|
textTransform: "none",
|
|
"&:hover": { backgroundColor: "#439BC1" },
|
|
fontWeight: 500,
|
|
fontSize: { xs: "14px", sm: "16px" },
|
|
}}
|
|
>
|
|
Login
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
|
|
{/* Hero Section */}
|
|
<Box
|
|
sx={{
|
|
py: 8,
|
|
justifyContent: "space-between",
|
|
fontFamily: "Gilory",
|
|
backgroundImage: {
|
|
lg: 'url("/bgev.svg")',
|
|
sm: 'url("/bgev.svg")',
|
|
},
|
|
position: "relative",
|
|
backgroundSize: "cover", // Ensures the SVG scales to cover the hero section
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundPosition: "center",
|
|
width: "100vw",
|
|
maxWidth: "100%",
|
|
}}
|
|
>
|
|
<Container
|
|
sx={{
|
|
py: { xs: 4, sm: 6, md: 8 },
|
|
justifyContent: "space-between",
|
|
fontFamily: "Gilory",
|
|
width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
|
|
}}
|
|
>
|
|
<Grid
|
|
container
|
|
spacing={4}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
>
|
|
{/* Text Section */}
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sm={6}
|
|
md={6}
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
justifyContent: "center",
|
|
textAlign: {
|
|
xs: "center",
|
|
sm: "left",
|
|
md: "left",
|
|
},
|
|
px: { xs: 2, sm: 4, md: 6 },
|
|
}}
|
|
>
|
|
<Typography
|
|
sx={{
|
|
fontFamily: "Gilory",
|
|
fontWeight: 600,
|
|
fontSize: {
|
|
xs: "28px",
|
|
sm: "32px",
|
|
md: "36px",
|
|
},
|
|
lineHeight: "120%",
|
|
marginBottom: "16px",
|
|
}}
|
|
>
|
|
Empower Your Business With{" "}
|
|
<Box component="span" sx={{ color: "#52ACDF" }}>
|
|
Digital Evolution
|
|
</Box>
|
|
.
|
|
</Typography>
|
|
<Typography
|
|
variant="body1"
|
|
sx={{
|
|
fontFamily: "Gilory",
|
|
color: "#CACACA",
|
|
marginBottom: "24px",
|
|
fontWeight: 400,
|
|
fontSize: {
|
|
xs: "16px",
|
|
sm: "18px",
|
|
md: "20px",
|
|
},
|
|
lineHeight: "140%",
|
|
}}
|
|
>
|
|
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",
|
|
borderRadius: "6px",
|
|
color: "#FFFFFF",
|
|
width: { xs: "120px", md: "140px" },
|
|
height: "48px",
|
|
textTransform: "none",
|
|
fontFamily: "Gilory",
|
|
"&:hover": { backgroundColor: "#439BC1" },
|
|
fontSize: { xs: "14px", md: "16px" },
|
|
fontWeight: 500,
|
|
display: {
|
|
xs: "none",
|
|
sm: "block",
|
|
md: "block",
|
|
lg: "block",
|
|
},
|
|
}}
|
|
>
|
|
Get in Touch
|
|
</Button>
|
|
</Grid>
|
|
|
|
{/* Image Section */}
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sm={6}
|
|
md={6}
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
px: { xs: 2, sm: 4, md: 6 },
|
|
}}
|
|
>
|
|
<img
|
|
src="/hero.png"
|
|
alt="Dashboard"
|
|
style={{
|
|
maxHeight: "100%",
|
|
maxWidth: "100%",
|
|
objectFit: "contain",
|
|
borderRadius: "8px",
|
|
}}
|
|
/>
|
|
</Grid>
|
|
</Grid>
|
|
</Container>
|
|
|
|
{/* Statistics Section */}
|
|
<Container
|
|
maxWidth="lg"
|
|
sx={{
|
|
position: "relative",
|
|
width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
|
|
background: {
|
|
lg: "#22496033",
|
|
xs: "none",
|
|
sm: "#22496033",
|
|
md: "#22496033",
|
|
},
|
|
borderRadius: "12px",
|
|
py: { xs: 2, md: 4 },
|
|
px: { xs: 2, md: 3 },
|
|
mt: { xs: 8, md: 15 },
|
|
}}
|
|
>
|
|
<Grid
|
|
container
|
|
spacing={2}
|
|
textAlign="center"
|
|
sx={{
|
|
display: { xs: "grid", },
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
gridTemplateColumns: {
|
|
xs: "repeat(2, 1fr)", // Two items per row on mobile
|
|
sm: "repeat(4, 1fr)",
|
|
md: "repeat(4, 1fr)",
|
|
lg: "repeat(4, 2fr)",
|
|
},
|
|
gap: { xs: 2, sm: 5, md: 5 },
|
|
flexDirection: {
|
|
xs: "column", // Stacked cards in xs
|
|
sm: "row", // Row layout for sm and above
|
|
md: "row",
|
|
lg: "row",
|
|
},
|
|
}}
|
|
>
|
|
{/* Grid 1 */}
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sm={6}
|
|
md={3}
|
|
sx={{
|
|
background: { xs: "#22496033", sm: "none" },
|
|
padding: { xs: 2, sm: 0 },
|
|
borderRadius: { xs: "8px" },
|
|
mb: { xs: 2, sm: 0 },
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h3"
|
|
color="#52ACDF"
|
|
fontWeight={600}
|
|
fontSize={{
|
|
xs: "40px",
|
|
sm: "60px",
|
|
md: "80px",
|
|
}}
|
|
lineHeight={{
|
|
xs: "48px",
|
|
sm: "80px",
|
|
md: "100px",
|
|
}}
|
|
fontFamily={"Gilory"}
|
|
>
|
|
50+
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
color="#FFFFFF"
|
|
fontFamily={"Gilory"}
|
|
fontWeight={400}
|
|
fontSize={{
|
|
xs: "12px",
|
|
sm: "14px",
|
|
md: "16px",
|
|
}}
|
|
lineHeight={"22px"}
|
|
>
|
|
Successful Digital Transformations
|
|
</Typography>
|
|
</Grid>
|
|
|
|
{/* Grid 2 */}
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sm={6}
|
|
md={3}
|
|
sx={{
|
|
background: { xs: "#22496033", sm: "none" },
|
|
padding: { xs: 2, sm: 0 },
|
|
borderRadius: { xs: "8px" },
|
|
mb: { xs: 2, sm: 0 },
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h3"
|
|
color="#52ACDF"
|
|
fontWeight={600}
|
|
fontSize={{
|
|
xs: "40px",
|
|
sm: "60px",
|
|
md: "80px",
|
|
}}
|
|
lineHeight={{
|
|
xs: "48px",
|
|
sm: "80px",
|
|
md: "100px",
|
|
}}
|
|
fontFamily={"Gilory"}
|
|
>
|
|
100%
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
color="#FFFFFF"
|
|
fontFamily={"Gilory"}
|
|
fontWeight={400}
|
|
fontSize={{
|
|
xs: "12px",
|
|
sm: "14px",
|
|
md: "16px",
|
|
}}
|
|
lineHeight={"22px"}
|
|
>
|
|
Client Satisfaction
|
|
</Typography>
|
|
</Grid>
|
|
|
|
{/* Grid 3 */}
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sm={6}
|
|
md={3}
|
|
sx={{
|
|
background: { xs: "#22496033", sm: "none" },
|
|
padding: { xs: 2, sm: 0 },
|
|
borderRadius: { xs: "8px" },
|
|
mb: { xs: 2, sm: 0 },
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h3"
|
|
color="#52ACDF"
|
|
fontWeight={600}
|
|
fontSize={{
|
|
xs: "40px",
|
|
sm: "60px",
|
|
md: "80px",
|
|
}}
|
|
lineHeight={{
|
|
xs: "48px",
|
|
sm: "80px",
|
|
md: "100px",
|
|
}}
|
|
fontFamily={"Gilory"}
|
|
>
|
|
20+
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
color="#FFFFFF"
|
|
fontFamily={"Gilory"}
|
|
fontWeight={400}
|
|
fontSize={{
|
|
xs: "12px",
|
|
sm: "14px",
|
|
md: "16px",
|
|
}}
|
|
lineHeight={"22px"}
|
|
>
|
|
Global Partnerships
|
|
</Typography>
|
|
</Grid>
|
|
|
|
{/* Grid 4 */}
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sm={6}
|
|
md={3}
|
|
sx={{
|
|
background: { xs: "#22496033", sm: "none" },
|
|
padding: { xs: 2, sm: 0 },
|
|
borderRadius: { xs: "8px" },
|
|
mb: { xs: 2, sm: 0 },
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h3"
|
|
color="#52ACDF"
|
|
fontWeight={600}
|
|
fontSize={{
|
|
xs: "40px",
|
|
sm: "60px",
|
|
md: "80px",
|
|
}}
|
|
lineHeight={{
|
|
xs: "48px",
|
|
sm: "80px",
|
|
md: "100px",
|
|
}}
|
|
fontFamily={"Gilory"}
|
|
>
|
|
10+
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
color="#FFFFFF"
|
|
fontFamily={"Gilory"}
|
|
fontWeight={400}
|
|
fontSize={{
|
|
xs: "12px",
|
|
sm: "14px",
|
|
md: "16px",
|
|
}}
|
|
lineHeight={"22px"}
|
|
>
|
|
Years of Innovation
|
|
</Typography>
|
|
</Grid>
|
|
</Grid>
|
|
</Container>
|
|
</Box>
|
|
|
|
<Container
|
|
maxWidth="lg"
|
|
sx={{
|
|
textAlign: "center",
|
|
width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
|
|
borderRadius: "12px",
|
|
background: "#22496033",
|
|
py: { xs: 3, md: 4 },
|
|
px: { xs: 2, md: 3 },
|
|
mt: { xs: 6, md: 10 },
|
|
}}
|
|
>
|
|
{/* Welcome Message */}
|
|
<Typography
|
|
variant="h4"
|
|
fontWeight={600}
|
|
fontFamily={"Gilory"}
|
|
fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
|
|
lineHeight={"100%"}
|
|
color="#FFFFFF"
|
|
mt={3}
|
|
>
|
|
Welcome to <span style={{ color: "#52ACDF" }}>DigiEv</span>{" "}
|
|
- Your EV Charging Partner
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="h6"
|
|
mt={1}
|
|
fontWeight={600}
|
|
fontSize={{ xs: "16px", sm: "18px", md: "20px" }}
|
|
>
|
|
Simplifying Electric Vehicle Charging
|
|
</Typography>
|
|
|
|
{/* Description */}
|
|
<Typography
|
|
variant="body1"
|
|
mt={2}
|
|
maxWidth="600px"
|
|
mx="auto"
|
|
fontFamily={"Gilory"}
|
|
fontSize={{ xs: "14px", sm: "16px", md: "20px" }}
|
|
fontWeight={400}
|
|
lineHeight={"140%"}
|
|
color="#D9D8D8"
|
|
>
|
|
DigiEv helps EV owners locate, book, and manage their
|
|
charging needs efficiently. With our intuitive platform, you
|
|
can ensure a smooth and hassle-free charging experience.
|
|
</Typography>
|
|
|
|
{/* Image Section */}
|
|
<Box mt={5}>
|
|
<img
|
|
src="/tablet-img.png"
|
|
alt="DigiEv Dashboard"
|
|
style={{
|
|
width: "80%",
|
|
maxWidth: "800px",
|
|
borderRadius: "10px",
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Features Section */}
|
|
<Grid
|
|
container
|
|
spacing={4}
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
mt={2}
|
|
>
|
|
{features.map((feature, index) => (
|
|
<Grid
|
|
item
|
|
xs={12}
|
|
sm={6}
|
|
md={3}
|
|
key={index}
|
|
sx={{
|
|
textAlign: "center",
|
|
mt: { xs: 0, sm: 0 },
|
|
}}
|
|
>
|
|
<Card
|
|
sx={{
|
|
borderRadius: "18px",
|
|
boxShadow: "0px 4px 30px 0px #0000001A",
|
|
background: {
|
|
lg: "#2A3C47",
|
|
md: "#2A3C47",
|
|
sm: "#2A3C47",
|
|
xs: "none",
|
|
},
|
|
width: { xs: "100%", md: "220px" },
|
|
height: { xs: "auto", md: "200px" },
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
<CardContent
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
height: "100%",
|
|
textAlign: "center",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
mt: 1,
|
|
mb: 2,
|
|
color: "#D9D8D8",
|
|
}}
|
|
>
|
|
{feature.icon}
|
|
</Box>
|
|
<Typography
|
|
variant="h6"
|
|
sx={{
|
|
color: "#52ACDF",
|
|
fontFamily: "Gilory",
|
|
fontWeight: 600,
|
|
fontSize: {
|
|
xs: "16px",
|
|
md: "18px",
|
|
},
|
|
lineHeight: "160%",
|
|
}}
|
|
>
|
|
{feature.title}
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
color: "#D9D8D8",
|
|
fontFamily: "Gilory",
|
|
fontWeight: 400,
|
|
fontSize: {
|
|
xs: "12px",
|
|
md: "14px",
|
|
},
|
|
lineHeight: "140%",
|
|
mt: 1,
|
|
}}
|
|
>
|
|
{feature.description}
|
|
</Typography>
|
|
</CardContent>
|
|
</Card>
|
|
</Grid>
|
|
))}
|
|
</Grid>
|
|
</Container>
|
|
<Typography
|
|
variant="h4"
|
|
fontWeight={700}
|
|
fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
|
|
sx={{
|
|
textAlign: "center",
|
|
width: "100%",
|
|
|
|
borderRadius: "16px",
|
|
|
|
mt: { xs: 6, md: 10 },
|
|
fontFamily: "Neue Montreal",
|
|
}}
|
|
>
|
|
Key Features
|
|
</Typography>
|
|
<Container
|
|
maxWidth="lg"
|
|
sx={{
|
|
textAlign: "center",
|
|
width: { lg: "100%", md: "90%", sm: "90%" },
|
|
background: {
|
|
xs: "none",
|
|
lg: "#22496033",
|
|
sm: "#22496033",
|
|
md: "#22496033",
|
|
},
|
|
borderRadius: "16px",
|
|
py: { xs: 2, md: 5 },
|
|
px: { xs: 2, md: 3 },
|
|
mt: { xs: 6, md: 5 },
|
|
fontFamily: "Neue Montreal",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: { xs: "column", md: "row" },
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
position: "relative",
|
|
gap: { xs: 2, md: 4 },
|
|
}}
|
|
>
|
|
<img
|
|
src="/iMockup - iPhone.png"
|
|
alt="iMockup - iPhone"
|
|
style={{
|
|
width: "50%",
|
|
maxWidth: "500px",
|
|
borderRadius: "10px",
|
|
}}
|
|
/>
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
width: "100%",
|
|
height: "100%",
|
|
pointerEvents: "none",
|
|
display: {
|
|
xs: "none",
|
|
sm: "block",
|
|
md: "block",
|
|
lg: "block",
|
|
},
|
|
}}
|
|
>
|
|
{/* Top Left */}
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
top: {
|
|
sm: "5%",
|
|
md: "6%",
|
|
lg: "5%",
|
|
},
|
|
left: {
|
|
sm: "2%",
|
|
md: "2%",
|
|
lg: "5%",
|
|
},
|
|
transform: {
|
|
md: "translate(-10%, -10%)",
|
|
lg: "translate(-5%, -5%)",
|
|
},
|
|
maxWidth: {
|
|
sm: "140px",
|
|
md: "200px",
|
|
lg: "200px",
|
|
},
|
|
display: {
|
|
xs: "none",
|
|
sm: "block",
|
|
md: "block",
|
|
lg: "block",
|
|
},
|
|
textAlign: "left",
|
|
}}
|
|
>
|
|
<img
|
|
src="/vector-arrows.png"
|
|
alt="Arrow"
|
|
style={{
|
|
position: "absolute",
|
|
width: "60px",
|
|
height: "50px",
|
|
top: "100%",
|
|
left: "160%",
|
|
transform:
|
|
"translate(-50%, -50%) rotate(-20deg)",
|
|
}}
|
|
/>
|
|
<Typography
|
|
variant="h6"
|
|
fontWeight={400}
|
|
color="#FFFFFF"
|
|
fontSize={{
|
|
sm: "13px",
|
|
md: "18px",
|
|
lg: "20px",
|
|
}}
|
|
lineHeight="30px"
|
|
>
|
|
Seamless Navigation
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
color="#D9D8D8"
|
|
fontSize={{
|
|
sm: "10px",
|
|
md: "14px",
|
|
lg: "14px",
|
|
}}
|
|
>
|
|
Effortlessly locate and access EV charging
|
|
stations with our intuitive map integration.
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Top Right */}
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
top: {
|
|
sm: "1%",
|
|
md: "6%",
|
|
lg: "5%",
|
|
},
|
|
right: {
|
|
sm: "1%",
|
|
md: "3%",
|
|
lg: "5%",
|
|
},
|
|
transform: {
|
|
md: "translate(10%, -10%)",
|
|
lg: "translate(5%, -5%)",
|
|
},
|
|
maxWidth: {
|
|
sm: "180px",
|
|
md: "200px",
|
|
lg: "200px",
|
|
},
|
|
textAlign: "right",
|
|
display: {
|
|
xs: "none",
|
|
sm: "block",
|
|
md: "block",
|
|
lg: "block",
|
|
},
|
|
}}
|
|
>
|
|
<img
|
|
src="/arrow-top-right.png"
|
|
alt="Arrow"
|
|
style={{
|
|
position: "absolute",
|
|
width: "100px",
|
|
height: "90px",
|
|
top: "135%",
|
|
right: "90%",
|
|
transform:
|
|
"translate(50%, -50%) rotate(9deg)",
|
|
}}
|
|
/>
|
|
<Typography
|
|
variant="h6"
|
|
fontWeight={400}
|
|
color="#FFFFFF"
|
|
fontSize={{
|
|
sm: "13px",
|
|
md: "18px",
|
|
lg: "20px",
|
|
}}
|
|
lineHeight="30px"
|
|
>
|
|
Live Availability
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
color="#D9D8D8"
|
|
fontSize={{
|
|
sm: "10px",
|
|
md: "14px",
|
|
lg: "14px",
|
|
}}
|
|
>
|
|
View real-time charger availability to plan your
|
|
trips efficiently.
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Bottom Left */}
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
bottom: {
|
|
sm: "2%",
|
|
md: "6%",
|
|
lg: "5%",
|
|
},
|
|
left: {
|
|
sm: "2%",
|
|
md: "3%",
|
|
lg: "5%",
|
|
},
|
|
transform: {
|
|
md: "translate(-18%, 10%)",
|
|
lg: "translate(-5%, 5%)",
|
|
},
|
|
maxWidth: {
|
|
sm: "120px",
|
|
md: "200px",
|
|
lg: "200px",
|
|
},
|
|
display: {
|
|
xs: "none",
|
|
sm: "block",
|
|
md: "block",
|
|
lg: "block",
|
|
},
|
|
textAlign: "left",
|
|
}}
|
|
>
|
|
<img
|
|
src="/left-bottom-arrow.png"
|
|
alt="Arrow"
|
|
style={{
|
|
position: "absolute",
|
|
width: "53px",
|
|
height: "60px",
|
|
bottom: "80%",
|
|
left: "125%",
|
|
transform:
|
|
"translate(-50%, 50%) rotate(25deg)",
|
|
}}
|
|
/>
|
|
<Typography
|
|
variant="h6"
|
|
fontWeight={400}
|
|
color="#FFFFFF"
|
|
fontSize={{
|
|
sm: "13px",
|
|
md: "18px",
|
|
lg: "20px",
|
|
}}
|
|
>
|
|
Smart Recommendations
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
color="#D9D8D8"
|
|
fontSize={{
|
|
sm: "10px",
|
|
md: "14px",
|
|
lg: "14px",
|
|
}}
|
|
>
|
|
Get personalized station suggestions based on
|
|
your location and usage patterns.
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Bottom Right */}
|
|
<Box
|
|
sx={{
|
|
position: "absolute",
|
|
bottom: {
|
|
sm: "5%",
|
|
md: "6%",
|
|
lg: "5%",
|
|
},
|
|
right: {
|
|
sm: "2%",
|
|
md: "3%",
|
|
lg: "5%",
|
|
},
|
|
transform: {
|
|
md: "translate(10%, 10%)",
|
|
lg: "translate(5%, 5%)",
|
|
},
|
|
maxWidth: {
|
|
sm: "180px",
|
|
md: "200px",
|
|
lg: "200px",
|
|
},
|
|
textAlign: "right",
|
|
display: {
|
|
xs: "none",
|
|
sm: "block",
|
|
md: "block",
|
|
lg: "block",
|
|
},
|
|
}}
|
|
>
|
|
<img
|
|
src="/vector-arrows.png"
|
|
alt="Arrow"
|
|
style={{
|
|
position: "absolute",
|
|
width: "60px",
|
|
height: "50px",
|
|
bottom: "100%",
|
|
right: "140%",
|
|
transform:
|
|
"translate(50%, 50%) rotate(-200deg)",
|
|
}}
|
|
/>
|
|
<Typography
|
|
variant="h6"
|
|
fontWeight={400}
|
|
color="#FFFFFF"
|
|
fontSize={{
|
|
sm: "13px",
|
|
md: "18px",
|
|
lg: "20px",
|
|
}}
|
|
lineHeight="30px"
|
|
>
|
|
Secure Payments
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
color="#D9D8D8"
|
|
fontSize={{
|
|
sm: "10px",
|
|
md: "14px",
|
|
lg: "14px",
|
|
}}
|
|
>
|
|
Make hassle-free transactions with our secure
|
|
payment gateway.
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
display: { xs: "grid", sm: "none" },
|
|
gridTemplateColumns: "1fr", // Column-wise layout
|
|
gap: 2,
|
|
mt: 4,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
{/* Card 1 */}
|
|
<Box
|
|
sx={{
|
|
background: "#151D21",
|
|
boxShadow: "0px 0px 16px 0px #00000014",
|
|
width: "358px",
|
|
height: "100px",
|
|
padding: "20px",
|
|
borderRadius: "4px",
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h6"
|
|
fontWeight={500}
|
|
fontSize="20px"
|
|
color="#52ACDF"
|
|
lineHeight={"100%"}
|
|
mt={2}
|
|
textAlign={"left"}
|
|
>
|
|
Seamless Navigation
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
fontSize="14px"
|
|
fontWeight={400}
|
|
color="#D9D8D8"
|
|
mt={2}
|
|
textAlign={"left"}
|
|
>
|
|
Effortlessly locate and access EV charging
|
|
stations with our intuitive map integration.
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Card 2 */}
|
|
<Box
|
|
sx={{
|
|
background: "#151D21",
|
|
boxShadow: "0px 0px 16px 0px #00000014",
|
|
width: "358px",
|
|
height: "100px",
|
|
padding: "20px",
|
|
borderRadius: "4px",
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h6"
|
|
fontWeight={500}
|
|
fontSize="20px"
|
|
color="#52ACDF"
|
|
lineHeight={"100%"}
|
|
mt={2}
|
|
textAlign={"left"}
|
|
>
|
|
Live Availability
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
fontSize="14px"
|
|
fontWeight={400}
|
|
color="#D9D8D8"
|
|
mt={2}
|
|
textAlign={"left"}
|
|
>
|
|
View real-time charger availability to plan your
|
|
trips efficiently.
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Card 3 */}
|
|
<Box
|
|
sx={{
|
|
background: "#151D21",
|
|
boxShadow: "0px 0px 16px 0px #00000014",
|
|
width: "358px",
|
|
height: "100px",
|
|
padding: "20px",
|
|
borderRadius: "4px",
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h6"
|
|
fontWeight={500}
|
|
fontSize="20px"
|
|
color="#52ACDF"
|
|
lineHeight={"100%"}
|
|
mt={2}
|
|
textAlign={"left"}
|
|
>
|
|
Smart Recommendations
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
fontSize="14px"
|
|
fontWeight={400}
|
|
color="#D9D8D8"
|
|
mt={2}
|
|
textAlign={"left"}
|
|
>
|
|
Get personalized station suggestions based on
|
|
your location and usage patterns.
|
|
</Typography>
|
|
</Box>
|
|
|
|
{/* Card 4 */}
|
|
<Box
|
|
sx={{
|
|
background: "#151D21",
|
|
boxShadow: "0px 0px 16px 0px #00000014",
|
|
width: "358px",
|
|
height: "100px",
|
|
padding: "20px",
|
|
borderRadius: "4px",
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h6"
|
|
fontWeight={500}
|
|
fontSize="20px"
|
|
color="#52ACDF"
|
|
lineHeight={"100%"}
|
|
mt={2}
|
|
textAlign={"left"}
|
|
>
|
|
Secure Payments
|
|
</Typography>
|
|
<Typography
|
|
variant="body2"
|
|
fontSize="14px"
|
|
fontWeight={400}
|
|
color="#D9D8D8"
|
|
mt={2}
|
|
textAlign={"left"}
|
|
>
|
|
Make hassle-free transactions with our secure
|
|
payment gateway.
|
|
</Typography>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
|
|
{/* Footer */}
|
|
<Container
|
|
maxWidth="lg"
|
|
sx={{
|
|
textAlign: "center",
|
|
width: { lg: "100%", md: "90%", sm: "90%" },
|
|
background: {
|
|
lg: `linear-gradient(0deg, rgba(34, 73, 96, 0.2), rgba(34, 73, 96, 0.2)),
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%)`,
|
|
xs: "none",
|
|
sm: `linear-gradient(0deg, rgba(34, 73, 96, 0.2), rgba(34, 73, 96, 0.2)),
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%)`,
|
|
md: `linear-gradient(0deg, rgba(34, 73, 96, 0.2), rgba(34, 73, 96, 0.2)),
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100%)`,
|
|
},
|
|
py: { xs: 3, sm: 4, md: 5 },
|
|
px: { xs: 2, sm: 3, md: 4 },
|
|
mt: { xs: 6, sm: 8, md: 10 },
|
|
// height: { xs: "auto", lg: "261px", sm: "208px" },
|
|
fontFamily: "Neue Montreal",
|
|
borderRadius: "12px",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
textAlign: "center",
|
|
py: 2,
|
|
px: 2,
|
|
mt: 0,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
display: { lg: "flex", sm: "block", md: "flex" },
|
|
flexDirection: {
|
|
xs: "column",
|
|
sm: "row",
|
|
lg: "row",
|
|
},
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
gap: { xs: 2, sm: 3 },
|
|
position: "relative",
|
|
mt: { md: 0 },
|
|
}}
|
|
>
|
|
{/* Image Container to Ensure Images Stay Fixed */}
|
|
<Box
|
|
sx={{
|
|
position: "relative",
|
|
display: {
|
|
lg: "inline-block",
|
|
md: "inline-block",
|
|
sm: "none",
|
|
},
|
|
width: { sm: "80px", md: "50x" },
|
|
height: { sm: "80px", md: "50x" },
|
|
mt: { md: 0 },
|
|
zIndex: 1,
|
|
}}
|
|
>
|
|
<img
|
|
src="/developer.png"
|
|
alt="developer"
|
|
style={{
|
|
width: "100%",
|
|
height: "100%",
|
|
position: "absolute",
|
|
}}
|
|
/>
|
|
</Box>
|
|
|
|
{/* Text */}
|
|
<Typography
|
|
fontFamily={"Gilory"}
|
|
fontWeight={500}
|
|
fontSize={{ xs: "20px", sm: "24px", md: "27px" }}
|
|
lineHeight={"130%"}
|
|
color="#FFFFFF"
|
|
sx={{
|
|
mt: { xs: 2, sm: 0 },
|
|
zIndex: 3,
|
|
}}
|
|
>
|
|
Get your application developed by our certified
|
|
experts today!
|
|
</Typography>
|
|
|
|
{/* Button */}
|
|
<Button
|
|
sx={{
|
|
backgroundColor: "#52ACDF",
|
|
color: "white",
|
|
borderRadius: "8px",
|
|
width: {
|
|
xs: "121px",
|
|
sm: "140px",
|
|
lg: "182px",
|
|
md: "200px",
|
|
},
|
|
height: {
|
|
xs: "42px",
|
|
sm: "34px",
|
|
lg: "54px",
|
|
md: "44px",
|
|
},
|
|
fontFamily: "Neue Montreal",
|
|
textTransform: "none",
|
|
fontWeight: 500,
|
|
fontSize: {
|
|
xs: "14px",
|
|
sm: "16px",
|
|
md: "18px",
|
|
},
|
|
lineHeight: "100%",
|
|
padding: { xs: "10px", sm: "16px" },
|
|
"&:hover": { backgroundColor: "#439BC1" },
|
|
mt: { xs: 2, sm: 2 },
|
|
}}
|
|
>
|
|
Schedule a Call
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
|
|
<Container
|
|
maxWidth="lg"
|
|
sx={{
|
|
textAlign: "center",
|
|
width: { lg: "100%", xs: "90%" },
|
|
background: {
|
|
lg: "#22496033",
|
|
md: "none",
|
|
xs: "#151D21",
|
|
sm: "none",
|
|
},
|
|
py: { xs: 3, sm: 4, md: 5 },
|
|
px: { xs: 2, sm: 3, md: 4 },
|
|
mt: { xs: 6, sm: 8, md: 10 },
|
|
mb: { xs: 6, sm: 8, md: 10 },
|
|
fontFamily: "Neue Montreal",
|
|
height: "auto",
|
|
borderRadius: { xs: "8px", lg: "12px" },
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
textAlign: "center",
|
|
py: 4,
|
|
px: 3,
|
|
mt: 2,
|
|
fontFamily: "Neue Montreal",
|
|
}}
|
|
>
|
|
<Typography
|
|
variant="h5"
|
|
fontWeight={600}
|
|
fontFamily={"Gilory"}
|
|
fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
|
|
lineHeight={"120%"}
|
|
>
|
|
Your{" "}
|
|
<span style={{ color: "#52ACDF" }}>
|
|
Perfect Experience
|
|
</span>
|
|
, Just a Tap Away!
|
|
</Typography>
|
|
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
my: { xs: 2, sm: 3 },
|
|
fontFamily: "Inter",
|
|
fontWeight: 400,
|
|
fontSize: { xs: "14px", sm: "18px", md: "20px" },
|
|
color: "#FFFFFF",
|
|
}}
|
|
>
|
|
Discover the smartest way to charge your electric
|
|
vehicle. DigiEV's cutting-edge platform empowers you
|
|
with effortless access to EV charging stations,
|
|
real-time availability updates, and powerful tools to
|
|
plan your journey. Make every drive electric, efficient,
|
|
and extraordinary.
|
|
</Typography>
|
|
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: { xs: "column", sm: "row" },
|
|
justifyContent: "center",
|
|
gap: { xs: 2, sm: 4 },
|
|
mt: { xs: 2, sm: 3 },
|
|
}}
|
|
>
|
|
<img
|
|
src="/google_play.png"
|
|
alt="Google Play"
|
|
style={{
|
|
width: { xs: "100px", sm: "120px" },
|
|
}}
|
|
/>
|
|
|
|
<img
|
|
src="/apple_store.png"
|
|
alt="App Store"
|
|
sx={{
|
|
width: { xs: "100px", sm: "120px" }, // Responsive width values
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default LandingPage;
|