img blur, revert twin.macro, optimize font import

components/benefits.js

@@ -19,6 +19,7 @@ export default function Benefits(props) {
               height="482"
               alt="Benefits"
               layout="intrinsic"
+              placeholder="blur"
             />
           </div>
         </div>

components/data.js

@@ -7,10 +7,13 @@ import {
   SunIcon,
 } from "@heroicons/react/outline";
 
+import benefitOneImg from "/public/img/benefit-one.png";
+import benefitTwoImg from "/public/img/benefit-two.png";
+
 const benefitOne = {
   title: "Highlight your benefits",
   desc: "You can use this space to highlight your first benefit or a feature of your product. It can also contain an image or Illustration like in the example along with some bullet points.",
-  image: "/img/benefit-one.png",
+  image: benefitOneImg,
   bullets: [
     {
       title: "Understand your customers",
@@ -33,7 +36,7 @@ const benefitOne = {
 const benefitTwo = {
   title: "Offer more benefits here",
   desc: "You can use this same layout with a flip image to highlight your rest of the benefits of your product. It can also contain an image or Illustration as above section along with some bullet points.",
-  image: "/img/benefit-two.png",
+  image: benefitTwoImg,
   bullets: [
     {
       title: "Mobile Responsive Template",

components/hero.js

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import Container from "./container";
+import heroImg from "/public/img/hero.png";
 
 export default function Hero() {
   return (
@@ -48,12 +49,11 @@ export default function Hero() {
         <div className="flex items-center justify-center w-full lg:w-1/2">
           <div className="hidden lg:block">
             <Image
-              src="/img/hero.png"
-              width="600"
-              height="600"
+              src={heroImg}
               alt="Hero Illustration"
               layout="intrinsic"
               loading="eager"
+              placeholder="blur"
             />
           </div>
         </div>

components/testimonials.js

@@ -2,6 +2,10 @@ import Image from "next/image";
 import React from "react";
 import Container from "./container";
 
+import userOneImg from "/public/img/user1.jpg";
+import userTwoImg from "/public/img/user2.jpg";
+import userThreeImg from "/public/img/user3.jpg";
+
 export default function Testimonials() {
   return (
     <Container>
@@ -14,7 +18,7 @@ export default function Testimonials() {
             </p>
 
             <Avatar
-              image="/img/user1.jpg"
+              image={userOneImg}
               name="Sarah Steiner"
               title="VP Sales at Google"
             />
@@ -28,7 +32,7 @@ export default function Testimonials() {
             </p>
 
             <Avatar
-              image="/img/user2.jpg"
+              image={userTwoImg}
               name="Dylan Ambrose"
               title="Lead marketer at Netflix"
             />
@@ -42,7 +46,7 @@ export default function Testimonials() {
             </p>
 
             <Avatar
-              image="/img/user3.jpg"
+              image={userThreeImg}
               name="Gabrielle Winn"
               title="Co-founder of Acme Inc"
             />
@@ -63,6 +67,7 @@ function Avatar(props) {
           height="40"
           alt="Avatar"
           layout="responsive"
+          placeholder="blur"
         />
       </div>
       <div>

css/tailwind.css

@@ -3,8 +3,6 @@
 @tailwind utilities;
 
 @layer base {
-  @import url("https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap");
-
   html,
   body {
     @apply dark:bg-trueGray-900;

pages/_document.js

@@ -1,21 +1,42 @@
-import Document, { Html, Head, Main, NextScript } from "next/document";
-import { extractCritical } from "@emotion/server";
+// import Document, { Html, Head, Main, NextScript } from "next/document";
+// import { extractCritical } from "@emotion/server";
 
-export default class MyDocument extends Document {
-  static async getInitialProps(ctx) {
-    const initialProps = await Document.getInitialProps(ctx);
-    const page = await ctx.renderPage();
-    const styles = extractCritical(page.html);
-    return { ...initialProps, ...page, ...styles };
-  }
+// export default class MyDocument extends Document {
+//   static async getInitialProps(ctx) {
+//     const initialProps = await Document.getInitialProps(ctx);
+//     const page = await ctx.renderPage();
+//     const styles = extractCritical(page.html);
+//     return { ...initialProps, ...page, ...styles };
+//   }
+
+//   render() {
+//     return (
+//       <Html lang="en">
+//         <Head>
+//           <style
+//             data-emotion-css={this.props.ids.join(" ")}
+//             dangerouslySetInnerHTML={{ __html: this.props.css }}
+//           />
+//         </Head>
+//         <body>
+//           <Main />
+//           <NextScript />
+//         </body>
+//       </Html>
+//     );
+//   }
+// }
 
+import Document, { Html, Head, Main, NextScript } from "next/document";
+
+class MyDocument extends Document {
   render() {
     return (
-      <Html lang="en">
+      <Html>
         <Head>
-          <style
-            data-emotion-css={this.props.ids.join(" ")}
-            dangerouslySetInnerHTML={{ __html: this.props.css }}
+          <link
+            href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap"
+            rel="stylesheet"
           />
         </Head>
         <body>
@@ -26,3 +47,5 @@ export default class MyDocument extends Document {
     );
   }
 }
+
+export default MyDocument;

postcss.config.js

@@ -5,4 +5,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};