dev-jaanvi #1
|
@ -56,7 +56,7 @@ const LandingPage = () => {
|
||||||
xs: " #000000",
|
xs: " #000000",
|
||||||
},
|
},
|
||||||
color: "white",
|
color: "white",
|
||||||
fontFamily: "Inter",
|
fontFamily: "Gilory",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
}}
|
}}
|
||||||
|
@ -79,7 +79,7 @@ const LandingPage = () => {
|
||||||
// "linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(30, 44, 47, 0.2) 100%)",
|
// "linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(30, 44, 47, 0.2) 100%)",
|
||||||
background: "#141615",
|
background: "#141615",
|
||||||
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
|
boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
|
||||||
fontFamily: "Inter",
|
fontFamily: "Gilory",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
@ -112,7 +112,7 @@ const LandingPage = () => {
|
||||||
color: "#FFFFFF",
|
color: "#FFFFFF",
|
||||||
borderRadius: "6px",
|
borderRadius: "6px",
|
||||||
width: { xs: "90px", sm: "117px" },
|
width: { xs: "90px", sm: "117px" },
|
||||||
fontFamily: "Inter",
|
fontFamily: "Gilory",
|
||||||
textTransform: "none",
|
textTransform: "none",
|
||||||
"&:hover": { backgroundColor: "#439BC1" },
|
"&:hover": { backgroundColor: "#439BC1" },
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
|
@ -129,7 +129,7 @@ const LandingPage = () => {
|
||||||
sx={{
|
sx={{
|
||||||
py: 8,
|
py: 8,
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
fontFamily: "Inter",
|
fontFamily: "Gilory",
|
||||||
backgroundImage: {
|
backgroundImage: {
|
||||||
lg: 'url("/bgev.svg")',
|
lg: 'url("/bgev.svg")',
|
||||||
sm: 'url("/bgev.svg")',
|
sm: 'url("/bgev.svg")',
|
||||||
|
@ -146,7 +146,7 @@ const LandingPage = () => {
|
||||||
sx={{
|
sx={{
|
||||||
py: { xs: 4, sm: 6, md: 8 },
|
py: { xs: 4, sm: 6, md: 8 },
|
||||||
justifyContent: "space-between",
|
justifyContent: "space-between",
|
||||||
fontFamily: "Inter",
|
fontFamily: "Gilory",
|
||||||
width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
|
width: { lg: "100%", md: "90%", sm: "90%", xs: "90%" },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
@ -176,7 +176,7 @@ const LandingPage = () => {
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography
|
||||||
sx={{
|
sx={{
|
||||||
fontFamily: "Inter",
|
fontFamily: "Gilory",
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
fontSize: {
|
fontSize: {
|
||||||
xs: "28px",
|
xs: "28px",
|
||||||
|
@ -196,7 +196,7 @@ const LandingPage = () => {
|
||||||
<Typography
|
<Typography
|
||||||
variant="body1"
|
variant="body1"
|
||||||
sx={{
|
sx={{
|
||||||
fontFamily: "Inter",
|
fontFamily: "Gilory",
|
||||||
color: "#CACACA",
|
color: "#CACACA",
|
||||||
marginBottom: "24px",
|
marginBottom: "24px",
|
||||||
fontWeight: 400,
|
fontWeight: 400,
|
||||||
|
@ -222,7 +222,7 @@ const LandingPage = () => {
|
||||||
width: { xs: "120px", md: "140px" },
|
width: { xs: "120px", md: "140px" },
|
||||||
height: "48px",
|
height: "48px",
|
||||||
textTransform: "none",
|
textTransform: "none",
|
||||||
fontFamily: "Inter",
|
fontFamily: "Gilory",
|
||||||
"&:hover": { backgroundColor: "#439BC1" },
|
"&:hover": { backgroundColor: "#439BC1" },
|
||||||
fontSize: { xs: "14px", md: "16px" },
|
fontSize: { xs: "14px", md: "16px" },
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
|
@ -288,14 +288,16 @@ const LandingPage = () => {
|
||||||
spacing={2}
|
spacing={2}
|
||||||
textAlign="center"
|
textAlign="center"
|
||||||
sx={{
|
sx={{
|
||||||
display: { xs: "grid" },
|
display: { xs: "grid", },
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
gridTemplateColumns: {
|
gridTemplateColumns: {
|
||||||
xs: "repeat(2, 1fr)", // Two items per row on mobile
|
xs: "repeat(2, 1fr)", // Two items per row on mobile
|
||||||
sm: "repeat(4, 1fr)",
|
sm: "repeat(4, 1fr)",
|
||||||
md: "repeat(4, 1fr)",
|
md: "repeat(4, 1fr)",
|
||||||
lg: "repeat(4, 1fr)",
|
lg: "repeat(4, 2fr)",
|
||||||
},
|
},
|
||||||
gap: { xs: 2, sm: 5,md:5 },
|
gap: { xs: 2, sm: 5, md: 5 },
|
||||||
flexDirection: {
|
flexDirection: {
|
||||||
xs: "column", // Stacked cards in xs
|
xs: "column", // Stacked cards in xs
|
||||||
sm: "row", // Row layout for sm and above
|
sm: "row", // Row layout for sm and above
|
||||||
|
@ -311,10 +313,10 @@ const LandingPage = () => {
|
||||||
sm={6}
|
sm={6}
|
||||||
md={3}
|
md={3}
|
||||||
sx={{
|
sx={{
|
||||||
background: { xs: "#22496033", sm: "none" }, // Different background for xs
|
background: { xs: "#22496033", sm: "none" },
|
||||||
padding: { xs: 2, sm: 0 }, // Add padding for mobile mode
|
padding: { xs: 2, sm: 0 },
|
||||||
borderRadius: { xs: "8px" }, // Rounded corners for cards in xs
|
borderRadius: { xs: "8px" },
|
||||||
mb: { xs: 2, sm: 0 }, // Add spacing in xs only
|
mb: { xs: 2, sm: 0 },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Typography
|
<Typography
|
||||||
|
@ -331,14 +333,14 @@ const LandingPage = () => {
|
||||||
sm: "80px",
|
sm: "80px",
|
||||||
md: "100px",
|
md: "100px",
|
||||||
}}
|
}}
|
||||||
fontFamily={"Poppins"}
|
fontFamily={"Gilory"}
|
||||||
>
|
>
|
||||||
50+
|
50+
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography
|
<Typography
|
||||||
variant="body2"
|
variant="body2"
|
||||||
color="#FFFFFF"
|
color="#FFFFFF"
|
||||||
fontFamily={"Inter"}
|
fontFamily={"Gilory"}
|
||||||
fontWeight={400}
|
fontWeight={400}
|
||||||
fontSize={{
|
fontSize={{
|
||||||
xs: "12px",
|
xs: "12px",
|
||||||
|
@ -378,14 +380,14 @@ const LandingPage = () => {
|
||||||
sm: "80px",
|
sm: "80px",
|
||||||
md: "100px",
|
md: "100px",
|
||||||
}}
|
}}
|
||||||
fontFamily={"Poppins"}
|
fontFamily={"Gilory"}
|
||||||
>
|
>
|
||||||
100%
|
100%
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography
|
<Typography
|
||||||
variant="body2"
|
variant="body2"
|
||||||
color="#FFFFFF"
|
color="#FFFFFF"
|
||||||
fontFamily={"Inter"}
|
fontFamily={"Gilory"}
|
||||||
fontWeight={400}
|
fontWeight={400}
|
||||||
fontSize={{
|
fontSize={{
|
||||||
xs: "12px",
|
xs: "12px",
|
||||||
|
@ -425,14 +427,14 @@ const LandingPage = () => {
|
||||||
sm: "80px",
|
sm: "80px",
|
||||||
md: "100px",
|
md: "100px",
|
||||||
}}
|
}}
|
||||||
fontFamily={"Poppins"}
|
fontFamily={"Gilory"}
|
||||||
>
|
>
|
||||||
20+
|
20+
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography
|
<Typography
|
||||||
variant="body2"
|
variant="body2"
|
||||||
color="#FFFFFF"
|
color="#FFFFFF"
|
||||||
fontFamily={"Inter"}
|
fontFamily={"Gilory"}
|
||||||
fontWeight={400}
|
fontWeight={400}
|
||||||
fontSize={{
|
fontSize={{
|
||||||
xs: "12px",
|
xs: "12px",
|
||||||
|
@ -472,14 +474,14 @@ const LandingPage = () => {
|
||||||
sm: "80px",
|
sm: "80px",
|
||||||
md: "100px",
|
md: "100px",
|
||||||
}}
|
}}
|
||||||
fontFamily={"Poppins"}
|
fontFamily={"Gilory"}
|
||||||
>
|
>
|
||||||
10+
|
10+
|
||||||
</Typography>
|
</Typography>
|
||||||
<Typography
|
<Typography
|
||||||
variant="body2"
|
variant="body2"
|
||||||
color="#FFFFFF"
|
color="#FFFFFF"
|
||||||
fontFamily={"Inter"}
|
fontFamily={"Gilory"}
|
||||||
fontWeight={400}
|
fontWeight={400}
|
||||||
fontSize={{
|
fontSize={{
|
||||||
xs: "12px",
|
xs: "12px",
|
||||||
|
@ -511,7 +513,7 @@ const LandingPage = () => {
|
||||||
<Typography
|
<Typography
|
||||||
variant="h4"
|
variant="h4"
|
||||||
fontWeight={600}
|
fontWeight={600}
|
||||||
fontFamily={"Inter"}
|
fontFamily={"Gilory"}
|
||||||
fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
|
fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
|
||||||
lineHeight={"100%"}
|
lineHeight={"100%"}
|
||||||
color="#FFFFFF"
|
color="#FFFFFF"
|
||||||
|
@ -536,7 +538,7 @@ const LandingPage = () => {
|
||||||
mt={2}
|
mt={2}
|
||||||
maxWidth="600px"
|
maxWidth="600px"
|
||||||
mx="auto"
|
mx="auto"
|
||||||
fontFamily={"Inter"}
|
fontFamily={"Gilory"}
|
||||||
fontSize={{ xs: "14px", sm: "16px", md: "20px" }}
|
fontSize={{ xs: "14px", sm: "16px", md: "20px" }}
|
||||||
fontWeight={400}
|
fontWeight={400}
|
||||||
lineHeight={"140%"}
|
lineHeight={"140%"}
|
||||||
|
@ -625,7 +627,7 @@ const LandingPage = () => {
|
||||||
variant="h6"
|
variant="h6"
|
||||||
sx={{
|
sx={{
|
||||||
color: "#52ACDF",
|
color: "#52ACDF",
|
||||||
fontFamily: "Inter",
|
fontFamily: "Gilory",
|
||||||
fontWeight: 600,
|
fontWeight: 600,
|
||||||
fontSize: {
|
fontSize: {
|
||||||
xs: "16px",
|
xs: "16px",
|
||||||
|
@ -640,7 +642,7 @@ const LandingPage = () => {
|
||||||
variant="body2"
|
variant="body2"
|
||||||
sx={{
|
sx={{
|
||||||
color: "#D9D8D8",
|
color: "#D9D8D8",
|
||||||
fontFamily: "Inter",
|
fontFamily: "Gilory",
|
||||||
fontWeight: 400,
|
fontWeight: 400,
|
||||||
fontSize: {
|
fontSize: {
|
||||||
xs: "12px",
|
xs: "12px",
|
||||||
|
@ -1238,7 +1240,7 @@ const LandingPage = () => {
|
||||||
|
|
||||||
{/* Text */}
|
{/* Text */}
|
||||||
<Typography
|
<Typography
|
||||||
fontFamily={"Inter"}
|
fontFamily={"Gilory"}
|
||||||
fontWeight={500}
|
fontWeight={500}
|
||||||
fontSize={{ xs: "20px", sm: "24px", md: "27px" }}
|
fontSize={{ xs: "20px", sm: "24px", md: "27px" }}
|
||||||
lineHeight={"130%"}
|
lineHeight={"130%"}
|
||||||
|
@ -1322,7 +1324,7 @@ const LandingPage = () => {
|
||||||
<Typography
|
<Typography
|
||||||
variant="h5"
|
variant="h5"
|
||||||
fontWeight={600}
|
fontWeight={600}
|
||||||
fontFamily={"Inter"}
|
fontFamily={"Gilory"}
|
||||||
fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
|
fontSize={{ xs: "24px", sm: "30px", md: "40px" }}
|
||||||
lineHeight={"120%"}
|
lineHeight={"120%"}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in a new issue