refactor: create gradient-bg CSS class and use it

public/services/estimates.mdx

@@ -23,13 +23,13 @@ Traditional project estimates relies on predicting the future based on mere assu
 
 
 <C>
-Giving you a full budget estimates is literally impossible, unless, we did the same exact thing before with the exact same variables, reality says that never happens.
+Giving you a full budget estimates is literally impossible, unless, we did the same exact thing before with the exact same variables. Reality says that never happens.
 </C>
 
 <C>
-Instead, we provide you two weeks estimates, based on the sum of all the tasks data, and since tasks are [billable](), the estimate comes with a monetary range, but not more than that, maybe a month only and only if we have enough data. What we can guarantee is a [transparent]() view of our progress and costs. What we can also guarantee is a working software multiple times a day/week, you don't have to wait for your software to be delivered by the end of the year as a black box, no, you see it in real time, you see every little detail, and you can pause it at any moment, continue at any moment, take it off at any moment, it's still [transferrable](). 
+Instead, we provide you two weeks estimates, based on the sum of all the tasks data (using <L href='https://en.wikipedia.org/wiki/Program_evaluation_and_review_technique'>PERT</L>), and since tasks are [billable](), the estimate comes with a monetary range, but not more than that, maybe a month only and only if we have enough data. What we can guarantee is a <L href='/services/transparency'>transparent</L> view of our progress and costs. What we can also guarantee is a working software multiple times a day/week, you don't have to wait for your software to be delivered by the end of the year as a black box. No, you see it in real time, you see every little detail, and you can pause it at any moment, continue at any moment, take it off at any moment, it's still <L href='/blog/code-silos'>transferrable.</L> 
 </C>
 
 <C>
-Rather than predicting how much can be done within an arbitrarily amount of time, based on nothing. We can forecast project progress more accurately by monitoring the rate  in terms of [measurable](http://localhost:3000/services/glossary#ticket-system) [deliverables.](http://localhost:3000/blog/management-skill-issues#conclusion) in real-time, and adjust priorities accordingly.
+Rather than predicting how much can be done within an arbitrarily amount of time, based on nothing. We can forecast project progress more accurately by monitoring the rate  in terms of <L href='/services/glossary#ticket-system'>measurable</L> <L href='/blog/management-skill-issues#conclusion'>deliverables</L> in real-time, and adjust priorities accordingly.
 </C>

src/app/components/protos/hero-section.tsx

@@ -365,6 +365,18 @@ import { Button } from '../ui/button';
 
 /* eslint-disable */
 
+/* eslint-disable */
+
+/* eslint-disable */
+
+/* eslint-disable */
+
+/* eslint-disable */
+
+/* eslint-disable */
+
+/* eslint-disable */
+
 function TypingAnimation() {
   const el = useRef(null);
 

src/app/components/reusables/code/code-block.tsx

@@ -108,6 +108,36 @@ import CopyButton from './copy-code';
 
 // react-syntax-highlighter has no types
 
+/* eslint-disable */
+// @ts-nocheck
+
+// react-syntax-highlighter has no types
+
+/* eslint-disable */
+// @ts-nocheck
+
+// react-syntax-highlighter has no types
+
+/* eslint-disable */
+// @ts-nocheck
+
+// react-syntax-highlighter has no types
+
+/* eslint-disable */
+// @ts-nocheck
+
+// react-syntax-highlighter has no types
+
+/* eslint-disable */
+// @ts-nocheck
+
+// react-syntax-highlighter has no types
+
+/* eslint-disable */
+// @ts-nocheck
+
+// react-syntax-highlighter has no types
+
 /* eslint-disable */
 // @ts-nocheck
 SyntaxHighlighter.registerLanguage('rust', rust);

src/app/opengraph-image.tsx

@@ -10,24 +10,8 @@ export const contentType = 'image/png';
 export default async function Image() {
   return new ImageResponse(
     (
-      <div
-        style={{
-          fontSize: 128,
-          background: 'black',
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <span
-          style={{
-            color: 'white',
-          }}
-        >
-          A S H G W
-        </span>
+      <div className="text-[128px] dimmed-4 gradient-bg w-full h-full flex items-center justify-center">
+        <span>A S H G W</span>
       </div>
     ),
     {

src/app/styles/globals.css

@@ -5,6 +5,15 @@
 @import url('./hamburger.css');
 
 @layer base {
+  .gradient-bg {
+    background: linear-gradient(
+      84.16deg,
+      rgba(150, 46, 200, 0.15),
+      rgba(255, 215, 111, 0.042),
+      rgba(150, 0, 100, 0.1)
+    );
+  }
+
   :root {
     --background: 0 0% 100%;
     --foreground: 0 0% 3.9%;
@@ -62,15 +71,9 @@
     font-family: 'Zapf Dingbats';
     scroll-behavior: smooth;
     min-height: 100vh;
-    background: linear-gradient(
-      84.16deg,
-      rgba(150, 46, 200, 0.15),
-      rgba(255, 215, 111, 0.042),
-      rgba(150, 0, 100, 0.1)
-    );
   }
 
   body {
-    @apply bg-background text-foreground text-xl;
+    @apply gradient-bg text-foreground text-xl;
   }
 }