Bob AI: Introduce gradients to key UI elements such as buttons, head

src/App.tsx

@@ -38,6 +38,7 @@ export default function App() {
       ctaButton={{
         text: "Emergency Help",
         href: "#contact",
+        className: "animated-gradient-button",
       }}
     />
   </div>
@@ -50,6 +51,7 @@ export default function App() {
       primaryButton={{
         text: "Schedule Service Now",
         href: "#contact",
+        className: "animated-gradient-button",
       }}
       secondaryButton={{
         text: "Get Emergency Help",
@@ -163,7 +165,7 @@ export default function App() {
     />
   </div>
 
-  <div id="pricing" data-section="pricing">
+  <div id="pricing" data-section="pricing" className="gradient-card">
       <PricingHighlightedCards
       tag="Fair Pricing"
       title="Simple, Upfront Pricing"
@@ -181,6 +183,7 @@ export default function App() {
           primaryButton: {
             text: "Book Now",
             href: "#contact",
+            className: "animated-gradient-button",
           },
         },
         {
@@ -197,6 +200,7 @@ export default function App() {
           primaryButton: {
             text: "Choose Plan",
             href: "#contact",
+            className: "animated-gradient-button",
           },
         },
         {
@@ -211,6 +215,7 @@ export default function App() {
           primaryButton: {
             text: "Call Now",
             href: "#contact",
+            className: "animated-gradient-button",
           },
         },
       ]}

src/index.css

@@ -8,12 +8,13 @@
   --background: #ffffff;
   --card: #f9f9f9;
   --foreground: #000612e6;
-  --primary-cta: #106EFB;
+  --primary-cta: linear-gradient(135deg, #106EFB 0%, #053A8C 100%);
   --primary-cta-text: #ffffff;
   --secondary-cta: #f9f9f9;
   --secondary-cta-text: #000612e6;
   --accent: #e2e2e2;
-  --background-accent: #106EFB;
+  --background-accent: linear-gradient(135deg, #106EFB 0%, #053A8C 100%);
+  --card-gradient: linear-gradient(145deg, var(--card), color-mix(in srgb, #106EFB 5%, var(--card)));
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;
@@ -161,10 +162,15 @@ h6 {
   box-shadow: color-mix(in srgb, var(--color-foreground) 5%, transparent) 0px 4px 32px 0px;
 }
 
+.gradient-card .card {
+  background: var(--card-gradient);
+}
+
 /* WEBILD_PRIMARY_BUTTON */
 /* @primaryButtons/accent-edge */
 .primary-button {
-  background: linear-gradient(180deg, var(--color-primary-cta) 0%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 100%);
+  background: var(--color-primary-cta);
+  background-size: 200% auto;
   box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 60%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--color-accent) 35%, transparent), inset 0 1px 0 0 color-mix(in srgb, var(--color-foreground) 20%, transparent);
 }
 

src/styles/animations.css

@@ -156,3 +156,19 @@
 .animate-marquee-horizontal-reverse {
   animation: marquee-horizontal-reverse 15s linear infinite;
 }
+
+@keyframes gradient-shift {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+.animated-gradient-button:hover {
+  animation: gradient-shift 4s ease infinite;
+}