add sponsors to landing page (#1104)

* add sponsors to landing page

* fix: add more gap between the sponsors

---------

Co-authored-by: ollibowers <[email protected]>

frontend/src/pages/LandingPage/KeyFeaturesSection/styles.ts

@@ -9,7 +9,7 @@ const FeatureTitle = styled.h1`
   position: relative;
   margin-bottom: 75px;
   font-weight: 650;
-  margin-top: 200px;
+  margin-top: 90px;
 `;
 
 const CardsSection = styled.div`

frontend/src/pages/LandingPage/LandingPage.tsx

@@ -6,10 +6,12 @@ import Hero from './Hero';
 import HowToUse from './HowToUse';
 import InteractiveViewSection from './InteractiveViewSection';
 import KeyFeaturesSection from './KeyFeaturesSection';
+import SponsorSection from './SponsorSection';
 
 const LandingPage = () => (
   <>
     <Hero />
+    <SponsorSection />
     <KeyFeaturesSection />
     {inDev && <InteractiveViewSection />}
     <HowToUse />

frontend/src/pages/LandingPage/SponsorSection/SponsorSection.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PageContainer from 'styles/PageContainer';
+import janestreetLogo from 'assets/LandingPage/janestreet.png';
+import tiktokLogo from 'assets/LandingPage/tiktok.svg';
+import S from './styles';
+
+type LogoProps = { src: string; href: string };
+
+const Logo = ({ src, href }: LogoProps) => (
+  <a href={href} target="_blank" rel="noopener noreferrer">
+    <S.LogoImg src={src} />
+  </a>
+);
+
+const SponsorSection = () => (
+  <PageContainer>
+    <S.SponsorsText>Our sponsors</S.SponsorsText>
+    <S.LogosWrapper>
+      <Logo href="https://www.janestreet.com" src={janestreetLogo} />
+      <Logo href="https://www.tiktok.com" src={tiktokLogo} />
+    </S.LogosWrapper>
+  </PageContainer>
+);
+
+export default SponsorSection;

frontend/src/pages/LandingPage/SponsorSection/index.ts

@@ -0,0 +1,3 @@
+import SponsorSection from './SponsorSection';
+
+export default SponsorSection;

frontend/src/pages/LandingPage/SponsorSection/styles.ts

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+const SponsorsText = styled.h1`
+  font-size: 2rem;
+  background: -webkit-linear-gradient(30deg, #9f62de, #b77eff);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-align: center;
+  position: relative;
+  margin-bottom: 1rem;
+  font-weight: 650;
+`;
+
+const LogosWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 4rem;
+`;
+
+const LogoImg = styled.img`
+  height: 100px;
+`;
+
+export default {
+  SponsorsText,
+  LogosWrapper,
+  LogoImg
+};