-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.jsx
123 lines (110 loc) · 3.03 KB
/
index.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
import {Box, Typography, useTheme , useMediaQuery} from "@mui/material";
import Form from "./Form";
import { color } from "framer-motion";
import Navbar from "scenes/navbar";
const LoginPage = () => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
return (
<>
<Box
sx={{
textAlign:"center",
}}
>
<Box
width="100%"
backgroundcolor={theme.palette.primary.alt}
p="1rem"
textAlign="center"
>
<Typography
fontWeight= "bold"
color= "primary"
fontSize="clamp(2rem, 5vw, 5rem)"
sx={{
backgroundcolor: "primary",
backgroundImage: `linear-gradient(45deg, #5514B4, #FF80FF)`,
backgroundSize: "100%",
backgroundRepeat: "repeat",
backgroundClip: "text",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
"&:hover": {
backgroundcolor: "primary",
backgroundImage: `linear-gradient(180deg, #5514B4, #FF80FF)`,
backgroundSize: "50%",
backgroundRepeat: "repeat",
backgroundClip: "text",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
transition: "all 500ms ease-in-out",
cursor: "pointer",
},
}}
>Socialite</Typography>
</Box>
{theme.palette.mode === "dark" ? (
<Box
width={isMobile ? "50%" : "100%"}
padding="2rem 6%"
margin="2m"
content = "center"
textAlign="center"
maxWidth="800px"
sx={
{
margin:"auto",
marginTop:"2rem",
marginBottom:"2rem",
borderRadius:"2rem",
boxShadow:"0 -2px 10px rgba(0, 0, 225, 225);",
backgroundcolor: "primary",
color: "white",
"&:hover": {
boxShadow: "0 0 10px 0 rgb(255,255,255) ",
transition: "all 500ms ease-in-out",
},
}
}
>
<Typography color="teal" fontWeight="500" variant="h5" mt={2} sx={{mb:"1.5rem"}}>
Socialite , a social media app for idk who
</Typography>
<Form/>
</Box>
) : (
<Box
width={isMobile ? "50%" : "100%"}
padding="2rem 6%"
margin="2m"
content = "center"
textAlign="center"
maxWidth="800px"
sx={
{
margin:"auto",
marginTop:"2rem",
marginBottom:"2rem",
borderRadius:"2rem",
boxShadow:"0 0 10px 0 rgba(0,0,0,0.2)",
backgroundcolor: "primary",
color: "white",
"&:hover": {
boxShadow: "0 0 10px 0 rgba(0,0,0,0.5)",
transition: "all 500ms ease-in-out",
},
}
}
>
<Typography color="teal" fontWeight="500" variant="h5" mt={2} sx={{mb:"1.5rem"}}>
Socialite , a social media app for idk who
</Typography>
<Form/>
</Box>
)}
</Box>
</>
);
}
export default LoginPage;