Adding info page

src/App.css

@@ -48,8 +48,8 @@ h2 {
 }
 
 .info {
-  height: 600px;
-  background-color:#61dafb;
+  /* height: 600px;
+  background-color:#000000; */
 }
 
 .schedule {

src/App.tsx

@@ -6,6 +6,7 @@ import Prospectus from "./components/Prospectus"
 import Faqs from "./components/Faqs";
 import Title from "./components/Title";
 import Schedule from "./components/Schedule";
+import InfoPage from './components/InfoPage';
 import Carousel from "./components/Carousel";
 
 function App() {
@@ -51,7 +52,7 @@ function App() {
           <Title></Title>
         </div>
         <div className="info" ref={info}>
-          <h2>INFO</h2>
+          <InfoPage></InfoPage>
           <Carousel></Carousel>
         </div>
         <div className="schedule" ref={schedule}>

src/components/InfoPage.tsx

@@ -0,0 +1,139 @@
+import "../App.css";
+import Typography from '@mui/joy/Typography';
+import Card from '@mui/joy/Card';
+import CardContent from '@mui/joy/CardContent';
+import React, {useState, useEffect} from 'react';
+
+export default function InfoPage() {
+  const [isMobile, setIsMobile] = useState<Boolean>(false);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 830); // Adjust the breakpoint as needed
+    };
+
+    window.addEventListener('resize', handleResize);
+    handleResize(); // Initial check on component mount
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return (
+    <div>
+      {!isMobile && (<div style={{marginTop: "100px"}}>
+        <Card
+          orientation="horizontal"
+          size="md"
+          variant="outlined"
+          sx={{
+            "--Card-padding": "16px",
+            "--Card-radius": "26px",
+            display: "flex",
+            flexDirection: "column",
+            width: "50%",
+            backgroundColor: "black"
+          }}>
+            <CardContent sx={{alignItems: "center"}}>
+              <Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography>
+              <Typography textColor={"common.white"}>MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society.</Typography>
+            </CardContent>
+        </Card>
+        <Card
+          orientation="horizontal"
+          size="md"
+          variant="outlined"
+          sx={{
+            "--Card-padding": "16px",
+            "--Card-radius": "26px",
+            display: "flex",
+            flexDirection: "column",
+            width: "50%",
+            marginLeft: "48%",
+            marginTop: "100px",
+            backgroundColor: "black"
+          }}>
+            <CardContent sx={{alignItems: "center"}}>
+              <Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography>
+              <Typography textColor={"common.white"}>With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve.</Typography>
+            </CardContent>
+        </Card>
+        <Card
+          orientation="horizontal"
+          size="md"
+          variant="outlined"
+          sx={{
+            "--Card-padding": "16px",
+            "--Card-radius": "26px",
+            display: "flex",
+            flexDirection: "column",
+            marginTop: "100px",
+            width: "50%",
+            backgroundColor: "black"
+          }}
+        >
+            <CardContent sx={{alignItems: "center"}}>
+              <Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography>
+              <Typography textColor={"common.white"}>The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography>
+            </CardContent>
+        </Card>
+      </div>)}
+      {isMobile && (<div style={{marginTop: "100px"}}>
+        <Card
+          orientation="horizontal"
+          size="md"
+          variant="outlined"
+          sx={{
+            "--Card-padding": "16px",
+            "--Card-radius": "26px",
+            display: "flex",
+            flexDirection: "column",
+            backgroundColor: "black",
+            padding: "5%"
+          }}>
+            <CardContent sx={{alignItems: "center"}}>
+              <Typography textColor={"#c8acd4"} level="h4">Where Boundaries Fade and Ideas Flourish</Typography>
+              <Typography textColor={"common.white"} level="body-md">MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society.</Typography>
+            </CardContent>
+        </Card>
+        <Card
+          orientation="horizontal"
+          size="md"
+          variant="outlined"
+          sx={{
+            "--Card-padding": "16px",
+            "--Card-radius": "26px",
+            display: "flex",
+            flexDirection: "column",
+            marginTop: "50px",
+            backgroundColor: "black",
+            padding: "5%"
+          }}>
+            <CardContent sx={{alignItems: "center"}}>
+              <Typography textColor={"#c8acd4"} level="h4">Workshops and advice to help you grow</Typography>
+              <Typography textColor={"common.white"} level="body-md">With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve.</Typography>
+            </CardContent>
+        </Card>
+        <Card
+          orientation="horizontal"
+          size="md"
+          variant="outlined"
+          sx={{
+            "--Card-padding": "16px",
+            "--Card-radius": "26px",
+            display: "flex",
+            flexDirection: "column",
+            marginTop: "50px",
+            backgroundColor: "black",
+            padding: "5%"
+          }}
+        >
+            <CardContent sx={{alignItems: "center"}}>
+              <Typography textColor={"#c8acd4"} level="h4">Real world collaboration and innovation</Typography>
+              <Typography textColor={"common.white"} level="body-md">The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography>
+            </CardContent>
+        </Card>
+      </div>)}
+    </div>
+  );
+}

src/components/Navbar.tsx

@@ -46,7 +46,7 @@ export default function Navbar({ onOptionSelect }: any) {
   return (
     <div style={{width: "100%", backgroundColor: "black", zIndex: "10"}}>
       <div style={{display: "flex", marginLeft: "11%", marginTop: "3%"}}>
-        <img src={logo} alt="mvhackslogo" width="60" height="60" />
+        <img src={logo} alt="mvhackslogo" width="60" height="60" style={{marginLeft: "10px"}} />
         <Link overlay underline="none" sx={{ display: 'flex', flexDirection: 'column', alignItems: 'start'}} onClick = {() => onOptionSelect('home')}>
           <Typography sx={{color: "white", paddingLeft: "10%"}} level="h2">MV</Typography>
           <Typography sx={{color: "white", paddingLeft: "10%"}} level="h2" noWrap={true}>HACKS 8.0</Typography>