Merge pull request #6 from mvhacks/noam-sponsors

Prospectus + Blurb

src/App.css

@@ -58,8 +58,8 @@ h2 {
 }
 
 .sponsor {
-  height: 600px;
-  background-color:cadetblue
+  /* height: 600px;
+  background-color:cadetblue */
 }
 
 .faqs {

src/App.tsx

@@ -2,6 +2,7 @@ import { useRef } from 'react';
 import "./App.css";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
+import Prospectus from "./components/Prospectus"
 import Faqs from "./components/Faqs";
 import Title from "./components/Title";
 import Schedule from "./components/Schedule";
@@ -54,12 +55,12 @@ function App() {
         <div className="schedule" ref={schedule}>
           <Schedule></Schedule>
         </div>
-        <div className="sponsor" ref={sponsor}>
-          <h2>SPONSOR</h2>
-        </div>
         <div className="faqs" ref={faqs}>
           <Faqs></Faqs>
         </div>
+        <div className="sponsor" ref={sponsor}>
+            <Prospectus></Prospectus>
+        </div>
         <div className="team" ref={team}>
           <h2>TEAM</h2>
         </div>
@@ -70,5 +71,4 @@ function App() {
     </div>
   );
 }
-
-export default App;
+export default App;

src/components/Prospectus.tsx

@@ -0,0 +1,18 @@
+import prospectusImage from "../images/prospectus.png";
+export default function Prospectus() {
+    return (<div>
+        <div id="blurbSponsors">
+            <h1>Sponsor MVHacks 8.0!</h1>
+            <p>MVHacks is now in its 8th year of inspiring high school students throughout the country to get together and build great projects. As a prestigious, in-person hackathon, our past events have consistently attracted over 200 unique and diverse attendees. With your support, we aim to engage over 250+ students for MVHacks.</p>
+            <p>To discover more about sponsorship opportunities, please download our Sponsorship Prospectus below and reach out to us at&nbsp;
+                <a id="email" href="mailto:[email protected]">[email protected]</a>.</p>
+            <p>Join us, and let's make MVHacks 8.0 an unforgettable experience. We eagerly await the participation of your company!</p>
+            <a id="downloadProspectus" href="about:blank">Download the Sponsorship Prospectus</a>
+        </div>
+        <img src={prospectusImage}
+            alt="prospectus"
+            id="prospectusImage"
+            width="80%"
+            height="auto"/>
+    </div>)
+}

src/index.css

@@ -1,38 +1,63 @@
 body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background-color: black;
-}
- 
+	margin: 0;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+		sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	background-color: black;
+}
+
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+		monospace;
 }
+
 #footer {
-  text-align: center;
+	text-align: center;
 }
+
 #alert {
-  height: 39px;
-  background-color: #81807F;
-  font-size: 14.9;
-  font-family: "Montserrat", sans-serif;
-  padding-left: 30px;
+	height: 39px;
+	background-color: #81807F;
+	font-size: 14.9;
+	font-family: "Montserrat", sans-serif;
+	padding-left: 30px;
 }
 
 #devpost {
-  width: 250px;
-  background-color: blueviolet;
+	width: 250px;
+	background-color: blueviolet;
 }
+
 #contactUs {
-  width: 250px;
-  background-color: blueviolet;
+	width: 250px;
+	background-color: blueviolet;
 }
+
 #arrow {
-  margin-right: -10px;
-  margin-left: 27px;
+	margin-right: -10px;
+	margin-left: 27px;
 }
 
+#blurbSponsors {
+	color: white;
+	padding-left: 40px;
+	padding-right: 40px;
+	padding-bottom: 25px;
+}
+
+#email {
+	color: rgb(147, 147, 230)
+}
+
+#downloadProspectus {
+	color: rgb(147, 147, 230)
+}
+
+#prospectusImage {
+	padding-left: 40px;
+	padding-right: 40px;
+	padding-bottom: 20px;
+
+}