Addition of three 404 Notfound templates

src/blocks/index.js

@@ -119,6 +119,14 @@ import DarkHeroD from './hero/dark/d';
 import DarkHeroE from './hero/dark/e';
 import DarkHeroF from './hero/dark/f';
 
+import LightNotfoundA from './notfound/light/a';
+import LightNotfoundB from './notfound/light/b';
+import LightNotfoundC from './notfound/light/c';
+
+import DarkNotfoundA from './notfound/dark/a';
+import DarkNotfoundB from './notfound/dark/b';
+import DarkNotfoundC from './notfound/dark/c';
+
 import LightPricingA from './pricing/light/a';
 import LightPricingB from './pricing/light/b';
 
@@ -228,6 +236,11 @@ export default function getBlock({theme = 'indigo', darkMode = false}) {
       HeroE: darkMode ? <DarkHeroE theme={theme} /> : <LightHeroE theme={theme} />,
       HeroF: darkMode ? <DarkHeroF theme={theme} /> : <LightHeroF theme={theme} />
     },
+    Notfound: {
+      NotfoundA: darkMode ? <DarkNotfoundA theme={theme} /> : <LightNotfoundA theme={theme} />,
+      NotfoundB: darkMode ? <DarkNotfoundB theme={theme} /> : <LightNotfoundB theme={theme} />,
+      NotfoundC: darkMode ? <DarkNotfoundC theme={theme} /> : <LightNotfoundC theme={theme} />
+    },
     Pricing: {
       PricingA: darkMode ? <DarkPricingA theme={theme} /> : <LightPricingA theme={theme} />,
       PricingB: darkMode ? <DarkPricingB theme={theme} /> : <LightPricingB theme={theme} />

src/blocks/notfound/dark/a.js

@@ -0,0 +1,43 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function DarkNotfoundA(props) {
+  return (
+    <section className="text-gray-400 bg-gray-900 body-font">
+      <div className="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
+        <img
+          className="lg:w-2/6 md:w-3/6 w-5/6 object-cover object-center rounded"
+          alt="404error"
+          src="https://cdn-icons.flaticon.com/png/512/3551/premium/3551629.png?token=exp=1658490083~hmac=bfcc1874209083ee667fff1e9f7f6d19"
+        />
+        <div className="text-center lg:w-2/3 w-full">
+          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
+            OOPS ! PAGE NOT FOUND
+          </h1>
+          <p className="leading-relaxed mb-8">
+            Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing
+            tousled. Chambray dreamcatcher trust fund, kitsch vice godard
+            disrupt ramps hexagon mustache umami snackwave tilde chillwave ugh.
+          </p>
+          <div className="flex justify-center">
+            <button
+              className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}
+            >
+              Button
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkNotfoundA.defaultProps = {
+  theme: "indigo",
+};
+
+DarkNotfoundA.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default DarkNotfoundA;

src/blocks/notfound/dark/b.js

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function DarkNotfoundB(props) {
+  return (
+    <section className="text-gray-400 bg-gray-900 body-font">
+      <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
+        <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 md:mb-0 mb-10">
+          <img
+            className="object-cover object-center rounded"
+            alt="404error"
+            src="https://cdn-icons.flaticon.com/png/512/3551/premium/3551629.png?token=exp=1658490083~hmac=bfcc1874209083ee667fff1e9f7f6d19"
+          />
+        </div>
+        <div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
+          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
+            OOPS ! <br className="hidden lg:inline-block"></br>
+            PAGE NOT FOUND
+          </h1>
+          <p className="mb-8 leading-relaxed">
+            Copper mug try-hard pitchfork pour-over freegan heirloom neutra air
+            plant cold-pressed tacos poke beard tote bag. Heirloom echo park
+            mlkshk tote bag selvage hot chicken authentic tumeric truffaut
+            hexagon try-hard chambray.
+          </p>
+          <div className="flex justify-center">
+            <button
+              className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}
+            >
+              Button
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkNotfoundB.defaultProps = {
+  theme: "indigo",
+};
+
+DarkNotfoundB.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default DarkNotfoundB;

src/blocks/notfound/dark/c.js

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function DarkNotfoundC(props) {
+  return (
+    <section className="text-gray-400 bg-gray-900 body-font">
+      <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
+        <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
+          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-white">
+            OOPS ! PAGE NOT FOUND
+          </h1>
+          <p className="mb-8 leading-relaxed">
+            Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid
+            swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
+            Chambray dreamcatcher trust fund, kitsch vice godard disrupt ramps
+            hexagon
+          </p>
+          <div className="flex w-full md:justify-start justify-center items-end">
+            <button
+              className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg mb-5`}
+            >
+              Button
+            </button>
+          </div>
+        </div>
+        <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
+          <img
+            className="object-cover object-center rounded"
+            alt="404error"
+            src="https://cdn-icons.flaticon.com/png/512/3551/premium/3551629.png?token=exp=1658490083~hmac=bfcc1874209083ee667fff1e9f7f6d19"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+DarkNotfoundC.defaultProps = {
+  theme: "indigo",
+};
+
+DarkNotfoundC.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default DarkNotfoundC;

src/blocks/notfound/light/a.js

@@ -0,0 +1,43 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function LightNotfoundA(props) {
+  return (
+    <section className="text-gray-600 body-font">
+      <div className="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
+        <img
+          className="lg:w-2/6 md:w-3/6 w-5/6  object-cover object-center rounded"
+          alt="404error"
+          src="https://cdn-icons.flaticon.com/png/512/3551/premium/3551629.png?token=exp=1658490083~hmac=bfcc1874209083ee667fff1e9f7f6d19"
+        />
+        <div className="text-center lg:w-2/3 w-full">
+          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
+            OOPS ! PAGE NOT FOUND
+          </h1>
+          <p className="mb-8 leading-relaxed">
+            Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing
+            tousled. Chambray dreamcatcher trust fund, kitsch vice godard
+            disrupt ramps hexagon mustache umami snackwave tilde chillwave ugh.
+          </p>
+          <div className="flex justify-center">
+            <button
+              className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}
+            >
+              Button
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightNotfoundA.defaultProps = {
+  theme: "indigo",
+};
+
+LightNotfoundA.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default LightNotfoundA;

src/blocks/notfound/light/b.js

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function LightNotfoundB(props) {
+  return (
+    <section className="text-gray-600 body-font">
+      <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
+        <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
+          <img
+            className="object-cover object-center rounded"
+            alt="404error"
+            src="https://cdn-icons.flaticon.com/png/512/3551/premium/3551629.png?token=exp=1658490083~hmac=bfcc1874209083ee667fff1e9f7f6d19"
+          />
+        </div>
+        <div className="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
+          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
+            OOPS ! <br className="hidden lg:inline-block"></br>
+            PAGE NOT FOUND
+          </h1>
+          <p className="mb-8 leading-relaxed">
+            Copper mug try-hard pitchfork pour-over freegan heirloom neutra air
+            plant cold-pressed tacos poke beard tote bag. Heirloom echo park
+            mlkshk tote bag selvage hot chicken authentic tumeric truffaut
+            hexagon try-hard chambray.
+          </p>
+          <div className="flex justify-center">
+            <button
+              className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg`}
+            >
+              Button
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightNotfoundB.defaultProps = {
+  theme: "indigo",
+};
+
+LightNotfoundB.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default LightNotfoundB;

src/blocks/notfound/light/c.js

@@ -0,0 +1,46 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+function LightNotfoundC(props) {
+  return (
+    <section className="text-gray-600 body-font">
+      <div className="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
+        <div className="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
+          <h1 className="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">
+            OOPS ! PAGE NOT FOUND
+          </h1>
+          <p className="mb-8 leading-relaxed">
+            Chillwave portland ugh, knausgaard fam polaroid iPhone. Man braid
+            swag typewriter affogato, hella selvage wolf narwhal dreamcatcher.
+            Chambray dreamcatcher trust fund, kitsch vice godard disrupt ramps
+            hexagon
+          </p>
+          <div className="flex w-full md:justify-start justify-center items-end">
+            <button
+              className={`inline-flex text-white bg-${props.theme}-500 border-0 py-2 px-6 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg mb-5`}
+            >
+              Button
+            </button>
+          </div>
+        </div>
+        <div className="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
+          <img
+            className="object-cover object-center rounded"
+            alt="404error"
+            src="https://cdn-icons.flaticon.com/png/512/3551/premium/3551629.png?token=exp=1658490083~hmac=bfcc1874209083ee667fff1e9f7f6d19"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+LightNotfoundC.defaultProps = {
+  theme: "indigo",
+};
+
+LightNotfoundC.propTypes = {
+  theme: PropTypes.string.isRequired,
+};
+
+export default LightNotfoundC;

src/icons/index.js

@@ -59,6 +59,10 @@ import HeroD from './hero/d';
 import HeroE from './hero/e';
 import HeroF from './hero/f';
 
+import NotfoundA from './notfound/a';
+import NotfoundB from './notfound/b';
+import NotfoundC from './notfound/c';
+
 import PricingA from './pricing/a';
 import PricingB from './pricing/b';
 
@@ -149,6 +153,11 @@ export default function getIcons() {
       HeroE: <HeroE />,
       HeroF: <HeroF />
     },
+    Notfound: {
+      NotfoundA: <NotfoundA />,
+      NotfoundB: <NotfoundB />,
+      NotfoundC: <NotfoundC />
+    },
     Pricing: {
       PricingA: <PricingA />,
       PricingB: <PricingB />

src/icons/notfound/a.js

@@ -0,0 +1,50 @@
+import React from "react"
+
+function NotfoundA() {
+  return (
+    <svg viewBox="0 0 266 150" fill="none">
+      <path fill="var(--solid)" d="M0 0h266v150H0z" />
+      <rect
+        x={117}
+        y={114}
+        width={29}
+        height={10}
+        rx={2}
+        fill="var(--main-500)"
+      />
+      <rect
+        x={81}
+        y={92}
+        width={104}
+        height={4}
+        rx={2}
+        fill="var(--base-500)"
+      />
+      <rect
+        x={97}
+        y={81}
+        width={72}
+        height={5}
+        rx={2.5}
+        fill="var(--solid-900)"
+      />
+      <rect
+        x={94}
+        y={100}
+        width={77}
+        height={4}
+        rx={2}
+        fill="var(--base-500)"
+      />
+      <path
+        d="M119.778 61h26.444A3.778 3.778 0 00150 57.222V30.778A3.778 3.778 0 00146.222 27h-26.444A3.778 3.778 0 00116 30.778v26.444A3.778 3.778 0 00119.778 61zm0 0l20.778-20.778L150 49.667m-20.778-12.278a2.833 2.833 0 11-5.666 0 2.833 2.833 0 015.666 0z"
+        stroke="var(--base-500)"
+        strokeWidth={3}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default NotfoundA;