Added cloudinary

This commit is contained in:
Elio Struyf
2021-09-11 09:17:03 +02:00
parent 01b1b3d0ea
commit 4237569390
3 changed files with 14 additions and 9 deletions
+5 -1
View File
@@ -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>
+7 -6
View File
@@ -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>
+2 -2
View File
@@ -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`)}