Add sponsors section to homepage (#284)

* Update stats

* Add sponsors section

* Run prettier

* Reset linter changes to pass tslint

.github/cdk/main.ts

@@ -1,25 +1,29 @@
-import { Construct } from "constructs";
-import { App, Stack, Workflow } from "cdkactions";
-import { DeployJob, ReactProject } from "@pennlabs/kraken";
+import { Construct } from 'constructs'
+import { App, Stack, Workflow } from 'cdkactions'
+import { DeployJob, ReactProject } from '@pennlabs/kraken'
 
 export class WebsiteStack extends Stack {
   constructor(scope: Construct, name: string) {
-    super(scope, name);
+    super(scope, name)
     const workflow = new Workflow(this, 'build-and-deploy', {
       name: 'Build and Deploy',
       on: 'push',
-    });
+    })
 
     const websiteJob = new ReactProject(workflow, {
       imageName: 'website',
-    });
+    })
 
-    new DeployJob(workflow, {}, {
-      needs: [websiteJob.publishJobId]
-    });
+    new DeployJob(
+      workflow,
+      {},
+      {
+        needs: [websiteJob.publishJobId],
+      },
+    )
   }
 }
 
-const app = new App();
-new WebsiteStack(app, 'website');
-app.synth();
+const app = new App()
+new WebsiteStack(app, 'website')
+app.synth()

.github/cdk/tsconfig.json

@@ -6,9 +6,7 @@
     "experimentalDecorators": true,
     "inlineSourceMap": true,
     "inlineSources": true,
-    "lib": [
-      "es2018"
-    ],
+    "lib": ["es2018"],
     "module": "CommonJS",
     "noEmitOnError": true,
     "noFallthroughCasesInSwitch": true,
@@ -24,10 +22,6 @@
     "stripInternal": true,
     "target": "ES2018"
   },
-  "include": [
-    "**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules"]
 }

k8s/tsconfig.json

@@ -6,9 +6,7 @@
     "experimentalDecorators": true,
     "inlineSourceMap": true,
     "inlineSources": true,
-    "lib": [
-      "es2016"
-    ],
+    "lib": ["es2016"],
     "module": "CommonJS",
     "noEmitOnError": true,
     "noFallthroughCasesInSwitch": true,
@@ -24,10 +22,6 @@
     "stripInternal": true,
     "target": "ES2017"
   },
