diff --git a/index.html b/index.html index 2d13bd25d..9f60055e9 100644 --- a/index.html +++ b/index.html @@ -3,9 +3,9 @@ - + - Checkmate + Prism diff --git a/package-lock.json b/package-lock.json index 92ab643be..00df0a9bf 100644 --- a/package-lock.json +++ b/package-lock.json @@ -39,12 +39,14 @@ "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.2.0", "react-i18next": "^15.4.0", + "react-icons": "5.4.0", "react-redux": "9.2.0", "react-router": "^6.23.0", "react-router-dom": "^6.23.1", "react-toastify": "^10.0.5", "recharts": "2.15.1", "redux-persist": "6.0.0", + "swiper": "11.2.4", "vite-plugin-svgr": "^4.2.0" }, "devDependencies": { @@ -16031,6 +16033,15 @@ } } }, + "node_modules/react-icons": { + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.4.0.tgz", + "integrity": "sha512-7eltJxgVt7X64oHh6wSWNwwbKTCtMfK35hcjvJS0yxEAhPM8oUKdS3+kqaW1vicIltw+kR2unHaa12S9pPALoQ==", + "license": "MIT", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", @@ -17812,6 +17823,25 @@ "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", "license": "MIT" }, + "node_modules/swiper": { + "version": "11.2.4", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.4.tgz", + "integrity": "sha512-DTtglrsFfMYytid+oNy4QI3t2N2+XhhwSYbnyOhlwBmvY8Bkoj3ombK1/b80w8vDpQ+Lqlnbm+0737+i32MrcA==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "license": "MIT", + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/terser": { "version": "5.39.0", "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz", diff --git a/package.json b/package.json index 5cbf37002..9df235cdd 100644 --- a/package.json +++ b/package.json @@ -42,12 +42,14 @@ "react-dnd-html5-backend": "^16.0.1", "react-dom": "^18.2.0", "react-i18next": "^15.4.0", + "react-icons": "5.4.0", "react-redux": "9.2.0", "react-router": "^6.23.0", "react-router-dom": "^6.23.1", "react-toastify": "^10.0.5", "recharts": "2.15.1", "redux-persist": "6.0.0", + "swiper": "11.2.4", "vite-plugin-svgr": "^4.2.0" }, "devDependencies": { diff --git a/src/Components/Buttons/RoundGradientButton.jsx b/src/Components/Buttons/RoundGradientButton.jsx new file mode 100644 index 000000000..f9e14735c --- /dev/null +++ b/src/Components/Buttons/RoundGradientButton.jsx @@ -0,0 +1,30 @@ +import React from "react"; +import Button from "@mui/material/Button"; +import { styled } from "@mui/material/styles"; + +const RoundGradientButton = styled(Button)(({ theme }) => ({ + position: "relative", + border: "5px solid transparent", + backgroundClip: "padding-box", + borderRadius: 30, + fontSize: "1.2rem", + color: theme.palette.primary.contrastText, + backgroundColor: theme.palette.background.main, + + "&:after": { + position: "absolute", + top: -3, + left: -3, + right: -3, + bottom: -3, + background: + theme.palette.mode === "dark" + ? "linear-gradient(90deg, #842bd2, #ff5451, #8c52ff)" + : "linear-gradient(90deg, #842bd2, #ff5451, #8c52ff)", + content: '""', + zIndex: -1, + borderRadius: 30, + }, +})); + +export default RoundGradientButton; diff --git a/src/Components/Common/AppBar.jsx b/src/Components/Common/AppBar.jsx new file mode 100644 index 000000000..df0660cf5 --- /dev/null +++ b/src/Components/Common/AppBar.jsx @@ -0,0 +1,216 @@ +import { useState } from "react"; +import { styled, alpha } from "@mui/material/styles"; +import Box from "@mui/material/Box"; +import AppBar from "@mui/material/AppBar"; +import Toolbar from "@mui/material/Toolbar"; +import Button from "@mui/material/Button"; +import IconButton from "@mui/material/IconButton"; +import Container from "@mui/material/Container"; +import MenuItem from "@mui/material/MenuItem"; +import Drawer from "@mui/material/Drawer"; +import MenuIcon from "@mui/icons-material/Menu"; +import CloseRoundedIcon from "@mui/icons-material/CloseRounded"; +import ThemeSwitch from "../ThemeSwitch"; +import { useTheme } from "@mui/material/styles"; +import { useSelector } from "react-redux"; +import { useLocation, useNavigate } from "react-router-dom"; + +const StyledToolbar = styled(Toolbar)(({ theme, mode }) => ({ + display: "flex", + alignItems: "center", + justifyContent: "space-between", + flexShrink: 0, + borderRadius: `calc(${theme.shape.borderRadius}px + 4px)`, + backdropFilter: "blur(24px)", + border: "1px solid", + borderColor: + mode === "light" + ? alpha(theme.palette.common.black, 0.1) + : alpha(theme.palette.common.white, 0.1), + backgroundColor: + mode === "light" + ? alpha(theme.palette.common.white, 0.4) + : alpha(theme.palette.common.black, 0.4), + boxShadow: theme.shadows[3], + padding: "8px 12px", +})); + +const StyledMenuItem = styled(MenuItem)(({ theme }) => ({ + fontSize: "1.1rem", + margin: theme.spacing(4, 2), +})); + +const AppAppBar = () => { + const [open, setOpen] = useState(false); + const theme = useTheme(); + const mode = useSelector((state) => state.ui.mode); + const location = useLocation(); + const navigate = useNavigate(); + + // Debugging: Log the current theme mode + console.log("Current theme mode:", mode); + + const logoSrc = + mode === "light" ? "/images/prism-black.png" : "/images/prism-white.png"; + + const toggleDrawer = (newOpen) => () => { + setOpen(newOpen); + }; + + const handleScroll = (id) => { + if (location.pathname === "/") { + const element = document.getElementById(id); + if (element) { + element.scrollIntoView({ behavior: "smooth" }); + } + } else { + navigate(`/#${id}`); + } + }; + + return ( + + + + + Prism Logo + + + + + + + + + {/* + */} + + + + + + + + + + + + + + Features + Testimonials + Highlights + FAQ + + Blog + + {/* + + + + + */} + + + + + + + + ); +}; + +export default AppAppBar; diff --git a/src/Components/Common/Footer.jsx b/src/Components/Common/Footer.jsx new file mode 100644 index 000000000..4c33512be --- /dev/null +++ b/src/Components/Common/Footer.jsx @@ -0,0 +1,214 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Container from '@mui/material/Container'; +import IconButton from '@mui/material/IconButton'; +import Link from '@mui/material/Link'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; +import { FaFacebook, FaLinkedin, FaGithub, FaTwitter, FaEnvelope } from 'react-icons/fa'; + + +function Copyright() { + return ( + + {'Copyright © '} + + UpRock + +   + {new Date().getFullYear()} + + ); +} + +export default function Footer() { + return ( + + + +
+ + Privacy Policy + + +  •  + + + Terms of Service + + +
+ + + + + + + + + + + + + + + + + + + + + + + Made with ❤️ by  + + UpRock  + + &  + + Bluewave Labs + + + + + Built on  + + + + + + + + + + + + + + + + + + + + +  Solana + + + + + ); +} diff --git a/src/Components/Home/ArcadeEmbed.jsx b/src/Components/Home/ArcadeEmbed.jsx new file mode 100644 index 000000000..4a522874d --- /dev/null +++ b/src/Components/Home/ArcadeEmbed.jsx @@ -0,0 +1,17 @@ +import React from 'react'; + +export function ArcadeEmbed() { + return ( +
+