Skip to content

Commit fd6fb71

Browse files
ajhollidajhollid
authored
Merge pull request #1 from uprockcom/sync-fe
sync
2 parents 6dbb6da + 7e4e6b7 commit fd6fb71

28 files changed

+1847
-2
lines changed

‎index.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33

44
<head>
55
<meta charset="UTF-8" />
6-
<link rel="icon" href="./checkmate_favicon.svg" />
6+
<link rel="icon" href="/prism-logo-only.png" />
77
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8-
<title>Checkmate</title>
8+
<title>Prism</title>
99
</head>
1010

1111
<body>

‎package-lock.json

+30
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+2
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,14 @@
4242
"react-dnd-html5-backend": "^16.0.1",
4343
"react-dom": "^18.2.0",
4444
"react-i18next": "^15.4.0",
45+
"react-icons": "5.4.0",
4546
"react-redux": "9.2.0",
4647
"react-router": "^6.23.0",
4748
"react-router-dom": "^6.23.1",
4849
"react-toastify": "^10.0.5",
4950
"recharts": "2.15.1",
5051
"redux-persist": "6.0.0",
52+
"swiper": "11.2.4",
5153
"vite-plugin-svgr": "^4.2.0"
5254
},
5355
"devDependencies": {

‎src/Components/Buttons/RoundGradientButton.jsx

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from "react";
2+
import Button from "@mui/material/Button";
3+
import { styled } from "@mui/material/styles";
4+
5+
const RoundGradientButton = styled(Button)(({ theme }) => ({
6+
position: "relative",
7+
border: "5px solid transparent",
8+
backgroundClip: "padding-box",
9+
borderRadius: 30,
10+
fontSize: "1.2rem",
11+
color: theme.palette.primary.contrastText,
12+
backgroundColor: theme.palette.background.main,
13+
14+
"&:after": {
15+
position: "absolute",
16+
top: -3,
17+
left: -3,
18+
right: -3,
19+
bottom: -3,
20+
background:
21+
theme.palette.mode === "dark"
22+
? "linear-gradient(90deg, #842bd2, #ff5451, #8c52ff)"
23+
: "linear-gradient(90deg, #842bd2, #ff5451, #8c52ff)",
24+
content: '""',
25+
zIndex: -1,
26+
borderRadius: 30,
27+
},
28+
}));
29+
30+
export default RoundGradientButton;

‎src/Components/Common/AppBar.jsx

+216
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
import { useState } from "react";
2+
import { styled, alpha } from "@mui/material/styles";
3+
import Box from "@mui/material/Box";
4+
import AppBar from "@mui/material/AppBar";
5+
import Toolbar from "@mui/material/Toolbar";
6+
import Button from "@mui/material/Button";
7+
import IconButton from "@mui/material/IconButton";
8+
import Container from "@mui/material/Container";
9+
import MenuItem from "@mui/material/MenuItem";
10+
import Drawer from "@mui/material/Drawer";
11+
import MenuIcon from "@mui/icons-material/Menu";
12+
import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
13+
import ThemeSwitch from "../ThemeSwitch";
14+
import { useTheme } from "@mui/material/styles";
15+
import { useSelector } from "react-redux";
16+
import { useLocation, useNavigate } from "react-router-dom";
17+
18+
const StyledToolbar = styled(Toolbar)(({ theme, mode }) => ({
19+
display: "flex",
20+
alignItems: "center",
21+
justifyContent: "space-between",
22+
flexShrink: 0,
23+
borderRadius: `calc(${theme.shape.borderRadius}px + 4px)`,
24+
backdropFilter: "blur(24px)",
25+
border: "1px solid",
26+
borderColor:
27+
mode === "light"
28+
? alpha(theme.palette.common.black, 0.1)
29+
: alpha(theme.palette.common.white, 0.1),
30+
backgroundColor:
31+
mode === "light"
32+
? alpha(theme.palette.common.white, 0.4)
33+
: alpha(theme.palette.common.black, 0.4),
34+
boxShadow: theme.shadows[3],
35+
padding: "8px 12px",
36+
}));
37+
38+
const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
39+
fontSize: "1.1rem",
40+
margin: theme.spacing(4, 2),
41+
}));
42+
43+
const AppAppBar = () => {
44+
const [open, setOpen] = useState(false);
45+
const theme = useTheme();
46+
const mode = useSelector((state) => state.ui.mode);
47+
const location = useLocation();
48+
const navigate = useNavigate();
49+
50+
// Debugging: Log the current theme mode
51+
console.log("Current theme mode:", mode);
52+
53+
const logoSrc =
54+
mode === "light" ? "/images/prism-black.png" : "/images/prism-white.png";
55+
56+
const toggleDrawer = (newOpen) => () => {
57+
setOpen(newOpen);
58+
};
59+
60+
const handleScroll = (id) => {
61+
if (location.pathname === "/") {
62+
const element = document.getElementById(id);
63+
if (element) {
64+
element.scrollIntoView({ behavior: "smooth" });
65+
}
66+
} else {
67+
navigate(`/#${id}`);
68+
}
69+
};
70+
71+
return (
72+
<AppBar
73+
position="fixed"
74+
sx={{
75+
boxShadow: 0,
76+
bgcolor: "transparent",
77+
backgroundImage: "none",
78+
border: "none",
79+
mt: "calc(var(--template-frame-height, 0px) + 28px)",
80+
}}
81+
>
82+
<Container maxWidth="lg">
83+
<StyledToolbar
84+
variant="dense"
85+
disableGutters
86+
mode={mode}
87+
>
88+
<Box sx={{ flexGrow: 1, display: "flex", alignItems: "center", px: 0 }}>
89+
<img
90+
src={logoSrc}
91+
alt="Prism Logo"
92+
style={{
93+
height: "auto",
94+
width: "auto",
95+
marginRight: "10px",
96+
maxHeight: "32px",
97+
}}
98+
/>
99+
<Box sx={{ display: { xs: "none", md: "flex" } }}>
100+
<Button
101+
variant="text"
102+
color="info"
103+
size="large"
104+
onClick={() => handleScroll("features")}
105+
>
106+
Features
107+
</Button>
108+
<Button
109+
variant="text"
110+
color="info"
111+
size="large"
112+
onClick={() => handleScroll("highlights")}
113+
>
114+
Highlights
115+
</Button>
116+
<Button
117+
variant="text"
118+
color="info"
119+
size="large"
120+
onClick={() => handleScroll("faq")}
121+
>
122+
FAQ
123+
</Button>
124+
<Button
125+
variant="text"
126+
color="info"
127+
size="large"
128+
href="https://uprock.com/blog"
129+
>
130+
Blog
131+
</Button>
132+
</Box>
133+
</Box>
134+
<Box
135+
sx={{
136+
display: { xs: "none", md: "flex" },
137+
gap: 1,
138+
alignItems: "center",
139+
}}
140+
>
141+
{/* <Button color="primary" variant="text" size="small">
142+
Sign in
143+
</Button>
144+
<Button color="primary" variant="contained" size="small">
145+
Sign up
146+
</Button> */}
147+
</Box>
148+
<Box
149+
sx={{
150+
display: { xs: "flex", md: "none" },
151+
152+
gap: 1,
153+
}}
154+
>
155+
<IconButton
156+
aria-label="Menu button"
157+
onClick={toggleDrawer(true)}
158+
>
159+
<MenuIcon sx={{ color: theme.palette.text.primary }} />
160+
</IconButton>
161+
<Drawer
162+
anchor="top"
163+
open={open}
164+
onClose={toggleDrawer(false)}
165+
PaperProps={{
166+
sx: {
167+
top: 0,
168+
marginTop: 0,
169+
borderRadius: 0,
170+
backgroundColor: theme.palette.background.paper,
171+
},
172+
}}
173+
>
174+
<Box sx={{ p: 4, backgroundColor: theme.palette.background.main }}>
175+
<Box
176+
sx={{
177+
display: "flex",
178+
justifyContent: "flex-end",
179+
}}
180+
>
181+
<IconButton onClick={toggleDrawer(false)}>
182+
<CloseRoundedIcon sx={{ color: theme.palette.text.primary }} />
183+
</IconButton>
184+
</Box>
185+
186+
<StyledMenuItem>Features</StyledMenuItem>
187+
<StyledMenuItem>Testimonials</StyledMenuItem>
188+
<StyledMenuItem>Highlights</StyledMenuItem>
189+
<StyledMenuItem>FAQ</StyledMenuItem>
190+
<StyledMenuItem
191+
component="a"
192+
href="https://uprock.com/blog"
193+
>
194+
Blog
195+
</StyledMenuItem>
196+
{/* <MenuItem>
197+
<Button color="primary" variant="contained" fullWidth>
198+
Sign up
199+
</Button>
200+
</MenuItem>
201+
<MenuItem>
202+
<Button color="primary" variant="outlined" fullWidth>
203+
Sign in
204+
</Button>
205+
</MenuItem> */}
206+
</Box>
207+
</Drawer>
208+
</Box>
209+
<ThemeSwitch />
210+
</StyledToolbar>
211+
</Container>
212+
</AppBar>
213+
);
214+
};
215+
216+
export default AppAppBar;

0 commit comments

Comments
 (0)