Add blog system to the landing page

This commit is contained in:
Michael
2022-01-19 14:42:43 +01:00
parent a85e672f9f
commit 659cad427e
4 changed files with 22 additions and 8 deletions

View File

@@ -1,10 +1,12 @@
import CardLanding from 'components/UI/CardLanding'; import CardLanding from 'components/UI/CardLanding';
import cardAuth from 'public/landing/auth.svg'; import cardAuth from 'public/landing/auth.svg';
import cardBlog from 'public/landing/blog.svg';
import cardFee from 'public/landing/lifetime.svg'; import cardFee from 'public/landing/lifetime.svg';
import cardPage from 'public/landing/page.svg'; import cardPage from 'public/landing/page.svg';
import cardResponsive from 'public/landing/responsive.svg'; import cardResponsive from 'public/landing/responsive.svg';
import cardServer from 'public/landing/backend.svg'; import cardServer from 'public/landing/backend.svg';
import cardStripe from 'public/landing/stripe.svg'; import cardStripe from 'public/landing/stripe.svg';
import cardTS from 'public/landing/TS.svg';
import cardTheme from 'public/landing/theme.svg'; import cardTheme from 'public/landing/theme.svg';
const CardsLanding = (): JSX.Element => ( const CardsLanding = (): JSX.Element => (
@@ -33,6 +35,11 @@ const CardsLanding = (): JSX.Element => (
text="Auth and user management with Supabase" text="Auth and user management with Supabase"
title="Auth" title="Auth"
/> />
<CardLanding
image={cardBlog as string}
text="An easy to use blog system with MDX support"
title="Blog"
/>
<CardLanding <CardLanding
image={cardResponsive as string} image={cardResponsive as string}
text="Mobile ready, fully responsive and customizable with Tailwind CSS" text="Mobile ready, fully responsive and customizable with Tailwind CSS"
@@ -43,6 +50,11 @@ const CardsLanding = (): JSX.Element => (
text="Custom themes available and easily switch to dark mode" text="Custom themes available and easily switch to dark mode"
title="Themes" title="Themes"
/> />
<CardLanding
image={cardTS as string}
text="The entire code base is in Typescript, with ESLint and Prettier already configured."
title="Typescript"
/>
<CardLanding <CardLanding
image={cardStripe as string} image={cardStripe as string}
text="Stripe integration. Fully functional subscription system" text="Stripe integration. Fully functional subscription system"

1
public/landing/TS.svg Normal file
View File

@@ -0,0 +1 @@
<svg id="SvgjsSvg1006" width="288" height="288" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs"><defs id="SvgjsDefs1007"></defs><g id="SvgjsG1008" transform="matrix(1,0,0,1,0,0)"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="288" height="288"><path d="M1.125 0C.502 0 0 .502 0 1.125v21.75C0 23.498.502 24 1.125 24h21.75c.623 0 1.125-.502 1.125-1.125V1.125C24 .502 23.498 0 22.875 0zm17.363 9.75c.612 0 1.154.037 1.627.111a6.38 6.38 0 0 1 1.306.34v2.458a3.95 3.95 0 0 0-.643-.361 5.093 5.093 0 0 0-.717-.26 5.453 5.453 0 0 0-1.426-.2c-.3 0-.573.028-.819.086a2.1 2.1 0 0 0-.623.242c-.17.104-.3.229-.393.374a.888.888 0 0 0-.14.49c0 .196.053.373.156.529.104.156.252.304.443.444s.423.276.696.41c.273.135.582.274.926.416.47.197.892.407 1.266.628.374.222.695.473.963.753.268.279.472.598.614.957.142.359.214.776.214 1.253 0 .657-.125 1.21-.373 1.656a3.033 3.033 0 0 1-1.012 1.085 4.38 4.38 0 0 1-1.487.596c-.566.12-1.163.18-1.79.18a9.916 9.916 0 0 1-1.84-.164 5.544 5.544 0 0 1-1.512-.493v-2.63a5.033 5.033 0 0 0 3.237 1.2c.333 0 .624-.03.872-.09.249-.06.456-.144.623-.25.166-.108.29-.234.373-.38a1.023 1.023 0 0 0-.074-1.089 2.12 2.12 0 0 0-.537-.5 5.597 5.597 0 0 0-.807-.444 27.72 27.72 0 0 0-1.007-.436c-.918-.383-1.602-.852-2.053-1.405-.45-.553-.676-1.222-.676-2.005 0-.614.123-1.141.369-1.582.246-.441.58-.804 1.004-1.089a4.494 4.494 0 0 1 1.47-.629 7.536 7.536 0 0 1 1.77-.201zm-15.113.188h9.563v2.166H9.506v9.646H6.789v-9.646H3.375z" fill="#35558a" class="color000 svgShape"></path></svg></g></svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

8
public/landing/blog.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27">
<g id="Icon_feather-pen-tool" data-name="Icon feather-pen-tool" transform="translate(-1.701 -1.701)">
<path id="Tracé_699" data-name="Tracé 699" d="M21.5,31.5l-.071,0a1,1,0,0,1-.729-.4l-3-4a1,1,0,0,1,.093-1.307l8-8A1,1,0,0,1,27.1,17.7l4,3a1,1,0,0,1,.107,1.507l-9,9A1,1,0,0,1,21.5,31.5Zm-1.68-4.906,1.788,2.384,7.369-7.369L26.594,19.82Z" transform="translate(-2.799 -2.799)" fill="#35558a"/>
<path id="Tracé_700" data-name="Tracé 700" d="M16.7,23.7a1,1,0,0,1-.217-.024l-9-2a1,1,0,0,1-.747-.709l-5-18A1,1,0,0,1,2.968,1.737l18,5a1,1,0,0,1,.709.747l2,9a1,1,0,0,1-.269.924l-6,6A1,1,0,0,1,16.7,23.7ZM8.5,19.855l7.878,1.751,5.224-5.224L19.855,8.5,4.138,4.138Z" fill="#35558a"/>
<path id="Tracé_701" data-name="Tracé 701" d="M12.7,13.7a1,1,0,0,1-.707-.293l-10-10A1,1,0,0,1,3.408,1.993l10,10A1,1,0,0,1,12.7,13.7Z" fill="#35558a"/>
<path id="Tracé_702" data-name="Tracé 702" d="M15.66,12.66a5.194,5.194,0,0,1,2.5.626,2.7,2.7,0,0,1,1.5,2.374,4.462,4.462,0,0,1-4,4,2.7,2.7,0,0,1-2.374-1.5,5.194,5.194,0,0,1-.626-2.5A2.731,2.731,0,0,1,15.66,12.66Zm0,5a2.169,2.169,0,0,0,1.3-.7,2.169,2.169,0,0,0,.7-1.3c0-.572-1.056-1-2-1a1.191,1.191,0,0,0-.8.2,1.191,1.191,0,0,0-.2.8C14.66,16.6,15.088,17.66,15.66,17.66Z" transform="translate(-1.96 -1.96)" fill="#35558a"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@@ -1,8 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27"> <svg xmlns="http://www.w3.org/2000/svg" fill="#35558a" width="24" height="24" viewBox="0 0 24 24"><path d="M4 11h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1zm1-6h4v4H5V5zm15-2h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-1 6h-4V5h4v4zm-9 12a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6zm-5-6h4v4H5v-4zm13-1h-2v2h-2v2h2v2h2v-2h2v-2h-2z"></path></svg>
<g id="Icon_feather-pen-tool" data-name="Icon feather-pen-tool" transform="translate(-1.701 -1.701)">
<path id="Tracé_699" data-name="Tracé 699" d="M21.5,31.5l-.071,0a1,1,0,0,1-.729-.4l-3-4a1,1,0,0,1,.093-1.307l8-8A1,1,0,0,1,27.1,17.7l4,3a1,1,0,0,1,.107,1.507l-9,9A1,1,0,0,1,21.5,31.5Zm-1.68-4.906,1.788,2.384,7.369-7.369L26.594,19.82Z" transform="translate(-2.799 -2.799)" fill="#35558a"/>
<path id="Tracé_700" data-name="Tracé 700" d="M16.7,23.7a1,1,0,0,1-.217-.024l-9-2a1,1,0,0,1-.747-.709l-5-18A1,1,0,0,1,2.968,1.737l18,5a1,1,0,0,1,.709.747l2,9a1,1,0,0,1-.269.924l-6,6A1,1,0,0,1,16.7,23.7ZM8.5,19.855l7.878,1.751,5.224-5.224L19.855,8.5,4.138,4.138Z" fill="#35558a"/>
<path id="Tracé_701" data-name="Tracé 701" d="M12.7,13.7a1,1,0,0,1-.707-.293l-10-10A1,1,0,0,1,3.408,1.993l10,10A1,1,0,0,1,12.7,13.7Z" fill="#35558a"/>
<path id="Tracé_702" data-name="Tracé 702" d="M15.66,12.66a5.194,5.194,0,0,1,2.5.626,2.7,2.7,0,0,1,1.5,2.374,4.462,4.462,0,0,1-4,4,2.7,2.7,0,0,1-2.374-1.5,5.194,5.194,0,0,1-.626-2.5A2.731,2.731,0,0,1,15.66,12.66Zm0,5a2.169,2.169,0,0,0,1.3-.7,2.169,2.169,0,0,0,.7-1.3c0-.572-1.056-1-2-1a1.191,1.191,0,0,0-.8.2,1.191,1.191,0,0,0-.2.8C14.66,16.6,15.088,17.66,15.66,17.66Z" transform="translate(-1.96 -1.96)" fill="#35558a"/>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 411 B