Add directory ratings on hero

components/directory-ratings.tsx

@@ -0,0 +1,40 @@
+import { FunctionComponent } from 'react';
+
+const DirectoryRatings: FunctionComponent = function () {
+  return (
+    <div className='d-flex flex-wrap justify-content-between'>
+      <div>
+        <a href='https://www.g2.com/products/mockoon-mockoon' target='_blank'>
+          <img
+            src='/images/directories/g2.png'
+            alt='G2 rating 4.5'
+            width='150'
+            className='img-fluid'
+          />
+        </a>
+      </div>
+      <div>
+        <a href='https://www.capterra.com/p/211671/Mockoon/' target='_blank'>
+          <img
+            src='/images/directories/capterra.png'
+            alt='Capterra rating 4.5'
+            width='150'
+            className='img-fluid'
+          />
+        </a>
+      </div>
+      <div>
+        <a href='https://www.producthunt.com/products/mockoon' target='_blank'>
+          <img
+            src='/images/directories/producthunt.png'
+            alt='Producthunt rating 5'
+            width='150'
+            className='img-fluid'
+          />
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default DirectoryRatings;

components/hero.tsx

@@ -10,6 +10,7 @@ const Hero: FunctionComponent<{
   mainPictureWidth?: number;
   mainPictureHeight?: number;
   mainPictureSkewed?: boolean;
+  children?: React.ReactNode;
 }> = function ({
   title,
   subtitle,
@@ -19,7 +20,8 @@ const Hero: FunctionComponent<{
   mainPictureAlt,
   mainPictureWidth,
   mainPictureHeight,
-  mainPictureSkewed
+  mainPictureSkewed,
+  children
 }) {
   mainPictureSkewed = mainPictureSkewed ?? true;
 
@@ -90,6 +92,7 @@ const Hero: FunctionComponent<{
               </div>
             )}
             {ctaContent}
+            <div className='mt-8'>{children}</div>
           </div>
           {mainPicture && (
             <div className='col-12 col-lg-6 mt-10 mt-lg-0'>

pages/cloud.tsx

@@ -1,5 +1,6 @@
 import AlternatedFeatures from '../components/alternated-features';
 import CompanyLogos from '../components/company-logos';
+import DirectoryRatings from '../components/directory-ratings';
 import Hero from '../components/hero';
 import Meta from '../components/meta';
 import OssCloudComparison from '../components/oss-cloud-comparison';
@@ -106,7 +107,9 @@ export default function () {
         mainPicture='/images/cloud-hero.svg'
         mainPictureAlt='Mockoon logo in the cloud interconnected with other services'
         mainPictureSkewed={false}
-      />
+      >
+        <DirectoryRatings />
+      </Hero>
 
       <section className='py-6 py-md-8 border-top bg-gradient-light-white'>
         <CompanyLogos />

pages/index.tsx

@@ -2,6 +2,7 @@ import { FunctionComponent, useEffect, useState } from 'react';
 import AlternatedFeatures from '../components/alternated-features';
 import Card from '../components/card';
 import CompanyLogos from '../components/company-logos';
+import DirectoryRatings from '../components/directory-ratings';
 import Hero from '../components/hero';
 import Meta from '../components/meta';
 import Quote from '../components/quote';
@@ -178,7 +179,9 @@ const HomePage: FunctionComponent = function () {
         mainPictureAlt='Mockoon screenshot with people working'
         mainPictureWidth={1200}
         mainPictureHeight={783}
-      />
+      >
+        <DirectoryRatings />
+      </Hero>
       <section>
         <div className='container'>
           <Quote colorScheme='warning'>