feat(react): improve react hero banner + links

packages/cra-template/template/src/App.tsx

@@ -2,6 +2,7 @@ import React, {useEffect} from 'react';
 import SearchPage from './Components/SearchPage';
 import Hero from './Components/Hero';
 import logo from './logo.svg';
+import coveologo from './coveologo.svg';
 import {BrowserRouter as Router, Route} from 'react-router-dom';
 import {Grid, Typography, Box} from '@material-ui/core';
 import {initializeHeadlessEngine} from './common/Engine';
@@ -47,10 +48,9 @@ const Home = () => {
     return (
       <div className="App">
         <Hero
-          logo={logo}
+          logos={[logo, coveologo]}
           welcome="Welcome to Your Coveo React.js Search Page"
         />
-        {/* <div>dsadsadsa</div> */}
         {engine && <SearchPage engine={engine} />}
       </div>
     );

packages/cra-template/template/src/Components/Hero.css

@@ -1,5 +1,5 @@
 .App-logo {
-  height: 40vmin;
+  height: 30vmin;
   pointer-events: none;
 }
 
@@ -32,3 +32,7 @@
 .App-header a {
   color: #1cebcf;
 }
+
+.logo-container {
+  margin: 2rem;
+}

packages/cra-template/template/src/Components/Hero.tsx

@@ -1,20 +1,30 @@
-import {Typography} from '@material-ui/core';
+import {Grid, Typography} from '@material-ui/core';
 import React from 'react';
 import './Hero.css';
 
 interface IHeroProps {
-  logo: string;
+  logos: string[];
   welcome: string;
 }
 
-function Anchor(props: any) {
+interface IAnchorProps {
+  href: string;
+  value: string;
+}
+
+function Anchor(props: IAnchorProps) {
   return <a href={props.href}>{props.value}</a>;
 }
 
 const Hero: React.FunctionComponent<IHeroProps> = (props) => {
   return (
     <header className="App-header">
-      <img src={props.logo} className="App-logo" alt="logo" />
+      <Grid className="logo-container">
+        {props.logos.map((logo) => (
+          <img src={logo} className="App-logo" alt="logo" />
+        ))}
+      </Grid>
+
       <Typography variant="h5">{props.welcome}</Typography>
       <Typography variant="body1">
         This sample search page was built with{' '}
@@ -37,12 +47,15 @@ const Hero: React.FunctionComponent<IHeroProps> = (props) => {
         and save to reload.
       </Typography>
 
+      <Typography variant="subtitle1" component="h6">
+        Customize your search page theme
+      </Typography>
       <Typography variant="body1">
         You can customize your theme by modifying the{' '}
         <b>
           <code>src/theme.tsx</code>
-        </b>{' '}
-        file. For more information about theme customization, visit{' '}
+        </b>
+        . For more information about theme customization, visit{' '}
         <Anchor
           href="https://material-ui.com/customization/theming/"
           value="Material-ui theming"
@@ -57,22 +70,16 @@ const Hero: React.FunctionComponent<IHeroProps> = (props) => {
         <li>
           <Anchor
             href="https://docs.coveo.com/en/headless"
-            value="Coveo Connect"
-          />
-        </li>
-        <li>
-          <Anchor
-            href="https://connect.coveo.com/"
-            value="Coveo Headless Library"
+            value="Coveo Headless documentation"
           />
         </li>
         <li>
-          <Anchor href="https://reactjs.org" value="Learn React" />
+          <Anchor href="https://reactjs.org" value="React documentation" />
         </li>
         <li>
           <Anchor
-            href="https://material-ui.com/getting-started/usage/"
-            value="Learn Material-UI"
+            href="https://material-ui.com/"
+            value="Material-ui Documentation"
           />
         </li>
       </ul>