Content update & Fixes

src/App.tsx

@@ -7,20 +7,21 @@ import Gaming from './views/Gaming/Gaming';
 import Esports from './views/Esports/Esports';
 import Technology from './views/Technology/Technology';
 import Footer from './components/Footer';
-
 function App() {
   return (
     <>
-      <Router>
-        <header/>
-        <Routes>
-          <Route path="/about" element={<About />} />
-          <Route path="/" element={<Home />} />
-          <Route path="/gaming" element={<Gaming />} />
-          <Route path="/technology" element={<Technology />} />
-          <Route path="/esports" element={<Esports />} />  
-        </Routes>
-      </Router>
+      <div style={{ minHeight: "74vh"}}>
+        <Router>
+          <Routes>
+            <Route path="/about" element={<About />} />
+            <Route path="/tech" element={<Technology />} />
+            <Route path="/technology" element={<Technology />} />
+            <Route path="/gaming" element={<Gaming />} />
+            <Route path="/esports" element={<Gaming />} />
+            <Route path="/" element={<Home />} />
+          </Routes>
+        </Router>
+      </div>
       <Footer />
     </>
   );

src/components/Footer.module.css

@@ -1,35 +1,35 @@
-footer {
-    margin: 0 auto;
-    box-sizing: border-box;
-    padding: 2em;
-
-}
-
-.footer_links {
-    margin: 1em auto 0 auto;
-    max-width: 800px;
+.footer {
+    background-color: #000;
+    width: 100%;
+    min-height: 26vh;
     display: flex;
-    flex-wrap: wrap;
-    justify-content: space-evenly;
-}
-
-.footer_links a {
-    margin: auto 2em;
-    padding: 1em;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
-.footer_links img {
-    width: 2em;
-    height: 2em;
+.logo {
+    width: 80px;
+    padding: 5px 12px;
+    height: auto;
+    margin: auto;
+    background-color: white;
 }
 
-iframe {
-    display: block;
-    margin: 2em auto;
+.anchors {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    list-style-type: none;
+    padding: 8px 0 24px 0;
+    width: 95%;
+    max-width: 750px;
 }
 
-.logo {
-    display: block;
-    margin: 0 auto;
-    max-width: 90%;
+@media screen and (max-width: 600px) {
+    .anchors {
+        flex-direction: column;
+        align-items: center;
+    }
 }

src/components/Footer.tsx

@@ -1,45 +1,19 @@
-import styles from './Footer.module.css'
+import styles from "./Footer.module.css"
 
-const Footer = (): JSX.Element => {
+const Footer = () => {
+    return (
+        <footer className={styles.footer}>
+            <img className={styles.logo} src="/img/netsoc.png" alt="Netsoc Logo" />
 
-  const footer_links: { icon?: string, url: string, description: string }[] = [
-    {
-        icon: "/img/discord.svg",
-        url: "https://discord.netsoc.co",
-        description: "Join our Discord server"
-      }, 
-      {
-        icon: "/img/google_calendar.png",
-        url: "https://google.com",
-        description: "See what events we have coming up"
-      },
-      {
-        icon: "https://instagram.com/favicon.ico",
-        url: "https://instagram.com/uccnetsoc",
-        description: "Follow us on instagram to be updated with upcoming events"
-      },
-      {
-        icon: "/img/github.svg",
-        url: "https://github.com/uccnetsoc",
-        description: "Check out our Github"
-      },
-  ]
+            <nav className={styles.anchors}>
+                <a href="mailto:[email protected]">Mail us</a>
+                <a href="https://discord.netsoc.co">Join our Discord</a>
+                <a href="https://twitter.com/uccnetsoc">Follow us on Twitter</a>
+                <a href="https://instagram.com/uccnetsoc">Follow us on Instagram</a>
+                <a href="https://devcon.ie">Check out Cork DevCon</a>
+            </nav>
+        </footer>
+    )
+}
 
-  return (
-    <>
-      <footer>
-          <section className={styles.footer_links}>
-              {footer_links.map((link) => (
-                  <a href={link.url}><img src={link.icon} alt={link.description}/></a>
-              ))}
-          </section>
-          <iframe src="https://discord.com/widget?id=248421213628530688&theme=dark" width="350" height="250" allowTransparency={true} 
-              frameBorder="0" sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts" title="Discord">
-          </iframe>
-          <img className={styles.logo} src="/img/logo-horizontal.svg" alt="Netsoc" />
-      </footer>
-    </>
-  )
-};
-
-export default Footer;
+export default Footer

src/components/Paragraph.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Paragraph = (props: { children: React.ReactNode}) => {
+    return (
+        <p style={{ margin: "3em auto"}}>
+            {props.children}
+        </p>
+    )
+}
+
+export default Paragraph

src/components/SponsorSection.module.css

@@ -0,0 +1,53 @@
+@keyframes shine {
+    100% {
+        left: 105%;
+    }
+}
+
+.title {
+
+    font-weight: 300;
+    font-size: 3.5em;
+    text-align: center;
+    margin-bottom: 0;
+}
+
+.sponsorContainer {
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 14px auto 24px auto;
+    width: 320px;
+    height: 160px;
+    position: relative;
+    overflow: hidden;
+}
+
+.sponsorImg {
+    max-width: 100%;
+    max-height: 100%;
+    height: auto;
+    width: auto;
+    object-fit: cover;
+    padding: 10px 20px;
+    border-radius: 3px;
+    filter: saturate(0%);
+}
+
+.sponsorContainer::before {
+    background: linear-gradient(to right, #fff3 0%, #fff9 100%);
+    content: "";
+    display: block;
+    height: 100%;
+    left: -75%;
+    position: absolute;
+    top: 0;
+    transform: skewX(-25deg);
+    width: 60%;
+    z-index: 30;
+}
+
+.sponsorContainer:hover::before {
+    animation: shine 0.3s linear;
+}

src/components/SponsorSection.tsx

@@ -0,0 +1,28 @@
+import styles from "./SponsorSection.module.css"
+
+const SponsorSection = () => {
+
+    const sponsors = [
+        {
+            name: "SIG",
+            logo: "/img/sig.svg",
+            link: "https://www.sig.com/"
+        }
+    ]
+
+    return (
+        <section id="sponsors">
+            <h1 className={styles.title}>Proudly sponsored by</h1>
+            {sponsors.map((sponsor) => (
+                <div className={styles.sponsorContainer} id={sponsor.name} key={sponsor.name}>
+                    <a href={sponsor.link} target="_blank" rel="noreferrer">
+                        <img className={styles.sponsorImg} src={sponsor.logo} alt={sponsor.name} />
+                    </a>
+                </div>
+            ))}
+        </section>
+    )
+}
+
+
+export default SponsorSection

src/views/Home/About.tsx

@@ -0,0 +1,31 @@
+import Paragraph from '../../components/Paragraph'
+import styles from './Home.module.css'
+
+const About = () => {
+    return (
+        <main className={styles.section}>
+            <h1 className={styles.title}>About</h1>
+            <Paragraph>
+               UCC Netsoc is a student-run society in UCC (University College Cork). We are a group of students who are passionate about technology, gaming and computer networking. We host events, workshops and competitions throughout the year. We also have a Discord server where we chat and play games together.
+            </Paragraph>
+
+            <Paragraph>
+                UCC Netsoc has a rich history, and a backlog of our committee and HLMs (Honorary Life Members) can be seen on our <a href="https://wiki.netsoc.co/en/about/history">Wiki</a>.
+            </Paragraph>
+
+            <Paragraph>
+                Many UCC Netsoc alumni have gone on to work for big tech companies such as Google, Stripe and more. We are proud of our alumni and the work they do.
+            </Paragraph>
+
+            <Paragraph>
+                We work closely with CSIT students to try help fill in the gap in the curriculum. We host workshops and talks to help students learn more about the tech industry, modern development practices, and more.
+            </Paragraph>
+
+            <Paragraph>
+                Our Esports team "Netsoc Rebels" have gone on to compete in collegiate leagues such as ICE, Legion and Nativz Collegiate.
+            </Paragraph>
+        </main>
+    )
+}
+
+export default About

src/views/Home/Gaming.tsx

@@ -0,0 +1,19 @@
+import Paragraph from '../../components/Paragraph'
+import styles from './Home.module.css'
+
+const Gaming = () => {
+    return (
+        <main className={styles.section}>
+            <h1 className={styles.title}>Gaming</h1>
+            <Paragraph>
+            We host a variety of gaming events, including VR competitions, LAN nights and many more. In addition, we also host General Gaming events, which are a great way to enjoy casual gaming, make new friends, and try out the latest games.
+            </Paragraph>
+
+            <Paragraph>
+               Our eSports team, the Netsoc Rebels, compete in games such as Rocket League, Valorant and League of Legends.
+            </Paragraph>
+        </main>
+    )
+}
+
+export default Gaming 

src/views/Home/Home.module.css

@@ -43,14 +43,21 @@
 .subtitle {
     width: 70%;
 }
+
+.section {
+    width: 98%;
+    max-width: 800px;
+    margin: 0 auto;
+    text-align: center;
+}
 .nav {
     margin-top: 3em;
 }
 .nav ul {
     padding-left: 0 !important;
     text-align: center;
     height: 100%;
-    width: 280px;
+    width: 180px;
     margin: auto;
     list-style-type: none;
     display: flex;
@@ -72,7 +79,7 @@
     font-size: 2.75rem;
     font-weight: 300;
     text-decoration: none;
-    color: rgba(255, 255, 255, 1);
+    color: #fff;
     width: 100%;
     transition: all .3s