feat: Add new banner

components/CssScanBanner.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export const CssScanBanner = () => (
+    <a className="block-cssscan" href="https://gumroad.com/a/719368019" target="_blank">
+        <div className="block-cssscan__inner">
+            <p className="block-cssscan__title">Have you seen CSS Scan?</p>
+            <p className="block-cssscan__desc">The fastest and easiest way to check, copy and edit CSS.</p>
+            <p className="block-cssscan__more">Learn more →</p>
+            <img
+                className="block-cssscan__image"
+                src="https://toastlog.com/img/logos/cssscan.svg"
+                alt="CSS Scan logo"
+            />
+        </div>
+    </a>
+);

components/Follow.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react';
 
 export const Follow = () => (
-    <div className='block-follow'>
-        If you find this site helpful, follow me on <a href="https://twitter.com/nghuuphuoc">Twitter</a> and <a href="https://github.com/phuocng">GitHub</a> to get more useful content like this.
+    <div className="block-follow">
+        If you find this site helpful, follow me on <a href="https://twitter.com/nghuuphuoc">Twitter</a> and{' '}
+        <a href="https://github.com/phuocng">GitHub</a> to get more useful content like this.
     </div>
 );

layouts/PatternLayout.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Head from 'next/head';
 import { Heading, Spacer } from '@1milligram/design';
 
-import { Ad } from '../components/Ad';
+import { CssScanBanner } from '../components/CssScanBanner';
 import { Follow } from '../components/Follow';
 import { Pattern } from '../constants/Pattern';
 import { slug } from '../utils/slug';
@@ -30,12 +30,10 @@ export const PatternLayout: React.FC<{
 
             <div className="block-container">
                 <div className="page-home__hero">
-                    <Spacer size="extraLarge" />
+                    <Spacer size="large" />
                     <Heading level={1}>{pattern}</Heading>
                     <Spacer size="large" />
-                    <div className="block-ad">
-                        <Ad />
-                    </div>
+                    <CssScanBanner />
                     <Spacer size="medium" />
                 </div>
                 {children}

pages/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Heading, Spacer } from '@1milligram/design';
 
 import { CoverCard } from '../components/CoverCard';
+import { CssScanBanner } from '../components/CssScanBanner';
 import { Pattern } from '../constants/Pattern';
 import { Layout } from '../layouts/Layout';
 
@@ -14,6 +15,8 @@ const HomePage = () => {
                     <Heading level={1}>CSS Layout</Heading>
                     <Heading level={4}>Popular layouts and patterns made with CSS</Heading>
                     <Spacer size="large" />
+                    <CssScanBanner />
+                    <Spacer size="large" />
                     <div>Following covers are made with CSS only. Inspect them!</div>
                 </div>
 

styles/blocks/_css-scan.scss

@@ -0,0 +1,87 @@
+.block-cssscan {
+    font-family: -apple-system, system-ui, Roboto, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    color: #000;
+    text-decoration: none;
+    display: block;
+}
+
+.block-cssscan__inner {
+    max-width: 1024px;
+    background: #c2fbd7;
+    border-radius: 1rem;
+    padding: 2.5rem;
+    position: relative;
+    overflow: hidden;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px 0;
+    cursor: pointer;
+    text-align: left;
+}
+
+.block-cssscan__title {
+    font-size: 28px;
+    font-weight: bold;
+    margin-bottom: 0;
+    margin-top: 0;
+}
+
+.block-cssscan__desc {
+    opacity: 0.8;
+    color: #333;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+.block-cssscan__more {
+    margin: 0;
+    margin-top: 2em;
+}
+
+.block-cssscan__image {
+    position: absolute;
+    transform: rotate(-7deg);
+    transition: all 0.3s;
+    top: 14%;
+    right: -37%;
+    width: 95%;
+    height: 95%;
+}
+
+.block-cssscan__inner:hover {
+    .block-cssscan__more {
+        text-decoration: underline;
+    }
+
+    .block-cssscan__image {
+        transform: scale(1.1) rotate(-7deg);
+        top: 10%;
+        right: -35%;
+    }
+}
+
+@media screen and (min-width: 0px) and (max-width: 1010px) {
+    .block-cssscan {
+        padding: 0;
+    }
+
+    .block-cssscan__inner {
+        margin-top: 2em;
+        min-height: 300px;
+        border-radius: 0;
+    }
+
+    .block-cssscan__image {
+        top: initial;
+        bottom: -14%;
+        width: 45%;
+        height: 45%;
+        right: -5%;
+    }
+
+    .block-cssscan__inner:hover .block-cssscan__image {
+        top: initial;
+        bottom: -10%;
+        right: -5%;
+        transform: scale(1.1) rotate(-7deg);
+    }
+}

styles/blocks/_follow.scss

@@ -8,4 +8,4 @@
         color: #fff;
         text-decoration: underline;
     }
-}
+}

styles/index.scss

@@ -5,6 +5,7 @@
 @import 'blocks/browser-frame';
 @import 'blocks/code';
 @import 'blocks/cover';
+@import 'blocks/css-scan';
 @import 'blocks/follow';
 @import 'blocks/footer';
 @import 'blocks/header';

tsconfig.json

@@ -1,34 +1,23 @@
 {
-  "compilerOptions": {
-    "outDir": "./dist/",
-    "esModuleInterop": true,
-    "sourceMap": true,
-    "noImplicitAny": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "target": "esnext",
-    "jsx": "preserve",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "incremental": true
-  },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "bin",
-    "node_modules"
-  ]
+    "compilerOptions": {
+        "outDir": "./dist/",
+        "esModuleInterop": true,
+        "sourceMap": true,
+        "noImplicitAny": true,
+        "module": "esnext",
+        "moduleResolution": "node",
+        "target": "esnext",
+        "jsx": "preserve",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowJs": true,
+        "skipLibCheck": true,
+        "strict": false,
+        "forceConsistentCasingInFileNames": true,
+        "noEmit": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "incremental": true
+    },
+    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+    "exclude": ["bin", "node_modules"]
 }