Media kit (#767)

* add media kit

* add files media kit and texts

* add fonts links and Extra images

* add more info and important notice to participants

* fix shadows in main colors

src/components/navigation/Routes/Routes.tsx

@@ -96,6 +96,7 @@ const Routes: React.FC<RouteComponentProps> = (props) => {
                 path="/docs/Private-Auctions-And-KYC-solutions"
                 strict
               />
+              <Route component={Documentation} exact path="/docs/media-kit" strict />
               <Route component={Documentation} exact path="/docs/faq" strict />
               <Route exact path="/">
                 <Redirect to="/start" />

src/docs/files/devguide11.md

@@ -0,0 +1,35 @@
+### Media kit
+
+#### Every auction that is done using Gnosis Auction can use this Media kit:
+<img src="/assets/media-kit/GA-dark-bg.png" alt="GA Media Kit" />
+
+[Download this file in SVG format (dark background)](/assets/media-kit/GA-MediaKit-dark-bg.svg). Also we have a light background version to [download in SVG format](/assets/media-kit/GA-MediaKit-withe-bg.svg).
+
+**Important notice to auction participants:**
+
+Gnosis Auction enables permissionless P2P auctions applying a batch auction mechanism without the need for intermediaries. Auctions are initiated and organised by the auctioneers. Gnosis Auction and GnosisDAO do not control, initiate or organise auctions nor are we involved with the auctioneers. Please do your own due diligence before participating in an auction.
+
+
+#### Typography
+
+Typography is a major part of the Gnosis brand. We've taken care to select a family of fonts that promote legibility and accessibility.
+
+We use [**Averta** font family](https://www.fonts.com/font/intelligent-design/averta?QueryFontType=Web&src=GoogleWebFonts) as a first choice. Otherwise we use [**Poppins**](https://fonts.google.com/specimen/Poppins?query=Poppins).
+
+#### Colors
+<img src="/assets/media-kit/main-colors.svg" alt="GA colors" width="40%"/>
+
+We use this colors (hex): 
+- Dark Blue: #001429
+- Orange: #E8663D 
+- White: #FFFFFF
+
+### Extra images archive
+This images are available in .png image format.
+
+<img src="/assets/media-kit/GA-logo-text-white.png" alt="GA Logo" width="70%"/>
+
+<img src="/assets/media-kit/GA-logo-white.png" alt="GA Logo"/> 
+
+<img src="/assets/media-kit/GA-logo-orange.png" alt="GA Logo"/>
+

src/pages/Documentation/index.tsx

@@ -15,6 +15,7 @@ import participateAsAuctioneerDocMarkdown from '../../docs/files/devguide06.md'
 import faqDocMarkdown from '../../docs/files/devguide07.md'
 import startingAnAuctionWithSafe from '../../docs/files/devguide08.md'
 import privateAuctionsAndKYCSolutions from '../../docs/files/devguide09.md'
+import mediaKitDocMarkdown from '../../docs/files/devguide11.md'
 
 const Wrapper = styled.div`
   padding-bottom: 50px;
@@ -180,6 +181,7 @@ export const Documentation: React.FC = (props) => {
       fetchGuide(startingAnAuctionWithSafe)
     if (location.pathname === '/docs/private-auctions-and-KYC-solutions')
       fetchGuide(privateAuctionsAndKYCSolutions)
+    if (location.pathname === '/docs/media-kit') fetchGuide(mediaKitDocMarkdown)
     if (location.pathname === '/docs/faq') fetchGuide(faqDocMarkdown)
   }, [location, fetchGuide])
 
@@ -212,6 +214,9 @@ export const Documentation: React.FC = (props) => {
           <IndexLink activeClassName="isActive" to="/docs/private-auctions-and-KYC-solutions">
             Private auctions/KYC solutions
           </IndexLink>
+          <IndexLink activeClassName="isActive" to="/docs/media-kit">
+            Media kit
+          </IndexLink>
           <IndexLink activeClassName="isActive" to="/docs/faq#topAnchor">
             FAQ
           </IndexLink>