Update src/providers/themeProvider/ThemeProvider.tsx

src/providers/themeProvider/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { createContext, useContext, useState } from 'react';
 
 interface SocialLink {
   platform: string;
@@ -20,6 +20,40 @@ interface TeamCardProps {
   member: TeamMember;
 }
 
+interface ThemeContextType {
+  defaultButtonVariant?: string;
+  defaultTextAnimation?: string;
+  borderRadius?: string;
+  contentWidth?: string;
+  sizing?: string;
+  background?: string;
+  cardStyle?: string;
+  primaryButtonStyle?: string;
+  secondaryButtonStyle?: string;
+  headingFontWeight?: string;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function useTheme(): ThemeContextType {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    return {
+      defaultButtonVariant: 'text-stagger',
+      defaultTextAnimation: 'entrance-slide',
+      borderRadius: 'rounded',
+      contentWidth: 'medium',
+      sizing: 'medium',
+      background: 'circleGradient',
+      cardStyle: 'glass-elevated',
+      primaryButtonStyle: 'gradient',
+      secondaryButtonStyle: 'glass',
+      headingFontWeight: 'normal'
+    };
+  }
+  return context;
+}
+
 function TeamCard({ member }: TeamCardProps) {
   const [isFlipped, setIsFlipped] = useState(false);
 
@@ -136,22 +170,37 @@ export function ThemeProvider({
   const radiusClass = borderRadiusClasses[borderRadius as keyof typeof borderRadiusClasses] || borderRadiusClasses.soft;
   const widthClass = contentWidthClasses[contentWidth as keyof typeof contentWidthClasses] || contentWidthClasses.medium;
 
+  const themeValue: ThemeContextType = {
+    defaultButtonVariant,
+    defaultTextAnimation,
+    borderRadius,
+    contentWidth,
+    sizing,
+    background,
+    cardStyle,
+    primaryButtonStyle,
+    secondaryButtonStyle,
+    headingFontWeight,
+  };
+
   return (
-    <div
-      className={`${bgClass} min-h-screen transition-colors duration-300`}
-      style={{
-        '--default-button-variant': defaultButtonVariant,
-        '--default-text-animation': defaultTextAnimation,
-        '--card-style': cardStyle,
-        '--primary-button-style': primaryButtonStyle,
-        '--secondary-button-style': secondaryButtonStyle,
-        '--heading-font-weight': headingFontWeight,
-      } as React.CSSProperties}
-    >
-      <div className={`${widthClass} mx-auto px-4 sm:px-6 lg:px-8`}>
-        {children}
+    <ThemeContext.Provider value={themeValue}>
+      <div
+        className={`${bgClass} min-h-screen transition-colors duration-300`}
+        style={{
+          '--default-button-variant': defaultButtonVariant,
+          '--default-text-animation': defaultTextAnimation,
+          '--card-style': cardStyle,
+          '--primary-button-style': primaryButtonStyle,
+          '--secondary-button-style': secondaryButtonStyle,
+          '--heading-font-weight': headingFontWeight,
+        } as React.CSSProperties}
+      >
+        <div className={`${widthClass} mx-auto px-4 sm:px-6 lg:px-8`}>
+          {children}
+        </div>
       </div>
-    </div>
+    </ThemeContext.Provider>
   );
 }