add sponsors to landing page (#1104)

* add sponsors to landing page

* fix: add more gap between the sponsors

---------

Co-authored-by: ollibowers <80164276+ollibowers@users.noreply.github.com>

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
+};