dev-jaanvi #1
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
|
|
@ -1,4 +1,3 @@
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
|
|
@ -50,7 +49,12 @@ const LandingPage = () => {
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
background: " #111111",
|
background: {
|
||||||
|
lg: " #111111",
|
||||||
|
sm: " #111111",
|
||||||
|
md: " #111111",
|
||||||
|
xs: " #000000",
|
||||||
|
},
|
||||||
color: "white",
|
color: "white",
|
||||||
fontFamily: "Inter",
|
fontFamily: "Inter",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
@ -126,12 +130,15 @@ const LandingPage = () => {
|
||||||
py: 8,
|
py: 8,
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
fontFamily: "Inter",
|
fontFamily: "Inter",
|
||||||
backgroundImage: 'url("/bgev.svg")',
|
backgroundImage: {
|
||||||
|
lg: 'url("/bgev.svg")',
|
||||||
|
sm: 'url("/bgev.svg")',
|
||||||
|
},
|
||||||
position: "relative",
|
position: "relative",
|
||||||
backgroundSize: "cover", // Ensures the SVG scales to cover the hero section
|
backgroundSize: "cover", // Ensures the SVG scales to cover the hero section
|
||||||
backgroundRepeat: "no-repeat",
|
backgroundRepeat: "no-repeat",
|
||||||
backgroundPosition: "center",
|
backgroundPosition: "center",
|
||||||
width: "100vw", // Takes full viewport width
|
width: "100vw",
|
||||||
maxWidth: "100%",
|
maxWidth: "100%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
@ -140,6 +147,7 @@ const LandingPage = () => {
|
||||||
py: { xs: 4, sm: 6, md: 8 },
|
py: { xs: 4, sm: 6, md: 8 },
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
fontFamily: "Inter",
|
fontFamily: "Inter",
|
||||||
|
width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Grid
|
<Grid
|
||||||
|
|
@ -152,14 +160,18 @@ const LandingPage = () => {
|
||||||
<Grid
|
<Grid
|
||||||
item
|
item
|
||||||
xs={12}
|
xs={12}
|
||||||
|
sm={6}
|
||||||
md={6}
|
md={6}
|
||||||
sx={{
|
sx={{
|
||||||
height: { xs: "auto", md: "400px" },
|
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
textAlign: { xs: "center", md: "justify" }, // Center-align text on smaller screens
|
textAlign: {
|
||||||
px: { xs: 2, sm: 4 }, // Add padding for smaller screens
|
xs: "center",
|
||||||
|
sm: "left",
|
||||||
|
md: "left",
|
||||||
|
},
|
||||||
|
px: { xs: 2, sm: 4, md: 6 },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography
|
||||||
|
|
@ -168,11 +180,10 @@ const LandingPage = () => {
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
fontSize: {
|
fontSize: {
|
||||||
xs: "28px",
|
xs: "28px",
|
||||||
sm: "36px",
|
sm: "32px",
|
||||||
md: "40px",
|
md: "36px",
|
||||||
}, // Adjust font size for responsiveness
|
},
|
||||||
lineHeight: "120%",
|
lineHeight: "120%",
|
||||||
letterSpacing: "0px",
|
|
||||||
marginBottom: "16px",
|
marginBottom: "16px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
@ -193,7 +204,7 @@ const LandingPage = () => {
|
||||||
xs: "16px",
|
xs: "16px",
|
||||||
sm: "18px",
|
sm: "18px",
|
||||||
md: "20px",
|
md: "20px",
|
||||||
}, // Adjust font size for responsiveness
|
},
|
||||||
lineHeight: "140%",
|
lineHeight: "140%",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
@ -217,6 +228,7 @@ const LandingPage = () => {
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
display: {
|
display: {
|
||||||
xs: "none",
|
xs: "none",
|
||||||
|
sm: "block",
|
||||||
md: "block",
|
md: "block",
|
||||||
lg: "block",
|
lg: "block",
|
||||||
},
|
},
|
||||||
|
|
@ -230,12 +242,13 @@ const LandingPage = () => {
|
||||||
<Grid
|
<Grid
|
||||||
item
|
item
|
||||||
xs={12}
|
xs={12}
|
||||||
|
sm={6}
|
||||||
md={6}
|
md={6}
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
justifyContent: "center",
|
justifyContent: "center",
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
px: { xs: 2, sm: 4 }, // Add padding for smaller screens
|
px: { xs: 2, sm: 4, md: 6 },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
|
@ -256,17 +269,54 @@ const LandingPage = () => {
|
||||||
<Container
|
<Container
|
||||||
maxWidth="lg"
|
maxWidth="lg"
|
||||||
sx={{
|
sx={{
|
||||||
width: "100%",
|
|
||||||
position: "relative",
|
position: "relative",
|
||||||
background: "#22496033", // Add transparency to the background
|
width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
|
||||||
|
background: {
|
||||||
|
lg: "#22496033",
|
||||||
|
xs: "none",
|
||||||
|
sm: "#22496033",
|
||||||
|
md: "#22496033",
|
||||||
|
},
|
||||||
borderRadius: "12px",
|
borderRadius: "12px",
|
||||||
py: { xs: 2, md: 4 }, // Adjust vertical padding
|
py: { xs: 2, md: 4 },
|
||||||
px: { xs: 2, md: 3 }, // Adjust horizontal padding
|
px: { xs: 2, md: 3 },
|
||||||
mt: { xs: 8, md: 15 }, // Adjust margin for spacing
|
mt: { xs: 8, md: 15 },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Grid
|
||||||
|
container
|
||||||
|
spacing={2}
|
||||||
|
textAlign="center"
|
||||||
|
sx={{
|
||||||
|
display: { xs: "grid" },
|
||||||
|
gridTemplateColumns: {
|
||||||
|
xs: "repeat(2, 1fr)", // Two items per row on mobile
|
||||||
|
sm: "repeat(4, 1fr)",
|
||||||
|
md: "repeat(4, 1fr)",
|
||||||
|
lg: "repeat(4, 1fr)",
|
||||||
|
},
|
||||||
|
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" }, // Different background for xs
|
||||||
|
padding: { xs: 2, sm: 0 }, // Add padding for mobile mode
|
||||||
|
borderRadius: { xs: "8px" }, // Rounded corners for cards in xs
|
||||||
|
mb: { xs: 2, sm: 0 }, // Add spacing in xs only
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Grid container spacing={2} textAlign="center">
|
|
||||||
<Grid item xs={12} sm={6} md={3}>
|
|
||||||
<Typography
|
<Typography
|
||||||
variant="h3"
|
variant="h3"
|
||||||
color="#52ACDF"
|
color="#52ACDF"
|
||||||
|
|
@ -275,12 +325,12 @@ const LandingPage = () => {
|
||||||
xs: "40px",
|
xs: "40px",
|
||||||
sm: "60px",
|
sm: "60px",
|
||||||
md: "80px",
|
md: "80px",
|
||||||
}} // Adjust font size for responsiveness
|
}}
|
||||||
lineHeight={{
|
lineHeight={{
|
||||||
xs: "48px",
|
xs: "48px",
|
||||||
sm: "80px",
|
sm: "80px",
|
||||||
md: "100px",
|
md: "100px",
|
||||||
}} // Adjust line height
|
}}
|
||||||
fontFamily={"Poppins"}
|
fontFamily={"Poppins"}
|
||||||
>
|
>
|
||||||
50+
|
50+
|
||||||
|
|
@ -294,13 +344,26 @@ const LandingPage = () => {
|
||||||
xs: "12px",
|
xs: "12px",
|
||||||
sm: "14px",
|
sm: "14px",
|
||||||
md: "16px",
|
md: "16px",
|
||||||
}} // Adjust font size for smaller screens
|
}}
|
||||||
lineHeight={"22px"}
|
lineHeight={"22px"}
|
||||||
>
|
>
|
||||||
Successful Digital Transformations
|
Successful Digital Transformations
|
||||||
</Typography>
|
</Typography>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} sm={6} md={3}>
|
|
||||||
|
{/* 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
|
<Typography
|
||||||
variant="h3"
|
variant="h3"
|
||||||
color="#52ACDF"
|
color="#52ACDF"
|
||||||
|
|
@ -334,7 +397,20 @@ const LandingPage = () => {
|
||||||
Client Satisfaction
|
Client Satisfaction
|
||||||
</Typography>
|
</Typography>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} sm={6} md={3}>
|
|
||||||
|
{/* 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
|
<Typography
|
||||||
variant="h3"
|
variant="h3"
|
||||||
color="#52ACDF"
|
color="#52ACDF"
|
||||||
|
|
@ -368,7 +444,20 @@ const LandingPage = () => {
|
||||||
Global Partnerships
|
Global Partnerships
|
||||||
</Typography>
|
</Typography>
|
||||||
</Grid>
|
</Grid>
|
||||||
<Grid item xs={12} sm={6} md={3}>
|
|
||||||
|
{/* 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
|
<Typography
|
||||||
variant="h3"
|
variant="h3"
|
||||||
color="#52ACDF"
|
color="#52ACDF"
|
||||||
|
|
@ -410,9 +499,9 @@ const LandingPage = () => {
|
||||||
maxWidth="lg"
|
maxWidth="lg"
|
||||||
sx={{
|
sx={{
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
width: "100%",
|
width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
|
||||||
borderRadius: "12px",
|
borderRadius: "12px",
|
||||||
background: "#151D21",
|
background: "#22496033",
|
||||||
py: { xs: 3, md: 4 },
|
py: { xs: 3, md: 4 },
|
||||||
px: { xs: 2, md: 3 },
|
px: { xs: 2, md: 3 },
|
||||||
mt: { xs: 6, md: 10 },
|
mt: { xs: 6, md: 10 },
|
||||||
|
|
@ -488,14 +577,19 @@ const LandingPage = () => {
|
||||||
key={index}
|
key={index}
|
||||||
sx={{
|
sx={{
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
mt: { xs: 3, sm: 0 },
|
mt: { xs: 0, sm: 0 },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Card
|
<Card
|
||||||
sx={{
|
sx={{
|
||||||
borderRadius: "18px",
|
borderRadius: "18px",
|
||||||
boxShadow: "0px 4px 30px 0px #0000001A",
|
boxShadow: "0px 4px 30px 0px #0000001A",
|
||||||
background: "#2A3C47",
|
background: {
|
||||||
|
lg: "#2A3C47",
|
||||||
|
md: "#2A3C47",
|
||||||
|
sm: "#2A3C47",
|
||||||
|
xs: "none",
|
||||||
|
},
|
||||||
width: { xs: "100%", md: "220px" },
|
width: { xs: "100%", md: "220px" },
|
||||||
height: { xs: "auto", md: "200px" },
|
height: { xs: "auto", md: "200px" },
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
|
@ -584,11 +678,16 @@ const LandingPage = () => {
|
||||||
maxWidth="lg"
|
maxWidth="lg"
|
||||||
sx={{
|
sx={{
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
width: "100%",
|
width: { lg: "100%", md: "90%", sm: "90%" },
|
||||||
background: "#22496033",
|
background: {
|
||||||
|
xs: "none",
|
||||||
|
lg: "#22496033",
|
||||||
|
sm: "#22496033",
|
||||||
|
md: "#22496033",
|
||||||
|
},
|
||||||
borderRadius: "16px",
|
borderRadius: "16px",
|
||||||
py: { xs: 2, md: 4 },
|
py: { xs: 2, md: 5 },
|
||||||
px: { xs: 1, md: 3 },
|
px: { xs: 2, md: 3 },
|
||||||
mt: { xs: 6, md: 5 },
|
mt: { xs: 6, md: 5 },
|
||||||
fontFamily: "Neue Montreal",
|
fontFamily: "Neue Montreal",
|
||||||
}}
|
}}
|
||||||
|
|
@ -607,7 +706,7 @@ const LandingPage = () => {
|
||||||
src="/iMockup - iPhone.png"
|
src="/iMockup - iPhone.png"
|
||||||
alt="iMockup - iPhone"
|
alt="iMockup - iPhone"
|
||||||
style={{
|
style={{
|
||||||
width: "100%",
|
width: "50%",
|
||||||
maxWidth: "500px",
|
maxWidth: "500px",
|
||||||
borderRadius: "10px",
|
borderRadius: "10px",
|
||||||
}}
|
}}
|
||||||
|
|
@ -618,21 +717,44 @@ const LandingPage = () => {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
pointerEvents: "none",
|
pointerEvents: "none",
|
||||||
|
display: {
|
||||||
|
xs: "none",
|
||||||
|
sm: "block",
|
||||||
|
md: "block",
|
||||||
|
lg: "block",
|
||||||
|
},
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Top Left */}
|
{/* Top Left */}
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: { xs: "8%", md: "5%" },
|
top: {
|
||||||
left: { xs: "10%", md: "5%" },
|
sm: "5%",
|
||||||
transform: "translate(-5%, -5%)",
|
md: "6%",
|
||||||
maxWidth: { xs: "150px", md: "200px" },
|
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: {
|
display: {
|
||||||
xs: "none",
|
xs: "none",
|
||||||
md: "none",
|
sm: "block",
|
||||||
|
md: "block",
|
||||||
lg: "block",
|
lg: "block",
|
||||||
},
|
},
|
||||||
|
textAlign: "left",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
|
@ -644,7 +766,6 @@ const LandingPage = () => {
|
||||||
height: "50px",
|
height: "50px",
|
||||||
top: "100%",
|
top: "100%",
|
||||||
left: "160%",
|
left: "160%",
|
||||||
|
|
||||||
transform:
|
transform:
|
||||||
"translate(-50%, -50%) rotate(-20deg)",
|
"translate(-50%, -50%) rotate(-20deg)",
|
||||||
}}
|
}}
|
||||||
|
|
@ -653,7 +774,11 @@ const LandingPage = () => {
|
||||||
variant="h6"
|
variant="h6"
|
||||||
fontWeight={400}
|
fontWeight={400}
|
||||||
color="#FFFFFF"
|
color="#FFFFFF"
|
||||||
fontSize={{ xs: "16px", md: "20px" }}
|
fontSize={{
|
||||||
|
sm: "13px",
|
||||||
|
md: "18px",
|
||||||
|
lg: "20px",
|
||||||
|
}}
|
||||||
lineHeight="30px"
|
lineHeight="30px"
|
||||||
>
|
>
|
||||||
Seamless Navigation
|
Seamless Navigation
|
||||||
|
|
@ -661,7 +786,11 @@ const LandingPage = () => {
|
||||||
<Typography
|
<Typography
|
||||||
variant="body2"
|
variant="body2"
|
||||||
color="#D9D8D8"
|
color="#D9D8D8"
|
||||||
fontSize={{ xs: "12px", md: "14px" }}
|
fontSize={{
|
||||||
|
sm: "10px",
|
||||||
|
md: "14px",
|
||||||
|
lg: "14px",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Effortlessly locate and access EV charging
|
Effortlessly locate and access EV charging
|
||||||
stations with our intuitive map integration.
|
stations with our intuitive map integration.
|
||||||
|
|
@ -672,14 +801,30 @@ const LandingPage = () => {
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: { xs: "8%", md: "5%" },
|
top: {
|
||||||
right: { xs: "10%", md: "5%" },
|
sm: "1%",
|
||||||
transform: "translate(5%, -5%)",
|
md: "6%",
|
||||||
maxWidth: { xs: "150px", md: "200px" },
|
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",
|
textAlign: "right",
|
||||||
display: {
|
display: {
|
||||||
xs: "none",
|
xs: "none",
|
||||||
md: "none",
|
sm: "block",
|
||||||
|
md: "block",
|
||||||
lg: "block",
|
lg: "block",
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
|
|
@ -691,8 +836,8 @@ const LandingPage = () => {
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
width: "100px",
|
width: "100px",
|
||||||
height: "90px",
|
height: "90px",
|
||||||
top: "195%",
|
top: "135%",
|
||||||
right: "120%",
|
right: "90%",
|
||||||
transform:
|
transform:
|
||||||
"translate(50%, -50%) rotate(9deg)",
|
"translate(50%, -50%) rotate(9deg)",
|
||||||
}}
|
}}
|
||||||
|
|
@ -701,7 +846,11 @@ const LandingPage = () => {
|
||||||
variant="h6"
|
variant="h6"
|
||||||
fontWeight={400}
|
fontWeight={400}
|
||||||
color="#FFFFFF"
|
color="#FFFFFF"
|
||||||
fontSize={{ xs: "16px", md: "20px" }}
|
fontSize={{
|
||||||
|
sm: "13px",
|
||||||
|
md: "18px",
|
||||||
|
lg: "20px",
|
||||||
|
}}
|
||||||
lineHeight="30px"
|
lineHeight="30px"
|
||||||
>
|
>
|
||||||
Live Availability
|
Live Availability
|
||||||
|
|
@ -709,7 +858,11 @@ const LandingPage = () => {
|
||||||
<Typography
|
<Typography
|
||||||
variant="body2"
|
variant="body2"
|
||||||
color="#D9D8D8"
|
color="#D9D8D8"
|
||||||
fontSize={{ xs: "12px", md: "14px" }}
|
fontSize={{
|
||||||
|
sm: "10px",
|
||||||
|
md: "14px",
|
||||||
|
lg: "14px",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
View real-time charger availability to plan your
|
View real-time charger availability to plan your
|
||||||
trips efficiently.
|
trips efficiently.
|
||||||
|
|
@ -720,15 +873,32 @@ const LandingPage = () => {
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
bottom: { xs: "8%", md: "5%" },
|
bottom: {
|
||||||
left: { xs: "10%", md: "5%" },
|
sm: "2%",
|
||||||
transform: "translate(-5%, 5%)",
|
md: "6%",
|
||||||
maxWidth: { xs: "150px", md: "200px" },
|
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: {
|
display: {
|
||||||
xs: "none",
|
xs: "none",
|
||||||
md: "none",
|
sm: "block",
|
||||||
|
md: "block",
|
||||||
lg: "block",
|
lg: "block",
|
||||||
},
|
},
|
||||||
|
textAlign: "left",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
|
@ -736,10 +906,10 @@ const LandingPage = () => {
|
||||||
alt="Arrow"
|
alt="Arrow"
|
||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
width: "60px",
|
width: "53px",
|
||||||
height: "50px",
|
height: "60px",
|
||||||
bottom: "80%",
|
bottom: "80%",
|
||||||
left: "120%",
|
left: "125%",
|
||||||
transform:
|
transform:
|
||||||
"translate(-50%, 50%) rotate(25deg)",
|
"translate(-50%, 50%) rotate(25deg)",
|
||||||
}}
|
}}
|
||||||
|
|
@ -748,15 +918,22 @@ const LandingPage = () => {
|
||||||
variant="h6"
|
variant="h6"
|
||||||
fontWeight={400}
|
fontWeight={400}
|
||||||
color="#FFFFFF"
|
color="#FFFFFF"
|
||||||
fontSize={{ xs: "16px", md: "20px" }}
|
fontSize={{
|
||||||
lineHeight="30px"
|
sm: "13px",
|
||||||
|
md: "18px",
|
||||||
|
lg: "20px",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Smart Recommendations
|
Smart Recommendations
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography
|
<Typography
|
||||||
variant="body2"
|
variant="body2"
|
||||||
color="#D9D8D8"
|
color="#D9D8D8"
|
||||||
fontSize={{ xs: "12px", md: "14px" }}
|
fontSize={{
|
||||||
|
sm: "10px",
|
||||||
|
md: "14px",
|
||||||
|
lg: "14px",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Get personalized station suggestions based on
|
Get personalized station suggestions based on
|
||||||
your location and usage patterns.
|
your location and usage patterns.
|
||||||
|
|
@ -767,14 +944,30 @@ const LandingPage = () => {
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
bottom: { xs: "8%", md: "5%" },
|
bottom: {
|
||||||
right: { xs: "10%", md: "5%" },
|
sm: "5%",
|
||||||
transform: "translate(5%, 5%)",
|
md: "6%",
|
||||||
maxWidth: { xs: "150px", md: "200px" },
|
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",
|
textAlign: "right",
|
||||||
display: {
|
display: {
|
||||||
xs: "none",
|
xs: "none",
|
||||||
md: "none",
|
sm: "block",
|
||||||
|
md: "block",
|
||||||
lg: "block",
|
lg: "block",
|
||||||
},
|
},
|
||||||
}}
|
}}
|
||||||
|
|
@ -787,7 +980,7 @@ const LandingPage = () => {
|
||||||
width: "60px",
|
width: "60px",
|
||||||
height: "50px",
|
height: "50px",
|
||||||
bottom: "100%",
|
bottom: "100%",
|
||||||
right: "200%",
|
right: "140%",
|
||||||
transform:
|
transform:
|
||||||
"translate(50%, 50%) rotate(-200deg)",
|
"translate(50%, 50%) rotate(-200deg)",
|
||||||
}}
|
}}
|
||||||
|
|
@ -796,7 +989,11 @@ const LandingPage = () => {
|
||||||
variant="h6"
|
variant="h6"
|
||||||
fontWeight={400}
|
fontWeight={400}
|
||||||
color="#FFFFFF"
|
color="#FFFFFF"
|
||||||
fontSize={{ xs: "16px", md: "20px" }}
|
fontSize={{
|
||||||
|
sm: "13px",
|
||||||
|
md: "18px",
|
||||||
|
lg: "20px",
|
||||||
|
}}
|
||||||
lineHeight="30px"
|
lineHeight="30px"
|
||||||
>
|
>
|
||||||
Secure Payments
|
Secure Payments
|
||||||
|
|
@ -804,7 +1001,160 @@ const LandingPage = () => {
|
||||||
<Typography
|
<Typography
|
||||||
variant="body2"
|
variant="body2"
|
||||||
color="#D9D8D8"
|
color="#D9D8D8"
|
||||||
fontSize={{ xs: "12px", md: "14px" }}
|
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
|
Make hassle-free transactions with our secure
|
||||||
payment gateway.
|
payment gateway.
|
||||||
|
|
@ -819,55 +1169,62 @@ const LandingPage = () => {
|
||||||
maxWidth="lg"
|
maxWidth="lg"
|
||||||
sx={{
|
sx={{
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
width: "100%",
|
width: { lg: "100%", md: "90%", sm: "90%" },
|
||||||
background: `linear-gradient(0deg, rgba(34, 73, 96, 0.2), rgba(34, 73, 96, 0.2)),
|
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%)`,
|
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 },
|
py: { xs: 3, sm: 4, md: 5 },
|
||||||
px: { xs: 2, sm: 3, md: 4 },
|
px: { xs: 2, sm: 3, md: 4 },
|
||||||
mt: { xs: 6, sm: 8, md: 10 },
|
mt: { xs: 6, sm: 8, md: 10 },
|
||||||
height: { xs: "auto", md: "261px" },
|
// height: { xs: "auto", lg: "261px", sm: "208px" },
|
||||||
fontFamily: "Neue Montreal",
|
fontFamily: "Neue Montreal",
|
||||||
|
borderRadius: "12px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
py: 4,
|
py: 2,
|
||||||
px: 3,
|
px: 2,
|
||||||
mt: 2,
|
mt: 0,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
display: "flex",
|
display: { lg: "flex", sm: "block", md: "flex" },
|
||||||
flexDirection: { xs: "column", sm: "row" },
|
flexDirection: {
|
||||||
|
xs: "column",
|
||||||
|
sm: "row",
|
||||||
|
lg: "row",
|
||||||
|
},
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
justifyContent: "center",
|
justifyContent: "space-between",
|
||||||
gap: { xs: 2, sm: 3 },
|
gap: { xs: 2, sm: 3 },
|
||||||
position: "relative",
|
position: "relative",
|
||||||
|
mt: { md: 0 },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* Image Container to Ensure Images Stay Fixed */}
|
{/* Image Container to Ensure Images Stay Fixed */}
|
||||||
<Box
|
<Box
|
||||||
sx={{
|
sx={{
|
||||||
position: "relative",
|
position: "relative",
|
||||||
display: "inline-block",
|
display: {
|
||||||
width: { xs: "70px", sm: "80px" },
|
lg: "inline-block",
|
||||||
height: { xs: "70px", sm: "80px" },
|
md: "inline-block",
|
||||||
}}
|
sm: "none",
|
||||||
>
|
},
|
||||||
{/* Primary Image */}
|
width: { sm: "80px", md: "50x" },
|
||||||
<img
|
height: { sm: "80px", md: "50x" },
|
||||||
src="/dev-bg.png"
|
mt: { md: 0 },
|
||||||
alt="Developer"
|
|
||||||
style={{
|
|
||||||
width: "100%",
|
|
||||||
height: "100%",
|
|
||||||
position: "absolute",
|
|
||||||
zIndex: 1,
|
zIndex: 1,
|
||||||
}}
|
}}
|
||||||
/>
|
>
|
||||||
{/* Overlapping Image */}
|
|
||||||
<img
|
<img
|
||||||
src="/developer.png"
|
src="/developer.png"
|
||||||
alt="developer"
|
alt="developer"
|
||||||
|
|
@ -875,9 +1232,6 @@ const LandingPage = () => {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
position: "absolute",
|
position: "absolute",
|
||||||
top: { xs: "5px", sm: "1px" },
|
|
||||||
left: { xs: "5px", sm: "10px" },
|
|
||||||
zIndex: 2,
|
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
@ -886,11 +1240,12 @@ const LandingPage = () => {
|
||||||
<Typography
|
<Typography
|
||||||
fontFamily={"Inter"}
|
fontFamily={"Inter"}
|
||||||
fontWeight={500}
|
fontWeight={500}
|
||||||
fontSize={{ xs: "20px", sm: "30px", md: "40px" }}
|
fontSize={{ xs: "20px", sm: "24px", md: "27px" }}
|
||||||
lineHeight={"130%"}
|
lineHeight={"130%"}
|
||||||
color="#FFFFFF"
|
color="#FFFFFF"
|
||||||
sx={{
|
sx={{
|
||||||
mt: { xs: 2, sm: 0 },
|
mt: { xs: 2, sm: 0 },
|
||||||
|
zIndex: 3,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Get your application developed by our certified
|
Get your application developed by our certified
|
||||||
|
|
@ -903,8 +1258,18 @@ const LandingPage = () => {
|
||||||
backgroundColor: "#52ACDF",
|
backgroundColor: "#52ACDF",
|
||||||
color: "white",
|
color: "white",
|
||||||
borderRadius: "8px",
|
borderRadius: "8px",
|
||||||
width: { xs: "140px", sm: "160px" },
|
width: {
|
||||||
height: { xs: "45px", sm: "54px" },
|
xs: "121px",
|
||||||
|
sm: "140px",
|
||||||
|
lg: "182px",
|
||||||
|
md: "200px",
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
xs: "42px",
|
||||||
|
sm: "34px",
|
||||||
|
lg: "54px",
|
||||||
|
md: "44px",
|
||||||
|
},
|
||||||
fontFamily: "Neue Montreal",
|
fontFamily: "Neue Montreal",
|
||||||
textTransform: "none",
|
textTransform: "none",
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
|
|
@ -916,7 +1281,7 @@ const LandingPage = () => {
|
||||||
lineHeight: "100%",
|
lineHeight: "100%",
|
||||||
padding: { xs: "10px", sm: "16px" },
|
padding: { xs: "10px", sm: "16px" },
|
||||||
"&:hover": { backgroundColor: "#439BC1" },
|
"&:hover": { backgroundColor: "#439BC1" },
|
||||||
mt: { xs: 2, sm: 0 },
|
mt: { xs: 2, sm: 2 },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Schedule a Call
|
Schedule a Call
|
||||||
|
|
@ -929,14 +1294,20 @@ const LandingPage = () => {
|
||||||
maxWidth="lg"
|
maxWidth="lg"
|
||||||
sx={{
|
sx={{
|
||||||
textAlign: "center",
|
textAlign: "center",
|
||||||
width: "100%",
|
width: { lg: "100%", xs: "90%" },
|
||||||
background: "#22496033",
|
background: {
|
||||||
|
lg: "#22496033",
|
||||||
|
md: "none",
|
||||||
|
xs: "#151D21",
|
||||||
|
sm: "none",
|
||||||
|
},
|
||||||
py: { xs: 3, sm: 4, md: 5 },
|
py: { xs: 3, sm: 4, md: 5 },
|
||||||
px: { xs: 2, sm: 3, md: 4 },
|
px: { xs: 2, sm: 3, md: 4 },
|
||||||
mt: { xs: 6, sm: 8, md: 10 },
|
mt: { xs: 6, sm: 8, md: 10 },
|
||||||
mb: { xs: 6, sm: 8, md: 10 },
|
mb: { xs: 6, sm: 8, md: 10 },
|
||||||
fontFamily: "Neue Montreal",
|
fontFamily: "Neue Montreal",
|
||||||
height: "auto",
|
height: "auto",
|
||||||
|
borderRadius: { xs: "8px", lg: "12px" },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Box
|
<Box
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue