VandyHacks · ChloeNixon · Jul 27, 2024
diff --git a/src/SideBar.tsx b/src/SideBar.tsx
@@ -0,0 +1,196 @@
+import { Flex, Text, Image } from "@mantine/core";
+import Checker from "./assets/checkerbg.png";
+import Instagram from "./assets/instagram.png";
+import Facebook from "./assets/facebook.png";
+import Youtube from "./assets/youtube.png";
+import Discord from "./assets/discord.png";
+import React from "react";
+
+function SideBar() {
+  return (
+    <div style={{ width: "20%" }}>
+      <Flex
+        direction={"column"}
+        style={{
+          fontFamily: "DM Sans",
+          fontSize: "16px",
+          borderRadius: "20px",
+          overflow: "hidden",
+        }}
+      >
+        <Flex style={{ backgroundColor: "#1F1F1F" }} justify={"center"}>
+          <Text
+            style={{
+              fontFamily: "Formula1",
+              fontWeight: "900",
+              fontSize: "36px",
+              color: "white",
+              paddingTop: "5px",
+              paddingBottom: "5px",
+            }}
+          >
+            VHACKS XI
+          </Text>
+        </Flex>
+        <Flex
+          justify={"center"}
+          style={{
+            backgroundImage: `url(${Checker})`,
+            backgroundSize: "cover", // You can also use 'contain', 'auto', or a specific size like '50%'
+            backgroundRepeat: "no-repeat", // Options are 'repeat', 'repeat-x', 'repeat-y', 'no-repeat'
+            backgroundPosition: "center", // Options are 'left', 'right', 'top', 'bottom', 'center', or specific positions like '50% 50%'
+          }}
+        >
+          <Text
+            style={{
+              fontSize: "21px",
+              fontWeight: "700",
+              color: "white",
+              paddingTop: "5px",
+              paddingBottom: "5px",
+            }}
+          >
+            12:00:00
+          </Text>
+        </Flex>
+        <Flex justify={"center"}>
+          <Text
+            style={{
+              fontWeight: "500",
+              fontSize: "18px",
+              paddingTop: "5px",
+              paddingBottom: "5px",
+            }}
+          >
+            Nashville, TN
+          </Text>
+        </Flex>
+      </Flex>
+
+      <Flex
+        style={{
+          marginTop: "32px",
+          backgroundColor: "#FCF8F5",
+          borderRadius: "20px",
+          overflow: "hidden",
+          padding: "24px",
+        }}
+        direction={"column"}
+      >
+        <Flex direction={"column"} style={{ width: "100%", gap: "6px" }}>
+          <Text
+            style={{
+              border: "1px solid #C2C7CF",
+              textAlign: "center",
+              paddingBottom: "6px",
+              paddingTop: "6px",
+              borderRadius: "100px",
+              fontWeight: "500",
+              cursor: "pointer",
+            }}
+            className="hoverEffectSidebar"
+          >
+            About Us
+          </Text>
+          <Text
+            style={{
+              border: "1px solid #C2C7CF",
+              textAlign: "center",
+              paddingBottom: "6px",
+              paddingTop: "6px",
+              borderRadius: "100px",
+              fontWeight: "500",
+              cursor: "pointer",
+            }}
+            className="hoverEffectSidebar"
+          >
+            Schedule
+          </Text>
+          <Text
+            style={{
+              border: "1px solid #C2C7CF",
+              textAlign: "center",
+              paddingBottom: "6px",
+              paddingTop: "6px",
+              borderRadius: "100px",
+              fontWeight: "500",
+              cursor: "pointer",
+            }}
+            className="hoverEffectSidebar"
+          >
+            FAQ
+          </Text>
+          <Text
+            style={{
+              border: "1px solid #C2C7CF",
+              textAlign: "center",
+              paddingBottom: "6px",
+              paddingTop: "6px",
+              borderRadius: "100px",
+              fontWeight: "500",
+              cursor: "pointer",
+            }}
+            className="hoverEffectSidebar"
+          >
+            Speakers
+          </Text>
+          <Text
+            style={{
+              border: "1px solid #C2C7CF",
+              textAlign: "center",
+              paddingBottom: "6px",
+              paddingTop: "6px",
+              borderRadius: "100px",
+              fontWeight: "500",
+              cursor: "pointer",
+            }}
+            className="hoverEffectSidebar"
+          >
+            Sponsors
+          </Text>
+        </Flex>
+        <Flex gap={"16px"} justify={"center"} style={{ marginTop: "48px" }}>
+          <Flex direction={"column"} align={"start"} gap={"16px"}>
+            <Flex justify={"center"} align={"center"} gap={"6px"}>
+              <Image src={Instagram} width={24} height={24}></Image>
+              <Text style={{ fontSize: "12px" }}>Instagram</Text>
+            </Flex>
+            <Flex justify={"center"} align={"center"} gap={"6px"}>
+              <Image src={Youtube} width={24} height={24}></Image>
+              <Text style={{ fontSize: "12px" }}>YouTube</Text>
+            </Flex>
+          </Flex>
+          <Flex direction={"column"} align={"start"} gap={"16px"}>
+            <Flex justify={"center"} align={"center"} gap={"6px"}>
+              <Image src={Facebook} width={24} height={24}></Image>
+              <Text style={{ fontSize: "12px" }}>Facebook</Text>
+            </Flex>
+            <Flex justify={"center"} align={"center"} gap={"6px"}>
+              <Image src={Discord} width={24} height={24}></Image>
+              <Text style={{ fontSize: "12px" }}>Discord</Text>
+            </Flex>
+          </Flex>
+        </Flex>
+        <Text
+          style={{
+            backgroundColor: "#1F1F1F",
+            color: "white",
+            fontWeight: "700",
+            textAlign: "center",
+            borderRadius: "100px",
+            fontSize: "18px",
+            paddingTop: "8px",
+            paddingBottom: "8px",
+            marginLeft: "12px",
+            marginRight: "12px",
+            marginTop: "32px",
+          }}
+        >
+          JOIN NOW
+        </Text>
+      </Flex>
+    </div>
+  );
+}
+
+export default SideBar;
diff --git a/src/assets/checkerbg.png b/src/assets/checkerbg.png
diff --git a/src/assets/discord.png b/src/assets/discord.png
diff --git a/src/assets/facebook.png b/src/assets/facebook.png
diff --git a/src/assets/instagram.png b/src/assets/instagram.png
diff --git a/src/assets/youtube.png b/src/assets/youtube.png
diff --git a/src/index.css b/src/index.css
@@ -1,102 +1,130 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
 @font-face {
-    font-family: "Formula1";
-    src: local("Formula1"),
-        url(./assets/fonts/Formula1-Regular.otf) format("opentype");
+  font-family: "Formula1";
+  src: local("Formula1"),
+    url(./assets/fonts/Formula1-Regular.otf) format("opentype");
 }
 
 @font-face {
-    font-family: "Formula1";
-    font-weight: 900;
-    src: local("Formula1"),
-        url(./assets/fonts/Formula1-Bold.otf) format("opentype");
+  font-family: "Formula1";
+  font-weight: 900;
+  src: local("Formula1"),
+    url(./assets/fonts/Formula1-Bold.otf) format("opentype");
 }
 
 @font-face {
-    font-family: "Formula1-Wide";
-    src: local("Formula1-Wide"),
-        url(./assets/fonts/Formula1-Wide.otf) format("opentype");
+  font-family: "Formula1-Wide";
+  src: local("Formula1-Wide"),
+    url(./assets/fonts/Formula1-Wide.otf) format("opentype");
 }
 
 body {
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, "Formula1", sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background-color: #FFFFFF;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Formula1", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #ffffff;
 }
 
 code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-        monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
 }
 
 .centered-text {
-    position: absolute;
-    top: 25%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+  position: absolute;
+  top: 25%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .flag-button {
-    position: absolute;
-    text-align: center;
+  position: absolute;
+  text-align: center;
 }
 
 .main-road {
-    background-image: url("./assets/main road.svg");
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-size: 95% auto;
-    background-position: center;
+  background-image: url("./assets/main road.svg");
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-size: 95% auto;
+  background-position: center;
 }
 
 @keyframes marquee {
-    0% { transform: translateX(-10%); }
-    60% { transform: translateX(115%); }
-    100% { transform: translateX(115%); }
+  0% {
+    transform: translateX(-10%);
+  }
+  60% {
+    transform: translateX(115%);
+  }
+  100% {
+    transform: translateX(115%);
+  }
 }
 
 @keyframes marquee_slow {
-    0% { transform: translateX(-10%); }
-    70% { transform: translateX(115%); }
-    100% { transform: translateX(115%); }
+  0% {
+    transform: translateX(-10%);
+  }
+  70% {
+    transform: translateX(115%);
+  }
+  100% {
+    transform: translateX(115%);
+  }
 }
 
 @keyframes danica {
-    0% { transform: translateY(0%); }
-    50% { transform: translateY(2%); }
-    100% { transform: translateY(0%); }
+  0% {
+    transform: translateY(0%);
+  }
+  50% {
+    transform: translateY(2%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
 }
 
 .m_green {
-    animation: marquee 2s ease-out infinite;
+  animation: marquee 2s ease-out infinite;
 }
 .m_red {
-    animation: marquee_slow 2s ease-out infinite;
+  animation: marquee_slow 2s ease-out infinite;
 }
 .m_blue {
-    animation: marquee 12s linear infinite;
+  animation: marquee 12s linear infinite;
 }
 .m_bumping {
-    animation: danica .15s ease-out infinite;
+  animation: danica 0.15s ease-out infinite;
 }
 
 .hero_text {
-    font-family: "Courier Prime", monospace;
-    padding-top: 20%;
-    font-weight: 200;
-    font-style: normal;
-    font-size: 30px;
-    color: #555555;
+  font-family: "Courier Prime", monospace;
+  padding-top: 20%;
+  font-weight: 200;
+  font-style: normal;
+  font-size: 30px;
+  color: #555555;
 }
 .hero_date {
-    font-family: "Courier Prime", monospace;
-    margin-top: -1.5%;
-    font-weight: 700;
-    font-style: normal;
-    font-size: 30px;
-    color: #555555;
+  font-family: "Courier Prime", monospace;
+  margin-top: -1.5%;
+  font-weight: 700;
+  font-style: normal;
+  font-size: 30px;
+  color: #555555;
+}
+
+.hoverEffectSidebar {
+  border: 1px solid #c2c7cf;
+  transition: border 0.3s;
+}
+
+.hoverEffectSidebar:hover {
+  border: "2px solid #1F1F1F";
 }