diff --git a/public/assets/sponsor_logos/abbvie.svg b/public/assets/sponsor_logos/abbvie.svg new file mode 100644 index 0000000..0fd0cc4 --- /dev/null +++ b/public/assets/sponsor_logos/abbvie.svg @@ -0,0 +1,40 @@ + +image/svg+xml diff --git a/public/assets/sponsor_logos/bloomberg.png b/public/assets/sponsor_logos/bloomberg.png new file mode 100644 index 0000000..7a4cb39 Binary files /dev/null and b/public/assets/sponsor_logos/bloomberg.png differ diff --git a/public/assets/sponsor_logos/bloomberg.svg b/public/assets/sponsor_logos/bloomberg.svg new file mode 100644 index 0000000..99d16b7 --- /dev/null +++ b/public/assets/sponsor_logos/bloomberg.svg @@ -0,0 +1,47 @@ + +image/svg+xml diff --git a/public/assets/sponsor_logos/bp.png b/public/assets/sponsor_logos/bp.png new file mode 100644 index 0000000..17d7a67 Binary files /dev/null and b/public/assets/sponsor_logos/bp.png differ diff --git a/public/assets/sponsor_logos/capital_one.svg b/public/assets/sponsor_logos/capital_one.svg new file mode 100644 index 0000000..cfe5435 --- /dev/null +++ b/public/assets/sponsor_logos/capital_one.svg @@ -0,0 +1,73 @@ + +image/svg+xml diff --git a/public/assets/sponsor_logos/cargill.svg b/public/assets/sponsor_logos/cargill.svg new file mode 100644 index 0000000..faf6db9 --- /dev/null +++ b/public/assets/sponsor_logos/cargill.svg @@ -0,0 +1,64 @@ + +image/svg+xml diff --git a/public/assets/sponsor_logos/cargill2.svg b/public/assets/sponsor_logos/cargill2.svg new file mode 100644 index 0000000..284303c --- /dev/null +++ b/public/assets/sponsor_logos/cargill2.svg @@ -0,0 +1,64 @@ + +image/svg+xml diff --git a/public/assets/sponsor_logos/caterpillar.png b/public/assets/sponsor_logos/caterpillar.png new file mode 100644 index 0000000..273073b Binary files /dev/null and b/public/assets/sponsor_logos/caterpillar.png differ diff --git a/public/assets/sponsor_logos/caterpillar_black.svg b/public/assets/sponsor_logos/caterpillar_black.svg new file mode 100644 index 0000000..1bbfef8 --- /dev/null +++ b/public/assets/sponsor_logos/caterpillar_black.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/sponsors/caterpillar_white.svg b/public/assets/sponsor_logos/caterpillar_white.svg similarity index 100% rename from src/assets/sponsors/caterpillar_white.svg rename to public/assets/sponsor_logos/caterpillar_white.svg diff --git a/public/assets/sponsor_logos/epsilon.jpg b/public/assets/sponsor_logos/epsilon.jpg new file mode 100644 index 0000000..78e206d Binary files /dev/null and b/public/assets/sponsor_logos/epsilon.jpg differ diff --git a/public/assets/sponsor_logos/facebook.svg b/public/assets/sponsor_logos/facebook.svg new file mode 100644 index 0000000..8c1a06e --- /dev/null +++ b/public/assets/sponsor_logos/facebook.svg @@ -0,0 +1 @@ +FACEBOOK_logo_BlueGray_RGB \ No newline at end of file diff --git a/public/assets/sponsor_logos/google.svg b/public/assets/sponsor_logos/google.svg new file mode 100644 index 0000000..61be0c1 --- /dev/null +++ b/public/assets/sponsor_logos/google.svg @@ -0,0 +1,70 @@ + +image/svg+xml diff --git a/public/assets/sponsor_logos/grainger.svg b/public/assets/sponsor_logos/grainger.svg new file mode 100644 index 0000000..b262881 --- /dev/null +++ b/public/assets/sponsor_logos/grainger.svg @@ -0,0 +1,82 @@ + +image/svg+xml diff --git a/public/assets/sponsor_logos/imc.svg b/public/assets/sponsor_logos/imc.svg new file mode 100644 index 0000000..cd567a0 --- /dev/null +++ b/public/assets/sponsor_logos/imc.svg @@ -0,0 +1,260 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/assets/sponsor_logos/optum.svg b/public/assets/sponsor_logos/optum.svg new file mode 100644 index 0000000..d109167 --- /dev/null +++ b/public/assets/sponsor_logos/optum.svg @@ -0,0 +1,127 @@ + +image/svg+xml diff --git a/public/assets/sponsor_logos/reseach_park.svg b/public/assets/sponsor_logos/reseach_park.svg new file mode 100644 index 0000000..ae0d9e5 --- /dev/null +++ b/public/assets/sponsor_logos/reseach_park.svg @@ -0,0 +1,190 @@ + +image/svg+xml diff --git a/public/assets/sponsor_logos/schlumberger.svg b/public/assets/sponsor_logos/schlumberger.svg new file mode 100644 index 0000000..6e9d430 --- /dev/null +++ b/public/assets/sponsor_logos/schlumberger.svg @@ -0,0 +1,73 @@ + +image/svg+xml diff --git a/public/assets/sponsor_logos/silicon_labs.svg b/public/assets/sponsor_logos/silicon_labs.svg new file mode 100644 index 0000000..cf446d4 --- /dev/null +++ b/public/assets/sponsor_logos/silicon_labs.svg @@ -0,0 +1,79 @@ + +image/svg+xml diff --git a/src/assets/home/sponsors/bottom_trees.svg b/src/assets/home/sponsors/bottom_trees.svg new file mode 100644 index 0000000..a380bcc --- /dev/null +++ b/src/assets/home/sponsors/bottom_trees.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/home/sponsors/left_trees.svg b/src/assets/home/sponsors/left_trees.svg new file mode 100644 index 0000000..19be425 --- /dev/null +++ b/src/assets/home/sponsors/left_trees.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/home/sponsors/right_trees.svg b/src/assets/home/sponsors/right_trees.svg new file mode 100644 index 0000000..76ea60c --- /dev/null +++ b/src/assets/home/sponsors/right_trees.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/pages/CodeInTheDark/index.tsx b/src/pages/CodeInTheDark/index.tsx index 04a5a00..04c6174 100644 --- a/src/pages/CodeInTheDark/index.tsx +++ b/src/pages/CodeInTheDark/index.tsx @@ -6,7 +6,6 @@ import clsx from 'clsx'; import 'ace-builds/src-noconflict/mode-html'; import 'ace-builds/src-noconflict/theme-monokai'; -import caterpillar from 'assets/sponsors/caterpillar_white.svg'; import styles from './styles.module.scss'; const starterCode = ` @@ -63,7 +62,7 @@ const CodeInTheDark = (): JSX.Element => {

CODE IN THE DARK

Sponsored by

- Caterpillar logo + Caterpillar logo
diff --git a/src/pages/Home/Sponsors/index.tsx b/src/pages/Home/Sponsors/index.tsx new file mode 100644 index 0000000..e8b7230 --- /dev/null +++ b/src/pages/Home/Sponsors/index.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import clsx from 'clsx'; + +import LEFT_TREES from 'assets/home/sponsors/left_trees.svg'; +import RIGHT_TREES from 'assets/home/sponsors/right_trees.svg'; +import BOTTOM_TREES from 'assets/home/sponsors/bottom_trees.svg'; + +import styles from './styles.module.scss'; +import sponsors from './sponsors.json'; + +const Sponsors = (): JSX.Element => ( +
+ + + + +

Sponsors

+ + {sponsors.map((sponsorList, i) => ( +
+ {sponsorList.map(({ name, image, link }) => ( + + {name} + + ))} +
+ ))} +
+); + +export default Sponsors; diff --git a/src/pages/Home/Sponsors/sponsors.json b/src/pages/Home/Sponsors/sponsors.json new file mode 100644 index 0000000..c899bb1 --- /dev/null +++ b/src/pages/Home/Sponsors/sponsors.json @@ -0,0 +1,23 @@ +[ + [ + { "name": "Cargill", "image": "cargill2.svg", "link": "https://www.cargill.com/" }, + { "name": "Caterpillar", "image": "caterpillar_black.svg", "link": "https://www.caterpillar.com/" } + ], + [ + { "name": "AbbVie", "image": "abbvie.svg", "link": "https://www.abbvie.com/" }, + { "name": "Bloomberg", "image": "bloomberg.png", "link": "https://www.bloomberg.com/" }, + { "name": "Research Park", "image": "reseach_park.svg", "link": "https://researchpark.illinois.edu/" }, + { "name": "Capital One", "image": "capital_one.svg", "link": "https://www.capitalone.com/" }, + { "name": "Facebook", "image": "facebook.svg", "link": "https://www.facebook.com/" }, + { "name": "Google", "image": "google.svg", "link": "https://www.google.com/" }, + { "name": "Grainger", "image": "grainger.svg", "link": "https://www.grainger.com/" }, + { "name": "IMC", "image": "imc.svg", "link": "https://www.imc.com/us/" }, + { "name": "Optum", "image": "optum.svg", "link": "https://www.optum.com/" } + ], + [ + { "name": "BP", "image": "bp.png", "link": "https://www.bp.com/" }, + { "name": "Schlumberger", "image": "schlumberger.svg", "link": "https://www.slb.com/" }, + { "name": "Silicon Labs", "image": "silicon_labs.svg", "link": "https://www.silabs.com/" }, + { "name": "Epsilon", "image": "epsilon.jpg", "link": "https://www.epsilon.com/us"} + ] +] \ No newline at end of file diff --git a/src/pages/Home/Sponsors/styles.module.scss b/src/pages/Home/Sponsors/styles.module.scss new file mode 100644 index 0000000..0dfbcf7 --- /dev/null +++ b/src/pages/Home/Sponsors/styles.module.scss @@ -0,0 +1,99 @@ +.sponsors { + position: relative; + padding-bottom: 200px; + + .leftTrees { + position: absolute; + left: 0; + top: -50px; + @media (max-width: 767px) { + top: -25px; + } + } + + .rightTrees { + position: absolute; + right: 0; + top: -250px; + @media (max-width: 767px) { + display: none; + } + } + + .bottomTrees { + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + @media (min-width: 2250px) { + display: none; + } + } + + .title { + position: relative; + text-align: center; + color: white; + font-weight: 600; + font-size: 1.8em; + text-transform: uppercase; + margin-top: 50px; + @media (max-width: 767px) { + font-size: 1.5em; + margin-bottom: 35px; + } + } + + .sponsorSection { + position: relative; + background-color: rgba(255, 255, 255, 0.88); + width: 70%; + max-width: 1000px; + margin: 40px auto; + border-radius: 35px; + padding: 20px min(10%, 150px); + box-sizing: border-box; + + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 0 40px; + + &.first { + grid-template-columns: 1fr 1fr; + padding: 40px min(10%, 150px); + } + + @media (max-width: 767px) { + gap: 5px 20px; + width: 90%; + margin: 30px auto; + } + + .sponsor { + height: min(10vw, 140px); + background-repeat: no-repeat; + background-position: center center; + background-size: contain; + } + + @media (max-width: 767px) { + &.first { + padding: 30px 10%; + .sponsor { + height: 13vw; + } + } + } + } +} + +// From https://css-tricks.com/inclusively-hidden/ (hides content visually, but still accessible to screen readers) +.srOnly:not(:focus):not(:active) { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index db547d6..8127e53 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -3,6 +3,7 @@ import React from 'react'; import Hero from './Hero'; import EventInfo from './EventInfo'; import FAQ from './FAQ'; +import Sponsors from './Sponsors'; import styles from './styles.module.scss'; @@ -13,6 +14,7 @@ const Home: React.FC = () => ( + );