Frontend starter

gatsby-config.js

@@ -11,6 +11,13 @@ module.exports = {
         dataset: "production",
       },
     },
+    {
+      resolve: `gatsby-plugin-google-fonts`,
+      options: {
+        fonts: [`Poppins\:300,400,700,900`, `source sans pro\:300,400,700,900`],
+        display: "swap",
+      },
+    },
     "gatsby-plugin-sass",
     "gatsby-plugin-typescript",
   ],

package.json

@@ -22,6 +22,7 @@
   },
   "dependencies": {
     "gatsby": "^3.13.0",
+    "gatsby-plugin-google-fonts": "^1.0.1",
     "gatsby-plugin-image": "^1.13.0",
     "gatsby-plugin-sass": "^4.13.0",
     "gatsby-plugin-typescript": "^3.13.0",

src/components/BackgroundWave/BackgroundWave.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+
+interface Props {
+  downwards: boolean;
+}
+const BackgroundWave: React.FC<Props> = (props) => {
+  return props.downwards ? (
+    <svg
+      className={"wave"}
+      style={{ marginTop: "-4px" }}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1440 320"
+    >
+      <defs>
+        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stop-color="#f89b21" />
+          <stop offset="100%" stop-color="#fdcf0c" />
+        </linearGradient>
+      </defs>
+      <path
+        fill="url(#gradient)"
+        fill-opacity="1"
+        transform="scale(-1, 1)"
+        transform-origin="center"
+        d="M0,224L60,186.7C120,149,240,75,360,64C480,53,600,107,720,144C840,181,960,203,1080,197.3C1200,192,1320,160,1380,144L1440,128L1440,0L1380,0C1320,0,1200,0,1080,0C960,0,840,0,720,0C600,0,480,0,360,0C240,0,120,0,60,0L0,0Z"
+      ></path>
+    </svg>
+  ) : (
+    <svg
+      className={"wave"}
+      style={{ marginBottom: "-4px" }}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1440 320"
+    >
+      <defs>
+        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop offset="0%" stop-color="#f89b21" />
+          <stop offset="100%" stop-color="#fdcf0c" />
+        </linearGradient>
+      </defs>
+      <path
+        fill="url(#gradient)"
+        fill-opacity="1"
+        transform="scale(-1, 1)"
+        transform-origin="center"
+        d="M0,224L60,186.7C120,149,240,75,360,64C480,53,600,107,720,144C840,181,960,203,1080,197.3C1200,192,1320,160,1380,144L1440,128L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"
+      ></path>
+    </svg>
+  );
+};
+
+export default BackgroundWave;

src/components/SocialMediaButtons/DiscordButton/DiscordButton.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import DiscordIcon from "./discord.svg";
+
+const DiscordButton: React.FC = () => {
+  return (
+    <a href="https://discordapp.com/invite/upefiu">
+      <img
+        className={"socialMediaIcon"}
+        src={DiscordIcon}
+        alt="Community on Discord"
+      />
+    </a>
+  );
+};
+
+export default DiscordButton;

src/components/SocialMediaButtons/FacebookButton/FacebookButton.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import FacebookIcon from "./facebook.svg";
+
+const FacebookButton: React.FC = () => {
+  return (
+    <a href="https://www.facebook.com/upefiu">
+      <img
+        className={"socialMediaIcon"}
+        src={FacebookIcon}
+        alt="Community on Discord"
+      />
+    </a>
+  );
+};
+
+export default FacebookButton;

src/components/SocialMediaButtons/InstagramButton/InstagramButton.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import InstagramIcon from "./instagram.svg";
+
+const InstagramButton: React.FC = () => {
+  return (
+    <a href="https://www.instagram.com/upefiu">
+      <img
+        className={"socialMediaIcon"}
+        src={InstagramIcon}
+        alt="Community on Discord"
+      />
+    </a>
+  );
+};
+
+export default InstagramButton;

src/components/SocialMediaButtons/LinkedInButton/LinkedInButton.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import LinkedInIcon from "./linkedin.svg";
+
+const LinkedInButton: React.FC = () => {
+  return (
+    <a href="https://www.linkedin.com/company/upe-fiu">
+      <img
+        className={"socialMediaIcon"}
+        src={LinkedInIcon}
+        alt="Community on Discord"
+      />
+    </a>
+  );
+};
+
+export default LinkedInButton;

src/components/SocialMediaButtons/TwitterButton/TwitterButton.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import TwitterIcon from "./twitter.svg";
+
+const TwitterButton: React.FC = () => {
+  return (
+    <a href="https://twitter.com/upefiu">
+      <img
+        className={"socialMediaIcon"}
+        src={TwitterIcon}
+        alt="Community on Discord"
+      />
+    </a>
+  );
+};
+
+export default TwitterButton;

src/components/button/button.tsx → src/components/TextButton/TextButton.tsx

@@ -10,7 +10,7 @@ import {
   isGradient,
 } from "../../types/theme";
 import * as CSS from "csstype";
-import "./button.scss";
+import "./TextButton.scss";
 
 // Shorthand property types
 export type BackgroundColor = ColorPalette | CSS.Property.BackgroundColor;

src/constants/Strings.tsx

@@ -0,0 +1,8 @@
+export const mainHeaderText =
+  "Join the Leading Student Tech Community in Miami!";
+
+export const mainSubHeaderText =
+  "A large tech-based community that aims to provide every student with the opportunity to develop professionally and technically.\n All majors and skill levels are welcomed!";
+
+export const discordText = "Discord";
+export const eventsText = "Events";

src/custom.d.ts

@@ -0,0 +1,9 @@
+declare module "*.svg" {
+    const content: any;
+    export default content;
+}
+
+declare module "*.png" {
+    const content: any;
+    export default content;
+}

src/pages/index.tsx

@@ -1,14 +1,15 @@
+import Footer from "../sections/Footer";
 import * as React from "react";
+import PageHero from "../sections/PageHero";
 
 const Home: React.ReactNode = () => {
+  document.documentElement.setAttribute("theme", "light");
+
   return (
     <main>
       <title>Home Page</title>
-      <h1>Initial Home Page</h1>
-      <img
-        alt="Gatsby G Logo"
-        src="data:image/svg+xml,%3Csvg width='24' height='24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2a10 10 0 110 20 10 10 0 010-20zm0 2c-3.73 0-6.86 2.55-7.75 6L14 19.75c3.45-.89 6-4.02 6-7.75h-5.25v1.5h3.45a6.37 6.37 0 01-3.89 4.44L6.06 9.69C7 7.31 9.3 5.63 12 5.63c2.13 0 4 1.04 5.18 2.65l1.23-1.06A7.959 7.959 0 0012 4zm-8 8a8 8 0 008 8c.04 0 .09 0-8-8z' fill='%23639'/%3E%3C/svg%3E"
-      />
+      <PageHero />
+      <Footer />
     </main>
   );
 };

src/sections/Footer.scss

@@ -0,0 +1,68 @@
+h1,
+h2 {
+  font-weight: 900;
+  font-size: 3.2rem;
+  text-align: center;
+  width: 100%;
+  color: white;
+}
+
+footer {
+  background-image: linear-gradient(90deg, #fdcf0c, #f89b21);
+}
+
+.socialMediaIconTitle {
+  font-size: 3.2rem;
+}
+
+.copyright {
+  text-align: right;
+  bottom: 0;
+  font-weight: 100;
+  font-size: 1.6rem;
+  max-width: 100vw;
+}
+
+footer p {
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.75);
+  padding: 32px;
+}
+
+.contactUsTitle {
+  color: white;
+}
+
+.socialMediaTitle {
+  margin-top: 0;
+}
+
+.socialMediaIconContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.socialMediaIcon {
+  width: 5vw;
+  max-width: 75px;
+  min-width: 40px;
+  margin: 12px;
+}
+
+@media (max-width: 1080px) {
+  .copyright {
+    text-align: center;
+  }
+}
+
+@media (max-width: 500px) {
+  h1,
+  h2 {
+    font-size: 2.4rem;
+  }
+
+  .copyright {
+    font-size: 1rem;
+  }
+}

src/sections/Footer.tsx

@@ -0,0 +1,43 @@
+import BackgroundWave from "../components/BackgroundWave/BackgroundWave";
+import DiscordButton from "../components/SocialMediaButtons/DiscordButton/DiscordButton";
+import FacebookButton from "../components/SocialMediaButtons/FacebookButton/FacebookButton";
+import InstagramButton from "../components/SocialMediaButtons/InstagramButton/InstagramButton";
+import LinkedInButton from "../components/SocialMediaButtons/LinkedInButton/LinkedInButton";
+import TwitterButton from "../components/SocialMediaButtons/TwitterButton/TwitterButton";
+import React from "react";
+import "./Footer.scss";
+
+function Footer() {
+  const year = new Date().getFullYear();
+  return (
+    <div>
+      <BackgroundWave downwards={false} />
+      <footer>
+        <h1 className={"socialMediaTitle"}>Join the Community!</h1>
+        <div className={"socialMediaIconContainer"}>
+          <DiscordButton />
+          <LinkedInButton />
+          <InstagramButton />
+          <FacebookButton />
+          <TwitterButton />
+        </div>
+        <h1>
+          Questions?{" "}
+          <a
+            className={"contactUsTitle"}
+            href="mailto:[email protected]?Subject=...Question%20regarding%20UPE!"
+          >
+            Contact Us
+          </a>
+          !
+        </h1>
+        <p className={"copyright"}>
+          ⓒ Copyright {year} - Upsilon Pi Epsilon at Florida International
+          University
+        </p>
+      </footer>
+    </div>
+  );
+}
+
+export default Footer;