diff --git a/package-lock.json b/package-lock.json index 01a5004..dc4e34e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,9 @@ "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@fontsource/inter": "^5.1.0", + "@mui/icons-material": "^6.1.7", "@mui/joy": "^5.0.0-beta.48", + "@mui/material": "^6.1.7", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -1965,9 +1967,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.9.tgz", - "integrity": "sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz", + "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -3094,6 +3096,31 @@ "url": "https://opencollective.com/mui-org" } }, + "node_modules/@mui/icons-material": { + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.7.tgz", + "integrity": "sha512-RGzkeHNArIVy5ZQ12bq/8VYNeICEyngngsFskTJ/2hYKhIeIII3iRGtaZaSvLpXh7h3Fg3VKTulT+QU0w5K4XQ==", + "dependencies": { + "@babel/runtime": "^7.26.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^6.1.7", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/joy": { "version": "5.0.0-beta.48", "resolved": "https://registry.npmjs.org/@mui/joy/-/joy-5.0.0-beta.48.tgz", @@ -3134,6 +3161,195 @@ } } }, + "node_modules/@mui/material": { + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.7.tgz", + "integrity": "sha512-KsjujQL/A2hLd1PV3QboF+W6SSL5QqH6ZlSuQoeYz9r69+TnyBFIevbYLxdjJcJmGBjigL5pfpn7hTGop+vhSg==", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/core-downloads-tracker": "^6.1.7", + "@mui/system": "^6.1.7", + "@mui/types": "^7.2.19", + "@mui/utils": "^6.1.7", + "@popperjs/core": "^2.11.8", + "@types/react-transition-group": "^4.4.11", + "clsx": "^2.1.1", + "csstype": "^3.1.3", + "prop-types": "^15.8.1", + "react-is": "^18.3.1", + "react-transition-group": "^4.4.5" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@mui/material-pigment-css": "^6.1.7", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@mui/material-pigment-css": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/@mui/core-downloads-tracker": { + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.7.tgz", + "integrity": "sha512-POuIBi80BZBogQkG4PQKIGwy4QFwB+kOr+OI4k7Znh7LqMAIhwB9OC00l6M+w1GrZJYj3T8R5WX8G6QAIvoVEw==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + } + }, + "node_modules/@mui/material/node_modules/@mui/private-theming": { + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.7.tgz", + "integrity": "sha512-uLbfUSsug5K0LVkv0PI6Flste3le8+6WSL2omdTiYde93P89Qr7pKr8TA6d2yXfr+Bm+SvD8/fGnkaRwFkryuQ==", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/utils": "^6.1.7", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/@mui/styled-engine": { + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.7.tgz", + "integrity": "sha512-Ou4CxN7MQmwrfG1Pu6EYjPgPChQXxPDJrwgizLXlRPOad5qAq4gYXRuzrGQ2DfGjjwmJhjI8T6A0SeapAZPGig==", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@emotion/cache": "^11.13.1", + "@emotion/serialize": "^1.3.2", + "@emotion/sheet": "^1.4.0", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/@mui/system": { + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.7.tgz", + "integrity": "sha512-qbMGgcC/FodpuRSfjXlEDdbNQaW++eATh0vNBcPUv2/YXSpReoOpoT9FhogxEBNks+aQViDXBRZKh6HX2fVmwg==", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/private-theming": "^6.1.7", + "@mui/styled-engine": "^6.1.7", + "@mui/types": "^7.2.19", + "@mui/utils": "^6.1.7", + "clsx": "^2.1.1", + "csstype": "^3.1.3", + "prop-types": "^15.8.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@emotion/react": "^11.5.0", + "@emotion/styled": "^11.3.0", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@emotion/react": { + "optional": true + }, + "@emotion/styled": { + "optional": true + }, + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/@mui/utils": { + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.7.tgz", + "integrity": "sha512-Gr7cRZxBoZ0BIa3Xqf/2YaUrBLyNPJvXPQH3OsD9WMZukI/TutibbQBVqLYpgqJn8pKSjbD50Yq2auG0wI1xOw==", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/types": "^7.2.19", + "@types/prop-types": "^15.7.13", + "clsx": "^2.1.1", + "prop-types": "^15.8.1", + "react-is": "^18.3.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + }, "node_modules/@mui/private-theming": { "version": "5.16.6", "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.6.tgz", @@ -3231,9 +3447,9 @@ } }, "node_modules/@mui/types": { - "version": "7.2.18", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.18.tgz", - "integrity": "sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg==", + "version": "7.2.19", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz", + "integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -4105,6 +4321,14 @@ "@types/react": "*" } }, + "node_modules/@types/react-transition-group": { + "version": "4.4.11", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz", + "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/resolve": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz", @@ -6728,6 +6952,15 @@ "utila": "~0.4" } }, + "node_modules/dom-helpers": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "dependencies": { + "@babel/runtime": "^7.8.7", + "csstype": "^3.0.2" + } + }, "node_modules/dom-serializer": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz", @@ -13455,6 +13688,21 @@ } } }, + "node_modules/react-transition-group": { + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", + "dependencies": { + "@babel/runtime": "^7.5.5", + "dom-helpers": "^5.0.1", + "loose-envify": "^1.4.0", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": ">=16.6.0", + "react-dom": ">=16.6.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/package.json b/package.json index d36b09d..43417a8 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,9 @@ "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@fontsource/inter": "^5.1.0", + "@mui/icons-material": "^6.1.7", "@mui/joy": "^5.0.0-beta.48", + "@mui/material": "^6.1.7", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", diff --git a/src/App.css b/src/App.css index 74b5e05..a0c3e77 100644 --- a/src/App.css +++ b/src/App.css @@ -36,3 +36,38 @@ transform: rotate(360deg); } } + +h2 { + color: whitesmoke; + padding: auto; +} + +.home { + height: 600px; + background-color:coral; +} + +.info { + height: 600px; + background-color:#61dafb; +} + +.schedule { + height: 600px; + background-color:forestgreen +} + +.sponsor { + height: 600px; + background-color:cadetblue +} + +.faqs { + height: 600px; + background-color:firebrick; +} + +.team { + height: 600px; + background-color:darkkhaki; +} \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 1cf9d1a..4f61ca9 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,25 +1,77 @@ +import { useRef } from 'react'; import "./App.css"; import Button from "@mui/joy/Button"; import arrow from "./images/arrow.png"; +import Navbar from "./components/Navbar"; import Footer from "./components/Footer"; function App() { + const home = useRef(null); + const info = useRef(null); + const schedule = useRef(null); + const sponsor = useRef(null); + const faqs = useRef(null); + const team = useRef(null); + + const scroll = (elementRef: any) => { + window.scrollTo({ + top: elementRef.current.offsetTop, + behavior: 'smooth' + }); + }; + + const handleOptionChange = (option: any) => { + if (option === 'home') { + scroll(home); + } else if (option === "info") { + scroll(info); + } else if (option === "schedule") { + scroll(schedule); + } else if (option === "sponsor") { + scroll(sponsor); + } else if (option === "faqs") { + scroll(faqs); + } else if (option === "team") { + scroll(team); + } + }; + return (
- +
- + +
+

HOME

+ +
+
+

INFO

+
+
+

SCHEDULE

+
+
+

SPONSOR

+
+
+

FAQS

+
+
+

TEAM

+


diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx new file mode 100644 index 0000000..6087af0 --- /dev/null +++ b/src/components/Navbar.tsx @@ -0,0 +1,89 @@ +import "../App.css"; +import logo from "../images/MVH8LogoOld.png"; +import Typography from '@mui/joy/Typography'; +import Link from '@mui/joy/Link'; +import Drawer from '@mui/joy/Drawer'; +import List from '@mui/joy/List'; +import ListItemButton from '@mui/joy/ListItemButton'; +import IconButton from '@mui/joy/IconButton'; +import Menu from '@mui/icons-material/Menu'; +import React, { useState, useEffect } from 'react'; + +export default function Navbar({ onOptionSelect }: any) { + const [isVisible, setIsVisible] = useState(true); + const [drawerOpen, setDrawerOpen] = React.useState(false); + + useEffect(() => { + const handleResize = () => { + setIsVisible(window.innerWidth > 830); // Adjust the breakpoint as needed + }; + + window.addEventListener('resize', handleResize); + handleResize(); // Initial check on component mount + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + const toggleDrawer = (inOpen: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => { + if ( + event.type === 'keydown' && + ((event as React.KeyboardEvent).key === 'Tab' || + (event as React.KeyboardEvent).key === 'Shift') + ) { + return; + } + + setDrawerOpen(inOpen); + }; + + const handleDrawerOption = (option: string) => { + setDrawerOpen(false); + onOptionSelect(option); + } + + return ( +
+
+ mvhackslogo + onOptionSelect('home')}> + MV + HACKS 8.0 + + {!isVisible && (
+ setDrawerOpen(true)}> + + + + div': { justifyContent: 'center' }, + }}> + handleDrawerOption('home')}>Home + Apply + handleDrawerOption('info')}>Info + handleDrawerOption('schedule')}>Schedule + handleDrawerOption('sponsor')}>Sponsors + handleDrawerOption('faqs')}>FAQS + handleDrawerOption('team')}>Team + + +
)} +
+ {isVisible && (
+ onOptionSelect('home')}>HOME + APPLY + onOptionSelect('info')}>INFO + onOptionSelect('schedule')}>SCHEDULE + onOptionSelect('sponsor')}>SPONSORS + onOptionSelect('faqs')}>FAQS + onOptionSelect('team')}>TEAM +
)} +
+ ); +} \ No newline at end of file diff --git a/src/images/MVH8Logo.png b/src/images/MVH8Logo.png new file mode 100644 index 0000000..8cf3e45 Binary files /dev/null and b/src/images/MVH8Logo.png differ diff --git a/src/images/MVH8LogoOld.png b/src/images/MVH8LogoOld.png new file mode 100644 index 0000000..20fc224 Binary files /dev/null and b/src/images/MVH8LogoOld.png differ