-  "include": [
-    "**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["**/*.ts"],
+  "exclude": ["node_modules"]
 }

src/blog/spot-postmortem.md

@@ -73,4 +73,4 @@ To solve these issues more quickly in the future, we should have better alerting
 
 ## Reach Out
 
-If any of this looks like it's up your alley or you wanna learn more about our mission, be sure to email us at [[email protected]](mailto:[email protected]) or [apply to be a part of Labs](https://pennlabs.org/apply)! We've got some fantastic teams working on interesting problems with a direct impact on campus.
+If any of this looks like it's up your alley or you wanna learn more about our mission, be sure to email us at [[email protected]](mailto:[email protected]) or [apply to be a part of Labs](https://pennlabs.org/apply)! We've got some fantastic teams working on interesting problems with a direct impact on campus.

src/components/Blog/Byline.tsx

@@ -1,7 +1,11 @@
 import React from 'react'
 import { Link, useStaticQuery, graphql } from 'gatsby'
 import styled from 'styled-components'
-import { FluidObject, GatsbyImageFluidProps, GatsbyImageProps } from 'gatsby-image'
+import {
+  FluidObject,
+  GatsbyImageFluidProps,
+  GatsbyImageProps,
+} from 'gatsby-image'
 import BackgroundImage from 'gatsby-background-image'
 
 import { TEAM_MEMBER_ROUTE, HOME_ROUTE } from '../../constants/routes'
@@ -83,7 +87,9 @@ const Byline = ({ authors }: { authors: IMember[] }) => {
     )
   }
 
-  const getMemberImage = (localImage: { childImageSharp: GatsbyImageFluidProps }) =>
+  const getMemberImage = (localImage: {
+    childImageSharp: GatsbyImageFluidProps
+  }) =>
     (localImage &&
       localImage.childImageSharp &&
       localImage.childImageSharp.fluid) ||

src/components/Blog/MemberBio.tsx

@@ -73,7 +73,6 @@ const StyledCenteredFlex = styled(CenteredFlex)`
 const MemberBio = ({
   author: { pennkey, localImage, bio = '', name },
 }: IMemberBioProps): React.ReactElement => {
-
   // Bios may contain markdown. Make sure to parse these into HTML!
   const [bioAsHtml, updateBioAsHtml] = useState(bio)
   markdownProcessor
@@ -84,12 +83,16 @@ const MemberBio = ({
     <Fade distance={M1}>
       <Card shaded>
         <StyledCenteredFlex>
-          <Thumbnail src={(localImage?.childImageSharp.fluid as FluidObject).src} />
+          <Thumbnail
+            src={(localImage?.childImageSharp.fluid as FluidObject).src}
+          />
           <div>
             <H4 mb2>{name}</H4>
             <Bio dangerouslySetInnerHTML={{ __html: bioAsHtml }} />
 
-            <div style={{ transform: 'scale(0.8)', transformOrigin: 'top left' }}>
+            <div
+              style={{ transform: 'scale(0.8)', transformOrigin: 'top left' }}
+            >
               <Link to={TEAM_MEMBER_ROUTE(pennkey)}>
                 Learn more <LinkChevronRightIcon />
               </Link>

src/components/Home/Sponsors.tsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import { useStaticQuery, graphql } from 'gatsby'
+import Img from 'gatsby-image'
+
+import {
+  H1,
+  P,
+  Container,
+  Section,
+  Row,
+  Col,
+  ParallaxWrapper,
+  Fade,
+  Blob2,
+} from '../../shared'
+import { M2 } from '../../constants/measurements'
+
+export const Sponsors = (): React.ReactElement => {
+  const data = useStaticQuery(graphql`
+    query {
+      jane_street: file(relativePath: { eq: "sponsors/jane_street.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 500, quality: 100) {
+            ...GatsbyImageSharpFluid
+          }
+        }
+      }
+    }
+  `)
+
+  const logos = [
+    {
+      fluid: data.jane_street.childImageSharp.fluid,
+      alt: 'Jane Street',
+    },
+  ]
+
+  return (
+    <Section>
+      <Blob2 />
+      <Container>
+        <ParallaxWrapper>
+          <Fade delay={400}>
+            <div>
+              <H1>Sponsors</H1>
+              <P>
+                Sponsors help us keep our tools online and support our mission
+                to improve the Penn community with open-source, student-built
+                products. Reach out to us at [email protected] for more
+                information on our sponsorship packages and prospectus.
+              </P>
+            </div>
+          </Fade>
+          <Fade delay={800}>
+            <Row margin={M2}>
+              {logos.map(({ fluid, alt }) => (
+                <Col sm={12} md={4} key={alt}>
+                  <div style={{ padding: '1rem', textAlign: 'center' }}>
+                    <Img
+                      fluid={fluid}
+                      alt={alt}
+                      style={{ maxWidth: '60%', height: 'auto' }}
+                    />
+                  </div>
+                </Col>
+              ))}
+            </Row>
+          </Fade>
+        </ParallaxWrapper>
+      </Container>
+    </Section>
+  )
+}

src/components/Home/Stats.tsx

@@ -52,7 +52,7 @@ interface IStat {
 const stats: IStat[] = [
   {
     colorAlpha: TEAL_ALPHA,
-    title: '9 years',
+    title: '12 years',
     description: 'of supporting the Penn community',
   },
   {

src/components/Home/index.tsx

@@ -3,13 +3,15 @@ import React from 'react'
 import { Hero } from './Hero'
 import { Stats } from './Stats'
 import { Products } from './Products'
+import { Sponsors } from './Sponsors'
 import { Mailchimp } from './Mailchimp'
 
 export default () => (
   <>
     <Hero />
     <Stats />
     <Products />
+    <Sponsors />
     <Mailchimp />
   </>
 )

src/components/Team/TeamMemberPreview.tsx

@@ -16,7 +16,7 @@ import { TEAM_MEMBER_ROUTE } from '../../constants/routes'
 import { BLACK_ALPHA } from '../../constants/colors'
 import { IMember } from '../../types'
 
-const StyledLink = styled(Link) <{}>`
+const StyledLink = styled(Link)<{}>`
   width: calc(100% + ${M2} + ${M2});
   padding: ${M2};
   border-radius: ${BORDER_RADIUS_LG};
@@ -52,9 +52,9 @@ export const TeamMemberPreview = ({
 }: IMember) => (
   <Col margin={M2} sm={12} md={6} lg={3} key={pennkey}>
     <StyledLink to={TEAM_MEMBER_ROUTE(pennkey)}>
-      {
-        localImage?.childImageSharp.fluid && <Image fluid={localImage.childImageSharp.fluid} />
-      }
+      {localImage?.childImageSharp.fluid && (
+        <Image fluid={localImage.childImageSharp.fluid} />
+      )}
       <P mb1 lg>
         <strong>{name}</strong>
       </P>

src/json/alumni/aanten.json

@@ -6,9 +6,7 @@
   "bio": "Hi! I'm a sophomore studying math & CS in the college and an avid proponent of Buffalo Wild Wings.",
   "hometown": "Long Island, NY",
   "team": "Penn Mobile",
-  "roles": [
-    "iOS Mobile Engineer"
-  ],
+  "roles": ["iOS Mobile Engineer"],
   "photo": "https://i.imgur.com/i271XGY.jpg",
   "linkedin": "https://www.linkedin.com/in/andrew-antenberg/",
   "website": "",

src/json/alumni/anagwekar.json

@@ -16,4 +16,3 @@
   "graduation_year": 2025,
   "job": null
 }
-

src/json/alumni/annajg.json

@@ -6,9 +6,7 @@
   "bio": "My holy trinity consists of painting, pasta, and Percy Jackson. Also a VSCO HB2 enthusiast :)",
   "hometown": "Edison, NJ",
   "team": "Penn Mobile",
-  "roles": [
-    "Designer"
-  ],
+  "roles": ["Designer"],
   "photo": "https://i.imgur.com/acetToI.jpg",
   "linkedin": "https://www.linkedin.com/in/annasjiang/",
   "website": "https://annasjiang.github.io/",
@@ -17,4 +15,4 @@
   "alumnus": true,
   "graduation_year": 2023,
   "job": null
-}
+}

src/json/alumni/annawang.json

@@ -6,9 +6,7 @@
   "bio": "former wii fit user",
   "hometown": "Saratoga, CA",
   "team": "Penn Mobile",
-  "roles": [
-    "Designer"
-  ],
+  "roles": ["Designer"],
   "photo": "https://i.imgur.com/QAXyuBW.jpg",
   "linkedin": "https://www.linkedin.com/in/annalinwang/",
   "website": "http://annalinwang.com/",
@@ -17,4 +15,4 @@
   "alumnus": true,
   "graduation_year": 2023,
   "job": null
-}
+}

src/json/alumni/annipan.json

@@ -6,9 +6,7 @@
   "bio": "Hi there! I'm a sophomore at Penn studying CIS + MATH. In my free time I can be found playing with my cat, practicing guitar, reading or sleeping ;)",
   "hometown": "Nanjing, China",
   "team": "Penn Mobile",
-  "roles": [
-    "Backend Engineer"
-  ],
+  "roles": ["Backend Engineer"],
   "photo": "https://i.imgur.com/S1kfAT4.jpg",
   "linkedin": "https://www.linkedin.com/in/anni-pan-17b95b179/",
   "website": "https://annypan.github.io/personal_website/",
@@ -17,4 +15,4 @@
   "alumnus": true,
   "graduation_year": 2023,
   "job": null
-}
+}

src/json/alumni/astrike.json

@@ -6,9 +6,7 @@
   "bio": "Backend Dev on Penn mobile, CIS Major 2023 :)",
   "hometown": "Johannesburg, South Africa",
   "team": "Penn Mobile",
-  "roles": [
-    "Backend Engineer"
-  ],
+  "roles": ["Backend Engineer"],
   "photo": "https://i.imgur.com/lXMeM7y.jpg",
   "linkedin": null,
   "website": null,
@@ -17,4 +15,4 @@
   "alumnus": true,
   "graduation_year": 2023,
   "job": null
-}
+}

src/json/alumni/avnia.json

@@ -6,9 +6,7 @@
   "bio": "I'm a sophomore studying Comp + Cog Sci and hopefully minoring in Creative Writing. I love movies, food, and playing obscure board games with my siblings :)",
   "hometown": "New York City",
   "team": "Penn Courses",
-  "roles": [
-    "Designer"
-  ],
+  "roles": ["Designer"],
   "photo": "https://i.imgur.com/V4RclNb.png",
   "linkedin": null,
   "website": null,
@@ -17,4 +15,4 @@
   "alumnus": true,
   "graduation_year": 2022,
   "job": null
-}
+}

src/json/alumni/bqle.json

@@ -16,4 +16,3 @@
   "graduation_year": 2025,
   "job": null
 }
-