From 423756939067ad914ff6040ad90748ca9660bbcc Mon Sep 17 00:00:00 2001
From: Elio Struyf <info@estruyf.be>
Date: Sat, 11 Sep 2021 09:17:03 +0200
Subject: [PATCH] Added cloudinary

---
 docs/components/Page/CTA.tsx  |  6 +++++-
 docs/components/Page/Hero.tsx | 13 +++++++------
 docs/pages/index.tsx          |  4 ++--
 3 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/docs/components/Page/CTA.tsx b/docs/components/Page/CTA.tsx
index c2e09407..3678d6b6 100644
--- a/docs/components/Page/CTA.tsx
+++ b/docs/components/Page/CTA.tsx
@@ -38,7 +38,11 @@ export const CTA: React.FunctionComponent<ICTAProps> = (props: React.PropsWithCh
       <div className="sm:mx-auto sm:max-w-3xl sm:px-6">
         <div className={`py-12 sm:relative sm:py-16 lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2`}>
           <div className={`relative sm:mx-auto sm:max-w-3xl sm:px-0 lg:-mr-40 lg:max-w-none lg:h-full lg:pl-12`}>
-            <img className={`w-full lg:h-full lg:w-auto lg:max-w-none`} src={`/assets/site-preview.png`} alt={`Front Matter - Headless CMS - Live page preview`} />
+            <img 
+              className={`w-full lg:h-full lg:w-auto lg:max-w-none`} 
+              src={`https://res.cloudinary.com/estruyf/image/upload/h_710,w_1256/v1631342259/site-preview_fakwnq.png`} 
+              alt={`Front Matter - Headless CMS - Live page preview`}
+              loading={`lazy`} />
           </div>
         </div>
       </div>
diff --git a/docs/components/Page/Hero.tsx b/docs/components/Page/Hero.tsx
index 16b52f59..f8a84f1e 100644
--- a/docs/components/Page/Hero.tsx
+++ b/docs/components/Page/Hero.tsx
@@ -1,6 +1,5 @@
 import Link from 'next/link';
 import * as React from 'react';
-import { useTranslation } from 'react-i18next';
 
 export interface IHeroProps {
   view: "left" | "right";
@@ -16,8 +15,8 @@ export interface IHeroProps {
 export const Hero: React.FunctionComponent<IHeroProps> = ({view, title, description, imgSrc, imgAlt, link, linkText, className}: React.PropsWithChildren<IHeroProps>) => {
 
   return (
-    <div className={`overflow-hidden lg:relative`}>
-      <div className={`${className || ""} px-4 sm:px-6 xl:px-0 py-12 sm:py-16 lg:relative lg:mx-auto lg:max-w-7xl lg:grid lg:grid-cols-2 lg:grid-flow-col-dense lg:gap-24`}>
+    <div className={`px-4 sm:px-0 py-8 overflow-hidden lg:relative lg:py-48`}>
+      <div className={`${className || ""} mx-auto sm:max-w-3xl sm:px-6 lg:px-8 lg:max-w-7xl lg:grid lg:grid-cols-2 lg:gap-24`}>
         <div className={`max-w-3xl mx-auto lg:py-48 lg:max-w-none lg:mx-0 lg:px-0 ${view === "left" ? `lg:col-start-2` : `lg:col-start-1`}`}>
           <div>
             <h2 className="text-3xl lg:text-3xl xl:text-4xl tracking-tight font-extrabold sm:leading-none">
@@ -43,10 +42,12 @@ export const Hero: React.FunctionComponent<IHeroProps> = ({view, title, descript
             }
           </div>
         </div>
+      </div>
 
-        <div className={`sm:mx-auto sm:max-w-3xl sm:px-6 lg:px-0 lg:mx-0 lg:max-w-none mt-12 sm:mt-16 lg:mt-0 ${view === "left" ? `lg:col-start-1` : `lg:col-start-2`}`}>
-          <div className={`${view === "left" ? `lg:pr-6 lg:-ml-16` : `lg:pl-6 lg:-mr-16`} lg:px-0 lg:m-0 lg:relative lg:h-full`}>
-            <img className={`w-full rounded-xl lg:absolute lg:h-full lg:w-auto lg:max-w-none ${view === "left" ? `lg:right-0` : `lg:left-0`}`} 
+      <div className={`sm:mx-auto sm:max-w-3xl sm:px-6`}>
+        <div className={`py-12 sm:relative sm:py-16 lg:absolute lg:inset-y-0 lg:w-1/2 ${view === "left" ? `lg:left-0` : `lg:right-0`}`}>
+          <div className={`relative sm:mx-auto sm:max-w-3xl sm:px-0 lg:max-w-none lg:h-full ${view === "left" ? `` : `lg:-mr-40 lg:pl-12`}`}>
+            <img className={`w-full lg:h-full lg:w-auto lg:max-w-none ${view === "left" ? `lg:absolute lg:right-0` : ''}`} 
                 src={imgSrc}
                 alt={imgAlt} />
           </div>
diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
index f85b04cf..86b4e707 100644
--- a/docs/pages/index.tsx
+++ b/docs/pages/index.tsx
@@ -32,7 +32,7 @@ const Home: NextPage = () => {
               </p>
             </>
           )}
-          imgSrc={"/assets/dashboard.png"}
+          imgSrc={"https://res.cloudinary.com/estruyf/image/upload/h_710,w_1256/dpr_3.0/v1631342303/dashboard_bdu3xl.png"}
           imgAlt={"Front Matter CMS editor dashboard of your static site content"}
           link={`/docs/getting-started`}
           linkText={strings(`hero_button_primary`)} />
@@ -42,7 +42,7 @@ const Home: NextPage = () => {
           view={"right"}
           title={strings(`hero_media_title`)}
           description={strings(`hero_media_description`)}
-          imgSrc={"/assets/media.png"}
+          imgSrc={"https://res.cloudinary.com/estruyf/image/upload/h_710,w_1256/dpr_3.0/v1631342349/media_p1nhry.png"}
           imgAlt={"Front Matter CMS - media management was never easier in VS Code"}
           link={`/docs/dashboard`}
           linkText={strings(`hero_media_button_primary`)}