##color scheme across all components based on the Home page design.

--
 We can create a colors file to maintain consistency
 color.js	
export const colors = {
  primary: {
    light: '#3B82F6',   // blue-500
    DEFAULT: '#2563EB', // blue-600
    dark: '#1D4ED8',    // blue-700
    darker: '#1E40AF'   // blue-800
  },
  background: {
    light: '#F9FAFB',   // gray-50
    DEFAULT: '#F3F4F6', // gray-100
    dark: '#E5E7EB'     // gray-200
  },
  text: {
    primary: '#1F2937', // gray-800
    secondary: '#4B5563', // gray-600
    light: '#9CA3AF'    // gray-400
  },
  white: '#FFFFFF',
  black: '#000000'
}
--

--
common component style
common.js
export const commonStyles = {
  // Container
  container: "container mx-auto px-4",
  
  // Section Headers
  sectionHeader: "text-center mb-16",
  sectionTitle: "text-3xl md:text-4xl font-bold text-gray-800 mb-4",
  sectionDivider: "w-24 h-1 bg-blue-600 mx-auto",
  
  // Cards
  card: "bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300",
  
  // Buttons
  primaryButton: "bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-semibold transition-colors duration-300",
  secondaryButton: "bg-white/10 hover:bg-white/20 text-white px-8 py-3 rounded-full font-semibold transition-colors duration-300",
  
  // Gradients
  primaryGradient: "bg-gradient-to-r from-blue-900/90 to-blue-600/80",
  
  // Text
  heading1: "text-4xl md:text-6xl font-bold",
  heading2: "text-3xl md:text-4xl font-bold",
  heading3: "text-2xl font-semibold",
  paragraph: "text-gray-600"
}
--

--
reusable section header component
SectionHeader.jsx
// Reusable section header component
export function SectionHeader({ title, subtitle }) {
  return (
    <div className="text-center mb-16">
      <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
        {title}
      </h2>
      <div className="w-24 h-1 bg-blue-600 mx-auto mb-8"></div>
      {subtitle && (
        <p className="text-gray-600 max-w-2xl mx-auto">
          {subtitle}
        </p>
      )}
    </div>
  );
}

--
reusable button component
// Reusable button component
export function Button({ variant = 'primary', children, ...props }) {
  const baseStyles = "px-8 py-3 rounded-full font-semibold transition-colors duration-300";
  const variants = {
    primary: "bg-blue-600 hover:bg-blue-700 text-white",
    secondary: "bg-white/10 hover:bg-white/20 text-white",
    outline: "border-2 border-blue-600 text-blue-600 hover:bg-blue-50"
  };

  return (
    <button 
      className={`${baseStyles} ${variants[variant]}`} 
      {...props}
    >
      {children}
    </button>
  );
}
--