jaanvi/bulk-email
1
0
Fork 0
Code Issues Pull requests 1 Actions Packages Projects Releases Wiki Activity

dev-jaanvi #1

Open
jaanvi wants to merge 155 commits from dev-jaanvi into main
pull from: dev-jaanvi
merge into: jaanvi:main
Conversation 1 Commits 155 Files changed 39 +477 -106
2 changed files with 477 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d8816431ef - Show all commits

BIN
public/developer.png
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 29 KiB

579
src/pages/LandingPage/index.tsx
View file

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