From b7fb8ae000fdd52ab65cf8e6772ec5a860eac58e Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 20 Apr 2026 09:53:11 +0000
Subject: [PATCH 1/2] Bob AI: Add a dynamic, animated background to the website
 for visual

---
 src/App.tsx               |  4 ++--
 src/index.css             | 20 ++++++++++++++++++++
 src/styles/animations.css | 12 ++++++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1f8b0e3..771909b 100644
--- a/src/App.tsx
+++ b/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>
   );
 }
diff --git a/src/index.css b/src/index.css
index 40087b1..09a346b 100644
--- a/src/index.css
+++ b/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,
diff --git a/src/styles/animations.css b/src/styles/animations.css
index 15ecdc1..1b756ab 100644
--- a/src/styles/animations.css
+++ b/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%;
+  }
+}
-- 
2.49.1


From b52d081d32b70c9746164cfb34e558bb3b738a7e Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 20 Apr 2026 09:54:55 +0000
Subject: [PATCH 2/2] Bob AI: Integrate the uploaded image as the website's
 logo.

---
 src/App.tsx         |  3 ++-
 src/assets/logo.svg | 11 +++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/logo.svg

diff --git a/src/App.tsx b/src/App.tsx
index 771909b..6b701ab 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,6 +6,7 @@ import FooterSimpleMedia from '@/components/sections/footer/FooterSimpleMedia';
 import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
 import MetricsSimpleCards from '@/components/sections/metrics/MetricsSimpleCards';
 import NavbarCentered from '@/components/ui/NavbarCentered';
+import logoImg from "@/assets/logo.svg";
 import TestimonialRatingCards from '@/components/sections/testimonial/TestimonialRatingCards';
 import { Droplets, Flame, Wrench } from "lucide-react";
 import { useEffect } from "react";
@@ -23,7 +24,7 @@ export default function App() {
     <div className="app-container">
   <div id="nav" data-section="nav">
       <NavbarCentered
-      logo="Apex Plumbing"
+      logo={<img src={logoImg} alt="Apex Plumbing" className="h-8 w-auto" />}
       navItems={[
         {
           name: "Services",
diff --git a/src/assets/logo.svg b/src/assets/logo.svg
new file mode 100644
index 0000000..e1cb6b0
--- /dev/null
+++ b/src/assets/logo.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="150" height="30" viewBox="0 0 150 30">
+  <style>
+    .text {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+      font-size: 20px;
+      font-weight: 600;
+      fill: #001122;
+    }
+  </style>
+  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" class="text">Apex Plumbing</text>
+</svg>
\ No newline at end of file
-- 
2.49.1