Merge pull request #20 from OwethuManagedServices/dev

Dev

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">

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">

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">

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">

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">

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

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

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 = {