diff --git a/gatsby-config.js b/gatsby-config.js index 44b69ed..11dce2d 100644 --- a/gatsby-config.js +++ b/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", ], diff --git a/package-lock.json b/package-lock.json index fb0b627..44d1c52 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "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", @@ -7569,6 +7570,11 @@ "node": ">=12.13.0" } }, + "node_modules/gatsby-plugin-google-fonts": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/gatsby-plugin-google-fonts/-/gatsby-plugin-google-fonts-1.0.1.tgz", + "integrity": "sha512-p1NVkn27GUnDA5qHM+Z4cCcLCJIardzZXMon3640sT4xuL/AZJbsx3HEt2KY/5oZu0UXIkytkxzV2Da4rQeUIg==" + }, "node_modules/gatsby-plugin-image": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-image/-/gatsby-plugin-image-1.13.0.tgz", @@ -22213,6 +22219,11 @@ "micromatch": "^4.0.4" } }, + "gatsby-plugin-google-fonts": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/gatsby-plugin-google-fonts/-/gatsby-plugin-google-fonts-1.0.1.tgz", + "integrity": "sha512-p1NVkn27GUnDA5qHM+Z4cCcLCJIardzZXMon3640sT4xuL/AZJbsx3HEt2KY/5oZu0UXIkytkxzV2Da4rQeUIg==" + }, "gatsby-plugin-image": { "version": "1.13.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-image/-/gatsby-plugin-image-1.13.0.tgz", diff --git a/package.json b/package.json index 9fffcdd..019d6b8 100644 --- a/package.json +++ b/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", diff --git a/src/components/BackgroundWave/BackgroundWave.tsx b/src/components/BackgroundWave/BackgroundWave.tsx new file mode 100644 index 0000000..a83ba9b --- /dev/null +++ b/src/components/BackgroundWave/BackgroundWave.tsx @@ -0,0 +1,32 @@ +import React from "react"; + +interface Props { + downwards: boolean; +} +const BackgroundWave: React.FC = (props) => { + return ( + + + + + + + + + + ) +}; + +export default BackgroundWave; diff --git a/src/components/SocialMediaButton/SocialMediaButton.tsx b/src/components/SocialMediaButton/SocialMediaButton.tsx new file mode 100644 index 0000000..76a2b0e --- /dev/null +++ b/src/components/SocialMediaButton/SocialMediaButton.tsx @@ -0,0 +1,79 @@ +import React from "react"; +import DiscordIcon from "./discord.svg"; +import FacebookIcon from "./facebook.svg"; +import InstagramIcon from "./instagram.svg"; +import LinkedInIcon from "./linkedin.svg"; +import TwitterIcon from "./twitter.svg"; + +export enum SocialMediaPlatforms { + Discord="discord", + Facebook="facebook", + Instagram="instagram", + LinkedIn="linkedin", + Twitter="twitter", +} + +interface Props{ + destination: SocialMediaPlatforms; +} + +const SocialMediaButton: React.FC = (props) => { + const renderSwitch = (destination: SocialMediaPlatforms) => { + switch(destination) { + case "facebook": + return ( + + Community on Discord + + ); + case "instagram": + return ( + + Community on Discord + + ); + case "linkedin": + return ( + + Community on Discord + + ); + case "twitter": + return ( + + Community on Discord + + ); + case "discord": + default: + return ( + + Community on Discord + + ); + } + } + return renderSwitch(props.destination) +}; + +export default SocialMediaButton; diff --git a/src/components/SocialMediaButton/discord.svg b/src/components/SocialMediaButton/discord.svg new file mode 100644 index 0000000..5c17b0d --- /dev/null +++ b/src/components/SocialMediaButton/discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/SocialMediaButton/facebook.svg b/src/components/SocialMediaButton/facebook.svg new file mode 100644 index 0000000..c337592 --- /dev/null +++ b/src/components/SocialMediaButton/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/SocialMediaButton/instagram.svg b/src/components/SocialMediaButton/instagram.svg new file mode 100644 index 0000000..24e2986 --- /dev/null +++ b/src/components/SocialMediaButton/instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/SocialMediaButton/linkedin.svg b/src/components/SocialMediaButton/linkedin.svg new file mode 100644 index 0000000..3019e86 --- /dev/null +++ b/src/components/SocialMediaButton/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/SocialMediaButton/twitter.svg b/src/components/SocialMediaButton/twitter.svg new file mode 100644 index 0000000..d62380e --- /dev/null +++ b/src/components/SocialMediaButton/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/button/button.scss b/src/components/TextButton/TextButton.scss similarity index 100% rename from src/components/button/button.scss rename to src/components/TextButton/TextButton.scss diff --git a/src/components/button/button.tsx b/src/components/TextButton/TextButton.tsx similarity index 99% rename from src/components/button/button.tsx rename to src/components/TextButton/TextButton.tsx index af419be..dbc7fd7 100644 --- a/src/components/button/button.tsx +++ b/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; diff --git a/src/constants/Strings.tsx b/src/constants/Strings.tsx new file mode 100644 index 0000000..ffe8497 --- /dev/null +++ b/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"; diff --git a/src/custom.d.ts b/src/custom.d.ts new file mode 100644 index 0000000..5cd7cd8 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/images/hero_splash.png b/src/images/hero_splash.png new file mode 100644 index 0000000..154bb70 Binary files /dev/null and b/src/images/hero_splash.png differ diff --git a/src/images/icon.png b/src/images/icon.png deleted file mode 100644 index 38b2fb0..0000000 Binary files a/src/images/icon.png and /dev/null differ diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 1648082..31aa605 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,14 +1,15 @@ +import Footer from "../sections/Footer/Footer"; import * as React from "react"; +import PageHero from "../sections/PageHero/PageHero"; const Home: React.ReactNode = () => { + document.documentElement.setAttribute("theme", "light"); + return (
Home Page -

Initial Home Page

- Gatsby G Logo + +
); }; diff --git a/src/sections/Footer/Footer.scss b/src/sections/Footer/Footer.scss new file mode 100644 index 0000000..5f61c3b --- /dev/null +++ b/src/sections/Footer/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; + margin-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; + } +} diff --git a/src/sections/Footer/Footer.tsx b/src/sections/Footer/Footer.tsx new file mode 100644 index 0000000..2266147 --- /dev/null +++ b/src/sections/Footer/Footer.tsx @@ -0,0 +1,40 @@ +import BackgroundWave from "../../components/BackgroundWave/BackgroundWave"; +import SocialMediaButton from "../../components/SocialMediaButton/SocialMediaButton"; +import { SocialMediaPlatforms } from "../../components/SocialMediaButton/SocialMediaButton"; +import React from "react"; +import "./Footer.scss"; + +function Footer() { + const year = new Date().getFullYear(); + return ( +
+ +
+

Join the Community!

+
+ + + + + +
+

+ Questions?{" "} + + Contact Us + + ! +

+

+ ⓒ Copyright {year} - Upsilon Pi Epsilon at Florida International + University +

+
+
+ ); +} + +export default Footer; diff --git a/src/sections/PageHero/PageHero.scss b/src/sections/PageHero/PageHero.scss new file mode 100644 index 0000000..01a1496 --- /dev/null +++ b/src/sections/PageHero/PageHero.scss @@ -0,0 +1,149 @@ +.sectionContainer { + display: flex; + justify-content: center; + align-items: center; + background-image: linear-gradient(90deg, #fdcf0c, #f89b21); + width: 100%; +} + +.banner { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + min-height: 800px; + width: 100%; +} + +.mainHomeButton { + margin: 8px; +} + +.mainHeader { + color: white; + font-size: 4.8rem; + letter-spacing: 1px; + border-color: #e1e1e1; + margin-bottom: 14px; + text-align: center; + width: 80%; + min-width: 720px; +} + +.mainSubheader { + color: white; + font-size: 2.4rem; + text-align: center; + border-color: #e1e1e1; + margin: 16px; + vertical-align: baseline; + font-weight: bold; + width: 80%; + min-width: 556px; + max-width: 600px; +} + +.wave { + pointer-events: none; + user-select: none; + flex-grow: 10; + margin-top: -1px; +} + +.imageContainer { + display: flex; + flex-direction: column; + vertical-align: middle; + align-items: flex-end; + width: 100%; +} + +.splash { + width: 80%; + max-width: 100vw; +} + +.captionContainer { + display: flex; + flex-direction: column; + vertical-align: middle; + align-items: flex-start; + width: 100%; +} + +.headerContainer { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + vertical-align: baseline; + width: 75%; +} + +.buttonsContainer { + display: flex; + justify-content: center; +} + +.homeEventButton, +.homeDiscordButton { + margin: 16px; + width: 200px; +} + +@media (max-width: 1080px) { + .banner { + flex-direction: column; + align-items: center; + height: max-content; + padding: 0px; + } + + .splash { + margin: 0px; + min-width: 30%; + } + + .imageContainer { + align-items: center; + } + + .headerContainer { + width: 100%; + } + + .mainHeader { + width: 90%; + height: auto; + min-width: 0px; + max-width: 700px; + } + + .mainSubheader { + width: 80%; + height: auto; + min-width: 0px; + } + + @media (max-width: 500px) { + .buttonsContainer { + display: flex; + flex-direction: column; + justify-content: center; + } + + .homeEventButton, + .homeDiscordButton { + margin: 16px; + width: 75vw; + } + + .mainHeader { + font-size: 2.4rem; + } + + .mainSubheader { + font-size: 1.6rem; + } + } +} diff --git a/src/sections/PageHero/PageHero.tsx b/src/sections/PageHero/PageHero.tsx new file mode 100644 index 0000000..fbac88d --- /dev/null +++ b/src/sections/PageHero/PageHero.tsx @@ -0,0 +1,49 @@ +import React from "react"; +import Splash from "../../images/hero_splash.png"; +import { + mainHeaderText, + mainSubHeaderText, + eventsText, + discordText, +} from "../../constants/Strings"; +import { TextButton } from "../../components/TextButton/TextButton"; +import { ColorPalette } from "../../types/theme"; +import BackgroundWave from "../../components/BackgroundWave/BackgroundWave"; +import "./PageHero.scss"; + +const PageHero: React.FC = () => { + return ( +
+
+
+
+ Our Community +
+
+
+

{mainHeaderText}

+

{mainSubHeaderText}

+
+
+ +
+
+ +
+
+
+
+
+
+ +
+ ); +}; + +export default PageHero; diff --git a/tsconfig.json b/tsconfig.json index 57efbab..1d02fd8 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,6 +13,6 @@ "noUnusedParameters": true, "removeComments": false }, - "include": ["./src/**/*"], + "include": ["./src/**/*", "src/custom.d.ts"], "exclude": ["node_modules", "public", ".cache"] }