fix(components-Footer): change Footer background gradient style (#929)

components/Footer/Footer.tsx

@@ -19,7 +19,7 @@ const Footer = ({
 }: Props): JSX.Element => (
   <Container
     role="grid"
-    className="max-w-full bg-gray-900 p-8 text-center text-light dark:bg-black lg:p-20"
+    className="bg-gradient-secondary max-w-full p-8 text-center text-light lg:p-20"
   >
     <Row align="middle" justify="center">
       <Col span={24}>

components/Footer/__snapshots__/Footer.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Footer should render correctly (snapshot) 1`] = `
 <div>
   <div
-    class="p-auto container relative mx-auto my-0 block h-full max-w-full bg-gray-900 p-8 text-center text-light dark:bg-black lg:p-20"
+    class="p-auto container relative mx-auto my-0 block h-full bg-gradient-secondary max-w-full p-8 text-center text-light lg:p-20"
     role="grid"
   >
     <div

layouts/__snapshots__/Layout.test.tsx.snap

@@ -418,7 +418,7 @@ exports[`Layout should render correctly (snapshot) 1`] = `
       </div>
     </div>
     <div
-      class="p-auto container relative mx-auto my-0 block h-full max-w-full bg-gray-900 p-8 text-center text-light dark:bg-black lg:p-20"
+      class="p-auto container relative mx-auto my-0 block h-full bg-gradient-secondary max-w-full p-8 text-center text-light lg:p-20"
       role="grid"
     >
       <div

layouts/__snapshots__/PostLayout.test.tsx.snap

@@ -407,7 +407,7 @@ exports[`PostLayout should render correctly (snapshot) 1`] = `
       />
     </div>
     <div
-      class="p-auto container relative mx-auto my-0 block h-full max-w-full bg-gray-900 p-8 text-center text-light dark:bg-black lg:p-20"
+      class="p-auto container relative mx-auto my-0 block h-full bg-gradient-secondary max-w-full p-8 text-center text-light lg:p-20"
       role="grid"
     >
       <div

styles/globals.css

@@ -90,6 +90,22 @@
     @apply bg-gradient-to-r from-indigo-700 to-red-500;
   }
 
+  .bg-gradient-secondary {
+    @apply border-b-5 border-solid border-primary;
+
+    background: linear-gradient(63deg, #262626 23%, transparent 0) 7px 0,
+      linear-gradient(63deg, transparent 73%, #262626 76%),
+      linear-gradient(
+        63deg,
+        transparent 34%,
+        #262626 38%,
+        #262626 58%,
+        transparent 62%
+      ),
+      #222;
+    background-size: 16px 48px;
+  }
+
   .flex-container {
     @apply flex flex-row flex-wrap content-center items-center justify-center;
   }