frontend redesign, implementing tailwind accross app, added shared component

frontend/colorScheme

@@ -0,0 +1,98 @@
+##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>
+  );
+}
+--