From 860a895e4501df8e82580c7401052978da4f2971 Mon Sep 17 00:00:00 2001
From: JohannesOmsDev <johannesm@oms.africa>
Date: Tue, 27 May 2025 02:56:04 +0200
Subject: [PATCH] new colors and some minor fixes

---
 app/(website)/_components/CallToActionSection.tsx     | 2 +-
 app/(website)/about/page.tsx                          | 2 +-
 app/(website)/obse/page.tsx                           | 7 +++++--
 app/(website)/services/product-development/page.tsx   | 4 ++--
 app/(website)/services/resource-augmentation/page.tsx | 4 ++--
 components/Footer.tsx                                 | 4 ++--
 components/HeaderClient.tsx                           | 6 +++---
 components/ui/Button.tsx                              | 5 ++++-
 8 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/app/(website)/_components/CallToActionSection.tsx b/app/(website)/_components/CallToActionSection.tsx
index 859aaac..7d8887c 100644
--- a/app/(website)/_components/CallToActionSection.tsx
+++ b/app/(website)/_components/CallToActionSection.tsx
@@ -17,7 +17,7 @@ const CallToActionSection: React.FC<CallToActionSectionProps> = ({
 }) => {
   return (
     // Use primary background, primary-foreground for text
-    <section className="bg-primary text-primary-foreground py-16 md:py-20">
+    <section className="bg-[linear-gradient(to_right,#ead566,#e0be45)] text-primary-foreground py-16 md:py-20">
       {" "}
       {/* Adjusted padding */}
       <div className="container mx-auto px-4 sm:px-6 lg:px-8 text-center">
diff --git a/app/(website)/about/page.tsx b/app/(website)/about/page.tsx
index ada774e..63c568d 100644
--- a/app/(website)/about/page.tsx
+++ b/app/(website)/about/page.tsx
@@ -511,7 +511,7 @@ export default function AboutUsPage() {
       */}
       {/* Section 10: Commitment to Impact (Optional, but adds value) */}
       <section
-        className="py-16 md:py-24 bg-gold-500 text-gray-900 dark:bg-gold-600 dark:text-gray-900"
+        className="py-16 md:py-24 bg-[linear-gradient(to_right,#ead566,#e0be45)] text-gray-900 dark:bg-gold-600 dark:text-gray-900"
         style={{ backgroundColor: "#e1c44a" }}
       >
         <div className="container mx-auto px-6 text-center">
diff --git a/app/(website)/obse/page.tsx b/app/(website)/obse/page.tsx
index c3bab52..64f40dc 100644
--- a/app/(website)/obse/page.tsx
+++ b/app/(website)/obse/page.tsx
@@ -230,6 +230,7 @@ const useCases = [
 ];
 
 export default function ObsePage() {
+  
   return (
     <div className="bg-white text-gray-800 overflow-x-hidden dark:bg-gray-900 dark:text-gray-200 font-poppins">
       {/* 1. Hero Section */}
@@ -255,12 +256,14 @@ export default function ObsePage() {
           <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
             <Link
               href="https://youtu.be/Sd3TnvoLtDA?si=UOeXScbosM5LZxbg" // Link to the "How it Works" section
-              className="inline-flex items-center justify-center bg-gold-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
+              className="inline-flex items-center justify-center bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
               style={{ backgroundColor: COLORS.primary }}
             >
               <FaPlayCircle className="inline mr-2 text-red-400" /> See How It
               Works
             </Link>
+            
+
             {/* Optional Mini-CTA */}
             {/* <Link href="#overview-video" className="inline-flex items-center text-gold-400 hover:text-gold-300 transition-colors duration-300">
               <FaPlayCircle className="mr-2" /> Watch a Quick Overview
@@ -718,7 +721,7 @@ export default function ObsePage() {
 
       {/* 12. Call to Action (CTA) Section */}
       <section
-        className="py-16 md:py-24 bg-gold-500 text-gray-900"
+        className="py-16 md:py-24 bg-[linear-gradient(to_right,#ead566,#e0be45)] text-gray-900"
         style={{ backgroundColor: COLORS.primary }}
       >
         <div className="container mx-auto px-6 text-center">
diff --git a/app/(website)/services/product-development/page.tsx b/app/(website)/services/product-development/page.tsx
index fbea449..7880d66 100644
--- a/app/(website)/services/product-development/page.tsx
+++ b/app/(website)/services/product-development/page.tsx
@@ -323,7 +323,7 @@ export default function ProductDevelopmentPage() {
           <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
             <Link
               href="#how-we-deliver"
-              className="inline-flex items-center justify-center bg-gold-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
+              className="inline-flex items-center justify-center bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
               style={{ backgroundColor: COLORS.primary }}
             >
               How We Deliver
@@ -511,7 +511,7 @@ export default function ProductDevelopmentPage() {
 
       {/* 10. Call to Action (CTA) Section */}
       <section
-        className="py-16 md:py-24 bg-gold-500 text-gray-900"
+        className="py-16 md:py-24 bg-[linear-gradient(to_right,#ead566,#e0be45)] text-gray-900"
         style={{ backgroundColor: COLORS.primary }}
       >
         <div className="container mx-auto px-6 text-center">
diff --git a/app/(website)/services/resource-augmentation/page.tsx b/app/(website)/services/resource-augmentation/page.tsx
index 4e78093..9b27a31 100644
--- a/app/(website)/services/resource-augmentation/page.tsx
+++ b/app/(website)/services/resource-augmentation/page.tsx
@@ -390,7 +390,7 @@ export default function ResourceAugmentationPage() {
           <div className="flex flex-col sm:flex-row justify-center items-center gap-4">
             <Link
               href="#service-models" // Link to the service models section
-              className="inline-flex items-center justify-center bg-gold-500 text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
+              className="inline-flex items-center justify-center bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-gray-900 font-bold py-3 px-8 rounded-md hover:bg-gold-600 transition-colors duration-300"
               style={{ backgroundColor: COLORS.primary }}
             >
               Explore Our Models <FaArrowRight className="ml-2" />
@@ -807,7 +807,7 @@ export default function ResourceAugmentationPage() {
 
       {/* 10. Call to Action (CTA) Section */}
       <section
-        className="py-16 md:py-24 bg-gold-500 text-gray-900"
+        className="py-16 md:py-24 bg-[linear-gradient(to_right,#ead566,#e0be45)] text-gray-900"
         style={{ backgroundColor: COLORS.primary }}
       >
         <div className="container mx-auto px-6 text-center">
diff --git a/components/Footer.tsx b/components/Footer.tsx
index a3e34ca..cd5006d 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -183,7 +183,7 @@ const Footer = () => {
           h-full
           px-4
           rounded-r-lg  
-          bg-primary
+          bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] 
           text-primary-foreground
           font-semibold
           hover:bg-opacity-90
@@ -244,4 +244,4 @@ const Footer = () => {
 };
 
 export default Footer;
-//Data-Privacy-Statement-for-Candidates
\ No newline at end of file
+//Data-Privacy-Statement-for-Candidates
diff --git a/components/HeaderClient.tsx b/components/HeaderClient.tsx
index 51cd483..d8066d2 100644
--- a/components/HeaderClient.tsx
+++ b/components/HeaderClient.tsx
@@ -149,7 +149,7 @@ const HeaderClient = () => {
             <ThemeToggle />
             <Link
               href="/contact"
-              className="flex items-center text-sm font-medium bg-primary text-primary-foreground px-3 py-1.5 rounded-lg hover:bg-opacity-90 transition-colors"
+              className="flex items-center text-sm font-medium bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-primary-foreground px-3 py-1.5 rounded-lg hover:bg-opacity-90 transition-colors"
               title="Request a Demo"
             >
               <FiClipboard className="w-4 h-4 mr-1.5" />
@@ -177,7 +177,7 @@ const HeaderClient = () => {
       </div>
 
       {/* Secondary Row w/ Mega Menus */}
-      <div className="bg-primary relative">
+      <div className="bg-[linear-gradient(to_right,#dec750,#f0de7e,#e1c44a)] relative">
         <div className="container mx-auto px-4 sm:px-6 lg:px-8">
           <div className="hidden md:flex justify-between items-center h-12">
             {/* Wrap nav and link in a flex container */}
@@ -447,7 +447,7 @@ const HeaderClient = () => {
             <Link
               href="/contact"
               onClick={handleMobileLinkClick}
-              className="flex w-full justify-center items-center text-sm font-medium bg-primary text-primary-foreground px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors"
+              className="flex w-full justify-center items-center text-sm font-medium bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-primary-foreground px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors"
               title="Request a Demo"
             >
               <FiClipboard className="w-4 h-4 mr-1.5" /> Request OBSE Demo
diff --git a/components/ui/Button.tsx b/components/ui/Button.tsx
index 85b744b..de0253c 100644
--- a/components/ui/Button.tsx
+++ b/components/ui/Button.tsx
@@ -24,13 +24,16 @@ const Button: React.FC<ButtonProps> = ({
 
   // Variant styles using semantic vars (Tailwind classes generated via @theme)
   const variantStyles = {
-    primary: "bg-primary text-primary-foreground hover:bg-primary/90", // bg-primary generated from --primary
+    //primary: "bg-primary text-primary-foreground hover:bg-primary/90", // bg-primary generated from --primary
+    primary: "bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] text-primary-foreground hover:bg-primary/90",
     secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
     outline:
       "border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
     ghost: "hover:bg-accent hover:text-accent-foreground",
     destructive:
       "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+      //linear-gradient(to right, #ead566, #e0be45) created using Tailwind's gradient utilities
+      //i want that variant
   };
 
   const sizeStyles = {