feat: cleanup hero (#179)

website/docusaurus.config.js

@@ -8,8 +8,6 @@ module.exports = {
       {
         docs: {
           path: '../docs',
-          showLastUpdateAuthor: true,
-          showLastUpdateTime: true,
           sidebarPath: require.resolve('./sidebars.js')
         },
         theme: {
@@ -23,21 +21,7 @@ module.exports = {
   themeConfig: {
     footer: {
       copyright: 'Copyright © 2018 The Manael Authors.',
-      links: [
-        {
-          items: [
-            {
-              label: 'Introduction',
-              to: 'docs/introduction'
-            },
-            {
-              label: 'Installation',
-              to: 'docs/installation'
-            }
-          ],
-          title: 'Docs'
-        }
-      ],
+      links: [],
       style: 'dark'
     },
     navbar: {
@@ -56,7 +40,7 @@ module.exports = {
         }
       ],
       logo: {
-        alt: '',
+        alt: 'Manael Logo',
         src: 'img/manael.png'
       },
       title: 'Manael'

website/src/pages/index.jsx

@@ -43,14 +43,22 @@ function Home() {
   const { siteConfig = {} } = context
   return (
     <Layout description="Manael is a simple HTTP proxy for processing images.">
-      <header className={classnames('hero hero--primary', styles.heroBanner)}>
+      <header className={classnames('hero hero--dark', styles.heroBanner)}>
         <div className="container">
-          <h1 className="hero__title">{siteConfig.title}</h1>
+          <h1 className="hero__title">
+            <img
+              alt={siteConfig.title}
+              className={classnames('margin-vert--md', styles.heroBannerLogo)}
+              height={128}
+              src={useBaseUrl('img/logo.png')}
+              width={128}
+            />
+          </h1>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
           <div className={styles.buttons}>
             <Link
               className={classnames(
-                'button button--secondary button--lg',
+                'button button--primary button--lg',
                 styles.getStarted
               )}
               to={useBaseUrl('docs/introduction')}
@@ -62,7 +70,7 @@ function Home() {
       </header>
       <main>
         {features && features.length && (
-          <section className={styles.features}>
+          <section className={classnames('padding-vert--xl', styles.features)}>
             <div className="container">
               <div className="row">
                 {features.map((props, idx) => (

website/src/pages/styles.module.css

@@ -1,16 +1,20 @@
 .heroBanner {
-  padding: 4rem 0;
+  padding: 6rem 0;
   text-align: center;
   position: relative;
   overflow: hidden;
 }
 
 @media screen and (max-width: 966px) {
   .heroBanner {
-    padding: 2rem;
+    padding: 4rem 2rem;
   }
 }
 
+.heroBannerLogo {
+  border-radius: 6px;
+}
+
 .buttons {
   display: flex;
   align-items: center;