Bob AI: Add a dynamic, animated background to the website for visual

src/App.tsx

@@ -20,7 +20,7 @@ export default function App() {
   }, []);
 
   return (
-    <>
+    <div className="app-container">
   <div id="nav" data-section="nav">
       <NavbarCentered
       logo="Apex Plumbing"
@@ -284,6 +284,6 @@ export default function App() {
       ]}
     />
   </div>
-    </>
+    </div>
   );
 }

src/index.css

@@ -143,6 +143,26 @@ body {
   overscroll-behavior-y: none;
 }
 
+.app-container {
+  position: relative;
+  isolation: isolate;
+}
+
+.app-container::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background: linear-gradient(
+    60deg,
+    var(--background) 0%,
+    var(--accent) 50%,
+    var(--background) 100%
+  );
+  background-size: 400% 400%;
+  animation: moveGradient 15s ease infinite;
+}
+
 h1,
 h2,
 h3,

src/styles/animations.css

@@ -203,3 +203,15 @@
     left: 125%;
   }
 }
+
+@keyframes moveGradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}