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";
@@ -20,10 +21,10 @@ export default function App() {
   }, []);
 
   return (
-    <>
+    <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",
@@ -284,6 +285,6 @@ export default function App() {
       ]}
     />
   </div>
-    </>
+    </div>
   );
 }

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>

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%;
+  }
+}