FormidableLabs · manosim · Jan 10, 2022 · Jan 10, 2022 · Jan 10, 2022 · Jan 10, 2022
diff --git a/website/package.json b/website/package.json
@@ -14,9 +14,9 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "2.0.0-beta.7",
-    "@docusaurus/preset-classic": "2.0.0-beta.7",
-    "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.7",
+    "@docusaurus/core": "2.0.0-beta.14",
+    "@docusaurus/preset-classic": "2.0.0-beta.14",
+    "@docusaurus/remark-plugin-npm2yarn": "^2.0.0-beta.14",
     "@mdx-js/react": "^1.6.21",
     "@svgr/webpack": "^5.5.0",
     "clsx": "^1.1.1",
@@ -39,7 +39,7 @@
     ]
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.0.0-beta.7",
+    "@docusaurus/module-type-aliases": "^2.0.0-beta.14",
     "@tsconfig/docusaurus": "^1.0.4",
     "typescript": "^4.4.4"
   }

diff --git a/website/src/components/Hero/index.tsx b/website/src/components/Hero/index.tsx
@@ -26,10 +26,11 @@ export const Hero = () => {
           <div className="col col--6">
             <LogoBadge className={styles.logoBadge} />
             <h1 className="hero__title">{siteConfig.title}</h1>
-            <p className="hero__subtitle">{siteConfig.tagline}</p>
+            <h2 className={styles.heroSubtitle}>{siteConfig.tagline}</h2>
+
             <div className={styles.buttons}>
               <Link
-                className="button button--secondary button--lg"
+                className={`button button--secondary button--lg ${styles.ctaButton}`}
                 to="/docs/introduction/getting-started"
               >
                 Get Started

diff --git a/website/src/components/Hero/styles.module.css b/website/src/components/Hero/styles.module.css
@@ -4,6 +4,7 @@
  */
 
 .heroBanner {
+  background-color: var(--brand-blue);
   position: relative;
   z-index: 1;
   padding: 2rem;
@@ -12,6 +13,7 @@
 
 .heroBanner:after {
   background: inherit;
+  border-bottom: 10px solid var(--brand-orange);
   content: '';
   display: block;
   height: 50%;
@@ -26,18 +28,18 @@
   -webkit-backface-visibility: hidden;
 }
 
+.heroSubtitle {
+  font-weight: 500;
+  margin-bottom: 2rem;
+}
+
 @media screen and (min-width: 966px) {
   .heroBanner {
-    padding: 2rem 0 4rem;
-    margin-bottom: 5rem;
+    padding: 3rem 0 4rem;
+    margin-bottom: 10rem;
   }
 }
 
-.buttons {
-  display: flex;
-  align-items: center;
-}
-
 .logoBadge {
   max-width: 8rem;
   margin-bottom: 0.75rem;
@@ -54,3 +56,16 @@
     margin-top: 0;
   }
 }
+
+.buttons {
+  display: flex;
+  align-items: center;
+}
+
+.buttons .ctaButton {
+  border-radius: 3px;
+  border-color: var(--brand-orange);
+  background-color: var(--brand-orange);
+  color: white;
+  padding: 0.75rem 1.75rem;
+}
diff --git a/website/src/components/HomepageFeatures/index.tsx b/website/src/components/HomepageFeatures/index.tsx
@@ -6,6 +6,7 @@ import styles from './styles.module.css';
 const FeatureList = [
   {
     title: 'Take screenshots from your app',
+    imageSource: '/images/homepage/mockup.png',
     description: (
       <>
         Owl was designed make it easy to add visual regression testing to your
@@ -15,14 +16,15 @@ const FeatureList = [
   },
   {
     title: 'Compare screenshots taken',
+    Svg: require('../../../static/images/homepage/diff.svg').default,
+    svgClassName: styles.visualExample,
     description: (
       <>We've created a simple api for capturing and comparing screenshots.</>
     ),
   },
   {
     title: 'View the differences',
-    Svg: require('../../../static/images/homepage/visual-example.svg').default,
-    svgClassName: styles.visualExample,
+    imageSource: '/images/homepage/report.png',
     description: (
       <>
         Owl clearly highlights all visual differences, so no need to play
@@ -33,23 +35,28 @@ const FeatureList = [
 ];
 
 export const HomepageFeatures = () => {
-  return FeatureList.map(({ Svg, svgClassName, title, description }, idx) => {
-    return (
-      <section key={idx}>
-        <div className={styles.feature}>
-          <h3>{title}</h3>
-          <p className="hero__subtitle">{description}</p>
+  return FeatureList.map(
+    ({ Svg, svgClassName, title, description, imageSource }, idx) => {
+      return (
+        <section key={idx}>
+          <div className={styles.feature}>
+            <h2>{title}</h2>
+            <p className="hero__subtitle">{description}</p>
 
-          <div className="padding--md">
-            {!!Svg && (
-              <Svg
-                className={svgClassName ? svgClassName : styles.featureSvg}
-                alt={title}
-              />
-            )}
+            <div className="padding--md">
+              {!!imageSource && (
+                <img src={imageSource} className={styles.sectionImageMockup} />
+              )}
+              {!!Svg && (
+                <Svg
+                  className={svgClassName ? svgClassName : styles.featureSvg}
+                  alt={title}
+                />
+              )}
+            </div>
           </div>
-        </div>
-      </section>
-    );
-  });
+        </section>
+      );
+    }
+  );
 };
diff --git a/website/src/components/HomepageFeatures/styles.module.css b/website/src/components/HomepageFeatures/styles.module.css
@@ -1,10 +1,16 @@
 .feature {
   background-color: var(--ifm-color-secondary);
-  padding: 3rem;
+  padding: 2rem;
   margin: 1rem auto;
   text-align: center;
 }
 
+@media (min-width: 1416px) {
+  .feature {
+    padding: 3rem;
+  }
+}
+
 .featureSvg {
   width: 100%;
   max-width: 10rem;
@@ -16,3 +22,8 @@
   max-width: 35rem;
   max-height: 15rem;
 }
+
+.sectionImageMockup {
+  max-width: 40rem;
+  width: 100%;
+}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -6,18 +6,13 @@
 
 /* You can override the default Infima variables here. */
 :root {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: rgb(33, 175, 144);
-  --ifm-color-primary-darker: rgb(31, 165, 136);
-  --ifm-color-primary-darkest: rgb(26, 136, 112);
-  --ifm-color-primary-light: rgb(70, 203, 174);
-  --ifm-color-primary-lighter: rgb(102, 212, 189);
-  --ifm-color-primary-lightest: rgb(146, 224, 208);
-  --ifm-code-font-size: 95%;
+  --brand-blue: #1e2852;
+  --brand-orange: #f04d21;
 
   --ifm-navbar-height: 4.25rem;
 
   --ifm-h3-font-size: 2.2rem;
+  --ifm-code-font-size: 95%;
 }
 
 html[data-theme='dark'] {
@@ -27,8 +22,8 @@ html[data-theme='dark'] {
 .navbar--dark,
 .hero--dark,
 .footer--dark {
-  --ifm-navbar-background-color: #303846;
-  --ifm-footer-background-color: #303846;
+  --ifm-navbar-background-color: var(--brand-blue);
+  --ifm-footer-background-color: var(--brand-blue);
   box-shadow: initial;
 }
 
@@ -55,3 +50,59 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
   background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
     no-repeat;
 }
+
+/* Content */
+
+.main-wrapper {
+  max-width: 1400px;
+  width: 1400px;
+  align-self: center;
+}
+
+@media (max-width: 1416px) {
+  .main-wrapper {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+.homepage {
+  width: 100%;
+  max-width: 100%;
+}
+
+.homepage main {
+  padding: 0 2rem;
+}
+
+.homepage .intro {
+  font-size: 1.25rem;
+}
+
+/* Navbar */
+
+.navbar .navbar__inner {
+  max-width: 1360px;
+  margin: 0 auto;
+}
+
+@media (max-width: 1416px) {
+  .main-wrapper {
+    max-width: 100%;
+    width: 100%;
+  }
+}
+
+/* Footer */
+
+.footer {
+  margin-top: 3rem;
+  padding: 2rem;
+}
+
+@media (min-width: 1416px) {
+  .footer {
+    margin-top: 5rem;
+    padding: var(--ifm-footer-padding-horizontal);
+  }
+}
diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx
@@ -9,17 +9,19 @@ export default function Home() {
     <Layout
       title="Visual Regression Testing"
       description="Description will go into a meta tag in <head />"
+      wrapperClassName="homepage"
     >
       <Hero />
       <main className="container">
-        <p>
-          This library enables developers to introduce visual regression tests
-          to their apps for <strong>iOS</strong> and <strong>Android</strong>.
-          Being heavily inspired by{' '}
-          <a href="https://wix.github.io/Detox/">Detox</a>, an end-to-end
-          testing and automation framework, this library uses a similar API that
-          makes setting up react-native-owl and running the tests locally and on
-          your preferred CI service, seamless.
+        <h2>About</h2>
+        <p className="intro">
+          This visual regression testing for React Native library enables
+          developers to introduce visual regression tests to their apps for{' '}
+          <strong>iOS</strong> and <strong>Android</strong>. Being heavily
+          inspired by <a href="https://wix.github.io/Detox/">Detox</a>, an
+          end-to-end testing and automation framework, this library uses a
+          similar API that makes setting up react-native-owl and running the
+          tests locally and on your preferred CI service, seamless.
         </p>
 
         {/* REMOVE INITIALLY AS THIS WILL BE DEPLOYED BEFORE THE BLOG IN PUBLISHED

diff --git a/website/src/theme/Footer/index.tsx b/website/src/theme/Footer/index.tsx
@@ -14,7 +14,9 @@ export default function Footer() {
   return (
     <footer className="footer footer--dark">
       <div className="container container--fluid">
-        <FormidableLogo className={styles.footerLogo} />
+        <a href="https://formidable.com">
+          <FormidableLogo className={styles.footerLogo} />
+        </a>
       </div>
 
       <div className="container container--fluid">

diff --git a/website/static/images/homepage/diff.svg b/website/static/images/homepage/diff.svg
diff --git a/website/static/images/homepage/mockup.png b/website/static/images/homepage/mockup.png
diff --git a/website/static/images/homepage/report.png b/website/static/images/homepage/report.png